/* Ledgerline */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/bricolagegrotesque-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/bricolagegrotesque-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Inter-fb";src:local("Arial"),local("Helvetica Neue"),local("Roboto");size-adjust:107%;ascent-override:90%;descent-override:22%}
@font-face{font-family:"Brico-fb";src:local("Arial"),local("Helvetica Neue"),local("Roboto");size-adjust:104%;ascent-override:92%;descent-override:24%}

:root{
  --c-navy:#0D1E35;--c-navy-2:#162A47;--c-navy-line:#26395A;
  --c-pink:#EE156C;--c-rose-ink:#AE0C4E;--c-pink-soft:#FE72B8;--c-pink-wash:#FDE7F0;
  --c-saffron:#F4BC2A;
  --c-paper:#F6F3EE;--c-card:#FFFFFF;--c-ink:#0D1E35;--c-muted:#4A566B;--c-line:#E3DDD3;
  --c-on-navy:#FFFFFF;--c-on-navy-muted:#B8C2D1;
  --f-display:"Bricolage Grotesque","Brico-fb",system-ui,sans-serif;
  --f-body:"Inter","Inter-fb",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-h1:clamp(2rem,1.35rem + 3.2vw,3.5rem);--fs-h2:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);--fs-h3:1.25rem;
  --fs-lead:1.0625rem;--fs-body:1rem;--fs-sm:.875rem;--fs-label:.75rem;
  --lh-tight:1.08;--lh-head:1.2;--lh-body:1.65;--ls-head:-.02em;--ls-label:.12em;
  --fw-body:400;--fw-semi:600;--fw-bold:700;--fw-black:800;--measure:68ch;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:48px;--s-9:64px;
  --gutter:16px;--container:1160px;--header-h:60px;
  --sidebar-w:clamp(280px,25vw,320px);--rel-thumb:72px;
  --r-sm:6px;--r-md:12px;--r-lg:20px;--r-xl:28px;--r-full:999px;
  --sh-card:0 1px 0 rgba(13,30,53,.06);--sh-raise:0 10px 28px rgba(13,30,53,.10);
  --plg-btn-h:44px;--plg-btn-box:64px;--plg-btn-box-col:116px;--plg-head-w:300px
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--header-h)}
body{margin:0;background:var(--c-paper);color:var(--c-ink);font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--f-body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-rose-ink);text-underline-offset:3px}
a:hover{color:var(--c-ink)}
:focus-visible{outline:3px solid var(--c-saffron);outline-offset:2px;border-radius:var(--r-sm)}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--c-ink);letter-spacing:var(--ls-head);margin:0}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:var(--fw-black)}
h2{font-size:var(--fs-h2);line-height:var(--lh-head);font-weight:var(--fw-black)}
h3{font-size:var(--fs-h3);line-height:var(--lh-head);font-weight:var(--fw-bold)}
p{margin:0 0 var(--s-4)}
figure{margin:0}
figcaption,.wp-caption-text{font-size:var(--fs-sm);color:var(--c-muted);margin-top:var(--s-2)}
.shell{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.jump,.screen-reader-text{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.jump:focus{left:var(--s-4);top:var(--s-2);width:auto;height:auto;z-index:30;background:var(--c-saffron);color:var(--c-ink);padding:var(--s-2) var(--s-4)}
.hilite{background:var(--c-saffron);color:var(--c-ink);padding:0 .14em;border-radius:var(--r-sm);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kicker{display:inline-flex;align-items:center;gap:var(--s-2);font:var(--fw-semi) var(--fs-label)/1.2 var(--f-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-rose-ink);margin-bottom:var(--s-3)}
.kicker::before{content:"";width:var(--s-5);height:3px;border-radius:var(--r-full);background:var(--c-pink)}

/* ---------- đầu trang ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--c-navy);color:var(--c-on-navy)}
.topbar>.shell{display:flex;align-items:center;gap:var(--s-4);height:var(--header-h)}
.brandmark{display:block;flex:none}
.brandmark img{width:114px;height:36px}
.menukey{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;background:var(--c-navy-2);border:1px solid var(--c-navy-line);border-radius:var(--r-md);color:var(--c-on-navy);cursor:pointer;padding:0}
.menukey i,.menukey i::before,.menukey i::after{display:block;width:20px;height:2px;border-radius:var(--r-full);background:currentColor;position:relative}
.menukey i::before,.menukey i::after{content:"";position:absolute;left:0}
.menukey i::before{top:-6px}
.menukey i::after{top:6px}
.menukey[aria-expanded="true"] i{background:transparent}
.menukey[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.menukey[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
.navpanel{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;background:var(--c-navy);border-top:1px solid var(--c-navy-line);padding:var(--s-4) var(--gutter) var(--s-6);box-shadow:var(--sh-raise)}
.navpanel.is-open{display:block}
.navlist{list-style:none;margin:0;padding:0}
.navlist a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 var(--s-2);color:var(--c-on-navy);text-decoration:none;font:var(--fw-bold) var(--fs-h3)/1.2 var(--f-display);border-bottom:1px solid var(--c-navy-line)}
.navlist a::after{content:"→";color:var(--c-pink-soft);font-family:var(--f-body)}
.navlist a[aria-current="page"]{color:var(--c-pink-soft)}
.navpanel .actbox{margin-top:var(--s-4)}

/* ---------- ô nút plugin: giữ chỗ chống giật trang ---------- */
.actbox{min-height:var(--plg-btn-box)}
main .actbox{max-width:460px}
/* 2 nút đăng ký / đăng nhập: plugin chỉ in thẻ, theme lo toàn bộ giao diện (1 = hồng, 2 = vàng) */
.actbox>div{display:flex;gap:var(--s-2);margin:10px 0}
.actbox a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;height:var(--plg-btn-h);padding:0 var(--s-5);border-radius:var(--s-2);font:var(--fw-bold) var(--fs-sm)/1 var(--f-body);letter-spacing:.02em;white-space:nowrap;text-decoration:none;color:var(--c-on-navy);background:var(--c-rose-ink);transition:filter .15s}
.actbox a+a{color:var(--c-ink);background:var(--c-saffron)}
/* Dải màu + bóng pha từ token: CHỈ khi trình duyệt hiểu color-mix(). Không dùng kiểu "dòng dự phòng đứng trước":
   giá trị có var() không bị loại lúc đọc CSS, nên trình duyệt cũ vẫn ghi đè dòng trước rồi ra nền TRONG SUỐT. */
@supports (background:color-mix(in srgb,red 50%,blue)){
  .actbox a{background:linear-gradient(135deg,color-mix(in srgb,var(--c-pink) 30%,var(--c-rose-ink)),color-mix(in srgb,var(--c-rose-ink) 85%,var(--c-navy)));box-shadow:0 3px 10px color-mix(in srgb,var(--c-rose-ink) 30%,transparent)}
  .actbox a+a{background:linear-gradient(135deg,var(--c-saffron),color-mix(in srgb,var(--c-saffron) 80%,var(--c-navy)));box-shadow:0 3px 10px color-mix(in srgb,var(--c-saffron) 35%,transparent)}
}
.actbox a:hover{color:var(--c-on-navy);filter:brightness(1.08)}
.actbox a+a:hover{color:var(--c-ink)}
.actbox a span{overflow:hidden}

/* ---------- trang chủ: phần đầu ---------- */
.lead{padding-top:var(--s-6);padding-bottom:var(--s-7)}
.lead-grid{display:grid;gap:var(--s-6)}
.lead-grid>*{min-width:0}
.upd{font-size:var(--fs-sm);color:var(--c-muted);margin:0 0 var(--s-3)}
.summary{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--c-ink);margin:var(--s-4) 0 var(--s-2);max-width:var(--measure)}
.summary p{margin:0 0 var(--s-2)}
.lead-art{position:relative;border-radius:var(--r-xl);background:var(--c-navy);padding:var(--s-4);overflow:hidden}
.lead-art::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:var(--c-pink);opacity:.9}
.lead-art::after{content:"";position:absolute;left:-30px;bottom:-30px;width:90px;height:90px;border-radius:50%;background:var(--c-saffron)}
.lead-art img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}

/* ---------- trang chủ: các khối nội dung ---------- */
.band{padding-top:var(--s-8);padding-bottom:var(--s-8)}
.band+.band{border-top:1px solid var(--c-line)}
.duo{display:grid;gap:var(--s-6)}
.duo>*{min-width:0}
.copy{max-width:var(--measure)}
.copy h2{margin-bottom:var(--s-4)}
.copy ul,.copy ol{padding-left:var(--s-5);margin:0 0 var(--s-4)}
.copy li{margin-bottom:var(--s-2)}
.copy li::marker{color:var(--c-rose-ink);font-weight:var(--fw-bold)}
.duo-art img{width:100%;border-radius:var(--r-lg)}
.duo-art .wp-caption,.duo-art figure{margin:0}

.tbl{overflow-x:auto;margin:0 0 var(--s-5);border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-card)}
.tbl table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:480px}
.tbl th,.tbl td{padding:var(--s-3) var(--s-4);text-align:left;border-bottom:1px solid var(--c-line);vertical-align:top}
.tbl thead th,.tbl tr:first-child th{background:var(--c-navy);color:var(--c-on-navy);font-weight:var(--fw-semi)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(even){background:var(--c-paper)}

/* khối có danh sách "Bước 1, Bước 2…" → khung navy */
.navybox{background:var(--c-navy);color:var(--c-on-navy-muted);border-radius:var(--r-xl);padding:var(--s-7) var(--s-5)}
.navybox .copy{max-width:none}
.navybox h2{color:var(--c-on-navy)}
.navybox .kicker{color:var(--c-pink-soft)}
.navybox a{color:var(--c-pink-soft)}
.navybox strong{color:var(--c-on-navy)}
.stepgrid{list-style:none;margin:var(--s-6) 0;padding:0;display:grid;gap:var(--s-3);counter-reset:step}
.copy .stepgrid{padding:0}
.stepgrid li{counter-increment:step;margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start;align-content:start;background:var(--c-navy-2);border:1px solid var(--c-navy-line);border-radius:var(--r-lg);padding:var(--s-4);font-size:var(--fs-sm)}
.stepgrid li::before{content:counter(step,decimal-leading-zero);font:var(--fw-black) var(--fs-h2)/1 var(--f-display);color:var(--c-saffron)}
.stepgrid li>div{min-width:0}
.stepgrid li>div>strong:first-child{display:block;color:var(--c-on-navy);font-family:var(--f-display);font-size:var(--fs-h3);margin-bottom:var(--s-1)}

/* ---------- danh sách bài (trang chủ, chuyên mục, tìm kiếm) ---------- */
.band-top{display:flex;align-items:end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-6)}
.band-top a{font-weight:var(--fw-semi);font-size:var(--fs-sm);white-space:nowrap}
.cards{display:grid;gap:var(--s-4);list-style:none;margin:0;padding:0}
.card{display:grid;align-content:start;grid-template-columns:112px 1fr;gap:var(--s-4);align-items:start;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-3);box-shadow:var(--sh-card)}
.card>*{min-width:0}
.card img,.card .noimg{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-md);background:var(--c-navy-2)}
.card h2,.card h3{font-size:var(--fs-body);line-height:1.35}
.card h2 a,.card h3 a{color:var(--c-ink);text-decoration:none}
.card h2 a:hover,.card h3 a:hover{color:var(--c-rose-ink);text-decoration:underline}
.tag{display:inline-block;font:var(--fw-semi) var(--fs-label)/1 var(--f-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-rose-ink);background:var(--c-pink-wash);border-radius:var(--r-full);padding:var(--s-1) var(--s-2);margin-bottom:var(--s-2);text-decoration:none}
.card time{display:block;font-size:var(--fs-label);color:var(--c-muted);margin-top:var(--s-2)}

/* ---------- hỏi đáp ---------- */
.qa-grid{display:grid;gap:var(--s-6)}
.qa-grid>*{min-width:0}
.qa{display:grid;gap:var(--s-3);margin-bottom:var(--s-5)}
.qa details{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.qa details[open]{border-color:var(--c-pink)}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:var(--s-4);justify-content:space-between;align-items:center;padding:var(--s-4) var(--s-5);font:var(--fw-bold) var(--fs-body)/1.4 var(--f-display);color:var(--c-ink);min-height:56px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c-paper);color:var(--c-rose-ink);font:var(--fw-bold) var(--fs-h3)/1 var(--f-body)}
.qa details[open] summary::after{content:"−";background:var(--c-saffron);color:var(--c-ink)}
.qa h3{font:inherit;margin:0;letter-spacing:0;padding:0;border:0}
.qa-a{padding:0 var(--s-5) var(--s-4);color:var(--c-muted)}
.qa-a p:last-child{margin:0}

/* ---------- chân trang ---------- */
.basefoot{background:var(--c-navy);color:var(--c-on-navy-muted);margin-top:var(--s-9);padding-top:var(--s-8);padding-bottom:var(--s-6);font-size:var(--fs-sm)}
.basefoot a{color:var(--c-on-navy);text-decoration:none}
.basefoot a:hover{color:var(--c-pink-soft);text-decoration:underline}
.foot-cols{display:grid;gap:var(--s-7)}
.foot-cols h2{font:var(--fw-semi) var(--fs-label)/1.2 var(--f-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-pink-soft);margin-bottom:var(--s-3)}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.foot-intro img{width:127px;height:40px}
.foot-intro p{max-width:42ch;margin-top:var(--s-4)}
.foot-line{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--c-navy-line);display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between}

/* ---------- bài viết · trang · chuyên mục ---------- */
.trail{font-size:var(--fs-sm);color:var(--c-muted);padding-top:var(--s-4)}
.trail ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.trail li+li::before{content:"/";margin-right:var(--s-2);color:var(--c-line)}
.trail a{color:var(--c-muted)}
.trail [aria-current]{color:var(--c-ink)}
.story{max-width:760px;margin-inline:auto;min-width:0}
.story-top{padding-top:var(--s-5);padding-bottom:var(--s-5)}
.story-top h1{font-size:clamp(1.75rem,1.3rem + 2.2vw,2.75rem);line-height:var(--lh-head)}
.byl{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--c-muted)}
.byl b{color:var(--c-ink);font-weight:var(--fw-semi)}
.mono{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-navy);color:var(--c-saffron);font:var(--fw-bold) var(--fs-sm)/1 var(--f-display)}
.story-img{margin-bottom:var(--s-6)}
.story-img img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg)}
.story-body{font-size:var(--fs-body);overflow-wrap:break-word}
.story-body>p:first-child{font-size:var(--fs-lead);color:var(--c-ink)}
.story-body h2{margin:var(--s-8) 0 var(--s-4);font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);padding-top:var(--s-5);border-top:3px solid var(--c-ink)}
.story-body h3{margin:var(--s-6) 0 var(--s-3)}
.story-body h4{margin:var(--s-5) 0 var(--s-2);font-size:var(--fs-body)}
.story-body ul,.story-body ol{padding-left:var(--s-5);margin:0 0 var(--s-4)}
.story-body li{margin-bottom:var(--s-2)}
.story-body li::marker{color:var(--c-rose-ink);font-weight:var(--fw-bold)}
.story-body figure,.story-body .wp-caption{margin:var(--s-6) 0}
.story-body img{border-radius:var(--r-md)}
.story-body blockquote{background:var(--c-pink-wash);border-left:4px solid var(--c-pink);border-radius:var(--r-md);padding:var(--s-4) var(--s-5);margin:0 0 var(--s-5)}
.story-body blockquote p:last-child{margin:0}
.story-body iframe{max-width:100%}
/* ảnh có chú thích: không vượt cột */
.wp-caption{max-width:100%!important;width:auto!important}
.aligncenter{margin-inline:auto}
.alignleft,.alignright{margin-bottom:var(--s-4)}
.writer{display:flex;gap:var(--s-4);align-items:center;margin-top:var(--s-8);padding:var(--s-5);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.writer .mono{width:56px;height:56px;font-size:var(--fs-body)}
.writer p{margin:0}
.writer-role{font-size:var(--fs-sm);color:var(--c-muted)}

/* Bài liên quan: cuối bài (< 1024px) · cột phải dính (≥ 1024px) */
.morelist{max-width:760px;margin-inline:auto;margin-top:var(--s-8);padding-top:var(--s-5);border-top:3px solid var(--c-ink)}
.morelist h2{font-size:var(--fs-h3);margin-bottom:var(--s-4)}
.morelist ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.morelist li{position:relative;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-3) var(--s-3) var(--s-3) calc(var(--rel-thumb) + var(--s-3)*2);min-height:calc(var(--rel-thumb) + var(--s-3)*2)}
.morelist a{color:var(--c-ink);text-decoration:none;font:var(--fw-bold) var(--fs-sm)/1.35 var(--f-display);letter-spacing:0}
.morelist a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--r-md)}
.morelist a:hover .ml-t{color:var(--c-rose-ink);text-decoration:underline}
.morelist img,.morelist .noimg{position:absolute;left:var(--s-3);top:var(--s-3);width:var(--rel-thumb);height:var(--rel-thumb);object-fit:cover;border-radius:var(--r-sm);background:var(--c-navy-2)}
.ml-t{display:block}
.morelist time{display:block;font-size:var(--fs-label);color:var(--c-muted);margin-top:var(--s-1)}
.morelist li:has(a:focus-visible){outline:3px solid var(--c-saffron);outline-offset:2px}

.hub-top{padding-top:var(--s-5);padding-bottom:var(--s-7)}
.hub-top>p,.hub-top .hub-desc{max-width:var(--measure);color:var(--c-muted);margin-top:var(--s-3)}
.hub-desc p{margin:0}
.pages{display:flex;gap:var(--s-2);justify-content:center;margin-top:var(--s-7);flex-wrap:wrap}
.pages a.page-numbers,.pages span.page-numbers{min-width:44px;height:44px;display:grid;place-items:center;padding:0 var(--s-3);border-radius:var(--r-full);border:1px solid var(--c-line);background:var(--c-card);color:var(--c-ink);text-decoration:none;font-weight:var(--fw-semi);font-size:var(--fs-sm)}
.pages span.current{background:var(--c-ink);color:var(--c-on-navy);border-color:var(--c-ink)}
.pages span.dots{border:0;background:none}
.search-form{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.search-form input[type=search]{min-height:44px;padding:0 var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-md);font:inherit}
.search-form input[type=submit]{min-height:44px;padding:0 var(--s-4);border:0;border-radius:var(--r-md);background:var(--c-navy);color:var(--c-on-navy);font:inherit;font-weight:var(--fw-semi);cursor:pointer}
.nothing{padding-top:var(--s-8);padding-bottom:var(--s-8)}
.nothing ul{padding-left:var(--s-5)}

/* ---------- màn hình rộng + chỉnh riêng điện thoại: để cuối file ---------- */
@media (min-width:640px) and (max-width:1023px){.morelist ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){
  :root{--gutter:32px;--header-h:72px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .foot-cols{grid-template-columns:2fr 1fr 1fr}
}
@media (min-width:783px){.admin-bar .topbar{top:32px}}
@media (min-width:960px){
  .brandmark img{width:127px;height:40px}
  .lead{padding-top:var(--s-9);padding-bottom:var(--s-9)}
  .lead-grid--art{grid-template-columns:7fr 5fr;align-items:center;gap:var(--s-8)}
  .band{padding-top:var(--s-9);padding-bottom:var(--s-9)}
  .duo--art{grid-template-columns:7fr 5fr;gap:var(--s-8);align-items:start}
  .duo--rev .duo-art{order:-1}
  .navybox{padding:var(--s-8)}
  .stepgrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .stepgrid li{grid-template-columns:1fr}
  .qa-grid{grid-template-columns:4fr 8fr;gap:var(--s-8)}
  .qa-grid>header{position:sticky;top:calc(var(--header-h) + var(--s-6));align-self:start}
}
@media (min-width:1024px){
  .story-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar-w);gap:var(--s-7);align-items:start}
  .story-grid .story{max-width:none;margin:0}
  .morelist{max-width:none;margin:var(--s-5) 0 0;position:sticky;top:calc(var(--header-h) + var(--s-5))}
}
/* Menu ngang từ 1100px (hẹp hơn: nút menu). Menu 6 mục tên dài: nhãn xuống tối đa 2 dòng, cân giữa, không đẩy 2 nút ra ngoài. */
@media (min-width:1100px){
  .menukey{display:none}
  .navpanel{display:flex!important;position:static;align-items:center;gap:var(--s-5);flex:1;min-width:0;max-height:none;overflow:visible;padding:0;border:0;box-shadow:none;background:none}
  .navlist{display:flex;gap:var(--s-1);margin-inline:auto;background:var(--c-navy-2);border:1px solid var(--c-navy-line);border-radius:var(--r-full);padding:var(--s-1)}
  .navlist a{min-height:40px;padding:0 var(--s-3);border:0;border-radius:var(--r-full);font:var(--fw-semi) var(--fs-sm)/1.15 var(--f-body);text-align:center;text-wrap:balance;color:var(--c-on-navy-muted)}
  .navlist li:first-child a{white-space:nowrap}
  .navlist a::after{content:none}
  .navlist a:hover{color:var(--c-on-navy)}
  .navlist a[aria-current="page"]{background:var(--c-on-navy);color:var(--c-ink)}
  .navpanel .actbox{margin:0;width:var(--plg-head-w);flex:none;min-height:var(--plg-btn-h)}
  .topbar .actbox>div{margin:0}
  .lead .actbox{display:none} /* 2 nút đã hiện trên thanh đầu trang → khối đầu trang chủ không lặp lại */
}
@media (min-width:1080px){
  .cards--4{grid-template-columns:repeat(4,1fr)}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .card{grid-template-columns:1fr;padding:var(--s-3) var(--s-3) var(--s-5)}
  .card img,.card .noimg{aspect-ratio:16/9}
  .card h2,.card h3{font-size:var(--fs-h3)}
}
@media (max-width:360px){.actbox{min-height:var(--plg-btn-box-col)}.actbox>div{flex-direction:column}.actbox a{flex:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}