/* =============================================================================
   hocvien — brand.css · NGUỒN TOKEN DUY NHẤT cho toàn hệ web
   -----------------------------------------------------------------------------
   Ba tầng:
     (1) PRIMITIVES  — bảng màu/font thô, CHỈ khai ở đây.
     (2) SEMANTIC    — token có nghĩa (--brand, --surface, --text…) trỏ về primitives.
     (3) THEME       — Sale = mặc định trên :root (đen + vàng).
                       App  = .theme-app (nền đen, vàng thương hiệu) → <body class="theme-app">.

   Tầng (4) ALIAS ở cuối mỗi theme map TÊN CŨ (mỗi trang tự đặt trước đây) về
   token mới, để chuyển từng trang KHÔNG phải sửa hết CSS. Bỏ dần alias khi trang
   đã đổi sang tên semantic.

   >>> SỬA MÀU / FONT THƯƠNG HIỆU = sửa DUY NHẤT ở tầng (1) PRIMITIVES dưới đây. <<<

   Đã phủ (byte-identical, không đổi giao diện):
     SALE (:root): landing/ · tron-bo/ · thuthach/
     APP (.theme-app): learn/ · admin/
     KIT (.theme-kit): kit/ (biến thể tối riêng, lệch màu chuẩn app — tách scope)
   Chưa gộp (cố ý): sach/ (palette kem ấm riêng, giữ nguyên theo yêu cầu).
   ============================================================================= */

:root {
  /* ── (1) PRIMITIVES — bảng màu thô ──────────────────────────────────────── */
  /* Tên --c-green* được giữ để các trang cũ nhận bảng màu mới không cần
     sửa hàng trăm selector. Giá trị thực tế nay là đen/vàng thương hiệu. */
  --c-green-500:#ffe066;    /* vàng sáng (nút/nhấn)       */
  --c-green-700:#ffd000;    /* vàng CHÍNH (sale/app)      */
  --c-green-800:#e6b800;    /* vàng hover                 */
  --c-green-900:#171717;    /* đen thương hiệu            */
  --c-green-tint:#fff8d8;   /* nền vàng rất nhạt          */
  --c-app-green:#ffd000;    /* vàng app (trên nền đen)    */
  --c-app-green-2:#e6b800;
  --c-forest-top:#070707;   /* dải đen (trên)             */
  --c-forest-bot:#171717;   /* dải đen (dưới)             */
  --c-yellow:#ffd000;       /* vàng nhấn                  */
  --c-gold:#ffcf33;         /* vàng phụ                   */
  --c-flame:#ff6b35;
  --c-red:#d33;
  --c-danger:#ef4444;
  --c-warn-ink:#b25000;     /* cam đủ tương phản trên nền trắng */
  --c-warn:#f97316;         /* cam app (trên nền tối)     */
  --c-white:#ffffff;
  --c-gray-50:#f4f4f4;
  --c-gray-200:#e0e0e0;
  --c-ink:#111111;
  --c-ink-2:#444444;
  --c-ink-3:#666666;
  --c-navy-900:#0b1020;     /* nền app (sâu nhất)         */
  --c-navy-800:#131a2e;
  --c-navy-700:#1c2540;
  --c-fog:#f4f6fb;          /* chữ sáng trên nền tối      */
  --c-fog-2:#c5cce0;
  --c-fog-mut:#8b94b3;
  --c-fog-mut2:#5d6788;
  /* biến thể sắc độ cho trang sale nhiều thẻ (thuthach/) */
  --c-panel2:#fffdf5;      /* nền thẻ phụ */
  --c-border2:#e8dfb7;     /* viền đậm hơn */
  --c-green-dim:#fff4b8;   /* nền vàng rất nhạt (giữ tên cũ) */
  --c-gold-ink:#735600;    /* vàng làm CHỮ trên nền sáng */
  --c-gold-dim:#fff8d8;    /* nền vàng nhạt */
  --c-warn-dim:#fff2e8;    /* nền cam nhạt */
  --c-muted2:#8a8a8a;      /* chữ mờ cấp 2 (sale) */
  /* biến thể tối RIÊNG cho kit/ (lệch chuẩn app, tách scope .theme-kit) */
  --c-kit-card:#151515;   /* nền thẻ */
  --c-kit-line:#3b3518;   /* viền vàng đen */
  --c-kit-ink:#e8ecf8;    /* chữ  (khác fog #f4f6fb) */
  --c-kit-mut:#8b94ad;    /* chữ mờ (khác fog-mut #8b94b3) */
  --c-kit-gold:#ffd000;   /* vàng thương hiệu */

  --f-display:"Barlow Condensed","Bebas Neue",Impact,sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --f-app:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",sans-serif;

  /* ── (2)+(3) SEMANTIC · THEME SALE (mặc định, nền sáng) ─────────────────── */
  --brand:var(--c-green-700);
  --brand-strong:var(--c-green-800);
  --brand-bright:var(--c-green-500);
  --brand-deep:var(--c-green-900);
  --on-brand:#111111;                 /* chữ nằm trên nút vàng */

  --surface:var(--c-white);
  --surface-alt:var(--c-gray-50);
  --surface-tint:var(--c-green-tint);
  --surface-dark-top:var(--c-forest-top);
  --surface-dark-bot:var(--c-forest-bot);

  --text:var(--c-ink);
  --text-2:var(--c-ink-2);
  --text-muted:var(--c-ink-3);

  --border:var(--c-gray-200);
  --accent-yellow:var(--c-yellow);
  --accent-flame:var(--c-flame);
  --accent-red:var(--c-red);
  --warn:var(--c-warn-ink);

  --font-display:var(--f-display);
  --font-body:var(--f-body);

  --radius:14px;
  --content-max:760px;
  --container-max:1200px;

  /* ── (SCALE) HÌNH KHỐI — thang bo góc + đổ bóng DÙNG CHUNG (phase 2). Nắn giá
     trị lẻ mỗi trang về thang này → chỉnh 1 chỗ là cả web đổi theo. Bóng ở đây
     hợp NỀN SÁNG (sale); theme tối override lại ở .theme-app / .theme-kit. ──── */
  --r-xs:4px;       /* chip/tag nhỏ            */
  --r-sm:8px;       /* nút phụ, input, ô nhỏ   */
  --r-md:12px;      /* thẻ tiêu chuẩn, nút     */
  --r-lg:16px;      /* thẻ lớn, panel, modal   */
  --r-xl:20px;      /* hero, khối nổi bật      */
  --r-pill:9999px;  /* viên thuốc (bo hết)     */
  --r-circle:50%;   /* tròn (avatar, chấm)     */
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 6px 24px rgba(0,0,0,.10);
  --shadow-lg:0 16px 40px rgba(0,0,0,.14);

  /* ── (4) ALIAS legacy · landing/ + tron-bo/ (bỏ dần khi trang đổi tên) ──── */
  --bg-dark-top:var(--surface-dark-top);
  --bg-dark-bottom:var(--surface-dark-bot);
  --bg-white:var(--surface);
  --bg-gray:var(--surface-alt);
  --bg-light-green:var(--surface-tint);
  --brand-green:var(--brand);
  --brand-green-hover:var(--brand-strong);
  --brand-green-bright:var(--brand-bright);
  --brand-green-dark:var(--brand-deep);
  --highlight-yellow:var(--accent-yellow);
  --flame:var(--accent-flame);
  --text-dark:var(--text);
  --text-light:var(--c-white);        /* chữ trên khối nền đen */
  --text-secondary:var(--text-2);
  --border-subtle:var(--border);
  --font-disp:var(--font-display);

  /* ── ALIAS legacy · thuthach/ (tên riêng trang thử thách 29 ngày) ──────── */
  --bg:var(--surface);
  --bg-mint:var(--surface-tint);
  --dark-top:var(--surface-dark-top);
  --dark-bot:var(--surface-dark-bot);
  --panel:var(--surface);
  --panel2:var(--c-panel2);
  --border2:var(--c-border2);
  --green:var(--brand);
  --green2:var(--brand-strong);
  --green-br:var(--brand-bright);
  --green-dim:var(--c-green-dim);
  --gold:var(--accent-yellow);
  --gold-ink:var(--c-gold-ink);
  --gold-dim:var(--c-gold-dim);
  --warn-dim:var(--c-warn-dim);
  --text2:var(--text-2);
  --muted:var(--text-muted);
  --muted2:var(--c-muted2);
  --head:var(--font-display);
  --body:var(--font-body);
  --gutter:max(18px, calc((100vw - 1000px) / 2));
}

/* ── THEME APP — nền tối (learn/, admin/): <body class="theme-app"> ───────── */
.theme-app {
  --brand:var(--c-app-green);
  --brand-2:var(--c-app-green-2);
  --brand-dim:rgba(255,208,0,.16);
  --on-brand:#111111;

  --surface:#090909;
  --surface-alt:#151515;
  --surface-2:#151515;
  --surface-3:#242424;
  --surface-hover:rgba(255,208,0,.08);

  --text:var(--c-fog);
  --text-2:var(--c-fog-2);
  --text-muted:var(--c-fog-mut);

  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --accent-gold:var(--c-gold);
  --warn:var(--c-warn);
  --danger:var(--c-danger);
  --font-body:var(--f-app);

  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 6px 22px rgba(0,0,0,.45);
  --shadow-lg:0 18px 40px rgba(0,0,0,.45);
  --glow-brand:0 8px 24px rgba(255,208,0,.25);   /* hào quang vàng cho CTA */

  /* layout app (learn/) */
  --sidebar-w:380px;
  --topbar-h:56px;
  --footbar-h:64px;

  /* alias legacy · learn/ + admin/ */
  --bg:var(--surface);
  --bg2:var(--surface-2);
  --bg3:var(--surface-3);
  --bg-hover:var(--surface-hover);
  --border2:var(--border-2);
  --brand2:var(--brand-2);
  --gold:var(--accent-gold);
  --muted:var(--text-muted);
  --muted2:var(--c-fog-mut2);
  --text2:var(--text-2);
  --font:var(--font-body);
}

/* ── THEME KIT — biến thể tối RIÊNG của kit/ (lệch màu chuẩn app, cố ý giữ scope
   riêng để 0 lệch). KHÔNG kế thừa .theme-app; kit chỉ dùng đúng 7 token dưới. ─── */
.theme-kit {
  --bg:#090909;
  --card:var(--c-kit-card);
  --line:var(--c-kit-line);
  --ink:var(--c-kit-ink);
  --mut:var(--c-kit-mut);
  --green:var(--c-app-green);
  --gold:var(--c-kit-gold);
  /* bóng nền TỐI + hào quang vàng cho CTA */
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 22px 50px rgba(0,0,0,.55);
  --glow-brand:0 8px 24px rgba(255,208,0,.25);
}