/* =====================================================================
   HỆ MÀU & CHỮ DÙNG CHUNG (trang chủ + trang học)
   - 6 chủ đề màu:  html[data-theme="navy|ocean|forest|sunset|berry|rose"]
   - Chế độ:        html[data-mode="light|dark"]   (theme.js chọn theo lựa chọn / theo máy)
   - Thang chữ:     --fs-* và --h1/--h2/--h3 dùng ở mọi trang
   ===================================================================== */
:root{
  /* Thang chữ – Be Vietnam Pro, cân đối cho cả điện thoại và máy tính */
  --font:"Be Vietnam Pro",var(--font-vn,system-ui),system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-md:17px; --fs-lg:19px;
  --h-hero:clamp(30px,4.2vw,50px);
  --h1:clamp(26px,3vw,38px);
  --h2:clamp(23px,2.5vw,32px);
  --h3:clamp(17px,1.4vw,19px);
  --lh:1.65; --lh-tight:1.2;

  /* Màu nhấn cầu vồng – làm trang thêm sinh động (giữ nguyên ở mọi chủ đề) */
  --c1:#3b82f6; --c2:#10b981; --c3:#f59e0b; --c4:#ec4899; --c5:#8b5cf6; --c6:#06b6d4;

  /* Chủ đề mặc định: Navy & Vàng */
  --navy:#0f1d63; --navy-2:#1e2f8a; --blue:#2f5bea;
  --gold:#f5a524; --gold-2:#ffc857; --gold-3:#ff7a1a; --on-gold:#0f172a;
  --tint:#eef2fb;
}
html[data-theme="ocean"]{ --navy:#083b5c; --navy-2:#0e6a8a; --blue:#0891b2; --gold:#f59e0b; --gold-2:#fcd34d; --gold-3:#fb7185; --tint:#e6f6fb; }
html[data-theme="forest"]{ --navy:#123d2a; --navy-2:#1f6b45; --blue:#16a34a; --gold:#eab308; --gold-2:#fde047; --gold-3:#f97316; --tint:#e8f7ee; }
html[data-theme="sunset"]{ --navy:#5b1a0a; --navy-2:#9a3412; --blue:#ea580c; --gold:#fbbf24; --gold-2:#fde68a; --gold-3:#ec4899; --tint:#fff1e8; }
html[data-theme="berry"]{ --navy:#2e1065; --navy-2:#5b21b6; --blue:#7c3aed; --gold:#f472b6; --gold-2:#f9a8d4; --gold-3:#fb923c; --on-gold:#2e1065; --tint:#f3eefe; }
html[data-theme="rose"]{ --navy:#6b0f2a; --navy-2:#a3123c; --blue:#e11d48; --gold:#fb923c; --gold-2:#fdba74; --gold-3:#f43f5e; --tint:#fdecef; }

/* ---------- Chế độ sáng (mặc định) ---------- */
:root{
  --bg:#f6f8fc; --bg-2:var(--tint); --sf:#fff; --tx:#0f172a; --mu:#526077; --bd:#e3e8f2;
  --pr:var(--navy); --on-pr:#fff; --ok:#15803d; --er:#dc2626; --warn:#b45309;
  --sh-1:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.05);
  --sh-2:0 2px 4px rgba(15,23,42,.05),0 14px 32px rgba(15,29,99,.10);
  --soft-ok:#e6f6ec; --soft-er:#fde8e8; --soft-warn:#fff4dc; --soft-info:#e8eeff;
  color-scheme:light;
}
/* ---------- Chế độ tối ---------- */
html[data-mode="dark"]{
  --bg:#0a0f1f; --bg-2:#101831; --sf:#141c37; --tx:#e9edf9; --mu:#a6b0cc; --bd:#26315a;
  --pr:color-mix(in srgb,var(--blue) 55%,#fff); --on-pr:#0a0f1f; --ok:#4ade80; --er:#f87171; --warn:#fbbf24;
  --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 14px 32px rgba(0,0,0,.45);
  --soft-ok:rgba(74,222,128,.14); --soft-er:rgba(248,113,113,.14); --soft-warn:rgba(251,191,36,.14); --soft-info:rgba(129,140,248,.16);
  color-scheme:dark;
}
html[data-mode="dark"] body{background:var(--bg);color:var(--tx)}
html[data-mode="dark"] img:not([src$=".svg"]){filter:brightness(.94)}

/* ---------- Thang chữ áp dụng chung ---------- */
body{font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh)}
h1{font-size:var(--h1);line-height:var(--lh-tight);letter-spacing:-.02em;font-weight:800}
h2{font-size:var(--h2);line-height:var(--lh-tight);letter-spacing:-.015em;font-weight:800}
h3{font-size:var(--h3);line-height:1.35;font-weight:700}
small,.muted small{font-size:var(--fs-xs)}

/* ---------- Nút chọn giao diện (theme.js tạo) ---------- */
.atd-theme-btn{position:fixed;left:16px;bottom:16px;z-index:60;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:conic-gradient(var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c1));box-shadow:0 8px 22px rgba(0,0,0,.25);display:grid;place-items:center}
.atd-theme-btn span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--sf);font-size:18px}
.atd-theme-panel{position:fixed;left:16px;bottom:74px;z-index:61;width:min(320px,calc(100vw - 32px));background:var(--sf);color:var(--tx);
  border:1px solid var(--bd);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.28);padding:16px;font-family:var(--font)}
.atd-theme-panel[hidden]{display:none}
.atd-theme-panel h4{margin:0 0 10px;font-size:15px}
.atd-theme-panel .atd-sub{margin:14px 0 8px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mu)}
.atd-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--bg-2);border-radius:999px}
.atd-modes button{border:0;border-radius:999px;padding:8px 6px;background:transparent;color:var(--mu);font:600 13px var(--font);cursor:pointer}
.atd-modes button.on{background:var(--sf);color:var(--tx);box-shadow:var(--sh-1)}
.atd-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.atd-swatches button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;border:2px solid var(--bd);background:var(--sf);
  color:var(--tx);font:600 12px var(--font);cursor:pointer}
.atd-swatches button.on{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.atd-dot{display:block;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
.atd-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--bg-2);border-radius:999px}
.atd-sizes button{border:0;border-radius:999px;padding:7px 4px;background:transparent;color:var(--mu);font:700 13px var(--font);cursor:pointer}
.atd-sizes button.on{background:var(--sf);color:var(--tx);box-shadow:var(--sh-1)}
html[data-size="lg"]{font-size:17px}
html[data-size="lg"] body{--fs-base:17px;--fs-sm:15px;--fs-xs:13px}
html[data-size="sm"] body{--fs-base:15px;--fs-sm:13px;--fs-xs:12px}
@media(max-width:760px){.atd-theme-btn{bottom:84px;left:10px;width:42px;height:42px}.atd-theme-btn span{width:33px;height:33px;font-size:16px}.atd-theme-panel{left:10px;bottom:134px}}
@media print{.atd-theme-btn,.atd-theme-panel{display:none}}