/* ============================================================
   Học Cùng Con v2.2 — Hệ thống Giao diện (Theme System) v2
   File dùng chung cho: index.html, dashboard.html, bai-hoc.html
   - Theme mặc định "classic" giữ NGUYÊN giá trị CSS gốc từng trang
   - Chọn theme: body[data-theme="..."]  (classic | thien_nhien | game | coder | hellokitty)
   - Dark mode:  body[data-dark="true"]
   - Lưu lựa chọn: localStorage 'hcc_theme' / 'hcc_dark' + tài khoản (PUT /api/auth/giao-dien)
   ============================================================ */

/* ===== Classic (mặc định) — đồng bộ với CSS gốc =====
   KHÔNG khai báo --bg ở đây để mỗi trang giữ nguyên nền classic
   riêng (index/dashboard #f8fafc, bai-hoc #f1f5f9). */
:root {
  /* Tên biến dài — index.html, dashboard.html */
  --primary:#2563eb; --success:#059669; --warning:#d97706;
  --card:#fff; --text:#1e293b; --border:#e2e8f0; --muted:#64748b;
  /* Tên biến ngắn — bai-hoc.html */
  --p:#6366f1; --s:#10b981; --w:#f59e0b; --d:#ef4444;
  --t:#1e293b; --b:#e2e8f0; --m:#64748b;
}

/* ============================================================
   NÂNG CẤP CHUNG (3 trang) — không phá bố cục
   ============================================================ */
.card, .stat-card, .subject-card, .quest-header {
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn {
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
}
.btn:not(.btn-ghost):hover { transform:translateY(-1px); }
.btn-primary { box-shadow:0 2px 10px rgba(37,99,235,.22); }
.quest-header { box-shadow:0 6px 18px rgba(99,102,241,.18); }

/* ===== Theme 1: CLASSIC — header gradient xanh nhẹ, shadow mềm, card 14px, hover nâng ===== */
body[data-theme="classic"] header {
  background:linear-gradient(135deg,#eef4ff 0%,#f8fafc 100%);
  border-bottom:1px solid #dbeafe;
  box-shadow:0 2px 14px rgba(37,99,235,.08);
}
body[data-theme="classic"] header h1 { color:var(--primary); }
body[data-theme="classic"] .card, body[data-theme="classic"] .stat-card,
body[data-theme="classic"] .subject-card {
  border-radius:14px;
  box-shadow:0 2px 10px rgba(15,23,42,.05);
}
body[data-theme="classic"] .stat-card:hover, body[data-theme="classic"] .subject-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(37,99,235,.12);
}

/* ===== Theme 2: THIÊN NHIÊN — nền radial xanh lá dịu, accent 🌿, card 18px viền xanh nhạt ===== */
body[data-theme="thien_nhien"] {
  --primary:#16a34a; --success:#0d9488;
  --bg:#f0fdf4; --card:#ffffff;
  --p:#16a34a; --s:#0d9488;
  --t:#14532d; --b:#bbf7d0; --m:#4d7c6b;
  background:
    radial-gradient(1100px 520px at 12% -5%, rgba(22,163,74,.14), transparent 60%),
    radial-gradient(900px 480px at 100% 105%, rgba(13,148,136,.16), transparent 60%),
    linear-gradient(180deg,#f0fdf4 0%,#ecfdf5 100%);
  background-attachment:fixed;
}
body[data-theme="thien_nhien"] header {
  background:linear-gradient(135deg,#ffffff,#f0fdf4);
  border-bottom:1px solid #bbf7d0;
  box-shadow:0 2px 14px rgba(22,163,74,.10);
}
body[data-theme="thien_nhien"] .card, body[data-theme="thien_nhien"] .stat-card,
body[data-theme="thien_nhien"] .subject-card {
  border-radius:18px; border:1px solid #bbf7d0;
  box-shadow:0 4px 16px rgba(22,163,74,.08);
}
body[data-theme="thien_nhien"] .stat-card:hover, body[data-theme="thien_nhien"] .subject-card:hover {
  transform:translateY(-3px); border-color:#4ade80;
  box-shadow:0 10px 26px rgba(22,163,74,.18);
}
body[data-theme="thien_nhien"] .btn-primary {
  background:linear-gradient(135deg,#16a34a,#0d9488);
  box-shadow:0 4px 12px rgba(13,148,136,.30);
}
body[data-theme="thien_nhien"] .btn-primary:hover { background:#15803d; box-shadow:0 6px 16px rgba(22,163,74,.35); }
body[data-theme="thien_nhien"] .quest-header {
  background:linear-gradient(135deg,#16a34a,#0d9488);
  border-radius:18px;
  box-shadow:0 8px 20px rgba(22,163,74,.25);
}
body[data-theme="thien_nhien"] .logo h1::after,
body[data-theme="thien_nhien"] header h1::after { content:' 🌿'; }
body[data-theme="thien_nhien"] .badge-progress { background:#dcfce7; color:#15803d; }
body[data-theme="thien_nhien"] .chapter-row { color:#15803d; }
body[data-theme="thien_nhien"] .skill-node:hover, body[data-theme="thien_nhien"] .skill-node.active { background:#dcfce7; }
body[data-theme="thien_nhien"] .opt.selected { background:#dcfce7; border-color:#16a34a; }

/* ===== Theme 3: GAME — nền tím-hồng đậm, nút glow, card viền gradient 2px, hover phát sáng ⚡ ===== */
body[data-theme="game"] {
  --primary:#7c3aed; --success:#16a34a; --warning:#f59e0b;
  --bg:#faf5ff; --card:#fff; --text:#ede9fe; --border:#e9d5ff; --muted:#c4b5fd;
  --p:#7c3aed; --s:#16a34a; --w:#f59e0b; --d:#ef4444;
  --t:#ede9fe; --b:#e9d5ff; --m:#c4b5fd;
  --accent:#f59e0b;
  background:
    radial-gradient(900px 480px at 12% 8%, rgba(124,58,237,.50), transparent 60%),
    radial-gradient(800px 460px at 92% 95%, rgba(219,39,119,.42), transparent 60%),
    linear-gradient(140deg,#1e1b4b 0%,#4c1d95 55%,#831843 100%);
  background-attachment:fixed;
}
/* Bề mặt sáng (card/header/sidebar...) — trả chữ tối để đọc được trên nền gradient đậm */
body[data-theme="game"] header, body[data-theme="game"] .sidebar, body[data-theme="game"] .drawer,
body[data-theme="game"] .card, body[data-theme="game"] .stat-card, body[data-theme="game"] .subject-card,
body[data-theme="game"] .tabs, body[data-theme="game"] .error-boundary {
  --text:#2e1065; --t:#2e1065; --muted:#7c6a9e; --m:#7c6a9e; --border:#e9d5ff; --b:#e9d5ff;
  color:#2e1065;
}
body[data-theme="game"] input, body[data-theme="game"] select, body[data-theme="game"] textarea {
  background:#fff; color:#2e1065; border-color:#e9d5ff;
}
body[data-theme="game"] .card, body[data-theme="game"] .stat-card, body[data-theme="game"] .subject-card {
  border-radius:16px; border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#a78bfa,#f472b6) border-box;
  box-shadow:0 6px 20px rgba(124,58,237,.20);
}
body[data-theme="game"] .stat-card:hover, body[data-theme="game"] .subject-card:hover {
  transform:translateY(-3px);
  box-shadow:0 0 22px rgba(167,139,250,.55), 0 12px 28px rgba(124,58,237,.30);
}
body[data-theme="game"] .btn-primary, body[data-theme="game"] .btn-p {
  background:linear-gradient(135deg,#7c3aed,#db2777);
  box-shadow:0 4px 14px rgba(124,58,237,.45);
}
body[data-theme="game"] .btn-primary:hover {
  background:linear-gradient(135deg,#6d28d9,#be185d);
  box-shadow:0 6px 20px rgba(219,39,119,.55);
}
body[data-theme="game"] .quest-header {
  background:linear-gradient(135deg,#7c3aed,var(--accent,#f59e0b));
  border-radius:16px;
  box-shadow:0 8px 24px rgba(124,58,237,.40);
}
body[data-theme="game"] .opt { border-radius:14px; }
body[data-theme="game"] .opt:hover {
  border-color:#7c3aed; box-shadow:0 0 14px rgba(124,58,237,.35);
}
body[data-theme="game"] .opt.selected {
  border-color:#7c3aed; background:#f5f3ff; box-shadow:0 0 14px rgba(124,58,237,.30);
}
body[data-theme="game"] .tabs { background:#ede9fe; }
body[data-theme="game"] .tab.active { box-shadow:0 2px 10px rgba(124,58,237,.25); }
body[data-theme="game"] .badge-progress { background:#ede9fe; color:#7c3aed; }
body[data-theme="game"] .skill-node:hover, body[data-theme="game"] .skill-node.active {
  background:#f5f3ff; border-left-color:#7c3aed; box-shadow:0 0 12px rgba(124,58,237,.28);
}
body[data-theme="game"] .chapter-row:hover { background:#f5f3ff; }
body[data-theme="game"] .chapter-count { background:#ede9fe; color:#7c3aed; }

/* ===== Theme 4: CODER — nền tối #0b1220 + lưới terminal, chữ monospace, neon cyan/lime ===== */
body[data-theme="coder"] {
  --primary:#22d3ee; --success:#4ade80; --warning:#fbbf24;
  --bg:#0b1220; --card:#101a2e; --text:#cbd5e1; --border:#1f2b3f; --muted:#7d8ea8;
  --p:#22d3ee; --s:#4ade80; --w:#fbbf24; --d:#f87171;
  --t:#e2e8f0; --b:#1f2b3f; --m:#94a3b8;
  background-color:#0b1220;
  background-image:
    repeating-linear-gradient(0deg, rgba(34,211,238,.06) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(34,211,238,.06) 0 1px, transparent 1px 26px),
    radial-gradient(1000px 500px at 80% 0%, rgba(34,211,238,.08), transparent 60%);
  background-attachment:fixed;
}
body[data-theme="coder"] h1, body[data-theme="coder"] h2,
body[data-theme="coder"] h3, body[data-theme="coder"] h4 {
  font-family:ui-monospace,'Cascadia Code',Consolas,'Courier New',monospace;
  letter-spacing:.5px;
}
body[data-theme="coder"] header {
  background:#0d1526;
  border-bottom:1px solid rgba(34,211,238,.25);
  box-shadow:0 0 18px rgba(34,211,238,.10);
}
body[data-theme="coder"] header h1 { color:#22d3ee; text-shadow:0 0 12px rgba(34,211,238,.55); }
body[data-theme="coder"] .card, body[data-theme="coder"] .stat-card, body[data-theme="coder"] .subject-card {
  background:var(--card); border:1px solid #24344f; border-radius:10px;
  box-shadow:0 0 0 1px rgba(34,211,238,.08), 0 4px 16px rgba(0,0,0,.35);
}
body[data-theme="coder"] .stat-card:hover, body[data-theme="coder"] .subject-card:hover {
  transform:translateY(-2px); border-color:#22d3ee;
  box-shadow:0 0 16px rgba(34,211,238,.25), 0 8px 20px rgba(0,0,0,.40);
}
body[data-theme="coder"] .btn-primary, body[data-theme="coder"] .btn-p {
  background:linear-gradient(135deg,#0891b2,#0e7490);
  box-shadow:0 0 14px rgba(34,211,238,.35);
}
body[data-theme="coder"] .btn-primary:hover { background:#0891b2; box-shadow:0 0 20px rgba(34,211,238,.55); }
body[data-theme="coder"] .quest-header {
  background:linear-gradient(135deg,#0e7490,#164e63);
  border:1px solid rgba(34,211,238,.30);
  box-shadow:0 0 18px rgba(34,211,238,.20);
}
body[data-theme="coder"] input, body[data-theme="coder"] select, body[data-theme="coder"] textarea {
  background:var(--card); color:var(--text); border-color:var(--border);
}
body[data-theme="coder"] .skill-node:hover, body[data-theme="coder"] .skill-node.active {
  background:#152238; border-left-color:#22d3ee;
}
body[data-theme="coder"] .chapter-row:hover { background:#152238; }
body[data-theme="coder"] .chapter-count { background:#152238; color:#22d3ee; }
body[data-theme="coder"] .opt:hover, body[data-theme="coder"] .opt.selected {
  background:#152238; border-color:#22d3ee; box-shadow:0 0 12px rgba(34,211,238,.25);
}
body[data-theme="coder"] .tabs { background:#0d1526; }
body[data-theme="coder"] .tab.active { background:#152238; color:#22d3ee; box-shadow:0 0 10px rgba(34,211,238,.30); }
body[data-theme="coder"] .badge-progress { background:#152238; color:#22d3ee; }

/* ===== Theme 5: HELLO KITTY — nền hồng pastel, card 22px viền #f9a8d4, shadow hồng mềm 🎀 ===== */
body[data-theme="hellokitty"] {
  --primary:#ec4899; --success:#10b981; --warning:#f59e0b;
  --bg:#fdf2f8; --card:#fff; --text:#831843; --border:#fbcfe8; --muted:#b06a8f;
  --p:#ec4899; --s:#10b981; --w:#f59e0b; --d:#ef4444;
  --t:#831843; --b:#fbcfe8; --m:#b06a8f;
  background:linear-gradient(165deg,#fdf2f8 0%,#fce7f3 50%,#f9d8e9 100%);
  background-attachment:fixed;
}
body[data-theme="hellokitty"] header {
  background:linear-gradient(135deg,#ffffff,#fdf2f8);
  border-bottom:1.5px solid #f9a8d4;
  box-shadow:0 2px 14px rgba(236,72,153,.12);
}
body[data-theme="hellokitty"] .card, body[data-theme="hellokitty"] .stat-card,
body[data-theme="hellokitty"] .subject-card {
  border-radius:22px; border:1.5px solid #f9a8d4;
  box-shadow:0 8px 22px rgba(236,72,153,.16);
}
body[data-theme="hellokitty"] .stat-card:hover, body[data-theme="hellokitty"] .subject-card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(236,72,153,.28);
}
body[data-theme="hellokitty"] .btn-primary, body[data-theme="hellokitty"] .btn-p {
  background:linear-gradient(135deg,#ec4899,#f472b6);
  box-shadow:0 4px 14px rgba(236,72,153,.40);
}
body[data-theme="hellokitty"] .btn-primary:hover {
  background:linear-gradient(135deg,#db2777,#ec4899);
  box-shadow:0 6px 18px rgba(236,72,153,.50);
}
body[data-theme="hellokitty"] .quest-header {
  background:linear-gradient(135deg,#ec4899,#f472b6);
  border-radius:22px;
  box-shadow:0 8px 22px rgba(236,72,153,.35);
}
body[data-theme="hellokitty"] .logo h1::after,
body[data-theme="hellokitty"] header h1::after { content:' 🎀'; }
body[data-theme="hellokitty"] .opt { border-radius:14px; }
body[data-theme="hellokitty"] .opt:hover, body[data-theme="hellokitty"] .opt.selected {
  border-color:#ec4899; background:#fdf2f8;
}
body[data-theme="hellokitty"] .badge-progress { background:#fce7f3; color:#ec4899; }
body[data-theme="hellokitty"] .skill-node:hover, body[data-theme="hellokitty"] .skill-node.active { background:#fce7f3; }
body[data-theme="hellokitty"] .chapter-row:hover { background:#fce7f3; }
body[data-theme="hellokitty"] .chapter-count { background:#fce7f3; color:#db2777; }
body[data-theme="hellokitty"] .tabs { background:#fce7f3; }
body[data-theme="hellokitty"] .tab.active { box-shadow:0 2px 10px rgba(236,72,153,.25); }

/* ============================================================
   DARK MODE — nền chung + bản tối RIÊNG cho từng theme
   (coder vốn đã tối → giữ nguyên gần như)
   ============================================================ */
body[data-dark="true"] {
  --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --border:#334155; --muted:#94a3b8;
  --t:#e2e8f0; --b:#334155; --m:#94a3b8;
  background:#0f172a;
  background-image:none;
}
body[data-dark="true"] input, body[data-dark="true"] select, body[data-dark="true"] textarea {
  background:var(--card); color:var(--text); border-color:var(--border);
}
/* Sửa các nền sáng bị "cứng" (hardcode) trong bai-hoc.html / dashboard.html / index.html */
body[data-dark="true"] .skill-node:hover, body[data-dark="true"] .skill-node.active,
body[data-dark="true"] .chapter-row:hover { background:#1e293b; }
body[data-dark="true"] .opt:hover, body[data-dark="true"] .opt.selected { background:#1e293b; }
body[data-dark="true"] .hint-level, body[data-dark="true"] .save-point { background:#1e293b; }
body[data-dark="true"] .chapter-count { background:#334155; }
body[data-dark="true"] .opt.correct, body[data-dark="true"] .feedback.success { background:#052e16; }
body[data-dark="true"] .opt.wrong, body[data-dark="true"] .feedback.nudge { background:#451a03; }
body[data-dark="true"] .feedback.quest { background:#312e81; }
body[data-dark="true"] .feedback.success { border-color:#16a34a; color:#86efac; }
body[data-dark="true"] .feedback.nudge { border-color:#d97706; color:#fcd34d; }
body[data-dark="true"] .feedback.quest { border-color:#6366f1; color:#c7d2fe; }
body[data-dark="true"] .badge-pass { background:#052e16; color:#34d399; }
body[data-dark="true"] .badge-progress { background:#1e3a8a; color:#93c5fd; }
body[data-dark="true"] .badge-locked { background:#1e293b; color:#94a3b8; }
body[data-dark="true"] .error { background:#450a0a; color:#fca5a5; }
body[data-dark="true"] .success { background:#052e16; color:#86efac; }
body[data-dark="true"] .error-boundary { background:#1e293b; border-color:#334155; }
body[data-dark="true"] .error-boundary h3 { color:#f87171; }
body[data-dark="true"] .error-boundary .btn-retry { background:#ef4444; }

/* --- classic tối --- */
body[data-theme="classic"][data-dark="true"] {
  --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --border:#334155; --muted:#94a3b8;
  --t:#e2e8f0; --b:#334155; --m:#94a3b8;
  background:#0f172a;
}
body[data-theme="classic"][data-dark="true"] header {
  background:linear-gradient(135deg,#1e293b,#0f172a);
  border-bottom-color:#334155;
  box-shadow:0 2px 14px rgba(0,0,0,.40);
}
body[data-theme="classic"][data-dark="true"] .card,
body[data-theme="classic"][data-dark="true"] .stat-card,
body[data-theme="classic"][data-dark="true"] .subject-card {
  box-shadow:0 4px 16px rgba(0,0,0,.30);
}

/* --- thien_nhien tối (rừng đêm) --- */
body[data-theme="thien_nhien"][data-dark="true"] {
  --bg:#052e16; --card:#0b2a1c; --text:#d1fae5; --border:#14532d; --muted:#6ee7b7;
  --t:#d1fae5; --b:#14532d; --m:#6ee7b7;
  background:
    radial-gradient(1000px 500px at 15% 0%, rgba(22,163,74,.22), transparent 60%),
    radial-gradient(800px 450px at 90% 100%, rgba(13,148,136,.20), transparent 60%),
    linear-gradient(180deg,#052e16,#064e3b);
  background-attachment:fixed;
}
body[data-theme="thien_nhien"][data-dark="true"] header {
  background:linear-gradient(135deg,#0b2a1c,#052e16);
  border-bottom-color:#14532d;
}
body[data-theme="thien_nhien"][data-dark="true"] .card,
body[data-theme="thien_nhien"][data-dark="true"] .stat-card,
body[data-theme="thien_nhien"][data-dark="true"] .subject-card {
  background:#0b2a1c; border-color:#14532d;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
body[data-theme="thien_nhien"][data-dark="true"] .btn-primary {
  background:linear-gradient(135deg,#15803d,#0f766e);
  box-shadow:0 4px 14px rgba(22,163,74,.40);
}
body[data-theme="thien_nhien"][data-dark="true"] .skill-node:hover,
body[data-theme="thien_nhien"][data-dark="true"] .skill-node.active,
body[data-theme="thien_nhien"][data-dark="true"] .chapter-row:hover { background:#0d3321; }
body[data-theme="thien_nhien"][data-dark="true"] .opt:hover,
body[data-theme="thien_nhien"][data-dark="true"] .opt.selected { background:#0d3321; }

/* --- game tối (sảnh game đêm — giữ gradient tím-hồng, tối hơn) --- */
body[data-theme="game"][data-dark="true"] {
  --bg:#170f2e; --card:#221542; --text:#ede9fe; --border:#4c1d95; --muted:#c4b5fd;
  --t:#ede9fe; --b:#4c1d95; --m:#c4b5fd;
  background:
    radial-gradient(900px 480px at 12% 8%, rgba(124,58,237,.55), transparent 60%),
    radial-gradient(800px 460px at 92% 95%, rgba(219,39,119,.45), transparent 60%),
    linear-gradient(140deg,#140b2e,#3b0764);
  background-attachment:fixed;
}
body[data-theme="game"][data-dark="true"] header,
body[data-theme="game"][data-dark="true"] .sidebar,
body[data-theme="game"][data-dark="true"] .drawer {
  --text:#ede9fe; --t:#ede9fe; --muted:#c4b5fd; --m:#c4b5fd; --border:#4c1d95; --b:#4c1d95;
  background:#221542; color:#ede9fe;
}
body[data-theme="game"][data-dark="true"] .card,
body[data-theme="game"][data-dark="true"] .stat-card,
body[data-theme="game"][data-dark="true"] .subject-card {
  --text:#ede9fe; --t:#ede9fe; --muted:#c4b5fd; --m:#c4b5fd;
  background:linear-gradient(#221542,#221542) padding-box,
             linear-gradient(135deg,#a78bfa,#f472b6) border-box;
  border:2px solid transparent;
  color:#ede9fe;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
body[data-theme="game"][data-dark="true"] .skill-node:hover,
body[data-theme="game"][data-dark="true"] .skill-node.active,
body[data-theme="game"][data-dark="true"] .chapter-row:hover { background:#2a1a52; }
body[data-theme="game"][data-dark="true"] .opt:hover,
body[data-theme="game"][data-dark="true"] .opt.selected { background:#2a1a52; }
body[data-theme="game"][data-dark="true"] .tabs { background:#2a1a52; }

/* --- coder tối — giữ NGUYÊN (vốn đã tối) --- */
body[data-theme="coder"][data-dark="true"] {
  --bg:#0b1220; --card:#101a2e; --text:#cbd5e1; --border:#1f2b3f; --muted:#7d8ea8;
  --t:#e2e8f0; --b:#1f2b3f; --m:#94a3b8;
  background-color:#0b1220;
  background-image:
    repeating-linear-gradient(0deg, rgba(34,211,238,.06) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(34,211,238,.06) 0 1px, transparent 1px 26px);
  background-attachment:fixed;
}

/* --- hellokitty tối (bữa tiệc đêm hồng tím) --- */
body[data-theme="hellokitty"][data-dark="true"] {
  --bg:#2a0a1f; --card:#3b1128; --text:#fce7f3; --border:#831843; --muted:#f0abfc;
  --t:#fce7f3; --b:#831843; --m:#f0abfc;
  background:linear-gradient(165deg,#2a0a1f 0%,#4a1030 55%,#3b0764 100%);
  background-attachment:fixed;
}
body[data-theme="hellokitty"][data-dark="true"] header {
  background:linear-gradient(135deg,#3b1128,#2a0a1f);
  border-bottom-color:#831843;
}
body[data-theme="hellokitty"][data-dark="true"] .card,
body[data-theme="hellokitty"][data-dark="true"] .stat-card,
body[data-theme="hellokitty"][data-dark="true"] .subject-card {
  background:#3b1128; border-color:#831843;
  box-shadow:0 8px 22px rgba(0,0,0,.40);
}
body[data-theme="hellokitty"][data-dark="true"] .skill-node:hover,
body[data-theme="hellokitty"][data-dark="true"] .skill-node.active,
body[data-theme="hellokitty"][data-dark="true"] .chapter-row:hover { background:#4a1030; }
body[data-theme="hellokitty"][data-dark="true"] .opt:hover,
body[data-theme="hellokitty"][data-dark="true"] .opt.selected { background:#4a1030; border-color:#f472b6; }
body[data-theme="hellokitty"][data-dark="true"] .tabs { background:#4a1030; }

/* ============================================================
   THANH CHỌN THEME — pill bóng, chấm tròn ring/tooltip, nút dark icon
   ============================================================ */
.theme-picker {
  position:fixed; bottom:18px; right:18px; z-index:9999;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border,#e2e8f0);
  padding:8px 12px; border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.60);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:system-ui,-apple-system,sans-serif;
}
body[data-dark="true"] .theme-picker {
  background:rgba(15,23,42,.90); border-color:#334155;
  box-shadow:0 6px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.theme-picker .tp-label { font-size:14px; line-height:1; margin-right:2px; }
.theme-picker .tp-dot {
  position:relative; width:22px; height:22px; border-radius:50%; border:2px solid #fff; padding:0;
  cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:transform .15s, box-shadow .15s;
}
.theme-picker .tp-dot:hover {
  transform:scale(1.30);
  box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.40);
}
.theme-picker .tp-dot.active {
  box-shadow:0 0 0 2px var(--text,#1e293b), 0 0 10px rgba(0,0,0,.25);
}
/* Tooltip tên giao diện */
.theme-picker .tp-dot::after {
  content:attr(title);
  position:absolute; bottom:calc(100% + 9px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#0f172a; color:#e2e8f0; font-size:11px; font-weight:600; white-space:nowrap;
  padding:4px 9px; border-radius:7px;
  opacity:0; pointer-events:none; z-index:10;
  transition:opacity .15s, transform .15s;
  box-shadow:0 4px 12px rgba(0,0,0,.30);
}
.theme-picker .tp-dot::before {
  content:''; position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#0f172a;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.theme-picker .tp-dot:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }
.theme-picker .tp-dot:hover::before { opacity:1; }
.tp-classic { background:#2563eb; }
.tp-thiennhien { background:#16a34a; }
.tp-game { background:linear-gradient(135deg,#7c3aed,#db2777); }
.tp-coder { background:#22d3ee; }
.tp-hellokitty { background:#ec4899; }
.theme-picker .tp-sep { width:1px; height:20px; background:var(--border,#e2e8f0); }
.theme-picker .tp-dark {
  width:30px; height:30px; border-radius:50%; padding:0;
  border:1.5px solid var(--border,#e2e8f0); background:var(--card,#fff);
  cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s, box-shadow .15s;
}
.theme-picker .tp-dark:hover {
  transform:scale(1.12);
  background:var(--bg,#f1f5f9);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
body[data-dark="true"] .theme-picker .tp-dark { background:#334155; border-color:#475569; }
body[data-dark="true"] .theme-picker .tp-dark:hover { background:#475569; }
@media (max-width:768px) { .theme-picker { bottom:12px; right:12px; padding:7px 10px; gap:7px; } }

/* ============================================================
   VÁ TƯƠNG PHẢN 2026-07-31 — class nền cho khối từng render inline
   (đã chuyển inline style → class trong bai-hoc.html)
   ============================================================ */
.stat-pill{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:12px;background:#f0fdf4;}
.stat-pill-streak{background:#eef2ff;}
.exp-bar-track{width:100px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;}
.formula-box{background:#f8f7ff;border-left:3px solid var(--p);padding:12px 16px;border-radius:8px;margin:10px 0;font-size:16px;line-height:1.7;}
.solution-box{background:#f0fdf4;padding:16px;border-radius:8px;}
.tip-box{font-size:14px;line-height:1.6;color:#92400e;background:#fffbeb;padding:10px 14px;border-radius:8px;margin:10px 0;}
.badge-popup{position:fixed;top:20px;right:20px;background:linear-gradient(135deg,#f59e0b,#d97706);color:white;padding:16px 20px;border-radius:12px;z-index:999;animation:slideIn .5s ease;}

/* ===== VÁ TƯƠNG PHẢN (2026-07-31) ===== */
/* 1. Header pills (💎/🔥) — bai-hoc */
body[data-theme="coder"] .stat-pill, body[data-dark="true"] .stat-pill { background:var(--card); color:var(--text); border:1px solid var(--border); }
/* 2. Đáp án đúng/sai */
body[data-theme="coder"] .opt.correct { background:#052e16; color:#86efac; }
body[data-theme="coder"] .opt.wrong { background:#451a03; color:#fcd34d; }
/* 3. Drawer gợi ý */
body[data-theme="coder"] .hint-level { background:#152238; color:var(--text); }
/* 4. Khối công thức & lời giải (JS render inline) */
body[data-theme="coder"] .formula-box, body[data-dark="true"] .formula-box { background:var(--card); color:var(--text); border-left-color:var(--primary); }
body[data-theme="coder"] .solution-box, body[data-dark="true"] .solution-box { background:var(--card); color:var(--text); }
/* 5. Nút Tiếp tục / Gợi ý */
body[data-theme="coder"] .btn-s { background:#059669; }
body[data-theme="coder"] .btn-w { background:#b45309; }
body[data-theme="hellokitty"] .btn-w { color:#451a03; }
/* 6. Banner + avatar dashboard */
body[data-theme="coder"] .hero { background:linear-gradient(135deg,#0e7490,#164e63); }
body[data-theme="coder"] .user-avatar { background:#0e7490; }
/* 7. Banner index */
body[data-theme="coder"] .banner { background:linear-gradient(135deg,#0891b2 0%,#7c3aed 52%,#db2777 100%); }
/* 8. Cây kỹ năng — bài đã qua */
body[data-theme="thien_nhien"][data-dark="true"] .skill-node.mastered { color:#6ee7b7; }
body[data-theme="game"][data-dark="true"] .skill-node.mastered { color:#4ade80; }
body[data-theme="hellokitty"] .skill-node.mastered { color:#047857; }
body[data-theme="hellokitty"][data-dark="true"] .skill-node.mastered { color:#6ee7b7; }
/* 9. Chương — thiên nhiên dark */
body[data-theme="thien_nhien"][data-dark="true"] .chapter-row { color:#6ee7b7; }
/* 10. Đếm chương hellokitty */
body[data-theme="hellokitty"] .chapter-count { color:#db2777; }
/* 11. Khối sáng loá ở coder */
body[data-theme="coder"] .save-point { background:#152238; }
body[data-theme="coder"] .feedback.success { background:#052e16; color:#86efac; }
body[data-theme="coder"] .feedback.nudge { background:#1e293b; color:#fbbf24; }
body[data-theme="coder"] .feedback.quest { background:#1e293b; color:#93c5fd; }
body[data-theme="coder"] .error-boundary { background:#1e293b; border-color:#334155; }
body[data-theme="coder"] .plot-figure { background:#101a2e; border-color:#24344f; }
body[data-theme="coder"] .tip-box, body[data-dark="true"] .tip-box { background:#451a03; color:#fcd34d; }
/* 12. expBar inline */
body[data-theme="coder"] .exp-bar-track, body[data-dark="true"] .exp-bar-track { background:var(--border); }
/* 13. Badge popup */
body[data-theme="coder"] .badge-popup { background:linear-gradient(135deg,#b45309,#92400e); color:#fff; }

/* ===== KHOẢNG CÁCH DÒNG THOÁNG (2026-07-31) ===== */
#lessonContent, #lessonContent p, #lessonContent li, #lessonContent div:not(.plot-figure),
.formula-box, .solution-box, .tip-box { line-height: 2.2 !important; }