/* Token Atlas — design tokens. Mọi màu của site CHỈ được khai báo ở file này (§9). */
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-var.woff2) format("woff2-variations"),url(/assets/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* fallback có số đo gần đúng để giảm nhảy bố cục khi font tải */
@font-face{font-family:"Archivo Fallback";src:local("Arial Narrow"),local("Arial");size-adjust:92%;ascent-override:92%;descent-override:22%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial");size-adjust:100%;ascent-override:95%;descent-override:22%}

:root{
  /* ---- primary: violet (hue ≈290°) ---- */
  --primary-50:#F4E6F7;--primary-100:#E7C7ED;--primary-200:#D299DD;--primary-300:#B766C7;--primary-400:#9A3AAD;
  --primary-500:#7C1F8F;--primary-600:#621472;--primary-700:#4D0D5A;--primary-800:#390943;--primary-900:#26062C;
  /* ---- accent: signal lilac ---- */
  --accent-200:#E9DDFF;--accent-400:#C6A6FF;--accent-600:#9B6BF0;
  /* ---- neutral: violet-tinted grey ---- */
  --neutral-0:#FFFFFF;--neutral-50:#F6F1F7;--neutral-100:#EDE5EF;--neutral-200:#DED1E0;--neutral-300:#C5B5C8;
  --neutral-400:#9E8BA2;--neutral-500:#6F5E73;--neutral-600:#564759;--neutral-700:#3E3240;--neutral-800:#281F2A;
  --neutral-900:#19121A;--neutral-950:#0F0B10;
  /* ---- semantic ---- */
  --success-bg:#E8F5DD;--success-fg:#25540F;--success-border:#4F8A22;
  --warning-bg:#FFF2C9;--warning-fg:#6A4A00;--warning-border:#A27A08;
  --danger-bg:#F6E8E3;--danger-fg:#86301A;--danger-border:#B9553B;
  --info-bg:#EDE6EE;--info-fg:#3C2441;--info-border:#765A7C;

  /* ---- vai trò (theme sáng mặc định: tinted-light) ---- */
  --bg:var(--neutral-50);
  --surface-1:var(--neutral-0);
  --surface-2:var(--neutral-100);
  --surface-3:var(--neutral-200);
  --text:var(--neutral-900);
  --text-muted:var(--neutral-600);
  --text-soft:var(--neutral-700);
  --link:var(--primary-700);
  --link-hover:var(--primary-900);
  --ink:var(--neutral-900);
  --on-ink:#F5EAF7;
  --on-ink-muted:#BCA8C0;
  --block:var(--accent-400);
  --on-block:var(--neutral-950);
  --brand:var(--primary-700);
  --on-brand:#FFFFFF;
  --btn-bg:var(--ink);--btn-fg:var(--on-ink);--btn-bg-hover:var(--primary-700);
  --border-subtle:var(--neutral-200);
  --border-strong:var(--neutral-900);
  --focus-ring:#2B6CB0;
  --mark:var(--accent-200);
  --chart-0:var(--primary-600);--chart-1:#2F7FA3;--chart-2:#B7791F;--chart-3:var(--neutral-500);
  --chart-neg:#B4442A;

  /* ---- chữ ---- */
  --font-head:"Archivo","Archivo Fallback",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Public Sans","Public Sans Fallback",ui-sans-serif,system-ui,sans-serif;
  --head-stretch:80%;
  --fs-xs:.8125rem;--fs-sm:.9375rem;--fs-base:1.125rem;--fs-md:1.25rem;--fs-lg:1.5625rem;
  --fs-xl:clamp(1.6rem,1.25rem + 1.3vw,2.2rem);
  --fs-2xl:clamp(2.05rem,1.45rem + 2.5vw,3.35rem);
  --fs-3xl:clamp(2.35rem,1.5rem + 3.6vw,4.3rem);
  --lh-body:1.7;--lh-head:1.08;--lh-snug:1.25;
  --measure:68ch;
  --track-label:.08em;

  /* ---- khoảng cách: thang 4px ---- */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --gutter:16px;--container:1280px;--rail:340px;

  /* ---- hình khối: pill-24 ---- */
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-pill:999px;
  --bw:2px;--bw-thin:1px;
  --elev-0:none;
  --elev-1:0 1px 0 rgba(23,26,18,.06),0 1px 3px rgba(23,26,18,.06);
  --elev-2:0 6px 20px -8px rgba(23,26,18,.22);
  --elev-3:0 18px 48px -12px rgba(23,26,18,.32);
  --z-base:1;--z-sticky:40;--z-dropdown:60;--z-overlay:80;--z-modal:90;--z-toast:100;

  /* ---- chuyển động ---- */
  --t-fast:120ms;--t-med:200ms;--t-slow:320ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-inout:cubic-bezier(.6,0,.3,1);
  color-scheme:light;
}
@media (min-width:768px){:root{--gutter:24px}}

/* ---- theme tối: ánh xạ lại cùng tên token ---- */
:root[data-theme="dark"],.theme-dark{
  --bg:#110C12;--surface-1:#19121B;--surface-2:#231A25;--surface-3:#2F2331;
  --text:#EFE6F1;--text-muted:#B19FB5;--text-soft:#D0C0D3;
  --link:#C6A6FF;--link-hover:#E9DDFF;
  --ink:#060406;--on-ink:#EFE6F1;--on-ink-muted:#B19FB5;
  --block:#C6A6FF;--on-block:#0F0B10;
  --brand:#C6A6FF;--on-brand:#0F0B10;--btn-bg:#C6A6FF;--btn-fg:#0F0B10;--btn-bg-hover:#DCC8FF;
  --border-subtle:#342A36;--border-strong:#DED1E0;
  --focus-ring:#7FB8E6;--mark:#41124A;
  --success-bg:#16260E;--success-fg:#B6E28E;--success-border:#4F7F2A;
  --warning-bg:#2B2208;--warning-fg:#F3D27A;--warning-border:#9C7A14;
  --danger-bg:#2E130C;--danger-fg:#F4A592;--danger-border:#A64A33;
  --info-bg:#1E1620;--info-fg:#D5BFD9;--info-border:#835E8A;
  --chart-0:#C6A6FF;--chart-1:#6EC1E4;--chart-2:#F2B856;--chart-3:#9E8BA2;--chart-neg:#F08A6E;
  --elev-1:0 1px 0 rgba(0,0,0,.4);--elev-2:0 8px 24px -8px rgba(0,0,0,.6);--elev-3:0 18px 48px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#110C12;--surface-1:#19121B;--surface-2:#231A25;--surface-3:#2F2331;
    --text:#EFE6F1;--text-muted:#B19FB5;--text-soft:#D0C0D3;
    --link:#C6A6FF;--link-hover:#E9DDFF;
    --ink:#060406;--on-ink:#EFE6F1;--on-ink-muted:#B19FB5;
    --block:#C6A6FF;--on-block:#0F0B10;
    --brand:#C6A6FF;--on-brand:#0F0B10;--btn-bg:#C6A6FF;--btn-fg:#0F0B10;--btn-bg-hover:#DCC8FF;
    --border-subtle:#342A36;--border-strong:#DED1E0;
    --focus-ring:#7FB8E6;--mark:#41124A;
    --success-bg:#16260E;--success-fg:#B6E28E;--success-border:#4F7F2A;
    --warning-bg:#2B2208;--warning-fg:#F3D27A;--warning-border:#9C7A14;
    --danger-bg:#2E130C;--danger-fg:#F4A592;--danger-border:#A64A33;
    --info-bg:#1E1620;--info-fg:#D5BFD9;--info-border:#835E8A;
    --chart-0:#C6A6FF;--chart-1:#6EC1E4;--chart-2:#F2B856;--chart-3:#9E8BA2;--chart-neg:#F08A6E;
    --elev-1:0 1px 0 rgba(0,0,0,.4);--elev-2:0 8px 24px -8px rgba(0,0,0,.6);--elev-3:0 18px 48px -12px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
@media (prefers-reduced-motion:reduce){:root{--t-fast:0ms;--t-med:0ms;--t-slow:0ms}}

/* panel sáng cục bộ (styleguide) */
.theme-light{--success-bg:#E8F5DD;--success-fg:#25540F;--success-border:#4F8A22;
  --warning-bg:#FFF2C9;--warning-fg:#6A4A00;--warning-border:#A27A08;
  --danger-bg:#F6E8E3;--danger-fg:#86301A;--danger-border:#B9553B;
  --info-bg:#EDE6EE;--info-fg:#3C2441;--info-border:#765A7C;
--bg:var(--neutral-50);
  --surface-1:var(--neutral-0);
  --surface-2:var(--neutral-100);
  --surface-3:var(--neutral-200);
  --text:var(--neutral-900);
  --text-muted:var(--neutral-600);
  --text-soft:var(--neutral-700);
  --link:var(--primary-700);
  --link-hover:var(--primary-900);
  --ink:var(--neutral-900);
  --on-ink:#F5EAF7;
  --on-ink-muted:#BCA8C0;
  --block:var(--accent-400);
  --on-block:var(--neutral-950);
  --brand:var(--primary-700);
  --on-brand:#FFFFFF;
  --btn-bg:var(--ink);--btn-fg:var(--on-ink);--btn-bg-hover:var(--primary-700);
  --border-subtle:var(--neutral-200);
  --border-strong:var(--neutral-900);
  --focus-ring:#2B6CB0;
  --mark:var(--accent-200);
  --chart-0:var(--primary-600);--chart-1:#2F7FA3;--chart-2:#B7791F;--chart-3:var(--neutral-500);
  --chart-neg:#B4442A;
  --elev-1:0 1px 0 rgba(23,26,18,.06),0 1px 3px rgba(23,26,18,.06);color-scheme:light}

/* ---- base.css ---- */
/* base: reset, chữ, khung lưới */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--s-9)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);
  font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom)}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-head);font-stretch:var(--head-stretch);line-height:var(--lh-head);margin:0;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg);line-height:var(--lh-snug);font-weight:750}
p{margin:0}
a{color:var(--link);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--link-hover);text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:var(--r-sm)}
button{font:inherit;color:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--surface-2);padding-block:.1em;padding-inline:.35em;border-radius:var(--r-sm)}
strong{font-weight:700}
.num,table,.tnum{font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:var(--s-4);top:-80px;z-index:var(--z-modal);background:var(--ink);color:var(--on-ink);padding-block:var(--s-3);padding-inline:var(--s-5);border-radius:var(--r-pill);font-weight:700;transition:top var(--t-fast) var(--ease-out)}
.skip-link:focus{top:var(--s-3)}
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.label{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase}
.muted{color:var(--text-muted)}
.band{padding-block:var(--s-7)}
.band--tight{padding-block:var(--s-6)}
.band + .band{padding-top:0}
main{display:block;min-height:50vh}
::selection{background:var(--mark);color:var(--text)}

/* ---- header.css ---- */
/* masthead: thanh tiện ích (ink) + thanh chính (logo, tìm kiếm) + thanh chuyên mục (mega menu) */
.util{background:var(--ink);color:var(--on-ink);font-size:var(--fs-xs)}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:44px}
.util__claim{margin:0;color:var(--on-ink-muted);letter-spacing:.02em}
.util__claim b{color:var(--on-ink);font-weight:700}
.util__links{display:flex;align-items:center;gap:var(--s-2);list-style:none;margin:0;padding:0}
.util__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-ink);text-decoration:none;padding-inline:var(--s-2);border-radius:var(--r-pill);font-weight:600}
.util__links a:hover{background:var(--neutral-800);color:var(--on-ink)}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;background:transparent;border:var(--bw-thin) solid var(--neutral-700);color:var(--on-ink);border-radius:var(--r-pill);min-height:36px;padding-inline:12px;cursor:pointer;font-size:var(--fs-xs);font-weight:600}
@media (max-width:767px){.theme-toggle{min-height:44px}}
.theme-toggle:hover{border-color:var(--on-ink)}
.theme-toggle svg{width:14px;height:14px;fill:currentColor}
@media (max-width:767px){.util__claim{display:none}.util .wrap{justify-content:flex-end}}

.masthead{position:sticky;top:0;z-index:var(--z-sticky);background:var(--surface-1);border-bottom:var(--bw) solid var(--border-strong);transition:transform var(--t-slow) var(--ease-out)}
.masthead.is-hidden{transform:translateY(-100%)}
.masthead__main .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;flex:none}
.brand:hover{color:var(--text)}
.brand svg{height:40px;width:auto}
.brand .logo-mark-disc{fill:var(--block)}
.brand .logo-ink{fill:var(--text)}
.brand .logo-stroke{stroke:var(--on-block)}
.search-inline{flex:1;max-width:560px;margin-inline-start:auto;position:relative}
.search-inline input{width:100%;min-height:46px;border-radius:var(--r-pill);border:var(--bw) solid var(--border-strong);background:var(--surface-2);color:var(--text);
  padding-inline:46px 52px;font-size:1rem;font-family:var(--font-body)}
.search-inline input::placeholder{color:var(--text-muted)}
.search-inline input:focus{background:var(--surface-1);outline:3px solid var(--focus-ring);outline-offset:2px}
.search-inline .icon-search{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:var(--text)}
.kbd{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-family:ui-monospace,Menlo,monospace;font-size:.75rem;border:var(--bw-thin) solid var(--border-subtle);border-radius:var(--r-sm);padding-inline:6px;color:var(--text-muted);background:var(--surface-1)}
.masthead__actions{display:flex;align-items:center;gap:var(--s-2)}
.icon-btn{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:var(--r-pill);border:var(--bw) solid var(--border-strong);background:var(--surface-1);cursor:pointer}
.icon-btn svg{width:20px;height:20px;fill:var(--text)}
.icon-btn:hover{background:var(--block)}
.icon-btn:hover svg{fill:var(--on-block)}
.menu-btn,.search-btn{display:none}
@media (max-width:1199px){.menu-btn{display:inline-grid}.sections{display:none}.masthead__actions{margin-inline-start:auto}}
@media (max-width:1023px){
  .masthead__main .wrap{min-height:62px;gap:var(--s-3)}
  .brand svg{height:34px}
  .search-inline{display:none}
  .menu-btn,.search-btn{display:inline-grid}
  .masthead__actions{margin-inline-start:auto}
}

/* thanh chuyên mục */
.sections{border-top:var(--bw-thin) solid var(--border-subtle);background:var(--surface-1)}
.sections__list{display:flex;align-items:stretch;gap:0;list-style:none;margin:0;padding:0}
.sections__item{position:relative;display:flex;align-items:center}
.sections__toggle{display:inline-grid;place-items:center;width:26px;height:26px;margin-inline-start:-8px;margin-inline-end:4px;border:0;background:transparent;border-radius:var(--r-pill);cursor:pointer;color:var(--text-muted)}
.sections__toggle svg{width:12px;height:12px;fill:currentColor;transition:transform var(--t-fast)}
.sections__toggle:hover{background:var(--surface-2);color:var(--text)}
.sections__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.sections__link{display:flex;align-items:center;gap:6px;min-height:48px;padding-inline:var(--s-3);font-weight:700;font-size:var(--fs-sm);color:var(--text);text-decoration:none;
  border-bottom:4px solid transparent;margin-bottom:-2px;white-space:nowrap}
.sections__link:hover,.sections__item.is-open>.sections__link{color:var(--text);border-bottom-color:var(--block)}
.sections__link[aria-current="page"]{border-bottom-color:var(--brand)}
.sections__link svg{width:10px;height:10px;fill:currentColor;transition:transform var(--t-fast)}
.sections__more{margin-inline-start:auto}
.mega{position:absolute;top:100%;inset-inline-start:0;z-index:var(--z-dropdown);width:min(560px,90vw);background:var(--surface-1);border:var(--bw) solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:var(--elev-3);padding:var(--s-5);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-5);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out),visibility 0s linear var(--t-med)}
.sections__item:nth-child(n+5) .mega{inset-inline-start:auto;inset-inline-end:0}
.sections__item:hover .mega,.sections__item.is-open .mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding-bottom:var(--s-3);border-bottom:var(--bw-thin) solid var(--border-subtle);margin-bottom:var(--s-2)}
.mega__head p{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.4}
.mega a{color:var(--text);text-decoration:none;font-size:var(--fs-sm);line-height:1.35;padding-block:6px;display:block;font-weight:600}
.mega a:hover{color:var(--link);text-decoration:underline}
.mega .mega__all{font-weight:800;white-space:nowrap;color:var(--link)}


/* drawer điện thoại */
.drawer{position:fixed;inset:0;z-index:var(--z-modal);display:none}
.drawer.is-open{display:block}
.drawer__scrim{position:absolute;inset:0;background:var(--ink);opacity:.55}
.drawer__panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(400px,92vw);background:var(--surface-1);overflow-y:auto;padding:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-5);box-shadow:var(--elev-3);padding-bottom:calc(var(--s-6) + env(safe-area-inset-bottom))}
.drawer__top{display:flex;justify-content:space-between;align-items:center}
.drawer details{border-bottom:var(--bw-thin) solid var(--border-subtle)}
.drawer summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:52px;font-family:var(--font-head);font-stretch:var(--head-stretch);font-size:1.3rem;font-weight:800;cursor:pointer}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";font-size:1.5rem;font-weight:400}
.drawer details[open] summary::after{content:"–"}
.drawer ul{list-style:none;margin:0;padding:0 0 var(--s-3)}
.drawer li a{display:flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none;font-weight:600}
.drawer .drawer__utility{display:flex;flex-wrap:wrap;gap:var(--s-2)}
body.no-scroll{overflow:hidden}

/* dải hồ sơ chỉ số (vị trí tương ứng dải ticker của site mẫu — không có giá trực tiếp) */
.index-strip{background:var(--block);color:var(--on-block);border-bottom:var(--bw) solid var(--border-strong)}
.index-strip .wrap{display:flex;align-items:center;gap:var(--s-4);min-height:60px;overflow-x:auto;scrollbar-width:none}
.index-strip .wrap::-webkit-scrollbar{display:none}
.index-strip__label{flex:none;font-weight:800;font-size:var(--fs-xs);letter-spacing:var(--track-label);text-transform:uppercase}
.index-strip ul{display:flex;gap:var(--s-2);list-style:none;margin:0;padding:0}
.index-strip a{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;color:var(--on-block);text-decoration:none;font-weight:700;font-size:var(--fs-sm);
  border:var(--bw) solid var(--on-block);border-radius:var(--r-pill);padding-inline:14px;min-height:44px;align-items:center}
.index-strip a span{font-weight:500;opacity:.8}
.index-strip a:hover{background:var(--on-block);color:var(--block)}
.index-strip .wrap{-webkit-mask-image:linear-gradient(90deg,black 92%,transparent);mask-image:linear-gradient(90deg,black 92%,transparent)}

/* ---- cards.css ---- */
/* thẻ bài: image-top (chuẩn), --lead (nổi bật), --compact (rail), --row (danh sách) ; thẻ công cụ, thuật ngữ, chuyên mục */
.card{position:relative;display:flex;flex-direction:column;gap:var(--s-3);color:var(--text);min-width:0}
.card__media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-3);aspect-ratio:16/10}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.card:hover .card__media img{transform:scale(1.03)}
.card__media--flat{display:grid;place-items:center;background:var(--block)}
.card__media--flat svg{width:38%;height:auto}
.card__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.card__kicker a{color:var(--link);text-decoration:none;position:relative;z-index:2}
.card__kicker a:hover{text-decoration:underline}
.card__title{font-family:var(--font-head);font-stretch:84%;font-size:1.3rem;font-weight:800;line-height:1.15;letter-spacing:-.005em}
.card__title a{color:var(--text);text-decoration:none}
.card__title a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-lg)}
.card__title a:hover{text-decoration:underline;text-decoration-thickness:.1em}
.card:focus-within{outline:3px solid var(--focus-ring);outline-offset:6px;border-radius:var(--r-lg)}
.card:focus-within a:focus-visible{outline:none}
.card__dek{color:var(--text-soft);font-size:var(--fs-sm);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__meta{font-size:var(--fs-xs);color:var(--text-muted);font-weight:600;display:flex;gap:var(--s-2);align-items:center;margin-top:auto}
.pill-tag{display:inline-flex;align-items:center;min-height:22px;padding-inline:8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.card--lead .card__title{font-size:var(--fs-2xl);font-stretch:78%;line-height:1.02}
.card--lead .card__media{aspect-ratio:16/9}
.card--lead .card__dek{font-size:var(--fs-md);-webkit-line-clamp:4;color:var(--text-soft)}
.card--compact{display:grid;grid-template-columns:1fr 104px;gap:var(--s-3);align-items:start;padding-block:var(--s-4);border-bottom:var(--bw-thin) solid var(--border-subtle)}
.card--compact .card__media{aspect-ratio:1/1;border-radius:var(--r-md);grid-column:2;grid-row:1/span 3}
.card--compact .card__title{font-size:1.12rem;font-stretch:88%}
.card--compact .card__body{display:flex;flex-direction:column;gap:6px;grid-column:1;grid-row:1}
.card--row{display:grid;grid-template-columns:200px 1fr;gap:var(--s-5);align-items:start;padding-block:var(--s-5);border-bottom:var(--bw-thin) solid var(--border-subtle)}
.card--row .card__media{aspect-ratio:4/3}
@media (max-width:640px){.card--row{grid-template-columns:110px 1fr;gap:var(--s-4)}.card--row .card__title{font-size:1.1rem}.card--row .card__dek{-webkit-line-clamp:2}}
.rank{counter-increment:rank}
.rank .card__kicker::before{content:counter(rank,decimal-leading-zero);font-family:var(--font-head);font-stretch:70%;font-size:1.6rem;font-weight:900;letter-spacing:0;color:var(--text);margin-inline-end:4px;line-height:1}

.grid{display:grid;gap:var(--s-6) var(--s-5)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1023px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--4,.grid--3,.grid--2{grid-template-columns:1fr}.grid{gap:var(--s-5)}}

/* thẻ công cụ */
.tool-tile{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface-1);min-height:200px;transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med)}
.tool-tile:hover{transform:translateY(-3px);box-shadow:var(--elev-2)}
.tool-tile__icon{width:48px;height:48px;border-radius:var(--r-pill);background:var(--block);display:grid;place-items:center}
.tool-tile__icon svg{width:24px;height:24px;fill:var(--on-block)}
.tool-tile h3{font-size:1.25rem}
.tool-tile h3 a{color:var(--text);text-decoration:none}
.tool-tile h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.tool-tile p{color:var(--text-soft);font-size:var(--fs-sm);line-height:1.5}
.tool-tile:focus-within{outline:3px solid var(--focus-ring);outline-offset:4px}
.tool-tile a:focus-visible{outline:none}

/* chip thuật ngữ / chuyên mục */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-inline:16px;border-radius:var(--r-pill);border:var(--bw) solid var(--border-strong);color:var(--text);
  text-decoration:none;font-weight:700;font-size:var(--fs-sm);background:var(--surface-1);transition:background var(--t-fast),color var(--t-fast)}
.chip:hover{background:var(--ink);color:var(--on-ink)}
.chip--quiet{border-color:var(--border-subtle)}
.chip[aria-current="true"]{background:var(--block);color:var(--on-block)}
.sec-tile{position:relative;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);border-radius:var(--r-lg);background:var(--surface-1);border:var(--bw) solid var(--border-subtle);min-height:150px}
.sec-tile:hover{border-color:var(--border-strong)}
.sec-tile h3{font-size:1.3rem}
.sec-tile h3 a{color:var(--text);text-decoration:none}
.sec-tile h3 a::after{content:"";position:absolute;inset:0}
.sec-tile p{font-size:var(--fs-sm);color:var(--text-soft);line-height:1.5}
.sec-tile .count{margin-top:auto;font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}
.card--row .card__body{display:grid;gap:var(--s-2);align-content:start}
.card__kicker a{display:inline-flex;align-items:center;min-height:24px}

.card--rank{padding-block:var(--s-4);border-bottom:var(--bw-thin) solid var(--border-subtle)}
.card--rank .card__body{display:grid;gap:6px}
.card--rank .card__title{font-size:1.15rem;font-stretch:86%}
.card__media::after,.photo__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--border-subtle);pointer-events:none}
.photo__frame{position:relative}
@media (max-width:640px){
  .grid--4>.card:not(:first-child),.grid--2>.card:not(:first-child){display:grid;grid-template-columns:minmax(0,1fr) 96px;column-gap:var(--s-3);row-gap:6px;padding-bottom:var(--s-4);border-bottom:var(--bw-thin) solid var(--border-subtle)}
  .grid--4>.card:not(:first-child) .card__media,.grid--2>.card:not(:first-child) .card__media{grid-column:2;grid-row:1/span 3;aspect-ratio:1;border-radius:var(--r-md)}
  .grid--4>.card:not(:first-child) .card__dek,.grid--2>.card:not(:first-child) .card__dek{display:none}
  .grid--4>.card:not(:first-child) .card__title,.grid--2>.card:not(:first-child) .card__title{font-size:1.1rem}
  .grid--4>.card:not(:first-child) > :not(.card__media),.grid--2>.card:not(:first-child) > :not(.card__media){grid-column:1}
}
.card__media picture,.photo__frame picture{display:contents}

/* ---- layout.css ---- */
/* dải trang chủ / hub: tiêu đề dải, hero lead + rail, khối màu, bảng chỉ số, chân trang */
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.sec-head h2{font-size:var(--fs-xl);display:flex;align-items:center;gap:var(--s-3)}
.sec-head h2::before{content:"";width:14px;height:14px;border-radius:var(--r-pill);background:var(--block);border:var(--bw) solid var(--border-strong);flex:none}
.sec-head__more{font-weight:700;font-size:var(--fs-sm);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.sec-head__more::after{content:"→"}
.sec-head__more:hover{text-decoration:underline}
.sec-head p{color:var(--text-muted);font-size:var(--fs-sm);max-width:60ch}

.hero{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s-6);align-items:start}
.hero__rail{border-inline-start:var(--bw) solid var(--border-strong);padding-inline-start:var(--s-5)}
.hero__rail h2{font-size:1.15rem;font-stretch:90%;text-transform:uppercase;letter-spacing:.04em;padding-bottom:var(--s-2);border-bottom:var(--bw) solid var(--border-strong)}
.hero__rail ol{list-style:none;margin:0;padding:0;counter-reset:rank}
.hero__lead-sub{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-6);padding-top:var(--s-5);border-top:var(--bw-thin) solid var(--border-subtle)}
@media (max-width:1023px){.hero{grid-template-columns:1fr}.hero__rail{border-inline-start:0;padding-inline-start:0;border-top:var(--bw) solid var(--border-strong);padding-top:var(--s-4)}}
@media (max-width:640px){.hero__lead-sub{grid-template-columns:1fr}}

.block-band{background:var(--block);color:var(--on-block);border-block:var(--bw) solid var(--border-strong)}
.block-band a{color:var(--on-block)}
.block-band .sec-head h2::before{background:var(--on-block);border-color:var(--on-block)}
.path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-4);list-style:none;margin:0;padding:0;counter-reset:step}
.path li{counter-increment:step;position:relative;background:var(--surface-1);color:var(--text);border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);min-height:150px}
.path li::before{content:counter(step);font-family:var(--font-head);font-stretch:70%;font-weight:900;font-size:2.4rem;line-height:1;color:var(--text)}
.path a{color:var(--text);text-decoration:none;font-weight:800;font-family:var(--font-head);font-stretch:86%;font-size:1.12rem;line-height:1.2}
.path a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.path li:hover{box-shadow:var(--elev-2)}
.path li:focus-within{outline:3px solid var(--focus-ring);outline-offset:3px}
.path a:focus-visible{outline:none}
.path p{font-size:var(--fs-xs);color:var(--text-muted);font-weight:600}
@media (max-width:1023px){.path{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.path{grid-template-columns:1fr}.path li{min-height:0;flex-direction:row;align-items:center;gap:var(--s-4)}.path li::before{font-size:1.8rem}}

.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-6);align-items:start}
@media (max-width:1023px){.split{grid-template-columns:1fr}}
.index-table-card{border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface-1);overflow:hidden}
.index-table-card h3{font-size:1.15rem;padding:var(--s-4) var(--s-5);background:var(--ink);color:var(--on-ink);text-transform:uppercase;letter-spacing:.04em;font-stretch:90%}
.index-table-card table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.index-table-card th,.index-table-card td{text-align:start;padding:var(--s-3) var(--s-5);border-bottom:var(--bw-thin) solid var(--border-subtle);vertical-align:top}
.index-table-card thead th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:700}
.index-table-card tbody th a{font-weight:800;color:var(--text)}
.index-table-card .foot{padding:var(--s-3) var(--s-5);font-size:var(--fs-xs);color:var(--text-muted)}

.az{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 var(--s-5);padding:0}
.az a,.az span{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);font-weight:800;font-family:var(--font-head);text-decoration:none}
.az a{border:var(--bw) solid var(--border-strong);color:var(--text);background:var(--surface-1)}
.az a:hover{background:var(--block);color:var(--on-block)}
.az span{color:var(--text-muted);opacity:.5;border:var(--bw-thin) dashed var(--border-subtle)}

.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.trust__item{border-top:var(--bw) solid var(--border-strong);padding-top:var(--s-4)}
.trust__item .trust__num{font-family:var(--font-head);font-stretch:70%;font-size:clamp(2.4rem,2rem + 2vw,3.6rem);font-weight:900;line-height:1;color:var(--text);margin:0}
.trust__item p{font-size:var(--fs-sm);color:var(--text-soft);margin-top:var(--s-2)}
@media (max-width:1023px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* đầu trang hub / trang phụ */
.page-head{padding-block:var(--s-6) var(--s-5);border-bottom:var(--bw) solid var(--border-strong);margin-bottom:var(--s-6)}
.page-head h1{font-size:var(--fs-3xl);font-stretch:74%;line-height:.98;margin-top:var(--s-2)}
.page-head__intro{font-size:var(--fs-md);color:var(--text-soft);max-width:68ch;margin-top:var(--s-4);display:grid;gap:var(--s-3)}
.page-head .chips{margin-top:var(--s-5)}
.crumbs{font-size:var(--fs-xs);font-weight:600}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;color:var(--text-muted)}
.crumbs li+li::before{content:"/";margin-inline-end:6px;color:var(--text-muted)}
.crumbs a{color:var(--text-muted);text-decoration:none;display:inline-flex;align-items:center;min-height:28px}
.crumbs a:hover{color:var(--link);text-decoration:underline}
.crumbs [aria-current]{color:var(--text)}

/* chân trang */
.site-foot{background:var(--ink);color:var(--on-ink);margin-top:var(--s-9);padding-block:var(--s-8) var(--s-6)}
.site-foot a{color:var(--on-ink);text-decoration:none}
.site-foot a:hover{text-decoration:underline;color:var(--accent-400)}
.foot-top{display:grid;grid-template-columns:minmax(0,4fr) repeat(4,minmax(0,2fr));gap:var(--s-6)}
.foot-brand p{color:var(--on-ink-muted);font-size:var(--fs-sm);margin-top:var(--s-4);max-width:36ch}
.foot-brand .logo-ink{fill:var(--on-ink)}
.foot-col h2{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--on-ink-muted);font-weight:700;margin-bottom:var(--s-3)}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot-col li a{display:inline-flex;min-height:44px;align-items:center;font-size:var(--fs-sm);font-weight:600}
.foot-risk{margin-top:var(--s-7);padding:var(--s-5);border:var(--bw) solid var(--accent-400);border-radius:var(--r-lg);font-size:var(--fs-sm);color:var(--on-ink);line-height:1.6}
.foot-risk b{color:var(--accent-400)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-6);font-size:var(--fs-xs);color:var(--on-ink-muted)}
@media (max-width:1023px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:46px;padding-inline:22px;border-radius:var(--r-pill);border:var(--bw) solid var(--border-strong);
  font-weight:800;font-size:var(--fs-sm);text-decoration:none;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);line-height:1.1}
.btn svg{width:16px;height:16px;fill:currentColor}
.btn--primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn--primary:hover{background:var(--btn-bg-hover);color:var(--btn-fg);border-color:var(--btn-bg-hover)}
.btn--secondary{background:var(--block);color:var(--on-block)}
.btn--secondary:hover{background:var(--ink);color:var(--on-ink)}
.btn--ghost{background:transparent;color:var(--text)}
.btn--ghost:hover{background:var(--surface-2);color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn--sm{min-height:44px;padding-inline:14px;font-size:var(--fs-xs)}
.btn--lg{min-height:56px;padding-inline:28px;font-size:var(--fs-base)}
.to-top{position:fixed;inset-inline-end:var(--s-4);bottom:calc(var(--s-4) + env(safe-area-inset-bottom));z-index:var(--z-sticky);width:48px;height:48px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);border:var(--bw) solid var(--block);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity var(--t-med);cursor:pointer}
.to-top.is-visible{opacity:1;visibility:visible}
.to-top svg{width:18px;height:18px;fill:currentColor}
.hero__rail .rank-list{list-style:none;margin:0;padding:0;counter-reset:rank}
.path--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.path--3{grid-template-columns:1fr}}
.planned{margin-top:var(--s-5)}
.band--path{padding-inline:var(--s-5);border-radius:var(--r-lg);border:var(--bw) solid var(--border-strong);margin-block:var(--s-7)}
.band--path + .band{padding-top:0}
.hero__rail-more{margin-top:var(--s-4)}
.gloss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-5)}
.gloss__letter h2{font-size:var(--fs-2xl);font-stretch:70%;border-bottom:var(--bw) solid var(--border-strong);margin-bottom:var(--s-3);scroll-margin-top:150px}
.gloss__letter ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.gloss__letter a{font-weight:800;font-size:1.1rem}
.gloss__letter p{font-size:var(--fs-sm);color:var(--text-soft);line-height:1.5;margin-top:2px}
@media (max-width:1023px){.gloss{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gloss{grid-template-columns:1fr}}
.az--sticky{position:sticky;top:130px;z-index:2;background:var(--bg);padding-block:var(--s-2)}
@media (max-width:1023px){.az--sticky{top:62px}}
.stage__list{list-style:none;margin:0;padding:0}
.tools-note{margin-top:var(--s-7);max-width:900px}
.search-info{margin-top:var(--s-4)}
.browse-h{font-size:var(--fs-lg);margin-bottom:var(--s-4)}
.nf__deck{margin-top:var(--s-4)}
.nf__form{margin-top:var(--s-5)}
.nf__chips{margin-top:var(--s-5)}
.contact-form{display:grid;gap:var(--s-4);margin-top:var(--s-6);padding:var(--s-5);border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface-1)}
.sec-head{flex-wrap:wrap}
@media (max-width:480px){.index-table-card th,.index-table-card td{padding:var(--s-2) var(--s-3);overflow-wrap:anywhere}.index-table-card table{font-size:var(--fs-xs)}}
.hub-about{max-width:var(--measure);display:grid;gap:var(--s-3);color:var(--text-soft)}
.hub-about h2{font-size:var(--fs-lg);color:var(--text)}
@media (max-width:640px){.az--sticky{position:static}.az--sticky .az a,.az--sticky .az span{width:44px;height:44px}}

/* vòng 1 phê bình: sửa */
.az{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;max-width:100%}
.az a,.az span{width:100%}
.az span{border:0}
.index-table-card{display:flex;flex-direction:column}
.index-table-card .foot{margin-top:auto}
@media (max-width:480px){.index-table-card th{white-space:nowrap}.index-table-card :is(th,td):nth-child(3){display:none}}
main>.wrap>section:last-child,main>section:last-child{margin-bottom:0}
.site-foot{margin-top:var(--s-8)}
.band--bleed{border-radius:var(--r-lg)}
.page-head__intro{max-width:60ch}
@media (max-width:640px){
  .path li{display:grid;grid-template-columns:2.4rem 1fr;column-gap:var(--s-3);align-items:start}
  .path li::before{grid-row:1/span 2}
  .path p{grid-column:2}
  .page-head h1{font-size:clamp(2.2rem,1.6rem + 3vw,3rem)}
  .page-head__intro{font-size:var(--fs-base)}
}
@media (min-width:1024px){.az{grid-template-columns:repeat(26,minmax(0,1fr));gap:4px}.az a,.az span{height:42px}}
.sources{margin-top:var(--s-6)}

/* ---- article.css ---- */
/* trang bài: đầu bài, ảnh đầu, thân + rail phải (mục lục bám, liên quan), khối nội dung */
.art-head{padding-block:var(--s-6) var(--s-5);display:grid;gap:var(--s-4);max-width:var(--measure)}
.art-head__kicker{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.art-head__kicker a.label{color:var(--on-block);background:var(--block);border:var(--bw) solid var(--border-strong);border-radius:var(--r-pill);padding-block:3px;padding-inline:12px;text-decoration:none;min-height:30px;display:inline-flex;align-items:center}
.art-head__kicker a.label:hover{background:var(--ink);color:var(--on-ink)}
.art-head h1{font-size:var(--fs-3xl);font-stretch:74%;line-height:.98}
.art-head__deck{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);line-height:1.45;color:var(--text-soft);max-width:60ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);font-size:var(--fs-sm);color:var(--text-muted);padding-top:var(--s-4);border-top:var(--bw-thin) solid var(--border-subtle)}
.byline__who{display:flex;align-items:center;gap:var(--s-2);color:var(--text);font-weight:700}
.byline__who svg{width:30px;height:30px}
.byline__who a{color:var(--text)}
.byline__dot::before{content:"·";margin-inline-end:var(--s-2)}
.share{display:flex;gap:var(--s-2);margin-inline-start:auto}
.photo{margin:0}
.photo__frame{border-radius:var(--r-lg);overflow:hidden;background:var(--surface-3)}
.photo__frame img{width:100%;height:auto;aspect-ratio:auto}
.photo--lead{margin-bottom:var(--s-2)}
.photo--lead .photo__frame img{aspect-ratio:16/9;object-fit:cover}
.photo--inline{margin-block:var(--s-6)}
.tasl{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--s-2);line-height:1.5}
.tasl a{color:var(--text-muted)}

.art-layout{display:grid;grid-template-columns:minmax(0,var(--measure)) var(--rail);justify-content:space-between;gap:var(--s-8);align-items:start}
@media (max-width:1100px){.art-layout{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}}
.prose{max-width:var(--measure);min-width:0}
.prose>*+*{margin-top:var(--s-5)}
.prose h2{font-size:var(--fs-xl);margin-top:var(--s-8);position:relative;scroll-margin-top:140px}
.prose h3{margin-top:var(--s-6)}
.prose h2 .anchor{position:absolute;inset-inline-start:-1.1em;color:var(--text-muted);text-decoration:none;opacity:0;font-weight:400;transition:opacity var(--t-fast)}
.prose h2:hover .anchor,.prose h2 .anchor:focus{opacity:1}
@media (max-width:1100px){.prose h2 .anchor{display:none}}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li+li{margin-top:var(--s-2)}
.prose li::marker{color:var(--brand);font-weight:700}
.cite{font-size:.68em;line-height:0;margin-inline-start:1px;font-family:var(--font-body)}
.cite a{text-decoration:none;font-weight:700;padding-inline:1px;color:var(--link)}
.cite a:hover{text-decoration:underline}
.ext{font-size:.75em;margin-inline-start:2px;text-decoration:none;display:inline-block}

/* trả lời nhanh + ý chính */
.answer{border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface-1);overflow:hidden}
.answer__head{background:var(--block);color:var(--on-block);padding-block:var(--s-2);padding-inline:var(--s-5);font-weight:800;font-size:var(--fs-xs);letter-spacing:var(--track-label);text-transform:uppercase;border-bottom:var(--bw) solid var(--border-strong)}
.answer__body{padding:var(--s-5);font-size:var(--fs-md);line-height:1.6}
.keypoints{padding:var(--s-5);border-top:var(--bw-thin) solid var(--border-subtle)}
.keypoints p{font-weight:800;font-size:var(--fs-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.keypoints ul{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-3)}
.keypoints li{position:relative;padding-inline-start:28px;line-height:1.55;font-size:1.0625rem}
.keypoints li+li{margin-top:0}
.keypoints li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:14px;height:14px;border-radius:var(--r-pill);background:var(--block);border:var(--bw) solid var(--border-strong)}

/* rail phải */
.art-layout{align-items:stretch}
.rail{display:flex;flex-direction:column;gap:var(--s-5)}
.rail__toc{position:sticky;top:var(--s-5);max-height:calc(100vh - 48px);overflow:auto;scrollbar-width:thin}
.toc{border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface-1);padding:var(--s-4) var(--s-5)}
.toc summary,.toc__title{font-weight:800;font-size:var(--fs-xs);letter-spacing:var(--track-label);text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:44px}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;gap:2px;counter-reset:toc}
.toc a{display:block;padding-block:6px;padding-inline:12px;border-radius:var(--r-md);color:var(--text-soft);text-decoration:none;font-size:var(--fs-sm);line-height:1.35;border-inline-start:3px solid transparent}
.toc a:hover{background:var(--surface-2);color:var(--text)}
.toc a.is-active{background:var(--mark);color:var(--text);font-weight:700;border-inline-start-color:var(--border-strong)}
.rail-box{border-top:var(--bw) solid var(--border-strong);padding-top:var(--s-3)}
.rail-box h2{font-size:1rem;font-stretch:90%;text-transform:uppercase;letter-spacing:.05em}
.rail-box .card--compact .card__media{display:none}
.rail-box .card--compact{grid-template-columns:1fr}
.method{border-radius:var(--r-lg);background:var(--surface-2);padding:var(--s-5);font-size:var(--fs-sm);line-height:1.55}
.method h2{font-size:1rem;font-stretch:90%;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--s-2)}
.method ul{margin:var(--s-2) 0 0;padding-inline-start:1.1em}
.read-progress{position:fixed;top:0;inset-inline:0;height:4px;z-index:calc(var(--z-sticky) + 1);background:transparent}
.read-progress span{display:block;height:100%;width:0;background:var(--brand)}

/* callout */
.callout{display:grid;grid-template-columns:36px 1fr;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-lg);border:var(--bw) solid;line-height:1.6}
.callout__icon{width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;font-weight:900;font-family:var(--font-head);font-size:1.1rem}
.callout__title{font-weight:800;margin-bottom:4px}
.callout--note{background:var(--info-bg);border-color:var(--info-border);color:var(--info-fg)}
.callout--note .callout__icon{background:var(--info-border);color:var(--neutral-0)}
.callout--tip{background:var(--success-bg);border-color:var(--success-border);color:var(--success-fg)}
.callout--tip .callout__icon{background:var(--success-border);color:var(--neutral-0)}
.callout--warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-fg)}
.callout--warning .callout__icon{background:var(--warning-border);color:var(--neutral-950)}
.callout--example{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}
.callout--example .callout__icon{background:var(--block);color:var(--on-block)}
.callout a{color:inherit}

/* các bước */
.steps{border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-5);background:var(--surface-1)}
.steps__head{font-family:var(--font-head);font-stretch:84%;font-weight:800;font-size:1.25rem}
.steps__list{list-style:none;margin:var(--s-4) 0 0;padding:0;counter-reset:st;display:grid;gap:var(--s-4)}
.steps__item{counter-increment:st;display:grid;grid-template-columns:44px 1fr;column-gap:var(--s-4)}
.steps__item+.steps__item{margin-top:0}
.steps__item::before{content:counter(st);grid-row:1/span 2;width:44px;height:44px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-family:var(--font-head);font-weight:900;font-size:1.15rem}
.steps__title{font-weight:800}
.steps__item p:not(.steps__title){color:var(--text-soft)}

/* factbox */
.factbox{border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink);padding:var(--s-5)}
.factbox__title{font-weight:800;font-size:var(--fs-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-400)}
.factbox dl{margin:var(--s-3) 0 0;display:grid}
.factbox__row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--s-4);padding-block:var(--s-3);border-top:var(--bw-thin) solid var(--neutral-700)}
.factbox dt{color:var(--on-ink-muted);font-size:var(--fs-sm);font-weight:600}
.factbox dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.factbox .cite a{color:var(--accent-400)}
.factbox a{color:var(--accent-400)}
@media (max-width:480px){.factbox__row{grid-template-columns:1fr;gap:2px}}

/* ví dụ tính */
.worked{border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface-1);padding:var(--s-5);position:relative}
.worked__tag{display:inline-flex;background:var(--block);color:var(--on-block);border:var(--bw) solid var(--border-strong);border-radius:var(--r-pill);padding-inline:10px;font-size:var(--fs-xs);font-weight:800;letter-spacing:var(--track-label);text-transform:uppercase}
.worked__title{font-family:var(--font-head);font-stretch:84%;font-weight:800;font-size:1.3rem;margin-top:var(--s-3)}
.worked__setup{color:var(--text-soft);margin-top:var(--s-2)}
.worked__lines{margin:var(--s-4) 0 0;display:grid;grid-template-columns:minmax(0,1fr);font-variant-numeric:tabular-nums}
.worked__row{display:flex;justify-content:space-between;gap:var(--s-4);padding-block:var(--s-3);border-top:var(--bw-thin) dashed var(--border-subtle)}
.worked__row dt{color:var(--text-soft)}
.worked__row dd{margin:0;font-weight:800;text-align:end;white-space:nowrap}
.worked__result{margin-top:var(--s-4);padding:var(--s-4);border-radius:var(--r-md);background:var(--mark);font-weight:600}
.worked__note{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--text-muted)}
@media (max-width:480px){.worked__row{flex-direction:column;gap:2px}.worked__row dd{text-align:start;white-space:normal}}

/* lỗi người mới */
.pitfalls{border-radius:var(--r-lg);border:var(--bw) solid var(--danger-border);background:var(--danger-bg);color:var(--text);padding:var(--s-5)}
.pitfalls__head{font-family:var(--font-head);font-stretch:84%;font-weight:800;font-size:1.25rem;color:var(--danger-fg)}
.pitfalls ol{list-style:none;margin:var(--s-4) 0 0;padding:0;counter-reset:pf;display:grid;gap:var(--s-4)}
.pitfalls li{counter-increment:pf;display:grid;grid-template-columns:32px 1fr;column-gap:var(--s-3)}
.pitfalls li+li{margin-top:0}
.pitfalls li::before{content:"✕";grid-row:1/span 2;width:28px;height:28px;border-radius:var(--r-pill);background:var(--danger-border);color:var(--neutral-0);display:grid;place-items:center;font-size:.85rem;font-weight:900}
.pitfalls__title{font-weight:800}
.pitfalls li p:not(.pitfalls__title){color:var(--text-soft)}
.pitfalls a{color:var(--danger-fg)}

/* bảng */
.table-wrap{border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-1)}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.5}
.data-table caption{caption-side:top;text-align:start;padding:var(--s-3) var(--s-4);font-weight:800;background:var(--surface-2);border-bottom:var(--bw) solid var(--border-strong)}
.data-table th,.data-table td{padding:var(--s-3) var(--s-4);text-align:start;vertical-align:top;border-bottom:var(--bw-thin) solid var(--border-subtle)}
.data-table thead th{background:var(--ink);color:var(--on-ink);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase}
.data-table tbody th{font-weight:700}
.data-table tbody tr:last-child>*{border-bottom:0}
.data-table tbody tr:nth-child(even){background:var(--surface-2)}
@media (max-width:640px){
  .table-wrap{border:0;background:transparent;border-radius:0;overflow:visible}
  .data-table caption{border:var(--bw) solid var(--border-strong);border-radius:var(--r-md);margin-bottom:var(--s-3);display:block}
  .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .data-table,.data-table tbody,.data-table tr,.data-table th,.data-table td{display:block;width:100%}
  .data-table tr{border:var(--bw) solid var(--border-strong);border-radius:var(--r-md);margin-bottom:var(--s-3);background:var(--surface-1);overflow:hidden}
  .data-table tbody tr:nth-child(even){background:var(--surface-1)}
  .data-table tbody th{background:var(--surface-2);border-bottom:var(--bw-thin) solid var(--border-subtle)}
  .data-table td{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--s-3)}
  .data-table td::before{content:attr(data-label);font-weight:700;color:var(--text-muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
  .data-table tbody tr:last-child>*{border-bottom:var(--bw-thin) solid var(--border-subtle)}
  .data-table tbody tr>*:last-child{border-bottom:0}
}

/* sơ đồ */
.figure{margin-inline:0;margin-block:var(--s-6);border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-5);background:var(--surface-1)}
.figure__title{font-weight:800;font-family:var(--font-head);font-stretch:84%;font-size:1.2rem;margin-bottom:var(--s-4)}
.figure figcaption{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--s-4);line-height:1.5}
.dg--tall{display:none}
@media (max-width:640px){.dg--wide{display:none}.dg--tall{display:block}}
.dg text{font-family:var(--font-body);fill:var(--text)}
.dg-box{fill:var(--surface-2);stroke:var(--border-strong);stroke-width:2;rx:18px}
.dg-box--end{fill:var(--block)}
.dg-num{font-family:var(--font-head);font-weight:900;font-size:13px;fill:var(--text-muted)}
.dg-text{font-size:var(--fs-sm);font-weight:700}
.dg-arrow{fill:none;stroke:var(--border-strong);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dg-label{font-size:.875rem;font-weight:600}
.dg-val{font-size:.875rem;font-weight:800;font-variant-numeric:tabular-nums}
.dg-bar{rx:12px}
.dg-bar--0{fill:var(--chart-0)}.dg-bar--1{fill:var(--chart-1)}.dg-bar--2{fill:var(--chart-2)}.dg-bar--3{fill:var(--chart-3)}
.dg-bar--neg{fill:var(--chart-neg)}
.dg-grid{stroke:var(--border-subtle);stroke-width:1}
.dg-axis{font-size:.75rem;fill:var(--text-muted)}
.dg-line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.dg-line--0{stroke:var(--chart-0)}.dg-line--1{stroke:var(--chart-1)}.dg-line--2{stroke:var(--chart-2)}.dg-line--3{stroke:var(--chart-3)}
.dg-dot.dg-line--0{fill:var(--chart-0)}.dg-dot.dg-line--1{fill:var(--chart-1)}.dg-dot.dg-line--2{fill:var(--chart-2)}.dg-dot.dg-line--3{fill:var(--chart-3)}
.dg-legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);list-style:none;margin:var(--s-3) 0 0;padding:0;font-size:var(--fs-sm);font-weight:600}
.dg-legend li{display:flex;align-items:center;gap:var(--s-2)}
.dg-key{width:18px;height:6px;border-radius:var(--r-pill);display:inline-block}
.dg-key--0{background:var(--chart-0)}.dg-key--1{background:var(--chart-1)}.dg-key--2{background:var(--chart-2)}.dg-key--3{background:var(--chart-3)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.compare__col{border-radius:var(--r-md);padding:var(--s-4);background:var(--surface-2)}
.compare__col--b{background:var(--mark)}
.compare__head{font-weight:800;font-family:var(--font-head);font-stretch:86%;font-size:1.15rem;margin-bottom:var(--s-2)}
.compare ul{margin:0;padding-inline-start:1.1em;display:grid;gap:var(--s-2);font-size:var(--fs-sm)}
@media (max-width:640px){.compare{grid-template-columns:1fr}}

/* dòng thời gian */
.timeline{border-inline-start:var(--bw) solid var(--border-strong);padding-inline-start:var(--s-5)}
.timeline__head{font-family:var(--font-head);font-stretch:84%;font-weight:800;font-size:1.2rem}
.timeline ol{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-4)}
.timeline li{position:relative}
.timeline li+li{margin-top:0}
.timeline li::before{content:"";position:absolute;inset-inline-start:calc(-1 * var(--s-5) - 9px);top:6px;width:14px;height:14px;border-radius:var(--r-pill);background:var(--block);border:var(--bw) solid var(--border-strong)}
.timeline__when{font-weight:800;font-size:var(--fs-sm);letter-spacing:.03em}

blockquote.pull{margin:0;padding:var(--s-5);border-inline-start:6px solid var(--block);background:var(--surface-2);border-radius:0 var(--r-lg) var(--r-lg) 0;font-size:var(--fs-md);font-weight:600}

/* FAQ */
.faq{display:grid;gap:var(--s-3)}
.faq details{border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface-1);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;padding:var(--s-4) var(--s-5);font-weight:800;line-height:1.35;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:var(--r-pill);background:var(--block);color:var(--on-block);display:grid;place-items:center;font-size:1.2rem;transition:transform var(--t-med)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:var(--surface-2)}
.faq__a{padding:0 var(--s-5) var(--s-5);color:var(--text-soft)}

/* nguồn */
.sources{border-top:var(--bw) solid var(--border-strong);padding-top:var(--s-5)}
.sources ol{margin:var(--s-3) 0 0;padding-inline-start:1.6em;display:grid;gap:var(--s-3);font-size:var(--fs-sm);line-height:1.5}
.sources li{scroll-margin-top:140px}
.sources li:target{background:var(--mark);border-radius:var(--r-sm);outline:6px solid var(--mark)}
.sources .grade{display:inline-flex;min-width:22px;justify-content:center;border-radius:var(--r-pill);font-size:.7rem;font-weight:800;padding-inline:6px;margin-inline-start:6px;border:var(--bw-thin) solid var(--border-strong)}
.sources .grade--A{background:var(--block);color:var(--on-block)}
.conclusion{font-size:var(--fs-md);line-height:1.6;padding-inline-start:var(--s-5);border-inline-start:6px solid var(--border-strong)}
.disclaimer{font-size:var(--fs-sm);color:var(--text-muted);border-top:var(--bw-thin) solid var(--border-subtle);padding-top:var(--s-4)}
.related-band{border-top:var(--bw) solid var(--border-strong);margin-top:var(--s-8);padding-top:var(--s-6)}
.src-note{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--s-2)}
.bl-disc{fill:var(--block);stroke:var(--border-strong);stroke-width:2.6}
.bl-lines{stroke:var(--on-block);stroke-width:2.6;stroke-linecap:round;fill:none}
.toc-mobile{display:none}
@media (max-width:1100px){.toc-mobile{display:block}.rail__toc{display:none}}
.hdr-shown .rail__toc{top:176px}
.rail__toc{transition:top var(--t-slow) var(--ease-out)}
.method a{display:inline-flex;align-items:center;min-height:28px}

.faq{margin-top:var(--s-4)}
.sources{margin-top:var(--s-7)}
.dg-text.dg--end,.dg-num.dg--end{fill:var(--on-block)}
.dg-bar{rx:unset}
.nowrap{white-space:nowrap}
.pitfalls{background:var(--surface-2);border-color:var(--border-strong)}
.pitfalls__head{color:var(--text)}
.pitfalls a{color:var(--link)}
@media (max-width:640px){.byline__dot::before{content:none}.byline{gap:var(--s-2) var(--s-3)}.share{margin-inline-start:0}}

/* ---- tool.css ---- */
/* công cụ tính, form, tìm kiếm, toast, tooltip, skeleton, 404, styleguide */
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-1)}
.calc__form{padding:var(--s-5);display:grid;gap:var(--s-4);align-content:start}
.calc__out{background:var(--ink);color:var(--on-ink);padding:var(--s-5);display:grid;gap:var(--s-4);align-content:start}
.calc__out h2{font-size:1.1rem;font-stretch:88%;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-400)}
.calc__big{font-family:var(--font-head);font-stretch:72%;font-weight:900;font-size:clamp(2.4rem,2rem + 2vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.calc__stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin:0;align-items:end}
.calc__stats div{border-top:var(--bw-thin) solid var(--neutral-700);padding-top:var(--s-2)}
.calc__stats dt{font-size:var(--fs-xs);color:var(--on-ink-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.calc__stats dd{margin:0;font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums}
.calc__table{max-height:300px;overflow:auto;-webkit-mask-image:linear-gradient(180deg,black 85%,transparent);mask-image:linear-gradient(180deg,black 85%,transparent);padding-bottom:var(--s-4);border-radius:var(--r-md);border:var(--bw-thin) solid var(--neutral-700)}
.calc__table table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.calc__table th,.calc__table td{padding:6px 10px;text-align:end;border-bottom:var(--bw-thin) solid var(--neutral-800)}
.calc__table th:first-child,.calc__table td:first-child{text-align:start}
.calc__table thead th{position:sticky;top:0;background:var(--neutral-800);color:var(--on-ink-muted);font-size:var(--fs-xs);text-transform:uppercase}
.calc__note{font-size:var(--fs-xs);color:var(--on-ink-muted)}
.calc__nojs{padding:var(--s-4);border-radius:var(--r-md);background:var(--warning-bg);color:var(--warning-fg);font-size:var(--fs-sm)}
.js .calc__nojs{display:none}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

.field{display:grid;gap:6px;align-content:start}
.field label{font-weight:700;font-size:var(--fs-sm)}
.field .hint{font-size:var(--fs-xs);color:var(--text-muted)}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .affix{position:absolute;inset-inline-start:14px;color:var(--text-muted);font-weight:700;pointer-events:none}
.input-wrap .affix--end{inset-inline-start:auto;inset-inline-end:14px}
.input,.select,.textarea{width:100%;min-height:48px;border:var(--bw) solid var(--border-strong);border-radius:var(--r-md);background:var(--surface-1);color:var(--text);
  font:inherit;font-size:16px;padding-inline:14px;font-variant-numeric:tabular-nums;transition:box-shadow var(--t-fast)}
.input--pre{padding-inline-start:30px}.input--post{padding-inline-end:34px}
.textarea{min-height:140px;padding-block:12px;resize:vertical}
.input:hover,.select:hover,.textarea:hover{background:var(--surface-2)}
.input:focus,.select:focus,.textarea:focus{outline:3px solid var(--focus-ring);outline-offset:1px}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger-border);background:var(--danger-bg)}
.input:disabled{opacity:.5;cursor:not-allowed}
.field__error{color:var(--danger-fg);font-size:var(--fs-xs);font-weight:700}
.seg{display:inline-flex;border:var(--bw) solid var(--border-strong);border-radius:var(--r-pill);overflow:hidden;width:max-content}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{min-height:44px;display:inline-flex;align-items:center;padding-inline:16px;cursor:pointer;font-weight:700;font-size:var(--fs-sm)}
.seg input:checked+label{background:var(--ink);color:var(--on-ink)}
.seg input:focus-visible+label{outline:3px solid var(--focus-ring);outline-offset:-3px}
.check{display:flex;gap:var(--s-3);align-items:flex-start;min-height:44px}
.check input{width:22px;height:22px;accent-color:var(--brand);margin-top:3px}
.form-status{padding:var(--s-4);border-radius:var(--r-md);font-weight:700;font-size:var(--fs-sm)}
.form-status--ok{background:var(--success-bg);color:var(--success-fg);border:var(--bw) solid var(--success-border)}
.form-status--err{background:var(--danger-bg);color:var(--danger-fg);border:var(--bw) solid var(--danger-border)}
.hp{position:absolute;inset-inline-start:-9999px}

/* tìm kiếm toàn trang */
.search-page form{display:flex;gap:var(--s-2)}
.search-page .input{border-radius:var(--r-pill);min-height:56px;font-size:1.125rem;padding-inline:22px}
.results{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid}
.results li{padding-block:var(--s-4);border-bottom:var(--bw-thin) solid var(--border-subtle)}
.results a{font-family:var(--font-head);font-stretch:86%;font-weight:800;font-size:1.25rem;color:var(--text)}
.results p{font-size:var(--fs-sm);color:var(--text-soft);margin-top:4px}
.results mark{background:var(--mark);color:inherit;border-radius:3px}
.palette{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:flex-start;justify-content:center;padding:10vh var(--gutter) var(--gutter)}
.palette.is-open{display:flex}
.palette__scrim{position:absolute;inset:0;background:var(--ink);opacity:.6}
.palette__box{position:relative;width:min(680px,100%);background:var(--surface-1);border:var(--bw) solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--elev-3);overflow:hidden}
.palette__box .input{border:0;border-bottom:var(--bw) solid var(--border-strong);border-radius:0;min-height:60px;font-size:1.125rem;padding-inline:20px}
.palette__box .input:focus{outline:none;background:var(--surface-1)}
.palette__list{list-style:none;margin:0;padding:var(--s-2);max-height:56vh;overflow:auto}
.palette__list a{display:block;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);color:var(--text);text-decoration:none}
.palette__list a:hover,.palette__list a[aria-selected="true"]{background:var(--mark)}
.palette__list b{display:block;font-weight:800}
.palette__list span{font-size:var(--fs-xs);color:var(--text-muted)}
.palette__empty{padding:var(--s-5);color:var(--text-muted);font-size:var(--fs-sm)}
.palette__foot{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) var(--s-4);font-size:var(--fs-xs);color:var(--text-muted);border-top:var(--bw-thin) solid var(--border-subtle)}

.toast{position:fixed;bottom:calc(var(--s-5) + env(safe-area-inset-bottom));inset-inline-start:50%;transform:translateX(-50%) translateY(20px);z-index:var(--z-toast);background:var(--ink);color:var(--on-ink);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm);opacity:0;transition:opacity var(--t-med),transform var(--t-med);pointer-events:none;border:var(--bw) solid var(--block)}
.toast.is-on{opacity:1;transform:translateX(-50%)}
.tip{position:relative;border-bottom:var(--bw-thin) dotted currentColor;cursor:help}
.tip__bubble{position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;width:max-content;max-width:260px;background:var(--ink);color:var(--on-ink);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);font-size:var(--fs-xs);opacity:0;visibility:hidden;transition:opacity var(--t-fast)}
.tip:hover .tip__bubble,.tip:focus .tip__bubble{opacity:1;visibility:visible}
.skeleton{background:var(--surface-3);animation:sk 1.2s infinite alternate ease-in-out;border-radius:var(--r-pill);min-height:1em}
@keyframes sk{from{opacity:1}to{opacity:.45}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}

.nf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:var(--s-7);align-items:center;padding-block:var(--s-8)}
.nf__code{font-family:var(--font-head);font-stretch:62%;font-weight:900;font-size:clamp(6rem,4rem + 10vw,12rem);line-height:.85;color:var(--text)}
.nf__code span{background:var(--block);color:var(--on-block);border-radius:var(--r-pill);padding-inline:.12em;border:var(--bw) solid var(--border-strong)}
@media (max-width:860px){.nf{grid-template-columns:1fr}}

.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-3)}
.sg-sw{border:var(--bw-thin) solid var(--border-subtle);border-radius:var(--r-md);overflow:hidden;font-size:var(--fs-xs);background:var(--surface-1)}
.sg-sw i{display:block;height:56px}
.sg-sw span{display:block;padding:var(--s-2)}
.sg-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.sg-space i{display:inline-block;height:16px;background:var(--brand);border-radius:var(--r-pill);vertical-align:middle}
.sg-sec{border-top:var(--bw) solid var(--border-strong);padding-top:var(--s-5);margin-top:var(--s-7)}
.sg-sec>h2{margin-bottom:var(--s-4)}
.sg-theme{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
@media (max-width:860px){.sg-theme{grid-template-columns:1fr}}
.sg-panel{padding:var(--s-5);border-radius:var(--r-lg);background:var(--bg);color:var(--text);border:var(--bw) solid var(--border-strong)}
.field__legend{font-weight:700;font-size:var(--fs-sm);margin-bottom:6px;padding:0}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.calc__label{color:var(--on-ink-muted);font-weight:600;font-size:var(--fs-sm)}
.wrap>.calc{margin-bottom:var(--s-7)}
.factbox__note{font-size:var(--fs-xs);color:var(--on-ink-muted);margin-top:var(--s-3)}
/* lớp ép trạng thái (styleguide) — khớp :hover/:focus-visible/:active của component */
.btn--primary.is-hover{background:var(--btn-bg-hover);color:var(--btn-fg);border-color:var(--btn-bg-hover)}
.btn--secondary.is-hover{background:var(--ink);color:var(--on-ink)}
.btn.is-active{transform:translateY(1px)}
.is-focus{outline:3px solid var(--focus-ring);outline-offset:3px}
.chip.is-hover{background:var(--ink);color:var(--on-ink)}
.input.is-focus{outline-offset:1px}
a.is-hover{color:var(--link-hover);text-decoration-thickness:.14em}
.empty-state{display:grid;justify-items:start;gap:var(--s-3);padding:var(--s-6);border:var(--bw) dashed var(--border-strong);border-radius:var(--r-lg);background:var(--surface-1)}
.empty-state__icon{width:48px;height:48px;border-radius:var(--r-pill);background:var(--block);display:grid;place-items:center}
.empty-state__icon svg{width:22px;height:22px;fill:var(--on-block)}
.empty-state p{color:var(--text-soft)}
.toast--static{position:static;transform:none;opacity:1;display:inline-block}
.tip--static .tip__bubble{position:static;opacity:1;visibility:visible;display:inline-block;margin-inline-start:var(--s-3)}

/* ---- sg.css ---- */
/* styleguide (noindex) */
.sw-primary-50{background:var(--primary-50)}.sw-primary-100{background:var(--primary-100)}.sw-primary-200{background:var(--primary-200)}.sw-primary-300{background:var(--primary-300)}.sw-primary-400{background:var(--primary-400)}.sw-primary-500{background:var(--primary-500)}.sw-primary-600{background:var(--primary-600)}.sw-primary-700{background:var(--primary-700)}.sw-primary-800{background:var(--primary-800)}.sw-primary-900{background:var(--primary-900)}.sw-accent-200{background:var(--accent-200)}.sw-accent-400{background:var(--accent-400)}.sw-accent-600{background:var(--accent-600)}.sw-neutral-0{background:var(--neutral-0)}.sw-neutral-50{background:var(--neutral-50)}.sw-neutral-100{background:var(--neutral-100)}.sw-neutral-200{background:var(--neutral-200)}.sw-neutral-300{background:var(--neutral-300)}.sw-neutral-400{background:var(--neutral-400)}.sw-neutral-500{background:var(--neutral-500)}.sw-neutral-600{background:var(--neutral-600)}.sw-neutral-700{background:var(--neutral-700)}.sw-neutral-800{background:var(--neutral-800)}.sw-neutral-900{background:var(--neutral-900)}.sw-neutral-950{background:var(--neutral-950)}.sw-success-bg{background:var(--success-bg)}.sw-warning-bg{background:var(--warning-bg)}.sw-danger-bg{background:var(--danger-bg)}.sw-info-bg{background:var(--info-bg)}
.sg-sp--4 i{width:4px}.sg-sp--8 i{width:8px}.sg-sp--12 i{width:12px}.sg-sp--16 i{width:16px}.sg-sp--24 i{width:24px}.sg-sp--32 i{width:32px}.sg-sp--48 i{width:48px}.sg-sp--64 i{width:64px}.sg-sp--96 i{width:96px}.sg-sp--128 i{width:128px}
.sg-t{font-family:var(--font-head);font-stretch:var(--head-stretch);font-weight:800;line-height:1.05;margin-block:var(--s-3)}
.sg-t--3xl{font-size:var(--fs-3xl);font-stretch:74%}.sg-t--2xl{font-size:var(--fs-2xl)}.sg-t--xl{font-size:var(--fs-xl)}.sg-t--lg{font-size:var(--fs-lg)}
.sg-gap{margin-top:var(--s-5)}.sg-contrast{margin-top:var(--s-5)}.sg-skel{display:inline-block;width:200px;height:20px}
.sg-icons .tool-tile__icon{width:44px;height:44px}
.sg-sp{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs)}
.sg-panel>*+*{margin-top:var(--s-5)}