/* ==========================================================================
   The Token Thesis — design tokens (lớp da "Ochre Ledger"). MỌI mã màu của site chỉ nằm trong file này.
   ========================================================================== */
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/zilla-slab-600.woff2) format("woff2")}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/zilla-slab-700.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/atkinson-next-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/atkinson-next-700.woff2) format("woff2")}
/* fallback có số đo gần đúng để không nhảy bố cục khi font tải */
@font-face{font-family:"Zilla Fallback";src:local("Georgia"),local("Times New Roman");size-adjust:96%;ascent-override:88%;descent-override:24%}
@font-face{font-family:"Atkinson Fallback";src:local("Arial"),local("Helvetica");size-adjust:104%;ascent-override:94%;descent-override:24%}

:root{
  /* ochre (primary) */
  --primary-50:#FEF6EC;--primary-100:#FCEBD4;--primary-200:#FADAAE;--primary-300:#F6C279;--primary-400:#F2A436;
  --primary-500:#D8840E;--primary-600:#9E600A;--primary-700:#7D4C08;--primary-800:#5B3806;--primary-900:#3E2604;
  /* neutral — xám pha sắc ochre */
  --neutral-0:#FFFFFF;--neutral-50:#FAF9F8;--neutral-100:#F4F3F0;--neutral-150:#EBE9E5;--neutral-200:#DCD8D0;--neutral-300:#C2BAAE;
  --neutral-400:#A39885;--neutral-500:#837763;--neutral-600:#605748;--neutral-700:#403A30;--neutral-800:#29251F;--neutral-900:#1D1A16;--neutral-950:#14120F;
  /* accent: đất sét + olive (earthy-muted) */
  --accent-100:#F8EAE7;--accent-500:#8E3A29;--accent-700:#5F271C;
  --olive-100:#EEF0E2;--olive-600:#55602F;
  /* ngữ nghĩa */
  --success-bg:#EAF2E4;--success-fg:#2F5A1F;--success-border:#9DBB86;
  --warning-bg:#FCEFD8;--warning-fg:#6E4206;--warning-border:#E3B062;
  --danger-bg:#F8E7E3;--danger-fg:#8A2C1B;--danger-border:#D99A8C;
  --info-bg:#EFEDE7;--info-fg:#3E392F;--info-border:#C2BAAE;
  /* bề mặt */
  --bg:#FBF9F4;--surface-1:#FFFFFF;--surface-2:#F5F0E5;--surface-3:#EFE6D3;
  --text:#1D1A16;--text-muted:#5A5245;--ico-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23FADAAE'/%3E%3Ccircle cx='12' cy='12' r='9' stroke='%235A5245'/%3E%3Cpath d='M12 7v5l3.5 2' stroke='%235A5245'/%3E%3C/svg%3E");--text-faint:#6E6555;
  --link:#7D4C08;--link-hover:#5B3806;
  --border-subtle:#E7DFCF;--border-strong:#8F826B;--focus-ring:#7D4C08;--focus-ring-on-dark:#F6C279;
  --mast-bg:#1D1A16;--mast-ink:#FBF3E2;--mast-tok:#E0A43C;--mast-tag:#E7DCC6;
  --nav-bg:#F4EAD5;--nav-ink:#1D1A16;--nav-on-bg:#1D1A16;--nav-on-ink:#FBF3E2;
  --on-primary:#FFFFFF;
  --plate-ochre:#5B3806;--plate-clay:#5F271C;--plate-olive:#3B4420;--plate-ink:#1D1A16;
  --scrim:rgba(20,18,15,.55);--mark-shadow:drop-shadow(0 6px 14px rgba(0,0,0,.35));
  --icon-fill:#FADAAE;--icon-line:currentColor;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .75 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --ledger:repeating-linear-gradient(180deg,transparent 0 31px,rgba(224,164,60,.10) 31px 32px);
  --ledger-margin:linear-gradient(90deg,transparent calc(50% - 300px),rgba(224,164,60,.14) calc(50% - 300px) calc(50% - 299px),transparent calc(50% - 299px));
  --coin-ghost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23E0A43C' stroke-opacity='.13' stroke-width='.8'%3E%3Cellipse cx='32' cy='22.5' rx='21' ry='7'/%3E%3Cellipse cx='32' cy='18' rx='21' ry='7'/%3E%3Cellipse cx='32' cy='18' rx='14' ry='4.2'/%3E%3Cpath d='M11 18v4.5M53 18v4.5'/%3E%3C/g%3E%3C/svg%3E");
  /* chuyên mục (dùng cho icon tile; không là tín hiệu duy nhất) */
  --cat-tint:var(--primary-100);

  /* chữ — thang 1.25 từ 18px */
  --font-head:"Zilla Slab","Zilla Fallback",Georgia,serif;
  --font-body:"Atkinson Hyperlegible Next","Atkinson Fallback",Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --fs-xs:.8125rem;--fs-sm:.9375rem;--fs-base:1.125rem;--fs-md:1.25rem;--fs-lg:1.5625rem;
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-h2:clamp(1.55rem,1.3rem + 1vw,1.95rem);
  --fs-h1:clamp(2rem,1.55rem + 2.2vw,3.05rem);
  --fs-display:clamp(2.6rem,1.6rem + 4.4vw,5.6rem);
  --lh-body:1.68;--lh-head:1.15;--measure:31.5em;
  --tracking-caps:.12em;

  /* 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;

  /* lưới */
  --container:1240px;--rail:330px;--gutter:24px;

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

  /* chuyển động */
  --t-fast:120ms;--t-med:200ms;--t-slow:320ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
}

@media (max-width:640px){:root{--gutter:16px}}

/* theme tối: ánh xạ lại cùng tên token */
:root[data-theme="dark"]{
  --bg:#14120F;--surface-1:#1D1A16;--surface-2:#24201B;--surface-3:#2E2922;
  --text:#EDE6DA;--text-muted:#C2B8A6;--ico-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9' fill='%235A4220'/%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23C2B8A6'/%3E%3Cpath d='M12 7v5l3.5 2' stroke='%23C2B8A6'/%3E%3C/svg%3E");--text-faint:#A89D8A;
  --link:#F6C279;--link-hover:#FADAAE;
  --border-subtle:#363029;--border-strong:#7A6E5C;--focus-ring:#F6C279;
  --mast-bg:#0E0D0B;--nav-bg:#24201B;--nav-ink:#EDE6DA;--nav-on-bg:#F2A436;--nav-on-ink:#14120F;
  --primary-600:#E39A2C;--primary-700:#F2A436;--on-primary:#14120F;
  --primary-50:#2A2116;--primary-100:#33281A;--primary-200:#4A3A22;
  --accent-100:#33201B;--accent-500:#E59A86;--olive-100:#262A1B;--olive-600:#B9C78E;
  --success-bg:#1E2A18;--success-fg:#B9DCA3;--success-border:#4A6B38;
  --warning-bg:#2E2414;--warning-fg:#F2C77E;--warning-border:#7A5A22;
  --danger-bg:#2E1B17;--danger-fg:#F0A795;--danger-border:#7A3B2E;
  --info-bg:#24211C;--info-fg:#D8D0C2;--info-border:#4A4337;
  --icon-fill:#5A4220;
  --elev-2:0 6px 18px -6px rgba(0,0,0,.6);--elev-3:0 24px 48px -12px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14120F;--surface-1:#1D1A16;--surface-2:#24201B;--surface-3:#2E2922;
    --text:#EDE6DA;--text-muted:#C2B8A6;--ico-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9' fill='%235A4220'/%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23C2B8A6'/%3E%3Cpath d='M12 7v5l3.5 2' stroke='%23C2B8A6'/%3E%3C/svg%3E");--text-faint:#A89D8A;
    --link:#F6C279;--link-hover:#FADAAE;
    --border-subtle:#363029;--border-strong:#7A6E5C;--focus-ring:#F6C279;
    --mast-bg:#0E0D0B;--nav-bg:#24201B;--nav-ink:#EDE6DA;--nav-on-bg:#F2A436;--nav-on-ink:#14120F;
    --primary-600:#E39A2C;--primary-700:#F2A436;--on-primary:#14120F;
    --primary-50:#2A2116;--primary-100:#33281A;--primary-200:#4A3A22;
    --accent-100:#33201B;--accent-500:#E59A86;--olive-100:#262A1B;--olive-600:#B9C78E;
    --success-bg:#1E2A18;--success-fg:#B9DCA3;--success-border:#4A6B38;
    --warning-bg:#2E2414;--warning-fg:#F2C77E;--warning-border:#7A5A22;
    --danger-bg:#2E1B17;--danger-fg:#F0A795;--danger-border:#7A3B2E;
    --info-bg:#24211C;--info-fg:#D8D0C2;--info-border:#4A4337;
    --icon-fill:#5A4220;
    --elev-2:0 6px 18px -6px rgba(0,0,0,.6);--elev-3:0 24px 48px -12px rgba(0,0,0,.7);
  }
}
@media (prefers-reduced-motion:reduce){:root{--t-fast:0ms;--t-med:0ms;--t-slow:0ms}}

/* ---- 01-base.css ---- */
/* base: reset nhẹ + chữ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--s-6)}
@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);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
img,svg,video{max-width:100%;height:auto}
img{display:block}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:var(--lh-head);color:var(--text);margin-block:0;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p,ul,ol,dl,blockquote,figure,table{margin-block:0 var(--s-4)}
figure,blockquote{margin-inline:0}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em;transition:color var(--t-fast) var(--ease-out)}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-2);border:var(--bw-1) solid var(--border-subtle);padding:.05em .35em;border-radius:6px}
kbd{font-family:var(--font-mono);font-size:.8em;border:var(--bw-1) solid var(--border-strong);border-bottom-width:2px;border-radius:6px;padding:0 .4em;background:var(--surface-1);color:var(--text)}
b,strong{font-weight:700}
hr{border:0;border-top:var(--bw-1) solid var(--border-subtle);margin-block:var(--s-6)}
::selection{background:var(--primary-200);color:var(--text)}
.sr-only{/* lớp tiện ích: !important có chủ đích để luôn ẩn khỏi mắt */position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden;display:none}
.skip-link{position:absolute;left:var(--s-4);top:-80px;z-index:var(--z-modal);background:var(--text);color:var(--bg);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);font-weight:700;text-decoration:none}
.skip-link:focus{top:var(--s-4)}
/* icon duotone */
.ic{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em;fill:none;stroke:var(--icon-line);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic .i-f,.ic use{}
.ic--sm{width:1em;height:1em;vertical-align:-.15em}
.ic--xs{width:.95em;height:.95em;vertical-align:-.14em;margin-inline-end:.25em}
.ic--cat{width:1.35em;height:1.35em}
symbol .i-f{fill:var(--icon-fill);stroke:none}
symbol .i-l{fill:none}

/* ---- 02-masthead-nav.css ---- */
/* masthead (khung theo site mẫu: dải thương hiệu cao) — da: mực + hạt giấy + wordmark ochre */
.masthead{background:var(--mast-bg);background-image:var(--grain),var(--coin-ghost),var(--coin-ghost),var(--ledger);background-repeat:repeat,no-repeat,no-repeat,repeat;background-position:0 0,calc(100% + 120px) -70px,-150px 110%,0 0;background-size:180px 180px,420px 420px,360px 360px,auto;color:var(--mast-ink);position:relative;border-bottom:var(--bw-3) solid var(--primary-600)}
.masthead__inner{max-width:var(--container);margin-inline:auto;padding:var(--s-8) var(--gutter) var(--s-7);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-4)}
.masthead__brand{display:flex;align-items:center;gap:var(--s-5);color:inherit;text-decoration:none;border-radius:var(--r-lg)}
.masthead__mark{width:96px;height:96px;flex:none;filter:var(--mark-shadow)}
.masthead__word{width:min(640px,60vw);height:auto}
.masthead .wm-ink{fill:var(--mast-ink)}
.masthead .wm-tok{fill:var(--mast-tok)}
.masthead__tag{margin:0;max-width:52ch;color:var(--mast-tag);font-size:var(--fs-md);line-height:1.5}
.lm-tile{fill:var(--primary-600)}.lm-rim{fill:var(--primary-200)}.lm-face{fill:var(--primary-50)}
.lm-ring{fill:none;stroke:var(--primary-600);stroke-width:1.6;opacity:.55}.lm-mill{stroke:var(--primary-600);stroke-width:1.3;opacity:.5;fill:none}
:root[data-theme="dark"] .lm-face{fill:var(--neutral-100)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lm-face{fill:var(--neutral-100)}}
.masthead .lm-tile{fill:var(--primary-600)}

/* thanh điều hướng (khung site mẫu: 6 mục căn giữa, mục hiện tại tô nền) */
.sitenav{background:var(--nav-bg);border-bottom:var(--bw-3) solid var(--text);position:relative;z-index:var(--z-dropdown)}
.sitenav__list{list-style:none;margin:0 auto;padding:var(--s-2) var(--gutter);display:flex;justify-content:center;gap:var(--s-2);max-width:var(--container)}
.sitenav__list>li{position:relative;min-width:72px}
.sitenav__list a,.sitenav__menu-btn{display:flex;align-items:center;justify-content:center;gap:var(--s-1);min-height:44px;padding:0 var(--s-4);border-radius:var(--r-md);
  color:var(--nav-ink);text-decoration:none;font:700 var(--fs-base)/1 var(--font-body);background:transparent;border:0;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.sitenav__list a:hover,.sitenav__menu-btn:hover{background:var(--surface-3);color:var(--nav-ink)}
.sitenav__list a[aria-current="page"],.sitenav__menu-btn.is-current{background:var(--nav-on-bg);color:var(--nav-on-ink)}
.sitenav__menu-btn[aria-expanded="true"] .ic{transform:rotate(180deg)}
.sitenav__menu-btn .ic{transition:transform var(--t-med) var(--ease-out)}
.sitenav__toggle{display:none}
.topics-menu{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);width:min(680px,92vw);background:var(--surface-1);border:var(--bw-1) solid var(--border-subtle);
  border-radius:var(--r-lg);box-shadow:var(--elev-3);padding:var(--s-4);z-index:var(--z-dropdown)}
.topics-menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-1)}
.topics-menu a{display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--s-3);padding:var(--s-3);min-height:0;border-radius:var(--r-md);white-space:normal;font-weight:400;line-height:1.35}
.topics-menu a b{display:block;font-weight:700}
.topics-menu a small{display:block;color:var(--text-muted);font-size:var(--fs-sm)}
.topics-menu a .ic{margin-top:2px;color:var(--primary-700)}

/* drawer mobile */
.drawer{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim)}
.drawer[hidden]{display:none}
.drawer__panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(380px,92vw);background:var(--surface-1);padding:var(--s-5) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom));overflow:auto;box-shadow:var(--elev-3);display:flex;flex-direction:column;gap:var(--s-4)}
.drawer__top{display:flex;justify-content:space-between;align-items:center}
.drawer__title{font:700 var(--fs-lg)/1 var(--font-head)}
.drawer__links{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.drawer__links a{display:flex;gap:var(--s-3);align-items:center;min-height:48px;padding:0 var(--s-3);border-radius:var(--r-md);color:var(--text);text-decoration:none;font-weight:700}
.drawer__links a:hover{background:var(--surface-2)}
.drawer__links--cats a{font-weight:400}
.drawer__label{margin:var(--s-2) 0 0;font-size:var(--fs-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);font-weight:700}

@media (max-width:900px){
  .masthead__inner{padding:var(--s-5) var(--gutter) var(--s-4);gap:var(--s-2)}
  .masthead__mark{width:52px;height:52px}
  .masthead__brand{gap:var(--s-3)}
  .masthead__word{width:min(250px,62vw)}
  .masthead__tag{font-size:var(--fs-sm);max-width:36ch}
  .sitenav__list{display:none}
  .sitenav__toggle{display:flex;align-items:center;justify-content:center;gap:var(--s-2);width:100%;min-height:52px;background:transparent;border:0;color:var(--nav-ink);
    font:700 var(--fs-base)/1 var(--font-body);cursor:pointer}
  .sitenav__toggle:hover{background:var(--surface-3)}
}
@media (max-width:420px){.masthead__tag{display:none}}

.masthead :focus-visible,.panel :focus-visible,.bottomline :focus-visible{outline-color:var(--focus-ring-on-dark)}

/* ---- 03-layout-river.css ---- */
/* bố cục 2 cột (khung site mẫu: cột chính + sidebar phải) */
.layout{max-width:var(--container);margin-inline:auto;padding-block:var(--s-7) var(--s-8);padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:var(--s-8);align-items:start}
.layout__main{min-width:0}
.layout__main:focus{outline:none}
.layout__rail{min-width:0;display:flex;flex-direction:column;gap:var(--s-5)}
@media (max-width:1100px){.layout{gap:var(--s-6);--rail:290px}}
@media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr);padding-block:var(--s-5) var(--s-7);gap:var(--s-7)}}

/* intro đầu trang chủ / hub */
.intro{padding-block-end:var(--s-5);border-bottom:var(--bw-3) solid var(--text);margin-block-end:var(--s-2)}
.intro h1{font-size:var(--fs-h1);margin-block-end:var(--s-3)}
.intro p{color:var(--text-muted);font-size:var(--fs-md);max-width:32em;margin:0}
.intro__more{margin-top:var(--s-3);max-width:58ch;color:var(--text-muted)}
.intro__more summary{cursor:pointer;font-weight:700;color:var(--link);min-height:44px;display:inline-flex;align-items:center}
.intro__more p{margin-top:var(--s-2)}
.sec-h{font-size:var(--fs-h3);margin-block:var(--s-7) var(--s-2)}
.intro--slim h1{font-size:var(--fs-h2)}
.intro--hub .kicker{margin-block-end:var(--s-2)}
.startwith{margin-block:var(--s-5) 0;padding:var(--s-4) var(--s-5);background:var(--surface-2);border-radius:var(--r-lg)}
.startwith__label{margin:0 0 var(--s-2);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent-500)}
.startwith ol{margin:0;padding-inline-start:1.3em;display:grid;gap:var(--s-1)}
.startwith li::marker{color:var(--primary-600);font-weight:700}
.startwith a{font-weight:700}
.intro--404 h1{font-size:var(--fs-h1)}

/* dòng note (river) — khung: rail trái nhỏ + tiêu đề + tóm tắt + đọc tiếp */
.river{display:flex;flex-direction:column}
.note{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--s-5);padding-block:var(--s-6);border-bottom:var(--bw-1) solid var(--border-subtle)}
.note__rail{display:flex;flex-direction:column;align-items:stretch;gap:var(--s-2)}
.note__no{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--primary-600);color:var(--on-primary);border-radius:var(--r-md);
  padding:var(--s-2) 0;font:700 var(--fs-xs)/1.1 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.note__no b{font:700 1.65rem/1 var(--font-head);letter-spacing:0;margin-top:2px}
.note__no--kind{background:var(--primary-100);color:var(--primary-700);min-height:64px}
.note__no--kind .ic{width:30px;height:30px}
.note__share{display:flex;flex-direction:column;gap:var(--s-2)}
.note__share .iconbtn{width:100%;height:40px;border-radius:var(--r-md)}
.note__meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 .25em;white-space:nowrap;margin:0 0 calc(var(--s-2) + 3px);font-size:var(--fs-sm);color:var(--text-muted);font-weight:700;letter-spacing:.02em}
.note__meta a{display:inline-flex;align-items:center;min-height:24px;color:var(--accent-500);text-decoration:none;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--fs-xs)}
.note__meta a:hover{text-decoration:underline}
.note__title{font-size:clamp(1.45rem,1.2rem + 1vw,2rem);line-height:1.15;margin-block-end:var(--s-3)}
.note__title a{color:var(--text);text-decoration:none;padding-block:.35em;background-image:linear-gradient(var(--primary-300),var(--primary-300));background-size:0 3px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--t-slow) var(--ease-out)}
.note__title a:hover{background-size:100% 3px}
.note__excerpt{color:var(--text-muted);margin:0 0 var(--s-3);max-width:31em}
.note__more{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;color:var(--link);text-decoration:none;min-height:44px}
.note__more:hover .ic{transform:translateX(3px)}
.note__more .ic{transition:transform var(--t-med) var(--ease-out)}
.note--soon{opacity:.6}
@media (max-width:640px){
  .note{grid-template-columns:minmax(0,1fr);gap:var(--s-2);padding-block:var(--s-5)}
  .note__rail{flex-direction:row}
  .note__no{flex-direction:row;gap:.35em;padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);align-self:flex-start}
  .note__no b{font-size:1rem;margin:0}
  .note__no--kind{min-height:0}
  .note__no--kind .ic{width:20px;height:20px}
  .note__share{display:none}
}

/* phân trang */
.pager ul{list-style:none;margin:var(--s-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.pager a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--s-3);border-radius:var(--r-md);border:var(--bw-1) solid var(--border-strong);
  text-decoration:none;color:var(--text);font-weight:700;background:var(--surface-1)}
.pager a:hover{border-color:var(--text)}
.pager a[aria-current="page"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.pager__step{padding:0 var(--s-4);gap:.3em}
.pager__of{display:none;color:var(--text-muted);font-size:var(--fs-sm);font-weight:700;white-space:nowrap}
.pager a{white-space:nowrap}
.nowrap{white-space:nowrap;display:inline-flex;align-items:center;gap:.25em}
@media (max-width:640px){.pager__n,.pager__more{display:none}.pager ul{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s-2);align-items:center}.pager__step{padding:0 var(--s-3)}.pager__of{display:block;grid-column:2}.pager__prev{grid-column:1;justify-self:start}.pager__next{grid-column:3;justify-self:end}}

/* thời gian đọc + loại bài: một khối không ngắt dòng, icon đồng hồ dính với con số (phê bình vòng 2) */
.note__meta::after{content:attr(data-min) " min read · " attr(data-type);white-space:nowrap;margin-inline-start:.75em;padding-inline-start:20px;background:var(--ico-clock) no-repeat 0 50%/15px 15px}
@media (max-width:420px){.note__meta::after{content:attr(data-min) " min · " attr(data-type)}}
@media (max-width:380px){.note__meta::after{content:attr(data-min) " min read"}}

/* hub: thuật ngữ + công cụ, 2 cột gọn */
.hubrefs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-block:var(--s-7) var(--s-5);padding-top:var(--s-5);border-top:var(--bw-3) solid var(--text)}
.hubrefs h2{font-size:var(--fs-h3);margin:0 0 var(--s-3)}
.hubrefs ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.hubrefs a{display:inline-flex;align-items:center;gap:.4em;min-height:44px;line-height:1.3;font-weight:700;color:var(--text);text-decoration-color:var(--primary-400);text-underline-offset:3px}
.hubrefs a:hover{color:var(--accent-500)}
@media (max-width:360px){.hubrefs{gap:var(--s-3)}.hubrefs a{font-size:var(--fs-sm)}}
@media (max-width:360px){.pager__of{font-size:var(--fs-xs)}.pager__step{padding:0 var(--s-2)}}

/* ---- 04-post.css ---- */
/* ---------- trang bài ---------- */
.crumbs ol{list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);font-size:var(--fs-sm);color:var(--text-muted)}
.crumbs li+li::before{content:"/";margin-inline-end:var(--s-2);color:var(--border-strong)}
.crumbs a{color:var(--text-muted)}
.crumbs [aria-current]{color:var(--text-faint);max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs li{white-space:nowrap}
@media (max-width:640px){.crumbs li[aria-current]{display:none}}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin:0 0 var(--s-3);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.kicker a{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--accent-500);text-decoration:none}
.kicker a .ic{color:var(--primary-700)}
.kicker span{padding:2px var(--s-2);border:var(--bw-1) solid var(--border-strong);border-radius:var(--r-pill)}
.kicker--hub{color:var(--accent-500)}
.post__head{padding-block-end:var(--s-5);border-bottom:var(--bw-3) solid var(--text);margin-block-end:var(--s-6)}
.post__head h1{font-size:var(--fs-h1);margin-block-end:var(--s-3)}
.dek{font-size:var(--fs-md);color:var(--text-muted);max-width:31em;margin-block-end:var(--s-4)}
.aka{font-size:var(--fs-sm);color:var(--text-muted);margin-block:calc(-1 * var(--s-2)) var(--s-4)}
.byline{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.byline__mark{width:40px;height:40px;flex:none}
.byline p{margin:0;display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);font-size:var(--fs-sm);color:var(--text-muted);flex:1 1 300px}
.byline__who{color:var(--text);font-weight:700}
.byline__who a{color:inherit}
.byline__item{display:inline-flex;align-items:center}
.byline__share{display:flex;gap:var(--s-2)}
@media (max-width:640px){.byline__mark{display:none}.byline__share .iconbtn:not(:first-child){display:none}.byline p{gap:var(--s-1) var(--s-3)}}

/* nút icon */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-md);border:var(--bw-1) solid var(--border-subtle);
  background:var(--surface-2);color:var(--primary-700);cursor:pointer;text-decoration:none;transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.iconbtn:hover{background:var(--primary-100);border-color:var(--primary-300);color:var(--primary-800)}
.iconbtn:active{transform:translateY(1px)}

/* ảnh + ghi công */
.photo{margin:0 0 var(--s-6)}
.photo img{width:100%;height:auto;border-radius:var(--r-lg);background:var(--surface-3);aspect-ratio:16/9;object-fit:cover}
.photo--inline img{aspect-ratio:3/2}
.tasl{margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--text-faint);line-height:1.5}
.tasl a{color:inherit}
.tasl--sm{font-size:.75rem;margin:var(--s-2) 0 0}

/* trả lời nhanh + ý chính */
.qa{background:var(--surface-1);border:var(--bw-2) solid var(--primary-600);border-radius:var(--r-lg);padding:var(--s-5);margin-block-end:var(--s-5);position:relative}
.qa__label{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-2);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--primary-700)}
.qa__text{margin:0;font-size:var(--fs-md);line-height:1.55}
.keypoints{background:var(--surface-2);border-radius:var(--r-lg);padding:var(--s-5);margin-block-end:var(--s-6)}
.keypoints__label{margin:0 0 var(--s-3);font:700 var(--fs-md)/1.2 var(--font-head)}
.keypoints ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-3)}
.keypoints li{position:relative;padding-inline-start:var(--s-6)}
.keypoints li::before{content:"";position:absolute;inset-inline-start:2px;top:.5em;width:14px;height:14px;border-radius:4px;background:var(--primary-600);box-shadow:3px 3px 0 var(--primary-200)}

/* mục lục */
.toc__title{margin:0 0 var(--s-3);font:700 var(--fs-md)/1.2 var(--font-head)}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:2px}
.toc li{counter-increment:toc}
.toc a{display:grid;grid-template-columns:1.8em 1fr;gap:var(--s-1);padding:var(--s-2) var(--s-2);border-radius:var(--r-sm);color:var(--text-muted);text-decoration:none;font-size:var(--fs-sm);line-height:1.4;border-inline-start:var(--bw-3) solid transparent}
.toc a::before{content:counter(toc,decimal-leading-zero);font-weight:700;color:var(--text-faint)}
.toc a:hover{background:var(--surface-2);color:var(--text)}
.toc a.is-active{color:var(--text);font-weight:700;border-inline-start-color:var(--primary-600);background:var(--primary-50)}
.toc--inline{display:none}
@media (max-width:900px){
  .toc--inline{display:block;background:var(--surface-2);border-radius:var(--r-lg);padding:var(--s-4);margin-block-end:var(--s-6)}
  .toc--rail{display:none}
}

/* thân bài */
.prose{max-width:none}
.prose>:where(p,ul:not([class]),ol:not([class]),h2,h3,dl,blockquote),.prose .sec>:where(p,ul:not([class]),ol:not([class]),h2,h3,dl,blockquote){max-width:var(--measure)}
.prose>.sec{margin-block-end:var(--s-7)}
.prose h2{font-size:var(--fs-h2);margin-block:0 var(--s-4);position:relative}
.prose--flat>h3,.prose .sec>h3{font-size:var(--fs-h3);margin-block:var(--s-5) var(--s-2)}
.anchor{display:inline-grid;place-items:center;min-width:28px;min-height:28px;margin-inline-start:.2em;vertical-align:middle;font-size:.7em;color:var(--text-faint);text-decoration:none;opacity:0;transition:opacity var(--t-fast)}
@media (max-width:640px){.anchor{display:none}}
h2:hover .anchor,.anchor:focus-visible{opacity:1}
.prose .sec>ul:not([class]),.prose .sec>ol:not([class]),.prose--flat>ul:not([class]),.prose--flat>ol:not([class]),.faq__a ul{padding-inline-start:1.3em}
.prose--flat>h2{margin-block:var(--s-7) var(--s-4)}
.prose--flat>h2:first-child{margin-block-start:0}
.prose li{margin-block-end:var(--s-2)}
.prose li::marker{color:var(--primary-600);font-weight:700}
.cite{font-size:.7em;line-height:0;margin-inline-start:1px;white-space:nowrap}
.cite a{text-decoration:none;font-weight:700;color:var(--primary-700);padding:0 1px}
.cite a:hover{text-decoration:underline}
.pull{margin:var(--s-6) 0;padding:var(--s-2) 0 var(--s-2) var(--s-5);border-inline-start:var(--bw-3) solid var(--primary-600);font:600 var(--fs-lg)/1.4 var(--font-head)}
.pull p{margin-block-end:var(--s-2)}
.pull footer{font:400 var(--fs-sm) var(--font-body);color:var(--text-muted)}

/* ---- 05-blocks.css ---- */
/* ---------- khối trong bài ---------- */
/* bảng → thẻ ở ≤640px */
.tbl{margin-block:var(--s-5) var(--s-6);overflow-x:auto}
.tbl table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;background:var(--surface-1);border:var(--bw-1) solid var(--border-subtle);border-radius:var(--r-lg);overflow:hidden}
.tbl caption{caption-side:top;text-align:start;font:700 var(--fs-base)/1.3 var(--font-head);padding-block-end:var(--s-3);padding-inline:2px;color:var(--text)}
.tbl th,.tbl td{padding:var(--s-3) var(--s-4);text-align:start;vertical-align:top;border-bottom:var(--bw-1) solid var(--border-subtle)}
.tbl thead th{background:var(--surface-3);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.tbl tbody th{font-weight:700;color:var(--text)}
.tbl tbody tr:last-child>*{border-bottom:0}
.tbl tbody tr:nth-child(even)>*{background:var(--surface-2)}
.tbl__note{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--s-2)}
@media (max-width:640px){
  .tbl{overflow:visible}
  .tbl table,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:100%}
  .tbl table{border:0;background:transparent}
  .tbl caption{display:block;width:100%}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tbl tbody tr{background:var(--surface-1);border:var(--bw-1) solid var(--border-subtle);border-radius:var(--r-lg);margin-block-end:var(--s-3);overflow:hidden}
  .tbl tbody tr:nth-child(even)>*{background:transparent}
  .tbl tbody th{background:var(--surface-3);font-size:var(--fs-base);border-bottom:var(--bw-1) solid var(--border-subtle)}
  .tbl tbody th::before{display:none}
  .tbl tbody tr:nth-child(n)>th{background:var(--surface-3);border-bottom:var(--bw-1) solid var(--border-subtle)}
  .tbl tbody tr:nth-child(n)>td{background:transparent;border-bottom:var(--bw-1) dashed var(--border-subtle)}
  .tbl tbody tr:nth-child(n)>td:last-child{border-bottom:0}
  .tbl tbody th.th--num::before{display:inline;content:attr(data-label) "\00a0";font:inherit;letter-spacing:0;text-transform:none;color:inherit}
  .tbl td{display:grid;grid-template-columns:minmax(96px,40%) 1fr;gap:var(--s-3);border-bottom:var(--bw-1) dashed var(--border-subtle)}
  .tbl td::before{content:attr(data-label);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
}

/* callout 4 loại */
.callout{border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);margin-block:var(--s-5);border:var(--bw-1) solid;border-inline-start-width:6px}
.callout__title{display:flex;gap:var(--s-2);align-items:flex-start;margin:0 0 var(--s-2);font-weight:700}
.callout__kind{text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--fs-xs);margin-inline-end:.2em}
.callout__body p{margin:0}
.callout--note{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-border)}
.callout--tip{background:var(--success-bg);color:var(--success-fg);border-color:var(--success-border)}
.callout--warning{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning-border)}
.callout--example{background:var(--primary-50);color:var(--text);border-color:var(--primary-300)}
.callout a{color:inherit;font-weight:700}

/* ví dụ tính */
.example{background:var(--surface-1);border:var(--bw-1) solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-5);margin-block:var(--s-6);
  background-image:linear-gradient(var(--primary-600),var(--primary-600));background-size:100% 6px;background-repeat:no-repeat}
.example__kicker{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-1) 0 var(--s-2);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--primary-700)}
.example__title{font-size:var(--fs-h3);margin-block:0 var(--s-3)}
.example__foot{font-size:var(--fs-xs);color:var(--text-faint);margin:var(--s-2) 0 0}
.tbl--compact{margin-block:var(--s-3) 0}

/* các bước */
.steps{list-style:none;padding:0;margin-block:var(--s-5);display:grid;gap:var(--s-3);counter-reset:none}
.steps__item{display:grid;grid-template-columns:48px 1fr;gap:var(--s-4);background:var(--surface-1);border:var(--bw-1) solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--s-4)}
.steps__n{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-md);background:var(--text);color:var(--bg);font:700 var(--fs-lg)/1 var(--font-head)}
.steps h3{margin:0 0 var(--s-1);font-size:var(--fs-md)}
.steps p{margin:0}

/* factbox */
.factbox{background:var(--surface-3);border-radius:var(--r-lg);padding:var(--s-5);margin-block:var(--s-6)}
.factbox__title{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);font:700 var(--fs-md)/1.2 var(--font-head)}
.factbox dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-3);margin:0}
.factbox__item{background:var(--surface-1);border-radius:var(--r-md);padding:var(--s-3) var(--s-4)}
.factbox dt{font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.factbox dd{margin:var(--s-1) 0 0;font:700 var(--fs-lg)/1.25 var(--font-head);font-variant-numeric:tabular-nums}

/* timeline */
.timeline{list-style:none;padding:0;margin-block:var(--s-5);border-inline-start:var(--bw-3) solid var(--primary-200);margin-inline-start:var(--s-2)}
.timeline li{position:relative;padding:0 0 var(--s-4) var(--s-5)}
.timeline li::before{content:"";position:absolute;inset-inline-start:-10px;top:.35em;width:17px;height:17px;border-radius:50%;background:var(--primary-600);border:3px solid var(--bg)}
.tl__label{display:block;font:700 var(--fs-md)/1.3 var(--font-head)}
.timeline p{margin:0;color:var(--text-muted)}

/* sơ đồ SVG */
.diagram{margin-block:var(--s-6);background:var(--surface-1);border:var(--bw-1) solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--s-5)}
.diagram__title{margin:0 0 var(--s-3);font:700 var(--fs-md)/1.3 var(--font-head)}
.diagram figcaption{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--s-3)}
.dg{display:block;width:100%;height:auto;font-family:var(--font-body);overflow:visible}
.dg--tall{display:none;max-width:420px;margin-inline:auto}
@media (max-width:640px){.dg--wide{display:none}.dg--tall{display:block}}
.dg-box{fill:var(--surface-2);stroke:var(--border-strong);stroke-width:1.5}
.dg-box--hi{fill:var(--primary-50);stroke:var(--primary-600)}
.dg-dot{fill:var(--primary-600)}
.dg-num{fill:var(--on-primary);font-weight:700;font-size:14px}
.dg-label{fill:var(--text);font-weight:700;font-size:15px}
.dg-sub{fill:var(--text-muted);font-size:13px}
.dg-line{stroke:var(--text-muted);stroke-width:2;fill:none}
.dg-arrowhead{fill:var(--text-muted)}
.dg-ring{fill:none;stroke:var(--primary-200);stroke-width:10}
.dg-bar{fill:var(--primary-600)}
.dg-bar--alt{fill:var(--accent-500)}
.dg-val{fill:var(--text);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.dg-grid{stroke:var(--border-subtle);stroke-width:1}
.dg-axis{fill:var(--text-muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.dg-axis--title{font-weight:700;fill:var(--text)}
.dg-series{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.dg-series--0,.dg-pt--0{stroke:var(--primary-600);fill:none}.dg-pt--0{fill:var(--primary-600)}
.dg-series--1,.dg-pt--1{stroke:var(--accent-500)}.dg-pt--1{fill:var(--accent-500)}
.dg-series--2{stroke:var(--olive-600);stroke-dasharray:6 5}.dg-pt--2{fill:var(--olive-600);stroke:none}
.dg-stop0{stop-color:var(--primary-100)}.dg-stop1{stop-color:var(--accent-500)}
.dg-legend{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-3);font-size:var(--fs-sm)}
.dg-key{display:inline-flex;align-items:center;gap:var(--s-2)}
.dg-sw{width:18px;height:4px;border-radius:2px;display:inline-block}
.dg-sw--0{background:var(--primary-600)}.dg-sw--1{background:var(--accent-500)}.dg-sw--2{background:var(--olive-600)}

/* lỗi hay mắc */
.mistakes{list-style:none;padding:0;counter-reset:mk;display:grid;gap:var(--s-3)}
.mistakes li{counter-increment:mk;background:var(--danger-bg);border:var(--bw-1) solid var(--danger-border);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 40px);position:relative;margin:0}
.mistakes li::before{content:counter(mk);position:absolute;inset-inline-start:var(--s-4);top:var(--s-4);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--danger-fg);color:var(--danger-bg);font:700 var(--fs-sm)/1 var(--font-body)}
.mistakes h3{margin:0 0 var(--s-1);font-size:var(--fs-md);color:var(--danger-fg)}
.mistakes p{margin:0}

/* FAQ accordion (details — nội dung vẫn có khi tắt JS) */
.faq__item{border-bottom:var(--bw-1) solid var(--border-subtle)}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);cursor:pointer;list-style:none;padding:var(--s-4) 0;min-height:44px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{margin:0;font-size:var(--fs-md);font-family:var(--font-head)}
.faq__chev{transition:transform var(--t-med) var(--ease-out);color:var(--primary-700)}
.faq__item[open] .faq__chev{transform:rotate(180deg)}
.faq__a{padding-block-end:var(--s-4)}
.faq__a p{margin:0}
.bottomline{background:var(--text);color:var(--bg);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6)}
.bottomline h2{color:var(--bg)}
.bottomline p{margin:0;font-size:var(--fs-md)}
.bottomline a{color:var(--primary-300)}
.bottomline .anchor{color:var(--primary-300)}

/* nguồn, cách kiểm, miễn trừ */
.srcs{border-top:var(--bw-3) solid var(--text);padding-top:var(--s-5);margin-block:var(--s-7) var(--s-6)}
.srcs h2{font-size:var(--fs-h3);margin-block-end:var(--s-2)}
.srcs__intro{font-size:var(--fs-sm);color:var(--text-muted)}
.srcs ol{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.srcs li{display:grid;grid-template-columns:32px 1fr;gap:var(--s-3);font-size:var(--fs-sm);scroll-margin-top:var(--s-7)}
.srcs li:target{background:var(--primary-50);border-radius:var(--r-md);outline:2px solid var(--primary-300)}
.srcs__n{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);background:var(--surface-3);font-weight:700;font-size:var(--fs-xs)}
.srcs__meta{display:block;color:var(--text-muted);font-size:var(--fs-xs)}
.srcs__more{font-weight:700;margin:var(--s-4) 0 var(--s-2);font-size:var(--fs-sm)}
.srcs__extra{font-size:var(--fs-sm)}
.grade{font-weight:700}
.grade--a{color:var(--success-fg)}
.checked{box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);background:var(--success-bg);color:var(--success-fg);border:var(--bw-1) solid var(--success-border);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);margin-block-end:var(--s-5)}
.checked .ic{width:28px;height:28px}
.checked__title{font-weight:700;margin:0 0 var(--s-1)}
.checked p{margin:0;font-size:var(--fs-sm)}
.checked a{color:inherit;font-weight:700}
.disclaimer{font-size:var(--fs-sm);color:var(--text-muted);border-top:var(--bw-1) solid var(--border-subtle);padding-top:var(--s-4)}
.disclaimer p{margin:0}

/* panel phẳng (trang tin cậy không dùng ảnh) */
.panel{min-height:160px;border-radius:var(--r-lg);margin-block-end:var(--s-6);display:flex;align-items:center;gap:var(--s-5);padding:var(--s-5) var(--s-6);
  background:var(--mast-bg);background-image:var(--grain),var(--ledger),linear-gradient(135deg,var(--plate-ochre),var(--plate-ink));color:var(--mast-ink)}
.panel__mark{width:96px;height:96px;flex:none;filter:var(--mark-shadow)}
.panel__text{margin:0;font:700 var(--fs-lg)/1.25 var(--font-head);color:var(--mast-ink);max-width:28ch}
@media (max-width:640px){.panel{padding:var(--s-4);gap:var(--s-4)}.panel__mark{width:64px;height:64px}.panel__text{font-size:var(--fs-md)}}
.panel--clay{background-image:var(--grain),var(--ledger),linear-gradient(135deg,var(--plate-clay),var(--plate-ink))}
.panel--olive{background-image:var(--grain),var(--ledger),linear-gradient(135deg,var(--plate-olive),var(--plate-ink))}

/* thư viện */
.resources{list-style:none;padding:0;display:grid;gap:var(--s-4)}
.res{display:grid;grid-template-columns:64px 1fr;gap:var(--s-4);background:var(--surface-1);border:var(--bw-1) solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);margin:0}
.res__tile{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--r-md);background:var(--primary-100);color:var(--primary-700)}
.res__tile .ic{width:32px;height:32px}
.res h3{margin:0;font-size:var(--fs-md)}
.res h3 a{display:inline-flex;align-items:center;min-height:44px}
.res p{margin:var(--s-1) 0 0}
.res__pub{font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-500)}
.res__use{font-size:var(--fs-sm);color:var(--text-muted)}

/* vòng 3: khung (viền/nền) luôn rộng hết cột; chữ bên trong giới hạn độ dài dòng */
.callout__body>*,.callout__title,.keypoints ul,.qa p,.mistakes h3,.mistakes p,.faq__a>*,.example>p,.example__title,.bottomline p,.timeline li>*{max-width:var(--measure)}
.checked p{max-width:33em}
.srcs__intro,.srcs ol,.srcs__more,.srcs__extra,.disclaimer p{max-width:33em}
.terms a span{display:block;max-width:30rem}
:root[data-theme="dark"] :is(.photo,.feature__img) img,:root[data-theme="dark"] img.feature__img{filter:brightness(.88)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.photo img,img.feature__img){filter:brightness(.88)}}
.res p{max-width:var(--measure)}

/* ---- 06-rail-ui.css ---- */
/* ---------- sidebar (rail) ---------- */
@media (max-width:900px){.layout__rail .start,.layout__rail .topics{display:none}body:not(.t-home):not(.t-hub) .layout__rail :is(.find,.feature__img){display:none}}
.rbox{background:var(--surface-1);border:var(--bw-1) solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--s-5)}
.rbox__title{font-size:var(--fs-md);margin:0 0 var(--s-3)}
.rbox p{font-size:var(--fs-sm);color:var(--text-muted);margin-block-end:var(--s-3)}
.desk__head{display:flex;align-items:center;gap:var(--s-3);margin-block-end:var(--s-3)}
.desk__head .rbox__title{margin:0}
.desk__mark{width:48px;height:48px;flex:none}
.desk__links{font-weight:700;margin:0}
.feature{padding:0;overflow:hidden}
.feature__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--surface-3)}
.feature__body{padding:var(--s-4) var(--s-5) var(--s-5)}
.feature__kicker{margin:0 0 var(--s-1);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent-500)}
.feature .rbox__title a{color:var(--text);text-decoration:none}
.feature .rbox__title a:hover{text-decoration:underline;text-decoration-color:var(--primary-500)}
.feature p:last-child{margin:0}
.toc--rail{position:sticky;top:var(--s-5);max-height:calc(100vh - 2*var(--s-5));overflow:auto}
.start__list{margin:0 0 var(--s-4);padding-inline-start:1.2em;font-size:var(--fs-sm)}
.start__list li{margin-block-end:var(--s-2)}
.start__list li::marker{color:var(--primary-600);font-weight:700}
.related ul,.topics ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.related ul{margin-inline:calc(-1 * var(--s-3))}
.related a{display:block;padding:var(--s-2) var(--s-3);border-radius:var(--r-md);text-decoration:none;color:var(--text);font-weight:700;font-size:var(--fs-sm);line-height:1.35}
.related a:hover{background:var(--surface-2)}
.related__kind{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-500);font-weight:700}
.topics a{display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:0 var(--s-3);border-radius:var(--r-md);text-decoration:none;color:var(--text);font-size:var(--fs-sm);font-weight:700}
.topics a .ic{color:var(--primary-700)}
.topics a:hover{background:var(--surface-2)}
.topics a[aria-current="page"]{background:var(--primary-100)}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-5);border-radius:var(--r-md);border:var(--bw-2) solid transparent;
  font:700 var(--fs-base)/1 var(--font-body);text-decoration:none;cursor:pointer;transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),transform var(--t-fast)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--primary-600);color:var(--on-primary)}
.btn--primary:hover{background:var(--primary-700);color:var(--on-primary)}
.btn--secondary{background:var(--text);color:var(--bg)}
.btn--secondary:hover{background:var(--neutral-700);color:var(--bg)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--text);color:var(--text)}
.btn--sm{min-height:44px;padding:0 var(--s-4);font-size:var(--fs-sm)}
.btn--lg{min-height:56px;padding:0 var(--s-6);font-size:var(--fs-md)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.chips{list-style:none;padding:0;margin:0 0 var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border-radius:var(--r-pill);background:var(--surface-1);border:var(--bw-1) solid var(--border-strong);
  color:var(--text);text-decoration:none;font-weight:700;font-size:var(--fs-sm)}
.chip:hover{border-color:var(--primary-600);background:var(--primary-50);color:var(--text)}
.chip .ic{color:var(--primary-700)}
.chips--big .chip{min-height:52px;font-size:var(--fs-base)}
.hubterms{margin-block-start:var(--s-7)}
.hubterms h2{font-size:var(--fs-h3);margin-block-end:var(--s-4)}

/* ---------- form ---------- */
.searchbox{display:flex;gap:var(--s-2)}
.searchbox input{flex:1;min-width:0}
input[type=search],input[type=text],input[type=email],input[type=number],select,textarea{font:400 1rem/1.4 var(--font-body);font-size:max(16px,1rem);color:var(--text);background:var(--surface-1);
  border:var(--bw-2) solid var(--border-strong);border-radius:var(--r-md);min-height:48px;padding:var(--s-2) var(--s-3);width:100%;transition:border-color var(--t-fast)}
input:hover,select:hover,textarea:hover{border-color:var(--neutral-500)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--primary-600);outline:3px solid var(--focus-ring);outline-offset:1px}
input:disabled{opacity:.55;cursor:not-allowed}
.searchbox button{min-height:48px;padding:0 var(--s-4);border-radius:var(--r-md);border:0;background:var(--text);color:var(--bg);font:700 var(--fs-sm)/1 var(--font-body);cursor:pointer}
.searchbox button:hover{background:var(--primary-700);color:var(--on-primary)}
.searchbox--big{margin-block:var(--s-5) var(--s-6)}
.form{display:grid;gap:var(--s-4);max-width:560px}
.form__row{display:grid;gap:var(--s-1)}
.form__row label{font-weight:700}
.form__row .opt,.form__row .req{font-weight:400;color:var(--text-muted);font-size:var(--fs-sm)}
.form__row--check{grid-template-columns:auto 1fr;align-items:start;gap:var(--s-3)}
.form__row--check input{width:24px;height:24px;margin-top:2px;accent-color:var(--primary-600)}
.form__row--check label{font-weight:400}
.form__row--check .form__err{grid-column:1/-1}
.form__err{color:var(--danger-fg);font-size:var(--fs-sm);margin:0;font-weight:700}
.form__err[hidden]{display:none}
.form [aria-invalid="true"]{border-color:var(--danger-fg)}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{margin:0;font-weight:700}
.form__status.is-ok{color:var(--success-fg)}
.form__status.is-err{color:var(--danger-fg)}
.themebtn{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-3);border-radius:var(--r-md);border:var(--bw-1) solid var(--border-strong);background:transparent;color:var(--text);font:700 var(--fs-sm)/1 var(--font-body);cursor:pointer}
.themebtn:hover{border-color:var(--text)}

/* ---------- chân trang (khung site mẫu: mảnh, 2 dòng) ---------- */
.sitefoot{border-top:var(--bw-3) solid var(--text);background:var(--surface-2);padding:var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom))}
.sitefoot__row{max-width:calc(var(--container) - 2*var(--gutter));margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3)}
.sitefoot__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s-4);font-size:var(--fs-sm)}
.sitefoot__links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--text);font-weight:700;text-decoration:none}
.sitefoot__links a:hover{text-decoration:underline}
.sitefoot__fine{max-width:calc(var(--container) - 2*var(--gutter));margin:var(--s-1) auto 0;font-size:var(--fs-xs);color:var(--text-muted)}

/* ---------- tìm kiếm toàn trang ---------- */
.searchdlg{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);display:flex;justify-content:center;align-items:flex-start;padding:10vh var(--gutter) 0}
.searchdlg[hidden]{display:none}
.searchdlg__panel{width:min(680px,100%);background:var(--surface-1);border-radius:var(--r-lg);box-shadow:var(--elev-3);overflow:hidden}
.searchdlg__form{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:var(--bw-1) solid var(--border-subtle)}
.searchdlg__form input{border:0;min-height:52px;font-size:var(--fs-md);padding:0}
.searchdlg__form input:focus-visible{outline:none}
.searchdlg__results{list-style:none;margin:0;padding:var(--s-2);max-height:56vh;overflow:auto}
.searchdlg__results a,.results a.hit{display:block;padding:var(--s-3);border-radius:var(--r-md);text-decoration:none;color:var(--text)}
.searchdlg__results a:hover,.searchdlg__results [aria-selected="true"] a{background:var(--primary-50)}
.hit__k{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-500);font-weight:700}
.hit__t{display:block;font-weight:700}
.hit--none{padding:var(--s-3)}
.hit__x{display:block;font-size:var(--fs-sm);color:var(--text-muted)}
.hit mark{background:var(--primary-200);color:inherit;border-radius:3px}
.searchdlg__hint{margin:0;padding:var(--s-3) var(--s-4);font-size:var(--fs-xs);color:var(--text-muted);border-top:var(--bw-1) solid var(--border-subtle)}
.results ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}
.results .hit{background:var(--surface-1);border:var(--bw-1) solid var(--border-subtle)}
.results__empty{background:var(--surface-2);border-radius:var(--r-lg);padding:var(--s-5)}

/* ---------- A–Z ---------- */
.azbar{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg);padding-block:var(--s-2);margin-block:var(--s-4);border-bottom:var(--bw-1) solid var(--border-subtle)}
.azbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
@media (min-width:641px){.azbar ul{display:grid;grid-template-columns:repeat(13,minmax(0,1fr))}}
.azbar a,.azbar span{display:grid;place-items:center;min-width:32px;height:36px;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.azbar a{color:var(--text);background:var(--surface-1);border:var(--bw-1) solid var(--border-subtle)}
.azbar a:hover{background:var(--primary-100)}
.azbar span{color:var(--border-strong)}
.azgroup{margin-block:var(--s-5) var(--s-6);scroll-margin-top:var(--s-8)}
.azgroup h2{font-size:var(--fs-h2);border-bottom:var(--bw-3) solid var(--primary-600);display:inline-block;padding-inline-end:var(--s-4);margin-block-end:var(--s-3)}
.terms{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.terms a{display:block;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--surface-1);border:var(--bw-1) solid var(--border-subtle);text-decoration:none;color:var(--text)}
.terms a:hover{border-color:var(--primary-600)}
.terms b{display:block;font:700 var(--fs-md)/1.3 var(--font-head)}
.terms span{display:block;font-size:var(--fs-sm);color:var(--text-muted)}
@media (max-width:640px){.azbar a,.azbar span{min-width:44px;height:44px}}

/* ---------- phản hồi ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--s-5) + env(safe-area-inset-bottom));transform:translate(-50%,150%);z-index:var(--z-toast);background:var(--text);color:var(--bg);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm);box-shadow:var(--elev-2);transition:transform var(--t-slow) var(--ease-out),visibility var(--t-slow);pointer-events:none;visibility:hidden}
.toast.is-on{transform:translate(-50%,0);visibility:visible}
.readbar{position:fixed;top:0;left:0;right:0;height:4px;z-index:var(--z-overlay);pointer-events:none}
.readbar span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--primary-500)}
.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;border-radius:var(--r-sm);animation:sk 1.4s linear infinite;min-height:1em}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}
.backtop{position:fixed;right: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-md);border:var(--bw-1) solid var(--border-strong);
  background:var(--surface-1);color:var(--text);display:grid;place-items:center;box-shadow:var(--elev-2);cursor:pointer;opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--t-med),visibility var(--t-med)}
.backtop.is-on{opacity:1;pointer-events:auto;visibility:visible}
.backtop .ic{transform:rotate(-90deg)}
[data-tip]{position:relative}
.tooltip{position:absolute;z-index:var(--z-dropdown);background:var(--text);color:var(--bg);font-size:var(--fs-xs);padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);white-space:nowrap}

.feature__no{white-space:nowrap}

/* ---- 07-calc.css ---- */
/* ---------- công cụ tính: desktop 2 cột (form | kết quả), mobile 1 cột ---------- */
.calc{background:var(--surface-1);border:var(--bw-2) solid var(--text);border-radius:var(--r-lg);padding:var(--s-5);margin-block:0 var(--s-6);box-shadow:6px 6px 0 var(--primary-300)}
.calc__title{font-size:var(--fs-h3);margin-block-end:var(--s-4)}
.calc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-5)}
.calc__form{display:grid;gap:var(--s-4);align-content:start}
.calc__field{display:grid;gap:var(--s-1)}
.calc__field label{font-weight:700;font-size:var(--fs-sm)}
.calc__input{display:flex;align-items:stretch;border:var(--bw-2) solid var(--border-strong);border-radius:var(--r-md);background:var(--surface-1);overflow:hidden}
.calc__input:focus-within{border-color:var(--primary-600);outline:3px solid var(--focus-ring);outline-offset:1px}
.calc__input input{border:0;border-radius:0;outline:none;font-variant-numeric:tabular-nums}
.calc__input input:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus-ring)}
.calc__affix{display:grid;place-items:center;padding:0 var(--s-3);background:var(--surface-3);color:var(--text-muted);font-weight:700;font-size:var(--fs-sm)}
.calc__hint{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}
.calc__actions{display:flex;gap:var(--s-2);flex-wrap:wrap}
.calc__err{margin:0;color:var(--danger-fg);font-weight:700;font-size:var(--fs-sm)}
.calc__err[hidden]{display:none}
.calc [aria-invalid="true"]{color:var(--danger-fg)}
.calc__result{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s-4) var(--s-5)}
.calc__rlabel{margin:0 0 var(--s-2);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--primary-700)}
.calc__result dl{margin:0;display:grid;gap:var(--s-3)}
.calc__out dt{font-size:var(--fs-sm);color:var(--text-muted)}
.calc__out dd{margin:0;font:700 var(--fs-lg)/1.2 var(--font-head);font-variant-numeric:tabular-nums}
.calc__out--main dd{font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem);color:var(--primary-700)}
.calc__table table{width:100%;border-collapse:collapse;margin-top:var(--s-4);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.calc__table caption{text-align:start;font-weight:700;padding-block-end:var(--s-2)}
.calc__table th,.calc__table td{text-align:start;padding:var(--s-1) var(--s-2);border-bottom:var(--bw-1) solid var(--border-subtle)}
.calc__noscript{font-size:var(--fs-sm);margin-top:var(--s-3)}
@media (max-width:760px){.calc__grid{grid-template-columns:minmax(0,1fr)}.calc{box-shadow:4px 4px 0 var(--primary-300)}}

/* ---- 08-styleguide.css ---- */
/* styleguide (noindex) — swatch/spacing sinh từ tokens */
.sg-c-primary-50{background:var(--primary-50)}.sg-c-primary-100{background:var(--primary-100)}.sg-c-primary-200{background:var(--primary-200)}.sg-c-primary-300{background:var(--primary-300)}.sg-c-primary-400{background:var(--primary-400)}.sg-c-primary-500{background:var(--primary-500)}.sg-c-primary-600{background:var(--primary-600)}.sg-c-primary-700{background:var(--primary-700)}.sg-c-primary-800{background:var(--primary-800)}.sg-c-primary-900{background:var(--primary-900)}.sg-c-neutral-0{background:var(--neutral-0)}.sg-c-neutral-50{background:var(--neutral-50)}.sg-c-neutral-100{background:var(--neutral-100)}.sg-c-neutral-150{background:var(--neutral-150)}.sg-c-neutral-200{background:var(--neutral-200)}.sg-c-neutral-300{background:var(--neutral-300)}.sg-c-neutral-400{background:var(--neutral-400)}.sg-c-neutral-500{background:var(--neutral-500)}.sg-c-neutral-600{background:var(--neutral-600)}.sg-c-neutral-700{background:var(--neutral-700)}.sg-c-neutral-800{background:var(--neutral-800)}.sg-c-neutral-900{background:var(--neutral-900)}.sg-c-neutral-950{background:var(--neutral-950)}.sg-c-accent-100{background:var(--accent-100)}.sg-c-accent-500{background:var(--accent-500)}.sg-c-accent-700{background:var(--accent-700)}.sg-c-olive-100{background:var(--olive-100)}.sg-c-olive-600{background:var(--olive-600)}
.sg-s-1{width:var(--s-1)}.sg-s-2{width:var(--s-2)}.sg-s-3{width:var(--s-3)}.sg-s-4{width:var(--s-4)}.sg-s-5{width:var(--s-5)}.sg-s-6{width:var(--s-6)}.sg-s-7{width:var(--s-7)}.sg-s-8{width:var(--s-8)}.sg-s-9{width:var(--s-9)}.sg-s-10{width:var(--s-10)}
.sg-swatches{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--s-3)}
.sg-swatches li{display:grid;gap:2px;font-size:var(--fs-xs)}
.sg-sw{display:block;height:56px;border-radius:var(--r-md);border:var(--bw-1) solid var(--border-subtle)}
.sg-display{font:700 var(--fs-display)/1 var(--font-head);margin-block:var(--s-4)}
.sg-h{margin-block:var(--s-3)}
.sg-space{list-style:none;padding:0;display:grid;gap:var(--s-2)}
.sg-space li{display:flex;align-items:center;gap:var(--s-3)}
.sg-space span{display:block;height:16px;background:var(--primary-400);border-radius:3px}
.sg-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.sg-icons{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s-3)}
.sg-icons li{display:grid;justify-items:center;gap:var(--s-1);padding:var(--s-3);background:var(--surface-1);border-radius:var(--r-md);border:var(--bw-1) solid var(--border-subtle)}
.sg-icons .ic{width:32px;height:32px;color:var(--primary-700)}
.sg-icons small{font-size:.72rem;color:var(--text-muted)}
.sg-h1{font:700 var(--fs-h1)/var(--lh-head) var(--font-head)}
.post .sec>h3{margin-block-start:var(--s-6)}