/* ============================================================================
   ƯƠM MẦM TOÁN — DESIGN TOKENS
   Trích từ Design System (Claude Design), 11/07/2026.
   
   CÁCH DÙNG: nạp file này TRƯỚC mọi file CSS khác trong index.html:
     <link rel="stylesheet" href="tokens.css?v=...">
     <link rel="stylesheet" href="style.css?v=...">
     ...
   
   ⚠️ File này CHỈ định nghĩa biến — KHÔNG ghi đè thuộc tính giao diện nào.
      Nạp vào một mình thì giao diện KHÔNG đổi. An toàn tuyệt đối.
      (Từ M5.1 có thêm khối `html[data-theme="…"]` ở CUỐI FILE — vẫn CHỈ là biến,
       chỉ khác ở chỗ bộ biến nào được chọn. Xem khối đó để hiểu hệ theme.)
   ============================================================================ */

:root {
  /* ======================================================================
     [ĐỢT 5 · M4.1] LẬT CÔNG TẮC — 08/08/2026
     Đổi giá trị 65 biến sang hướng A “Kẹo Dẻo” theo docs/mockup/M2-3-dac-ta-chot.md.
     Đây là mục ĐẦU TIÊN của cả đợt LÀM ĐỔI DIỆN MẠO THẬT (M3 chỉ dọn đường).
     Giá trị cũ ghi ngay sau mỗi dòng để lúc cần đối chiếu / lùi lại khỏi phải tra git.
     ⚠️ 64 biến còn lại GIỮ NGUYÊN — xem mục 2C của đặc tả, đừng đụng.
     ====================================================================== */

  /* ---------- MÀU: XANH DƯƠNG (thương hiệu, tin cậy) ---------- */
  --blue-900: #143A5C;   /* cũ #14406b · chữ trên nút cam */
  --blue-800: #1B4A73;   /* cũ #1f4e79 · chữ tiêu đề */
  --blue-700: #24628F;   /* cũ #285f93 */
  --blue-600: #2F6FAF;   /* cũ #2f75b5 · viền, nút phụ */
  --blue-500: #3B82C4;   /* cũ #3486c9 */
  --blue-300: #9CC6EA;   /* cũ #9dc3e6 */
  --blue-200: #CBE1F7;   /* cũ #cfe0f3 */
  --blue-100: #DCE9F7;   /* cũ #d9eaf7 · viền thẻ */
  --blue-50:  #EAF3FF;   /* cũ #eef4f9 */
  --blue-tint: #F0F6FF;  /* cũ #e8f1fb · nền hover menu */

  /* ---------- MÀU: XANH LÁ (hành động chính, tiến bộ) ---------- */
  --green-800: #14632B;  /* cũ #1e7e34 */
  --green-700: #14682F;  /* cũ #278138 */
  --green-600: #1B8140;  /* cũ #2f9e44 · nút chính: Lưu / Nộp bài / Xác nhận */
  --green-500: #34A853;  /* cũ #5cb944 */
  --green-450: #46B963;  /* cũ #3f9e2a */
  --green-400: #6FD08A;  /* cũ #70ad47 · thanh tiến độ */
  --green-300: #A9E4B8;  /* cũ #a9d18e */
  --green-line: #CDEBD6; /* cũ #cfe9bd */
  --green-soft: #EAF9EF; /* cũ #eef8e6 */
  --green-tint: #E4F6EA; /* cũ #e6f4ea */
  --green-text: #1C7A3C; /* cũ #2f6b2f */

  /* ---------- MÀU: CAM – VÀNG (logo, nút nổi bật) ---------- */
  --orange-600: #FF7A22;    /* cũ #ff7d3b */
  --orange-500: #FF9A2E;    /* cũ #ff9f43 */
  --orange-brand: #FF9A2E;  /* cũ #f7941d · màu logo */
  --orange-text: #9A5A08;   /* cũ #b9770e */
  --orange-line: #FFE0B8;   /* cũ #f6dcb4 */
  /* [M4.2 lô 2] Thang cam đang HỤT một nấc: từ --orange-line (#FFE0B8) nhảy thẳng
     tới --orange-500 (#FF9A2E) là ΔE 22. Nấc giữa này hút 5 lượt mã cứng
     (#ffcc80, #f3c98b, #f5b66b). ⚠️ KHÔNG hút #ffb74d — mã đó là NỀN CÓ CHỮ TRẮNG,
     gom vào làm tương phản tụt 1,73 → 1,48:1. */
  --orange-300: #FFCC80;
  --orange-soft: #fff4e3;
  --orange-tint: #FFF6E8;   /* cũ #fff4e5 */
  --yellow-500: #FFC93C;    /* cũ #fcc419 */
  --yellow-400: #FFDA6B;    /* cũ #ffd65a */
  --yellow-300: #FFE28A;    /* cũ #ffd966 */
  --yellow-soft: #FFF9E3;   /* cũ #fff8dc */

  /* ---------- MÀU: ĐỎ (cảnh báo, lỗi, hết hạn, làm sai) ---------- */
  --red-700: #9E2C20;    /* cũ #a83232 */
  --red-600: #C93B2C;    /* cũ #c0392b */
  --red-550: #C0392B;    /* cũ #c62828 */
  --red-500: #E14B3C;    /* cũ #d9362d */
  --red-line: #F8CDC7;   /* cũ #f5c6c0 */
  --red-soft: #FFF0ED;   /* cũ #fdecea */
  --red-tint: #fde2e1;

  /* ---------- MÀU: TÍM ---------- */
  --purple-700: #4B4FB5;  /* cũ #3b3f9b */
  --purple-tint: #ECEEFD; /* cũ #e7e9fb */

  /* ---------- MÀU: CHỮ & ĐƯỜNG KẺ ---------- */
  --ink-900: #22303F;    /* cũ #1f2d3d · chữ thân bài */
  --ink-700: #33475b;
  --ink-600: #3a4a5a;
  --ink-500: #58697D;    /* cũ #5b6b7a · chữ phụ — ĐẬM LÊN để đạt 5,03:1 trên nền nhấn nhẹ */
  --ink-400: #7C8FA3;    /* cũ #7a8896 */
  --ink-300: #A3B6C8;    /* cũ #9fb2c4 */
  --line-200: #E7EFF8;   /* cũ #e6eef6 */
  --line-100: #EFF4FA;   /* cũ #edf2f7 */

  /* ---------- BỀ MẶT ---------- */
  --surface-white: #ffffff;
  --surface-card: #FFFDF7;      /* cũ #fffaf0 · nền thẻ: kem ấm */
  --surface-cream: #FFFBF2;     /* cũ #fffdf8 */
  --surface-tint-blue: #F5F9FF; /* cũ #f7faff */
  --surface-answer: #fffdf4;

  /* ---------- NỀN TRANG (đốm tròn mềm + gradient chéo) ---------- */
  /* M4.1: 3 đốm đổi theo bảng màu mới (vàng --yellow-500 · xanh --blue-500 ·
     lá --green-500), gradient nền sáng hơn một nấc. */
  --page-bg:
    radial-gradient(circle at 12% 18%, rgba(255, 201, 60, 0.32) 0 70px, transparent 72px),
    radial-gradient(circle at 88% 12%, rgba(59, 130, 196, 0.26) 0 90px, transparent 92px),
    radial-gradient(circle at 82% 82%, rgba(52, 168, 83, 0.24) 0 85px, transparent 87px),
    linear-gradient(135deg, #EEF6FF 0%, #FFF8EA 48%, #F0FFF5 100%);

  /* ---------- DẢI MÀU LOGO (viền trên thẻ Home) ---------- */
  --brand-strip: linear-gradient(90deg, #34A853 0%, #8FD94F 38%, #FFC93C 70%, #FF9A2E 100%);

  /* ---------- TÊN GỌI NGỮ NGHĨA (dùng cái này là chính) ---------- */
  --text-strong: var(--blue-800);
  --text-body: var(--ink-900);
  --text-muted: var(--ink-500);
  /* M4.1: trỏ về --text-inverse (cùng giá trị #ffffff) để CHỈ CÒN MỘT NGUỒN
     quyết định “chữ trên nền đậm” — theme sau chỉ phải đổi một chỗ. */
  --text-on-accent: var(--text-inverse);
  --link: var(--blue-600);
  --link-hover: var(--blue-800);
  --accent-primary: var(--green-600);
  --accent-primary-hover: var(--green-700);
  --accent-secondary: var(--blue-600);
  --accent-secondary-hover: var(--blue-700);
  --accent-highlight: var(--orange-brand);
  --accent-danger: var(--red-600);
  --border-card: var(--blue-100);
  /* ⚠️ TÊN CŨ, ĐỪNG NHẦM: từ M7.2 biến này KHÔNG còn dùng cho ô nhập nữa.
     Nó nay chỉ còn cho VIỀN TRANG TRÍ: nút tab con, thẻ nhiệm vụ, nút bật/tắt, khối
     panel — những thứ đã có CHỮ và MÀU NỀN riêng để nhận ra, không phụ thuộc viền.
     Giữ mềm (1,32:1) là cố ý: 15 chỗ này mà đậm lên thì cả khu quản trị nặng nề.
     Muốn viền cho Ô NHẬP thì dùng --border-field ngay dưới. */
  --border-input: var(--blue-200);          /* M4.1: cũ var(--blue-100) */

  /* [ĐỢT 5 · M7.2] VIỀN Ô NHẬP THẬT — input · select · textarea.
     🔴 VÌ SAO TÁCH RIÊNG: chuẩn WCAG 1.4.11 đòi 3:1 cho thứ "cần để NHẬN RA thành
        phần giao diện". Với ô nhập, viền là thứ DUY NHẤT báo "đây là chỗ gõ" — nền ô
        trắng so với nền thẻ kem chỉ chênh 1,01:1, tức gần như không phân biệt được.
        Viền cũ 1,32:1 → trẻ ngồi ngoài nắng hoặc dùng màn hình rẻ không thấy chỗ gõ.
     Dùng --blue-500 = 3,99:1. Chọn màu THƯƠNG HIỆU chứ không dùng xám vì:
       · nó tự đi theo cả 8 theme (xám thì theme nào cũng xám xịt);
       · cả 8 theme đều khớp độ sáng nên tỉ lệ 3,99:1 GIỮ NGUYÊN ở mọi theme.
     Áp cho 24 rule ô nhập (23 rule + .answer-input). 15 rule tab/thẻ/toggle vẫn dùng
     --border-input ở trên — xem chú thích của nó. */
  --border-field: var(--blue-500);
  --focus-ring: rgba(59, 130, 196, 0.25);   /* M4.1: cũ rgba(47,117,181,.15) — = --blue-500 mới, rõ hơn */

  /* ==========================================================================
     [ĐỢT 5 · M3.1] 18 BIẾN THÊM MỚI — 08/08/2026
     Đặc tả: docs/mockup/M2-3-dac-ta-chot.md · Kế hoạch: docs/ke-hoach-giao-dien.html

     ⚠️ NGUYÊN TẮC CỦA M3.1: CHỈ THÊM TÊN, KHÔNG ĐỔI MỘT GIÁ TRỊ NÀO.
        Mỗi biến dưới đây mang ĐÚNG giá trị app ĐANG chạy (hoặc chưa có điểm dùng
        nào), nên thêm vào là giao diện KHÔNG đổi một pixel. Rủi ro bằng 0.
        Việc đổi giá trị sang hướng A “Kẹo Dẻo” là của M4.1 — cột “M4.1 sẽ đổi
        thành” ghi sẵn ngay đây để lúc đó khỏi phải tra lại.
     ========================================================================== */

  /* --- Bề mặt --- */
  /* Nền khung .app — NỀN NGƯỜI DÙNG THẬT SỰ NHÌN THẤY (bẫy 1 của M1.3).
     Hiện app tô 3 tầng chồng nhau: style.css:72 `white` → style.css:1758
     `rgba(255,255,255,.94)` → JS ghi inline (thắng cả hai). M3.4 sẽ gom về đây. */
  --surface-app: #F4F8FF;              /* ✅ M4.1 đã đổi · cũ #ffffff */
  /* Nền vùng nhấn nhẹ — đã hút các lượt của --blue-50 + --blue-tint ở M3.2.
     ✅ M4.1: KHÔNG phải sửa dòng này — đặc tả ghi #EAF3FF, mà --blue-50 mới
     ĐÚNG BẰNG #EAF3FF. Giữ var() thì kiến trúc sạch hơn, giá trị y hệt. */
  --surface-subtle: var(--blue-50);

  /* --- Chữ --- */
  /* Chữ trên nền đậm. Sinh ra để TÁCH vai của biến --surface-white — biến đó
     đang gánh 2 vai (118 lượt làm NỀN + 62 lượt làm CHỮ), theme đổi nó là mất chữ.
     M3.2 chuyển 62 lượt `color: var(--surface-white)` sang đây.
     ⚠️ ĐỪNG viết trong comment theo dạng dấu-hai-chấm ngay sau tên biến — regex của các bộ
        đo (kể cả validate-tokens.cjs của skill) sẽ nuốt nhầm comment thành khai
        báo biến. Tiểu đệ đã vấp đúng bẫy này khi kiểm chứng M3.2. */
  --text-inverse: #ffffff;
  /* Chữ xanh lá (23 lượt đang gọi thẳng --green-800) và chữ cam (21 lượt --orange-text) */
  --text-success: var(--green-text);   /* ✅ M4.1 đã đổi · cũ var(--green-800) */
  --text-warning: var(--orange-text);

  /* --- Hai biến TRỎ VÀO HƯ VÔ (M2.3 mục 7) ---
     style.css:11579 `var(--border, var(--blue-100))` và
     style.css:11625 `var(--text-secondary, var(--text-muted))` gọi 2 biến chưa hề
     được định nghĩa ở đâu → luôn chạy fallback. Khai đúng BẰNG fallback nên
     giao diện không đổi, mà hết cảnh biến ma. */
  --border: var(--blue-100);
  --text-secondary: var(--text-muted);

  /* --- BẢNG MÀU riêng của mỗi con (bẫy 6 của M1.3) ---
     Giữ NGUYÊN màu hiện tại của 3 bé, khớp y hệt STUDENT_BG_COLORS trong script.js.

     ⚠️ ĐỪNG NHẦM với biến `--student-bg-active`: 4 biến dưới đây là BẢNG MÀU TĨNH;
        còn `--student-bg-active` là MÀU ĐANG ÁP, do JS đặt lên chính phần tử .app
        lúc chạy (applyStudentBackground) nên KHÔNG khai ở đây. Nơi tiêu thụ nó là
        `.app { background: var(--student-bg-active, …) }` trong style.css.

     📌 Đại ca đã chốt phương án C: giữ màu riêng nhưng HẠ XUỐNG CHI TIẾT NHỎ
        (viền ảnh, dải chip) thay vì tô cả nền .app. Việc đó là ĐỔI DIỆN MẠO nên
        thuộc **M4/M5**, KHÔNG làm ở M3 (M3 chỉ dọn đường, không đổi một pixel).
     ⚠️ Bé thứ 4 trở đi dùng pastelColorFromId() sinh hsl() tuỳ ý, không biến nào
        phủ tới; --student-bg-default hiện là code chết (chuỗi `||` không bao giờ
        rơi tới nó vì pastelColorFromId luôn trả về chuỗi). */
  --student-bg-nguyet: #F3E8FF;
  --student-bg-tri: #E0F7FA;
  --student-bg-xoai: #FFF9C4;
  --student-bg-default: #FFFFFF;

  /* ==========================================================================
     [ĐỢT 5 · M3.1b] 12 SEMANTIC TẦNG 2 — nền / viền / chữ theo TRẠNG THÁI
     Chèn 08/08/2026 theo quy ước M0.2 (hậu tố chữ, không đánh số lại mục cũ).

     VÌ SAO CẦN: sau 4 lô của M3.2, tỉ lệ gọi semantic mới lên 72% — còn 317 điểm
     kẹt lại vì primitive KHÔNG CÓ semantic tương ứng để trỏ về. 12 biến này mở
     đường cho ~154 điểm còn lại, đưa tỉ lệ vượt mốc 80% của M1.4.

     ⚠️ Vẫn đúng nguyên tắc M3.1: mỗi biến trỏ về primitive SẴN CÓ, không đổi
        một giá trị nào. Thêm vào là giao diện không đổi một pixel.
     ========================================================================== */
  --surface-hover: var(--blue-tint);      /* nền khi rê chuột (menu, hàng bảng) */
  --surface-muted: var(--line-100);       /* nền xám rất nhạt: ô vô hiệu, vùng phụ */
  --surface-success: var(--green-tint);   /* nền vùng "đạt / đã xong" */
  --surface-danger: var(--red-soft);      /* nền vùng "sai / lỗi" */
  --surface-warning: var(--orange-soft);  /* nền vùng "chú ý / chờ duyệt" */
  --border-subtle: var(--line-200);       /* đường kẻ mảnh, phân cách nhẹ */
  --border-faint: var(--line-100);        /* đường kẻ mờ hơn nữa */
  --border-success: var(--green-line);
  --border-danger: var(--red-line);
  --border-warning: var(--orange-line);
  /* [M4.2 lô 2] Nấc GIỮA còn thiếu của thang chữ: --text-body 13,4:1 quá đậm cho
     đoạn văn phụ, --text-muted 5,6:1 lại quá nhạt. Primitive --ink-600 đã có sẵn
     nhưng không có tên ngữ nghĩa nên 14 chỗ phải viết mã cứng. */
  --text-body-soft: var(--ink-600);       /* 9,10:1 trên nền trắng */
  --text-faint: var(--ink-400);           /* chữ rất nhạt: ghi chú, gợi ý */
  --progress-fill: var(--green-400);      /* vệt thanh tiến độ */

  /* --- Primitive mới, CHƯA CÓ ĐIỂM DÙNG NÀO (chờ M4.2 / M4.2b) --- */
  --green-900: #0B421C;   /* lớp inset của nút chính */
  --red-800: #782118;     /* lớp inset của nút nguy hiểm */
  --orange-700: #D2730A;  /* mũi tên chỉ báo tab — 3,4:1 với nền trắng ✅ */
  --tabnav-hint-color: var(--orange-700);


  /* ==========================================================================
     [ĐỢT 5 · M4.2 lô 2] TOKEN MỚI — 20 biến
     Sinh ra từ workflow phân loại 326 mã màu viết cứng còn lại (11 agent,
     có vòng phản biện). Đây là những màu KHÔNG gom được vào token sẵn có:
     hoặc hệ token thiếu hẳn một họ, hoặc gom vào là NÓI DỐI ngữ nghĩa.
     Bảng đầy đủ: docs/khao-sat/M4-2-bang-anh-xa-mau.md
     ========================================================================== */

  /* --- Lấp lỗ hổng trong thang màu sẵn có --- */
  /* ⭐ TRÙNG Y HỆT --student-bg-xoai (ΔE 0) nhưng là nền trò Lật thẻ + cửa hàng hạt
     giống. TUYỆT ĐỐI không gom vào token kia: M5 đổi màu bé Xoài là trò chơi đổi theo. */
  --yellow-200: #FFF9C4;
  /* Thang xanh hụt hẳn một nấc: --blue-500 tới --blue-300 cách ΔE 20 */
  --blue-400: #79ACDB;
  /* Nấc xám-xanh giữa --line-200 và --blue-200, cho nền phần tử VÔ HIỆU */
  --line-300: #D3DDE8;
  --surface-disabled: var(--line-300);

  /* --- Nền cố ý ĐEN ở mọi theme --- */
  /* Khung letterbox quanh video: đổi theo theme là lộ viền sáng quanh phim */
  --surface-media: #000000;

  /* --- Bảng xanh Material RIÊNG của trò Lật thẻ (cách thang chung ΔE 15-32) --- */
  --game-blue-deep: #0D47A1;
  --game-blue: #1976D2;
  --game-blue-light: #42A5F5;

  /* --- Vai "NƯỚC" (khu vườn) — hệ token chưa hề có --- */
  --water: #0288D1;
  --water-deep: #01579B;

  /* --- Màu THƯƠNG HIỆU: token sinh ra để theme KHÔNG đổi chúng --- */
  --brand-zalo: #0068FF;
  --brand-zalo-dark: #0055D4;

  /* --- Bộ sưu tập hoa (xanh ngọc) ---
     ⚠️ --teal-tint gần --student-bg-tri (ΔE 3,0) nhưng CẤM gom: cùng lý do với --yellow-200 */
  --teal-700: #00695C;
  --teal-line: #B2DFDB;
  --teal-tint: #E0F2F1;

  /* --- Độ hiếm "huyền thoại" (khu vườn) ---
     Gom vào --red-tint là biến "quý hiếm" thành "báo lỗi" */
  --rarity-legend-bg: #FCE4EC;
  --rarity-legend-line: #CE93D8;
  --rarity-legend-text: #8E24AA;

  /* --- Họ HỒNG — hệ token không có; mọi mã cách --red-* tới ΔE 33-37.
         Gom vào đỏ là nút "Tặng hoa" hoá nút báo lỗi.
     ⚠️ --pink-500 lấy #D81B60 chứ KHÔNG lấy #EC407A như đề xuất gốc:
        chữ trắng trên #EC407A chỉ 3,76:1 (trượt), trên #D81B60 được 4,95:1. --- */
  --pink-700: #C2185B;
  --pink-600: #D81B60;
  --pink-500: #D81B60;
  --pink-line: #F8C8DD;
  --pink-soft: #FFF6FB;

  /* --- Nút trung tính (#finishAdminButton) — là NÚT nên theme phải với tới.
         Không gom vào --ink-* vì đó là họ màu CHỮ. --- */
  --btn-neutral-bg: #9E9E9E;
  --btn-neutral-hover: #B0B0B0;
  --btn-neutral-shadow: #777777;


  /* ==========================================================================
     [ĐỢT 5 · M4.5c] BỘ HUY HIỆU QUÂN HÀM — 6 bậc × 3 vai (nền / chữ / sao)
     Trước đây 5/6 bậc viết cứng rải rác, mỗi bậc một kiểu; riêng bậc Huyền Thoại
     trải qua 3 họ màu. Nay gom về một bộ tên nhất quán để M5 đổi theme được.

     ⚠️ ĐO TRƯỚC KHI ĐẶT: 6/6 SAO đang trượt chuẩn (1,68–2,19:1) và bậc Vàng chữ
        cũng trượt (2,61:1). Sao là ĐỒ HOẠ MANG THÔNG TIN (số sao = cấp bậc) nên
        ngưỡng 3:1, chữ ngưỡng 4,5:1.
     ⚠️ CÁCH SỬA: đậm màu theo TỈ LỆ (giữ nguyên tỉ số R:G:B) nên GIỮ ĐÚNG TÔNG
        kim loại — chỉ tối đi 17–27%, không biến đồng thành nâu hay vàng thành ố.
        Danh hiệu là thứ TRẺ KHOE, không được làm xỉn.
     ========================================================================== */
  /* [ĐỢT 5 · M5.7] 🔴 5 MÃ SAO ĐÃ ĐƯỢC LÀM TỐI — đừng trả về giá trị cũ.
     M4 từng nâng nhóm này một lần rồi đánh dấu ✅ theo chuẩn 3:1 của ĐỒ HOẠ. Nhưng ★
     ở đây là KÝ TỰ CHỮ (13px, đậm 800) nên chuẩn đúng phải là 4,5:1 — cả 5 bậc đều
     đang ở 3,03–3,07, tức TRƯỢT. Nay tối thêm một nấc (lệch màu rất nhẹ) để đạt.
     Nền của từng bậc là --medal-*-bg ngay trên, không phải nền trắng. */
  --medal-bronze-bg: #F4CCCC;
  --medal-bronze-text: #7F3F00;   /* 5,49:1 ✅ */
  --medal-bronze-star: #805125;  /* M5.7: cũ #A66930 chỉ 3,06:1 — sao ★ là CHỮ (13px) nên chuẩn là 4,5 chứ không phải 3,0 · nay 4,55:1 */

  --medal-silver-bg: #E7E6E6;
  --medal-silver-text: #666666;   /* 4,61:1 ✅ */
  --medal-silver-star: #666669;  /* M5.7: cũ #838386 chỉ 3,03:1 — sao ★ là CHỮ (13px) nên chuẩn là 4,5 chứ không phải 3,0 · nay 4,59:1 */

  --medal-gold-bg: #FFF2CC;
  --medal-gold-text: #8B6900;     /* cũ #bf9000 2,61 → 4,57:1 ✅ */
  --medal-gold-star: #8D6805;  /* M5.7: cũ #B38406 chỉ 3,03:1 — sao ★ là CHỮ (13px) nên chuẩn là 4,5 chứ không phải 3,0 · nay 4,57:1 */

  --medal-platinum-bg: #EEF0F7;
  --medal-platinum-bg2: #E3E6F2;  /* chặng 2 của gradient bậc Bạch Kim */
  --medal-platinum-text: #5A5B8C; /* 5,57:1 ✅ */
  --medal-platinum-star: #626C85;  /* M5.7: cũ #7C89A8 chỉ 3,07:1 — sao ★ là CHỮ (13px) nên chuẩn là 4,5 chứ không phải 3,0 · nay 4,56:1 */

  /* [ĐỢT 5 · M5.1b] 🔴 GHIM CỨNG, ĐỪNG TRẢ VỀ var().
     Hai dòng này TỪNG viết `var(--blue-100)` và `var(--text-strong)`. Từ khi có hệ
     theme (M5.1) thì hai biến đó đổi màu theo theme → bậc KIM CƯƠNG hoá HỒNG ở theme
     “Kẹo Dâu”, cả huy hiệu lẫn khung ảnh. Sai bản sắc: đồng/bạc/vàng/bạch kim/huyền
     thoại đều có màu kim loại cố định, chỉ mỗi kim cương đi lạc.
     Giá trị dưới đây = ĐÚNG giá trị hai biến kia ở theme mặc định → nhìn không đổi
     một pixel, chỉ khác ở chỗ nay nó ĐỨNG YÊN khi đổi theme.
     Rà lại bằng: docs/khao-sat — quét token “cố ý giữ” nào SUY RA từ token theme đổi. */
  --medal-diamond-bg: #DCE9F7;               /* = --blue-100 mặc định */
  --medal-diamond-text: #1B4A73;             /* = --blue-800 mặc định · 7,50:1 ✅ */
  --medal-diamond-star: #306C8E;  /* M5.7: cũ #3E8BB6 chỉ 3,06:1 — sao ★ là CHỮ (13px) nên chuẩn là 4,5 chứ không phải 3,0 · nay 4,58:1 */

  --medal-legend-bg: #EADCF8;
  --medal-legend-text: #7030A0;   /* 6,14:1 ✅ */
  /* Bậc Huyền Thoại: sao là GRADIENT phủ lên chữ, không phải một màu.
     Khai trọn gói để M5 đổi được cả dải một lần. */
  --medal-legend-star-grad: linear-gradient(135deg, #FFD34D 0%, #FF7EB3 48%, #9B5DE5 100%);

  /* ---------- CHỮ ---------- */
  --font-sans: 'Nunito', 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'Courier New', Menlo, Consolas, monospace;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-code: var(--font-mono);

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;    /* ⚠️ CỠ TỐI THIỂU CHO Ô NHẬP — nhỏ hơn thì iOS tự phóng to */
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 26px;   /* tiêu đề màn */
  --text-3xl: 28px;   /* lời chào */
  --text-title: 36px; /* tên app */

  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;      /* mặc định cho nút */
  --weight-extrabold: 800; /* tiêu đề, badge, header bảng */
  --weight-black: 900;

  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --tracking-title: 1px;

  /* ---------- ICON EMOJI TRONG CÂU HỎI (đếm / so sánh / điền dấu) ----------
     NGUỒN DUY NHẤT quyết định cỡ icon. Trước đây cỡ này bị khai ở 3 nơi với 3 giá trị
     khác nhau (style.css container-query 15cqi, redesign-components.css clamp 13–22px,
     ô phép tính 15px cứng) → icon câu to câu nhỏ. Nay MỌI nơi đều đọc biến này.
     Đây là giá trị DỰ PHÒNG (theo bề ngang màn hình) cho trình duyệt cũ không hỗ trợ
     container query; bản chuẩn co theo BỀ NGANG THẺ CÂU HỎI nằm ở style.css. */
  --q-count-icon: clamp(13px, 4.6vw, 22px);

  /* ---------- KHOẢNG CÁCH ---------- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 18px;   /* padding chuẩn của panel */
  --space-9: 24px;
  --space-10: 32px;
  --space-12: 44px;
  --touch-min: 44px; /* ⚠️ CỠ CHẠM TỐI THIỂU cho mọi nút/vùng bấm */

  /* ---------- BO GÓC — [M4.1] quy ước “Kẹo Dẻo”: 20 / 16 / 12 ---------- */
  --radius-xs: 8px;      /* cũ 6px  · chi tiết nhỏ */
  --radius-sm: 12px;     /* cũ 8px  · Ô NHẬP + hộp con bên trong thẻ */
  --radius-md: 16px;     /* cũ 10px · NÚT */
  --radius-lg: 20px;     /* cũ 12px · THẺ / panel / modal — và thẻ câu hỏi .q-card */
  /* ⚠️ --radius-xl ĐỔI VAI TRÒ, không chỉ đổi số: trước là “thẻ câu hỏi, nút trắc
     nghiệm”, nay là “khối hành động cực lớn”. Vì --radius-lg mới = 20px ĐÚNG BẰNG
     --radius-xl cũ, `.q-card` đã được chuyển sang đọc --radius-lg (style.css) →
     thẻ câu hỏi giữ nguyên 20px, KHÔNG phình lên 24px. */
  --radius-xl: 24px;     /* cũ 20px · khối hành động cực lớn */
  --radius-pill: 999px;  /* badge, thanh tiến độ */
  --radius-circle: 50%;  /* khung ảnh, vòng quay */

  /* ---------- ĐỔ BÓNG — [M4.1] ĐÚNG 2 LỚP kiểu “kẹo dẻo”, KHÔNG blur ----------
     Mỗi bóng = 1 lớp mềm phía dưới + 1 lớp `inset` tạo MÉP PHỒNG.
     Mọi lớp đều đi qua --shadow-rgb nên đổi theme chỉ phải sửa một dòng. */
  --shadow-xs: 0 2px 6px rgba(var(--shadow-rgb), .08), inset 0 -1px 0 rgba(var(--shadow-rgb), .05);
  --shadow-sm: 0 4px 10px rgba(var(--shadow-rgb), .09), inset 0 -2px 0 rgba(var(--shadow-rgb), .05);
  --shadow-md: 0 8px 18px rgba(var(--shadow-rgb), .10), inset 0 -3px 0 rgba(var(--shadow-rgb), .06);  /* thẻ */
  --shadow-lg: 0 14px 28px rgba(var(--shadow-rgb), .18), inset 0 -3px 0 rgba(var(--shadow-rgb), .06); /* modal */
  --shadow-menu: 0 4px 12px rgba(var(--shadow-rgb), .12), inset 0 -2px 0 rgba(var(--shadow-rgb), .05);
  --shadow-cta: 0 6px 14px rgba(255, 154, 46, .38), inset 0 -3px 0 rgba(154, 90, 8, .22); /* nút cam nổi bật */
  --shadow-focus: 0 0 0 4px var(--focus-ring), 0 2px 6px rgba(var(--shadow-rgb), .10);    /* quầng khi focus ô nhập */

  /* [ĐỢT 5 · M3.1] Màu bóng gom về biến — đúng bài học M1.4 (đừng gọi thẳng
     primitive). ✅ M4.1 đã đổi 31,78,121 → 27,74,115 (= --blue-800 mới #1B4A73). */
  --shadow-rgb: 27, 74, 115;
  --sheen-rgb: 255, 255, 255;
  /* [ĐỢT 5 · M3.3c] Bộ ba của --accent-secondary. Sinh ra vì phát hiện MUỘN: bộ quét
     gom màu ở M3.3/M3.3b chỉ tìm mã `#hex` nên MÙ HOÀN TOÀN với `rgba()`. Riêng
     `rgba(47,117,181, …)` — xanh nút phụ CŨ — còn 25 lượt viết cứng (quầng focus,
     bóng nút xanh), tức bị bỏ lại sau khi M4.1 đổi bảng màu.
     ⚠️ Phải khai bộ ba SỐ RỜI (không phải mã màu) thì `rgba(var(--x), .3)` mới chạy. */
  --accent-secondary-rgb: 47, 111, 175;
  /* Trạng thái ĐANG NHẤN (bóng đảo vào trong) — CHƯA có điểm dùng, chờ M4.2 */
  --shadow-press: inset 0 3px 7px rgba(var(--shadow-rgb), .20), 0 1px 2px rgba(var(--shadow-rgb), .10);

  /* ---------- VIỀN ---------- */
  --border-width: 1px;
  --border-strong: 1.5px;

  /* ======================================================================
     [ĐỢT 5 · M5.1b] GRADIENT TRỌN GÓI
     VÌ SAO PHẢI KHAI TRỌN GÓI thay vì tách từng chặng: mấy thứ dưới đây là chuỗi
     NHIỀU LỚP / NHIỀU CHẶNG. CSS không cho lấy một biến làm "một chặng" rồi ghép —
     muốn theme đổi được thì phải đổi CẢ CHUỖI trong một lần khai.
     ⚠️ CỐ Ý KHÔNG tách 8 nan vòng quay thành 8 biến rời: tách ra rồi gom trùng là
        hai nan cạnh nhau thành một màu, mất luôn ranh giới nan.
     ====================================================================== */

  /* Vòng Quay May Mắn — 8 nan. Bản :root GIỮ ĐÚNG bộ màu đang chạy, không đổi một
     mã nào, để theme mặc định trùng khít bản cũ.
     🔴 TUYỆT ĐỐI KHÔNG đổi `from -22.5deg` và 8 cặp góc 0/45/…/360: thứ tự nan ăn
        khớp LUCKY_PRIZE_CONFIG (script.js) và công thức góc dừng — đảo/chèn/bớt một
        chặng là KIM CHỈ SAI PHẦN THƯỞNG. */
  --wheel-bg: conic-gradient(from -22.5deg,
      #e3342f 0deg 45deg,
      #f39c12 45deg 90deg,
      #3867d6 90deg 135deg,
      #3aa127 135deg 180deg,
      #f4bd2a 180deg 225deg,
      #d313d3 225deg 270deg,
      #f36f13 270deg 315deg,
      #20a6b8 315deg 360deg);

  /* Chữ cầu vồng: modal ăn mừng + nhãn chuỗi đúng liên tiếp. Bản :root giữ nguyên
     bộ màu đang chạy. Khai ra để các theme chủ đề sau (Cổ tích M5.4, Trò chơi M5.5)
     đổi được mà không phải sửa style.css. */
  --rainbow-title: linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #00ccff, #7030a0);

  /* Nhãn "chuỗi đúng liên tiếp" (.correct-streak-rainbow). Dùng background-clip:text
     nên GRADIENT NÀY CHÍNH LÀ MÀU CHỮ, không phải nền.
     ⚠️ NỢ TƯƠNG PHẢN ĐO ĐƯỢC (09/08, ghi vào M5.7 — CHƯA sửa vì đổi bảng màu trang
        trí là quyết định của đại ca): 6/7 chặng KHÔNG đạt 4,5:1 trên nền thẻ #FFFDF7 —
        #ff0000 3,93 · #ff9900 2,10 · #ffff00 **1,06 (gần như tàng hình)** · #33cc33 2,10
        · #00ccff 1,86 · #cc33ff 3,76; chỉ #3366ff 4,60 là đạt. Lại còn bị hiệu ứng
        correctStreakBlink hạ độ mờ nữa.
        Bộ thay thế ĐÃ DÒ SẴN, vẫn ra sắc cầu vồng mà cả 7 chặng đều ≥4,55:1:
        #EA0606, #B55D05, #8B7004, #038619, #047CA4, #0657F9, #C206E7
        (đánh đổi: chặng vàng ngả nâu ô-liu — đó là cái giá của việc đọc được trên nền sáng).
     Tính năng này MẶC ĐỊNH TẮT (correctStreakRewardEnabled = false) nên phạm vi ảnh
     hưởng nhỏ. */
  /* [ĐỢT 5 · M5.7] ĐÃ TRẢ NỢ. Bộ CŨ có 6/7 chặng trượt, tệ nhất #ffff00 chỉ 1,06:1 —
     chữ vàng trên nền sáng GẦN NHƯ TÀNG HÌNH, lại còn bị hiệu ứng nhấp nháy hạ độ mờ
     nữa. Bộ dưới đây dò để CẢ 7 chặng ≥4,55:1 trên nền thẻ, vẫn ra sắc cầu vồng.
     ⚖️ ĐÁNH ĐỔI ĐÃ BIẾT: chặng vàng ngả NÂU Ô-LIU (#8B7004) — đó là cái giá của việc
        đọc được trên nền sáng. Muốn rực như cũ thì trả lại đúng 7 mã này:
        #ff0000, #ff9900, #ffff00, #33cc33, #00ccff, #3366ff, #cc33ff
        nhưng phải chấp nhận chữ khó đọc. */
  --rainbow-streak: linear-gradient(90deg,
      #EA0606, #B55D05, #8B7004, #038619, #047CA4, #0657F9, #C206E7);

  /* ---------- CHUYỂN ĐỘNG ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* nảy nhẹ cho nút chọn */
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-slow: 0.45s;
  --transition-btn: all 0.15s ease;
}

/* Tôn trọng người tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur-base: 0.01s;
    --dur-slow: 0.01s;
    --transition-btn: none;
  }
}

/* ============================================================================
   [ĐỢT 5 · M5.1] LỚP THEME — 09/08/2026
   `:root` ở TRÊN = theme MẶC ĐỊNH `bac-ha` (xanh dương). Đại ca chốt: theme mặc
   định là theme BÉ TRAI → mọi tài khoản cũ và 3 em đang có KHÔNG đổi gì cả.
   Không có thuộc tính data-theme trên <html> ⇒ y hệt trước M5.1.

   ĐỘ ƯU TIÊN: `html[data-theme="x"]` = (0,1,1) > `:root` = (0,1,0) → khối theme
   luôn thắng, không cần !important.

   ⚠️ VÌ SAO ĐỔI THẲNG DẢI --blue-*: đo được 27% CSS gọi THẲNG primitive, riêng
      dải --blue-* đã ~120 lượt. Chỉ đổi lớp ý nghĩa thì 1/4 màn vẫn xanh.
      Nên TRONG THEME NÀY, dải --blue-* KHÔNG CÒN LÀ XANH — nó là DẢI MÀU
      THƯƠNG HIỆU. Giữ nguyên TÊN biến để khỏi phải sửa ~120 chỗ trong CSS
      (đổi tên là việc riêng, rủi ro cao, chưa đáng làm lúc này).

   ⚠️ CÁCH CHỌN MÀU: KHÔNG chọn bằng mắt. Mỗi màu được DÒ BẰNG MÁY sao cho
      ĐỘ SÁNG TƯƠNG ĐỐI khớp màu xanh tương ứng (lệch < 0,002) → mọi tỉ lệ
      tương phản mà M4 đã chỉnh cho đạt chuẩn TỰ ĐỘNG GIỮ NGUYÊN, không phải
      đo lại ~40 chỗ chữ. Đo lại 7 vai trò chữ: lệch tối đa 0,02.

   ⚠️ MÀU KHÔNG ĐỔI THEO THEME (mang Ý NGHĨA, không phải màu thương hiệu):
      · xanh lá = đúng/đạt · đỏ = sai/lỗi · cam + vàng = thưởng/sao
      · --water/--water-deep  → nước tưới cây PHẢI là màu nước
      · --game-blue-*         → bản sắc 4 trò chơi (bàn ở M5.5)
      · --brand-zalo*         → logo Zalo phải đúng màu Zalo
      · --medal-*             → huy hiệu bạch kim/kim cương có màu riêng
      · --ink-*               → chữ mực trung tính
   ============================================================================ */

html[data-theme="keo-dau"],
.theme-preview[data-theme="keo-dau"] {
  /* ---------- DẢI THƯƠNG HIỆU: hồng – tím (thay cho xanh dương) ---------- */
  --blue-900: #66164E;   /* xanh cũ #143A5C · chữ trên nút cam */
  --blue-800: #801E5F;   /* xanh cũ #1B4A73 · chữ tiêu đề (204 lượt qua --text-strong) */
  --blue-700: #A62A78;   /* xanh cũ #24628F · hover nút phụ */
  --blue-600: #BE3385;   /* xanh cũ #2F6FAF · viền, nút phụ, link (122 lượt) */
  --blue-500: #CB5295;   /* xanh cũ #3B82C4 */
  --blue-400: #E18EB9;   /* xanh cũ #79ACDB */
  --blue-300: #EEAFCD;   /* xanh cũ #9CC6EA */
  --blue-200: #F9D5E5;   /* xanh cũ #CBE1F7 · viền ô nhập (36 lượt) */
  --blue-100: #F8E2EB;   /* xanh cũ #DCE9F7 · viền thẻ (29 lượt) */
  --blue-50:  #FFEEF4;   /* xanh cũ #EAF3FF */
  --blue-tint: #FFF2F7;  /* xanh cũ #F0F6FF · nền hover menu */

  /* ---------- NỀN ---------- */
  --surface-app: #FDF6F8;         /* xanh cũ #F4F8FF */
  --surface-tint-blue: #FEF7F9;   /* xanh cũ #F5F9FF */

  /* Nền trang: đổi ĐÚNG chặng xanh, GIỮ đốm vàng + đốm xanh lá (nét vui nhộn chung). */
  --page-bg:
    radial-gradient(circle at 12% 18%, rgba(255, 201, 60, 0.32) 0 70px, transparent 72px),
    radial-gradient(circle at 88% 12%, rgba(203, 82, 149, 0.26) 0 90px, transparent 92px),
    radial-gradient(circle at 82% 82%, rgba(52, 168, 83, 0.24) 0 85px, transparent 87px),
    linear-gradient(135deg, #FBF3F6 0%, #FFF8EA 48%, #FFF3F8 100%);

  /* ---------- BỘ BA SỐ RỜI (dùng trong rgba(var(--x), .3) — phải đổi kèm) ---------- */
  --shadow-rgb: 128, 30, 95;              /* = --blue-800 mới · 69 lượt dùng */
  --accent-secondary-rgb: 190, 51, 133;   /* = --blue-600 mới */
  --focus-ring: rgba(203, 82, 149, 0.25); /* = --blue-500 mới */

  /* ---------- VÒNG QUAY: CHỈ đổi ĐÚNG 1 nan ----------
     Vòng quay là vật trang trí kiểu HỘI CHỢ — nhuộm cả 8 nan thành hồng là mất hết
     nét vui và các nan lẫn vào nhau. Chỉ nan 3 (#3867d6) là XANH DƯƠNG THƯƠNG HIỆU
     nên nó chỏi hẳn khi cả màn đã hồng; đổi sang mận sâu --blue-800 (#801E5F).
     · Chữ trắng trên #801E5F = 9,26:1 (bản xanh cũ chỉ 5,15) → ĐỌC RÕ HƠN.
     · Không lẫn với nan 6 #d313d3: độ sáng 0,063 so với 0,190, chênh gấp 3.
     · 7 nan còn lại (đỏ/cam/lá/vàng/cánh sen/cam đậm/xanh ngọc) GIỮ NGUYÊN — đỏ, lá,
       cam, vàng là màu MANG Ý NGHĨA; xanh ngọc không phải xanh thương hiệu.
     🔴 Góc và thứ tự nan y hệt bản :root — xem cảnh báo ở đó. */
  --wheel-bg: conic-gradient(from -22.5deg,
      #e3342f 0deg 45deg,
      #f39c12 45deg 90deg,
      #801E5F 90deg 135deg,
      #3aa127 135deg 180deg,
      #f4bd2a 180deg 225deg,
      #d313d3 225deg 270deg,
      #f36f13 270deg 315deg,
      #20a6b8 315deg 360deg);
}

/* ============================================================================
   [ĐỢT 5 · M5.2] BỐN THEME MÙA
   Cùng cách làm với “Kẹo Dâu”: mỗi màu được DÒ BẰNG MÁY sao cho ĐỘ SÁNG TƯƠNG ĐỐI
   khớp màu xanh tương ứng → mọi tỉ lệ tương phản M4 đã chỉnh TỰ ĐỘNG giữ nguyên.
   Đo lại 7 vai trò chữ × 4 mùa: KHÔNG mùa nào trượt vai trò nào.

   ⚠️ HAI RÀNG BUỘC RIÊNG CỦA THEME MÙA (khó hơn Kẹo Dâu) — đã đo bằng ΔE:
   ① KHÔNG mùa nào được lẫn với MÀU MANG Ý NGHĨA (xanh lá = đúng · đỏ = sai ·
      cam/vàng = thưởng). Lẫn là trẻ mất luôn tín hiệu “mình làm đúng chưa”.
      → cặp gần nhất: Hạ vs xanh lá ΔE 41,0 — cách rất xa, an toàn.
      Vì thế Xuân CỐ Ý KHÔNG dùng xanh lá (dù xuân hay gợi mầm non) và Thu bị
      HẠ BÃO HOÀ hẳn (nâu đất trầm) để không lẫn với cam thưởng vốn rất tươi.
   ② 6 theme phải khác NHAU rõ, không thì đổi mùa mà trẻ không nhận ra.
      → cặp gần nhất: Xuân ↔ Đông ΔE 29,0.
      🔴 BÀI HỌC: bản Đông ĐẦU TIÊN (xanh thép nhạt) chỉ cách bản mặc định ΔE 7,8
         — nhìn y HỆT. Phải dò lại thành CHÀM SÂU. Nếu sau này thêm mùa/chủ đề mới,
         NHỚ đo ΔE với 6 theme đang có trước khi chốt.
   ============================================================================ */

html[data-theme="xuan"],
.theme-preview[data-theme="xuan"] {   /* 🌸 XUÂN */
  /* 🌸 Xuân — tím tử đinh hương — hoa xuân. Cố ý TRÁNH xanh lá (trùng “đúng rồi”) và hồng (trùng Kẹo Dâu). */
  --blue-900: #4C1986;  /* gốc #143A5C */
  --blue-800: #6322A1;  /* gốc #1B4A73 */
  --blue-700: #8234C2;  /* gốc #24628F */
  --blue-600: #9741D3;  /* gốc #2F6FAF */
  --blue-500: #A95BD8;  /* gốc #3B82C4 */
  --blue-400: #C893E3;  /* gốc #79ACDB */
  --blue-300: #DDB2EE;  /* gốc #9CC6EA */
  --blue-200: #F1D5FB;  /* gốc #CBE1F7 */
  --blue-100: #F3E2F8;  /* gốc #DCE9F7 */
  --blue-50: #FBEEFE;  /* gốc #EAF3FF */
  --blue-tint: #FDF2FF;  /* gốc #F0F6FF */
  --surface-app: #F9F7FA;
  --surface-tint-blue: #FAF8FA;
  --page-bg:
    radial-gradient(circle at 12% 18%, rgba(255, 201, 60, 0.32) 0 70px, transparent 72px),
    radial-gradient(circle at 88% 12%, rgba(169, 91, 216, 0.26) 0 90px, transparent 92px),
    radial-gradient(circle at 82% 82%, rgba(52, 168, 83, 0.24) 0 85px, transparent 87px),
    linear-gradient(135deg, #FCF2FD 0%, #FFF8EA 48%, #FDF2FF 100%);
  --shadow-rgb: 99, 34, 161;
  --accent-secondary-rgb: 151, 65, 211;
  --focus-ring: rgba(169, 91, 216, 0.25);
  --wheel-bg: conic-gradient(from -22.5deg,
      #e3342f 0deg 45deg, #f39c12 45deg 90deg, #6322A1 90deg 135deg,
      #3aa127 135deg 180deg, #f4bd2a 180deg 225deg, #d313d3 225deg 270deg,
      #f36f13 270deg 315deg, #20a6b8 315deg 360deg);
}

html[data-theme="ha"],
.theme-preview[data-theme="ha"] {   /* ☀️ HẠ */
  /* ☀️ Hạ — xanh ngọc biển — tươi, bão hoà cao hơn cho cảm giác nắng. */
  --blue-900: #0D3E44;  /* gốc #143A5C */
  --blue-800: #134F54;  /* gốc #1B4A73 */
  --blue-700: #10686D;  /* gốc #24628F */
  --blue-600: #19787B;  /* gốc #2F6FAF */
  --blue-500: #2B8B8C;  /* gốc #3B82C4 */
  --blue-400: #2EB9B7;  /* gốc #79ACDB */
  --blue-300: #1BD7D0;  /* gốc #9CC6EA */
  --blue-200: #94EEE8;  /* gốc #CBE1F7 */
  --blue-100: #B6F3EE;  /* gốc #DCE9F7 */
  --blue-50: #C0FEF7;  /* gốc #EAF3FF */
  --blue-tint: #D4FEF8;  /* gốc #F0F6FF */
  --surface-app: #F3F9F8;
  --surface-tint-blue: #F7F9F9;
  --page-bg:
    radial-gradient(circle at 12% 18%, rgba(255, 201, 60, 0.32) 0 70px, transparent 72px),
    radial-gradient(circle at 88% 12%, rgba(43, 139, 140, 0.26) 0 90px, transparent 92px),
    radial-gradient(circle at 82% 82%, rgba(52, 168, 83, 0.24) 0 85px, transparent 87px),
    linear-gradient(135deg, #DAFCF8 0%, #FFF8EA 48%, #D4FEF8 100%);
  --shadow-rgb: 19, 79, 84;
  --accent-secondary-rgb: 25, 120, 123;
  --focus-ring: rgba(43, 139, 140, 0.25);
  --wheel-bg: conic-gradient(from -22.5deg,
      #e3342f 0deg 45deg, #f39c12 45deg 90deg, #134F54 90deg 135deg,
      #3aa127 135deg 180deg, #f4bd2a 180deg 225deg, #d313d3 225deg 270deg,
      #f36f13 270deg 315deg, #20a6b8 315deg 360deg);
}

html[data-theme="thu"],
.theme-preview[data-theme="thu"] {   /* 🍂 THU */
  /* 🍂 Thu — nâu đất / gạch nung. Hạ BÃO HOÀ hẳn xuống để KHÔNG lẫn với cam thưởng vốn rất tươi. */
  --blue-900: #582C19;  /* gốc #143A5C */
  --blue-800: #673D28;  /* gốc #1B4A73 */
  --blue-700: #80533B;  /* gốc #24628F */
  --blue-600: #926143;  /* gốc #2F6FAF */
  --blue-500: #A8724C;  /* gốc #3B82C4 */
  --blue-400: #CF9D76;  /* gốc #79ACDB */
  --blue-300: #D9BCA4;  /* gốc #9CC6EA */
  --blue-200: #F0DBC6;  /* gốc #CBE1F7 */
  --blue-100: #F0E6DB;  /* gốc #DCE9F7 */
  --blue-50: #F9F1E7;  /* gốc #EAF3FF */
  --blue-tint: #FDF4EA;  /* gốc #F0F6FF */
  --surface-app: #FDF7EE;
  --surface-tint-blue: #FDF8F1;
  --page-bg:
    radial-gradient(circle at 12% 18%, rgba(255, 201, 60, 0.32) 0 70px, transparent 72px),
    radial-gradient(circle at 88% 12%, rgba(168, 114, 76, 0.26) 0 90px, transparent 92px),
    radial-gradient(circle at 82% 82%, rgba(52, 168, 83, 0.24) 0 85px, transparent 87px),
    linear-gradient(135deg, #FCF4EA 0%, #FFF8EA 48%, #FDF4EA 100%);
  --shadow-rgb: 103, 61, 40;
  --accent-secondary-rgb: 146, 97, 67;
  --focus-ring: rgba(168, 114, 76, 0.25);
  --wheel-bg: conic-gradient(from -22.5deg,
      #e3342f 0deg 45deg, #f39c12 45deg 90deg, #673D28 90deg 135deg,
      #3aa127 135deg 180deg, #f4bd2a 180deg 225deg, #d313d3 225deg 270deg,
      #f36f13 270deg 315deg, #20a6b8 315deg 360deg);
}

html[data-theme="dong"],
.theme-preview[data-theme="dong"] {   /* ❄️ ĐÔNG */
  /* ❄️ Đông — chàm sâu đêm đông. VẪN là xanh lạnh (đúng chất mùa đông) nhưng SÂU và ngả chàm hẳn so với bản mặc định — bản thử đầu chỉ cách mặc định ΔE 7,8, nhìn y hệt, phải dò lại. */
  --blue-900: #122E8B;  /* gốc #143A5C */
  --blue-800: #1D3BAC;  /* gốc #1B4A73 */
  --blue-700: #2C4EDB;  /* gốc #24628F */
  --blue-600: #4560E1;  /* gốc #2F6FAF */
  --blue-500: #6376DE;  /* gốc #3B82C4 */
  --blue-400: #96A2F1;  /* gốc #79ACDB */
  --blue-300: #B7BEF4;  /* gốc #9CC6EA */
  --blue-200: #D9DCFF;  /* gốc #CBE1F7 */
  --blue-100: #E5E6FB;  /* gốc #DCE9F7 */
  --blue-50: #F0F1FF;  /* gốc #EAF3FF */
  --blue-tint: #F4F5FE;  /* gốc #F0F6FF */
  --surface-app: #F7F7FF;
  --surface-tint-blue: #F8F8FF;
  --page-bg:
    radial-gradient(circle at 12% 18%, rgba(255, 201, 60, 0.32) 0 70px, transparent 72px),
    radial-gradient(circle at 88% 12%, rgba(99, 118, 222, 0.26) 0 90px, transparent 92px),
    radial-gradient(circle at 82% 82%, rgba(52, 168, 83, 0.24) 0 85px, transparent 87px),
    linear-gradient(135deg, #F5F5F7 0%, #FFF8EA 48%, #F4F5FE 100%);
  --shadow-rgb: 29, 59, 172;
  --accent-secondary-rgb: 69, 96, 225;
  --focus-ring: rgba(99, 118, 222, 0.25);
  --wheel-bg: conic-gradient(from -22.5deg,
      #e3342f 0deg 45deg, #f39c12 45deg 90deg, #1D3BAC 90deg 135deg,
      #3aa127 135deg 180deg, #f4bd2a 180deg 225deg, #d313d3 225deg 270deg,
      #f36f13 270deg 315deg, #20a6b8 315deg 360deg);
}

/* ============================================================================
   [ĐỢT 5 · M5.3] Ô XEM TRƯỚC CỦA "TỦ ÁO"
   Mỗi khối theme ở trên nhận THÊM selector `.theme-preview[data-theme="…"]`, nên
   một thẻ mang cả class `theme-preview` lẫn `data-theme="xuan"` sẽ có bộ biến của
   Xuân NGAY BÊN TRONG NÓ. Nhờ vậy ô xem trước lấy ĐÚNG màu thật của theme —
   KHÔNG phải chép lại bảng màu lần thứ hai (chép là sớm muộn cũng lệch nhau).
   Độ ưu tiên: `.theme-preview[data-theme]` = (0,2,0) > `:root` = (0,1,0) → bên
   trong thẻ, màu của theme thắng, kể cả khi cả trang đang ở theme khác.

   ⚠️ Khối dưới đây CHỈ dành cho ô xem trước. Thẻ <html> KHÔNG BAO GIỜ mang
      data-theme="bac-ha" (apDungTheme GỠ HẲN thuộc tính khi về mặc định, để trạng
      thái mặc định trùng khít bản trước M5.1) — nên phải khai riêng ở đây, nếu
      không thì ô "Kẹo Bạc Hà" sẽ hiện màu của theme đang bật chứ không phải màu
      xanh của chính nó.
   🔴 Giá trị dưới đây phải LUÔN KHỚP với :root ở đầu file. Sửa :root thì sửa cả đây.
   ============================================================================ */

.theme-preview[data-theme="bac-ha"] {
  --blue-900: #143A5C;
  --blue-800: #1B4A73;
  --blue-700: #24628F;
  --blue-600: #2F6FAF;
  --blue-500: #3B82C4;
  --blue-400: #79ACDB;
  --blue-300: #9CC6EA;
  --blue-200: #CBE1F7;
  --blue-100: #DCE9F7;
  --blue-50:  #EAF3FF;
  --blue-tint: #F0F6FF;
}

/* ============================================================================
   [ĐỢT 5 · M5.4] THEME TRUYỆN CỔ TÍCH
   Nặng đô hơn theme mùa: không chỉ đổi màu mà còn có HOẠ TIẾT và FONT TIÊU ĐỀ.

   🎨 MÀU — vì sao là TÍM KHÓI chứ không phải tím rực hay vàng kim:
      6 theme trước đã chiếm gần hết vòng màu (xanh dương 208 · hồng sen 330 ·
      tím 280 · xanh ngọc 180 · nâu 25 · chàm 230), lại còn phải tránh 4 màu MANG
      Ý NGHĨA. Cho máy quét cả 360° thì vùng trống tốt nhất về ĐIỂM SỐ là ô-liu
      vàng — nhưng xấu và sát “vàng sao”. Vùng 300–320 với BÃO HOÀ THẤP (tím khói)
      vừa đúng chất hoàng hôn cổ tích, vừa cách xa mọi thứ: ΔE tới theme gần nhất
      (Kẹo Dâu) là 34,4 · tới màu ý nghĩa gần nhất là 70,4.

   📜 NỀN GIẤY CŨ: --surface-app ngả vàng ngà (hue 38) thay vì hồng xám — cổ tích
      thì nền phải như trang sách cũ. Vẫn DÒ khớp đúng độ sáng bản gốc nên tương
      phản chữ không đổi (tiêu đề 8,64:1 · thân bài 12,58:1 · link 4,90:1).

   ✨ HOẠ TIẾT: ô lặp 140×140 có 5 ngôi sao nhỏ, độ mờ 0,13–0,20, nhúng thẳng dạng
      SVG data-URI (840 ký tự) — KHÔNG thêm tệp ảnh, KHÔNG thêm lượt tải mạng.
      ⚠️ Kế hoạch dặn “cảnh giác hoạ tiết nền nặng trên máy yếu”: ô nhỏ + tô đặc +
         KHÔNG hoạt hình → trình duyệt giải mã MỘT LẦN rồi lát lại, rẻ hơn nhiều so
         với hoạt hình hay hàng chục thẻ DOM trang trí. Có đo lại thời gian vẽ.

   🔤 FONT TIÊU ĐỀ: xem chú thích ở --font-display bên dưới.
   ============================================================================ */

html[data-theme="cotich"],
.theme-preview[data-theme="cotich"] {
  /* ---------- DẢI THƯƠNG HIỆU: tím khói hoàng hôn ---------- */
  --blue-900: #4B2E4A;  /* gốc #143A5C */
  --blue-800: #613A5E;  /* gốc #1B4A73 */
  --blue-700: #7C4E78;  /* gốc #24628F */
  --blue-600: #8D5C87;  /* gốc #2F6FAF */
  --blue-500: #9E6F97;  /* gốc #3B82C4 */
  --blue-400: #C799BF;  /* gốc #79ACDB */
  --blue-300: #D3BACE;  /* gốc #9CC6EA */
  --blue-200: #E7DBE4;  /* gốc #CBE1F7 */
  --blue-100: #EEE5EB;  /* gốc #DCE9F7 */
  --blue-50: #FAEFF7;  /* gốc #EAF3FF */
  --blue-tint: #F9F4F8;  /* gốc #F0F6FF */

  /* ---------- NỀN: GIẤY CŨ ---------- */
  --surface-app: #FBF7F0;        /* gốc #F4F8FF */
  --surface-tint-blue: #FBF8F3;  /* gốc #F5F9FF */

  /* Nền trang: lớp 1 là HOẠ TIẾT LẤP LÁNH (ô lặp 140×140, SVG nhúng thẳng — không
     thêm tệp ảnh, không thêm lượt tải). Ba đốm tròn hạ độ đậm cho dịu, chặng cuối
     ngả vàng ngà cho ra chất giấy cũ. */
  --page-bg:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><path d='M 22 23 Q 23.54 28.46 29 30 Q 23.54 31.54 22 37 Q 20.46 31.54 15 30 Q 20.46 28.46 22 23 Z' fill='%23A47C9E' opacity='.20'/><path d='M 96 13.5 Q 96.99 17.01 100.5 18 Q 96.99 18.99 96 22.5 Q 95.01 18.99 91.5 18 Q 95.01 17.01 96 13.5 Z' fill='%23A47C9E' opacity='.15'/><path d='M 58 76.5 Q 59.21 80.79 63.5 82 Q 59.21 83.21 58 87.5 Q 56.79 83.21 52.5 82 Q 56.79 80.79 58 76.5 Z' fill='%23A47C9E' opacity='.17'/><path d='M 120 97.5 Q 121.43 102.57 126.5 104 Q 121.43 105.43 120 110.5 Q 118.57 105.43 113.5 104 Q 118.57 102.57 120 97.5 Z' fill='%23A47C9E' opacity='.14'/><path d='M 14 114 Q 14.88 117.12 18 118 Q 14.88 118.88 14 122 Q 13.12 118.88 10 118 Q 13.12 117.12 14 114 Z' fill='%23A47C9E' opacity='.13'/></svg>"),
    radial-gradient(circle at 12% 18%, rgba(255, 201, 60, 0.26) 0 70px, transparent 72px),
    radial-gradient(circle at 88% 12%, rgba(158, 111, 151, 0.22) 0 90px, transparent 92px),
    radial-gradient(circle at 82% 82%, rgba(164, 124, 158, 0.18) 0 85px, transparent 87px),
    linear-gradient(135deg, #FBF4E9 0%, #FFF6E6 48%, #FBF2F7 100%);

  --shadow-rgb: 97, 58, 94;
  --accent-secondary-rgb: 141, 92, 135;
  --focus-ring: rgba(158, 111, 151, 0.25);

  /* ---------- FONT TIÊU ĐỀ ---------- */
  /* Lora — ĐÃ ĐO từng ký tự: đủ toàn bộ dấu tiếng Việt (xem chú thích ở style.css).
     Font chỉ được TẢI KHI theme này được bật (script.js: napFontCoTich) → người dùng
     theme khác KHÔNG tốn thêm một lượt tải mạng nào. */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;

  --wheel-bg: conic-gradient(from -22.5deg,
      #e3342f 0deg 45deg, #f39c12 45deg 90deg, #613A5E 90deg 135deg,
      #3aa127 135deg 180deg, #f4bd2a 180deg 225deg, #d313d3 225deg 270deg,
      #f36f13 270deg 315deg, #20a6b8 315deg 360deg);
}

/* ============================================================================
   [ĐỢT 5 · M5.5] THEME TRÒ CHƠI
   🎮 MÀU: tím ĐIỆN neon. Đến mục này thì 7 theme đã chiếm gần hết vòng màu, nên
      lại cho máy quét 360° tìm chỗ còn trống. Chọn tím điện vì:
      · cách theme gần nhất (Xuân) ΔE 35,7 — Xuân là tím TỬ ĐINH HƯƠNG dịu, cái này
        là tím ĐIỆN chói; cùng họ tím nhưng nhìn ra ngay là hai thứ khác nhau;
      · cách màu mang ý nghĩa gần nhất tới ΔE 130 — rất an toàn.
      Bão hoà ĐẨY CAO hẳn (×1,7 so với dải gốc) — chính độ chói đó làm nên cảm giác
      “màn hình game”, chứ không phải bản thân tông màu.

   👾 HOẠ TIẾT: lưới điểm ảnh 24×24 (hai nét kẻ + một ô vuông sáng) → chất màn hình
      8-bit. data-URI chỉ 270 ký tự, ô nhỏ nên trình duyệt giải mã một lần rồi lát.

   🕹️ BỐN TRÒ TRONG KHU VUI CHƠI GIỮ BẢN SẮC RIÊNG (đại ca chốt):
      Vòng quay, Lật thẻ, Đua toán, Khu vườn KHÔNG nhuộm theo theme. Điều này vốn đã
      đúng SẴN theo cấu tạo: --game-blue-*, --water*, --wheel-bg (7/8 nan) đều nằm
      ngoài nhóm biến mà theme đổi. Mỗi trò là một thế giới riêng; nhuộm hết theo
      theme là mất nét. CHỈ nan 3 vòng quay đổi, vì nó vốn là màu XANH THƯƠNG HIỆU
      nên để nguyên sẽ chỏi với cả màn.
   ============================================================================ */

html[data-theme="trochoi"],
.theme-preview[data-theme="trochoi"] {
  /* ---------- DẢI THƯƠNG HIỆU: tím điện neon ---------- */
  --blue-900: #4A009F;  /* gốc #143A5C */
  --blue-800: #5F00C3;  /* gốc #1B4A73 */
  --blue-700: #7D00F7;  /* gốc #24628F */
  --blue-600: #9726FD;  /* gốc #2F6FAF */
  --blue-500: #AB4FF7;  /* gốc #3B82C4 */
  --blue-400: #CC8CFE;  /* gốc #79ACDB */
  --blue-300: #DEAFFF;  /* gốc #9CC6EA */
  --blue-200: #EFD5FF;  /* gốc #CBE1F7 */
  --blue-100: #F4E1FF;  /* gốc #DCE9F7 */
  --blue-50: #F9EEFF;  /* gốc #EAF3FF */
  --blue-tint: #FBF3FF;  /* gốc #F0F6FF */

  /* ---------- NỀN ---------- */
  --surface-app: #FBF6FE;        /* gốc #F4F8FF */
  --surface-tint-blue: #FBF7FE;  /* gốc #F5F9FF */

  /* Nền trang: lớp 1 là LƯỚI ĐIỂM ẢNH (ô 24×24) cho cảm giác màn hình game 8-bit. */
  --page-bg:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 0 H24 M0 0 V24' stroke='%23A855F7' stroke-width='1' opacity='.10'/><rect x='9' y='9' width='3' height='3' fill='%23A855F7' opacity='.13'/></svg>"),
    radial-gradient(circle at 12% 18%, rgba(255, 201, 60, 0.30) 0 70px, transparent 72px),
    radial-gradient(circle at 88% 12%, rgba(171, 79, 247, 0.30) 0 90px, transparent 92px),
    radial-gradient(circle at 82% 82%, rgba(52, 168, 83, 0.24) 0 85px, transparent 87px),
    linear-gradient(135deg, #FAF3FE 0%, #FFF8EA 48%, #FBF3FF 100%);

  --shadow-rgb: 95, 0, 195;
  --accent-secondary-rgb: 151, 38, 253;
  /* Quầng focus dày hơn một chút cho ra chất "đèn neon" */
  --focus-ring: rgba(171, 79, 247, 0.34);

  --wheel-bg: conic-gradient(from -22.5deg,
      #e3342f 0deg 45deg, #f39c12 45deg 90deg, #5F00C3 90deg 135deg,
      #3aa127 135deg 180deg, #f4bd2a 180deg 225deg, #d313d3 225deg 270deg,
      #f36f13 270deg 315deg, #20a6b8 315deg 360deg);
}