/* Theme Name: Blaze Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.9 Requires PHP: 8.1 Text Domain: blaze License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* ========================================================================== 0. Fonts 3. Header 6. Shared blocks 9. Name tool 1. Tokens 4. Footer 7. Article list 10. Editor content 2. Base/layout 5. Home 8. Article detail 11. Responsive ========================================================================== */ /* 0. FONTS ================================================================ Self-hosted latin subset: no third-party request on any page, no render- blocking stylesheet, ~50 KB total for the whole set. Paths are relative to this file so the theme folder can be renamed freely. */ @font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap; src:url(assets/fonts/anton-400.woff2) format('woff2')} @font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap; src:url(assets/fonts/poppins-400.woff2) format('woff2')} @font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap; src:url(assets/fonts/poppins-600.woff2) format('woff2')} @font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap; src:url(assets/fonts/poppins-700.woff2) format('woff2')} @font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap; src:url(assets/fonts/poppins-800.woff2) format('woff2')} /* 1. TOKENS ================================================================ */ :root{ --ink:#111114; --ink-2:#33333a; --ink-3:#4a4a52; --muted:#6b6b72; --muted-2:#8b8b95; --line:#f0eff2; --line-2:#e9e7ee; --line-3:#ededed; --surface:#fff; --surface-2:#faf9fb; --dark:#141416; --dark-2:#1d1d20; --dark-3:#2c2c31; --yellow:#ffb300; --yellow-lt:#ffd75e; --orange:#ff7a00; --orange-dp:#ff5a1f; --pink:#e91e8c; --pink-2:#ff2d6a; --purple:#a855f7; --purple-lt:#c084fc; --grad-brand:linear-gradient(96deg,#ff7a00 0%,#ff2d6a 34%,#e91e8c 58%,#a855f7 92%); --grad-gold:linear-gradient(90deg,#ffd75e,#ffb300); --grad-cta:linear-gradient(96deg,#ffc61a 0%,#ff9a00 42%,#ff3d8f 100%); --shell:1024px; --gutter:clamp(15px,3vw,26px); --block:clamp(26px,4vw,44px); --r-sm:8px; --r:11px; --r-md:14px; --r-lg:16px; --r-xl:22px; --shadow-sm:0 8px 22px rgba(0,0,0,.05); --shadow:0 10px 26px rgba(0,0,0,.06); --shadow-lg:0 18px 40px rgba(0,0,0,.16); --ease:.18s ease; --fs-body:17px; --fs-lead:clamp(17px,1.7vw,19px); --fs-small:13px; --fs-meta:11.5px; } /* 2. BASE / LAYOUT ========================================================= */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:var(--fs-body); color:var(--ink); background:#fbfaf9; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg,video,iframe{max-width:100%;display:block} img{height:auto} a{color:var(--pink);text-decoration:none;transition:color var(--ease)} a:hover{color:var(--orange)} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,textarea,select{font:inherit} p{margin:0;font-size:var(--fs-body);line-height:1.8;color:var(--ink-2);text-wrap:pretty} ol,ul{margin:0} :focus-visible{outline:3px solid rgba(255,179,0,.7);outline-offset:2px} .ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em;fill:none} /* The page box is the positioning context for the decorative shards. It must NOT clip: `overflow:hidden` here lands on , which propagates to the viewport (killing scroll) and turns every sticky sidebar into a static one. The shards are clipped by .deco instead, and body's overflow-x by the rule above catches anything that reaches sideways. */ .canvas{position:relative;min-height:100vh} .canvas--home{background: radial-gradient(900px 420px at 8% 14%,#fff8e6 0,rgba(255,248,230,0) 60%), radial-gradient(760px 500px at 96% 62%,#f6ecff 0,rgba(246,236,255,0) 62%), radial-gradient(700px 400px at 50% 100%,#fff0f8 0,rgba(255,240,248,0) 60%),#fbfaf9} .canvas--list,.canvas--detail{background: radial-gradient(760px 380px at 6% 8%,#fff8e6 0,rgba(255,248,230,0) 62%), radial-gradient(700px 460px at 98% 46%,#f6ecff 0,rgba(246,236,255,0) 62%),#fbfaf9} .shell{position:relative;z-index:3;width:100%;max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter)} .section{padding-top:var(--block)} .section--last{padding-bottom:var(--block)} .h-display{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.4px;line-height:1.06;color:var(--ink);transform:skewX(-8deg);text-wrap:pretty} .h1{font-size:clamp(30px,6.4vw,54px)} .h2{font-size:clamp(21px,3.4vw,31px)} .h3{font-size:clamp(19px,2.6vw,24px)} .grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent} .grad--gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent} .lead{font-size:var(--fs-lead);line-height:1.75;color:var(--ink-3)} .sr-only,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link:focus{position:fixed;top:10px;left:10px;z-index:100;width:auto;height:auto;clip:auto;margin:0; padding:12px 18px;background:var(--ink);color:#fff;border-radius:var(--r);font-size:var(--fs-small);font-weight:700} /* decorative shards / dots — CSS only, no images */ .deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .deco i{position:absolute;display:block} .bolt-a{top:-40px;left:-70px;width:270px;height:400px;background:linear-gradient(160deg,#ffc61a,#ffa500);clip-path:polygon(38% 0,100% 12%,52% 44%,86% 46%,10% 100%,34% 52%,0 46%);opacity:.85} .bolt-b{top:-30px;right:-60px;width:280px;height:280px;background:linear-gradient(200deg,#ffc61a,#ffb300);clip-path:polygon(60% 0,100% 26%,44% 40%,90% 54%,16% 100%,40% 50%,0 34%);opacity:.8} .bolt-c{top:900px;left:-60px;width:190px;height:280px;background:linear-gradient(150deg,#c084fc,#a855f7);clip-path:polygon(44% 0,100% 18%,50% 44%,88% 50%,8% 100%,32% 52%,0 44%);opacity:.55} .bolt-d{top:1240px;right:-50px;width:165px;height:250px;background:linear-gradient(200deg,#e9d5ff,#c084fc);clip-path:polygon(58% 0,100% 24%,46% 42%,88% 52%,14% 100%,38% 50%,0 38%);opacity:.5} .dots-a{top:200px;right:8px;width:60px;height:112px;background-image:radial-gradient(var(--yellow) 1.6px,transparent 1.7px);background-size:11px 11px;opacity:.75} .dots-b{top:600px;left:10px;width:34px;height:120px;background-image:radial-gradient(var(--purple-lt) 1.6px,transparent 1.7px);background-size:11px 11px;opacity:.55} .ring-a{top:460px;right:18px;width:32px;height:32px;border:4px solid var(--ink);border-radius:50%;opacity:.85} .ring-b{top:690px;left:20px;width:30px;height:30px;border:4px solid var(--purple);border-radius:50%;opacity:.5} /* 3. HEADER =============================================================== */ .site-head{position:relative;z-index:20} .site-head__bar{display:flex;align-items:center;gap:clamp(12px,2vw,26px);padding-top:14px} /* width:fit-content keeps the block tight around the wordmark in the footer, where it is a plain block child rather than a flex item. */ .logo{flex:none;display:block;width:fit-content;background:var(--ink);padding:9px clamp(12px,2vw,18px) 12px;transform:rotate(-3deg); clip-path:polygon(2% 0,100% 3%,97% 100%,0 94%);box-shadow:0 6px 18px rgba(0,0,0,.18)} .logo span{display:block;font-family:Anton,Impact,sans-serif;letter-spacing:.5px;transform:skewX(-9deg)} .logo__a{font-size:clamp(19px,2.2vw,26px);line-height:.86;color:#fff} .logo__b{font-size:clamp(20px,2.3vw,27px);line-height:.9;background:linear-gradient(90deg,#ffd75e,#ffb300 55%,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent} .nav-wrap{flex:1;display:flex;justify-content:center;min-width:0} .nav{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.2vw,30px);flex-wrap:wrap;list-style:none;padding:0;margin:0} .nav a{display:flex;align-items:center;gap:7px;padding:6px 2px 9px;font-size:var(--fs-meta);font-weight:700; letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;color:var(--ink-3);border-bottom:3px solid transparent} .nav a:hover{color:var(--orange)} .nav .is-active>a,.nav a.is-active,.nav .current-menu-item>a,.nav .current_page_item>a, .nav .current-menu-ancestor>a{color:var(--ink);border-bottom-color:var(--yellow)} .nav .ico{width:13px;height:13px} .btn-lang{flex:none;display:flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:13px 22px; border-radius:var(--r);font-size:var(--fs-meta);font-weight:700;letter-spacing:.8px;box-shadow:0 8px 20px rgba(0,0,0,.22)} .btn-lang:hover{background:#2b2b2b;color:#fff} .btn-lang .ico{width:14px;height:14px} .burger{display:none;flex:none;width:44px;height:44px;place-items:center;border-radius:var(--r); background:var(--ink);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.2)} .burger .ico{width:17px;height:17px} .burger__close{display:none} .burger.is-open .burger__open{display:none} .burger.is-open .burger__close{display:block} .drawer{display:none;margin-top:12px;flex-direction:column;gap:4px;padding:10px;background:#fff; border:1.5px solid var(--yellow-lt);border-radius:var(--r-md);box-shadow:0 14px 32px rgba(0,0,0,.1)} .drawer.is-open{display:flex} .drawer__list{display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:0} .drawer a{display:flex;align-items:center;gap:11px;min-height:46px;padding:12px 14px;border-radius:10px; font-size:var(--fs-small);font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink);text-align:left} .drawer a:hover{background:#fff6dd;color:var(--ink)} .drawer .is-active>a,.drawer a.is-active,.drawer .current-menu-item>a{background:#fff6dd} .drawer .ico{width:16px;height:16px;color:var(--yellow)} .drawer__cta{background:var(--grad-gold)} .drawer__cta:hover{filter:brightness(1.04)} .drawer__cta .ico{color:var(--ink)} /* 4. FOOTER =============================================================== */ .site-foot{position:relative;z-index:3;background:var(--dark);margin-top:var(--block)} .site-foot__top{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px; padding:34px 0 26px;border-bottom:1px solid #26262b} .site-foot p{font-size:var(--fs-body);line-height:1.72;color:#9a9aa2;max-width:280px} .foot-col__t{font-size:var(--fs-meta);font-weight:800;letter-spacing:1px;color:#fff} .foot-col__links{margin-top:14px;display:flex;flex-direction:column;gap:10px;list-style:none;padding:0} .foot-col__links a{font-size:var(--fs-small);color:#9a9aa2} .foot-col__links a:hover{color:var(--yellow)} .socials{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px} .socials a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:15px; box-shadow:0 5px 14px rgba(0,0,0,.14);transition:transform var(--ease)} .socials a:hover{transform:translateY(-2px);color:#fff} .socials .ico{width:16px;height:16px} .s-wa{background:#25D366}.s-fb{background:#1877F2}.s-yt{background:#FF0000}.s-tt{background:#000} .s-ms{background:linear-gradient(140deg,#00B2FF,#A033FF,#FF5280)}.s-link{background:#3f3f46} .site-foot__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px; padding:18px 0;font-size:var(--fs-meta);color:#9a9aa2} .site-foot__bottom b{color:var(--yellow)} .site-foot__bottom span{display:flex;align-items:center;gap:6px} .site-foot__bottom .ico{width:13px;height:13px;color:var(--pink-2);fill:currentColor;stroke:none} /* 5. HOME ================================================================= */ .hero{text-align:center;padding-top:clamp(24px,3.4vw,34px)} .hero h1{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;line-height:.94} .hero h1 span{display:block;letter-spacing:.6px;transform:skewX(-9deg)} .hero__a{font-size:clamp(34px,7.4vw,62px);color:var(--ink)} .hero__b{font-size:clamp(31px,8vw,70px);margin-top:6px;background:var(--grad-brand); -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.08))} .hero p{margin-top:18px;font-weight:500;color:#2a2a2a} .tab-tag{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;margin-left:14px; padding:11px 30px 11px 22px;background:var(--grad-gold);clip-path:polygon(4% 0,100% 0,92% 100%,0 100%); font-size:var(--fs-small);font-weight:800;letter-spacing:.8px;color:var(--ink)} .tab-tag .ico{width:15px;height:15px;color:var(--orange-dp)} .frame{position:relative;margin-top:-2px;padding:8px;background:var(--ink);border-radius:var(--r-xl);box-shadow:var(--shadow-lg)} .frame__inner{position:relative;background:#fff;border-radius:var(--r-lg);padding:clamp(18px,2.6vw,30px) clamp(16px,3vw,34px) clamp(20px,3vw,34px)} .gen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(22px,3vw,38px)} .gen__col{display:flex;flex-direction:column;gap:18px;min-width:0} .label{display:flex;align-items:center;gap:8px;font-size:var(--fs-lead);font-weight:700;color:var(--ink)} .label .ico{width:15px;height:15px;color:var(--yellow)} .field{width:100%;padding:17px 18px;font-size:var(--fs-body);color:var(--ink);background:#fff; border:1.5px solid #e6e6e6;border-radius:var(--r);outline:none} .field:focus{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,179,0,.16)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{min-height:40px;padding:9px 15px;border-radius:9px;font-size:var(--fs-meta);font-weight:700;letter-spacing:.5px; color:#5c5c66;background:#fff;border:1.5px solid var(--line-3);transition:border-color var(--ease),background var(--ease)} .chip:hover{border-color:var(--yellow);color:#5c5c66} .chip.is-on{color:var(--ink);background:var(--grad-gold);border-color:var(--yellow)} .btn-cta{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:18px; border-radius:12px;font-size:clamp(16px,2vw,18px);font-weight:800;letter-spacing:.6px;color:var(--ink); background:var(--grad-cta);box-shadow:0 10px 24px rgba(255,61,143,.28)} .btn-cta:hover{filter:brightness(1.06)} .btn-cta:active{transform:translateY(1px)} .btn-cta[disabled]{opacity:.65;pointer-events:none} .btn-cta .ico{width:18px;height:18px} .results{display:flex;flex-direction:column;gap:13px;min-width:0} .result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:#fff; border:1.5px solid var(--line-3);border-radius:var(--r);cursor:pointer;min-width:0; transition:border-color var(--ease),box-shadow var(--ease)} .result:hover{border-color:var(--yellow);box-shadow:0 4px 14px rgba(0,0,0,.05)} .result span{font-size:var(--fs-body);font-weight:600;letter-spacing:.4px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .copy{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:7px;color:#3f3f46} .copy .ico{width:15px;height:15px} .copy:hover{background:#f6f6f6} .copy.is-done{color:#16a34a} .hotbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:26px} .hotbar__tag{position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin-right:-14px} .hotbar__tag .ico{width:24px;height:24px;color:var(--orange-dp)} .hotbar__tag b{padding:7px 22px 7px 14px;background:var(--ink);color:#fff;font-size:var(--fs-meta);font-weight:800; letter-spacing:1px;clip-path:polygon(0 0,100% 0,86% 100%,0 100%)} .hotbar__list{flex:1 1 260px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px; padding:16px clamp(14px,2.4vw,26px);background:#fff;border:1.5px solid var(--yellow-lt);border-radius:var(--r-md);box-shadow:var(--shadow-sm)} .pill{display:flex;align-items:center;gap:8px;min-height:42px;padding:10px 16px;border-radius:10px; font-size:var(--fs-meta);font-weight:700;letter-spacing:.5px;color:var(--ink);background:#fff;border:1.5px solid #f0e6cf} .pill:hover{border-color:var(--yellow);background:#fffaf0;color:var(--ink)} .pill.is-on{background:#fff6dd;border-color:var(--yellow)} .pill .ico{width:14px;height:14px} .rule{display:flex;align-items:center;gap:16px;justify-content:center} .rule::before,.rule::after{content:"";flex:1;min-width:12px;height:2px;background:linear-gradient(90deg,rgba(0,0,0,0),#e6e6e6)} .rule::after{background:linear-gradient(90deg,#e6e6e6,rgba(0,0,0,0))} .rule h2{text-align:center} .features{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:clamp(12px,1.8vw,20px)} .feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px;padding:28px 18px 26px; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow); transition:transform var(--ease),box-shadow var(--ease)} .feature:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.09)} .feature__ico{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-md)} .feature__ico .ico{width:23px;height:23px} .feature__t{font-size:var(--fs-lead);font-weight:700;color:var(--ink)} .feature p{font-size:var(--fs-body);line-height:1.65;color:var(--muted)} .panel-dark{position:relative;overflow:hidden;background:var(--dark);border-radius:18px; padding:26px clamp(16px,2.6vw,30px) 34px;box-shadow:0 18px 40px rgba(0,0,0,.2)} .panel-dark__dots{position:absolute;width:56px;height:44px;background-image:radial-gradient(rgba(255,179,0,.65) 1.5px,transparent 1.6px);background-size:10px 10px} .panel-dark__dots.tl{top:16px;left:18px}.panel-dark__dots.tr{top:16px;right:18px} .panel-dark__dots.bl{bottom:16px;left:18px}.panel-dark__dots.br{bottom:16px;right:18px} .panel-dark__t{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px; font-size:clamp(15px,2.2vw,18px);font-weight:800;letter-spacing:.8px;color:#fff;text-align:center} .panel-dark__t .ico{width:18px;height:18px;color:var(--orange-dp)} .trend{position:relative;margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:clamp(10px,1.5vw,16px)} .trend button{min-height:52px;padding:16px 10px;border-radius:var(--r);background:var(--dark-2);border:1.5px solid var(--dark-3); color:#fff;font-size:var(--fs-body);font-weight:600;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trend button:hover{border-color:var(--yellow);background:#26262a} .btn-gold{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:11px 26px;border-radius:9px; background:var(--grad-gold);color:var(--ink);font-size:var(--fs-small);font-weight:800;letter-spacing:.8px; clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)} .btn-gold:hover{filter:brightness(1.06);color:var(--ink)} .btn-gold .ico{width:14px;height:14px} .center{display:flex;justify-content:center;margin-top:24px} .share-card{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px; padding:clamp(20px,2.6vw,26px) clamp(18px,2.8vw,30px);background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden} .share-card__txt{flex:1 1 280px} .share-card__txt div{font-family:Anton,Impact,sans-serif;font-size:clamp(17px,2.4vw,21px);line-height:1.22; letter-spacing:.4px;color:var(--ink);transform:skewX(-8deg);text-wrap:pretty} .share-card__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px} .share-card__act b{font-size:var(--fs-small);font-weight:700;letter-spacing:.6px;color:var(--ink)} /* 6. SHARED BLOCKS ======================================================== */ .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:var(--ink);color:#fff; font-size:11px;font-weight:800;letter-spacing:1.2px;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)} .eyebrow .ico{width:13px;height:13px;color:var(--orange-dp)} .thumb{position:relative;border-radius:12px;overflow:hidden;display:grid;place-items:center; background:repeating-linear-gradient(135deg,#f4f2f6 0 9px,#eae7ef 9px 18px)} .thumb img{width:100%;height:100%;object-fit:cover;grid-area:1/1} .thumb small{font:12px/1.6 ui-monospace,Menlo,monospace;letter-spacing:.4px;color:var(--muted-2);text-align:center;padding:10px} .thumb__badge{position:absolute;top:10px;left:10px;z-index:2;padding:5px 10px;border-radius:7px;background:rgba(17,17,17,.86); color:var(--yellow-lt);font-size:10px;font-weight:800;letter-spacing:.8px} .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--muted-2)} .meta span{display:inline-flex;align-items:center;gap:6px} .meta .ico{width:13px;height:13px} .cat{padding:5px 11px;border-radius:6px;background:#fff0f7;color:var(--pink);font-size:11px;font-weight:700;letter-spacing:.6px} .tags{display:flex;flex-wrap:wrap;gap:9px} .tags a,.tags span{padding:6px 12px;border-radius:999px;background:#fff;border:1.5px solid var(--line-2); font-size:12px;font-weight:600;color:#5c5c66} .tags a:hover{border-color:var(--yellow);color:var(--ink)} .more{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-meta);font-weight:800;letter-spacing:.6px;color:var(--pink)} .more .ico{width:13px;height:13px} .cta-strip{position:relative;overflow:hidden;background:var(--dark);border-radius:18px;padding:clamp(22px,3.4vw,34px); display:flex;flex-wrap:wrap;align-items:center;gap:20px;box-shadow:0 18px 40px rgba(0,0,0,.18)} .cta-strip__txt{flex:1 1 300px;min-width:240px} .cta-strip__txt div{font-family:Anton,Impact,sans-serif;font-size:clamp(19px,2.6vw,24px);line-height:1.18; letter-spacing:.4px;color:#fff;transform:skewX(-8deg)} .cta-strip p{margin-top:10px;font-size:var(--fs-body);line-height:1.7;color:#9a9aa2} .btn-grad{flex:0 0 auto;display:inline-flex;align-items:center;gap:11px;min-height:52px;padding:16px 26px;border-radius:12px; font-size:var(--fs-lead);font-weight:800;letter-spacing:.6px;color:var(--ink);background:var(--grad-cta); box-shadow:0 10px 24px rgba(255,61,143,.28)} .btn-grad:hover{filter:brightness(1.06);color:var(--ink)} .btn-grad .ico{width:18px;height:18px} .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);z-index:60; display:flex;align-items:center;gap:10px;max-width:calc(100vw - 30px);padding:13px 20px;background:var(--ink); color:#fff;border-radius:var(--r);font-size:var(--fs-small);font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.3); opacity:0;pointer-events:none;transition:opacity var(--ease),transform var(--ease)} .toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)} .toast .ico{width:16px;height:16px;color:#4ade80} .toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 7. ARTICLE LIST ========================================================= */ .list-hero{text-align:center} .list-hero h1{margin-top:18px} .list-hero p{margin:16px auto 0;max-width:600px} .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;background:#fff; border:1.5px solid var(--yellow-lt);border-radius:var(--r-md);box-shadow:var(--shadow-sm)} .searchbox{flex:1 1 260px;display:flex;align-items:center;gap:11px;padding:12px 16px;background:var(--surface-2); border:1.5px solid var(--line-3);border-radius:var(--r)} .searchbox:focus-within{border-color:var(--yellow)} .searchbox input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:15.5px;color:var(--ink)} .searchbox .ico{width:14px;height:14px;color:var(--muted-2)} .searchbox button{color:var(--muted-2);display:grid;place-items:center} .searchbox button:hover{color:var(--ink)} .sorts{display:flex;flex-wrap:wrap;gap:8px} .sorts .chip{display:flex;align-items:center;gap:7px} .sorts .chip .ico{width:12px;height:12px;color:var(--yellow)} .cat-row{margin-top:14px;display:flex;flex-wrap:wrap;gap:9px} .cat-row .chip{border-radius:999px;display:flex;align-items:center;gap:8px} .cat-row .chip em{font-style:normal;font-size:11px;opacity:.7} .featured{display:block;padding:8px;background:var(--ink);border-radius:var(--r-xl);box-shadow:0 18px 40px rgba(0,0,0,.14)} .featured__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));background:#fff;border-radius:var(--r-lg);overflow:hidden} .featured .thumb{border-radius:0;min-height:230px} .featured__badge{position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:center;gap:7px;padding:7px 13px; background:var(--grad-gold);color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.8px;border-radius:var(--r-sm)} .featured__badge .ico{width:12px;height:12px} .featured__body{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;justify-content:center;gap:13px} .featured__title{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(21px,3.2vw,31px);line-height:1.14; letter-spacing:.3px;color:var(--ink);text-wrap:pretty} .byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--fs-small);font-weight:700;color:var(--ink)} .avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%; background:linear-gradient(140deg,#ffd75e,#ff7a00);color:#fff;font-size:12px;font-weight:800} .list-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:16px} .list-head span{font-size:var(--fs-small);font-weight:600;color:var(--muted-2)} .post-list{display:flex;flex-direction:column;gap:14px} .postcard{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,22px);padding:clamp(12px,1.6vw,16px);background:#fff; border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 8px 22px rgba(0,0,0,.04); transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)} .postcard:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(0,0,0,.09);border-color:var(--yellow-lt)} .postcard__thumb{flex:1 1 230px;min-width:190px;max-width:280px;display:block} .postcard__thumb .thumb{aspect-ratio:16/10} .postcard__body{flex:1 1 300px;min-width:min(100%,220px);display:flex;flex-direction:column;gap:9px;padding:6px 6px 6px 0} .postcard__title{margin:0;font-family:inherit;font-size:clamp(17px,2vw,20px);font-weight:700;line-height:1.35;text-wrap:pretty} .postcard__title a{color:var(--ink)} .postcard__title a:hover{color:var(--orange)} .postcard p{font-size:var(--fs-body);line-height:1.7;color:var(--muted)} .postcard__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px} .postcard__foot .more{margin-left:auto} .empty{padding:44px 20px;text-align:center;background:#fff;border:1px dashed #e2e0e6;border-radius:var(--r-lg)} .empty .ico{width:26px;height:26px;margin:0 auto;color:#c9c7d0} .empty b{display:block;margin-top:12px;font-size:var(--fs-lead);color:var(--ink)} .empty p{margin-top:6px;font-size:var(--fs-body);color:var(--muted-2)} .pager{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px} .pager a,.pager span{min-width:44px;height:44px;padding:0 13px;border-radius:10px;font-size:15px;font-weight:700; color:#5c5c66;background:#fff;border:1.5px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center} .pager a:hover{border-color:var(--yellow);color:#5c5c66} .pager .current{color:var(--ink);background:var(--grad-gold);border-color:var(--yellow)} .pager .dots{border-color:transparent;background:none} /* 8. ARTICLE DETAIL ======================================================= */ .progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:50; background:linear-gradient(90deg,#ffc61a,#ff3d8f,#a855f7)} .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted-2)} .crumbs a{color:var(--muted-2)} .crumbs a:hover{color:var(--orange)} .crumbs .ico{width:9px;height:9px} .crumbs b{color:var(--ink);font-weight:600} .art-head h1{margin-top:16px;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(26px,5.4vw,46px); line-height:1.08;letter-spacing:.3px;color:var(--ink);text-wrap:pretty} .art-head .meta{margin-top:18px} .art-head>p{margin-top:16px;max-width:720px;font-size:var(--fs-lead);line-height:1.75;color:var(--ink-3)} .author-bar{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 16px;background:#fff; border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 8px 22px rgba(0,0,0,.04)} .author-chip{display:flex;align-items:center;gap:11px} .author-chip .avatar{width:42px;height:42px;font-size:14px} .author-chip b{display:block;font-size:15px;color:var(--ink)} .author-chip small{font-size:13px;color:var(--muted-2)} .author-bar .socials{margin:0} .share-label{font-size:var(--fs-meta);font-weight:700;letter-spacing:.6px;color:var(--muted-2)} .cover{margin-top:20px;aspect-ratio:16/8;border-radius:var(--r-lg)} .art-wrap{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,32px);align-items:flex-start} .art-body{flex:1 1 520px;min-width:min(100%,280px);display:flex;flex-direction:column;gap:18px} .sample-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px} .note{display:flex;gap:14px;padding:18px;background:#fffaf0;border:1.5px solid #ffe2a8;border-radius:var(--r-md)} .note .ico{width:17px;height:17px;color:#f59e00;margin-top:3px} .note p{font-size:var(--fs-body);line-height:1.72;color:#5a4a1f} .aside{flex:1 1 260px;min-width:min(100%,240px);max-width:320px;display:flex;flex-direction:column;gap:16px;position:sticky;top:16px} .card{padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 8px 22px rgba(0,0,0,.04)} .card__t{display:flex;align-items:center;gap:8px;font-size:var(--fs-meta);font-weight:800;letter-spacing:.9px;color:var(--ink)} .card__t .ico{width:14px;height:14px;color:var(--yellow)} .toc{margin-top:13px;display:flex;flex-direction:column;gap:9px} .toc a{font-size:15px;line-height:1.5;font-weight:600;color:#5c5c66;padding-left:11px;border-left:2px solid var(--yellow-lt)} .toc a:hover,.toc a.is-on{color:var(--ink);border-left-color:var(--yellow)} .tool-card{padding:8px;background:var(--ink);border-radius:18px} .tool-card__in{padding:20px 18px;background:#fff;border-radius:12px;text-align:center} .tool-card__in>.ico{width:20px;height:20px;margin:0 auto;color:#ff3d8f} .tool-card__in b{display:block;margin-top:11px;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:19px; letter-spacing:.3px;color:var(--ink);transform:skewX(-8deg)} .tool-card p{margin-top:8px;font-size:var(--fs-body);line-height:1.62;color:var(--muted)} .tool-card a{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px; padding:14px;border-radius:var(--r);font-size:var(--fs-small);font-weight:800;letter-spacing:.6px; color:var(--ink);background:var(--grad-cta)} .tool-card a:hover{filter:brightness(1.06);color:var(--ink)} .pop{margin-top:13px;display:flex;flex-direction:column;gap:12px} .pop a{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;font-weight:600;color:var(--ink-2)} .pop a:hover{color:var(--orange)} .pop em{flex:none;font-style:normal;font-family:Anton,Impact,sans-serif;font-size:18px;color:var(--yellow)} .rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px} .rel{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.04);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)} .rel:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.09);border-color:var(--yellow-lt)} .rel .thumb{border-radius:0;aspect-ratio:16/9} .rel__body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:9px} .rel__cat{align-self:flex-start;padding:5px 10px;border-radius:6px;background:var(--surface-2);border:1px solid #efeef2; font-size:10px;font-weight:800;letter-spacing:.7px;color:var(--muted)} .rel__title{font-size:16.5px;font-weight:700;line-height:1.4;color:var(--ink);text-wrap:pretty} /* 9. NAME TOOL (results, emoji, community) ================================ */ .out{display:flex;flex-direction:column;gap:var(--block)} .out[hidden]{display:none} .out-sec__t{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px; font-size:clamp(16px,2.4vw,20px);font-weight:800;letter-spacing:.3px;color:var(--ink)} .out-sec__t .ico{width:16px;height:16px;color:var(--orange-dp)} .out-sec__t em{font-style:normal;margin-left:auto;font-size:var(--fs-meta);font-weight:700;color:var(--muted-2)} .grid-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr));gap:11px} .grid-names .result{padding:13px 14px} .emoji-grid{display:flex;flex-wrap:wrap;gap:9px} .emoji-grid button{width:46px;height:46px;display:grid;place-items:center;font-size:21px;line-height:1; background:#fff;border:1.5px solid var(--line-3);border-radius:10px;transition:border-color var(--ease),transform var(--ease)} .emoji-grid button:hover{border-color:var(--yellow);transform:translateY(-2px)} .gen-load{display:flex;align-items:center;justify-content:center;gap:11px;padding:26px;font-size:var(--fs-small); font-weight:700;letter-spacing:.5px;color:var(--muted-2)} .gen-load .ico{width:17px;height:17px;color:var(--yellow);animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .gen-msg{padding:18px;text-align:center;font-size:var(--fs-small);font-weight:600;color:var(--muted-2); background:#fff;border:1px dashed #e2e0e6;border-radius:var(--r-md)} .comm{display:flex;flex-direction:column;gap:22px} .comm[hidden]{display:none} .comm-block__t{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:13px;font-size:var(--fs-lead); font-weight:700;color:var(--ink)} .comm-block__t .ico{width:16px;height:16px;color:var(--yellow)} .chip-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px} .nick{display:flex;align-items:center;gap:8px;padding:11px 13px;background:#fff;border:1.5px solid var(--line-3); border-radius:var(--r);min-width:0;transition:border-color var(--ease)} .nick:hover{border-color:var(--yellow)} .nick>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px; font-weight:600;color:var(--ink);cursor:pointer} .nick__like{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:7px;font-size:11.5px; font-weight:700;color:var(--muted);background:var(--surface-2)} .nick__like:hover{color:var(--pink);background:#fff0f7} .nick__like.is-on{color:var(--pink);background:#fff0f7} .nick__like .ico{width:12px;height:12px} .nick__new{flex:none;padding:3px 7px;border-radius:5px;background:#fff6dd;color:#8a6300;font-size:9.5px;font-weight:800;letter-spacing:.6px} .comm-form{display:flex;flex-wrap:wrap;gap:10px} .comm-form .field{flex:1 1 220px;width:auto;padding:14px 16px} .comm-form button{display:flex;align-items:center;gap:9px;min-height:50px;padding:14px 22px;border-radius:var(--r); font-size:var(--fs-small);font-weight:800;letter-spacing:.6px;color:var(--ink);background:var(--grad-gold)} .comm-form button:hover{filter:brightness(1.06)} .comm-form button .ico{width:15px;height:15px} .comm-more{display:flex;justify-content:center;margin-top:16px} .comm-hint{font-size:var(--fs-small);line-height:1.7;color:var(--muted-2)} /* 10. EDITOR CONTENT ====================================================== */ .entry{display:flex;flex-direction:column;gap:18px} .entry>*{margin:0} .entry h2{margin:10px 0 0;font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.4px;line-height:1.06; color:var(--ink);transform:skewX(-8deg);font-size:clamp(21px,3.4vw,31px)} .entry h3{font-size:clamp(19px,2.6vw,24px);font-weight:700;line-height:1.3;color:var(--ink)} .entry h4,.entry h5,.entry h6{font-size:var(--fs-lead);font-weight:700;color:var(--ink)} .entry ul,.entry ol{padding-left:22px;display:flex;flex-direction:column;gap:9px;font-size:var(--fs-body);line-height:1.8;color:var(--ink-2)} .entry li>ul,.entry li>ol{margin-top:9px} .entry blockquote{margin:6px 0;padding:20px 22px;background:var(--dark);border-radius:var(--r-md);color:#fff} .entry blockquote p{font-size:var(--fs-lead);line-height:1.7;font-weight:600;color:#fff} .entry blockquote cite{display:block;margin-top:12px;font-style:normal;font-size:var(--fs-meta);font-weight:700;letter-spacing:.8px;color:var(--yellow)} .entry figure{margin:0} .entry img{border-radius:var(--r-md)} .entry figcaption{margin-top:9px;font-size:var(--fs-small);color:var(--muted-2);text-align:center} .entry table{width:100%;border-collapse:collapse;font-size:15.5px} .entry th,.entry td{padding:11px 13px;border:1px solid var(--line-2);text-align:left} .entry th{background:var(--surface-2);font-weight:700} .entry pre{padding:18px;overflow:auto;background:var(--dark);color:#eee;border-radius:var(--r-md);font-size:14px;line-height:1.7} .entry code{font-family:ui-monospace,Menlo,monospace;font-size:.92em} .entry hr{border:0;border-top:2px solid var(--line-2)} .entry .wp-caption{max-width:100%} .alignleft{float:left;margin:0 20px 16px 0} .alignright{float:right;margin:0 0 16px 20px} .aligncenter{margin-inline:auto} .alignwide,.alignfull{width:auto} .table-scroll{overflow-x:auto} /* comments */ .comments{display:flex;flex-direction:column;gap:20px} .comment-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:16px} .comment-list .children{list-style:none;margin-top:16px;padding-left:18px;display:flex;flex-direction:column;gap:16px;border-left:2px solid var(--line-2)} .comment-body{display:flex;flex-direction:column;gap:8px} .comment-author{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--ink)} .comment-author img{border-radius:50%} .comment-metadata{font-size:12.5px;color:var(--muted-2)} .comment-metadata a{color:var(--muted-2)} .reply{margin-top:4px} .comment-reply-link{font-size:var(--fs-meta);font-weight:800;letter-spacing:.6px;color:var(--pink)} .comment-form{display:flex;flex-direction:column;gap:12px} .comment-form p{display:flex;flex-direction:column;gap:7px;font-size:var(--fs-small);color:var(--muted)} .comment-form label{font-weight:700;color:var(--ink)} .comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{ width:100%;padding:13px 15px;background:#fff;border:1.5px solid var(--line-3);border-radius:var(--r); outline:none;font-size:15.5px;color:var(--ink)} .comment-form input:focus,.comment-form textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,179,0,.16)} .comment-form .comment-form-cookies-consent{flex-direction:row;align-items:center;gap:9px} .comment-form .submit{align-self:flex-start;min-height:50px;padding:14px 26px;border:0;border-radius:var(--r); background:var(--grad-cta);font-size:var(--fs-small);font-weight:800;letter-spacing:.6px;color:var(--ink);cursor:pointer} .comment-form .submit:hover{filter:brightness(1.06)} /* 11. RESPONSIVE ========================================================== */ @media (max-width:980px){ .nav,.btn-lang{display:none} .burger{display:grid} .site-head__bar{justify-content:space-between} .aside{position:static;max-width:none} } /* Decor giua trang dat top co dinh (900px/1240px) nen tren man hep no roi vao than bai va ve de len chu (text la position:static nen bi lop positioned phu len). Giu decor vung hero, bo 4 hinh roi vao noi dung. */ @media (max-width:640px){ .deco i.bolt-c,.deco i.bolt-d,.deco i.dots-b,.deco i.ring-a,.deco i.ring-b{display:none} } @media (max-width:640px){ :root{--block:clamp(24px,6vw,32px)} .tab-tag{margin-left:6px;padding:10px 24px 10px 18px;font-size:12px} .hotbar__tag{margin-right:0} .hotbar__list{justify-content:flex-start} .postcard .thumb{max-width:none;flex-basis:100%} .featured .thumb{min-height:190px} .rule::before,.rule::after{display:none} .share-card__act,.author-bar .socials{width:100%} .site-foot__bottom{justify-content:flex-start} .alignleft,.alignright{float:none;margin:0} } @media (max-width:400px){ .trend{grid-template-columns:1fr} .chips .chip,.pill{font-size:11px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} } /* jump list injected into long pages (see blz_inject_toc) */ .toc-card{margin:4px 0 6px} .toc-card .toc{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:9px 18px} /* A wide table scrolls inside its own box. inline-size containment is the part that matters: without it the table's min-width propagates up through the flex item holding the article and puts the scrollbar on the page instead. */ .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px;border-radius:11px;contain:inline-size;width:100%;max-width:100%} .tbl-wrap table{margin:0;min-width:520px} /* The header block is split in two so the tool can sit between the H1 and the rest of the byline; the lower half keeps the spacing the single block had. */ .art-head--rest{padding-top:0} /* Copy grids inside an article. No font-weight on the glyph itself: these are ornaments the reader is judging by shape, and bolding distorts them. */ .cp-grid{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px} .cp-chip{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 14px; border:1px solid var(--bd,#e6e6ef);border-radius:10px;background:var(--card,#fff);color:inherit; font-weight:400;font-size:17px;line-height:1.4;cursor:pointer} .cp-chip:hover{border-color:var(--acc,#f97316)} .cp-chip span{font-weight:400}