@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/font/52a88426efdc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/font/3ccd4df45cff.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/font/52a88426efdc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/font/3ccd4df45cff.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/font/5a1e57036fa2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/font/6148594dc0d9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/font/5a1e57036fa2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/font/6148594dc0d9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@page { size: A4; margin: 0; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 11pt; line-height: 1.55;
}
/* porcelain = mặc định cho trang không class zone */
:root{
  --bg:#f6f6f5;
  --surface:#ffffff;
  --surface-2:#ececea;
  --surface-inv:#10182b;
  --text:#16181d;
  --text-2:#5e5e58;
  --text-3:#62625c;        /* porcelain tertiary — AA 4.5+ on --bg and --surface-2 (was #6d6d66 → 4.41 on surface-2) */
  --text-inv:#f2f4f9;
  --brand:#10182b; --brand-strong:#0c1322;
  --accent:#b2401f;        /* Son — porcelain accent */
  --accent-hover:color-mix(in oklab, var(--accent), var(--brand-strong) 18%); /* solid-control hover — ΔL* ≈ 6.1; text contrast rises on hover */
  --icon:#2c3f70;
  --ok:#2e6b4f; --ok-subtle:#e2ede7;
  --warn:#8a6a12; --warn-subtle:#f0e9d8;
  --danger:#b2401f; --danger-subtle:#f4e2dc;
  --info:#2c3f70; --info-subtle:#e2e7f4;
  /* data encoding (§9): personal = accent solid · calculated = dim hollow */
  --data-a:var(--accent); --data-b:var(--text-2); --data-neutral:#75756f;
  --line:#e1e1dd; --line-soft:#e8e8e5;
  --bw-1:1px; --bw-2:1.5px; --bw-3:2px;
  --ls-eyebrow:.16em;      /* audit P2-7 — caps-only contexts (proper nouns/acronyms, §3) */
  --ls-wide:.22em;         /* audit P2-7 — proper nouns only; never lowercase mono (§3 ceiling .06em) */
  --focus-ring:#2c3f70;
  --focus-ring-inv:#93a7d9; /* focus on --surface-inv (reference tokens.css) */
  --sh-1:0 1px 3px color-mix(in oklab, var(--brand-strong) 12%, transparent);
  --sh-2:0 4px 12px color-mix(in oklab, var(--brand-strong) 18%, transparent);
  --sh-3:0 10px 28px color-mix(in oklab, var(--brand-strong) 24%, transparent);
}
/* ============================================================
   tokens.css — CHUẨN v4.0 "NIGHT-FIRST" · single source of truth
   rev 08.08.2026 · self-contained (no external references)
   rev 08.08: adds --accent-hover per zone (named solid-control step)
   -----------------------------------------------------------------
   Foundation set (one system, three pairs):
     starsteller-brand-identity.html/.md  = identity — mark, wordmark, icon
     starsteller-design-system.html/.md   = rules & components — wins on rules
     tokens.css / tokens.json         = values — wins value conflicts
   tokens.json is the machine-readable mirror of this file for
   build pipelines — edit here, then re-export; never edit JSON.
   Values captured from: design-system.md §2 + locked porcelain screens
   (b13/b14/b16/b17 inline) + v3.1 reference tokens (inlined here).
   No value invented — every token traced to a locked file.

   Shared base lives in :root. A surface opts into a zone with the
   scope class on <html> (or the root wrapper):

       <html lang="vi" class="night">      → night zone (brass)
       <html lang="vi" class="porcelain">  → porcelain zone (Son)

   Derived colors are color-mix()/oklch() from the tokens below —
   never a new raw hex.

   Zone text (§4.1): night typography = brass + bone only; porcelain
   light surfaces = Son + dark grays only — never cross the two.

   Zone map (starsteller-design-system.md §1):
     .night     → A1, A2, A3, A4, quiz B1–B5, paywall B10, covers, share
     .porcelain → B6/B18 article, B13–B14, B16, B17, checkout/QR, D1–D3, email
     No third zone. No gradient between zones mid-scroll.
   ============================================================ */

:root{
  /* ---------- NỀN / BẢNG MÀU (base: shared semantic slots) ---------- */
  /* Zone scopes override the surface/accent slots below. */

  /* ---------- FONT (locked) ---------- */
  --font-display:'Archivo',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:var(--font-body);

  /* ---------- TYPE SCALE (12 / 15 / 18 / 30 · floor 12px, §5) ---------- */
  --fs-1:12px; --fs-2:15px; --fs-3:18px; --fs-4:30px;
  --fs-hero:clamp(36px,5.2vw,54px);        /* hero display, Archivo 700 */
  --fs-card:22px;                          /* the one sanctioned intermediate */
  --lh-tight:1.25; --lh-base:1.6; --lh-loose:1.75;
  --fw-regular:400; --fw-strong:600; --fw-hero:700;
  /* legacy aliases → 2 cờ (+ hero) */
  --fw-medium:var(--fw-strong); --fw-semibold:var(--fw-strong); --fw-bold:var(--fw-strong);

  /* ---------- SPACING (8pt rhythm) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---------- RADIUS ---------- */
  --r-1:2px; --r-2:4px; --r-3:6px; --r-4:10px; --r-5:16px; --r-full:999px;

  /* ---------- FOCUS (shared; zone swaps the ring color) ---------- */
  --focus-ring-width:2px; --focus-ring-offset:2px;

  /* ---------- MOTION (night zone only; porcelain stays still, §12) ---------- */
  --dur-micro:180ms;      /* hover/micro — §12 range 150–200ms */
  --dur-base:240ms; --dur-slow:480ms;
  --dur-entrance:650ms;   /* entrance register 0.6–0.7s, §12 */
  --stagger-max:90ms;     /* per-item stagger ceiling, §12 */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-entrance:cubic-bezier(.22,.61,.21,1);  /* entrance only, §12 */

  /* ---------- LAYERS ---------- */
  --z-base:0; --z-sticky:100; --z-overlay:200; --z-modal:300; --z-toast:400;

  /* ---------- LAYOUT ---------- */
  --bp-sm:480px; --bp-md:768px; --bp-lg:1120px; --container-max:1120px; --gutter:20px;

  /* ---------- ICON ---------- */
  --icon-1:14px; --icon-2:17px; --icon-3:22px; --icon-4:28px;

  /* ---------- ALPHA RAIL for color-mix() ---------- */
  --a-1:6%; --a-2:12%; --a-3:24%; --a-4:40%; --a-5:60%; --a-6:85%;

  /* ---------- STATE ALPHA (hover/active) — ghost/surface contexts only.
     Solid brand controls never hover via these mixes: an ≤8% mix on a dark
     accent sits below the eye's delta threshold. Use the zone's named
     --accent-hover step instead (ΔL* ≥ 4). ---------- */
  --state-hover:8%; --state-active:14%; --state-selected:12%; --opacity-disabled:.38;
}

/* ============================================================
   NIGHT ZONE · v4.0 locked tokens (starsteller-design-system.md §2)
   Accent: Đồng thau (brass). Sells / moves emotion.
   ============================================================ */
.night{
  --bg:#0a0f1e;            /* oklch(0.172 0.032 268.9) */
  --bg2:#060a14;           /* oklch(0.146 0.023 264.8) */
  --surface:rgba(240,236,225,.045);
  --text:#f0ece1;          /* oklch(0.943 0.015 90.2) */
  --text-2:#9aa2b8;        /* oklch(0.713 0.033 269.7) */
  --line:rgba(240,236,225,.12);
  --line-2:rgba(240,236,225,.22);
  --accent:#c9a05e;        /* Đồng thau · oklch(0.729 0.097 78.2) */
  --accent-soft:rgba(201,160,94,.19);
  --accent-text:#e6d0a4;   /* oklch(0.865 0.063 84.4) — links on night */
  --accent-hover:var(--accent-text); /* solid-control hover — named step, ΔL* ≈ 13.6; never an alpha mix */
  /* data encoding (§9): personal = accent solid · calculated = dim hollow */
  --data-a:var(--accent); --data-b:var(--text-2); --data-neutral:var(--text-2);
  --ls-label:.04em;        /* mono micro-labels — §3 ceiling is .06em */
  --focus-ring:#c9a05e;
  --shadow:0 0 0 0 transparent;
  /* SPA legacy aliases — night blocks must not inherit porcelain Son */
  --brand:var(--bg2);
  --brand-strong:var(--bg);
  --text-inv:var(--text);
  --text-3:var(--text-2);
  --surface-2:var(--surface);
}

/* ============================================================
   PORCELAIN ZONE · v3.1 locked tokens (captured inline in
   b13/b14/b16/b17 + reference tokens.css). Accent: Son.
   Money / fulfillment. No motion.
   ============================================================ */
.porcelain{
  --bg:#f6f6f5;
  --surface:#ffffff;
  --surface-2:#ececea;
  --surface-inv:#10182b;
  --text:#16181d;
  --text-2:#5e5e58;
  --text-3:#62625c;        /* porcelain tertiary — AA 4.5+ on --bg and --surface-2 (was #6d6d66 → 4.41 on surface-2) */
  --text-inv:#f2f4f9;
  --brand:#10182b; --brand-strong:#0c1322;
  --accent:#b2401f;        /* Son — porcelain accent */
  --accent-hover:color-mix(in oklab, var(--accent), var(--brand-strong) 18%); /* solid-control hover — ΔL* ≈ 6.1; text contrast rises on hover */
  --icon:#2c3f70;
  --ok:#2e6b4f; --ok-subtle:#e2ede7;
  --warn:#8a6a12; --warn-subtle:#f0e9d8;
  --danger:#b2401f; --danger-subtle:#f4e2dc;
  --info:#2c3f70; --info-subtle:#e2e7f4;
  /* data encoding (§9): personal = accent solid · calculated = dim hollow */
  --data-a:var(--accent); --data-b:var(--text-2); --data-neutral:#75756f;
  --line:#e1e1dd; --line-soft:#e8e8e5;
  --bw-1:1px; --bw-2:1.5px; --bw-3:2px;
  --ls-eyebrow:.16em;      /* audit P2-7 — caps-only contexts (proper nouns/acronyms, §3) */
  --ls-wide:.22em;         /* audit P2-7 — proper nouns only; never lowercase mono (§3 ceiling .06em) */
  --focus-ring:#2c3f70;
  --focus-ring-inv:#93a7d9; /* focus on --surface-inv (reference tokens.css) */
  --sh-1:0 1px 3px color-mix(in oklab, var(--brand-strong) 12%, transparent);
  --sh-2:0 4px 12px color-mix(in oklab, var(--brand-strong) 18%, transparent);
  --sh-3:0 10px 28px color-mix(in oklab, var(--brand-strong) 24%, transparent);
}

/* ============================================================
   DATA encoding (§9): the zone scopes above assign --data-a /
   --data-b / --data-neutral. Personal (from birth minute) = the
   zone accent, solid. Calculated / generational = dim, hollow,
   paired with a label. The wheel's tick ring is NOT data.
   The sequential ramp below is captured from v3.1 for D-series
   print charts only — night screens never encode data in a hue ramp.
   ============================================================ */
:root{
  --ramp-1:#ccdbfa; --ramp-2:#a6b8dc; --ramp-3:#8295be; --ramp-4:#60749e; --ramp-5:#43557a;
}
@media (prefers-reduced-motion:reduce){
  *{animation-delay:0ms!important;animation-duration:1ms!important;transition-duration:0ms!important}
}
/* shell chung — tb/ft/col/btn (starsteller-home-night) */
*{box-sizing:border-box}
button,input,select,textarea{font:inherit}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-2);line-height:var(--lh-base);
}
svg{max-width:100%;height:auto}
a{color:var(--brand)}a:hover{color:var(--brand-strong)}
:is(a,button,summary):focus-visible{
  outline:var(--focus-ring-width) solid var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}
/* MỘT khổ cột cho cả site. Trước 08/08 mỗi khối một khổ — .col 960, .wrap 720,
   .hm-faq 660, .col-n 620 — nên đi từ trên xuống thấy mép trái nhảy bốn lần,
   và footer (960) lệch hẳn so với thân trang quiz (720). Đó chính là cảm giác
   "nền lệch, trang hẹp" trên desktop.
   Bề rộng ĐỌC vẫn giữ hẹp bằng .do-hep bên trong, không giữ bằng cách bóp cả
   khung — bóp khung là thứ làm mép trái nhảy. */
:root{--col-w:960px;--doc-w:660px}
.col{max-width:var(--col-w);margin:0 auto;padding:0 var(--gutter)}
.do-hep{max-width:var(--doc-w)}
/* Dải ưu đãi nằm TRÊN thanh tiêu đề và cuộn đi cùng trang — nó là thông báo
   một lần, không phải thanh điều hướng. Dính nó lại là ăn mất chiều cao màn
   hình suốt phiên đọc. */
.dai-km{background:var(--accent);color:var(--text-inv);text-align:center}
.dai-km-in{display:inline-flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--gutter);font-family:var(--font-mono);
  font-size:var(--fs-1);letter-spacing:.06em}
.dai-km-in a{color:var(--text-inv);text-underline-offset:3px}
/* dải BẬC GIÁ: cả dải là một link sang /shop, nên bỏ gạch chân mặc định và
   cho con số đủ đậm để đọc lướt được. Không đếm ngược, không "chỉ hôm nay" —
   đây là bậc giá gắn với người, không phải chiến dịch. */
a.dai-km{display:block;text-decoration:none;color:var(--text-inv)}
.dai-km-nh{opacity:.75;text-transform:uppercase;font-size:10px;letter-spacing:.12em}
.dai-km-in b{font-weight:800;letter-spacing:0}
.dai-km-mui{font-weight:800}
@media (max-width:520px){.dai-km-in{font-size:11px;gap:var(--s-2)}
  .dai-km-nh{display:none}}
.tb{border-bottom:var(--bw-1) solid var(--line);background:var(--bg)}
.tb-in{
  max-width:960px;margin:0 auto;padding:var(--s-3) var(--gutter);
  display:flex;align-items:center;gap:var(--s-4);
}
.tb-logo{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  color:var(--brand);text-decoration:none;letter-spacing:-.01em;
}
.tb-logo img,.tb-logo svg{width:26px;height:26px;flex:none;display:block}
.tb-logo:hover{color:var(--brand)}
.tb-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-4)}
.tb-nav a{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  color:var(--text-2);text-decoration:none;
}
.tb-nav a:hover{color:var(--brand)}
.tb-menu{
  display:none;margin-left:auto;border:var(--bw-1) solid var(--line);
  background:var(--surface);color:var(--text);border-radius:var(--r-3);
  padding:var(--s-2) var(--s-3);font-size:var(--fs-3);line-height:1;cursor:pointer;
}
/* Chân trang thụt lề MỘT lần thôi. Bản trước `.ft` ăn một `--gutter` rồi
   `.ft-in` ăn thêm một nữa, nên chữ chân trang lùi vào sâu hơn thân trang
   đúng một gutter — nhìn ra ngay ở trang quiz. */
.ft{border-top:var(--bw-1) solid var(--line);padding:var(--s-5) 0 var(--s-7)}
.ft-in{
  max-width:var(--col-w);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-4);
}
.ft .ft-logo{font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.12em;color:var(--text-2)}
.ft nav{display:flex;gap:var(--s-4);margin-left:auto}
.ft nav a{font-size:var(--fs-1);color:var(--text-2);text-decoration:none}
.ft nav a:hover{color:var(--brand)}
.btn{
  display:inline-block;border:0;cursor:pointer;text-align:center;text-decoration:none;
  font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-2);
  letter-spacing:.08em;border-radius:var(--r-4);padding:var(--s-3) var(--s-5);
}
.btn-chinh{background:var(--accent);color:var(--text-inv)}
.btn-chinh:hover{
  background:color-mix(in oklab,var(--accent),var(--text-inv) var(--state-hover));
  color:var(--text-inv);
}
.btn-phu{
  background:transparent;color:var(--text);
  border:var(--bw-1) solid var(--line);
}
.btn-phu:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:520px){
  .tb-in{gap:var(--s-3);flex-wrap:wrap}.tb-logo{flex:none}
  .tb-menu{display:inline-flex;align-items:center;justify-content:center}
  .tb-nav{
    display:none;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:0;margin:0;padding:var(--s-2) 0 0;border-top:var(--bw-1) solid var(--line);
  }
  .tb-nav.tb-nav-mo{display:flex}
  .tb-nav a{padding:var(--s-3) 0;border-bottom:var(--bw-1) solid var(--line-soft)}
}

@media (max-width:699px){
  .tb-logo{min-height:44px;padding:8px 0}
  .tb-menu{min-width:44px;min-height:44px;padding:0}
  .ft nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 0}
  .breadcrumb a,.sk-lc a,.mau-k a,.note a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
}

/* alias tương thích R09a → v4 zones */
/* Porcelain thiếu vài slot shell cũ vẫn dùng — map bằng var(), không hex mới.
   :root kèm theo để trang không class zone (SPA trangbao) vẫn có đủ slot. */
:root,.porcelain{
  --line-strong:var(--brand);
  --brand-subtle:color-mix(in oklab,var(--brand) 12%,var(--bg));
  --dur-fast:var(--dur-micro);
}
/* Night: shell (tb/ft/btn) cần brand/bw/text-inv — alias từ slot night đã khóa. */
.night{
  --brand:var(--text);--brand-strong:var(--text);
  --text-inv:var(--bg);--text-3:var(--text-2);
  --surface-2:var(--surface);--surface-inv:var(--bg2);
  --line-soft:var(--line);--line-strong:var(--line-2);
  --brand-subtle:var(--surface);
  --bw-1:1px;--bw-2:1.5px;--bw-3:2px;
  --focus-ring-inv:var(--accent-text);
  --dur-fast:var(--dur-micro);
  --sh-1:none;--sh-2:none;--sh-3:none;
}
.topbar,.topbar-in,.nav-top{display:none}
footer.chan{display:none}
/* Popover bản mẫu: ẩn chân trang site — iframe đã có thanh tiêu đề riêng. */
body:has(#mau-lop)>footer.ft,
body:has(.mau-lop:not(.hidden))>footer.ft{display:none}

.wrap{max-width:var(--col-w);margin:0 auto;padding:var(--s-5) var(--gutter) var(--s-7)}
.wrap-wide{max-width:var(--col-w)}
h1{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-4);
  line-height:var(--lh-tight);margin:0 0 var(--s-3);color:var(--brand);
}
h2.tit{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  margin:0 0 var(--s-4);
}
.lead{font-size:var(--fs-2);color:var(--text-2);margin:0 0 var(--s-4)}
.breadcrumb{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.06em;
  color:var(--text-3);margin-bottom:var(--s-4);
}
.breadcrumb a{color:var(--text-3);text-decoration:none}
.meta-seo{display:none}
.card{
  background:var(--surface);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-4);padding:var(--s-4);margin:var(--s-4) 0;
}
.pheu{margin-top:var(--s-6);padding-top:var(--s-4);border-top:var(--bw-1) solid var(--line)}
.pheu h2{font-family:var(--font-display);font-size:var(--fs-3);margin:0 0 var(--s-2);color:var(--brand)}
.pheu-btns{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-3)}
.btn-ghost{background:transparent;color:var(--brand);border:var(--bw-1) solid var(--line)}
.widget label{display:block;margin:var(--s-3) 0 var(--s-1);font-size:var(--fs-2)}
.widget input,.widget select{
  width:100%;padding:var(--s-2);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);font:inherit;background:var(--bg);
}
.widget input[type="radio"],.widget input[type="checkbox"]{
  width:auto;margin:0;flex:none;accent-color:var(--accent);
}
.widget fieldset{border:var(--bw-1) solid var(--line);border-radius:var(--r-3);margin:var(--s-4) 0;padding:var(--s-3)}
.widget fieldset label{
  display:flex;align-items:center;gap:var(--s-2);
  margin:var(--s-2) 0;cursor:pointer;
}
.widget .row{display:flex;gap:var(--s-2)}.widget .row>*{flex:1}
/* `.hidden` phải là tiện ích DÙNG CHUNG. Bản cũ chỉ khai trong `.widget` và
   trên `.card`, nên `#quiz-steps` (thẻ trần) thêm class `hidden` mà vẫn hiện —
   trang quiz định tuyến hiện câu hỏi cuối CHỒNG lên khối kết quả. */
.hidden,.widget .hidden,.card.hidden{display:none}
.widget .note{font-size:var(--fs-1);color:var(--text-3)}
.he-lo{
  font-style:italic;color:var(--text-2);border-top:var(--bw-2) solid var(--line);
  padding-top:var(--s-3);margin:var(--s-5) 0;
}
table.quy-uoc{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
table.quy-uoc th,table.quy-uoc td{border:var(--bw-1) solid var(--line);padding:var(--s-2);text-align:left}
.quiz-opt{
  display:block;width:100%;text-align:left;background:var(--bg);
  border:var(--bw-1) solid var(--line);border-radius:var(--r-3);
  padding:var(--s-3) var(--s-4);margin:var(--s-2) 0;font:inherit;cursor:pointer;color:var(--text);
}
.quiz-opt:hover,.quiz-opt:focus{border-color:var(--accent);background:var(--surface-2)}
.quiz-step{margin:var(--s-4) 0}
/* Thẻ ảnh trên trang quiz định tuyến (R41). `aspect-ratio` phải khớp ĐÚNG tỷ
   lệ ảnh nguồn 1210×692 — lệch tỷ lệ là `object-fit:cover` cắt mất mép, đúng
   lỗi đã sửa ở R35 cho thẻ xen của SPA. Không đặt chiều cao cứng. */
.qz-anh{
  margin:0 0 var(--s-4);border-radius:var(--r-3);overflow:hidden;
  background:var(--surface-2);
}
.qz-anh img{
  display:block;width:100%;height:auto;aspect-ratio:1210/692;object-fit:cover;
}
.quiz-progress{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.08em;
  color:var(--text-3);margin-bottom:var(--s-3);
}
.badge-sap-co{
  display:inline-block;font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.1em;text-transform:uppercase;background:var(--surface-2);
  border:var(--bw-1) solid var(--line);color:var(--accent);
  padding:var(--s-1) var(--s-2);border-radius:var(--r-2);margin-left:var(--s-2);
}
.shop-list{list-style:none;padding:0;margin:var(--s-4) 0}
.shop-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);
  padding:var(--s-3) 0;border-bottom:var(--bw-1) solid var(--line);
}
.shop-list .shop-gia{font-family:var(--font-mono);color:var(--accent);margin-left:auto}
.shop-sap-co .shop-gia{color:var(--text-3)}
.shop-section{
  margin:var(--s-6) 0 var(--s-4);font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
.shop-detail .shop-gia-block{
  font-size:var(--fs-3);font-family:var(--font-mono);color:var(--accent);margin:var(--s-4) 0;
}
.shop-detail .shop-gia-cu{text-decoration:line-through;color:var(--text-3);font-size:var(--fs-2);margin-right:var(--s-2)}
.banh-xe{margin:var(--s-5) auto;max-width:min(100%,520px);padding:0}
.banh-xe-in{
  width:100%;overflow:hidden;border:var(--bw-1) solid var(--line);
  border-radius:var(--r-4);background:var(--bg);
}
.banh-xe-in svg{display:block;width:100%;height:auto;max-height:90vh}
@media print{
  .banh-xe{max-width:180mm;page-break-inside:avoid}
  .banh-xe-in{border-color:var(--text-3);filter:grayscale(1) contrast(1.12)}
}

#flow{width:178mm;font-family:var(--font-body);font-size:11pt;line-height:1.55;color:var(--text)}
.cover{display:flex;flex-direction:column;justify-content:space-between;text-align:center;padding-top:26mm}
.cover-eyebrow{
  font-family:var(--font-mono);font-size:8.5pt;letter-spacing:.22em;
  color:var(--text-2);margin:0;text-transform:none}
.cover .h1,.cover-name{
  font-family:var(--font-display);font-weight:700;font-size:30pt;line-height:1.1;
  margin:6mm 0 0;color:var(--text);text-transform:none;letter-spacing:-.01em}
.cover-meta{
  font-family:var(--font-mono);font-size:8.5pt;letter-spacing:.06em;
  color:var(--icon);margin:4mm 0 0}
.cover-mid{margin:16mm 0 0}
.cover-rule{
  border:0;border-top:var(--bw-1) solid var(--line-strong);width:36mm;
  margin:16mm auto 0;opacity:.6}
.cover-foot{
  font-family:var(--font-mono);font-size:8.5pt;letter-spacing:.14em;
  color:var(--text-2);margin:6mm 0 0;text-transform:none}
.cover-chart{
  /* BA cột: bìa chiêm tinh khai Mặt Trời · Mặt Trăng · Cung Mọc. Con số 4 là
     di sản bốn trụ của dự án gốc — để nguyên thì bản in chừa một cột trống. */
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  border-top:var(--bw-1) solid var(--line-soft);padding-top:4mm;margin-top:4mm}
.ct-col{display:flex;flex-direction:column;gap:1mm}
.ct-lbl{
  font-family:var(--font-mono);font-size:8.5pt;letter-spacing:.1em;
  color:var(--text-2);text-transform:none}
.ct-gz{font-size:11pt;color:var(--text)}
.ct-gz .dam{font-weight:600}
.ct-gz .ghi{
  font-family:var(--font-mono);font-size:8.5pt;letter-spacing:.06em;
  color:var(--text-2);display:block}
.toc{break-before:page;break-inside:avoid}
.toc h2,.muc-h2{
  font-family:var(--font-display);font-weight:700;font-size:15pt;margin:0 0 5mm}
.toc ol{list-style:none;margin:0;padding:0;column-count:2;column-gap:10mm}
.toc li{
  break-inside:avoid;display:flex;gap:4mm;align-items:baseline;
  padding:1.6mm 0;border-bottom:var(--bw-1) solid var(--line-soft);font-size:11pt}
.toc .so{font-family:var(--font-mono);font-size:8.5pt;color:var(--text-2);white-space:nowrap}
.muc{break-inside:avoid;margin:0 0 7mm}
.muc h3{
  font-family:var(--font-display);font-weight:700;font-size:11pt;margin:0 0 2mm;
  display:flex;gap:4mm;align-items:baseline}
.muc h3 .so{font-family:var(--font-mono);font-size:8.5pt;color:var(--accent)}
.muc p{margin:0 0 3mm;text-wrap:pretty;orphans:3;widows:3}
.mod-head{margin:8mm 0 4mm}
.mod-num{
  font-family:var(--font-mono);font-size:8.5pt;letter-spacing:.16em;color:var(--text-2)}
.mod-title{font-family:var(--font-display);font-size:15pt;margin:2mm 0}
.mod-sub{font-size:11pt;color:var(--text-2)}
.mod-sec{font-size:11pt;line-height:1.55}
.note-in{
  font-size:11pt;color:var(--text-2);border-top:var(--bw-2) solid var(--line);
  padding-top:4mm;margin-top:6mm;
  padding-left:4mm;margin-top:6mm}
.cuoi{break-before:page}
.cuoi p{margin:0 0 4mm;text-wrap:pretty}
.quyuoc{font-family:var(--font-mono);font-size:8.5pt;letter-spacing:.08em;color:var(--icon)}
.ft-in{
  display:flex;gap:6mm;font-family:var(--font-mono);font-size:8.5pt;
  letter-spacing:.12em;color:var(--text-2);
  border-top:var(--bw-1) solid var(--line-soft);padding-top:2.5mm}
.ft-in span:last-child{margin-left:auto}
.cham{display:inline-block;width:8px;height:8px;border-radius:var(--r-full);
  margin-right:2.5mm;vertical-align:middle}
.cham-a{background:var(--data-a);border:1.5px solid var(--data-a)}
.cham-b{background:var(--surface);border:1.5px solid var(--data-b)}
/* D2 — tài liệu riêng */
.pitem-bang{width:100%;border-collapse:collapse;margin:0 0 5mm;font-size:11pt}
.pitem-bang th,.pitem-bang td{
  text-align:left;padding:2mm 3mm;border-top:var(--bw-1) solid var(--line-soft);vertical-align:top}
.pitem-bang th{font-family:var(--font-mono);font-size:8.5pt;color:var(--text-2);font-weight:400}
.pitem .so{font-family:var(--font-mono);font-size:8.5pt;color:var(--text-2)}
.trang-moi{break-before:page}

/* ── Khung trang A4 do api/pdf.js dựng ra ─────────────────────────────────
   `pdf.js` thay `#flow` bằng một dãy `.page`, mỗi trang gồm `.runner` (đầu
   trang), `.body-area` (ruột) và `.folio` (chân trang + số trang). Ba lớp này
   KHÔNG có trong CSS cho tới 09/08 — kể cả khi phân trang chạy được thì trang
   in vẫn tràn, không lề, không số trang. Sửa cùng lượt vá `#flow`.
   `preferCSSPageSize` bật nên @page quyết khổ giấy; lề để 0 ở puppeteer và
   nắn bằng padding tại đây, nhờ vậy runner/folio bám đúng mép vùng in. */
@page{size:A4;margin:0}
/* CHIỀU CAO PHẢI CHÍNH XÁC, không phải `min-height`. Với `min-height:297mm`
   một chữ dôi ra là trang tự tràn sang tờ thứ hai, và `break-after:page` bồi
   thêm một tờ trắng nữa. Đo lần đầu: bìa ăn 2 trang → mọi số trang trong mục
   lục lệch đúng một nhịp, vì `pdf.js` đánh số theo `#pdf-offset` chứ không
   đếm tờ thật. `overflow:hidden` cắt phần dôi thay vì đẩy sang tờ mới. */
.page{
  position:relative;width:210mm;height:297mm;box-sizing:border-box;overflow:hidden;
  padding:16mm 16mm 14mm;background:var(--bg);break-after:page;
  display:flex;flex-direction:column}
.page:last-child{break-after:auto}
.runner{
  display:flex;justify-content:space-between;gap:6mm;
  font-family:var(--font-mono);font-size:8.5pt;letter-spacing:.1em;
  color:var(--text-2);border-bottom:var(--bw-1) solid var(--line-soft);
  padding-bottom:2.5mm;margin-bottom:6mm}
.body-area{flex:1 1 auto;width:178mm}
.folio{
  display:flex;justify-content:space-between;gap:6mm;
  font-family:var(--font-mono);font-size:8.5pt;letter-spacing:.12em;
  color:var(--text-2);border-top:var(--bw-1) solid var(--line-soft);
  padding-top:2.5mm;margin-top:6mm}
/* Bìa không có runner/folio nên căn giữa cả cột. */
.page-bia{justify-content:center}
.page-cuoi .cuoi{break-before:auto}
.cuoi-t{font-family:var(--font-display);font-weight:700;font-size:15pt;margin:0 0 4mm}
.cuoi-p{margin:0 0 4mm;color:var(--text-2)}
.pv-hinh{break-inside:avoid;margin:0 0 6mm}
.pv-hinh svg{display:block;width:100%;height:auto;max-height:120mm}
/* Chú thích biểu đồ là HAI span liền nhau (`c-title` + `c-note`). Trên web
   chúng có style riêng; trong bản in thì không, nên hai câu dính làm một:
   "Bộ ba nền tảngBa lớp đọc từ ngoài vào". Tách dòng ngay tại đây. */
.pv-hinh figure{margin:0}
.pv-hinh figcaption{margin:0 0 3mm}
.pv-hinh .c-title{
  display:block;font-family:var(--font-display);font-weight:700;font-size:11pt;
  margin:0 0 1.5mm}
.pv-hinh .c-note{display:block;font-size:9.5pt;color:var(--text-2);line-height:1.5}

.banh-xe{margin:1rem 0;max-width:180mm;page-break-inside:avoid}
.banh-xe-in svg{display:block;width:100%;height:auto;max-height:160mm}

@media screen {
  html, body { background: var(--bg); }
  .screen-wrap { max-width: 200mm; margin: 0 auto; padding: 0 20px 80px; }
  /* R99 đưa vào style_pdf rule `.page{height:297mm;overflow:hidden;display:flex}`
     cho khổ in A4 — rule đó nằm trong CSS_IN nên lọt cả vào /report.css.
     Trên màn hình mỗi phần bài (#phan-1…#phan-7) cũng là div.page: bị đóng
     khung đúng 1123px, ruột ~11.000px tràn ra đè lên các phần sau (đo 09/08
     trên production). Reset ở đây phải trả về ĐỦ các thuộc tính khổ in:
     height, display, position, break-after — thiếu một cái là bài lại chồng. */
  .page { width: auto; height: auto; min-height: 0; padding: 0; margin: 0;
    overflow: visible; position: static; display: block;
    break-after: auto; page-break-after: auto; }
  .page + .page { margin-top: 0; }
  .runner, .folio { display: none; }
  /* style_pdf khoá .body-area ở 178mm (672px) cho vùng in — trên màn hình
     cột bài chỉ 640px nên tràn ngang 32px. */
  .body-area { padding-top: 0; width: auto; }
  /* `#flow` khai CỨNG 178mm (=673px) cho khổ in. Trên màn hình đó là con số
     rộng hơn cả điện thoại: bản mẫu `/mau/{ma}` mở ở 420px có body 673px, nên
     trang cuộn ngang, tiêu đề bìa bị cắt mất đuôi và mỗi dòng chữ chạy quá mép.
     `.page` đã được reset ngay trên, nhưng `#flow` thì chưa — mà chính nó kéo
     rộng body khiến bìa cũng lệch theo. 90% khách vào bằng điện thoại và bản
     mẫu là thứ họ mở NGAY TRƯỚC khi trả tiền. */
  #flow { width: auto; max-width: 640px; margin: 0 auto;
    padding: 0 var(--gutter); font-size: inherit; line-height: inherit; }
  /* Bìa: khổ in dựng nó cao đúng một tờ A4 nên trên màn hình là một màn hình
     rưỡi trống trơn trước khi thấy chữ đầu tiên. Và `letter-spacing:.24em` trên
     một tiêu đề dài thì không xuống dòng nổi trong khung hẹp. */
  .page-bia { min-height: 0; max-width: 640px; margin: 0 auto; }
  .page-bia .cover { padding: var(--s-6) var(--gutter); display: block; }
  .cover-eyebrow { overflow-wrap: anywhere; }
  .screen-cover {
    background: var(--brand); color: var(--text-inv); margin: 0 -20px 34px;
    padding: 54px 40px 40px;
  }
  .screen-cover .kicker, .screen-cover .cover-eyebrow { color: var(--data-a); }
  .screen-cover .h1 {
    font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 7vw, 62px);
    line-height: 1.04; letter-spacing: -0.025em; text-transform: uppercase; margin: 14px 0 0;
    /* rule element h1{color:var(--brand)} của style_man_hinh thắng inherit —
       phải khai màu tường minh, không thì chữ navy chìm trên nền navy (R24) */
    color: var(--text-inv);
  }
  .screen-cover .h1 em {
    font-family: var(--font-body); font-style: italic; font-weight: 600;
    text-transform: none; letter-spacing: 0; color: var(--data-a);
  }
  .screen-cover .cover-name {
    font-family: var(--font-display); font-weight: 700; font-size: 22px;
    text-transform: uppercase; color: var(--data-a); margin-top: 26px;
  }
  .screen-cover .cover-meta { font-size: 14px; line-height: 1.6; color: color-mix(in oklab,var(--text-inv) 80%,transparent); }
  .screen-cover .cover-chart { margin-top: 28px; padding-top: 16px; }
  .screen-cover .ct-gz { font-size: 20px; color: var(--text-inv); }
  .screen-cover .ct-lbl { font-size: 10px; color: var(--data-a); }
  .screen-cover .cover-foot { margin-top: 22px; font-size: 10px; }

  body { font-size: 16px; line-height: 1.72; }

  /* trang bài ~6.500 node: mục ngoài màn hình khỏi cần layout/paint,
     cuộn trên điện thoại nhẹ hẳn. Kèm kích thước áng chừng để thanh cuộn
     không giật khi trình duyệt vẽ tới. */
  section.muc { content-visibility: auto; contain-intrinsic-size: auto 460px; }
  .qua-item, .ml100-phan { content-visibility: auto; contain-intrinsic-size: auto 420px; }

  .mod-head { margin: 52px 0 22px; }
  .mod-title { font-size: clamp(26px, 4.4vw, 38px); }
  .mod-num { font-size: 12px; }
  .mod-sub { font-size: 16px; margin-top: 8px; }
  section.muc { margin-top: 30px; }
  section.muc > h3 { font-size: 21px; gap: 10px; margin-bottom: 8px; }
  section.muc > h3 .mnum { font-size: 12px; padding-top: 3px; }
  section.muc p { margin-bottom: 12px; text-align: left; }
  section.muc ul { margin: 8px 0 12px; }
  section.muc ul li { padding-left: 22px; margin-bottom: 6px; }
  section.muc ul li::before { width: 9px; height: 9px; top: 8px; border-width: 1.5px; }
  .pull { font-size: 18px; padding: 4px 0 4px 16px; margin: 16px 0; }
  .note { padding: 16px 18px; font-size: 15px; margin-top: 20px; }
  .chart { margin: 20px 0; }
  .c-title { font-size: 11px; white-space: normal; }
  .c-note { font-size: 12px; }
  .tbl { font-size: 14px; }
  .tbl th { font-size: 10px; padding: 8px 10px; }
  .tbl td { padding: 9px 10px; }
  .tbl .t-gz { font-size: 16px; }
  .tbl .t-bar { width: 120px; }
  .tbl .t-bar .mini { height: 9px; border-radius: 0 5px 5px 0; }
  .tbl .t-score { font-size: 15px; width: 40px; }
  .tbl .t-nhan { font-size: 13px; }
  .tru { padding: 14px 12px; }
  .gz-can, .gz-chi { font-size: 30px; }
  .tru-label { font-size: 10px; }
  .tru-tt { font-size: 15px; }
  .tru-dl { font-size: 12px; }
  .tru-dl dt, .tc-head { font-size: 9px; }
  .tc-can { font-size: 13px; }
  .tc-meta { font-size: 9px; }
  .dt-hanh { font-size: 28px; }
  .dt-label { font-size: 10px; }
  .dt-note { font-size: 12px; }
  .st { padding: 13px; }
  .st-label { font-size: 10px; }
  .st-val { font-size: 21px; }
  .st-note { font-size: 12px; }
  .hero-card { padding: 24px; margin: 20px 0; }
  .hc-kicker { font-size: 11px; }
  .hc-num { font-size: 58px; }
  .hc-unit { font-size: 22px; }
  .hc-title { font-size: 19px; }
  .hc-desc { font-size: 15px; }
  .hm-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .hm-year { font-size: 17px; }
  .hm-gz { font-size: 10px; }
  .hm-score { font-size: 14px; }
  .hm-nhan { font-size: 10px; }
  .hm-chip { height: 6px; margin-bottom: 6px; }
  .mt-val { font-size: 22px; }
  .mt-track { height: 10px; }
  .tl { gap: 14px; margin: 20px 0; }
  .tl-item { padding-top: 16px; }
  .tl-dot { width: 11px; height: 11px; top: -6px; border-width: 3px; }
  .tl-age { font-size: 11px; }
  .tl-title { font-size: 16px; }
  .tl-desc { font-size: 13px; }
  .chip { font-size: 12px; }
  .chip i { width: 8px; height: 8px; }
  .cn-bar { height: 20px; }
  .cn-legend { font-size: 14px; }
  .c-legend { font-size: 13px; }
  .c-svg-donut { max-width: 260px; }
  /* Chia cột phải đặt lên `ol`, KHÔNG lên cả `.toc`: section này còn chứa
     thẻ `h2` «Trong bản này có gì», nên chia cột ở cấp section thì tiêu đề bị
     xếp thành một phần tử của cột — cột một hoá ra là «tiêu đề + phần I»,
     phần III nhảy sang cột hai, mục lục nhìn như vỡ khuôn (Duc chụp 09/08). */
  /* Bìa khai ĐÚNG ba cột (Mặt Trời · Mặt Trăng · Cung Mọc). style_pdf để
     `repeat(4,1fr)` từ thời bốn trụ, nên cột thứ tư rỗng và ba lớp bị dồn
     2 + 1 — nhìn như thiếu mất một ô. */
  .cover-chart { grid-template-columns: repeat(3, 1fr); }
  .toc { column-count: auto; margin-top: 18px; }
  .toc > ol { column-count: 2; column-gap: 28px; }
  .toc-name { font-size: 16px; }
  .toc-num { font-size: 11px; }
  /* Số trang trong mục lục do `pdf.js` điền lúc dựng file. Trên màn hình nó
     còn là dấu gạch giữ chỗ — bảy cái "—" xếp thành một cột vô nghĩa bên phải
     mục lục. Ẩn khi xem bằng mắt, bản in vẫn có số. */
  .toc-page { display: none; }
  .toc-list li { font-size: 13px; }
  .grid-2, .grid-2-wide { gap: 24px; }
  @media (max-width: 760px) {
    /* GRID-2 TUYỆT ĐỐI KHÔNG 2 CỘT trên điện thoại: biểu đồ trong đó từng bị
       co còn 136px, chữ trong SVG scale về 3px — không thể đọc. Một cột hết. */
    .grid-2, .grid-2-wide, .dt-grid { grid-template-columns: 1fr; }
    .tutru-grid, .st-grid { grid-template-columns: 1fr 1fr; }
    .hm-grid { grid-template-columns: repeat(2, 1fr); }
    .tl { grid-template-columns: 1fr; }
    .toc, .toc > ol { column-count: 1; }
    .screen-cover { padding: 36px 22px 28px; }
    /* biểu đồ chiếm trọn bề ngang, chữ trong SVG về cỡ đọc được.
       `> svg` chứ không phải `svg`: glyph là svg inline trong ô bảng, quy tắc
       width:100% từng phóng nó thành khối đen che kín cả biểu đồ (R25). */
    .chart { overflow-x: hidden; }
    .chart > svg { width: 100%; max-width: 480px; height: auto; display: block;
      margin: 0 auto; }

    /* bảng: thu chữ và đệm để bảng 4 cột vừa khung 375px, bảng nào vẫn rộng
       hơn thì tự cuộn trong khung của nó.
       `width:auto` phải ghi đè `width:100%` của quy tắc nền — để nguyên 100%
       thì `min-width:max-content` vô hiệu, bảng co lại và mỗi ô gãy ba dòng
       (bảng 13 thiên thể cao gần 2.000px trên khung 375px). `nowrap` giữ mỗi
       hàng đúng một dòng, đổi việc gãy chữ lấy việc vuốt ngang. */
    .tbl { display: block; width: auto; overflow-x: auto;
      -webkit-overflow-scrolling: touch; font-size: 12.5px; }
    .tbl thead, .tbl tbody { min-width: max-content; }
    .tbl th, .tbl td { white-space: nowrap; }
    .tbl svg.glyph { width: 15px; height: 15px; }
    .tbl th { padding: 6px 7px; font-size: 9px; }
    .tbl td { padding: 7px 7px; }
    .tbl .t-gz { font-size: 14px; }
    .tbl .t-bar { width: 64px; }
    .tbl .t-score { width: 32px; font-size: 13px; }
    .tbl .t-nhan { font-size: 11.5px; }
    .c-title, .c-note { display: block; max-width: 100%; overflow-wrap: break-word; }
  }
  @media (max-width: 420px) {
    /* tên cung tiếng Việt dài ("Song Ngư 24°") — khung 375px xuống lưới 2×2,
       bỏ nowrap để cột cuối không tràn mép (R24) */
    .screen-cover .cover-chart { gap: 10px 6px; grid-template-columns: repeat(3, 1fr); }
    .screen-cover .ct-gz { font-size: 15.5px; letter-spacing: -0.02em; }
    .screen-cover .ct-lbl { font-size: 8.5px; }
  }
}

@media screen {
  .mod-locked { position: relative; }
  .mod-badge {
    display: inline-block; font-family: var(--font-mono); font-weight: 600; font-size: 9px;
    letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 9px;
    border: 1px solid var(--accent); color: var(--accent); margin-bottom: 10px;
  }
  .mod-badge.free { border-color: var(--ok); color: var(--ok); }
  .mod-badge.key { background: var(--brand); border-color: var(--brand); color: var(--data-a); }

  .teaser {
    background: var(--brand); color: var(--text-inv); padding: 22px 24px; margin: 18px 0;
  }
  .teaser-lbl {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--data-a); margin-bottom: 8px;
  }
  .teaser p { font-size: 16px; line-height: 1.65; margin: 0; color: color-mix(in oklab,var(--text-inv) 94%,transparent); }
  .teaser .skel-line { background: color-mix(in oklab,var(--text-inv) 16%,transparent); }

  .blur-wrap { position: relative; margin-top: 14px; }
  .blur-list { list-style: none; }
  .blur-list li {
    display: flex; gap: 10px; align-items: baseline; padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .blur-list li:last-child { border-bottom: none; }
  .blur-list .bn {
    font-family: var(--font-mono); font-size: 10px; color: var(--text-3); flex: none; width: 26px;
  }
  .blur-list .bt { font-size: 14.5px; color: var(--text-2); flex: none; }
  .blur-list .bb { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 40px; }
  .blur-list .bb i {
    display: block; height: 7px; border-radius: 3px;
    background: linear-gradient(90deg, color-mix(in oklab,var(--text) 4%,transparent), color-mix(in oklab,var(--text) 10%,transparent) 12%,
      color-mix(in oklab,var(--text) 10%,transparent) 88%, color-mix(in oklab,var(--text) 4%,transparent));
  }

  .unlock {
    border: 1px solid var(--accent); background: color-mix(in oklab,var(--data-a) 6%,transparent);
    padding: 26px; margin: 30px 0 10px; text-align: center;
  }
  .unlock h3 {
    font-family: var(--font-display); font-weight: 800; font-size: clamp(20px,3.4vw,27px);
    text-transform: uppercase; line-height: 1.1;
  }
  .unlock p { font-size: 15px; color: var(--text-2); max-width: 56ch; margin: 10px auto 0; }
  .unlock .cnt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-3); margin-top: 14px; }

  .skel-line {
    display: block; height: 9px; background: color-mix(in oklab,var(--text) 8%,transparent);
    border-radius: 2px; margin-bottom: 7px;
  }
  .skel-line:nth-child(2) { width: 92%; }
  .skel-line:nth-child(3) { width: 78%; }
  .skel-wrap { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
  @media (prefers-reduced-motion: reduce) { .skel-wrap { animation: none } }
  .err-inline { color: var(--accent); font-size: 14px; font-style: italic; }
}

/* B4 — cấu trúc base; màu đêm ghi đè ở funnel night skin */
.load-screen { position: fixed; inset: 0; z-index: 100; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px; text-align: center; background: var(--brand); color: var(--text-inv); }
.load-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.load-stars .star { fill: var(--text-inv); }
.load-in { position: relative; width: 100%; max-width: 420px; text-align: center; }
.load-mark { display: block; margin: 0 auto; width: 120px; height: auto; }
.load-mark .m-outer,.load-mark .m-inner,.load-mark .m-tick { fill: none; stroke: color-mix(in oklab,var(--text-inv) 55%,transparent); }
.load-mark .m-outer { stroke-width: 1.2; opacity: .7; }
.load-mark .m-inner { stroke-width: .8; opacity: .4; }
.load-mark .m-tick { stroke-width: 1.6; opacity: .55; }
.load-mark .m-spoke { stroke: color-mix(in oklab,var(--text-inv) 45%,transparent); stroke-width: .7; opacity: .3; fill: none; }
.load-kick { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em;
  text-transform: none; color: color-mix(in oklab,var(--text-inv) 55%,transparent); margin-top: 26px; }
.load-title { font-family: var(--font-display); font-weight: 700; font-size: 22px;
  line-height: 1.25; letter-spacing: -.01em; margin: 10px 0 0; text-transform: none;
  text-wrap: balance; color: var(--text-inv); }
.load-chart { margin: 26px 0 0; text-align: left; }
.load-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px;
  border-top: 1px solid color-mix(in oklab,var(--text-inv) 12%,transparent); }
.load-row:first-child { border-top: 0; }
.load-row svg.gl { width: 20px; height: 20px; flex: none; stroke: var(--accent); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.load-row.dim svg.gl { stroke: color-mix(in oklab,var(--text-inv) 45%,transparent); }
.load-row .t,.load-row .l { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: color-mix(in oklab,var(--text-inv) 55%,transparent); width: 86px; flex: none; text-transform: none; }
.load-row .v,.load-row .g { font-weight: 600; color: var(--text-inv); text-transform: none; font-size: 15px; }
.load-row .st { margin-left: auto; font-family: var(--font-mono); font-size: 12px;
  color: color-mix(in oklab,var(--text-inv) 55%,transparent); }
.load-row .st svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; vertical-align: -2px; }
.load-bar { width: 100%; height: 3px; background: color-mix(in oklab,var(--text-inv) 12%,transparent);
  border-radius: 999px; margin-top: 28px; overflow: hidden; }
.load-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px;
  transition: width .8s cubic-bezier(.22,.61,.21,1); }
.load-under { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 10px; }
.load-step { font-size: 12px; color: color-mix(in oklab,var(--text-inv) 55%,transparent);
  text-align: left; font-style: normal; min-height: 1.4em; flex: 1; }
.load-pct { font-family: var(--font-mono); font-size: 12px; color: var(--text-inv); flex: none; }
.load-note { font-size: 12px; color: color-mix(in oklab,var(--text-inv) 55%,transparent);
  margin-top: 26px; line-height: 1.7; text-align: center; }
.load-err { color: var(--danger); font-size: 14px; font-style: normal; }

.qz { max-width: 660px; margin: 0 auto; padding: 40px 0 80px; }
.qz-cu { max-width: 660px; margin: 16px auto -20px; display: flex; align-items: center;
  gap: 10px; background: var(--surface-2); border: 1px solid var(--line);
  padding: 9px 12px; font-size: 13.5px; }
.qz-cu a { color: var(--text); text-decoration: none; flex: 1; line-height: 1.5; }
.qz-cu a u { color: var(--accent); }
.qz-cu button { background: none; border: none; font-size: 18px; color: var(--text-3);
  cursor: pointer; line-height: 1; flex: none; }
.qz-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.qz-chuong { font-family: var(--font-display); font-weight: 800; font-size: 17px;
  text-transform: uppercase; letter-spacing: -0.005em; white-space: nowrap; flex: none; }
.qz-chuong span { color: var(--accent); margin-right: 8px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; }
/* phụ đề chương có thể dài — một dòng, cắt bằng …, đừng để gãy tiêu đề chương */
.qz-dem { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; }
.qz-track { height: 2px; background: color-mix(in oklab,var(--data-a) 18%,transparent); margin-top: -1px; }
.qz-fill { height: 100%; background: var(--accent); width: 0; transition: width .45s ease; }
.qz-body { padding-top: 40px; animation: qzin .38s ease both; }
@keyframes qzin { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .qz-body { animation: none } }
.qz-hoi { font-family: var(--font-display); font-weight: 800; font-size: clamp(27px,4.6vw,38px);
  line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
.qz-phu { font-size: 16px; color: var(--text-3); font-style: italic; margin-top: 10px; }
.qz-dap { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.qz-op { text-align: left; background: var(--text-inv); border: 1px solid var(--line);
  padding: 16px 18px; cursor: pointer; transition: all .14s; font-family: var(--font-body); }
.qz-op:hover { border-color: var(--accent); transform: translateX(3px); }
.qz-op[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }
.qz-op .t { font-size: 17px; color: var(--text); display: block; }
.qz-op .p { font-size: 14px; color: var(--text-3); display: block; margin-top: 3px; }
.qz-op[aria-pressed="true"] .t { color: var(--data-a); }
.qz-op[aria-pressed="true"] .p { color: color-mix(in oklab,var(--text-inv) 65%,transparent); }

.qz-xen { background: var(--brand); color: var(--text-inv); margin-top: 28px; }
/* ảnh chạy hết bề ngang thẻ nên phần đệm chuyển xuống lớp trong */
.qz-xen-in { padding: 30px 32px 34px; }
/* Tỷ lệ khung PHẢI khớp tỷ lệ ảnh nguồn. Bộ thẻ xen là 1210×692 (tỷ lệ 1,749);
   khung cũ đặt 16/7 = 2,286 nên `cover` cắt mất 23% chiều cao mỗi ảnh — đúng
   chỗ bố cục riso đặt tiêu điểm. Đo rồi mới sửa, không chỉnh bằng mắt. */
.qz-xen-anh { display: block; width: 100%; aspect-ratio: 1210/692; object-fit: cover;
  border-bottom: 1px solid var(--data-a);
  /* nền chờ trong lúc ảnh về — không còn khối xanh trống trơn */
  background: linear-gradient(160deg, color-mix(in oklab,var(--data-a) 14%,transparent), color-mix(in oklab,var(--data-a) 4%,transparent)); }
.qz-xen .nhan { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--data-a); }
.qz-xen h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(21px,3.4vw,28px);
  text-transform: uppercase; line-height: 1.12; margin: 12px 0 0; }
.qz-xen.quote h3 { font-family: var(--font-body); font-style: italic; font-weight: 600;
  text-transform: none; letter-spacing: 0; font-size: clamp(20px,3.2vw,26px); color: var(--data-a); }
.qz-xen p { font-size: 16px; line-height: 1.68; color: color-mix(in oklab,var(--text-inv) 88%,transparent); margin-top: 14px; }

.qz-form { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin-top: 26px; }
.qz-form .full { grid-column: 1/-1; }
.qz-nav { display: flex; gap: 12px; align-items: center; margin-top: 30px; }
.qz-back { background: none; border: none; cursor: pointer; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.qz-back:hover { color: var(--text); }
.qz-xn { background: var(--surface-2); border: 1px solid var(--line); padding: 24px; margin-top: 24px; }
.qz-xn dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.qz-xn dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); padding-top: 4px; }
.qz-xn dd { font-family: var(--font-display); font-weight: 700; font-size: 19px; text-transform: uppercase; }
.xn-nho { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13px;
  text-transform: none; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.am-hang { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
/* Ô tìm tỉnh/thành — thay <select> 61 dòng. Danh sách gợi ý nổi TRÊN nội dung
   phía dưới (position:absolute) chứ không đẩy trang giãn ra: đẩy trang làm ô
   đang gõ nhảy khỏi tầm mắt trên điện thoại. */
/* Dòng mở âm lịch — chữ nhỏ, không phải nút to. Nó phục vụ thiểu số nên không
   được chiếm chỗ ngang hàng với ô ngày sinh. */
.lich-mo { margin-top: 8px; font-size: 13.5px; }
.am-nhan { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.am-nhan .lk { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.tim-box { position: relative; }
/* Danh sách gợi ý là tấm NỔI, nên nền phải ĐỤC. Ở zone tối `--surface` chỉ là
   một lớp phủ sáng khoảng 4,5% độ đục — đúng cho thẻ nằm TRONG luồng (nó lấy
   nền trang làm đáy), sai hoàn toàn cho tấm nổi: cả form phía dưới (nhãn, nút
   Nam/Nữ, nút Tiếp) hiện xuyên qua và chữ chồng lên chữ.
   Vẫn giữ được sắc thái của `--surface`: sơn nó thành một lớp ảnh nền ĐÈ LÊN
   `--bg` đục, thay vì dùng nó làm màu nền. Cách này đúng cho cả hai zone. */
.tim-ds { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none; max-height: 46vh; overflow-y: auto;
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface), var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3); box-shadow: 0 10px 28px color-mix(in oklab,var(--text) 20%,transparent); }
.tim-ds li { padding: 11px 12px; min-height: 44px; display: flex; align-items: center;
  cursor: pointer; border-radius: var(--r-2); font-size: 15px; }
/* `--surface-2` cũng trong suốt ở zone tối nên dòng đang chọn không hiện ra —
   trộn thẳng với chữ để có mức tương phản thật, không phụ thuộc nền phía sau. */
.tim-ds li[aria-selected="true"], .tim-ds li:hover {
  background: color-mix(in oklab, var(--bg), var(--text) 12%); }
.tim-ds:empty { display: none; }
.am-nhuan { display: flex; align-items: center; gap: 7px; margin-top: 9px;
  font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.am-nhuan span { font-size: 12px; color: var(--text-3); }
.qz-chip-hang { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.qz-chip { flex: 1; min-width: 88px; border: 1px solid var(--line); background: var(--text-inv);
  cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3);
  border-radius: 999px; padding: 11px 10px; }
.qz-chip[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); }
.qz-gio-box { margin-top: 10px; }
.qz-gs-note { display: flex; gap: 12px; background: var(--surface-2); border: 1px solid var(--line);
  padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.qz-mien { display: none; margin-top: 12px; border: 1px solid var(--line);
  padding: 12px 14px; background: var(--surface-2); }
.qz-mien.hien { display: block; }
.qz-mien p { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.qz-nn { display: none; margin-top: 10px; border: 1px solid var(--line);
  padding: 12px 14px; background: var(--surface-2); }
.qz-nn.hien { display: block; }
.qz-nn p { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.qz-nn .in { margin-bottom: 8px; }
.qz-nn .btn { width: 100%; }
.qz-nn .nn-xong { margin: 0; color: var(--brand); }
@media (max-width: 640px) { .qz-form { grid-template-columns: 1fr } }

@media screen {
  .he-box { position: relative; padding-bottom: 8px; }
  .he-box p { margin: 0; }
  .he-fade { position: relative; margin-top: 10px; }
  .he-fade i { display: block; height: 8px; background: color-mix(in oklab,var(--text) 9%,transparent);
    border-radius: 2px; margin-bottom: 7px; filter: blur(2.6px); }
  .he-fade i:nth-child(2) { width: 94% } .he-fade i:nth-child(3) { width: 72% }
  .muc-khoa .muc-body { color: var(--text-2); }
  /* mục khoá là vùng bấm được — phải trông như bấm được (nút CTA "Mở khoá để
     đọc tiếp" đã nằm giữa khối mờ nên không thêm nhãn nữa, tránh lặp chữ) */
  .muc-khoa { cursor: pointer; }
  .muc-khoa:active { background: color-mix(in oklab,var(--data-a) 7%,transparent); }
  .muc-nhan { outline: 1px solid var(--accent); outline-offset: 8px; }
  .nhan-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 6px; }
}

@media screen {
  /* thanh mở khoá dính đáy màn hình */
  .stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--brand); color: var(--text-inv);
    border-top: 1px solid var(--data-a); box-shadow: 0 -8px 24px color-mix(in oklab,var(--text) 18%,transparent); }
  .stick-in { max-width: 200mm; margin: 0 auto; padding: 12px 20px;
    display: flex; align-items: center; gap: 16px; }
  .stick-txt { flex: 1; min-width: 0; }
  .stick-t { font-family: var(--font-display); font-weight: 800; font-size: 15px;
    text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.15; }
  .stick-p { font-size: 12.5px; color: color-mix(in oklab,var(--text-inv) 70%,transparent); margin-top: 2px; }
  /* nhãn ưu đãi chào mừng — phải sống cả trên mobile (nơi .stick-p bị ẩn) */
  .stick-km { display: inline-block; font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand);
    background: var(--data-a); border-radius: 3px; padding: 2px 8px; margin-bottom: 4px; }
  .stick .btn { flex: none; }
  body.co-stick { padding-bottom: 68px; }
  /* khi thanh mở khoá đang dính đáy thì ẩn thanh hành động (nút PDF lúc đó
     vẫn disabled) — hai thanh chồng nhau trên điện thoại rất rối */
  body.co-stick .actions { display: none; }

  /* nút mục lục nổi */
  .fab { position: fixed; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 61; width: 46px; height: 46px;
    border-radius: 50%; background: var(--brand); border: 1px solid var(--data-a);
    color: var(--data-a); cursor: pointer; display: flex; align-items: center;
    justify-content: center; box-shadow: 0 6px 18px color-mix(in oklab,var(--text) 22%,transparent); }
  .fab svg { width: 20px; height: 20px; stroke: var(--data-a); }
  .ml-lop { position: fixed; inset: 0; z-index: 70; background: color-mix(in oklab,var(--brand) 55%,transparent);
    display: flex; justify-content: flex-end; }
  .ml { width: min(480px, 92vw); height: 100%; max-height: 100dvh; background: var(--bg);
    display: flex; flex-direction: column; overflow: hidden; }
  .ml-top { flex-shrink: 0; display: flex; align-items: baseline; justify-content: space-between;
    padding: 26px 24px 12px; border-bottom: 1px solid var(--text); background: var(--bg); }
  .ml-ruot { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 40px;
    -webkit-overflow-scrolling: touch; }
  .ml-top h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px;
    text-transform: uppercase; }
  .ml-dong { background: none; border: none; font-size: 24px; cursor: pointer;
    color: var(--text-3); line-height: 1; }
  .ml-phan { margin-top: 20px; }
  .ml-phan-ten { display: flex; align-items: baseline; gap: 8px;
    padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
  .ml-phan-ten b { font-family: var(--font-display); font-weight: 800; font-size: 15px;
    text-transform: uppercase; }
  .ml-phan-ten span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
    color: var(--accent); }
  .ml a { display: flex; gap: 10px; padding: 7px 0; text-decoration: none; color: var(--text-2);
    font-size: 14px; border-bottom: 1px solid color-mix(in oklab,var(--data-a) 7%,transparent); }
  .ml a:hover { color: var(--text); }
  .ml a i { font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
    font-style: normal; flex: none; width: 26px; }

  /* khối mờ cho cảm giác dày — KHÔNG dùng filter:blur ở đây: trang có ~2.700
     thanh mờ, mỗi thanh một filter là điện thoại giật khi cuộn. Giả mờ bằng
     gradient hai đầu nhạt, mắt thường không phân biệt được. */
  .khoa { margin-top: 12px; }
  .khoa .kd { margin-bottom: 12px; }
  .khoa i { display: block; height: 8px; border-radius: 3px; margin-bottom: 6px;
    background: linear-gradient(90deg, color-mix(in oklab,var(--text) 4%,transparent), color-mix(in oklab,var(--text) 10%,transparent) 12%,
      color-mix(in oklab,var(--text) 10%,transparent) 88%, color-mix(in oklab,var(--text) 4%,transparent)); }
  .khoa .kls { display: flex; gap: 9px; align-items: center; margin-bottom: 7px; }
  .khoa .kls u { flex: none; width: 9px; height: 9px; border-radius: 50%;
    border: 1.4px solid color-mix(in oklab,var(--data-a) 35%,transparent); }
  .khoa .kls i { margin: 0; flex: 1; }

  /* CTA nằm giữa vùng mờ */
  .cta-line { display: flex; align-items: center; gap: 14px; margin: 4px 0 2px; }
  .cta-line::before, .cta-line::after { content: ""; flex: 1; height: 1px;
    background: color-mix(in oklab,var(--data-a) 32%,transparent); }
  .cta-mo { flex: none; background: var(--brand); color: var(--data-a); border: 1px solid var(--data-a);
    font-family: var(--font-display); font-weight: 800; font-size: 11.5px; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 9px 18px; cursor: pointer; transition: all .15s; }
  .cta-mo:hover { background: var(--data-a); color: var(--brand); }

  /* mờ tiếp phía dưới, nhạt dần cho thấy còn rất nhiều nữa */
  .khoa-duoi { margin-top: 14px; position: relative;
    -webkit-mask-image: linear-gradient(to bottom, var(--text) 0%, color-mix(in oklab,var(--text) 35%,transparent) 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--text) 0%, color-mix(in oklab,var(--text) 35%,transparent) 55%, transparent 100%); }

  /* khối dẫn trước mục lục */
  .dan-ml { text-align: center; padding: 46px 24px 34px; }
  .dan-ml-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--accent); }
  .dan-ml h2 { font-family: var(--font-display); font-weight: 800;
    font-size: clamp(27px,5vw,42px); text-transform: uppercase; line-height: 1.06;
    margin: 14px auto 0; max-width: 18ch; }
  .dan-ml p { font-size: 16.5px; line-height: 1.7; color: var(--text-2);
    max-width: 58ch; margin: 16px auto 0; }

  /* mục lục 100 mục ở đầu bài */
  .ml100 { background: var(--surface-2); border: 1px solid var(--line); padding: 34px 30px;
    margin-bottom: 30px; }
  .ml100-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent); }
  .ml100 h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px,4.2vw,34px);
    text-transform: uppercase; line-height: 1.1; margin: 10px 0 6px; }
  .ml100-phu { font-size: 15px; color: var(--text-3); font-style: italic; margin-bottom: 22px; }
  .ml100-phan { margin-bottom: 14px; break-inside: avoid; }
  /* mỗi phần đóng mở được — mục lục 100 dòng từng dài quá màn hình điện thoại */
  .ml100-h { display: flex; align-items: center; gap: 9px; padding: 12px 0;
    min-height: 44px;
    border-bottom: 1px solid var(--text); margin-bottom: 8px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; user-select: none; }
  .ml100-h span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
    color: var(--accent); }
  .ml100-h b { font-family: var(--font-display); font-weight: 800; font-size: 16px;
    text-transform: uppercase; }
  .ml100-h i { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px;
    font-style: normal; color: var(--text-3); }
  .ml100-h .mui { flex: none; width: 9px; height: 9px; flex-shrink: 0;
    margin-left: 8px; margin-right: 3px; align-self: center;
    border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
    transform: rotate(45deg); transition: transform .18s; }
  .ml100-phan.gap .ml100-h { margin-bottom: 0; border-bottom-color: var(--line); }
  .ml100-phan.gap .mui { transform: rotate(-45deg); }
  .ml100-ds { overflow: hidden; max-height: 1400px; opacity: 1;
    transition: max-height var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease); }
  .ml100-phan.gap .ml100-ds { max-height: 0; opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) {
    .ml100-ds { transition: none; } }
  .ml100 a { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0;
    min-height: 44px; align-content: center;
    text-decoration: none; border-bottom: 1px solid color-mix(in oklab,var(--data-a) 8%,transparent); }
  .ml100 a:last-child { border-bottom: none; }
  .ml100 a:hover .mt { color: var(--accent); }
  .ml100 .num { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); padding-top: 2px; }
  .ml100 .mt { font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
    text-transform: uppercase; color: var(--text); line-height: 1.25; }
  .ml100 .md2 { font-size: 13.5px; color: var(--text-2); line-height: 1.45; margin-top: 1px; }

  /* dẫn mục trong section đọc trọn */
  .dt-dan { margin-top: 24px; padding: 18px 20px; background: var(--bg);
    border: 1px solid var(--line); }
  .dt-dan-t { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
  .dt-dan a { display: flex; align-items: center; gap: 10px; padding: 10px 0;
    min-height: 44px;
    text-decoration: none; color: var(--text-2); font-size: 14.5px;
    border-bottom: 1px solid color-mix(in oklab,var(--data-a) 9%,transparent); }
  .dt-dan a:last-child { border-bottom: none; }
  .dt-dan a:hover { color: var(--text); }
  .dt-dan a u { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--accent);
    text-decoration: none; width: 26px; }
  .dt-dan a s { flex: none; margin-left: auto; font-family: var(--font-mono); font-size: 10px;
    color: var(--text-3); text-decoration: none; }

  /* tài liệu kèm theo */
  .qua-wrap { margin-top: 36px; }
  .qua-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent); padding-bottom: 8px;
    border-bottom: 1px solid var(--text); }
  .qua-item { background: var(--text-inv); border: 1px solid var(--line); padding: 26px;
    margin-top: 16px; }
  .qua-item h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px;
    text-transform: uppercase; line-height: 1.12; }
  .qua-phu { font-size: 14px; color: var(--text-3); font-style: italic; margin: 6px 0 16px; }
  .lich-g { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; }
  .lich-o { background: var(--surface-2); padding: 8px 4px; text-align: center; }
  .lich-o b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 14px; }
  .lich-o span { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--text-3); }
  .lich-o i { display: block; font-family: var(--font-mono); font-size: 8.5px; color: var(--text-3);
    font-style: normal; margin-top: 3px; }
  .lich-o u { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 12px;
    text-decoration: none; margin-top: 2px; }
  .lich-o.tot { background: color-mix(in oklab,var(--info) 14%,transparent); }
  .lich-o.tot u { color: var(--info); }
  .lich-o.xau { background: color-mix(in oklab,var(--accent) 13%,transparent); }
  .lich-o.xau u { color: var(--accent); }
  @media (max-width: 700px) { .lich-g { grid-template-columns: repeat(4,1fr) } }

  /* fact hiếm gặp */
  .fh { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; margin: 26px 0 0; }
  .fh-o { background: var(--brand); color: var(--text-inv); padding: 20px; }
  .fh-o:nth-child(even) { background: var(--brand-strong); }
  .fh-so { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px,3.8vw,36px);
    color: var(--data-a); line-height: 1; letter-spacing: -0.02em;
    display: flex; align-items: baseline; gap: 7px; }
  .fh-so em { font-family: var(--font-mono); font-weight: 500; font-size: 10px; font-style: normal;
    letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab,var(--text-inv) 60%,transparent); }
  .fh-nhan { font-family: var(--font-display); font-weight: 700; font-size: 14px;
    text-transform: uppercase; margin: 8px 0 6px; line-height: 1.2; }
  .fh-mo { font-size: 13.5px; line-height: 1.6; color: color-mix(in oklab,var(--text-inv) 82%,transparent); }
  .fh-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent); margin-top: 26px;
    padding-bottom: 8px; border-bottom: 1px solid var(--text); }

  /* infographic */
  .ig { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
  .ig-o { background: var(--surface-2); padding: 20px; }
  .ig-t { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
  .ig-hang { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
    font-size: 13px; }
  /* 34px là bề rộng đủ cho tên hành ba-bốn chữ của dự án anh em; tên thiên thể
     tiếng Việt dài gấp đôi ("MẶT TRỜI", "SAO THIÊN VƯƠNG") nên gãy hai dòng.
     Cho cột nhãn co giãn tới 96px và không xuống dòng. */
  .ig-hang b { flex: none; min-width: 96px; font-family: var(--font-display);
    font-weight: 700; text-transform: uppercase; white-space: nowrap; }
  .ig-hang > span:last-child { color: var(--text-2); }
  .ig-hang .bar { flex: 1; height: 10px; background: color-mix(in oklab,var(--text) 7%,transparent); }
  .ig-hang .bar span { display: block; height: 100%; background: var(--text-3); }
  .ig-hang.dung .bar span { background: var(--info); }
  .ig-hang.ky .bar span { background: var(--accent); }
  .ig-hang u { flex: none; width: 34px; text-align: right; font-family: var(--font-mono);
    font-size: 11px; text-decoration: none; color: var(--text-3); }
  .ig-doi { display: flex; height: 22px; margin-top: 6px; }
  .ig-doi i { display: block; background: var(--accent); }
  .ig-doi u { display: block; background: color-mix(in oklab,var(--text) 9%,transparent); flex: 1; }
  .ig-doi-l { display: flex; justify-content: space-between; font-family: var(--font-mono);
    font-size: 10px; color: var(--text-3); margin-top: 6px; }
  .ig-dv { display: flex; align-items: flex-end; gap: 3px; height: 78px; margin-top: 4px; }
  .ig-dv div { flex: 1; background: var(--text-3); position: relative; }
  .ig-dv div.now { background: var(--info); }
  .ig-dv-l { display: flex; justify-content: space-between; font-family: var(--font-mono);
    font-size: 9.5px; color: var(--text-3); margin-top: 5px; }
  /* dòng meta dưới khối: nhãn trái, giá trị phải — không có CSS thì hai span
     dính liền thành "Độ tin cậy giờGiờ sinh chính xác" */
  .ig-meta { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding-top: 9px; margin-top: 9px;
    border-top: 1px solid var(--line); font-size: 13px; }
  .ig-meta span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-3); }
  .ig-meta b { font-family: var(--font-display); font-weight: 700; text-align: right; }
  .ig-meta + .ig-meta { border-top: none; margin-top: 0; padding-top: 0; }
  .ig-nt { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 13px; }
  .ig-nt .n { flex: none; width: 46px; font-family: var(--font-display); font-weight: 700;
    text-transform: uppercase; }
  .ig-nt .tr { flex: 1; height: 10px; background: color-mix(in oklab,var(--text) 7%,transparent); }
  .ig-nt .tr i { display: block; height: 100%; background: var(--accent); }
  .ig-nt b { flex: none; width: 20px; text-align: right; font-family: var(--font-mono);
    font-size: 11px; color: var(--text-3); }
  .ig-nt-chu { font-size: 11.5px; color: var(--text-3); margin-top: 10px; }
  @media (max-width: 700px) { .fh, .ig { grid-template-columns: 1fr; } }

  /* ba lớp nền (R25) — khối mở bài, nền đêm có sao */
  .bl { background: var(--brand); color: var(--text-inv); margin-bottom: 30px;
    padding: 32px 28px 26px; position: relative; overflow: hidden; }
  /* trường sao: hai lớp gradient chấm, không ảnh, không request thêm */
  .bl::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: .5;
    background-image:
      radial-gradient(1.4px 1.4px at 12% 18%, var(--data-a) 50%, transparent 50%),
      radial-gradient(1px 1px at 78% 12%, var(--text-inv) 50%, transparent 50%),
      radial-gradient(1.2px 1.2px at 62% 42%, var(--data-a) 50%, transparent 50%),
      radial-gradient(1px 1px at 28% 62%, var(--text-inv) 50%, transparent 50%),
      radial-gradient(1.5px 1.5px at 88% 74%, var(--data-a) 50%, transparent 50%),
      radial-gradient(1px 1px at 44% 88%, var(--text-inv) 50%, transparent 50%); }
  .bl > * { position: relative; }
  /* KHỐI TỐI trong zone SÁNG — cùng loại lỗi với bìa bài (R69). `--data-a`
     là cam Son dành cho nền giấy; đặt lên nền navy của .bl thì tương phản chỉ
     3,07 với cỡ chữ 9,5–11px (đo 09/08, chuẩn AA chữ thường là 4,5). Pha sáng
     lên để giữ đúng sắc thương hiệu mà vẫn đọc được. */
  .bl-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; margin-bottom: 20px; color: var(--accent-dao); }
  .bl-o { display: flex; gap: 16px; padding: 18px 0;
    border-top: 1px solid color-mix(in oklab,var(--data-a) 22%,transparent); }
  .bl-o:first-child { border-top: none; padding-top: 0; }
  .bl-so { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
    color: var(--accent-dao); padding-top: 5px; }
  .bl-nhan { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent-dao); }
  .bl-ten { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-top: 7px;
    font-family: var(--font-display); font-weight: 800; font-size: clamp(21px,4.4vw,28px);
    text-transform: uppercase; line-height: 1.06; color: var(--text-inv); }
  .bl-ten svg { flex: none; width: 26px; height: 26px; color: var(--accent-dao); }
  .bl-phu { flex: none; font-family: var(--font-mono); font-size: 11px; color: color-mix(in oklab,var(--text-inv) 60%,transparent);
    margin: 0; font-weight: 400; text-transform: none; letter-spacing: .04em; }
  .bl-o p { font-size: 15.5px; line-height: 1.68; color: color-mix(in oklab,var(--text-inv) 88%,transparent);
    margin: 10px 0 0; }
  /* lớp chưa mở được: chữ nhạt + viền đứt, nhìn ra ngay là còn thiếu dữ kiện */
  .bl-kin .bl-ten, .bl-mo_ho .bl-ten { color: color-mix(in oklab,var(--text-inv) 50%,transparent); }
  .bl-kin .bl-ten svg, .bl-mo_ho .bl-ten svg { opacity: .45; }
  .bl-kin .bl-in, .bl-mo_ho .bl-in { padding-left: 14px; margin-left: 0; opacity: .72; }
  .bl-chot { margin-top: 22px; padding-top: 18px;
    border-top: 1px solid color-mix(in oklab,var(--data-a) 30%,transparent); font-family: var(--font-body);
    font-style: italic; font-size: 16.5px; line-height: 1.6; color: var(--accent-dao); }
  @media (max-width: 700px) { .bl { padding: 24px 18px 20px; } .bl-o { gap: 12px; } }

  /* hộp mục lục công cụ (R25) */
  .hcc { background: var(--surface-2); border: 1px solid var(--accent);
    margin-bottom: 30px; padding: 26px 26px 22px; }
  .hcc-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent); }
  .hcc h2 { font-family: var(--font-display); font-weight: 800;
    font-size: clamp(23px,4.2vw,32px); text-transform: uppercase; line-height: 1.08;
    margin: 10px 0 6px; }
  .hcc-phu { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 0 0 16px; }
  .hcc-ds { display: grid; gap: 0; }
  .hcc-ds a { display: block; padding: 12px 0; background: transparent;
    text-decoration: none; color: var(--text);
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .hcc-ds a:last-child { border-bottom: 0; }
  .hcc-ds a b { display: flex; align-items: baseline; gap: 8px;
    font-family: var(--font-display); font-weight: 700; font-size: 15.5px; }
  .hcc-so { flex: none; font-family: var(--font-mono); font-size: 12px;
    font-weight: 400; color: var(--text-3); }
  .hcc-ds a span { display: block; font-size: 13.5px; color: var(--text-3);
    margin-top: 2px; }
  @media (max-width: 700px) { .hcc { padding: 20px 16px 16px; } }

  /* biểu đồ trong bài (R25) — trước đây chỉ có override trong media query
     mà không có style nền, nên mọi biểu đồ rơi về mặc định trình duyệt */
  .chart { margin: 26px 0; background: var(--surface-2);
    border: 1px solid var(--line); padding: 18px 18px 16px; }
  .chart figcaption { display: block; margin-bottom: 14px; }
  .chart .c-title { display: block; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
  .chart .c-note { display: block; font-size: 13.5px; line-height: 1.55;
    color: var(--text-3); margin-top: 6px; }
  /* CHỈ biểu đồ mới giãn full width. Glyph là svg inline nằm trong ô bảng —
     quy tắc width:100% từng phóng nó thành khối đen che kín cả biểu đồ. */
  .chart > svg { display: block; width: 100%; height: auto; }
  .chart svg.glyph { display: inline-block; width: 1.15em; height: 1.15em;
    vertical-align: -0.18em; }
  .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  .tbl th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-3); text-align: left;
    padding: 9px 10px; border-bottom: 1px solid var(--line); font-weight: 400; }
  .tbl td { padding: 10px; border-bottom: 1px solid var(--line);
    color: var(--text); vertical-align: middle; }
  .tbl tr:last-child td { border-bottom: none; }
  .tbl .t-gz { font-family: var(--font-display); font-weight: 700; font-size: 16px; }

  /* ACCENT TRÊN ĐẢO TỐI — một token, đừng pha tay ở từng chỗ.
     Bài có mấy khối nền navy nằm giữa zone giấy (.bl, .md, .screen-cover,
     dải .gd-dai). Cam Son `--data-a` là accent cho NỀN GIẤY; đặt lên navy thì
     tương phản 3,07 với cỡ chữ 8,5–11px, dưới chuẩn AA 4,5 (đo 09/08 bằng
     `tools/soi_giao_dien.mjs`). Pha sáng lên giữ đúng sắc mà đọc được.
     Khai ở container để mọi con cháu tự hưởng, kể cả khối thêm sau này. */
  .bl, .md, .screen-cover, .gd-dai {
    --accent-dao: color-mix(in oklab, var(--data-a), var(--text-inv) 55%); }

  /* bánh xe bản đồ sao (R24) */
  .bx { background: var(--surface-2); border: 1px solid var(--line);
    margin-bottom: 30px; padding: 28px 28px 22px; }
  .bx-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
  .bx-svg { max-width: 640px; margin: 0 auto; }
  .bx-svg .banh-xe { margin: 0; }
  .bx-svg svg { display: block; width: 100%; height: auto; }
  .bx-chu { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--line); }
  .bx-chu div { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.6;
    color: var(--text-2); }
  .bx-chu u { flex: none; text-decoration: none; font-family: var(--font-display);
    font-weight: 800; color: var(--accent); }
  /* nút đổi giữa "chỉ bánh xe" và "cả bảng số" — chỉ hiện trên khung hẹp,
     JS gỡ .hidden (xem ganBanhXe) */
  .bx-doi { display: block; margin: 10px auto 0; background: none;
    border: 1px solid var(--line); border-radius: 999px;
    padding: 6px 14px; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.06em; color: var(--text-2); cursor: pointer; }
  @media (max-width: 700px) { .bx { padding: 20px 16px 16px; }
    /* bìa hẹp: bánh xe được cắt nên cho nó ăn hết bề ngang khối */
    .bx-svg { margin: 0 -4px; } }

  /* CTA cuối bài */
  /* khối góp ý cuối bài */
  .gy { border: 1px solid var(--line); background: var(--bg); padding: 22px 20px;
    margin-top: 26px; }
  .gy-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent); }
  .gy h4 { font-family: var(--font-display); font-weight: 800; font-size: 17px;
    text-transform: uppercase; margin: 8px 0 12px; }
  .gy-chon { display: flex; gap: 8px; flex-wrap: wrap; }
  .gy-chon button { background: var(--text-inv); border: 1px solid var(--line); padding: 9px 14px;
    font-family: var(--font-body); font-size: 14px; cursor: pointer; color: var(--text); }
  .gy-chon button[aria-pressed="true"] { background: var(--brand); color: var(--data-a);
    border-color: var(--brand); }
  .gy-ta { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 10px 12px;
    border: 1px solid var(--line); font-family: var(--font-body); font-size: 14.5px;
    color: var(--text); background: var(--text-inv); resize: vertical; }
  .gy .btn { margin-top: 10px; }
  .gy-nho { font-size: 12px; color: var(--text-3); margin-top: 8px; }
  .gy-cam { font-size: 15px; font-style: italic; color: var(--text-2); }
  .ft-bai { margin-top: 34px; padding: 22px 0 28px; border-top: 1px solid var(--line-soft); }
  .ft-bai-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
  .ft-bai-in a { color: var(--text-2); text-decoration: none; }
  .ft-bai-in a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
  .cta-cuoi { background: var(--brand); color: var(--text-inv); padding: 40px 34px;
    margin-top: 34px; text-align: center; border: 1px solid var(--data-a); }
  .cta-cuoi h3 { font-family: var(--font-display); font-weight: 800;
    font-size: clamp(24px,4.4vw,34px); text-transform: uppercase; line-height: 1.1; }
  .cta-cuoi p { font-size: 16px; color: color-mix(in oklab,var(--text-inv) 86%,transparent); max-width: 60ch;
    margin: 14px auto 0; line-height: 1.65; }
  .cta-cuoi .btn { margin-top: 22px; }
  .cta-cuoi .nho { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: color-mix(in oklab,var(--text-inv) 50%,transparent); margin-top: 14px; }

  /* section đọc trọn — free, không khoá; viền son cả khối (không rail trái) */
  .dt { background: var(--text-inv); border: 1px solid var(--accent); border-radius: var(--r-3);
    padding: 38px 34px; margin: 0 0 30px; }
  .dt-kick { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
  .dt-kick u { flex: none; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); text-decoration: none; }
  .dt h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(25px,4.4vw,36px);
    text-transform: uppercase; line-height: 1.1; margin: 12px 0 18px; }
  .dt-anh { margin: 16px 0 4px; }
  .dt-anh img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
  .dt p { font-size: 17px; line-height: 1.75; color: var(--text); margin-bottom: 14px; }
  .dt p:first-of-type { font-size: 18.5px; color: var(--text); }
  .dt-hai { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
  .dt-hai-t { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
  .dt-ch { display: flex; gap: 14px; margin-bottom: 16px; }
  .dt-ch b { flex: none; font-family: var(--font-display); font-weight: 800; font-size: 26px;
    color: color-mix(in oklab,var(--data-a) 40%,transparent); line-height: 1; width: 28px; }
  .dt-ch div strong { display: block; font-family: var(--font-display); font-weight: 700;
    font-size: 16.5px; text-transform: uppercase; margin-bottom: 4px; }
  .dt-ch div span { font-size: 15px; line-height: 1.65; color: var(--text-2); }
  @media (max-width: 700px) { .dt { padding: 26px 22px; } }

  /* phần mở đầu */
  .md { background: var(--brand); color: var(--text-inv); padding: 40px 34px; margin-bottom: 30px; }
  .md .kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--accent-dao); }
  .md h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px,4.6vw,38px);
    text-transform: uppercase; line-height: 1.08; margin: 12px 0 16px; color: var(--text-inv); }
  .md p { font-size: 16.5px; line-height: 1.7; color: color-mix(in oklab,var(--text-inv) 90%,transparent); margin-bottom: 12px; }
  .md-tru { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin: 20px 0 4px; }
  .md-tru div { background: color-mix(in oklab,var(--text-inv) 7%,transparent); padding: 12px 13px;
    display: flex; flex-direction: column; gap: 3px; color: var(--text-inv); }
  .md-tru .l { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent-dao); }
  .md-tru .g { font-family: var(--font-display); font-weight: 800; font-size: 19px;
    text-transform: uppercase; line-height: 1.1; color: var(--text-inv); }
  .md-tru .h { font-family: var(--font-mono); font-size: 9.5px; color: color-mix(in oklab,var(--text-inv) 55%,transparent); }
  .md-nhan { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin: 22px 0 6px; }
  .md-nhan div { background: color-mix(in oklab,var(--text-inv) 7%,transparent); padding: 12px 13px; color: var(--text-inv); }
  .md-nhan .l { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent-dao); }
  .md-nhan .v { font-family: var(--font-display); font-weight: 800; font-size: 15px;
    margin-top: 4px; line-height: 1.15; color: var(--text-inv); }
  .md-nhan .s { font-family: var(--font-mono); font-size: 10px; color: color-mix(in oklab,var(--text-inv) 60%,transparent); margin-top: 2px; }
  .md-chi { margin-top: 24px; padding-top: 18px; border-top: 1px solid color-mix(in oklab,var(--data-a) 30%,transparent); }
  .md-chi-t { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--data-a); margin-bottom: 12px; }
  .md-chi a { display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
    text-decoration: none; color: var(--text-inv);
    border-bottom: 1px solid color-mix(in oklab,var(--data-a) 16%,transparent); }
  .md-chi a:last-child { border-bottom: none; }
  .md-chi a b { font-family: var(--font-display); font-weight: 800; font-size: 16px;
    text-transform: uppercase; }
  .md-chi a span { font-family: var(--font-mono); font-size: 10.5px; color: var(--data-a);
    margin-left: auto; flex: none; }
  /* chân dung bản thể Big Three — khối sáng ngay dưới khối bản đồ sao nền xanh */
  .hm { background: var(--surface-2); margin-bottom: 30px; border: 1px solid var(--line); }
  /* Ảnh là DẢI TRÀN NGANG trên đầu thẻ, không phải cột bên trái.
     Bản cột 300px trước đây: ảnh vuông căn giữa dọc trong một ô lưới cao bằng
     cột chữ, nên ở khổ rộng nó nổi lơ lửng lệch khỏi mép thẻ, nhìn như lỗi
     dựng trang. Dải ngang thì mọi khổ đều khít mép — và đúng nhịp thẻ tạp chí. */
  .hm-in { display: block; }
  .hm-anh { margin: 0; background: var(--bg);
    border-bottom: 1px solid var(--line); }
  /* Bộ quang cảnh `cung-*` là 1038×808 (tỷ lệ 1,285); cắt 16/7 = 2,286 là mất
     44% chiều cao. Nhánh này chỉ chạy khi thiếu chân dung `cd-*`, nhưng để sai
     tỷ lệ ở đường dự phòng thì lúc nó chạy sẽ hỏng mà không ai đang nhìn. */
  .hm-anh img { display: block; width: 100%; height: auto;
    aspect-ratio: 1038/808; object-fit: cover; }
  /* Chân dung `cd-*` là ảnh VUÔNG có mặt người. Dải 16/7 cắt mất mặt, nên bản
     chân dung quay lại bố cục hai cột — nhưng khác lần trước ở chỗ ảnh KÉO
     CĂNG hết chiều cao thẻ (`align-items: stretch` + `height: 100%`) thay vì
     căn giữa dọc trong ô lưới; đó mới là lý do bản cột cũ nhìn như lỗi dựng. */
  .hm-in.hm-cd { display: grid; grid-template-columns: 300px 1fr;
    align-items: stretch; }
  .hm-cd .hm-anh { height: 100%; border-bottom: 0;
    border-right: 1px solid var(--line); }
  .hm-cd .hm-anh img { height: 100%; aspect-ratio: auto;
    object-position: center 18%; }
  .hm-noi { padding: 32px 30px; }
  .hm-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--accent); }
  .hm-ten { font-family: var(--font-display); font-weight: 800; font-size: clamp(27px,4.4vw,38px);
    text-transform: uppercase; line-height: 1.06; margin: 10px 0 0; }
  .hm-phu { font-family: var(--font-body); font-style: italic; font-size: 16px;
    color: var(--text-2); margin-top: 6px; }
  .hm-noi p { font-size: 16.5px; line-height: 1.7; color: var(--text-2); margin-top: 16px; }
  .hm-neo { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
    font-size: 15.5px; line-height: 1.65; color: var(--text); }
  .hm-net { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px;
    border-top: 1px solid var(--line); }
  .hm-net div { background: var(--bg); padding: 14px 16px; }
  .hm-net .l { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--text-3); }
  .hm-net .v { font-family: var(--font-display); font-weight: 800; font-size: 15px;
    margin-top: 4px; line-height: 1.15; }
  .hm-hiem { font-size: 13.5px; line-height: 1.65; color: var(--text-3);
    padding: 14px 30px 18px; border-top: 1px solid var(--line); }

  @media (max-width: 700px) {
    .md { padding: 28px 22px; }
    .md-nhan, .md-tru { grid-template-columns: 1fr 1fr; }
    .stick-in { padding: 8px 14px; gap: 10px; }
    .stick-p { display: none; }
    .fab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: 12px; }
    .hm-anh img { aspect-ratio: 1038/808; }
    .hm-in.hm-cd { display: block; }
    .hm-cd .hm-anh { height: auto; border-right: 0;
      border-bottom: 1px solid var(--line); }
    .hm-cd .hm-anh img { height: auto; aspect-ratio: 1/1; }
    .hm-noi { padding: 24px 22px; }
    .hm-net { grid-template-columns: 1fr 1fr; }
    .hm-hiem { padding: 14px 22px 18px; }
  }
}

  /* thẻ độ tin cậy giờ sinh (R27) — palette zone: ok = đủ giờ · warn = thiếu */
  .tq { background: var(--ok-subtle); border: 1px solid var(--line);
    border-top: 2px solid var(--ok);
    padding: 18px 20px; margin-bottom: 30px; border-radius: var(--r-3, 6px); }
  .tq-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ok); }
  .tq-nhan { font-family: var(--font-display); font-weight: 800; font-size: 18px;
    text-transform: uppercase; margin-top: 6px; }
  .tq-moc { font-size: 15px; color: var(--text-2); margin: 8px 0 0; }
  .tq-moc strong { font-family: var(--font-display); font-weight: 700; }
  .tq .moc-list { margin: 10px 0 0; padding-left: 18px; }
  .tq .moc-list li { font-size: 14.5px; line-height: 1.6; margin-bottom: 5px; }
  .tq .note { font-size: 13.5px; line-height: 1.6; color: var(--text-3);
    margin: 10px 0 0; }
  .tq .cta-solar { font-size: 14.5px; line-height: 1.65; color: var(--text-2);
    margin-top: 10px; }
  /* thiếu/ước lượng giờ — nền warn, không rail trái accent (design §4.1) */
  .tq-thieu { background: var(--warn-subtle); border-top-color: var(--warn); }
  .tq-thieu .tq-k { color: var(--warn); }
  @media (min-width: 700px) { .tq { padding: 24px 28px; } }

  /* ĐỆM GIÃN THEO KHỔ (R27).
     Mọi khối nội dung đang giữ đúng một mức đệm cỡ điện thoại (16–30px), nên
     ở khổ rộng — cột đọc 676px — chữ nằm sát mép hộp và khối trông chật.
     Đo được: chart 18px, bx/hcc 28px, hm 30px trên hộp 676px. Nới ở đây một
     chỗ thay vì sửa rải rác từng khối. */
  @media (min-width: 700px) {
    .chart { padding: 26px 30px 24px; }
    .bx { padding: 36px 36px 28px; }
    .hcc { padding: 34px 36px 30px; }
    .bl { padding: 40px 36px 32px; }
    .hm-noi { padding: 40px 40px; }
    .hm-hiem { padding: 16px 40px 20px; }
    .hm-net div { padding: 16px 20px; }
    .dt { padding: 44px 42px; }
    .ml100 { padding: 40px 38px; }
    .faq-box .faq-h { padding: 24px 26px 20px; }
    .faq-box summary { padding-left: 26px; padding-right: 26px; }
    .faq-box .faq-tl, .faq-box .tl { padding-left: 26px; padding-right: 26px; }
  }
  /* hàng tiêu đề mục lục: 9/7px làm hai dòng chữ dính vào gạch chân */
  .ml100-h { padding-top: 12px; padding-bottom: 10px; }


/* ══ SÁU CÔNG CỤ TƯƠNG TÁC (cc-) ══
   Từ 12/08: tầng chưa mua HIỆN đủ công cụ nhưng khoá tương tác (.cc-khoa) —
   mở khoá bài mới dùng. Người đã trả tiền không bao giờ thấy lớp khoá. */
.cc-box { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-3); margin: 26px 0 30px; scroll-margin-top: 70px; }
.cc-h { padding: 18px 18px 0; }
.cc-kick { display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.cc-h h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.1;
  font-size: clamp(19px, 3.6vw, 25px); text-transform: uppercase;
  margin: 9px 0 0; color: var(--text); }
.cc-huong { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 7px 0 0; }
.cc-b { padding: 15px 18px 18px; }

/* điều khiển */
.cc-sl { -webkit-appearance: none; appearance: none; width: 100%; height: 40px;
  background: transparent; margin: 4px 0 2px; cursor: pointer; }
.cc-sl::-webkit-slider-runnable-track { height: 5px; background: var(--bg);
  border: 1px solid var(--line); }
.cc-sl::-moz-range-track { height: 5px; background: var(--bg);
  border: 1px solid var(--line); }
.cc-sl::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -11px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--data-a); }
.cc-sl::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--data-a); }
.cc-sl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-truc { display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 4px; }
.cc-nut { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-nut button { min-height: 40px; padding: 8px 11px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.25; text-align: left; }
.cc-nut button:hover { border-color: var(--accent); }
.cc-nut button[aria-pressed="true"] { background: var(--brand); color: var(--text-inv);
  border-color: var(--brand); }
/* Nút đang chọn có nền navy (--brand); cam Son trên nền đó đo được 3,07
   (09/08). Cùng lỗi "accent nền giấy đặt lên đảo tối" như khối ba lớp
   và khối mở đầu trong bài. */
.cc-nut button[aria-pressed="true"] .cc-kh {
  color: color-mix(in oklab, var(--data-a), var(--text-inv) 55%); }
.cc-kh { display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--accent); margin-right: 6px; }
.cc-nut-nha button { flex: 1 1 60px; min-width: 60px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.cc-nut-nha button { min-height: 50px; }
.cc-nut-nha button i { display: block; font-family: var(--font-mono); font-style: normal;
  font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-3); margin-top: 3px; }
.cc-nut-nha + .cc-huong { margin: 9px 0 0; font-size: 12.5px; }
.cc-nut-nha button[aria-pressed="true"] i {
  color: color-mix(in oklab, var(--data-a), var(--text-inv) 55%); }
.cc-chon { display: grid; gap: 10px; }
.cc-chon label { display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: 4px; }
.cc-chon select { width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 15px; }
.cc-chon select:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

/* kết quả */
.cc-kq { margin-top: 14px; padding: 14px; background: var(--bg);
  border: 1px solid var(--line); }
.cc-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35em 0.5em;
  font-family: var(--font-display); font-weight: 800; line-height: 1.05;
  font-size: clamp(26px, 6vw, 38px); text-transform: uppercase; color: var(--text); }
.cc-big i { font-family: var(--font-mono); font-style: normal; font-weight: 400;
  font-size: 12px; letter-spacing: 0.1em; text-transform: none;
  color: var(--text-3); margin-left: 0; }
.cc-vd { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin-top: 8px; }
.cc-vd b { color: var(--text); }
.cc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); }
.cc-meta b { color: var(--text); font-weight: 600; }
.cc-ds { margin-top: 10px; max-height: 320px; overflow-y: auto; }
.cc-ds > div { display: flex; align-items: baseline; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.cc-ds > div:last-child { border-bottom: 0; }
.cc-ds .cc-orb { flex: none; margin-left: auto; font-family: var(--font-mono);
  font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.cc-the { flex: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 5px; border: 1px solid var(--line); }
.cc-the-cang { color: var(--accent); border-color: var(--accent); }
.cc-the-thuan { color: var(--brand); border-color: var(--brand); }
.cc-the-don { color: var(--text-3); }
.cc-rong { font-size: 14px; color: var(--text-3); font-style: italic; margin-top: 8px; }
.cc-ghi { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.cc-moi { margin-top: 12px; padding: 11px 13px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: 14px; line-height: 1.55;
  color: var(--text-2); }
.cc-dai { display: flex; gap: 2px; margin-top: 10px; }
.cc-dai span { flex: 1; height: 7px; background: var(--line); }
.cc-dai span.cc-on { background: var(--accent); }
.cc-dai span.cc-qua { background: var(--brand); }

/* ── Lớp khoá công cụ ở bản đọc trước (12/08, chỉnh blur theo ý Thái) ──
   Tên + mô tả công cụ giữ RÕ — khách phải đọc được "có công cụ gì"; phần
   thân (điều khiển + kết quả) BLUR — thấy rõ dáng đồ thật nhưng không đọc
   được số. Trả tiền mở bài là hết blur, bấm được. */
.cc-khoa { position: relative; margin: 26px 0 30px; }
.cc-khoa .cc-box { margin: 0; }
.cc-khoa-ruot, .cc-khoa-ruot * { pointer-events: none; user-select: none; }
.cc-khoa-ruot .cc-b { filter: blur(4.5px) saturate(.75); }
/* blur là lớp che duy nhất của THÂN tool — đừng phủ gradient đè lên nữa,
   che hai lớp thì "đồ thật" thành mảng xám vô nghĩa. Gradient chỉ giữ ở
   1/4 đáy để hộp mời + nút nổi lên trên nội dung blur. */
.cc-khoa-phu { position: absolute; inset: 0; display: flex;
  align-items: flex-end; justify-content: center; padding: 16px;
  background: linear-gradient(to bottom, transparent 55%,
    color-mix(in oklab, var(--bg) 78%, transparent) 82%, var(--bg) 100%); }
.cc-khoa-hop { text-align: center; max-width: 42ch; }
.cc-khoa-kick { display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px; }
.cc-khoa-hop p { font-size: 14px; line-height: 1.55; color: var(--text-2);
  margin: 0 0 12px; }
@media (max-width: 420px) {
  .cc-h { padding: 15px 14px 0; } .cc-b { padding: 13px 14px 15px; }
  .cc-nut button { font-size: 13px; padding: 8px 9px; }
}

/* ══ KHỐI "BẠN ĐANG VƯỚNG Ở ĐÂU?" (faq-) — mục lục theo nhu cầu ══ */
.faq-box { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-3); margin: 26px 0 30px; scroll-margin-top: 70px; }
.faq-h { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.faq-k { display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.faq-h h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.1;
  font-size: clamp(19px, 3.6vw, 25px); text-transform: uppercase;
  margin: 9px 0 0; color: var(--text); }
.faq-h p { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 7px 0 0; }

.faq-i { border-bottom: 1px solid var(--line, var(--line)); }
.faq-i:last-child { border-bottom: 0; }
.faq-i > summary { display: flex; align-items: flex-start; gap: 12px;
  min-height: 48px; padding: 13px 16px; cursor: pointer; list-style: none;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text); }
.faq-i > summary::-webkit-details-marker { display: none; }
.faq-i > summary::marker { content: ""; }
.faq-i > summary:hover { color: var(--accent); }
.faq-i > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq-q { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
/* dấu cộng vẽ bằng hai thanh — font nhúng chỉ có subset latin + vietnamese
   nên mọi glyph mũi tên/dấu trừ dài đều rơi thành ô vuông trên serverless */
.faq-du { flex: none; width: 15px; height: 15px; position: relative;
  margin-top: 5px; }
.faq-du::before, .faq-du::after { content: ""; position: absolute;
  left: 0; right: 0; top: 7px; height: 1px; background: var(--accent);
  transition: transform var(--dur-fast, 120ms) ease; }
.faq-du::after { transform: rotate(90deg); }
.faq-i[open] > summary { color: var(--brand); }
.faq-i[open] .faq-du::after { transform: rotate(0deg); }

.faq-tl { padding: 0 16px 15px; }
.faq-tl-n { display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: 7px; }
.faq-lk { padding: 12px 11px; margin-top: 6px; min-height: 44px;
  background: var(--bg); border: 1px solid var(--line, var(--line));
  color: var(--text);
  font-family: var(--font-body); font-size: 14px; line-height: 1.45;
  text-decoration: none; overflow-wrap: break-word;
  display: flex; align-items: center; }
.faq-lk:first-of-type { margin-top: 0; }
.faq-lk:hover { border-color: var(--accent); color: var(--accent); }
.faq-lk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.faq-so { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--accent); margin-right: 7px; white-space: nowrap; }

/* nháy một nhịp ở mục vừa nhảy tới — không dùng filter (mobile giật).
   scroll-margin-top để mục đích không dính sát mép trên sau khi cuộn; class
   được gắn TRƯỚC lệnh cuộn nên khoảng chừa này có hiệu lực ngay nhịp đó. */
.faq-den { background: color-mix(in oklab, var(--surface), var(--accent) 4%);
  scroll-margin-top: 18px; }

@media (min-width: 560px) {
  .faq-h { padding: 22px 22px 16px; }
  .faq-i > summary { padding: 14px 22px; font-size: 16px; }
  .faq-tl { padding: 0 22px 17px; }
}

/* ── dải thông báo dính ─────────────────────────────────────────────────── */
/* DÍNH SÁT ĐÁY THANH TIÊU ĐỀ, không chừa khe.
   `top: 56px` của bản trước là con số đoán; thanh thật cao ~48px trên điện
   thoại nên khi cuộn, nội dung trang chạy qua khe giữa hai thứ đang dính —
   nhìn ra ngay là "có khoảng trống" (Duc báo 09/08). `--tb-cao` do
   gdDoCaoThanh() đo từ thanh THẬT và cập nhật khi đổi cỡ; 56px chỉ còn là
   đường lui cho lúc JS chưa kịp chạy. z-index thấp hơn thanh (50) để dải
   trượt xuống DƯỚI thanh chứ không đè lên. */
.gd-dai { position: sticky; top: var(--tb-cao, 56px); z-index: 40; display: flex;
  align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 22px;
  background: var(--brand); color: var(--text-inv);
  border-bottom: 1px solid var(--accent); }
.gd-dai-anh { flex: none; width: 38px; height: 38px; object-fit: cover;
  border: 1px solid var(--accent); }
.gd-dai-ph { flex: none; width: 38px; height: 38px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--accent);
  background: color-mix(in oklab, var(--text-inv) 8%, transparent); color: var(--text-inv); font-size: 16px;
  line-height: 1; opacity: .85; }
.gd-dai-chu { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.gd-dai-chu b { color: var(--accent-dao, var(--data-a)); }
/* Chữ navy trên nền cam Son đo được 3,07 — dưới chuẩn AA (09/08). Chữ sáng
   trên chính nền cam đó lên 4,9, và nút vẫn là mảng cam như thiết kế. */
.gd-dai-nut { flex: none; min-height: 44px; padding: 10px 14px;
  background: var(--data-a); color: var(--text-inv); border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase; }
.gd-dai-x { flex: none; width: 44px; height: 44px; background: transparent;
  border: none; color: var(--text-inv); opacity: .6; font-size: 20px;
  line-height: 1; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; }
.gd-dai-x:hover { opacity: 1; }
/* Câu đủ cho khổ rộng, câu gọn cho điện thoại. Câu đủ dài 92 ký tự nên ở khung
   375px nó ăn 5 dòng — dày bằng một khối nội dung chứ không còn là thanh
   thông báo nữa. */
.gd-gon { display: none; }
@media (max-width: 560px) {
  .gd-du { display: none; }
  .gd-gon { display: inline; }
  .gd-dai { gap: 9px; padding: 9px 11px; }
  .gd-dai-anh { width: 32px; height: 32px; }
  .gd-dai-chu { font-size: 12.5px; }
  .gd-dai-nut { padding: 10px 11px; font-size: 11.5px; }
}

/* ── lớp phủ ────────────────────────────────────────────────────────────── */
.gd-lop { position: fixed; inset: 0; z-index: 140; display: flex;
  align-items: flex-end; justify-content: center;
  background: color-mix(in oklab,var(--bg) 72%,transparent); }
.gd-hop { position: relative; width: min(460px, 100%);
  max-height: 92vh; overflow-y: auto; background: var(--bg);
  border-top: 3px solid var(--accent); }
@media (min-width: 620px) {
  .gd-lop { align-items: center; }
  .gd-hop { border: 1px solid var(--accent); max-height: 88vh; width: min(560px, 100%); }
}
/* VỪA KHÍT LỚP PHỦ, KHÔNG CUỘN TRONG CUỘN.
   Thẻ ứng viên vốn cao hơn 92vh nên lớp phủ mọc thanh cuộn riêng: người đọc
   cuộn trong một khung nhỏ nằm giữa trang cũng cuộn được — Duc gọi đúng là khó
   chịu. Thẻ chỉ có bốn khối, ép vừa được: ảnh co theo chiều cao còn lại thay vì
   giữ tỷ lệ cứng, và danh sách "vì sao hợp" là khối duy nhất được phép co.
   `min-height:0` bắt buộc — con của flex mặc định không co dưới nội dung. */
.gd-hop { display: flex; flex-direction: column; overflow: hidden; }
.gd-than { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  gap: 2px; overflow: hidden; }
/* HIỆN TRỌN ẢNH, đừng cắt. `object-fit: cover` + chiều cao ép làm mất nửa
   khuôn mặt — mà chân dung chính là thứ giữ mắt người xem ở lại thẻ. Dùng
   `contain` để thấy đủ khung, nền tối lấp phần thừa; ảnh vẫn co theo chiều cao
   còn lại nên lớp phủ không sinh thanh cuộn. */
.gd-anh, .gd-anh.gd-cd { flex: 1 1 auto; min-height: 0; aspect-ratio: auto;
  height: auto; max-height: 46vh; object-fit: contain; object-position: center;
  background: var(--surface-inv); }
.gd-vs { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.gd-nut, .gd-mot-chieu { flex: none; }
/* × nằm GỌN TRONG dải nhãn tối, không lơ lửng ra vùng giấy sáng bên dưới
   (chữ trắng trên nền trắng thì coi như không có nút). */
.gd-x { position: absolute; top: 0; right: 0; width: 44px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-inv); font-size: 24px;
  line-height: 1; cursor: pointer; z-index: 2; }
.gd-x:hover { color: var(--data-a); }
.gd-nhan { padding: 11px 52px 11px 14px; background: var(--brand);
  color: var(--data-a); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; }
.gd-than { padding: 20px 20px 22px; }

/* ── thẻ ứng viên ───────────────────────────────────────────────────────── */
.gd-tien { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); }
.gd-tien-thanh { flex: 1; height: 3px; background: var(--line); }
.gd-tien-thanh i { display: block; height: 100%; background: var(--accent); }
.gd-anh { display: block; width: 100%; aspect-ratio: 16/8; object-fit: cover;
  border: 1px solid var(--line); margin-bottom: 14px; }
/* Chân dung `cd-*` là ảnh VUÔNG và có mặt người: cắt 16/8 thì mất luôn khuôn
   mặt. Cắt 5/4 và neo khung lên phần trên (`center 20%`) — chỗ mắt nằm. */
.gd-anh.gd-cd { aspect-ratio: 5/4; object-position: center 20%; }
.gd-diem { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.gd-diem b { font-family: var(--font-display); font-weight: 800; font-size: 40px;
  line-height: 1; color: var(--accent); }
.gd-diem span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); }
.gd-diem em { font-family: var(--font-display); font-weight: 700; font-size: 14px;
  font-style: normal; text-transform: uppercase; margin-left: auto; }
.gd-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  margin-bottom: 14px; }
.gd-bo { display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-bottom: 14px; }
.gd-bo div { display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  background: var(--surface-2); font-size: 13.5px; }
.gd-bo .gd-l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); min-width: 74px; }
.gd-bo .gd-v { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.gd-bo .gd-e { margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-3); }
.gd-bo svg { flex: none; width: 16px; height: 16px; color: var(--accent); }
.gd-vs-t { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.gd-vs li { list-style: none; position: relative; padding-left: 16px;
  margin-bottom: 9px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.gd-vs li::before { content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--accent); }
.gd-vs { margin: 0 0 6px; padding: 0; }

/* ── nút hành động ──────────────────────────────────────────────────────── */
.gd-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 16px; }
.gd-nut button { min-height: 46px; cursor: pointer; font-family: var(--font-display);
  font-weight: 700; font-size: 13.5px; letter-spacing: .05em;
  text-transform: uppercase; }
.gd-bo-qua { background: transparent; color: var(--text-2);
  border: 1px solid var(--line); }
.gd-bo-qua:hover { border-color: var(--text-2); }
.gd-ket { background: var(--accent); color: var(--text-inv); border: none; }
.gd-ket:hover { opacity: .9; }
.gd-ket[disabled] { opacity: .45; cursor: not-allowed; }
.gd-mot-chieu { font-size: 12px; line-height: 1.5; color: var(--text-3);
  margin-top: 10px; }

/* ── hộp soạn ───────────────────────────────────────────────────────────── */

/* ── xác nhận + màn kết ─────────────────────────────────────────────────── */
.gd-xong { text-align: center; padding: 8px 0 4px; }
.gd-xong h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px;
  text-transform: uppercase; margin: 0 0 10px; }
.gd-xong p { font-size: 14.5px; line-height: 1.65; color: var(--text-2);
  margin: 0 0 12px; }
.gd-tiep { width: 100%; min-height: 46px; margin-top: 6px; cursor: pointer;
  background: var(--brand); color: var(--text-inv); border: none;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  letter-spacing: .05em; text-transform: uppercase; }

/* ══ KHỐI FACT INFOGRAPHIC (fs-) ══ */
.fs-wrap { margin: 30px 0 34px; }
.fs-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.fs-wrap > h2 { font-family: var(--font-display); font-weight: 800; line-height: 1.08;
  font-size: clamp(22px, 5.2vw, 31px); margin: 0 0 10px; color: var(--text); }
.fs-dan { font-size: 15px; line-height: 1.62; color: var(--text-2);
  margin: 0 0 20px; max-width: 62ch; }

.fs-ds { display: grid; gap: 16px; }

.fs-the { background: var(--bg); border: 1px solid var(--line);
  overflow: hidden; }
.fs-the.fs-kin { background: var(--surface-2); }

.fs-anh { margin: 0; display: block; background: var(--surface-2); }
.fs-anh img { display: block; width: 100%; height: 104px; object-fit: cover;
  object-position: center 45%; }

.fs-in { padding: 15px 15px 17px; display: grid; gap: 13px; }

.fs-dau { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fs-stt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-3); }
.fs-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); }

.fs-so { font-family: var(--font-display); font-weight: 800; line-height: 0.95;
  font-size: clamp(34px, 9vw, 46px); color: var(--text);
  letter-spacing: -0.02em; margin: 2px 0 0; word-break: break-word; }
.fs-dv { display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: 11px; letter-spacing: 0.08em; color: var(--text-3);
  margin-top: 6px; text-transform: none; }
.fs-kin .fs-so { color: var(--text-3); }

.fs-tit { font-family: var(--font-display); font-weight: 700; line-height: 1.2;
  font-size: clamp(16px, 3.9vw, 19px); color: var(--text); margin: 0; }

.fs-hinh { margin: 0; padding: 12px 6px 10px; background: var(--bg);
  border: 1px solid var(--line, var(--line)); }
.fs-svg { display: block; width: 100%; height: auto; max-width: 400px;
  margin: 0 auto; }
.fs-chu { display: block; font-family: var(--font-mono); font-size: 10px;
  line-height: 1.5; letter-spacing: 0.03em; color: var(--text-3);
  margin-top: 9px; text-align: center; padding: 0 4px; }

.fs-sau { font-size: 14.5px; line-height: 1.66; color: var(--text-2); margin: 0; }
.fs-sau b { color: var(--text); }

/* thẻ 3–6 ở bản chưa mua: lời đọc nghĩa đã bị server rút, chỗ đó là lời mời.
   Không blur giả — không có gì phía sau để blur, và blur giả là nói dối. */
.fs-khoa { border-top: 1px dashed var(--line); padding-top: 12px; }
.fs-khoa p { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0 0 11px; }
.fs-khoa p b { color: var(--text); }
.fs-mo { min-height: 40px; padding: 9px 16px; cursor: pointer;
  background: var(--brand); color: var(--text-inv);
  border: 1px solid var(--brand); font-family: var(--font-body);
  font-size: 14px; font-weight: 600; }
.fs-mo:hover { background: var(--brand-strong, var(--brand)); }

.fs-chan { margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line); font-size: 14px; line-height: 1.62;
  color: var(--text-2); max-width: 62ch; }

/* hiện dần — chỉ chạy khi ganFactSao() đã gắn, mặc định là hiện sẵn */
.fs-the.fs-anim { opacity: 0; transform: translateY(10px); }
.fs-the.fs-anim.fs-vao { opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .fs-the.fs-anim { opacity: 1; transform: none; }
  .fs-the.fs-anim.fs-vao { transition: none; }
}
/* Bản in không cuộn nên observer không bao giờ chạy — thẻ dưới nếp gấp sẽ in
   ra trắng trơn nếu quên dòng này. */
@media print { .fs-the.fs-anim { opacity: 1; transform: none; } }

@media (min-width: 760px) {
  .fs-in { grid-template-columns: minmax(0, 1fr) 344px; gap: 14px 22px;
    align-items: start; padding: 20px 20px 22px; }
  .fs-dau, .fs-so, .fs-tit, .fs-sau { grid-column: 1; }
  .fs-hinh { grid-column: 2; grid-row: 1 / span 4; }
  .fs-anh img { height: 132px; }
}

/* width 100vw: trang nền có bảng rộng hơn màn hình nên thanh cuộn ngang kéo
   luôn cả lớp phủ; khoá theo bề ngang khung nhìn thì checkout không bị tràn. */
html.co-khoa-scroll, html.co-khoa-scroll body { height: 100%; overflow: hidden; }
body.co-khoa-scroll { position: fixed; width: 100%; left: 0; right: 0; overflow: hidden; }
.co-lop { position: fixed; inset: 0; width: 100vw; z-index: 90;
  background: color-mix(in oklab,var(--brand) 62%,transparent);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; overscroll-behavior: none; touch-action: none;
  animation: colop .2s ease both; }
@keyframes colop { from { opacity: 0 } to { opacity: 1 } }
.co { width: min(880px, 100%);
  /* `vh` trên điện thoại là chiều cao khi thanh địa chỉ ĐANG THU — nên 94vh có
     thể cao hơn phần màn hình thật sự nhìn thấy. Tấm checkout khi đó tràn lên
     trên mép, và vì `.co-top` là `sticky top:0` BÊN TRONG chính nó, cái đầu
     tấm nằm ngoài vùng thấy được: khách thấy nội dung nhưng không thấy thanh
     tiêu đề lẫn nút đóng. `dvh` đo phần thật sự đang hiển thị. Giữ `vh` một
     dòng trước làm dự phòng cho trình duyệt cũ. */
  max-height: 94vh; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y; -webkit-overflow-scrolling: touch; background: var(--bg);
  border-top: 3px solid var(--data-a); animation: coup .34s cubic-bezier(.22,.9,.3,1) both; }
@keyframes coup { from { transform: translateY(100%) } to { transform: none } }
@media (prefers-reduced-motion: reduce) {
  .co-lop, .co { animation-duration: .01s }
}
.co-top { position: sticky; top: 0; background: var(--brand); color: var(--text-inv);
  padding: 16px 26px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; z-index: 2; }
.co-top .t { font-family: var(--font-display); font-weight: 800; font-size: 18px;
  text-transform: uppercase; letter-spacing: -0.005em; }
.co-top .p { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--data-a); margin-top: 2px; }
.co-x { background: none; border: none; color: color-mix(in oklab,var(--text-inv) 70%,transparent); font-size: 26px;
  line-height: 1; cursor: pointer; }
.co-x:hover { color: var(--data-a); }
.co-body { padding: 26px; }

.mau-lop { position: fixed; inset: 0; z-index: 120; background: color-mix(in oklab,var(--brand) 72%,transparent);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.mau-hop { width: min(880px, 96vw);
  height: min(90vh, 940px); height: min(90dvh, 940px); background: var(--bg);
  display: flex; flex-direction: column; border: 1px solid var(--accent);
  box-shadow: 0 18px 60px color-mix(in oklab,var(--text) 40%,transparent); }
/* điện thoại: bản mẫu chiếm trọn màn hình, không viền không hở */
@media (max-width: 640px) {
  .mau-lop { padding: 0; }
  .mau-hop { width: 100vw; height: 100dvh; border: none; }
}
/* Thanh đóng phải GHIM. Trước đây nó là một flex-child bình thường, nên khi
   ruột popup cao hơn khung thì nó cuộn mất lên trên — khách phải kéo ngược lên
   mới thấy nút tắt, và trên điện thoại nhiều người không đoán ra là phải kéo. */
.mau-top { position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--brand); color: var(--data-a); padding: 10px 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; }
.mau-top .ml-dong { color: var(--text-inv); }
.mau-hop { position: relative; }
.mau-hop iframe { flex: 1; border: 0; width: 100%; background: var(--text-inv); transition: opacity .25s; }
.mau-cho { position: absolute; inset: 44px 0 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; background: var(--bg);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); }
.mau-cho span { width: 26px; height: 26px; border: 2.5px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%; animation: mauquay .8s linear infinite; }
@keyframes mauquay { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .mau-top { padding: 12px 14px; }
  .mau-top .ml-dong { font-size: 30px; padding: 2px 8px; }
}
/* dải beginner + slide explainer */
/* xanh rêu của dự án anh em — starsteller là navy.
   Dải này nằm ngay trên bìa navy nên lệch tông thấy rõ (R27). */
.bgn { background: linear-gradient(color-mix(in oklab,var(--bg) 88%,transparent), color-mix(in oklab,var(--bg) 93%,transparent)),
    url(/anh/bau-troi.jpg) center/cover; color: var(--text-inv); padding: 16px 18px;
  margin: 0 0 22px; }
.bgn-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--data-a); margin-bottom: 10px; }
.bgn-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bgn-nut button { background: color-mix(in oklab,var(--text-inv) 8%,transparent); border: 1px solid color-mix(in oklab,var(--data-a) 40%,transparent);
  color: var(--text-inv); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  padding: 11px 10px; cursor: pointer; text-align: center; }
.bgn-nut button.bgn-mau { background: var(--data-a); color: var(--brand); font-weight: 700;
  border-color: var(--data-a); }
.exp-lop { position: fixed; inset: 0; z-index: 130; background: color-mix(in oklab,var(--brand) 80%,transparent);
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.exp-hop { position: relative; width: min(480px, 100%); background: var(--bg);
  padding: 30px 26px 24px; border: 1px solid var(--accent);
  box-shadow: 0 18px 60px color-mix(in oklab,var(--text) 45%,transparent); }
.exp-x { position: absolute; top: 8px; right: 10px; font-size: 26px; }
.exp-img { width: calc(100% + 52px); margin: -30px -26px 16px; display: block; }
.exp-kick { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.exp-tit { font-family: var(--font-display); font-weight: 800; font-size: 24px;
  text-transform: uppercase; margin: 0 0 12px; }
.exp-than { font-size: 15.5px; line-height: 1.7; margin: 0 0 18px; min-height: 130px; }
.exp-cham { display: flex; gap: 6px; margin-bottom: 16px; }
.exp-cham span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.exp-cham span.on { background: var(--accent); }
.exp-nav { display: flex; gap: 10px; justify-content: space-between; }
.pv-link { background: none; border: none; padding: 0; margin-top: 10px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; display: block; }
.pv-link:hover { color: var(--brand); }
.qbox-b .pv-link { margin-top: 5px; font-size: 10px; }
.pvx { width: min(440px, 94vw); }
.pvx-phu { font-size: 14px; color: var(--text-3); font-style: italic; margin: 12px 0 14px; }
.pvx-van { font-size: 15.5px; line-height: 1.7; color: var(--text-2); }
.pvx-mo { display: inline-block; height: 9px; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(90deg, color-mix(in oklab,var(--text) 5%,transparent), color-mix(in oklab,var(--text) 12%,transparent) 12%,
    color-mix(in oklab,var(--text) 12%,transparent) 88%, color-mix(in oklab,var(--text) 5%,transparent)); }
.pvx-mo-nhom { margin-top: 12px; }
.pvx-mo-nhom .pvx-mo { display: block; margin-bottom: 7px; }
.pvx-bang td { vertical-align: middle; }
.pvx-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--text-3); margin-top: 14px; line-height: 1.6; }
.co-bump { flex: 1 1 100%; display: flex; gap: 9px; align-items: flex-start;
  border: 1px dashed var(--accent); background: var(--bg); padding: 9px 11px;
  cursor: pointer; }
.co-bump input { margin-top: 3px; accent-color: var(--brand); flex: none; }
.co-bump b { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 13.5px; text-transform: uppercase; }
.co-bump span span { font-size: 12px; color: var(--text-3); display: block; }
.qr-bonus { border: 1px dashed var(--accent); background: var(--bg); padding: 10px 13px;
  font-size: 13.5px; line-height: 1.55; margin: 2px auto 8px; max-width: 340px; }
.qr-tay-lk { background: none; border: none; padding: 0; margin: 10px 0 0;
  font-size: 12.5px; color: var(--text-3); text-decoration: underline; cursor: pointer; }
.qr-tay { max-width: 380px; margin: 10px auto 0; font-size: 13.5px; text-align: left;
  border: 1px solid var(--line); background: color-mix(in oklab,var(--text) 3%,transparent); padding: 12px 14px; }
.qr-tay div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }
.qr-tay span { color: var(--text-3); flex: none; }
.qr-tay b { font-family: var(--font-mono); font-weight: 600; word-break: break-all; text-align: right; }
.qr-tay .lk-copy { background: none; border: 1px solid var(--line); border-radius: 3px;
  font-size: 11.5px; padding: 1px 7px; cursor: pointer; color: var(--text); flex: none; }
.of-b { display: grid; gap: 9px; margin-top: 14px; padding: 13px 14px;
  border: 1px dashed var(--accent); background: var(--bg); }
.of-b-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); }
.of-b-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 560px) { .of-b-hang { grid-template-columns: 1fr; } }
.qr-hotro { margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.qr-hotro a { color: var(--text); }
.tick-khoa { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px;
  border: 1px dashed var(--line); background: color-mix(in oklab,var(--text) 3%,transparent); }
.tick-khoa svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 2px; }
.tick-khoa b { color: var(--text-3); }
.uu-dai { background: var(--brand); color: var(--text-inv); padding: 16px 18px; margin-bottom: 18px;
  border-top: 3px solid var(--data-a); }
.ud-t { font-family: var(--font-display); font-weight: 800; font-size: 15px; text-transform: uppercase;
  color: var(--data-a); letter-spacing: -0.005em; }
.ud-thanh { height: 5px; background: color-mix(in oklab,var(--text-inv) 16%,transparent); margin: 10px 0 7px; }
.ud-thanh span { display: block; height: 100%; background: var(--data-a); }
.ud-p { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in oklab,var(--text-inv) 65%,transparent); }

/* ── xem trước bản PDF ── */
.pv { margin-bottom: 22px; }
.pv-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); }
.pv-h { font-family: var(--font-display); font-weight: 800; font-size: 21px; text-transform: uppercase;
  line-height: 1.1; margin: 4px 0 14px; }
.pv-hang { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; }
.pv-hang figure { flex: none; width: 132px; scroll-snap-align: start; }
.pv-hang figcaption { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); margin-top: 7px; text-align: center; }
.pv-p { display: block; width: 132px; height: 187px; background: var(--text-inv); overflow: hidden;
  border: 1px solid var(--line); padding: 11px 10px; position: relative;
  box-shadow: 0 4px 14px color-mix(in oklab,var(--ok) 10%,transparent); }
.pv-p span { display: block; }
.pv-p em, .pv-p u { display: block; text-decoration: none; }
.pv-run { font-family: var(--font-mono); font-size: 4.6px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line-soft);
  padding-bottom: 4px; }
.pv-h2 { font-family: var(--font-display); font-weight: 800; font-size: 13px; line-height: 1.05;
  text-transform: uppercase; margin: 9px 0 8px; }
.pv-h3 { font-family: var(--font-display); font-weight: 700; font-size: 8.4px; line-height: 1.15;
  text-transform: uppercase; margin: 9px 0 6px; }
.pv-h3 u { display: inline-block; text-decoration: none; font-family: var(--font-mono);
  font-size: 5.6px; color: var(--accent); margin-right: 4px; }
.pv-cn em { height: 2px; background: var(--line); margin-bottom: 3.2px; }
.pv-pull { border-top: 1.4px solid var(--line); padding: 4px 0 0; margin: 6px 0 7px; }
.pv-pull em { height: 2.4px; background: color-mix(in oklab,var(--data-a) 34%,transparent); margin-bottom: 3.4px; }
.pv-bia { background: var(--brand); border-color: var(--brand); }
.pv-eb { font-family: var(--font-mono); font-size: 4.2px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--data-a); }
.pv-h1 { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 0.94;
  text-transform: uppercase; color: var(--text-inv); letter-spacing: -0.02em; margin: 8px 0 0; }
.pv-h1 em { display: inline; font-style: normal; color: var(--data-a); }
.pv-ten { font-family: var(--font-mono); font-size: 6px; letter-spacing: 0.1em; color: var(--text-inv);
  margin-top: 10px; padding-top: 7px; border-top: 1px solid color-mix(in oklab,var(--data-a) 40%,transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-tru { display: flex !important; gap: 3px; margin-top: 8px; }
.pv-tru i { flex: 1; text-align: center; border: 1px solid color-mix(in oklab,var(--data-a) 34%,transparent); padding: 4px 1px; }
.pv-tru span { font-family: var(--font-mono); font-size: 3.6px; letter-spacing: 0.06em;
  text-transform: uppercase; color: color-mix(in oklab,var(--text-inv) 60%,transparent); }
.pv-tru b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 7px;
  color: var(--data-a); line-height: 1.2; margin-top: 1px; }
.pv-ml i { display: flex; align-items: baseline; gap: 4px; padding: 3.6px 0;
  border-bottom: 1px solid var(--line-soft); }
.pv-ml span { font-family: var(--font-mono); font-size: 4.6px; color: var(--accent); width: 12px; }
.pv-ml b { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 6.6px;
  text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-ml u { font-family: var(--font-mono); font-size: 4.2px; color: var(--text-3); }
.pv-nh i { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.pv-nh span { font-family: var(--font-display); font-weight: 700; font-size: 6.4px;
  text-transform: uppercase; width: 22px; }
.pv-nh u { flex: 1; height: 4.4px; background: var(--line-soft); }
.pv-nh u em { height: 100%; background: var(--text-3); }
.pv-nh i.dung u em { background: var(--ok); }
.pv-nh i.ky u em { background: var(--danger); }
.pv-nh b { font-family: var(--font-mono); font-size: 4.4px; color: var(--text-3); width: 15px;
  text-align: right; }
.pv-cap { font-size: 13px; color: var(--text-3); line-height: 1.55; margin-top: 12px;
  max-width: 62ch; }

/* ── thẻ gói dạng đóng mở ── */
.of-nhom { display: grid; gap: 12px; margin-bottom: 24px; }
.of { border: 1px solid var(--line); background: var(--text-inv); position: relative;
  transition: border-color .15s, box-shadow .15s; }
.of:hover { border-color: var(--accent); }
.of[aria-pressed="true"] { border-color: var(--brand);
  box-shadow: 0 8px 26px color-mix(in oklab,var(--ok) 13%,transparent); }
.of-tag { position: absolute; top: 0; right: 0; background: var(--brand);
  color: var(--data-a); font-family: var(--font-mono); font-weight: 600; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; z-index: 1; }
.of-tag.gold { background: var(--data-a); color: var(--brand); }
/* thẻ "Trọn 100 mục" luôn đứng đầu và nổi hơn hai gói còn lại — điều hướng
   người mua vào bản đầy đủ trước, lẻ và combo là phương án so sánh */
.of.of-uu { border: 2px solid var(--accent);
  box-shadow: 0 10px 30px color-mix(in oklab,var(--ok) 14%,transparent); }
.of.of-uu[aria-pressed="true"] { border-color: var(--brand); }
.of.of-uu .of-ten { font-size: 25px; }
.of-h { display: flex; width: 100%; gap: 16px; align-items: flex-start; text-align: left;
  justify-content: space-between; padding: 17px 19px; background: none; border: none;
  font: inherit; color: inherit; cursor: pointer; }
.of-tag + .of-h { padding-top: 25px; }
.of-h-l { min-width: 0; }
.of-h-l > span { display: block; }
.of-h-r { display: flex; align-items: center; gap: 12px; flex: none; }
.of-nhan { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); }
.of-ten { font-family: var(--font-display); font-weight: 800; font-size: 22px;
  text-transform: uppercase; line-height: 1.08; margin-top: 3px; }
.of-tom { font-size: 14px; color: var(--text-2); line-height: 1.5; margin-top: 6px;
  max-width: 44ch; }
.of-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); margin-top: 7px; }
.of-chip { display: inline-block !important; margin-top: 8px; background: color-mix(in oklab,var(--data-a) 13%,transparent);
  color: var(--accent); font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  letter-spacing: 0.06em; padding: 4px 9px; border: 1px solid color-mix(in oklab,var(--data-a) 34%,transparent); }
.of-gia { text-align: right; white-space: nowrap; }
.of-gia s { display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3);
  text-decoration: line-through; }
.of-gia b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px;
  color: var(--accent); line-height: 1.05; letter-spacing: -0.02em; }
.of-gia i { display: block; font-family: var(--font-mono); font-size: 9.5px; font-style: normal;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 2px; }
.of-mui { flex: none; width: 26px; height: 26px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.of-mui svg { width: 15px; height: 15px; stroke: var(--brand); }
.of[aria-pressed="true"] .of-mui { transform: rotate(180deg); background: var(--brand);
  border-color: var(--brand); }
.of[aria-pressed="true"] .of-mui svg { stroke: var(--data-a); }
.of-mo { display: none; padding: 0 19px 19px; }
.of[aria-pressed="true"] .of-mo { display: block; animation: ofmo .22s ease both; }
@keyframes ofmo { from { opacity: 0; transform: translateY(-5px) } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .of[aria-pressed="true"] .of-mo { animation: none } }

/* ── khối quà tặng ── */
.qbox { margin-top: 15px; border: 1px solid var(--accent); background: var(--bg); }
.qbox + .qbox { margin-top: 10px; }
.qbox-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--accent); color: var(--text-inv); padding: 7px 12px; }
.qbox-k { font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; }
.qbox-gia { font-family: var(--font-display); font-weight: 800; font-size: 15px; white-space: nowrap; }
.qbox-i { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid color-mix(in oklab,var(--data-a) 20%,transparent); }
.qbox-i:last-child { border-bottom: none; }
.qbox-n { flex: none; width: 19px; height: 19px; border: 1px solid var(--accent);
  color: var(--accent); font-family: var(--font-mono); font-size: 10px; display: flex;
  align-items: center; justify-content: center; margin-top: 1px; }
.qbox-b { flex: 1; min-width: 0; }
.qbox-b b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px;
  text-transform: uppercase; line-height: 1.15; }
.qbox-b span { display: block; font-size: 13px; color: var(--text-2); line-height: 1.5;
  margin-top: 2px; }
.qbox-p { flex: none; text-align: right; }
.qbox-p s { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.qbox-p u { display: block; text-decoration: none; font-family: var(--font-display); font-weight: 800;
  font-size: 16px; color: var(--accent); }

/* thanh chọn bản luận — chỉ hiện với đơn combo nhiều bài */
.chon-ban { border: 1px solid var(--accent); background: color-mix(in oklab,var(--data-a) 7%,transparent);
  padding: 12px 14px; margin: 0 0 22px; }
.cb-nhan { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cb-ds { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-i { display: inline-block; padding: 7px 12px; font-size: 14px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--text); text-decoration: none; }
.cb-i:hover { border-color: var(--accent); }
.cb-nay { background: var(--brand); color: var(--bg); border-color: var(--brand);
  font-weight: 600; }
.of-tinh { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); }
.of-tinh div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.of-tinh span { color: var(--text-3); }
.of-tinh b { font-family: var(--font-mono); font-weight: 600; }
.of-tinh b.hi { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--text); }
.of-tinh .tk { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.of-tinh .tk span, .of-tinh .tk b { color: var(--accent); font-weight: 600; }
.of-phu { font-size: 14.5px; color: var(--text-2); margin-top: 4px; line-height: 1.6; }
.of-ds { list-style: none; }
.of-ds li { display: flex; gap: 9px; font-size: 14px; color: var(--text-2); padding: 4px 0; }
.of-ds li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px;
  border: 1.4px solid var(--accent); border-radius: 50%; }

/* ── cam kết, số liệu, ý kiến, câu hỏi ── */
.bd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-bottom: 26px; }
.bd-o { background: var(--bg); padding: 14px 15px; }
.bd-o b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  text-transform: uppercase; line-height: 1.15; }
.bd-o span { display: block; font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 5px; }

.kb { margin-bottom: 26px; }
.kb-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); padding-bottom: 8px;
  border-bottom: 1px solid var(--text); margin-bottom: 14px; }
.sl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sl-o b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 34px;
  line-height: 1; letter-spacing: -0.02em; color: var(--brand); }
.sl-o b em { font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-left: 5px; }
.sl-o span { display: block; font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 6px; }

.yk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.yk-o { background: var(--text-inv); border: 1px solid var(--line); border-top: 2px solid var(--accent);
  padding: 15px 15px 13px; display: flex; flex-direction: column; }
.yk-o blockquote { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 11px; }
.yk-o figcaption { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.yk-o figcaption b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  text-transform: uppercase; }
.yk-o figcaption span { font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
  letter-spacing: 0.06em; }

.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 13px 0; cursor: pointer; list-style: none; font-family: var(--font-display);
  font-weight: 700; font-size: 17px; text-transform: uppercase; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary i { flex: none; width: 17px; height: 17px; position: relative; margin-top: 2px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; inset: 8px 0 auto;
  height: 1.6px; background: var(--accent); transition: transform .18s; }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details[open] summary { color: var(--brand); }
.faq p { font-size: 14.5px; color: var(--text-2); line-height: 1.68; padding: 0 30px 15px 0;
  max-width: 68ch; }

.tick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tick label { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px;
  border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 14px; }
.tick label:hover { border-color: var(--accent); }
.tick input { margin-top: 3px; accent-color: var(--brand); flex: none; }
.tick b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  text-transform: uppercase; }
.tick span { font-size: 12.5px; color: var(--text-3); }
.tick-tong { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text);
  letter-spacing: 0.06em; }

/* z-index 6: nhãn .of-tag của thẻ gói có z-index 1 và từng "xuyên" lên footer khi cuộn */
.co-chan { position: sticky; bottom: 0; z-index: 6; background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 10px 26px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-chan .co-email { flex: 1 1 100%; }
.email-phien { font-size: 13px; padding: 5px 10px; background: color-mix(in oklab,var(--data-a) 8%,transparent);
  border: 1px solid var(--line); }
.email-phien .lk, .lk { background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); text-decoration: underline; font: inherit; }
.co-chan .co-email .in { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px; }
.co-chan .tong { flex: 1; }
.co-chan .tong b { font-family: var(--font-display); font-weight: 800; font-size: 26px; }
.co-dem { color: var(--accent); font-variant-numeric: tabular-nums; }
.co-tin { flex: 1 1 100%; text-align: center; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; }

/* ── màn chọn cổng thanh toán (12/08 — cùng UX tuvitrondoi) ── */
.cong-ds { display: grid; gap: 12px; padding: 4px 0 8px; }
.cong-the { display: block; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-3, 6px);
  padding: 14px 16px; cursor: pointer; font-family: inherit; }
.cong-the:hover { border-color: var(--accent); }
.cong-the[disabled] { opacity: .6; cursor: default; }
.cong-ten { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 17px; color: var(--text); }
.cong-mo { display: block; font-size: 13.5px; line-height: 1.55;
  color: var(--text-2); margin-top: 4px; }
.cong-nhan { display: inline-block; margin-top: 8px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
  padding: 2px 8px; border-radius: 999px; }
.cong-loi { color: var(--danger, var(--accent)); font-size: 13.5px; margin: 4px 0 0; }
@media (max-width: 640px) {
  /* footer dính từng ăn 244px/812px (30% màn hình) — thu về ~150px:
     tổng tiền và nút đứng CÙNG HÀNG, dòng tin ẩn (đã nói ở ruột thẻ) */
  .co-chan { padding: 9px 14px 11px; gap: 8px; }
  .co-chan .btn-lg { flex: 1 1 auto; padding: 13px 14px; font-size: 15px; }
  .co-chan .tong { flex: 0 0 auto; text-align: left; }
  .co-chan .tong b { font-size: 20px; }
  .co-chan .tong span { font-size: 9px; letter-spacing: .08em; }
  .co-tin { display: none; }
  .email-phien { font-size: 12.5px; padding: 4px 9px; }
}
.co-chan .tong span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); display: block; }

/* QR dummy */
.qr-wrap { text-align: center; padding: 10px 0 4px; }
.qr-box { width: 190px; height: 190px; margin: 0 auto; background: var(--text-inv);
  border: 1px solid var(--line); padding: 12px; }
.qr-box svg { width: 100%; height: 100%; }
.qr-tt { max-width: 380px; margin: 20px auto 0; font-size: 14px; }
.qr-tt div { display: flex; justify-content: space-between; padding: 7px 0;
  border-bottom: 1px solid var(--line-soft); }
.qr-tt div:last-child { border-bottom: none; }
.qr-tt span { color: var(--text-3); }
.qr-tt b { font-family: var(--font-mono); font-weight: 600; }
.qr-note { font-size: 12.5px; color: var(--text-3); font-style: italic; margin-top: 14px; }

/* thành công */
.ok-wrap { text-align: center; padding: 26px 10px; }
.ok-vong { width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--brand); display: flex; align-items: center; justify-content: center; }
.ok-vong svg { width: 34px; height: 34px; stroke: var(--data-a); }
.ok-wrap h3 { font-family: var(--font-display); font-weight: 800; font-size: 27px;
  text-transform: uppercase; }
.ok-wrap p { font-size: 15.5px; color: var(--text-2); max-width: 52ch; margin: 12px auto 0;
  line-height: 1.68; }
.ok-buoc { text-align: left; max-width: 460px; margin: 22px auto 0; }
.ok-buoc div { display: flex; gap: 12px; padding: 9px 0; font-size: 14.5px; color: var(--text-2);
  border-bottom: 1px solid var(--line-soft); }
.ok-buoc div:last-child { border-bottom: none; }
.ok-buoc b { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--accent);
  padding-top: 3px; }
@media (max-width: 760px) {
  .bd, .sl, .yk { grid-template-columns: 1fr; }
  .bd { gap: 1px; }
}
@media (max-width: 640px) {
  .tick { grid-template-columns: 1fr; }
  .co-body { padding: 18px; }
  .of-h { padding: 15px 15px; gap: 12px; }
  .of-tag + .of-h { padding-top: 24px; }
  .of-mo { padding: 0 15px 16px; }
  .of-ten { font-size: 19px; }
  .of-tom { font-size: 13.5px; }
  .of-gia b { font-size: 24px; }
  .of-mui { display: none; }
  .qbox-b b { font-size: 15px; }
  .pv-h { font-size: 18px; }
  .sl-o b { font-size: 30px; }
  .faq summary { font-size: 15.5px; }
}

/* porcelain canvas — PHẲNG tuyệt đối, không gradient (HANDOFF §2) */
html.porcelain{min-height:100%;background:var(--bg);color:var(--text)}
html.porcelain body{
  background:transparent;color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-2);line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased}
html.porcelain .stars-funnel{display:none!important}

/* chuyển zone night → porcelain (B5 reveal) */
html.zone-reveal{transition:background-color var(--dur-slow) var(--ease)}
html.zone-reveal .stars-funnel{
  opacity:1;transition:opacity var(--dur-slow) var(--ease);pointer-events:none}
html.zone-reveal-on .stars-funnel{opacity:0}
@media (prefers-reduced-motion:reduce){
  html.zone-reveal,html.zone-reveal .stars-funnel{transition:none}}

/* spa-bar — mang zone class night (shell trangbao): var() ở đây là token đêm,
   thanh hoà vào dải đêm mở bài thay vì mảng giấy chặn trên nền tối (Duc chê
   phá kết cấu, 09/08). KHÔNG sticky: ba dải dính chồng nhau trên đầu trông
   rất kỳ khi cuộn — chrome đọc xong việc thì trôi đi. */
html.porcelain .spa-bar{
  position:static;
  background:var(--bg);color:var(--text);border-bottom-color:var(--line)}
html.porcelain .brand-khoi{color:var(--text)}
html.porcelain .brand{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  text-transform:none;letter-spacing:-.01em;color:var(--brand)}
html.porcelain .brand b{color:var(--brand);font-weight:var(--fw-bold)}
html.porcelain .brand-sub{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2)}
html.porcelain .tb-nav{
  font-family:var(--font-mono)!important;font-size:var(--fs-1)!important;
  letter-spacing:.04em!important;text-transform:none!important;color:var(--text-2)!important}
html.porcelain .tb-nav:hover{color:var(--brand)!important}
html.porcelain .tb-nav-vang{color:var(--accent)!important}

html.porcelain .wrap{color:var(--text)}
html.porcelain .actions{
  background:var(--bg);border-top-color:var(--line);color:var(--text)}
html.porcelain .actions .st-mini{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.06em;
  text-transform:none;color:var(--text-2)}
html.porcelain .btn,html.porcelain .btn-dark{
  font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-2);
  letter-spacing:.08em;text-transform:none;border-radius:var(--r-4);
  background:var(--brand);color:var(--text-inv);border:0}
html.porcelain .btn:hover,html.porcelain .btn-dark:hover{
  background:color-mix(in oklab,var(--brand),var(--text) var(--state-hover));
  opacity:1}
html.porcelain .btn-ghost{
  background:transparent;color:var(--text);border:var(--bw-1) solid var(--line)}
html.porcelain .btn:disabled{opacity:.4}

/* Cột đọc A6/B6: 640px nội dung + gutter — hẹp hơn 760 cũ để dòng ~60–65 ký tự. */
html.porcelain .screen-wrap{
  max-width:680px;margin:0 auto;padding:0 var(--gutter) var(--s-8)}
/* .page trên SPA là VỎ PHẦN BÀI, không phải tờ A4 — reset trọn bộ rule khổ in
   của style_pdf (height:297mm + overflow:hidden + flex), xem chú thích
   CSS_MAN_HINH trong spa_assets. */
html.porcelain .page{width:auto;height:auto;min-height:0;padding:0;margin:0;
  overflow:visible;position:static;display:block;break-after:auto}
html.porcelain .body-area{padding-top:0;width:auto}

/* dải nhắc bản mẫu /mau — zone night, KHÔNG sticky (cuộn là trôi đi).
   .night không định nghĩa --warn nên phải tự chọn màu đêm: nền bg2, chữ
   brass nhạt (accent-text) — vẫn là giọng "ghi chú" trên nền đêm. */
html.porcelain #mau-nhan.mau-nhac,html.porcelain .mau-nhac{
  position:static;
  background:var(--bg2);color:var(--accent-text);
  border-bottom:var(--bw-1) solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.1em;
  text-transform:none;text-align:center;padding:var(--s-2) var(--gutter)}

/* ---- B10: xem trước tài liệu (pv-*) ---- */
html.porcelain .pv-bia{
  margin:var(--s-4) 0 0;padding:var(--s-5);position:relative;overflow:hidden;
  color:var(--text-inv);border-radius:var(--r-4);
  background:linear-gradient(165deg,
    color-mix(in oklab, var(--surface-inv), var(--text-inv) 5%),
    var(--surface-inv) 55%,
    color-mix(in oklab, var(--surface-inv), var(--text) 30%))!important;
  border:0}
@media (min-width:1024px){html.porcelain .pv-bia{margin:0}}
html.porcelain .pv-eb{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.22em;
  color:var(--focus-ring-inv)}
html.porcelain .pv-ten,html.porcelain .pv-h1{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-2);line-height:var(--lh-tight);margin:var(--s-2) 0}
/* Trang PDF xem trước là GIẤY TRẮNG, không phải đảo tối: chữ chạy đầu/chân
   trang phải lấy token nền sáng. Bản cũ pha từ `--text-inv` (gần trắng) nên
   đo được 2,03 — chữ trắng trên giấy trắng. */
html.porcelain .pv-run,html.porcelain .pv-cn{
  font-family:var(--font-mono);font-size:var(--fs-1);line-height:var(--lh-loose);
  color:var(--text-2)}
html.porcelain .pv-tru{
  display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4);
  padding-top:var(--s-3);
  border-top:var(--bw-1) solid color-mix(in oklab, var(--focus-ring-inv) var(--a-4), transparent)}
html.porcelain .pv-tru i,html.porcelain .pv-tru span{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.06em;
  border:var(--bw-1) solid color-mix(in oklab, var(--focus-ring-inv) var(--a-3), transparent);
  border-radius:var(--r-3);padding:var(--s-2) var(--s-3);flex:1;min-width:88px;text-align:center}
html.porcelain .pv-tru b{display:block;font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:var(--fs-2);margin-top:var(--s-1);letter-spacing:0;text-transform:none}
html.porcelain .pv-h,html.porcelain .pv-k{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  letter-spacing:.02em;text-transform:none;color:var(--text);margin:var(--s-4) 0 var(--s-2)}
html.porcelain .pv-k{
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-medium);
  letter-spacing:.1em;color:var(--text-2)}
html.porcelain .pv-hang{
  display:flex;gap:var(--s-3);overflow-x:auto;padding-bottom:var(--s-2);
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
html.porcelain .pv-hang figure{flex:none;width:132px;scroll-snap-align:start;margin:0}
html.porcelain .pv-hang figcaption{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.06em;
  color:var(--text-2);margin-top:var(--s-2)}
html.porcelain .pv-p{
  display:block;background:var(--surface);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);padding:var(--s-3);overflow:hidden;color:var(--text)}
html.porcelain .pv-link{
  background:none;border:0;padding:10px 0;margin-top:var(--s-2);cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;
  font-size:var(--fs-1);color:var(--brand);text-decoration:underline;text-underline-offset:3px}
html.porcelain .pv-link:hover{color:color-mix(in oklab,var(--brand),var(--text) var(--state-hover))}

/* danh sách gói (of-*) — checkout overlay dùng chung */
html.porcelain .of-h1{
  font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-1);
  letter-spacing:.2em;color:var(--text-2);text-transform:none}
html.porcelain .of-h{
  background:var(--surface);border:var(--bw-1) solid var(--line);border-radius:var(--r-4);
  padding:var(--s-4);margin-top:var(--s-3);cursor:pointer;
  transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease)}
html.porcelain .of-h:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .of-h.chon{border:var(--bw-2) solid var(--line-strong)}
html.porcelain .of-ten{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  letter-spacing:.02em;text-transform:none;color:var(--text)}
html.porcelain .of-gia{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);color:var(--brand)}
html.porcelain .of-ds li{
  font-size:var(--fs-2);color:var(--text-2);padding:var(--s-1) 0}
html.porcelain .of-ds li::before{
  background:var(--icon);border-radius:var(--r-full)}
/* R126g — hộp quà theo DS: viền nét đứt không có trong luật (§ hairline chỉ
   có bw-1/2/3 solid + --line); caps và tracking .16em vượt trần §3; divider
   và ô số nhuộm accent là trang trí. Dải đầu giữ nền accent (quyết định
   contrast cũ — chữ token nghịch), phần thân về hairline trung tính. */
html.porcelain .qbox{
  border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);background:var(--surface);margin-top:var(--s-3);
  overflow:hidden}
/* Dải đầu hộp quà có nền ACCENT (`.qbox-top{background:var(--accent)}`), nên
   chữ trên nó phải là token nghịch. Bản cũ dùng `--text-2`/`--brand` — token
   cho nền giấy — đo được **1,13** và **3,07**: dòng "Ba tài liệu tặng kèm"
   gần như biến mất, đúng chỗ Duc chụp được. Công cụ soi phễu bắt ra con số
   này ở chặng `phễu:checkout`, quét trang tĩnh không bao giờ thấy. */
html.porcelain .qbox-k{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;color:var(--text-2);
  text-transform:none}
html.porcelain .qbox-top .qbox-k,html.porcelain .qbox-top .qbox-gia{color:var(--text-inv)}
html.porcelain .qbox-gia{
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-medium);
  letter-spacing:.04em;color:var(--brand);text-transform:none}
html.porcelain .qbox-i{border-bottom:var(--bw-1) solid var(--line-soft)}
html.porcelain .qbox-i:last-child{border-bottom:0}
html.porcelain .qbox-n{
  border:var(--bw-1) solid var(--line);border-radius:var(--r-2);
  color:var(--text-2);font-family:var(--font-mono);font-size:var(--fs-1)}
html.porcelain .qbox-b b{
  font-family:var(--font-body);font-weight:var(--fw-strong);font-size:var(--fs-2);
  line-height:var(--lh-tight);text-transform:none;color:var(--text)}
html.porcelain .qbox-b span{
  font-size:var(--fs-1);color:var(--text-2);line-height:var(--lh-base)}
html.porcelain .qbox-p s{
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3)}
html.porcelain .qbox-p u{
  font-family:var(--font-mono);font-size:var(--fs-2);font-weight:var(--fw-regular);
  color:var(--text-2);text-decoration:none}
/* nút mở khoá = btn-p của A6/v3.1: Son solid — hành động tiền bạc trên
   porcelain mang accent Son, không phải gradient mực đêm. */
html.porcelain .unlock,html.porcelain .cta-cuoi .btn[data-mo]{
  display:block;width:100%;border:0;cursor:pointer;text-align:center;
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-2);
  letter-spacing:.02em;text-transform:none;color:var(--text-inv);border-radius:var(--r-3);
  padding:var(--s-4) var(--s-5);
  background:var(--accent);transition:background var(--dur-base) var(--ease)}
html.porcelain .unlock:hover,html.porcelain .cta-cuoi .btn[data-mo]:hover{
  background:var(--accent-hover);opacity:1}
html.porcelain .teaser{
  background:var(--surface);color:var(--text);padding:var(--s-4);margin:var(--s-4) 0;
  border:var(--bw-1) solid var(--line);border-radius:var(--r-3)}
html.porcelain .teaser-lbl{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.1em;
  color:var(--accent);text-transform:none;margin-bottom:var(--s-2)}
html.porcelain .teaser p{font-size:var(--fs-2);line-height:var(--lh-loose);color:var(--text);margin:0}
html.porcelain .mod-badge{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.08em;
  text-transform:none;border:var(--bw-1) solid var(--line);color:var(--text-2);
  border-radius:var(--r-2);padding:var(--s-1) var(--s-2);background:var(--surface-2)}
html.porcelain .mod-badge.free{border-color:var(--ok);color:var(--ok);background:var(--ok-subtle)}

/* ---- dải đêm mở bài (.dai-dem) — MỘT section night full-bleed ----
   Bìa + ba lớp + lễ B5 là một ĐOẠN đêm liền mạch tràn hết chiều ngang
   viewport, không phải ba thẻ navy rời trên nền giấy. Breakout khỏi cột
   680px bằng margin 50%−50vw; overflow-x:clip trên html để nửa pixel
   scrollbar của 100vw không sinh cuộn ngang. */
html.porcelain{overflow-x:clip}
html.porcelain .dai-dem{
  position:relative;overflow:hidden;color:var(--text);
  width:100vw;margin:0 calc(50% - 50vw) var(--s-7);
  background:
    radial-gradient(900px 520px at 50% 0%, var(--accent-soft), transparent 62%),
    linear-gradient(175deg,
      color-mix(in oklab,var(--bg),var(--text) 4%), var(--bg) 45%, var(--bg2))}
/* dải ghép đôi — cùng hệ đêm với chrome, full-bleed, KHÔNG dính (Duc 09/08).
   _legacy() alias .night{--brand:var(--text)} nên không dùng --brand làm nền
   ở đây — khai thẳng bg2. Ruột canh giữa theo cột bài 680px. */
html.porcelain .gd-dai{
  position:static;top:auto;z-index:auto;
  width:100vw;margin:0 calc(50% - 50vw);
  padding:10px max(var(--gutter),calc(50vw - 340px));
  background:var(--bg2);color:var(--text);
  border-bottom:var(--bw-1) solid var(--line);
  --accent-dao:var(--accent-text)}
html.porcelain .gd-dai .gd-dai-nut{color:var(--bg2)}
/* sao chỉ rắc vùng trời phía trên — kéo dài hết dải là sao bị scale to */
html.porcelain .dai-dem > .stars{
  position:absolute;inset:0 0 auto;width:100%;height:clamp(420px,60vw,560px);
  pointer-events:none;fill:var(--text)}
html.porcelain .dai-dem-in{
  position:relative;max-width:680px;margin:0 auto;padding:0 var(--gutter)}
/* khối bên trong dải: bỏ nền/bo góc/đổ bóng riêng, ngăn nhau bằng hairline */
html.porcelain .dai-dem .screen-cover.night{
  background:none;border-radius:0;box-shadow:none;
  margin:0;padding:clamp(48px,7vw,80px) 0 var(--s-7)}
html.porcelain .dai-dem .bl{
  background:transparent;border-radius:0;box-shadow:none;
  margin:0;padding:var(--s-6) 0;border-top:var(--bw-1) solid var(--line)}
html.porcelain .dai-dem .bl:last-child{
  padding-bottom:clamp(48px,7vw,72px)}
html.porcelain .dai-dem .md.md-night{
  background:none;margin:0;border-top:var(--bw-1) solid var(--line);
  padding:var(--s-7) 0 var(--s-6)}

/* ---- bìa bài (screen-cover) — A6 v4: BÌA ĐÊM đúng nghĩa ----
   Phần tử mang zone class `night` (spa_assets) nên mọi var() ở đây là token
   ĐÊM của tokens.css: --bg nền đêm, --accent brass, --text-2 dim. Không pha
   màu tay — đổi token là bìa đổi theo. Glow brass + nền sao seed như mockup
   starsteller-a6-sample.html. */
html.porcelain .screen-cover.night{
  margin:0 calc(-1 * var(--gutter)) var(--s-7);
  padding:clamp(56px,8vw,88px) var(--gutter);
  color:var(--text);border-radius:0;position:relative;overflow:hidden;
  text-align:center;
  background:
    radial-gradient(700px 420px at 50% 20%, var(--accent-soft), transparent 62%),
    linear-gradient(168deg, color-mix(in oklab,var(--bg),var(--text) 5%), var(--bg) 52%, var(--bg2))}
/* bìa không còn bo góc/margin desktop riêng — nó là một ĐOẠN của dải đêm
   full-bleed, mọi khổ màn hình như nhau. */
html.porcelain .screen-cover .stars{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:var(--text)}
html.porcelain .screen-cover .cover-in{position:relative}
html.porcelain .screen-cover .cover-eyebrow,html.porcelain .screen-cover .kicker{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  color:var(--text-2);text-transform:none}
html.porcelain .screen-cover .h1{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-4);line-height:var(--lh-tight);letter-spacing:-.015em;
  text-transform:none;color:var(--text);margin:var(--s-3) auto 0;
  max-width:22ch;text-wrap:pretty}
html.porcelain .screen-cover .h1 em{font-style:normal;color:var(--accent-text)}
html.porcelain .screen-cover .cover-name{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-2);line-height:var(--lh-tight);letter-spacing:-.015em;
  text-transform:none;color:var(--text);margin:var(--s-4) auto 0;text-wrap:pretty}
html.porcelain .screen-cover .cover-meta{
  font-family:var(--font-mono);font-size:var(--fs-1);line-height:var(--lh-loose);
  letter-spacing:var(--ls-label);color:var(--text-2);margin-top:var(--s-2)}
html.porcelain .screen-cover .ct-gz{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  text-transform:none;color:var(--text)}
html.porcelain .screen-cover .ct-lbl{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  text-transform:none;color:var(--text-2)}
/* Bìa là ĐẢO ĐÊM trong zone giấy — nhờ class night, --text/--text-2 ở đây đã
   là kem/dim đọc được trên navy (bài học tương phản 3,39 hồi 09/08: đừng bao
   giờ lấy token giấy đặt lên bìa). Ba dấu · giữa các mảnh cần khoảng thở. */
html.porcelain .screen-cover .cover-foot{
  font-family:var(--font-mono);font-size:var(--fs-1);margin-top:var(--s-5);
  padding-top:var(--s-3);border-top:var(--bw-1) solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-1) var(--s-3);
  color:var(--text-2)}
/* rule brass dưới meta — điểm neo A6 */
html.porcelain .screen-cover .cover-meta::after,
html.porcelain .screen-cover .cover-name + .cover-meta::after{
  content:"";display:block;width:64px;height:2px;margin:var(--s-5) auto 0;
  background:var(--accent)}
html.porcelain .screen-cover .cover-chart{
  margin-top:var(--s-4);justify-items:center;text-align:center}

/* ---- ba lớp (.bl) — khối đảo trên sứ: text-inv, không Son trên navy ---- */
html.porcelain .bl{
  background:var(--bg);
  color:var(--text);border:0;border-radius:var(--r-3);
  padding:var(--s-5) var(--s-4) var(--s-4);margin:0 0 var(--s-6)}
html.porcelain .bl::before{display:none}
html.porcelain .bl-kick{color:var(--text-2);letter-spacing:var(--ls-label);text-transform:none}
html.porcelain .bl-so{color:var(--accent-text)}
html.porcelain .bl-nhan{color:var(--text-2);text-transform:none;letter-spacing:var(--ls-label)}
html.porcelain .bl-ten{color:var(--text);text-transform:none;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-1) var(--s-3)}
html.porcelain .bl-ten svg{color:var(--accent)}
html.porcelain .bl-ten .bl-phu{margin:0;flex:none;font-weight:var(--fw-regular);
  letter-spacing:var(--ls-label);text-transform:none}
html.porcelain .bl-phu,html.porcelain .bl-o p{color:var(--text-2)}
html.porcelain .bl-o{border-top-color:var(--line)}
html.porcelain .bl-chot{border-top-color:var(--line);color:var(--accent-text);font-style:normal}
html.porcelain .hcc-ds a{
  border:0!important;border-bottom:var(--bw-1) solid var(--line)!important;
  border-radius:0!important;background:transparent!important;padding:var(--s-3) 0!important}
html.porcelain .hcc-ds a:last-child{border-bottom:0!important}
html.porcelain .hcc-ds a:hover{border-bottom-color:var(--accent)!important}
html.porcelain .hcc-so{font-size:var(--fs-1);color:var(--text-3);font-weight:var(--fw-regular)}
html.porcelain .hcc-kick{color:var(--accent);text-transform:none;letter-spacing:.1em}
html.porcelain .hcc h2{color:var(--text);text-transform:none}

/* ---- độ tin cậy giờ sinh (B6b) ----
   Palette porcelain: ok = tin cậy đủ · warn = thiếu/ước lượng giờ.
   Không dùng --info-subtle (xanh icon) — lệch mực–son của zone giấy. */
html.porcelain .tq{
  background:var(--ok-subtle);border:var(--bw-1) solid var(--line);
  border-top:var(--bw-2) solid var(--ok);border-radius:var(--r-3);
  padding:var(--s-4);margin:var(--s-4) 0}
html.porcelain .tq-k{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.1em;
  color:var(--ok);text-transform:none}
html.porcelain .tq-nhan{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  color:var(--text);text-transform:none;margin-top:var(--s-2)}
html.porcelain .tq-thieu{
  background:var(--warn-subtle);border-top-color:var(--warn)}
html.porcelain .tq-thieu .tq-k{color:var(--warn)}
html.porcelain .tq .note,html.porcelain .tq .cta-solar,html.porcelain .tq-moc{
  font-size:var(--fs-2);line-height:var(--lh-loose);color:var(--text-2)}
html.porcelain .tq .moc-list{font-size:var(--fs-2);color:var(--text)}

/* ---- đầu phần + mục — nhịp đọc A6 (starsteller-a6-sample.html) ----
   Gạch đáy 2px MỰC (--brand) dưới đầu phần, số mục Son, tiêu đề mục là chữ
   body semibold cùng cỡ thân bài — không phải display heading. */
html.porcelain .mod-head{
  margin:var(--s-8) 0 var(--s-5);padding-bottom:var(--s-3);
  border-bottom:var(--bw-3) solid var(--brand)}
html.porcelain .mod-head-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-3)}
html.porcelain .mod-num{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  color:var(--accent);text-transform:none}
html.porcelain .mod-title{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  letter-spacing:-.01em;text-transform:none;color:var(--text);margin:var(--s-1) 0 0}
html.porcelain .mod-sub{font-size:var(--fs-1);color:var(--text-2);margin:var(--s-1) 0 0;text-wrap:pretty}
html.porcelain section.muc{
  content-visibility:auto;contain-intrinsic-size:auto 320px;
  padding:var(--s-5) 0;border-top:var(--bw-1) solid var(--line-soft);margin-top:0}
html.porcelain section.muc > h3{
  display:flex;align-items:baseline;gap:var(--s-3);
  font-family:var(--font-body);font-size:var(--fs-2);
  font-weight:var(--fw-semibold);text-transform:none;margin:0 0 var(--s-3);line-height:var(--lh-tight)}
html.porcelain section.muc > h3 .mnum{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  color:var(--accent);padding:0;flex:none}
html.porcelain .muc-body p{
  margin:0 0 var(--s-3);line-height:var(--lh-loose);font-size:var(--fs-2);
  text-align:left;text-wrap:pretty;color:var(--text)}
html.porcelain .muc-khoa{cursor:pointer;border-radius:var(--r-2)}
html.porcelain .muc-khoa:hover{background:color-mix(in oklab,var(--surface),var(--text) 2%)}
html.porcelain .muc-khoa:active{background:color-mix(in oklab,var(--surface),var(--text) 4%)}
html.porcelain .muc-khoa .muc-body{color:var(--text-2)}
html.porcelain .muc-khoa .muc-body p{color:var(--text-2)}

/* ---- khoá trả tiền (B6: fade + skeleton, không blur) ----
   Skeleton là GỢI Ý còn chữ, không phải nội dung — mỗi mục khoá trước đây vẽ
   ~5 đoạn gạch xám (2 trên + 3 dưới) × ~90 mục làm cả trang xám xịt và dài
   gấp rưỡi. B6 chỉ hé 1–2 đoạn rồi fade. Cắt bằng CSS, DOM giữ nguyên. */
html.porcelain .khoa{margin-top:var(--s-3)}
html.porcelain .khoa .kd{margin-bottom:var(--s-3)}
html.porcelain .khoa i{
  display:block;height:9px;border-radius:var(--r-full);margin-bottom:var(--s-2);
  background:color-mix(in oklab,var(--text-2) var(--a-2), transparent)}
html.porcelain .khoa > .kd:nth-child(n+3):not(:has(.kls)){display:none}
html.porcelain .khoa .kls{display:flex;gap:var(--s-2);align-items:center;margin-bottom:var(--s-2)}
html.porcelain .khoa .kls u{
  flex:none;width:9px;height:9px;
  border:var(--bw-2) solid color-mix(in oklab,var(--text-2) var(--a-4), transparent);
  border-radius:var(--r-full)}
html.porcelain .khoa-duoi{
  margin-top:var(--s-3);position:relative;
  -webkit-mask-image:linear-gradient(to bottom,
    color-mix(in oklab,var(--text) 100%, transparent),
    color-mix(in oklab,var(--text) 30%, transparent) 45%,
    transparent 85%);
  mask-image:linear-gradient(to bottom,
    color-mix(in oklab,var(--text) 100%, transparent),
    color-mix(in oklab,var(--text) 30%, transparent) 45%,
    transparent 85%)}
html.porcelain .khoa-duoi > .kd:nth-child(n+2){display:none}
html.porcelain .cta-line{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-4) 0}
html.porcelain .cta-line::before,html.porcelain .cta-line::after{
  content:"";flex:1;height:1px;background:var(--line)}
/* nút giữa bài = cùng ngôn ngữ btn-p: Son solid, gọn */
html.porcelain .cta-mo{
  flex:none;border:0;border-radius:var(--r-3);cursor:pointer;
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-1);
  letter-spacing:.02em;text-transform:none;padding:12px var(--s-5);min-height:44px;
  color:var(--text-inv);background:var(--accent);
  transition:background var(--dur-base) var(--ease)}
html.porcelain .cta-mo:hover{background:var(--accent-hover);opacity:1}

/* ---- mục lục + CTA cuối ---- */
html.porcelain .dan-ml{text-align:center;padding:var(--s-7) 0 var(--s-5)}
html.porcelain .dan-ml-k{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.14em;
  color:var(--text-2);text-transform:none}
html.porcelain .dan-ml h2{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-3);line-height:var(--lh-tight);letter-spacing:-.01em;
  text-transform:none;margin:var(--s-3) auto 0;max-width:20ch;text-wrap:pretty}
html.porcelain .dan-ml p{
  font-size:var(--fs-2);line-height:var(--lh-loose);color:var(--text-2);
  max-width:52ch;margin:var(--s-4) auto 0;text-wrap:pretty}
html.porcelain .ml100{
  background:var(--surface);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-4);padding:var(--s-5);margin-bottom:var(--s-5);box-shadow:var(--sh-1)}
html.porcelain .ml100-kick{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.1em;
  color:var(--accent);text-transform:none}
html.porcelain .ml100-h > span:not(.mui){
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.1em;
  color:var(--accent);text-transform:none}
html.porcelain .ml100 h2{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  text-transform:none;line-height:var(--lh-tight);letter-spacing:-.01em}
/* CTA cuối = khối "hết trích" của A6: gạch mực 2px trên, KHÔNG đóng thẻ card
   — cùng ngôn ngữ với mod-head để người đọc hiểu đây là một "phần" của bài. */
html.porcelain .cta-cuoi{
  margin-top:var(--s-8);border:0;border-top:var(--bw-3) solid var(--brand);
  border-radius:0;padding:var(--s-6) 0 0;text-align:left;
  background:transparent;color:var(--text);box-shadow:none}
html.porcelain .cta-cuoi h3{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  text-transform:none;line-height:var(--lh-tight);margin:0;color:var(--text);text-wrap:pretty}
html.porcelain .cta-cuoi p{
  font-size:var(--fs-2);color:var(--text-2);max-width:58ch;margin:var(--s-3) 0 0;text-wrap:pretty}
html.porcelain .cta-cuoi .nho{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  color:var(--text-2);text-transform:none;margin-top:var(--s-2)}
html.porcelain .cta-cuoi .btn[data-mo],html.porcelain .cta-cuoi .unlock{
  margin-top:var(--s-5);align-self:flex-start}
html.porcelain .cta-cuoi{display:flex;flex-direction:column;align-items:flex-start}
/* pull — hairline trên/dưới, KHÔNG nền, không viền trái accent (gate 17, A6) */
html.porcelain .pull{
  margin:var(--s-4) 0 0;padding:var(--s-3) 0;
  border-top:var(--bw-1) solid var(--line);border-bottom:var(--bw-1) solid var(--line);
  text-align:left;font-weight:var(--fw-semibold);font-size:var(--fs-2);
  font-family:var(--font-body);letter-spacing:0;text-wrap:pretty;
  background:transparent;border-radius:0}

/* ---- overlay + sheet (B13/B14) ---- */
/* Tấm phủ phải TRONG MỜ. Bản cũ trộn với `--bg` (đục) nên nó là một tấm kín
   đặc: mở checkout hay màn exit-intent là bài đọc trước biến mất hoàn toàn.
   Mà chính bài đó mới là thứ khách vừa nhận và là lý do họ cân nhắc trả tiền —
   che nó đi là bỏ mất đòn bẩy mạnh nhất đang có trên màn hình.
   Duc: "background đằng sau phải là bài paywall, giảm occupancy để nhìn được". */
html.porcelain .co-lop{
  background:color-mix(in oklab, var(--surface-inv) 62%, transparent);
  backdrop-filter:blur(2px);
  animation:none!important;
  overflow:hidden;overscroll-behavior:none;touch-action:none}
html.porcelain .co-lop .co{
  touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* HÌNH HỌC GIỮ ĐÚNG BẢN GỐC ĐÃ PORT — chỉ đổi MÀU.
   `CSS_CHECKOUT` của starsteller là bản port 1:1 từ dự án anh em: tấm phủ dán đáy
   (`align-items:flex-end`), khổ `min(880px,100%)` ở MỌI bề ngang, viền trên
   3px màu nhấn, không bo góc, không canh giữa. Bên kia không có một media
   query nào đổi khổ `.co` — chỉ siết đệm ở ≤640px.
   Lớp porcelain trước đây ghi đè cả hình học: ép `max-width:460px` cho mọi
   khổ (trên 1440px thành cột hẹp lọt giữa nền xám, vùng cuộn trong bị cắt),
   bỏ viền nhấn, bo góc và canh giữa thành hộp thoại. Đó là chỗ lệch với bản
   Duc muốn. Nay chỉ còn phần MÀU; hình học trả về quy tắc gốc. */
html.porcelain .co{
  background:var(--surface);color:var(--text);font-family:var(--font-body);
  box-shadow:var(--sh-3);animation:none!important;border-top-color:var(--brand)}
html.porcelain .co-top{
  position:sticky;top:0;background:var(--surface);color:var(--text);
  padding:var(--s-4) var(--gutter);border-bottom:var(--bw-1) solid var(--line);
  gap:var(--s-3)}
html.porcelain .co-top .t{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  letter-spacing:-.01em;text-transform:none;color:var(--text)}
html.porcelain .co-top .p{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2);margin-top:var(--s-1)}
/* NÚT ĐÓNG PHẢI NHÌN THẤY ĐƯỢC. `font-size:0` giấu ký tự `&times;` trong
   markup — chắc là để thay bằng icon, mà icon thì chưa bao giờ được thêm. Kết
   quả: một ô xám trống ở góc màn exit-intent, khách không biết đóng bằng cách
   nào. Vẽ dấu X bằng hai gạch pseudo-element: không phụ thuộc font (ba font
   của repo chỉ nhúng subset latin+vietnamese) và luôn sắc nét. */
html.porcelain .co-x{
  position:relative;color:var(--text-2);font-size:0;width:32px;height:32px;
  display:grid;place-items:center;border-radius:var(--r-2);line-height:1;
  background:none;border:0;cursor:pointer}
html.porcelain .co-x::before,html.porcelain .co-x::after{
  content:"";position:absolute;width:16px;height:1.5px;border-radius:1px;
  background:currentColor}
html.porcelain .co-x::before{transform:rotate(45deg)}
html.porcelain .co-x::after{transform:rotate(-45deg)}
html.porcelain .co-x:hover{color:var(--text);background:color-mix(in oklab,var(--surface),var(--text) var(--state-hover))}
html.porcelain .co-body{padding:var(--s-4) var(--gutter) var(--s-5)}
html.porcelain .co-lop .co{
  display:flex;flex-direction:column;
  font-family:var(--font-body);font-size:var(--fs-2);line-height:var(--lh-base);
  font-weight:var(--fw-regular);font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased}
html.porcelain .co-lop .co-body{flex:1}

/* R126b — TYPE CONTRACT (checkout popover · porcelain §5 + B13)
   body      body 400  fs-2  text / text-2
   label     mono 400  fs-1  text-2 · ls .04em
   title     display 600 fs-2  text (sheet + gói chính)
   subhead   body 600  fs-2  text (mục con, FAQ, tick)
   price     mono 600  fs-3  brand (giá nổi) · text (giá dòng)
   strike    mono 400  fs-1  text-3
   CTA       display 600 fs-2  text-inv
   link      body 600  fs-1  brand */
html.porcelain .co-lop .co-top .t{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  line-height:var(--lh-tight);letter-spacing:-.01em;text-transform:none;color:var(--text)}
html.porcelain .co-lop .co-top .p,
html.porcelain .co-lop .co-body .lb,
html.porcelain .co-lop .ck2-h,
html.porcelain .co-lop .of-nhan,
html.porcelain .co-lop .of-meta,
html.porcelain .co-lop .of-gia i,
html.porcelain .co-lop .of-gia s,
html.porcelain .co-lop .ck2-qua-dai .n b,
html.porcelain .co-lop .ck2-qua-dai .gia,
html.porcelain .co-lop .ck2-qua .bia,
html.porcelain .co-lop .ck2-qua .p s,
html.porcelain .co-lop .kb-k,
html.porcelain .co-lop .pv-k,
html.porcelain .co-lop .co-chan .co-tin,
html.porcelain .co-lop .ud-t,
html.porcelain .co-lop .ud-p{
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-regular);
  letter-spacing:.04em;text-transform:none}
html.porcelain .co-lop .co-top .p,
html.porcelain .co-lop .of-nhan,
html.porcelain .co-lop .of-meta,
html.porcelain .co-lop .ck2-qua-dai .n b,
html.porcelain .co-lop .kb-k,
html.porcelain .co-lop .pv-k{color:var(--text-2)}
html.porcelain .co-lop .of-gia s,
html.porcelain .co-lop .ck2-qua .p s{color:var(--text-3)}
html.porcelain .co-lop .of-ten,
html.porcelain .co-lop .pv-h{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  line-height:var(--lh-tight);text-transform:none;color:var(--text)}
html.porcelain .co-lop .pv-h{font-size:var(--fs-3);margin:var(--s-1) 0 var(--s-3)}
html.porcelain .co-lop .ck2-qua .t,
html.porcelain .co-lop .tick b,
html.porcelain .co-lop .bd-o b,
html.porcelain .co-lop .faq summary,
html.porcelain .co-lop .co-bump b,
html.porcelain .co-lop .ck2-tiep b,
html.porcelain .co-lop .email-phien b{
  font-family:var(--font-body);font-weight:var(--fw-strong);font-size:var(--fs-2);
  line-height:var(--lh-tight);text-transform:none;color:var(--text)}
html.porcelain .co-lop .of-gia b,
html.porcelain .co-lop .ck2-gia .hi b,
html.porcelain .co-lop .of-tinh b.hi,
html.porcelain .co-lop .co-chan .tong b,
html.porcelain .co-lop .co-chan .tong #co-tong{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-3);
  line-height:var(--lh-tight);letter-spacing:0;color:var(--brand)}
html.porcelain .co-lop .co-chan .tong b,
html.porcelain .co-lop .co-chan .tong #co-tong{color:var(--text)}
html.porcelain .co-lop .ck2-qua .p u,
html.porcelain .co-lop .of-tinh b,
html.porcelain .co-lop .ck2-qua-dai .gia b{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-2);
  line-height:var(--lh-tight);letter-spacing:0;color:var(--text)}
html.porcelain .co-lop .of-tinh span,
html.porcelain .co-lop .ck2-gia > div,
html.porcelain .co-lop .ck2-bd > div,
html.porcelain .co-lop .of-tom,
html.porcelain .co-lop .of-ds li,
html.porcelain .co-lop .ck2-qua .m,
html.porcelain .co-lop .ck2-tiep,
html.porcelain .co-lop .faq p,
html.porcelain .co-lop .bd-o span,
html.porcelain .co-lop .sl-o span,
html.porcelain .co-lop .pv-cap,
html.porcelain .co-lop .tick span{
  font-family:var(--font-body);font-size:var(--fs-2);font-weight:var(--fw-regular);
  line-height:var(--lh-base);text-transform:none}
html.porcelain .co-lop .of-tom,
html.porcelain .co-lop .of-ds li,
html.porcelain .co-lop .ck2-qua .m,
html.porcelain .co-lop .ck2-bd > div,
html.porcelain .co-lop .faq p,
html.porcelain .co-lop .bd-o span,
html.porcelain .co-lop .sl-o span,
html.porcelain .co-lop .pv-cap,
html.porcelain .co-lop .tick span{color:var(--text-2)}
html.porcelain .co-lop .co-chan .btn-lg,
html.porcelain .co-lop .co-chan .btn,
html.porcelain .co-lop .co-chan #co-dat{
  font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-2);
  letter-spacing:0;text-transform:none}
html.porcelain .co-lop .pv-link,
html.porcelain .co-lop .ck2-xem,
html.porcelain .co-lop .email-phien .lk{
  font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-1);
  letter-spacing:0;text-transform:none;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px}
html.porcelain .co-lop .sl-o b{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  line-height:var(--lh-tight);letter-spacing:-.01em;color:var(--brand)}
html.porcelain .co-lop .sl-o b em{
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-regular);
  letter-spacing:.04em;text-transform:none;color:var(--text-2)}
html.porcelain .co-lop .of-phu,
html.porcelain .co-lop .tick-khoa span{
  font-family:var(--font-body);font-size:var(--fs-2);font-weight:var(--fw-regular);
  line-height:var(--lh-base);text-transform:none;color:var(--text-2)}
html.porcelain .co-lop .tick-khoa b{
  font-family:var(--font-body);font-size:var(--fs-2);font-weight:var(--fw-strong);
  text-transform:none;color:var(--text-2)}

/* nhãn mono — sentence case, tracking ≤.06em (mockup B13) */
html.porcelain .co-body .lb,html.porcelain .ck2-h{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  color:var(--text-2);text-transform:none}
html.porcelain .ck2-h{
  border-top:var(--bw-1) solid var(--line);padding-top:var(--s-4);
  margin:var(--s-4) 0 var(--s-3)}

/* R126e — DỄ ĐỌC (giữ nguyên markup + hình học sheet R80)
   1. Đo dòng: sheet 880px nhưng chữ chạy hết khổ là dòng 100+ ký tự —
      mắt lạc đầu dòng. Mọi đoạn văn dài kẹp 62ch (§ đo dòng DS).
   2. Nhịp section: các khối lớn cách nhau ĐỀU s-6, mỗi khối mở đầu bằng
      một nhãn mono + hairline — mắt chunk được trang thành từng "chương".
   3. Một điểm dừng giá: ck2-gia thành hộp nền surface-2 — chỗ duy nhất
      trong thẻ mà mắt phải dừng trước khi bấm CTA.
   4. Nhiễu phụ (meta, chip, trust line) lùi xuống text-3/fs-1. */
html.porcelain .co-lop .ck2-tiep,
html.porcelain .co-lop .of-tom,
html.porcelain .co-lop .of-phu,
html.porcelain .co-lop .ck2-qua .m,
html.porcelain .co-lop .of-ds li,
html.porcelain .co-lop .faq p,
html.porcelain .co-lop .pv-cap{max-width:62ch}
/* nhịp section đều — một hằng số cho mọi khối lớn trong co-body */
html.porcelain .co-lop .ck2-tiep{margin-bottom:var(--s-5)}
html.porcelain .co-lop .of-nhom{margin-bottom:var(--s-5)}
html.porcelain .co-lop .ck2-bd{margin:var(--s-5) 0}
html.porcelain .co-lop .ck2-h{
  padding-top:var(--s-6);margin:var(--s-6) 0 var(--s-4)}
html.porcelain .co-lop .pv,
html.porcelain .co-lop .bd,
html.porcelain .co-lop .kb{margin:0 0 var(--s-6)}
html.porcelain .co-lop .kb-k,
html.porcelain .co-lop .pv-k{
  display:block;border-top:var(--bw-1) solid var(--line);border-bottom:0;
  padding-top:var(--s-6);padding-bottom:0;margin-bottom:var(--s-4)}
/* thang bậc trong đầu thẻ gói: nhãn mờ → TÊN → tóm — meta/chip lùi hẳn */
html.porcelain .co-lop .of-ten{margin-top:var(--s-1)}
html.porcelain .co-lop .of-tom{margin-top:var(--s-2)}
html.porcelain .co-lop .of-meta{color:var(--text-3);margin-top:var(--s-2)}
html.porcelain .co-lop .of-chip{
  background:none;border:0;padding:0;margin-top:var(--s-2);
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3)}
/* điểm dừng giá — hộp chốt duy nhất trong thẻ */
html.porcelain .co-lop .ck2-gia{
  background:var(--surface-2);border:0;border-radius:var(--r-3);
  margin-top:var(--s-4);padding:var(--s-3) var(--s-4)}
html.porcelain .co-lop .of-tinh{
  background:var(--surface-2);border:0;border-radius:var(--r-3);
  margin-top:var(--s-4);padding:var(--s-3) var(--s-4)}
/* danh sách quà: cột số hẹp, giá 0đ dịu — nội dung tên quà là chính */
html.porcelain .co-lop .ck2-qua .p u{color:var(--text-2);font-weight:var(--fw-regular)}
html.porcelain .co-lop .ck2-qua-dai{margin-top:var(--s-5)}
/* footer: trust line lùi xuống — CTA và tổng tiền là hai thứ duy nhất đậm */
html.porcelain .co-lop .co-chan .co-tin{
  color:var(--text-3);border:0;padding:0;margin-top:var(--s-2);text-align:center}
/* tick chọn phần lẻ: dòng tổng là feedback — cho nó rõ */
html.porcelain .co-lop .tick-tong{
  font-family:var(--font-mono);font-size:var(--fs-2);color:var(--text);
  margin-top:var(--s-3)}

/* đơn + ưu đãi */
html.porcelain .co-tin{
  flex:none;text-align:left;border:var(--bw-1) solid var(--line);border-radius:var(--r-3);
  padding:var(--s-3) var(--s-4);margin-top:var(--s-2);
  font-family:inherit;font-size:var(--fs-2);letter-spacing:0;text-transform:none;color:var(--text)}
html.porcelain .uu-dai{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  background:var(--ok-subtle);border:0;border-radius:var(--r-3);
  padding:var(--s-2) var(--s-4);margin:var(--s-2) 0 var(--s-3)}
html.porcelain .ud-t{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  color:var(--ok);text-transform:none}
html.porcelain .ud-p{
  font-family:var(--font-body);font-size:var(--fs-1);letter-spacing:0;
  color:var(--text-2);text-transform:none}
html.porcelain .ud-so,html.porcelain .ud-thanh{display:none}

/* bump + email */
html.porcelain .co-bump{
  border:var(--bw-1) solid var(--line);border-radius:var(--r-3);
  background:var(--surface);padding:var(--s-3) var(--s-4);margin-top:var(--s-4);cursor:pointer}
html.porcelain .co-bump:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .co-bump input{accent-color:var(--brand)}
html.porcelain .co-bump b{
  font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-2);
  text-transform:none;color:var(--text)}
html.porcelain .co-bump span span{font-size:var(--fs-1);color:var(--text-2)}
html.porcelain .email-phien{
  font-size:var(--fs-2);padding:var(--s-2) var(--s-3);
  background:var(--surface);border:var(--bw-1) solid var(--line);border-radius:var(--r-3)}
html.porcelain .email-phien .lk,html.porcelain .lk{
  color:var(--brand);font-family:inherit;font-size:var(--fs-1);
  text-decoration:underline;text-underline-offset:3px}
html.porcelain .co-chan .in,html.porcelain .co-body .in{
  width:100%;box-sizing:border-box;border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);background:var(--surface);color:var(--text);
  font-family:var(--font-mono);font-size:var(--fs-2);padding:var(--s-3)}
html.porcelain .co-chan .in::placeholder{color:var(--text-3)}

/* footer sticky — nút pay = brand (mockup .btn-pay) */
html.porcelain .co-chan{
  position:sticky;bottom:0;z-index:6;background:var(--surface);
  border-top:var(--bw-1) solid var(--line);padding:var(--s-3) var(--gutter) var(--s-4);
  flex-direction:column;align-items:stretch;gap:var(--s-2)}
html.porcelain .co-chan .tong{
  display:flex;justify-content:space-between;align-items:baseline;flex:none;width:100%}
html.porcelain .co-chan .tong span,html.porcelain .co-chan .tong #co-tk{
  font-size:var(--fs-2);color:var(--text-2);letter-spacing:0;text-transform:none}
html.porcelain .co-chan .tong b,html.porcelain .co-chan .tong #co-tong{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-3);color:var(--text)}
html.porcelain .co-chan .btn-lg,html.porcelain .co-chan .btn,html.porcelain .co-chan #co-dat{
  width:100%;margin-top:var(--s-2);padding:var(--s-4);font-size:var(--fs-2);
  font-family:var(--font-display);font-weight:var(--fw-medium);
  letter-spacing:.02em;text-transform:none;border-radius:var(--r-4);
  background:var(--brand);color:var(--text-inv);border:0}
html.porcelain .co-chan .btn-lg:hover,html.porcelain .co-chan .btn:hover,html.porcelain .co-chan #co-dat:hover{
  background:color-mix(in oklab,var(--brand),var(--text) var(--state-hover));color:var(--text-inv);
  filter:none;opacity:1}
html.porcelain .co-chan .co-tin{
  display:block;text-align:center;font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.04em;color:var(--text-2);text-transform:none;margin-top:var(--s-1)}
html.porcelain .co-dem{color:var(--accent)}

/* ck2 offer cards — R126 calm */
html.porcelain .ck2-tiep{
  background:var(--info-subtle);border:var(--bw-1) solid var(--line);color:var(--text);
  font-size:var(--fs-2);line-height:var(--lh-base);padding:var(--s-3) var(--s-4);
  margin-bottom:var(--s-3);border-radius:var(--r-3)}
html.porcelain .ck2-tiep b{font-weight:var(--fw-medium);color:var(--text)}
html.porcelain .ck2-gia{
  border-top:var(--bw-1) solid var(--line);margin-top:var(--s-3);padding-top:var(--s-3);
  display:grid;gap:var(--s-1)}
html.porcelain .ck2-gia > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  font-size:var(--fs-2);color:var(--text)}
html.porcelain .ck2-gia s{color:var(--text-3)}
html.porcelain .ck2-gia .hi b{
  font-family:var(--font-mono);font-size:var(--fs-3);font-weight:var(--fw-bold);color:var(--brand)}
html.porcelain .ck2-gia .re b{color:var(--ok);font-family:var(--font-mono);font-weight:var(--fw-medium)}
html.porcelain .ck2-qua-dai{
  display:flex;align-items:baseline;gap:var(--s-3);margin-top:var(--s-4);
  padding-bottom:var(--s-2);border-bottom:var(--bw-1) solid var(--line)}
html.porcelain .ck2-qua-dai .n b{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2);font-weight:var(--fw-medium)}
html.porcelain .ck2-qua-dai .gia{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:0;
  text-transform:none;color:var(--text-2)}
html.porcelain .ck2-qua-dai .gia b{
  font-family:var(--font-mono);font-size:var(--fs-2);font-weight:var(--fw-bold);color:var(--text)}
html.porcelain .ck2-qua-hop{padding:0}
html.porcelain .ck2-qua{
  gap:var(--s-3);align-items:flex-start;padding:var(--s-3) 0;
  border-bottom:var(--bw-1) solid var(--line-soft)}
html.porcelain .ck2-qua:last-child{border-bottom:0;padding-bottom:var(--s-1)}
html.porcelain .ck2-qua .bia{
  flex:none;width:1.5em;font-family:var(--font-mono);font-size:var(--fs-1);
  font-weight:var(--fw-medium);color:var(--text-3);letter-spacing:0;margin-top:2px}
html.porcelain .ck2-qua .t{
  font-family:var(--font-body);font-weight:var(--fw-strong);
  font-size:var(--fs-2);line-height:var(--lh-tight);text-transform:none;color:var(--text)}
html.porcelain .ck2-qua .m{
  font-size:var(--fs-1);line-height:var(--lh-base);color:var(--text-2);margin-top:var(--s-1)}
html.porcelain .ck2-qua .rieng{
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-2);
  background:var(--surface-2);border:var(--bw-1) solid var(--line);padding:var(--s-1) var(--s-2);
  margin-top:var(--s-2);display:inline-block;text-transform:none}
html.porcelain .ck2-qua .p{text-align:right;white-space:nowrap}
html.porcelain .ck2-qua .p s{
  display:block;font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3)}
html.porcelain .ck2-qua .p u{
  display:block;font-family:var(--font-mono);font-size:var(--fs-2);font-weight:var(--fw-bold);
  color:var(--text);text-decoration:none}
html.porcelain .ck2-xem{
  color:var(--brand);font-family:var(--font-body);font-size:var(--fs-1);font-weight:var(--fw-medium);
  letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:3px;
  margin-top:var(--s-2);padding:0;background:none;border:0;cursor:pointer}
html.porcelain .ck2-bd{display:grid;gap:var(--s-2);margin:var(--s-4) 0}
html.porcelain .ck2-bd > div{
  display:flex;gap:var(--s-2);font-size:var(--fs-2);line-height:var(--lh-base);color:var(--text-2)}
html.porcelain .ck2-bd i{
  font-style:normal;font-weight:var(--fw-medium);color:var(--text-3);flex:none}

/* gói accordion trong checkout — R126 · nền theo thang sáng R126f (css_cards chốt) */
html.porcelain .of-nhom{display:grid;gap:var(--s-3);margin-bottom:var(--s-5)}
html.porcelain .of-nhom .of{
  border:var(--bw-1) solid var(--line);background:var(--surface-2);
  border-radius:var(--r-3);box-shadow:none!important;overflow:hidden}
html.porcelain .of-nhom .of:hover{border-color:var(--line-strong)}
html.porcelain .of-nhom .of[aria-pressed="true"]{
  background:var(--surface);
  border:var(--bw-2) solid var(--line-strong);box-shadow:none!important}
html.porcelain .of.of-uu{
  background:color-mix(in oklab,var(--surface),var(--brand) 4%);
  border:var(--bw-2) solid var(--line-strong)!important;box-shadow:none!important}
html.porcelain .of.of-uu[aria-pressed="true"]{border-color:var(--brand)!important}
html.porcelain .of-tag{
  position:absolute;top:0;right:0;z-index:1;
  background:var(--brand);color:var(--text-inv);
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-medium);
  letter-spacing:.04em;text-transform:none;padding:var(--s-1) var(--s-3)}
html.porcelain .of-tag.gold{
  background:var(--ok-subtle);color:var(--ok);border-bottom:var(--bw-1) solid var(--line)}
html.porcelain .of-h{
  gap:var(--s-3);padding:var(--s-4);align-items:flex-start;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html.porcelain .of-tag + .of-h{padding-top:calc(var(--s-4) + var(--s-3))}
html.porcelain .of-nhan{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2)}
html.porcelain .of-ten{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  line-height:var(--lh-tight);text-transform:none;color:var(--text);margin-top:var(--s-1)}
html.porcelain .of.of-uu .of-ten{font-size:var(--fs-2)}
html.porcelain .of-tom{
  font-size:var(--fs-2);color:var(--text-2);line-height:var(--lh-base);
  margin-top:var(--s-2);max-width:none}
html.porcelain .of-meta{
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3);margin-top:var(--s-2);
  letter-spacing:0;text-transform:none}
html.porcelain .of-chip{
  display:inline-block!important;margin-top:var(--s-2);
  background:var(--surface-2);color:var(--text-2);border:var(--bw-1) solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-regular);
  letter-spacing:0;text-transform:none;padding:var(--s-1) var(--s-2);border-radius:var(--r-2)}
html.porcelain .of-gia{text-align:right;white-space:nowrap}
html.porcelain .of-gia s{
  display:block;font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3);
  text-decoration:line-through}
html.porcelain .of-gia b{
  display:block;font-family:var(--font-mono);font-size:var(--fs-3);font-weight:var(--fw-bold);
  color:var(--brand);line-height:var(--lh-tight);letter-spacing:0}
html.porcelain .of-gia i{
  display:block;font-family:var(--font-mono);font-size:var(--fs-1);font-style:normal;
  letter-spacing:0;text-transform:none;color:var(--text-2);margin-top:var(--s-1)}
html.porcelain .of-mui{
  flex:none;width:28px;height:28px;border:var(--bw-1) solid var(--line);border-radius:var(--r-2);
  display:flex;align-items:center;justify-content:center}
html.porcelain .of-mui svg{width:14px;height:14px;stroke:var(--text-2)}
html.porcelain .of[aria-pressed="true"] .of-mui{
  background:var(--brand);border-color:var(--brand);transform:rotate(180deg)}
html.porcelain .of[aria-pressed="true"] .of-mui svg{stroke:var(--text-inv)}
html.porcelain .of-mo{display:none;padding:0 var(--s-4) var(--s-4)}
html.porcelain .of[aria-pressed="true"] .of-mo{display:block;animation:none!important}
html.porcelain .of-ds{list-style:none;margin:0;padding:0}
html.porcelain .of-ds li{
  display:flex;gap:var(--s-2);font-size:var(--fs-2);color:var(--text-2);
  padding:var(--s-1) 0;line-height:var(--lh-base)}
html.porcelain .of-ds li::before{
  content:"";flex:none;width:4px;height:4px;margin-top:.55em;
  background:var(--text-3);border-radius:var(--r-full);border:0}
html.porcelain .co-lop .pv-link{
  background:none;border:0;padding:0;margin-top:var(--s-3);cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-1);font-weight:var(--fw-medium);
  letter-spacing:0;text-transform:none;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px;display:block;text-align:left}
html.porcelain .co-lop .pv-link:hover{color:var(--brand-strong)}
html.porcelain .of-tinh{
  margin-top:var(--s-4);padding-top:var(--s-3);border-top:var(--bw-1) solid var(--line)}
html.porcelain .of-tinh div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  padding:var(--s-1) 0;font-size:var(--fs-2)}
html.porcelain .of-tinh span{color:var(--text-2)}
html.porcelain .of-tinh b{font-family:var(--font-mono);font-weight:var(--fw-medium);color:var(--text)}
html.porcelain .of-tinh b.hi{
  font-family:var(--font-mono);font-size:var(--fs-3);font-weight:var(--fw-bold);color:var(--brand)}
html.porcelain .of-tinh .tk{
  margin-top:var(--s-2);padding-top:var(--s-2);border-top:var(--bw-1) solid var(--line-soft)}
html.porcelain .of-tinh .tk span,html.porcelain .of-tinh .tk b{color:var(--ok);font-weight:var(--fw-medium)}
html.porcelain .tick{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-3)}
html.porcelain .tick label{
  padding:var(--s-3);border:var(--bw-1) solid var(--line);background:var(--surface);
  border-radius:var(--r-3);font-size:var(--fs-2)}
html.porcelain .tick label:hover{border-color:var(--line-strong)}
html.porcelain .tick b{
  font-family:var(--font-body);font-weight:var(--fw-strong);font-size:var(--fs-2);
  text-transform:none;color:var(--text)}
html.porcelain .tick span{font-size:var(--fs-1);color:var(--text-2)}
html.porcelain .tick-tong{
  margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--fs-1);
  color:var(--text-2);letter-spacing:0;text-transform:none}

/* bằng chứng / FAQ / preview trong checkout — R126 */
html.porcelain .co-lop .pv{margin-bottom:var(--s-5)}
html.porcelain .co-lop .pv-k{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2)}
html.porcelain .co-lop .pv-h{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  line-height:var(--lh-tight);text-transform:none;color:var(--text);margin:var(--s-1) 0 var(--s-3)}
html.porcelain .co-lop .pv-cap{
  font-size:var(--fs-2);color:var(--text-2);line-height:var(--lh-base);margin-top:var(--s-3)}
html.porcelain .bd{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);overflow:hidden;margin-bottom:var(--s-5)}
html.porcelain .bd-o{
  background:var(--surface);padding:var(--s-3) var(--s-4);color:var(--text)}
html.porcelain .bd-o b{
  font-family:var(--font-body);font-weight:var(--fw-strong);font-size:var(--fs-2);
  text-transform:none;line-height:var(--lh-tight);color:var(--text)}
html.porcelain .bd-o span{
  display:block;font-size:var(--fs-1);color:var(--text-2);line-height:var(--lh-base);margin-top:var(--s-1)}
html.porcelain .kb{margin-bottom:var(--s-5)}
html.porcelain .kb-k{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2);padding-bottom:var(--s-2);
  border-bottom:var(--bw-1) solid var(--line);margin-bottom:var(--s-3)}
html.porcelain .sl{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
html.porcelain .sl-o b{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  line-height:var(--lh-tight);letter-spacing:-.01em;color:var(--brand)}
html.porcelain .sl-o b em{
  font-style:normal;font-family:var(--font-mono);font-size:var(--fs-1);
  font-weight:var(--fw-medium);letter-spacing:0;text-transform:none;color:var(--text-2);
  margin-left:var(--s-1)}
html.porcelain .sl-o span{
  display:block;font-size:var(--fs-1);color:var(--text-2);line-height:var(--lh-base);margin-top:var(--s-2)}
html.porcelain .faq details{border-bottom:var(--bw-1) solid var(--line-soft)}
html.porcelain .faq summary{
  padding:var(--s-3) 0;font-family:var(--font-body);font-weight:var(--fw-strong);
  font-size:var(--fs-2);text-transform:none;line-height:var(--lh-tight);color:var(--text)}
html.porcelain .faq summary:hover{color:var(--text-2)}
html.porcelain .faq summary i::before,html.porcelain .faq summary i::after{background:var(--text-3)}
html.porcelain .faq details[open] summary{color:var(--brand)}
html.porcelain .faq p{
  font-size:var(--fs-2);color:var(--text-2);line-height:var(--lh-base);
  padding:0 0 var(--s-3);max-width:none}
html.porcelain .co-lop .co-email{margin-top:0}
html.porcelain .co-lop .email-phien{
  font-size:var(--fs-2);padding:var(--s-2) var(--s-3);
  background:var(--surface-2);border:var(--bw-1) solid var(--line);border-radius:var(--r-3);
  color:var(--text)}
html.porcelain .co-lop .email-phien b{font-weight:var(--fw-medium)}
@media (max-width:640px){
  html.porcelain .co-lop .bd,html.porcelain .co-lop .sl{grid-template-columns:1fr}
  html.porcelain .co-lop .tick{grid-template-columns:1fr}
  html.porcelain .co-chan .tong b,html.porcelain .co-chan .tong #co-tong{font-size:var(--fs-2)}
}

/* QR (B14) — thẻ trắng, quiet zone lớn, mô-đun đậm */
html.porcelain .qr-wrap{padding:var(--s-2) 0;text-align:center}
html.porcelain .qr-box{
  width:min(280px,78vw)!important;height:auto!important;margin:0 auto;
  background:var(--surface);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);padding:var(--s-5);box-sizing:border-box}
html.porcelain .qr-box img{
  display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  background:var(--surface)}
html.porcelain .qr-tt{
  max-width:100%;margin:var(--s-3) 0 0;font-size:var(--fs-2);text-align:left}
html.porcelain .qr-tt div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  padding:var(--s-2) 0;border-bottom:var(--bw-1) solid var(--line-soft)}
html.porcelain .qr-tt span{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;color:var(--text-2)}
html.porcelain .qr-tt b{font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-2);color:var(--text)}
html.porcelain .qr-note{
  font-size:var(--fs-1);color:var(--text-2);font-style:normal;line-height:var(--lh-base);
  margin:var(--s-3) 0 0;text-align:left}
html.porcelain .qr-bonus{
  display:flex;gap:var(--s-2);align-items:flex-start;
  border:0;background:transparent;padding:0;margin-top:var(--s-4);
  font-size:var(--fs-1);color:var(--text-2);max-width:100%;text-align:left}
html.porcelain .qr-tay-lk{
  display:block;width:100%;margin-top:var(--s-4);border:var(--bw-1) solid var(--line);
  background:none;color:var(--brand);cursor:pointer;font-size:var(--fs-2);
  border-radius:var(--r-3);padding:var(--s-3);text-align:center}
html.porcelain .qr-tay-lk:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .qr-tay{
  border:var(--bw-1) solid var(--line);border-radius:var(--r-3);
  background:var(--surface);padding:0;margin-top:var(--s-3);text-align:left}
html.porcelain .qr-tay > div{
  display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border-bottom:var(--bw-1) solid var(--line-soft)}
html.porcelain .qr-tay > div:last-child{border-bottom:0}
html.porcelain .qr-tay span{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  color:var(--text-2);width:7em;flex:none}
html.porcelain .qr-tay b{font-family:var(--font-mono);font-size:var(--fs-2);color:var(--text);font-weight:var(--fw-medium)}
html.porcelain .qr-tay .lk-copy{
  margin-left:auto;border:var(--bw-1) solid var(--line);border-radius:var(--r-2);
  background:none;color:var(--brand);cursor:pointer;font-size:var(--fs-1);padding:var(--s-1) var(--s-3)}
html.porcelain .qr-tay .lk-copy:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .qr-hotro{font-size:var(--fs-1);color:var(--text-2);margin-top:var(--s-4);text-align:left}
html.porcelain .qr-hotro a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* thành công + exit (B15/B16) — mockup ok-* */
html.porcelain .ok-wrap{padding:var(--s-5) 0;text-align:center}
html.porcelain .ok-vong{
  width:64px;height:64px;margin:0 auto;background:var(--ok-subtle);border-radius:var(--r-full);
  display:grid;place-items:center;color:var(--ok)}
html.porcelain .ok-vong svg{stroke:var(--ok);width:var(--icon-4);height:var(--icon-4)}
html.porcelain .ok-wrap h3{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  text-transform:none;letter-spacing:-.01em;line-height:var(--lh-tight);color:var(--text);
  margin:var(--s-3) 0 0}
html.porcelain .ok-wrap p{
  font-family:var(--font-body);font-size:var(--fs-2);font-weight:var(--fw-regular);
  color:var(--text-2);line-height:var(--lh-base);margin:var(--s-3) auto 0;max-width:48ch}
html.porcelain .ok-buoc{
  display:flex;flex-direction:column;gap:var(--s-3);text-align:left;max-width:100%;
  margin:var(--s-5) 0 0}
html.porcelain .ok-buoc div{
  display:flex;gap:var(--s-3);align-items:flex-start;
  font-size:var(--fs-2);color:var(--text);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);padding:var(--s-3) var(--s-4);border-bottom:var(--bw-1) solid var(--line)}
html.porcelain .ok-buoc b{
  flex:none;width:26px;height:26px;display:grid;place-items:center;
  color:var(--accent);font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-medium);
  border:var(--bw-1) solid var(--line);border-radius:var(--r-full)}

/* preview mẫu overlay */
html.porcelain .mau-lop{background:color-mix(in oklab,var(--surface-inv) 55%, transparent)}
html.porcelain .mau-hop{
  background:var(--surface);border:var(--bw-1) solid var(--line);box-shadow:var(--sh-3)}
html.porcelain .mau-top{
  background:var(--surface);color:var(--text-2);border-bottom:var(--bw-1) solid var(--line)}
html.porcelain .mau-top .ml-dong{color:var(--text)}
html.porcelain .mau-hop iframe{background:var(--surface)}
html.porcelain .mau-cho{background:var(--surface);color:var(--text-2)}
html.porcelain .mau-cho span{border-color:var(--line);border-top-color:var(--brand)}
html.porcelain .exp-lop{background:color-mix(in oklab,var(--surface-inv) 55%, transparent)}
html.porcelain .exp-hop{
  background:var(--surface);border:var(--bw-1) solid var(--line);box-shadow:var(--sh-3)}
html.porcelain .exp-kick{color:var(--text-2)}
html.porcelain .exp-tit{text-transform:none;color:var(--text)}
html.porcelain .exp-cham span.on{background:var(--brand)}
html.porcelain .bgn{display:none}
html.porcelain .qz-back{
  border:var(--bw-1) solid var(--line);background:none;color:var(--text);
  font-size:var(--fs-2);border-radius:var(--r-3);padding:var(--s-3)}
html.porcelain .qz-back:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .tick-khoa svg{color:var(--accent)}
html.porcelain .of-b{background:var(--surface-2);border-color:var(--line)}
html.porcelain .of-b-k{color:var(--text-2)}
html.porcelain .chon-ban{border-color:var(--line);background:var(--surface-2)}
html.porcelain .cb-nhan{color:var(--text-2)}
html.porcelain .cb-nay{background:var(--brand);color:var(--text-inv);border-color:var(--brand)}

/* ---- B5 lễ reveal: night hero → giấy đọc (dốc đêm→giấy) ----
   .md-night nằm TRONG .dai-dem.night nên mọi var() ở đây là token đêm:
   --text kem, --text-2 dim, --accent brass. KHÔNG dùng --text-inv trong
   zone night — _legacy() của style_man_hinh alias nó về var(--bg) (chữ
   nghịch của đêm là màu TỐI, dành cho chữ trên nút sáng) — đặt lên nền
   đêm là tối-trên-tối, đã dính 09/08. */
html.porcelain .md.md-night,html.porcelain section.md.md-night{
  margin:0;padding:var(--s-7) 0 var(--s-6);
  color:var(--text);border-radius:0;position:relative;overflow:hidden;
  background:none}
html.porcelain .md-in{position:relative;max-width:min(640px,100%);margin:0 auto;text-align:center}
html.porcelain .md-ten,html.porcelain .md-in h1{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  line-height:1.15;letter-spacing:-.01em;text-transform:none;color:var(--text);margin:0}
html.porcelain .md-meta{
  margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.04em;color:var(--text-2);text-transform:none}
html.porcelain .md-night .md-nhan{
  display:inline-flex;gap:var(--s-2);align-items:baseline;justify-content:center;
  margin:0 0 var(--s-4);padding:var(--s-2) var(--s-4);
  border:var(--bw-1) solid var(--line);border-radius:999px;
  background:color-mix(in oklab,var(--text) var(--a-1),transparent);
  font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.04em;color:var(--text-2);text-transform:none}
html.porcelain .md-night .md-nhan .l{text-transform:uppercase;letter-spacing:.14em}
html.porcelain .md-night .md-nhan .v{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  letter-spacing:-.01em;text-transform:none;color:var(--accent)}
html.porcelain .b5-wheel{
  display:block;margin:0 auto;width:100%;max-width:100%}
html.porcelain .b5-wheel svg{display:block;width:100%;height:auto;max-height:none}
/* bản đồ sao B5: bánh xe + chú giải cùng khối trong dải đêm (không .bx porcelain rời) */
html.porcelain .dai-dem .b5-laso{margin:0 auto;max-width:100%;text-align:left}
html.porcelain .dai-dem .b5-laso .bx-chu{
  margin-top:var(--s-4);padding-top:var(--s-3);border-top:var(--bw-1) solid var(--line);
  display:grid;gap:var(--s-2)}
html.porcelain .dai-dem .b5-laso .bx-chu div{
  display:flex;gap:var(--s-3);font-size:var(--fs-2);line-height:var(--lh-loose);color:var(--text-2)}
html.porcelain .dai-dem .b5-laso .bx-chu u{
  flex:none;text-decoration:none;font-family:var(--font-display);
  font-weight:var(--fw-bold);color:var(--accent)}
html.porcelain .md-night .bx-doi{
  margin:var(--s-2) auto 0;display:inline-flex;border:var(--bw-1) solid var(--line-2);
  background:none;color:var(--text-2);
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  border-radius:var(--r-2);padding:var(--s-1) var(--s-3);cursor:pointer}
html.porcelain .b5-conv{
  margin:var(--s-3) 0 0;font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.04em;color:var(--text-2);text-transform:none}
html.porcelain .b3,html.porcelain .md-tru{
  margin:var(--s-5) auto 0;max-width:400px;text-align:left;
  display:flex;flex-direction:column;gap:0}
/* `flex-direction` PHẢI khai ở đây. Khối này mượn tên class `md-tru`, mà
   `.md-tru div` trong CSS bài khai `display:flex;flex-direction:column` cho
   lưới bốn ô của nó. Luật porcelain thắng ở `display` nhưng KHÔNG khai
   `flex-direction`, nên hướng cột rò sang: mỗi dòng Big Three xếp dọc thành
   glyph / nhãn / giá trị / độ và cao 132px thay vì 48px — đúng chỗ Duc nói
   "bố cục hơi off". Khai rõ hướng hàng là hết. */
html.porcelain .b3-row,html.porcelain .md-tru .b3-row{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
  gap:var(--s-3);padding:var(--s-2) 2px;min-height:52px;
  border:0;border-top:var(--bw-1) solid var(--line);
  border-radius:0;background:transparent;padding-left:2px;padding-right:2px}
html.porcelain .b3-row:first-child{border-top:0}
html.porcelain .b3-row svg{
  width:var(--icon-2);height:var(--icon-2);flex:none;color:var(--accent);
  stroke:var(--accent);fill:none}
html.porcelain .b3-row.dim svg{color:var(--text-2);stroke:currentColor}
html.porcelain .b3-row .t,html.porcelain .b3-row .l{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  color:var(--text-2);width:86px;flex:none;text-transform:none}
html.porcelain .b3-row .v,html.porcelain .b3-row .g{
  font-weight:var(--fw-medium);color:var(--text);text-transform:none;
  font-family:var(--font-body);font-size:var(--fs-2)}
html.porcelain .b3-row .n,html.porcelain .b3-row .h{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-1);
  color:var(--text-2);text-transform:none}
/* Bỏ dòng tên cung thì số thứ tự và nhãn phải tự đứng thành đầu mục. */
html.porcelain .bl-gon .bl-nhan{
  font-size:var(--fs-2);color:var(--text);letter-spacing:.02em;text-transform:none}
html.porcelain .bl-gon .bl-o p{margin-top:var(--s-1)}
html.porcelain .b5-lop{
  margin:var(--s-5) auto 0;max-width:460px;text-align:left;
  border-top:var(--bw-1) solid var(--line);padding-top:var(--s-4)}
html.porcelain .b5-lop .bl-ds{margin:0}
html.porcelain .b5-lop .bl-kick{
  display:block;margin:0 0 var(--s-4);font-family:var(--font-mono);
  font-size:var(--fs-1);letter-spacing:.14em;text-transform:uppercase}

/* entrance lễ — 1 lần/phiên; .cut = xem ngay / đã xem / reduce */
html.js .md-night .st{opacity:0;transform:translateY(12px);
  transition:opacity .7s cubic-bezier(.22,.61,.21,1) var(--d,0s),
    transform .7s cubic-bezier(.22,.61,.21,1) var(--d,0s)}
html.js .md-night.play .st{opacity:1;transform:none}
html.js .md-night.cut .st{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  html.js .md-night .st{opacity:1;transform:none;transition:none}}

/* porcelain — hướng dẫn đọc (không chuyển động) */
html.porcelain .md-paper{
  max-width:480px;margin:0 auto;padding:var(--s-6) var(--gutter) var(--s-7)}
html.porcelain .md-paper h2{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  letter-spacing:-.01em;margin:0;color:var(--text);text-transform:none}
html.porcelain .md-cau{
  margin:var(--s-3) 0 0;font-size:var(--fs-2);color:var(--text-2);line-height:var(--lh-base);
  text-wrap:pretty}
html.porcelain .md-chi{
  display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-4);
  padding-top:0;border-top:0}
html.porcelain .md-chi .chi{display:flex;gap:var(--s-3);align-items:flex-start}
html.porcelain .md-chi .so{
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--accent);
  border:var(--bw-1) solid var(--line);border-radius:var(--r-full);
  width:26px;height:26px;flex:none;display:grid;place-items:center}
html.porcelain .md-chi p{margin:0}
html.porcelain .md-chi .chi-t{font-weight:var(--fw-medium);color:var(--text)}
html.porcelain .md-chi .chi-p{font-size:var(--fs-1);color:var(--text-2)}
html.porcelain .md-cta{
  display:block;width:100%;margin-top:var(--s-5);text-align:center;text-decoration:none;
  background:var(--brand);color:var(--text-inv);font-family:var(--font-display);
  font-weight:var(--fw-medium);font-size:var(--fs-2);letter-spacing:.02em;
  border-radius:var(--r-4);padding:var(--s-4);box-sizing:border-box}
html.porcelain .md-cta:hover{
  background:color-mix(in oklab,var(--brand),var(--text) var(--state-hover));color:var(--text-inv)}
html.porcelain .md-phu{text-align:center;margin-top:var(--s-3);font-size:var(--fs-1)}
html.porcelain .md-phu a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}

/* ---- B18: thanh dính + FAB + mục lục ---- */
html.porcelain .stick{
  background:color-mix(in oklab,var(--surface) 92%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text);border-top:var(--bw-1) solid var(--line);box-shadow:var(--sh-2)}
html.porcelain .stick-t{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  text-transform:none;letter-spacing:-.01em;color:var(--text)}
html.porcelain .stick-p{font-size:var(--fs-1);color:var(--text-2);margin-top:2px}
html.porcelain .stick-km{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.06em;
  color:var(--ok);background:var(--ok-subtle);border-radius:var(--r-2);padding:var(--s-1) var(--s-2)}
html.porcelain .stick .cta-mo,html.porcelain .stick .btn{
  font-family:var(--font-display);font-weight:var(--fw-medium);letter-spacing:.04em}
html.porcelain .fab{
  background:var(--surface);border:var(--bw-1) solid var(--line);color:var(--brand);
  box-shadow:var(--sh-2);border-radius:var(--r-full)}
html.porcelain .fab svg{stroke:var(--brand)}
html.porcelain .ml-lop{background:color-mix(in oklab,var(--surface-inv) 55%, transparent)}
html.porcelain .ml{
  background:var(--surface);color:var(--text);padding:0;
  display:flex;flex-direction:column;height:100%;max-height:100dvh;overflow:hidden}
html.porcelain .ml-top{
  padding:var(--s-5) var(--gutter) var(--s-3);
  border-bottom-color:var(--line);background:var(--surface)}
html.porcelain .ml-ruot{padding:0 var(--gutter) var(--s-5);flex:1;min-height:0;overflow-y:auto}
html.porcelain .ml-top h3{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  text-transform:none;color:var(--text)}
html.porcelain .ml-dong{color:var(--text-2)}
html.porcelain .ml-phan-ten span{color:var(--accent)}
html.porcelain .ml-phan-ten b{text-transform:none;font-size:var(--fs-2)}
html.porcelain .ml a{color:var(--text-2);border-bottom-color:var(--line-soft);font-size:var(--fs-2)}
html.porcelain .ml a:hover{color:var(--brand)}
html.porcelain .ml a i{color:var(--text-3)}

/* biểu đồ / bảng trong bài */
html.porcelain .tbl-wrap{
  overflow-x:auto;border:var(--bw-1) solid var(--line);border-radius:var(--r-3)}
html.porcelain .tbl{font-size:var(--fs-1)}
html.porcelain .tbl th{
  font-family:var(--font-display);font-weight:var(--fw-medium);letter-spacing:.08em;
  color:var(--text-2);border-bottom-color:var(--line)}
html.porcelain .tbl td{border-bottom-color:var(--line-soft)}
html.porcelain .chart{border:var(--bw-1) solid var(--line);border-radius:var(--r-3);padding:var(--s-4)}
html.porcelain .chart .c-note{color:var(--text-3)}
html.porcelain .st-track{background:var(--surface-2)}
html.porcelain .canh{background:var(--warn-subtle);border-radius:var(--r-3)}
html.porcelain .canh .ic{color:var(--warn)}
html.porcelain .he-fade{background:linear-gradient(color-mix(in oklab,var(--bg) 0%,transparent),var(--bg))}
html.porcelain .skel-line{background:color-mix(in oklab,var(--text-2) var(--a-2),transparent)}

/* ---- B19 góp ý (.gy-*) ---- */
html.porcelain .gy{
  border-top:var(--bw-1) solid var(--line-soft);padding-top:var(--s-4);margin-top:var(--s-4)}
html.porcelain .gy-k,html.porcelain .gy-hoi{
  font-size:var(--fs-1);color:var(--text-2);letter-spacing:0;text-transform:none}
html.porcelain .gy-chon button{
  border:var(--bw-1) solid var(--line);background:var(--surface);color:var(--text);
  font-size:var(--fs-1);border-radius:var(--r-full);padding:var(--s-2) var(--s-4)}
html.porcelain .gy-chon button:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .gy-chon button[aria-pressed="true"]{
  background:var(--brand);border-color:var(--brand);color:var(--text-inv)}
html.porcelain .gy-ta{
  border:var(--bw-1) solid var(--line);border-radius:var(--r-3);background:var(--surface);
  color:var(--text);font-size:var(--fs-2);padding:var(--s-3)}
html.porcelain .gy-ta::placeholder{color:var(--text-3)}
html.porcelain .gy-nho{font-size:var(--fs-1);color:var(--text-3)}
html.porcelain .gy-cam{font-size:var(--fs-1);font-style:normal;color:var(--ok)}

/* hình mẫu (.hm) — tiêu đề archetype = XL cùng bìa SKU */
html.porcelain .hm-ten{
  font-family:var(--font-display);font-weight:var(--fw-hero);font-size:var(--fs-4);
  line-height:var(--lh-tight);letter-spacing:-.015em;text-transform:none;color:var(--text);
  margin:var(--s-2) 0 0;text-wrap:pretty}

/* ml100 trong bài */
html.porcelain .ml100-phu{font-size:var(--fs-2);color:var(--text-2);font-style:normal}
html.porcelain .ml100-phan{border-color:var(--line-soft)}
html.porcelain .ml100-h{overflow:visible}
html.porcelain .ml100-h > b{
  color:var(--text);text-transform:none;font-weight:var(--fw-bold)}
html.porcelain .ml100-h > i{
  color:var(--text-3);font-style:normal;font-family:var(--font-mono);font-size:var(--fs-1)}
html.porcelain .ml100-h .mui{
  font-size:0!important;letter-spacing:0!important;line-height:0!important;
  width:9px!important;height:9px!important;flex-shrink:0!important;
  margin-inline:8px 3px!important;overflow:visible!important;
  border-right:var(--bw-2) solid var(--accent)!important;
  border-bottom:var(--bw-2) solid var(--accent)!important;
  transform:rotate(45deg)!important;transition:transform .18s!important}
html.porcelain .ml100-phan.gap .ml100-h .mui{transform:rotate(-45deg)!important}
html.porcelain section.muc{scroll-margin-top:72px}

/* chân trang bài SPA — links pháp lý tối thiểu */
html.porcelain .ft-bai{
  margin-top:var(--s-8);padding:var(--s-5) 0 var(--s-7);
  border-top:var(--bw-1) solid var(--line-soft)}
html.porcelain .ft-bai-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3)}
html.porcelain .ft-bai-in a{color:var(--text-2);text-decoration:none}
html.porcelain .ft-bai-in a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* cc-big — số + nhãn cùng baseline */
html.porcelain .cc-big{
  display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;
  gap:0.35em 0.5em!important;text-transform:none!important}
html.porcelain .cc-big i{margin-left:0!important}

@media (max-width:699px){
  .brand-khoi,.spa-bar .brand-khoi{
    min-height:44px;display:inline-flex;align-items:center;padding:6px 0}
  .spa-bar .tb-nav{display:inline-flex;align-items:center;min-height:44px;padding:8px 4px;
    white-space:nowrap}
  .spa-bar-in{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .spa-bar-in::-webkit-scrollbar{display:none}
  html.porcelain .stick-in{padding:8px 14px!important;gap:10px!important}
  html.porcelain .stick-t{font-size:var(--fs-1)!important;line-height:1.2!important}
  html.porcelain .stick-km{padding:2px 6px!important;margin-bottom:2px!important}
  html.porcelain body.co-stick{padding-bottom:68px!important}
  html.porcelain .fab,body.co-stick .fab{
    bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
    right:12px!important;width:46px!important;height:46px!important}
  html.porcelain .hcc-ds a{
    min-height:44px;padding:12px 0!important;
    display:flex;flex-direction:column;justify-content:center}
  html.porcelain .pv-link{
    min-height:44px;padding:10px 0;display:inline-flex;align-items:center}
  html.porcelain .of-h,html.porcelain .of-nhom .of{min-height:44px}
  html.porcelain .cta-mo,html.porcelain .stick .cta-mo{
    min-height:44px;padding:12px var(--s-4)}
  html.porcelain .co-x,html.porcelain .co-dem{
    min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  html.porcelain .gy-chon button,html.porcelain .bx-doi{
    min-height:44px;padding:10px 16px}
  html.porcelain .ck2-xem{min-height:44px;padding:10px 0;display:inline-flex;align-items:center}
}

/* ---- typography: 4 cỡ (mockup b06/b18 + tokens.css) ----
   S (--fs-1) caption/mono · M (--fs-2) body + tiêu đề mục ·
   L (--fs-3) tiêu đề khối/card · XL (--fs-4) hero bìa + hình mẫu. */
html.porcelain{font-size:var(--fs-2)}
html.porcelain body{font-size:var(--fs-2)}

/* XL — hero display: tiêu đề SKU bìa + archetype hình mẫu */
html.porcelain .screen-cover .h1,html.porcelain .hm-ten{
  font-size:var(--fs-4)!important}

/* S — caption/mono (ghi đè px 8–14pt legacy) */
html.porcelain .cover-eyebrow,html.porcelain .cover-meta,html.porcelain .cover-foot,
html.porcelain .screen-cover .kicker,html.porcelain .screen-cover .ct-lbl,
html.porcelain .mod-num,html.porcelain .mod-sub,
html.porcelain section.muc > h3 .mnum,
html.porcelain .dan-ml-k,html.porcelain .ml100-kick,html.porcelain .ml100-h > span:not(.mui),
html.porcelain .bl-kick,html.porcelain .bl-nhan,html.porcelain .bl-so,
html.porcelain .hcc-kick,html.porcelain .dt-kick,html.porcelain .b5-conv,
html.porcelain .cc-kick,html.porcelain .faq-k,html.porcelain .hm-kick,
html.porcelain .fs-lbl,html.porcelain .fs-kick,
html.porcelain .tq-k,
html.porcelain .md-meta,html.porcelain .b3-row .t,html.porcelain .b3-row .l,
html.porcelain .b3-row .n,html.porcelain .b3-row .h,
html.porcelain .bx-kick,html.porcelain .cta-cuoi .nho,
html.porcelain .stick-p,html.porcelain .gd-dai-chu,
html.porcelain #mau-nhan,html.porcelain .spa-bar .brand-sub,
html.porcelain .tb-nav,html.porcelain .screen-cover .ct-gz,
html.porcelain .c-title,html.porcelain .c-note,
html.porcelain .unlock .cnt,html.porcelain .tru-label,html.porcelain .tru-dl dt,
html.porcelain .tc-head,html.porcelain .tc-meta,html.porcelain .dt-label,
html.porcelain .st-label,html.porcelain .hm-gz,html.porcelain .hm-nhan,
html.porcelain .hm-net .l,html.porcelain .cc-meta,
html.porcelain .ml100-h > i,
html.porcelain .tl-age,html.porcelain .chip,html.porcelain .toc-num,html.porcelain .toc-page,
html.porcelain .gd-diem span,html.porcelain .gd-meta,html.porcelain .gd-bo .gd-l,
html.porcelain .gd-bo .gd-e,html.porcelain .gd-vs-t,html.porcelain .gd-mot-chieu,
html.porcelain .qz-dem,html.porcelain .qz-xen .nhan,html.porcelain .qz-xn dt{
  font-size:var(--fs-1)!important}

/* L — tiêu đề khối/card (--fs-3, mockup b18) */
html.porcelain .mod-title,html.porcelain .dan-ml h2,html.porcelain .ml100 h2,
html.porcelain .cta-cuoi h3,html.porcelain .dt h2,html.porcelain .hcc h2,
html.porcelain .bl-ten,html.porcelain .of-ten,html.porcelain .faq-h h3,
html.porcelain .cc-h h3,html.porcelain .gy h4,html.porcelain .fs-wrap > h2,
html.porcelain .fs-tit,html.porcelain .cc-big,html.porcelain .md-ten,
html.porcelain .pv-tieu-de,html.porcelain .gd-xong h3,html.porcelain .tq-nhan{
  font-size:var(--fs-3)!important}

/* M — body + tiêu đề mục (ghi đè 15–21px legacy) */
html.porcelain #report{font-size:var(--fs-2)}
html.porcelain .cover-name,
html.porcelain section.muc > h3,html.porcelain .muc-body p,
html.porcelain .ml100-h > b,
html.porcelain .pull,
html.porcelain .faq summary,html.porcelain .bx-chu div,
html.porcelain .dai-dem .b5-laso .bx-chu div,
html.porcelain .stick-t,
html.porcelain .spa-bar .brand,html.porcelain .gd-dai-nut,
html.porcelain .tbl,html.porcelain .tbl th,html.porcelain .tbl .t-gz,
html.porcelain .note,html.porcelain .teaser p,
html.porcelain #report p,html.porcelain #report li,html.porcelain .mod-sec,
html.porcelain .mod-body p,html.porcelain .pitem,html.porcelain .pitem-bang,
html.porcelain .blur-list .bt,html.porcelain .unlock p,html.porcelain .err-inline,
html.porcelain .tru-tt,html.porcelain .tru-dl,html.porcelain .st-val,
html.porcelain .hc-title,html.porcelain .hc-desc,html.porcelain .tl-title,
html.porcelain .toc-name,html.porcelain .toc-list li,
html.porcelain .gd-diem b,html.porcelain .gd-diem em,html.porcelain .gd-bo .gd-v,
html.porcelain .gd-bo,html.porcelain .gd-xen p,
html.porcelain .gd-xong p,html.porcelain .qz-chuong,html.porcelain .qz-phu,
html.porcelain .qz-op .t,html.porcelain .qz-op .p,html.porcelain .qz-xen p,
html.porcelain .qz-xn dd{
  font-size:var(--fs-2)!important}

/* ---- weight: 2 cờ + hero (Duc xiết 09/08) ----
   regular 400 · strong 600 · hero 700 (Archivo bìa + hình mẫu). */
html.porcelain .screen-cover .h1,html.porcelain .hm-ten{
  font-weight:var(--fw-hero)!important}
html.porcelain .cover-name,html.porcelain .mod-title,
html.porcelain section.muc > h3,html.porcelain .dan-ml h2,html.porcelain .ml100 h2,
html.porcelain .cta-cuoi h3,html.porcelain .md-ten,html.porcelain .dt h2,
html.porcelain .hcc h2,html.porcelain .bl-ten,html.porcelain .of-ten,
html.porcelain .faq-h h3,html.porcelain .cc-h h3,html.porcelain .gy h4,
html.porcelain .fs-wrap > h2,
html.porcelain .pv-tieu-de,html.porcelain .stick-t,html.porcelain .spa-bar .brand,
html.porcelain .gd-dai-nut,html.porcelain .faq summary,html.porcelain .bx-chu div,
html.porcelain .dai-dem .b5-laso .bx-chu div,html.porcelain .md-night .md-nhan .v,
html.porcelain .ml100-h > b,
html.porcelain .qz-hoi,html.porcelain .qz-xen h3,html.porcelain .qz-xn dd,
html.porcelain .gd-diem b,html.porcelain .gd-diem em,html.porcelain .gd-bo .gd-v,
html.porcelain .gd-xong h3,html.porcelain .btn,html.porcelain .cta-mo,
html.porcelain .hc-title,html.porcelain .unlock .cta-mo,html.porcelain .tq-nhan{
  font-weight:var(--fw-strong)!important}
html.porcelain #report p,html.porcelain #report li,html.porcelain .muc-body p,
html.porcelain .mod-body p,html.porcelain .mod-sec,html.porcelain .pitem,
html.porcelain .pitem-bang,html.porcelain .note,html.porcelain .teaser p,
html.porcelain .pull,html.porcelain .blur-list .bt,html.porcelain .unlock p,
html.porcelain .err-inline,html.porcelain .tru-dl,html.porcelain .hc-desc,
html.porcelain .tl-title,html.porcelain .toc-name,html.porcelain .toc-list li,
html.porcelain .gd-bo,html.porcelain .gd-xen p,html.porcelain .gd-xong p,
html.porcelain .qz-phu,html.porcelain .qz-op .t,html.porcelain .qz-op .p,
html.porcelain .qz-xen p,html.porcelain .bl-o p,html.porcelain .bl-phu{
  font-weight:var(--fw-regular)!important}

/* ---- nhãn: không all-caps, tracking ≤ .06em ---- */
html.porcelain .cover-eyebrow,html.porcelain .cover-meta,html.porcelain .cover-foot,
html.porcelain .screen-cover .kicker,html.porcelain .screen-cover .ct-lbl,
html.porcelain .mod-num,html.porcelain .mod-sub,
html.porcelain section.muc > h3 .mnum,
html.porcelain .dan-ml-k,html.porcelain .ml100-kick,html.porcelain .ml100-h > span:not(.mui),
html.porcelain .bl-kick,html.porcelain .bl-nhan,html.porcelain .bl-so,
html.porcelain .hcc-kick,html.porcelain .dt-kick,html.porcelain .b5-conv,
html.porcelain .cc-kick,html.porcelain .faq-k,html.porcelain .hm-kick,
html.porcelain .fs-lbl,html.porcelain .fs-kick,
html.porcelain .md-meta,html.porcelain .md-night .md-nhan,
html.porcelain .b3-row .t,html.porcelain .b3-row .l,
html.porcelain .b3-row .n,html.porcelain .b3-row .h,
html.porcelain .bx-kick,html.porcelain .cta-cuoi .nho,
html.porcelain .stick-p,html.porcelain .gd-dai-chu,
html.porcelain #mau-nhan,html.porcelain .spa-bar .brand-sub,
html.porcelain .tb-nav,html.porcelain .c-title,html.porcelain .c-note,
html.porcelain .unlock .cnt,html.porcelain .tru-label,html.porcelain .tru-dl dt,
html.porcelain .tc-head,html.porcelain .tc-meta,html.porcelain .dt-label,
html.porcelain .st-label,html.porcelain .hm-gz,html.porcelain .hm-nhan,
html.porcelain .hm-net .l,html.porcelain .cc-meta,
html.porcelain .ml100-h > i,
html.porcelain .tl-age,html.porcelain .chip,html.porcelain .toc-num,html.porcelain .toc-page,
html.porcelain .gd-diem span,html.porcelain .gd-meta,html.porcelain .gd-bo .gd-l,
html.porcelain .gd-bo .gd-e,html.porcelain .gd-vs-t,html.porcelain .gd-mot-chieu,
html.porcelain .qz-dem,html.porcelain .qz-chuong,html.porcelain .qz-xen .nhan,
html.porcelain .qz-xn dt,html.porcelain label.lb{
  text-transform:none!important;letter-spacing:.04em!important;font-weight:var(--fw-regular)!important}

/* ---- cards: panel + lift (Duc xiết 10/08) ---- */
html.porcelain .hcc,html.porcelain .cc-box,html.porcelain .faq-box,
html.porcelain .chart,html.porcelain .teaser,html.porcelain .bx,
html.porcelain .gy,html.porcelain .hm,
html.porcelain .pv-p,html.porcelain .ck2-tiep,html.porcelain .qua-item{
  background:var(--surface)!important;
  border:var(--bw-1) solid var(--line)!important;
  border-radius:var(--r-3)!important;
  box-shadow:none!important}
html.porcelain .dt{
  background:var(--surface)!important;
  border:var(--bw-1) solid var(--accent)!important;
  border-radius:var(--r-3)!important;
  box-shadow:none!important}
html.porcelain .dt::before{display:none!important}
html.porcelain .ml100{
  background:var(--surface)!important;
  border:var(--bw-1) solid var(--line)!important;
  border-radius:var(--r-4)!important;
  box-shadow:var(--sh-1)!important}
html.porcelain .qbox{
  background:var(--surface)!important;
  border:var(--bw-1) solid var(--line)!important;
  border-radius:var(--r-3)!important;
  box-shadow:none!important;overflow:hidden!important}
html.porcelain .tq{border-radius:var(--r-3)!important;box-shadow:none!important}
/* Accordion checkout: border chỉ trên `.of`, không card lồng trên `.of-h` (R126d)
   R126f — thang SÁNG thay thang màu (một hero card, §182):
   thẻ phụ gấp = surface-2 chìm · thẻ phụ đang chọn = trắng + viền đậm ·
   thẻ chính of-uu = wash brand 4% (color-mix từ token, không hex mới). */
html.porcelain .of-nhom .of:not(.of-uu){
  background:var(--surface-2)!important;
  border:var(--bw-1) solid var(--line)!important;
  border-radius:var(--r-3)!important;
  box-shadow:none!important}
html.porcelain .of-nhom .of:not(.of-uu)[aria-pressed="true"]{
  background:var(--surface)!important;
  border:var(--bw-2) solid var(--line-strong)!important;
  box-shadow:none!important}
html.porcelain .of-nhom .of.of-uu{
  background:color-mix(in oklab,var(--surface),var(--brand) 4%)!important;
  border:var(--bw-2) solid var(--line-strong)!important;
  border-radius:var(--r-3)!important;
  box-shadow:none!important}
html.porcelain .of-nhom .of.of-uu[aria-pressed="true"]{
  border-color:var(--brand)!important}
html.porcelain .of-nhom .of .of-h,html.porcelain .co-lop .of .of-h{
  border:0!important;border-radius:0!important;background:none!important;
  box-shadow:none!important;margin-top:0!important}
html.porcelain .faq-h{border-bottom:var(--bw-1) solid var(--line)!important}
html.porcelain .faq-den{
  box-shadow:none!important;
  background:color-mix(in oklab,var(--surface),var(--accent) 4%)!important}
/* band đêm — không card rời */
html.porcelain .dai-dem .bl,html.porcelain .dai-dem .screen-cover,
html.porcelain .dai-dem .md.md-night,html.porcelain .dai-dem .b5-laso,
html.porcelain .mod-head,html.porcelain .cta-cuoi,html.porcelain .pull,
html.porcelain section.muc{
  box-shadow:none!important}
html.porcelain .dai-dem .bl,html.porcelain .dai-dem .screen-cover,
html.porcelain .dai-dem .md.md-night{
  border-radius:0!important}
html.porcelain .dai-dem .b5-laso .bx,
html.porcelain .dai-dem .b5-laso .chart{
  background:transparent!important;border:0!important;
  border-radius:0!important;padding:0!important;margin:0!important}