/* Design tokens — nguồn sự thật duy nhất về màu, font, kích thước. Thiếu token thì thêm ở đây trước, không viết giá trị rời trong CSS trang. */

/* Font self-host (fonts/, OFL, subset y hệt Google Fonts phát) — không tải từ Google để bỏ 2 kết nối ngoài + không lộ IP người dùng. Sora (font cũ của --font-display) bị bỏ 2026-09-25: không có subset vietnamese nên chữ có dấu lẫn system-ui — xem consider font-display-sora-khong-co-glyph-tieng-viet. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-v12-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-v12-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-v12-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-v12-500-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/be-vietnam-pro-v12-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/be-vietnam-pro-v12-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-v12-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-v12-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/be-vietnam-pro-v12-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/be-vietnam-pro-v12-800-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
/* Font dự phòng chỉnh số đo khớp Be Vietnam Pro (đo bằng fontTools trên chữ trang chủ) để lúc đổi font không xô bố cục (CLS); Roboto chưa đo, coi như rộng ≈ Arial. */
@font-face{font-family:'Be Vietnam Pro Fallback';font-style:normal;font-weight:400;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Roboto'),local('Roboto-Regular');size-adjust:106.72%;ascent-override:93.70%;descent-override:24.83%;line-gap-override:0%;}
@font-face{font-family:'Be Vietnam Pro Fallback';font-style:normal;font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Roboto Bold'),local('Roboto-Bold');size-adjust:103.43%;ascent-override:96.68%;descent-override:25.62%;line-gap-override:0%;}

:root{
  /* Nền & chữ trên nền sáng */
  --bg:#FAFAF9;
  --surface:#FFFFFF;
  --ink:#15121C;
  --ink-soft:#54506B;
  --line:#E9E6F2;
  --overlay:rgba(21,18,28,0.55); /* nền mờ sau popup (::backdrop), = --ink 55% */

  /* Chữ trên nền tối (--ink) */
  --on-dark:#FFFFFF;
  --on-dark-soft:#C9C5DB;
  --on-dark-muted:#9C97B5;

  /* Màu thương hiệu */
  --violet:#6E38E8;
  --violet-deep:#4E22B0;
  --violet-soft:#B69BF5;
  --violet-bg:#EFE7FC;
  --coral:#FF5B67;
  --coral-light:#FF7B84;
  --coral-bg:#FFE8E9;
  --fig-bg:#F3EEFD; /* trùng nền SVG minh hoạ trong bài */

  /* Màu trạng thái — chuẩn chung kiểu đèn giao thông, ai nhìn cũng hiểu: xanh lá = tốt / thành công · vàng = cần để ý · đỏ = lỗi / xấu / cảnh báo. Giá trị y hệt platform (G172), KHÔNG trỏ màu thương hiệu:
     tím, san hô chỉ để nhận diện (nút, chấm trang trí, tiêu đề), không dùng để nói trạng thái. -bg = nền nhạt, -deep = chữ trên nền sáng (≥ 4,5:1), -soft = chữ trên nền tối --ink. */
  --status-ok:#1E9E57;
  --status-ok-bg:#E2F6EA;
  --status-ok-deep:#0E6B3A;
  --status-ok-soft:#5ED896;
  --status-alert:#E03131;
  --status-alert-bg:#FDE7E6;
  --status-alert-deep:#B3261E;
  --status-alert-soft:#FF7A70;
  --status-hint:#E8A400;
  --status-hint-bg:#FFF4D6;
  --fig-h:400px;
  --gradient-hero:linear-gradient(105deg,#8053EB 0%,#9A71F7 50%,#FF707A 100%);

  /* Font */
  --font-display:'Be Vietnam Pro','Be Vietnam Pro Fallback',system-ui,sans-serif;
  --font-body:'Be Vietnam Pro','Be Vietnam Pro Fallback',system-ui,sans-serif;

  /* Thang cỡ chữ */
  --fs-xs:0.8rem;
  --fs-sm:0.88rem;
  --fs-md:0.95rem;
  --fs-base:1rem;
  --fs-lg:1.15rem;
  --fs-xl:1.35rem;
  --fs-2xl:2.2rem;
  --fs-h2:clamp(1.8rem,3.4vw,2.6rem);
  --fs-h1:clamp(2.4rem,5.4vw,4rem);

  /* Spacing — bội số 4px */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-20:80px;
  --sp-24:96px;

  /* Bo góc */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:28px;
  --r-pill:100px;

  /* Viền & bóng */
  --bw:2px;
  --bw-accent:6px; /* viền nhấn 1 cạnh (hộp .answer) */
  --border:var(--bw) solid var(--ink);
  --border-soft:var(--bw) solid var(--line);
  --shadow-hard:8px 8px 0 var(--ink);
  --shadow-halo:0 0 2px rgba(255,255,255,0.85);
  --shadow-halo-brand:0 0 var(--sp-4) rgba(110,56,232,0.4); /* quầng tím quanh tên thương hiệu trên nền sáng, nơi halo trắng không thấy được */

  /* Bề rộng */
  --w-max:1160px;
  --w-md:960px;
  --w-read:800px;
  --w-narrow:640px;
  --w-form:480px;
  --w-text:37.86em; /* = 56ch của Be Vietnam Pro 400 (chữ 0 rộng 0.676em); dùng em vì ch đổi theo font lúc swap → xô bố cục */

  /* Breakpoint (CSS không cho var() trong @media, ghi đây để tra): md = 640px, lg = 900px */
}

/* Trang tiếng Nhật (/ja/): chữ Latin/Việt (tên thương hiệu) vẫn Be Vietnam Pro, chữ Nhật lấy font có sẵn của máy — không tải font Nhật (nặng) nên không ảnh hưởng LCP/CLS. */
:root:lang(ja){
  --font-display:'Be Vietnam Pro','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Noto Sans CJK JP',Meiryo,sans-serif;
  --font-body:'Be Vietnam Pro','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Noto Sans CJK JP',Meiryo,sans-serif;
}