/* ==========================================================================
   THEME — hệ token cho web ôn thi.
   Triết lý: phân cấp bằng KHOẢNG TRẮNG + CỠ CHỮ + MÀU NỀN LOÃNG,
   không dùng thẻ bo tròn / viền bao quanh chữ.
   Tự chứa: không phụ thuộc thư viện token bên ngoài.
   ========================================================================== */

:root {
  /* --- Chữ ------------------------------------------------------------- */
  /* Be Vietnam Pro: người Việt thiết kế, dấu cân đối nhất. Chỉ có 400/500/600/700
     — đừng dùng độ đậm khác, trình duyệt sẽ tự làm giả nét và chữ bị méo.     */
  --font-body:    'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body-alt:'Lexend', system-ui, sans-serif;   /* phương án thay thế */
  --font-display: 'Plus Jakarta Sans', var(--font-body);
  --font-num:     'JetBrains Mono', ui-monospace, monospace;

  /* Thang cỡ chữ co giãn theo bề rộng màn hình — không cần media query */
  --t-hero:  clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);   /* điểm số, số lớn   */
  --t-h1:    clamp(1.55rem, 1.3rem + 1.2vw, 2.1rem);   /* tên màn hình      */
  --t-h2:    clamp(1.2rem,  1.1rem + 0.5vw, 1.45rem);  /* tên môn học       */
  --t-q:     clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem); /* NỘI DUNG CÂU HỎI  */
  --t-body:  1.0625rem;                                 /* đáp án, giải thích*/
  --t-meta:  0.875rem;                                  /* "50 câu · 20 phút"*/
  --t-micro: 0.75rem;                                   /* nhãn phụ          */

  --lh-tight: 1.25;
  --lh-read:  1.65;   /* dòng thoáng — đọc lâu không mỏi mắt */
  --track-label: 0.06em;  /* giãn chữ cho nhãn viết hoa */

  /* --- Màu: nền giấy ấm, độ tương phản dịu để đọc lâu ----------------- */
  --bg:        #F5F3ED;
  --bg-sunk:   #FCFBF7;
  --bg-glass:  rgba(252, 251, 247, 0.94);
  --ink:       #10171C;
  --ink-soft:  #202A30;
  --ink-faint: #323D43;
  --ink-muted: var(--ink-soft);
  --rule:      #D8D5CC;

  /* Nhấn: tone thương hiệu hòa quyện tự nhiên */
  --accent:      #315F73;
  --accent-deep: #234858;
  --accent-wash: rgba(49, 95, 115, 0.11);
  --on-accent:   #FFFFFF;

  --spark:      #D97706;
  --spark-wash: rgba(217, 119, 6, 0.12);
  --on-ok: #fff;  --on-bad: #fff;
  --ok:        #059669;
  --ok-wash:   rgba(5, 150, 105, 0.12);
  --bad:       #E11D48;
  --bad-wash:  rgba(225, 29, 72, 0.12);

  --focus: var(--accent);

  /* --- Nhịp & chuyển động --------------------------------------------- */
  --measure: 62ch;
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --flow:    1.1em;

  --dur-fast: 140ms;
  --dur:      240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Design System Centralized Tokens (Light) ------------------------ */
  --color-primary:       var(--accent);
  --color-primary-hover: var(--accent-deep);
  --color-primary-wash:  var(--accent-wash);
  --color-background:    var(--bg);
  --color-surface:       var(--bg-sunk);
  --color-surface-hover: color-mix(in srgb, var(--bg-sunk) 92%, var(--ink));
  --color-card:          var(--bg-sunk);
  --color-text:          var(--ink);
  --color-muted:         var(--ink-soft);
  --color-faint:         var(--ink-faint);
  --color-border:        var(--rule);
  --color-success:       var(--ok);
  --color-warning:       var(--spark);
  --color-error:         var(--bad);

  /* Radius Tokens: mềm, hiện đại nhưng không phồng quá mức */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-card: 22px;
  --radius-pill: 999px;

  /* Standard Motion Tokens */
  --motion-fast:   160ms cubic-bezier(0.2, 0, 0, 1);
  --motion-normal: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-drawer: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-modal:  260ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-page:   250ms ease-out;

  /* Standard Shadow Tokens */
  --shadow-sm:   var(--shadow-soft-1);
  --shadow-md:   var(--shadow-soft-2);
  --shadow-lg:   var(--shadow-soft-3);
  --shadow-lift: 0 10px 28px -4px rgba(18, 30, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);

  /* --- Bo góc mềm, dùng nhịp tăng dần theo kích thước khối -------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-card: 22px;
  --r-pill: 999px;

  /* --- Soft 3D & Multi-layer Shadows (Light) ------------------------- */
  --shadow-soft-1: 0 2px 8px -2px rgba(18, 30, 42, 0.05), 0 1px 3px rgba(18, 30, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-soft-2: 0 8px 24px -4px rgba(18, 30, 42, 0.07), 0 3px 8px -2px rgba(18, 30, 42, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-soft-3: 0 16px 36px -6px rgba(18, 30, 42, 0.11), 0 6px 16px -4px rgba(18, 30, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --glass-border: rgba(255, 255, 255, 0.68);
  --glass-bg: color-mix(in srgb, var(--bg-sunk) 78%, transparent);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #101416;
    --bg-sunk:   #171D20;
    --bg-glass:  rgba(23, 29, 32, 0.88);
    --ink:       #F2F5F5;
    --ink-soft:  #9DA8AC;
    --ink-faint: #87939A;
    --rule:      #2C3539;
    --accent:      #5DB8D4;
    --accent-deep: #7EC9E0;
    --accent-wash: rgba(93, 184, 212, 0.15);
    --on-accent:   #101A1E;
    --spark:      #E9C46A;
    --spark-wash: rgba(233, 196, 106, 0.15);
    --ok:        #52B788;  --ok-wash:  rgba(82, 183, 136, 0.15);
    --on-ok: #101A1E;  --on-bad: #101A1E;
    --bad:       #E76F51;  --bad-wash: rgba(231, 111, 81, 0.15);
    --shadow-soft-1: 0 2px 8px -2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --shadow-soft-2: 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 3px 8px -2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-soft-3: 0 16px 40px -8px rgba(0, 0, 0, 0.55), 0 6px 16px -4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-bg: color-mix(in srgb, var(--bg-sunk) 78%, transparent);
    --shadow-lift: 0 10px 28px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-theme="dark"] {
  --bg:        #101416;
  --bg-sunk:   #171D20;
  --bg-glass:  rgba(23, 29, 32, 0.88);
  --ink:       #F2F5F5;
  --ink-soft:  #9DA8AC;
  --ink-faint: #87939A;
  --rule:      #2C3539;
  --accent:      #5DB8D4;
  --accent-deep: #7EC9E0;
  --accent-wash: rgba(93, 184, 212, 0.15);
  --on-accent:   #101A1E;
  --spark:      #E9C46A;
  --spark-wash: rgba(233, 196, 106, 0.15);
  --ok:        #52B788;  --ok-wash:  rgba(82, 183, 136, 0.15);
    --on-ok: #101A1E;  --on-bad: #101A1E;
  --bad:       #E76F51;  --bad-wash: rgba(231, 111, 81, 0.15);
  --shadow-soft-1: 0 2px 8px -2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-soft-2: 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 3px 8px -2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --shadow-soft-3: 0 16px 40px -8px rgba(0, 0, 0, 0.55), 0 6px 16px -4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-bg: color-mix(in srgb, var(--bg-sunk) 78%, transparent);
  --shadow-lift: 0 10px 28px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* --- Bảng màu nhấn (Palettes) -------------------------------------------- */
:root[data-palette="ocean"] {
  --accent: #0369A1; --accent-deep: #075985; --accent-wash: #0284C716;
}
:root[data-palette="ocean"][data-theme="dark"] {
  --accent: #38BDF8; --accent-deep: #7DD3FC; --accent-wash: #38BDF81A;
}

:root[data-palette="emerald"] {
  --accent: #047857; --accent-deep: #065F46; --accent-wash: #05966916;
}
:root[data-palette="emerald"][data-theme="dark"] {
  --accent: #34D399; --accent-deep: #6EE7B7; --accent-wash: #34D3991A;
}

:root[data-palette="amber"] {
  --accent: #B45309; --accent-deep: #92400E; --accent-wash: #D9770616;
}
:root[data-palette="amber"][data-theme="dark"] {
  --accent: #FBBF24; --accent-deep: #FDE68A; --accent-wash: #FBBF241A;
}

:root[data-palette="rose"] {
  --accent: #BE123C; --accent-deep: #9F1239; --accent-wash: #E11D4816;
}
:root[data-palette="rose"][data-theme="dark"] {
  --accent: #FB7185; --accent-deep: #FDA4AF; --accent-wash: #FB71851A;
}

:root[data-palette="nord"] {
  --accent: #475569; --accent-deep: #334155; --accent-wash: #47556916;
}
:root[data-palette="nord"][data-theme="dark"] {
  --accent: #94A3B8; --accent-deep: #CBD5E1; --accent-wash: #94A3B81A;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="ocean"]:not([data-theme="light"]) {
    --accent: #38BDF8; --accent-deep: #7DD3FC; --accent-wash: #38BDF81A;
  }
  :root[data-palette="emerald"]:not([data-theme="light"]) {
    --accent: #34D399; --accent-deep: #6EE7B7; --accent-wash: #34D3991A;
  }
  :root[data-palette="amber"]:not([data-theme="light"]) {
    --accent: #FBBF24; --accent-deep: #FDE68A; --accent-wash: #FBBF241A;
  }
  :root[data-palette="rose"]:not([data-theme="light"]) {
    --accent: #FB7185; --accent-deep: #FDA4AF; --accent-wash: #FB71851A;
  }
  :root[data-palette="nord"]:not([data-theme="light"]) {
    --accent: #94A3B8; --accent-deep: #CBD5E1; --accent-wash: #94A3B81A;
  }
}

/* --- Tỷ lệ cỡ chữ (Font Sizing) ------------------------------------------ */
html[data-size="sm"] { font-size: 88%; }
html[data-size="md"] { font-size: 100%; }
html[data-size="lg"] { font-size: 114%; }

/* ==========================================================================
   NỀN
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Control mặc định dùng Arial của hệ điều hành; cho kế thừa font của trang */
button, input, select, textarea { font-family: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-read);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;   /* siết nhẹ — tiêu đề trông gọn và hiện đại */
  margin: 0;
  text-wrap: balance;         /* không để tiêu đề rớt 1 chữ xuống dòng */
}
h1 { font-size: var(--t-h1); font-weight: 700; }
h2 { font-size: var(--t-h2); font-weight: 600; }

p { margin: 0; text-wrap: pretty; }

/* Nhịp dọc tự động: mọi phần tử kề nhau tự có khoảng cách. */
.flow > * + * { margin-block-start: var(--flow); }

/* Khung đọc — giới hạn bề rộng dòng chữ, đây là "bố cục" chính của cả web */
.wrap { width: min(100% - var(--gutter) * 2, 72rem); margin-inline: auto; }
.read { max-width: var(--measure); }

/* ==========================================================================
   CHIA VÙNG KHÔNG DÙNG KHUNG
   Ba công cụ duy nhất: đường kẻ tóc, nền loãng, khoảng trắng.
   ========================================================================== */

/* 1. Đường kẻ tóc giữa các mục trong danh sách — thay cho thẻ card */
.rule-list > * + * { border-block-start: 1px solid var(--rule); }
.rule-top    { border-block-start: 1px solid var(--rule); }
.rule-bottom { border-block-end:   1px solid var(--rule); }

/* 2. Nền loãng: đánh dấu trạng thái mà không vẽ đường bao */
.wash        { background: var(--accent-wash); }
.wash-ok     { background: var(--ok-wash); }
.wash-bad    { background: var(--bad-wash); }

/* 3. Vạch dọc bên trái: dẫn mắt cho khối giải thích, nhẹ hơn khung nhiều */
.edge {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: 1rem;
}
.edge-ok  { border-inline-start-color: var(--ok); }
.edge-bad { border-inline-start-color: var(--bad); }

/* ==========================================================================
   CHỮ
   ========================================================================== */
.q-text  { font-size: var(--t-q); font-weight: 500; line-height: 1.45; text-wrap: pretty; }
.meta    { font-size: var(--t-meta); color: var(--ink-soft); }
.faint   { color: var(--ink-faint); }

/* Nhãn nhỏ viết hoa — thay cho "chip"/"badge" bo tròn */
.label {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Số liệu: chữ số đều bề ngang → đồng hồ đếm ngược không giật */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
}
.stat { font-size: var(--t-hero); font-weight: 700; line-height: 1; }

/* Nhấn mạnh bằng gạch chân dày, không bằng ô nền */
.mark {
  text-decoration: underline;
  text-decoration-color: var(--spark);
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: none;
}

/* ==========================================================================
   TƯƠNG TÁC
   ========================================================================== */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Nút (.btn, .btn-quiet, .icon-btn…) nằm trọn trong app.css — một chỗ duy nhất. */

/* Đáp án: một dòng chữ có vùng nhấn rộng, nền chỉ hiện khi tương tác */
.choice {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.85rem;
  align-items: start;
  width: 100%;
  padding: 0.95rem 1rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.choice:hover              { background: var(--bg-sunk); }
.choice[aria-checked="true"]{ background: var(--accent-wash); }
.choice .key { font-family: var(--font-num); font-weight: 600; color: var(--ink-faint); }
.choice[aria-checked="true"] .key { color: var(--accent); }
.choice[data-state="ok"]   { background: var(--ok-wash); }
.choice[data-state="ok"]  .key { color: var(--ok); }
.choice[data-state="bad"]  { background: var(--bad-wash); }
.choice[data-state="bad"] .key { color: var(--bad); }

/* Icon Lucide đặt trong dòng chữ */
.ico {
  width: 1.15em; height: 1.15em;
  stroke: currentColor; stroke-width: 2;
  fill: none; vertical-align: -0.18em;
  flex: none;
}

/* ==========================================================================
   CHUYỂN ĐỘNG — chỉ đủ để dẫn mắt, không để khoe
   ========================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise var(--dur) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}