/* =========================================================
   EnQuiz — Ôn thi Khởi sự doanh nghiệp
   Bộ nhận diện "Cosmic": nền vũ trụ, thẻ kính mờ, nút nổi 3D.
   ---------------------------------------------------------
   Nền tối là bản gốc của thiết kế; nền sáng là biến thể cùng
   bố cục, dựng thêm để đọc được ngoài nắng và khi in ra.
   ========================================================= */

:root {
  /* ---- Biến thể ban ngày, suy ra từ cùng bảng màu Design Guide ---- */
  --void: #F2F5FC;
  --bg: #F2F5FC;
  --bg-soft: #E4E9F6;
  --paper: #F2F5FC;

  --surface: #ffffff;
  --surface-2: #F7F9FE;
  --glass: rgba(255, 255, 255, .78);
  --glass-2: rgba(255, 255, 255, .6);
  --glass-stroke: #D2DAEC;
  --border: #D2DAEC;

  --text: #0F1733;
  --text-soft: #3A4568;
  --muted: #5C6889;

  --primary: #0E7FA4;       /* lam hologram, hạ độ sáng cho đọc được trên nền trắng */
  --primary-dark: #0A6483;
  --primary-soft: #E1F3F9;
  --on-primary: #ffffff;

  --secondary: #B85585;     /* hồng áo dài, hạ độ sáng tương tự */
  --secondary-soft: #FBEAF2;
  --on-secondary: #ffffff;

  --tertiary: #0E8F63;
  --tertiary-soft: #DFF5EC;
  --on-tertiary: #ffffff;

  --berry: #B85585;
  --gold: #A87B10;

  --success: #0E8F63;
  --success-soft: #DFF5EC;
  --on-success: #ffffff;
  --danger: #C43A52;
  --danger-soft: #FCE7EB;
  --on-danger: #ffffff;
  --warn: #A87B10;
  --warn-soft: #FBF1D9;
  --on-warn: #ffffff;

  --glow: rgba(14, 127, 164, .22);
  --glow-2: rgba(184, 85, 133, .18);

  --nebula-1: rgba(98, 214, 245, .16);
  --nebula-2: rgba(240, 157, 198, .14);
  --star: rgba(40, 60, 110, .26);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 24px;
  --shadow: 0 12px 40px rgba(20, 30, 70, .12);
  --shadow-sm: 0 1px 2px rgba(20, 30, 70, .06), 0 4px 14px rgba(20, 30, 70, .07);
  --blur: 16px;

  /* Chuyển sắc "hologram" của áo dài — dùng cho nút chính và tiêu đề lớn */
  --holo: linear-gradient(120deg, #EDF2FA 0%, #C9D4E8 38%, #F09DC6 68%, #62D6F5 100%);
  /* Bản dùng cho chữ: nền sáng cần tông đậm, chuyển sắc hologram gốc quá nhạt */
  --holo-text: linear-gradient(120deg, #0E7FA4 0%, #7A4E9E 45%, #B85585 100%);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  /* Chữ đơn cách lấy sẵn của máy — dùng cho con số và nhãn ngắn kiểu bảng
     điều khiển. Không tải thêm phông nào để ứng dụng vẫn chạy khi mất mạng. */
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "JetBrains Mono",
          "Roboto Mono", Menlo, Consolas, monospace;
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --display: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, sans-serif;
}

html[data-theme="dark"] {
  /* ---- Bảng màu Design Guide: nền vũ trụ, áo dài bạc/hồng, hologram lam ---- */
  --void: #060A1C;
  --bg: #060A1C;
  --bg-soft: #0D1430;
  --paper: #060A1C;

  --surface: #0D1430;
  --surface-2: #131C40;
  --glass: rgba(13, 20, 48, .72);
  --glass-2: rgba(19, 28, 64, .55);
  --glass-stroke: #243059;
  --border: #243059;

  --text: #E9EEF7;          /* bạc */
  --text-soft: #C3CDE2;
  --muted: #9BA8C4;

  --primary: #62D6F5;       /* hologram lam: liên kết, tiêu điểm, tiến độ */
  --primary-dark: #3FB6D6;
  --primary-soft: #102540;
  --on-primary: #0A1130;

  --secondary: #F09DC6;     /* hồng áo dài: nhấn ấm */
  --secondary-soft: #2A1526;
  --on-secondary: #2A0C1B;

  --tertiary: #5EE0A0;
  --tertiary-soft: #0C2B22;
  --on-tertiary: #06251A;

  --berry: #F09DC6;
  --gold: #FFD25A;

  --success: #5EE0A0;
  --success-soft: #0C2B22;
  --on-success: #06251A;
  --danger: #F4788C;
  --danger-soft: #2E121A;
  --on-danger: #2B0710;
  --warn: #FFD25A;
  --warn-soft: #2E2409;
  --on-warn: #241A00;

  --glow: rgba(98, 214, 245, .28);
  --glow-2: rgba(240, 157, 198, .24);

  --nebula-1: rgba(98, 214, 245, .10);
  --nebula-2: rgba(240, 157, 198, .08);
  --star: rgba(233, 238, 247, .55);

  --shadow: 0 12px 40px rgba(3, 6, 20, .55);
  --shadow-sm: 0 1px 2px rgba(3, 6, 20, .5), 0 6px 18px rgba(3, 6, 20, .38);

  /* Nền tối dùng thẳng chuyển sắc gốc cho chữ */
  --holo-text: var(--holo);
}

/* ---------------------------------------------------------------
   Chủ đề "Đất sét noir"
   ---------------------------------------------------------------
   Nền đá đen ấm, thẻ nổi khối như nặn bằng đất sét, nhấn màu đồng và
   vàng cổ. Toàn bộ độ nổi làm bằng bóng đổ CSS — không thêm một tệp
   ảnh nào, nên vẫn giữ nguyên cam kết chạy được khi mất mạng.

   Chữ cố ý sáng hơn mẫu tham khảo: sinh viên đọc đề bốn mươi phút
   liên tục trên điện thoại, chữ xám trên nền xám thì mỏi mắt.
   --------------------------------------------------------------- */
html[data-theme="clay"] {
  --void: #0C0E10;
  --bg: #121416;
  --bg-soft: #1A1C1E;
  --paper: #121416;

  --surface: #1E2022;
  --surface-2: #282A2C;
  --glass: rgba(30, 32, 34, .84);
  --glass-2: rgba(40, 42, 44, .64);
  --glass-stroke: #333537;
  --border: #333537;

  --text: #E2E2E5;
  --text-soft: #D0C5AF;        /* kem ấm, dùng cho dòng phụ */
  --muted: #A6A8AC;

  --primary: #F2CA50;          /* vàng: liên kết, tiêu điểm, tiến độ */
  --primary-dark: #D4AF37;
  --primary-soft: #34301F;
  --on-primary: #3C2F00;

  --secondary: #D4AF37;        /* vàng cổ, đậm hơn primary một bậc */
  --secondary-soft: #2E2A18;
  --on-secondary: #241C00;

  --tertiary: #9ABF86;
  --tertiary-soft: #1F2A1E;
  --on-tertiary: #16200F;

  --berry: #D4AF37;
  --gold: #F2CA50;

  --success: #9ABF86;
  --success-soft: #1F2A1E;
  --on-success: #16200F;
  --danger: #E08A78;
  --danger-soft: #2E211E;
  --on-danger: #2A100A;
  --warn: #F2CA50;
  --warn-soft: #34301F;
  --on-warn: #3C2F00;

  --glow: rgba(242, 202, 80, .22);
  --glow-2: rgba(212, 175, 55, .18);

  /* Nền đá tĩnh, không có tinh vân trôi như bản vũ trụ */
  --nebula-1: rgba(242, 202, 80, .045);
  --nebula-2: rgba(212, 175, 55, .035);
  --star: rgba(226, 226, 229, .16);

  --shadow: 0 16px 34px rgba(0, 0, 0, .62);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .4);

  /* Bo tròn rộng hơn hai chủ đề kia: khối đất sét không có góc sắc */
  --radius: 22px;
  --radius-sm: 16px;
  --radius-lg: 30px;

  --holo: linear-gradient(120deg, #E2E2E5 0%, #F2CA50 42%, #D4AF37 100%);
  --holo-text: var(--holo);
}

/* Khối nổi: bóng đổ phía dưới, vệt sáng mảnh trên mép, và bóng chìm bên
   trong ở đáy — ba lớp ấy hợp lại mới ra cảm giác đất sét nặn tay. */
html[data-theme="clay"] .panel,
html[data-theme="clay"] .glass,
html[data-theme="clay"] .mode-card,
html[data-theme="clay"] .question-card,
html[data-theme="clay"] .result-hero,
html[data-theme="clay"] .kpi,
html[data-theme="clay"] .badge,
html[data-theme="clay"] .chapter-row,
html[data-theme="clay"] .modal__box {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 6px 10px 24px rgba(0, 0, 0, .42),
              inset 2px 2px 5px rgba(255, 255, 255, .05),
              inset -4px -4px 10px rgba(0, 0, 0, .5);
  backdrop-filter: none;
}
/* Thẻ chọn chế độ và dòng chương nhấc nhẹ khi rê chuột, như nhấc một khối
   đất sét khỏi mặt bàn. Trên điện thoại không có :hover nên không ảnh hưởng. */
html[data-theme="clay"] .mode-card,
html[data-theme="clay"] .chapter-row { transition: transform .18s ease, box-shadow .18s ease; }
html[data-theme="clay"] .mode-card:hover,
html[data-theme="clay"] .chapter-row:hover {
  transform: translateY(-3px);
  box-shadow: 8px 14px 30px rgba(0, 0, 0, .5),
              inset 2px 2px 5px rgba(255, 255, 255, .06),
              inset -4px -4px 10px rgba(0, 0, 0, .5);
}
/* Thẻ câu hỏi là khối lớn nhất trên màn: bo sâu hơn và lõm rõ hơn */
html[data-theme="clay"] .question-card { border-radius: var(--radius-lg); }

html[data-theme="clay"] .btn,
html[data-theme="clay"] .chip,
html[data-theme="clay"] .icon-btn,
html[data-theme="clay"] .mood,
html[data-theme="clay"] .player__btn {
  box-shadow: 4px 4px 12px rgba(0, 0, 0, .45),
              inset 1px 1px 3px rgba(255, 255, 255, .06),
              inset -2px -2px 5px rgba(0, 0, 0, .4);
}
/* Bấm xuống thì lún vào trong, đúng như bấm lên một khối đất sét */
html[data-theme="clay"] .btn:active,
html[data-theme="clay"] .chip:active,
html[data-theme="clay"] .icon-btn:active,
html[data-theme="clay"] .player__btn:active {
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .6),
              inset -1px -1px 3px rgba(255, 255, 255, .04);
  transform: scale(.98);
}

/* Ô đáp án và ô nhập cũng chìm xuống, cho khác hẳn khối nổi bên trên */
html[data-theme="clay"] .option,
html[data-theme="clay"] input[type="text"],
html[data-theme="clay"] input[type="number"],
html[data-theme="clay"] textarea {
  background: #16181A;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, .6),
              inset -1px -1px 2px rgba(255, 255, 255, .04);
}

/* Bản đồ nền trên nền đá phải chìm hơn và ngả sang tông đồng, để không thành
   một mảng xanh lạc lõng giữa bảng màu ấm. */
html[data-theme="clay"] .hero__map {
  opacity: .30;
  mix-blend-mode: soft-light;
  filter: sepia(.7) saturate(.8);
}
/* Thanh dưới và nhãn nhỏ lấy màu vàng đồng thay cho xanh lá — xanh lá trong
   chủ đề này chỉ dành riêng cho câu trả lời đúng. */
html[data-theme="clay"] .botnav__item.is-active,
html[data-theme="clay"] .sidenav__item.is-active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
html[data-theme="clay"] .eyebrow { color: var(--secondary); }
html[data-theme="clay"] .eyebrow::before { background: var(--primary); }
/* Dòng nhỏ trên tên môn cũng theo tông vàng đồng; xanh lá ở chủ đề này chỉ
   dành cho câu trả lời đúng, để mắt học từ màu chứ không phải đọc lại. */
html[data-theme="clay"] .hero__title .hero__title-sm { color: var(--text-soft); }
/* Màn che hộp thoại của hai chủ đề kia ngả xanh navy; ở đây phải là đá đen,
   nếu không nền mờ phía sau lại thành một mảng xanh giữa bảng màu trung tính. */
html[data-theme="clay"] .modal { background: rgba(8, 10, 12, .72); }

/* Máng chìm: thanh tiến độ và khay lưới câu hỏi được khoét vào mặt đất sét,
   nên chỉ có bóng chìm, không có bóng đổ ra ngoài. */
html[data-theme="clay"] .progress {
  height: 9px;
  background: #131517;
  border-color: #101214;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .7),
              inset -1px -1px 2px rgba(255, 255, 255, .04);
}
html[data-theme="clay"] .progress__bar {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary));
  box-shadow: 0 0 10px rgba(242, 202, 80, .5);
}
html[data-theme="clay"] .bych-row__bar {
  background: #131517;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .7),
              inset -1px -1px 2px rgba(255, 255, 255, .04);
}
html[data-theme="clay"] .bych-row__fill {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary));
  box-shadow: 0 0 10px rgba(242, 202, 80, .45);
}
html[data-theme="clay"] .qgrid {
  background: #131517;
  border-radius: var(--radius);
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, .7),
              inset -1px -1px 2px rgba(255, 255, 255, .04);
}
html[data-theme="clay"] .qgrid button {
  background: var(--surface-2);
  border-color: transparent;
  box-shadow: 3px 3px 7px rgba(0, 0, 0, .45),
              inset 1px 1px 2px rgba(255, 255, 255, .05);
}
html[data-theme="clay"] .qgrid button:hover { box-shadow: 4px 5px 10px rgba(0, 0, 0, .5); }
html[data-theme="clay"] .qgrid button.answered { border-color: var(--tertiary); }
html[data-theme="clay"] .qgrid button.current {
  outline-color: var(--primary);
  box-shadow: 0 0 14px rgba(242, 202, 80, .45);
}

* { box-sizing: border-box; }

html {
  /* Nền vũ trụ đặt ở <html> để bản đồ chìm phía sau vẫn nhìn thấy được */
  background-color: var(--void);
  background-image:
    radial-gradient(circle at 18% 22%, var(--nebula-1) 0%, transparent 42%),
    radial-gradient(circle at 82% 72%, var(--nebula-2) 0%, transparent 45%),
    linear-gradient(180deg, var(--void) 0%, var(--bg) 55%, var(--void) 100%);
  background-attachment: fixed;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* Lớp sao: hai lưới chấm lệch nhau, không dùng ảnh nên nhẹ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 62%, var(--star) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 58% 14%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 46%, var(--star) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 91% 82%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 88%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 92%, var(--star) 50%, transparent 51%);
  background-size: 460px 380px;
  opacity: .7;
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: twinkle 7s ease-in-out infinite; }
}
@keyframes twinkle { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
  text-wrap: balance;
}
p { margin: 0 0 .6rem; }
b, strong { font-weight: 700; }
code {
  background: var(--bg-soft);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: .88em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.muted { color: var(--muted); font-size: .9rem; }
.hidden { display: none !important; }

/* Thẻ kính mờ — nền của hầu hết khối nội dung */
.glass, .panel, .mode-card, .question-card, .result-hero,
.kpi, .chapter-item, .history-item, .review-item, .preview-item, .lecture-item {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-stroke);
}

/* ---------------- Topbar ---------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-stroke);
  box-shadow: 0 0 22px var(--glow);
}
.topbar__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font-family: inherit;
}
.brand__logo {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: block;
  box-shadow: 0 0 14px var(--glow);
}
.brand__text { display: flex; flex-direction: column; }
.brand__text strong {
  font-size: 1.05rem;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--holo-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand__text small { color: var(--muted); font-size: .76rem; line-height: 1.2; }
.topbar__actions { display: flex; gap: .35rem; align-items: center; }

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-2);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.icon-btn:hover { background: var(--surface-2); box-shadow: 0 0 14px var(--glow); }
.icon-btn:active { transform: scale(.94); }
.lang-btn { font-size: .74rem; font-weight: 800; letter-spacing: .03em; }


/* ---------------- Biểu tượng nét vẽ ---------------- */
/* Kho ký hiệu nhúng trong trang, không chiếm chỗ trong bố cục */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite g { fill: none; stroke: currentColor; stroke-width: 1.7;
            stroke-linecap: round; stroke-linejoin: round; }
.sprite #i-star, .sprite #i-merge, .sprite #i-moon { }

.ico {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  color: inherit;
  vertical-align: -.22em;
  overflow: visible;
}
.ico use { fill: none; stroke: currentColor; stroke-width: 1.7;
           stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- Thanh điều hướng dọc (màn rộng) ---------------- */
.sidenav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 232px;
  z-index: 35;
  display: none;                 /* chỉ bật ở màn đủ rộng, xem media query */
  flex-direction: column;
  padding: 5.2rem .7rem 1.2rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--glass-stroke);
  box-shadow: 4px 0 30px rgba(0, 0, 0, .12);
}
.sidenav__list { display: flex; flex-direction: column; gap: .25rem; }
.sidenav__foot { margin-top: auto; }
.sidenav__item {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .62rem .8rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  font: 600 .9rem var(--font);
  text-align: left;
  cursor: pointer;
  transition: transform .18s, background .15s, color .15s, box-shadow .18s;
}
.sidenav__item:hover {
  background: var(--glass-2);
  color: var(--text);
  transform: translateX(4px);
  box-shadow: 0 0 16px var(--glow);
}
.sidenav__item.is-active {
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 14%, transparent);
  border-color: color-mix(in srgb, var(--secondary) 45%, transparent);
  box-shadow: 0 0 18px var(--glow);
}
.sidenav__ico { width: 20px; height: 20px; }

/* ---------------- Thanh điều hướng dưới (điện thoại) ---------------- */
.botnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  justify-content: space-around;
  gap: .2rem;
  padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom, 0px));
  /* đặc hơn thẻ kính thường: nội dung cuộn phía sau không lộ lên gây rối chữ */
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-stroke);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -6px 26px rgba(0, 0, 0, .28);
}
.botnav__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .35rem .2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: 600 .68rem var(--font);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.botnav__ico { width: 22px; height: 22px; margin-bottom: 1px; }
.botnav__item.is-active {
  color: var(--tertiary);
  background: color-mix(in srgb, var(--tertiary) 16%, transparent);
}

/* ---------------- Layout ---------------- */
.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.3rem 1rem 3rem;
  position: relative;
  z-index: 1;
}
.screen { animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel {
  border-radius: var(--radius);
  padding: 1.15rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.1rem;
}
.panel h2 { font-size: 1.05rem; }

/* Nhãn nhỏ in hoa đặt trên tiêu đề mục, kèm một vạch ngắn cùng màu —
   cho mỗi khối một điểm neo thị giác thay vì chỉ có chữ đậm. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .3rem;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tertiary);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ---------------- Lời gợi ý sau bài làm ---------------- */
.insight {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.1rem;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  box-shadow: var(--shadow-sm), 0 0 26px var(--glow);
}
.insight__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
}
.insight__body { min-width: 0; }
.insight__eyebrow {
  margin: 0 0 .25rem;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--primary);
}
.insight__text { margin: 0; font-size: .93rem; line-height: 1.6; }
.insight__cta { margin-top: .7rem; }

/* ---------------- Hai thẻ đứng cạnh nhau ---------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
.duo > .panel { margin-bottom: 1.1rem; }

/* ---------------- Đồng hồ hai múi giờ ---------------- */
.clock {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "place time" "date time";
  align-items: center;
  gap: 0 .8rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border-soft, var(--border));
}
.clock:last-of-type { border-bottom: 0; }
.clock__place {
  grid-area: place;
  font-weight: 600;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
/* Cờ vẽ bằng hình khối nên phải cho tô màu tự do, không ăn theo màu chữ như
   bộ biểu tượng nét vẽ. Viền mảnh để lá cờ Pháp không lẫn vào nền sáng. */
.flag {
  width: 21px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--glass-stroke), 0 1px 3px rgba(0, 0, 0, .35);
}
.clock__zone {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .05rem .38rem;
}
.clock__date { grid-area: date; color: var(--muted); font-size: .73rem; }
.clock__time {
  grid-area: time;
  justify-self: end;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* giây nhảy mà số không xê dịch */
  color: var(--primary);
  letter-spacing: -.02em;
}
.clock__gap { margin: .6rem 0 0; font-size: .76rem; color: var(--muted); }

/* ---------------- Thẻ âm nhạc ---------------- */
.music__intro { margin: 0 0 .8rem; font-size: .82rem; color: var(--muted); }
.player {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.player__btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--primary);
  color: #fff;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.player__btn:hover { transform: scale(1.06); }
.player__btn.is-on { box-shadow: 0 0 20px var(--glow); }
.player__meta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.player__title { font-size: .88rem; font-weight: 700; }
.player__by { font-size: .74rem; color: var(--muted); }
.player__time {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
}

/* ---------------- Huy hiệu ---------------- */
.badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  padding: .9rem .5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  /* Chưa mở thì mờ và xám, nhưng vẫn đọc được tên để biết đích cần tới */
  opacity: .55;
  filter: grayscale(1);
  transition: opacity .25s, filter .25s, transform .25s, box-shadow .25s;
}
.badge.is-got {
  opacity: 1;
  filter: none;
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
  box-shadow: 0 0 20px color-mix(in srgb, var(--gold) 22%, transparent);
}
.badge:hover { opacity: 1; filter: none; transform: translateY(-2px); }
.badge__ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge.is-got .badge__ico {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 35%, transparent);
}
.badge__ico .ico { width: 19px; height: 19px; }
.badge b { font-size: .84rem; }
.badge small {
  font-size: .68rem;
  color: var(--muted);
  line-height: 1.35;
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .7rem;
}
.panel__head h2 { margin: 0; }
.panel__head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.back-link { margin-bottom: .8rem; }

/* ---------------- Mục "Nội dung riêng" — Cố vấn Thầy Tú ---------------- */
.panel--advisor {
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--glass-stroke));
  background: color-mix(in srgb, var(--gold) 4%, var(--surface));
}
.tag--gold {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold);
}
.advisor-intro {
  margin: 0 0 .8rem;
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  line-height: 1.55;
  background: color-mix(in srgb, var(--gold) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.advisor-showcase { display: flex; flex-direction: column; gap: 1rem; }
.advisor-showcase__col { display: flex; flex-direction: column; min-width: 0; }
.advisor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .8rem;
  font-size: .78rem;
}
.advisor-foot__standard { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); }
.advisor-foot__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 60%, transparent); }
.advisor-foot__link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  font-size: .78rem;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.advisor-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  box-shadow: var(--shadow-sm), 0 14px 30px color-mix(in srgb, var(--gold) 18%, transparent);
  background: #0A1130;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.advisor-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow), 0 18px 38px color-mix(in srgb, var(--gold) 28%, transparent);
}
.advisor-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.advisor-card__hint {
  position: absolute;
  top: .6rem;
  right: .6rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, #06091E 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
.advisor-card__info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: .8rem .9rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  text-align: left;
  color: #fff;
  background: linear-gradient(to top, rgba(6,10,26,.92), rgba(6,10,26,.55) 65%, transparent);
}
.advisor-card__kicker { font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); }
.advisor-card__name { font-weight: 800; font-size: .95rem; }
.advisor-card__role { font-size: .74rem; color: rgba(255,255,255,.8); }

@media (min-width: 760px) {
  .advisor-showcase { flex-direction: row; align-items: stretch; }
  .advisor-showcase__col { flex: 1 1 auto; }
  .advisor-card { flex: 0 0 240px; width: 240px; aspect-ratio: auto; min-height: 300px; }
}

/* ---------------- Mách nước cho sinh viên ---------------- */
.hint {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 1rem;
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--text-soft);
  font-size: .88rem;
  line-height: 1.5;
}
.hint__ico { width: 20px; height: 20px; color: var(--primary); flex: 0 0 auto; margin-top: .1rem; }
.hint__text { margin: 0; flex: 1 1 auto; }
.hint__text b { color: var(--primary); }
.hint__close {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1;
  padding: .2rem .3rem;
  cursor: pointer;
  border-radius: 6px;
}
.hint__close:hover { color: var(--text); background: var(--glass-2); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.4rem;
  margin-bottom: 1.2rem;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--secondary-soft) 100%);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow), 0 0 40px var(--glow);
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
/* bản đồ Đồng bằng sông Cửu Long chìm trong nền hero */
.hero__map {
  position: absolute;
  inset: 0;
  background: url("../img/mekong-map.webp") center/cover no-repeat;
  opacity: .34;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
html[data-theme="dark"] .hero__map { opacity: .55; mix-blend-mode: screen; }
/* Bản đồ phải chìm hẳn ở nửa trái, nếu không các đường sáng của nó chạy
   xuyên qua tiêu đề làm chữ khó đọc. Nửa phải để lộ dần cho thấy hình. */
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              color-mix(in srgb, var(--bg) 88%, transparent) 0%,
              color-mix(in srgb, var(--bg) 78%, transparent) 42%,
              color-mix(in srgb, var(--bg) 34%, transparent) 74%,
              transparent 100%);
  pointer-events: none;
}
.hero__body { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.hero__title { font-size: 2rem; margin: 0 0 .2rem; }
.hero__title span { display: block; }
.hero__title .hero__title-sm {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.hero__title span:not(.hero__title-sm) {
  background: var(--holo-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  display: inline-block;
  margin: .5rem 0 1rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
}
/* Hương AI đứng bên phải khối hero, kèm bong bóng thoại phía trên đầu */
.hero__mascot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__bubble {
  position: relative;
  margin: 0 0 .3rem;
  padding: .42rem 1rem;
  max-width: 15rem;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface-2);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-sm);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  text-align: center;
}
/* Ảnh chụp trong giảng đường, còn nguyên nền. Nền còn nguyên thì không có
   răng cưa quanh tóc, nhưng phải đóng khung cho ra tấm ảnh — thả một hình chữ
   nhật giữa trang thì trông như lỗi hiển thị. */
.hero__huong, .quiz-huong, .result-hero__huong {
  border-radius: var(--radius);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-sm), 0 16px 38px var(--glow);
  object-fit: cover;
  background: var(--surface-2);
}
/* Khoá chiều cao chứ không khoá bề ngang: mỗi tấm một tỷ lệ khác nhau, khoá bề
   ngang thì ảnh cao thấp nhấp nhô mỗi lần đổi. */
.hero__huong {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: 290px;
  width: auto;
  /* Khối đầu trang cắt phần tràn, nên ảnh phải dừng đúng mép trong. */
  margin-bottom: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__huong { animation: floaty 6s ease-in-out infinite; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.stat {
  position: relative;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-stroke);
  border-radius: 13px;
  padding: .65rem .3rem;
  text-align: center;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
/* vệt sáng mảnh chạy dọc mép trên, tách ô ra khỏi nền bản đồ phía sau */
.stat::before {
  content: "";
  position: absolute;
  inset: 0 18% auto 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: .7;
}
.stat:hover { transform: translateY(-3px); box-shadow: 0 0 18px var(--glow); }
/* Con số dùng chữ đơn cách và bề rộng chữ số cố định: các ô đứng thành
   cột thẳng hàng, và số không nhảy ngang mỗi lần đổi giá trị. */
.stat b {
  display: block;
  font-size: 1.35rem;
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat span {
  font-size: .66rem;
  color: var(--muted);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* ---------------- Lời giới thiệu trong khối đầu trang ----------------
   Trước đây có thêm một thẻ giảng viên riêng ngay bên dưới, nhưng nó lặp
   lại đúng câu chào, đúng tên tác giả và thêm một hình Hương thứ hai trên
   cùng một màn hình. Gộp cả vào đây: một khối, một nhân vật, không lặp. */
.hero__role {
  margin: .45rem 0 0;
  color: var(--muted);
  font-size: .84rem;
}
.hero__fr {
  margin: .55rem 0;
  padding: .12rem 0 .12rem .7rem;
  border-left: 2px solid color-mix(in srgb, var(--secondary) 60%, transparent);
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--secondary);
}
.hero__note {
  margin: 0 0 1rem;
  max-width: 44ch;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ---------------- Mode cards ---------------- */
/* Lưới bento: thẻ to nhỏ xen kẽ trên 12 cột thay vì các ô đều tăm tắp.
   Thi thử là việc chính nên chiếm ô lớn cao gấp đôi, các thẻ còn lại xếp
   quanh. Bố cục:
     hàng 1   Thi thử (7)  |  Ôn theo chương (5)
     hàng 2   Thi thử tiếp |  Luyện câu sai   (5)
     hàng 3   Đã đánh dấu (5)  |  Ghép đề     (7)   */
.modes {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .75rem;
  margin-bottom: 1.2rem;
}
.modes > .mode-card { grid-column: span 5; }
.mode-card--primary { grid-column: span 7; grid-row: span 2; }
.mode-card--wide { grid-column: span 7; }
.mode-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-align: left;
  border-radius: var(--radius);
  padding: .9rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .28s ease, border-color .2s, box-shadow .28s;
}
.mode-card:hover {
  transform: perspective(900px) rotateX(4deg) rotateY(-4deg) translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow), 0 0 26px var(--glow);
}
.mode-card--primary {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--primary) 16%, transparent),
              color-mix(in srgb, var(--secondary) 12%, transparent));
}
.mode-card__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(140deg,
              color-mix(in srgb, var(--primary) 22%, transparent),
              color-mix(in srgb, var(--secondary) 16%, transparent));
  border: 1px solid var(--glass-stroke);
  color: var(--primary);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  transition: transform .28s ease, box-shadow .28s ease;
}
.mode-card__icon .ico { width: 22px; height: 22px; }
.mode-card:hover .mode-card__icon { transform: scale(1.06); box-shadow: 0 0 18px var(--glow); }
.mode-card__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mode-card__body strong { font-size: 1rem; letter-spacing: -.01em; }
.mode-card__body small { color: var(--muted); font-size: .79rem; line-height: 1.4; }
.mode-card__go {
  width: 18px; height: 18px;
  color: var(--muted);
  opacity: .55;
  transition: transform .25s ease, opacity .25s;
}

/* Vạch màu bên trái để nhận ra loại việc mà không cần đọc chữ:
   lam là làm bài, hồng là ôn lại, đỏ là câu sai, vàng là đã đánh dấu,
   xanh lá là công cụ ghép đề. */
.modes .mode-card { border-left-width: 4px; }
.modes [data-mode="exam"]     { border-left-color: var(--primary); }
.modes [data-mode="practice"] { border-left-color: var(--secondary); }
.modes [data-mode="wrong"]    { border-left-color: var(--danger); }
.modes [data-mode="marked"]   { border-left-color: var(--gold); }
.modes [data-mode="import"]   { border-left-color: var(--tertiary); }
.modes [data-mode="practice"] .mode-card__icon { color: var(--secondary); }
.modes [data-mode="wrong"] .mode-card__icon    { color: var(--danger); }
.modes [data-mode="marked"] .mode-card__icon   { color: var(--gold); }
.modes [data-mode="import"] .mode-card__icon   { color: var(--tertiary); }

/* ---------------- Ba con số trên thanh trên cùng ---------------- */
.hud {
  display: none;                 /* chỉ hiện ở màn rộng, xem media query */
  align-items: center;
  gap: 1.6rem;
  padding: .3rem 1.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--glass-stroke);
}
.hud__item { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.hud__k {
  font-family: var(--mono);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.hud__v {
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.hud__v--gold { color: var(--gold); }
.hud__v--warn { color: var(--danger); }
.mode-card:hover .mode-card__go { transform: translateX(3px); opacity: 1; color: var(--primary); }
/* Ô lớn cao gấp đôi nên xếp dọc: biểu tượng to, tên, mô tả, rồi mũi tên
   đẩy xuống đáy — không dàn ngang như các thẻ nhỏ. */
.mode-card--primary {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;       /* dồn vào giữa, tránh khoảng trống hẫng ở đáy */
  gap: .6rem;
  padding: 1.25rem;
}
.mode-card--primary .mode-card__icon { width: 56px; height: 56px; border-radius: 16px; }
.mode-card--primary .mode-card__icon .ico { width: 28px; height: 28px; }
.mode-card--primary .mode-card__body { flex: 0 0 auto; }
.mode-card--primary .mode-card__body strong { font-size: 1.35rem; font-family: var(--display); }
.mode-card--primary .mode-card__body small { font-size: .87rem; margin-top: .2rem; }
.mode-card--primary .mode-card__go { width: 22px; height: 22px; opacity: .8; }

/* thẻ chính nổi hơn hẳn phần còn lại */
.mode-card--primary .mode-card__icon {
  background: linear-gradient(140deg, var(--primary), var(--secondary));
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: 0 0 20px var(--glow);
}

/* ---------------- Import / ghép đề ---------------- */
.import-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}
textarea {
  width: 100%;
  min-height: 260px;
  padding: .7rem .8rem;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .84rem;
  line-height: 1.55;
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.import-target { display: flex; gap: .5rem; flex-wrap: wrap; }
select,
.import-target input[type="text"] {
  flex: 1 1 220px;
  padding: .58rem .7rem;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
}

.import-status {
  margin-top: .9rem;
  padding: .7rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.import-status.ok { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.import-status.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.import-status.err { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

.import-preview { margin-top: .9rem; }
.preview-item {
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: .65rem .8rem;
  margin-bottom: .5rem;
  font-size: .88rem;
}
.preview-item.ok { border-left-color: var(--success); }
.preview-item.no { border-left-color: var(--danger); }
.preview-item__q { font-weight: 600; margin-bottom: .35rem; }
.preview-item__opt { padding: .1rem 0 .1rem .3rem; color: var(--text-soft); }
.preview-item__opt.correct { color: var(--success); font-weight: 700; }
.preview-item__warn { color: var(--danger); font-size: .82rem; margin-top: .25rem; }

.format-help { font-size: .88rem; color: var(--text-soft); }
.format-help p { margin: .25rem 0; }

/* ---------------- Chapter list ---------------- */
.chapter-list { display: flex; flex-direction: column; gap: .5rem; }
.chapter-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .72rem .8rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  transition: border-color .15s, transform .2s, box-shadow .2s;
}
.chapter-item:hover {
  border-color: var(--primary);
  transform: translateX(4px);
  box-shadow: 0 0 20px var(--glow);
}
.chapter-item__no {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--holo);
  color: #0A1130;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .88rem;
  box-shadow: 0 0 14px var(--glow);
}
/* Ô này nay đựng biểu tượng đề tài chương thay cho con số: số chương đã nằm
   sẵn trong tên chương ("Chương 1 – …") nên in lại là thừa, còn hình thì
   nhận ra được từ xa. */
/* ---------------- Khối video giới thiệu ----------------
   Không đóng trong thẻ panel như các mục khác: ảnh bìa tràn hết khung, chữ và
   nút phát nằm đè lên, giống cách các trang giới thiệu sản phẩm hay làm. Khung
   16:9 khoá sẵn nên trang không nhảy lúc video nạp xong. */
.filmstrip { margin-bottom: 1.1rem; }
.filmstrip__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow);
}
.filmstrip__poster,
.filmstrip__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.filmstrip__video { opacity: 0; pointer-events: none; }
/* Khi đã bấm phát: video hiện lên, ảnh bìa và lớp chữ lui hết. */
.filmstrip.is-playing .filmstrip__video { opacity: 1; pointer-events: auto; object-fit: contain; }
.filmstrip.is-playing .filmstrip__poster,
.filmstrip.is-playing .filmstrip__veil { opacity: 0; pointer-events: none; }

.filmstrip__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity .3s ease;
  /* Tối dần từ giữa xuống đáy để chữ trắng nào cũng đọc được, không phụ thuộc
     ảnh bìa sáng hay tối. */
  background: linear-gradient(180deg,
              rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .18) 38%, rgba(0, 0, 0, .82) 100%);
}
.filmstrip__play {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(18, 20, 22, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.filmstrip__play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }
.filmstrip__play:hover {
  transform: scale(1.07);
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 0 26px var(--glow);
}
.filmstrip__play:active { transform: scale(.97); }

.filmstrip__caption {
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  bottom: 1.1rem;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
.filmstrip__eyebrow {
  margin: 0 0 .2rem;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
}
.filmstrip__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1.15;
  color: #fff;
}
.filmstrip__sub { margin: .25rem 0 0; font-size: .86rem; color: rgba(255, 255, 255, .82); }
.filmstrip__len {
  position: absolute;
  top: .9rem;
  right: .9rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: .18rem .5rem;
}
.filmstrip__note { display: block; margin-top: .5rem; font-size: .76rem; line-height: 1.45; }

@media (max-width: 720px) {
  .filmstrip__play { width: 58px; height: 58px; }
  .filmstrip__play svg { width: 24px; height: 24px; }
  .filmstrip__caption { left: .9rem; right: .9rem; bottom: .8rem; }
  .filmstrip__title { font-size: 1.08rem; }
  .filmstrip__sub { font-size: .78rem; }
}
@media print { .filmstrip { display: none !important; } }

/* Ảnh cả lớp trên màn thiết lập đề. Cắt theo chiều cao cố định để tấm ảnh
   ngang không đẩy phần chọn số câu xuống quá sâu. */
.setup-banner {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-stroke);
  margin: 0 0 1rem;
}
@media (max-width: 720px) { .setup-banner { height: 108px; } }

/* Ảnh mở đầu phần nội dung học phần: tràn hết bề ngang thẻ, cắt theo chiều cao
   để tấm ngang 16:9 không đẩy danh sách chương xuống quá sâu. */
.chapters-banner {
  display: block;
  width: 100%;
  height: auto;
  /* Hiện nguyên khung, không cắt: cắt theo chiều cao là phạm ngay vào đầu
     nhân vật, vì trong khung ấy cô đứng chiếm gần hết chiều dọc. */
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-stroke);
  margin: 0 0 1rem;
}

/* Hương AI đứng cạnh danh sách chương. */
.chapters-stage { display: flex; align-items: center; gap: 1rem; }
.chapters-stage .chapter-list { flex: 1 1 auto; min-width: 0; }
.chapters-stage__figure {
  flex: 0 0 auto;
  width: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-sm), 0 14px 34px var(--glow);
  pointer-events: none;
  margin-bottom: .2rem;
}
.chapters-stage__figure--co { height: 220px; }
.chapters-stage__figure--ai { height: 300px; }
@media (prefers-reduced-motion: no-preference) {
  .chapters-stage__figure--ai { animation: floaty 8s ease-in-out infinite; }
}
/* Dưới ngưỡng này danh sách cần trọn bề ngang, tên chương vốn đã dài. */
@media (max-width: 1180px) { .chapters-stage__figure { display: none; } }

.chapter-item__no .ico { width: 20px; height: 20px; vertical-align: 0; }
.chapter-item__no .ico use { stroke-width: 1.9; }
.chapter-item__main { flex: 1; min-width: 0; }
.chapter-item__title { display: block; font-weight: 600; font-size: .93rem; }
.chapter-item__meta { display: block; color: var(--muted); font-size: .78rem; }
.chapter-item__go { color: var(--muted); font-size: 1.1rem; }
.case-doclink {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: -.3rem .7rem .2rem .8rem;
  font-size: .76rem;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.case-doclink:hover { color: var(--primary); text-decoration: underline; }

/* ---------------- History ---------------- */
.history { display: flex; flex-direction: column; gap: .45rem; }
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .87rem;
}
.history-item__score { font-weight: 800; font-size: 1.02rem; font-family: var(--display); }
.history-item__score.pass { color: var(--success); }
.history-item__score.fail { color: var(--danger); }

/* ---------------- Bài giảng theo chương ---------------- */
.lecture-list { display: flex; flex-direction: column; gap: .6rem; }
.lecture-item { padding: .85rem .9rem; border-radius: var(--radius-sm); }
.lecture-item__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.lecture-item__no {
  flex: 0 0 28px; height: 28px; border-radius: 9px;
  background: var(--holo); color: #0A1130;
  display: grid; place-items: center; font-weight: 800; font-size: .82rem;
}
.lecture-item__title { font-weight: 600; font-size: .93rem; }
.lecture-item__summary { margin: 0 0 .6rem; font-size: .85rem; line-height: 1.45; }
.lecture-item__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Khung xem slide/video — nằm trong #modalLectureViewer, .modal__box--wide */
.lecture-viewer { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.lecture-viewer__img {
  width: 100%; max-height: 60vh; object-fit: contain;
  border-radius: var(--radius-sm); background: var(--bg-soft); cursor: pointer;
}
.lecture-viewer__nav { display: flex; align-items: center; gap: .75rem; }
.lecture-viewer__count { font-size: .85rem; color: var(--muted); min-width: 7ch; text-align: center; }
.lecture-viewer__range { width: 100%; }
.lecture-viewer--video { width: 100%; }
.lecture-viewer--video video { width: 100%; max-height: 70vh; border-radius: var(--radius-sm); background: #000; }
.lecture-viewer__error { text-align: center; padding: 2rem 1rem; color: var(--muted); }

/* ---------------- Form fields ---------------- */
.field { margin-bottom: 1.1rem; }
.field > label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .4rem;
}
input[type="number"], input[type="file"] {
  width: 100%;
  padding: .58rem .7rem;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
}
input[type="number"]:focus, input[type="file"]:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .45rem; }
.chip {
  padding: .34rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--glass-stroke);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: .82rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, box-shadow .15s;
}
.chip:hover, .chip.is-active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-color: transparent;
  color: var(--on-primary);
  box-shadow: 0 0 16px var(--glow);
}
.switch {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 0;
  cursor: pointer;
  font-size: .92rem;
}
.switch input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.checklist {
  display: grid;
  gap: .3rem;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  background: var(--surface-2);
}
.checklist label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  cursor: pointer;
}
.checklist input { accent-color: var(--primary); width: 16px; height: 16px; }

/* ---------------- Buttons ---------------- */
.btn {
  border: 1px solid var(--glass-stroke);
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: .62rem 1.05rem;
  font-size: .92rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 0 0 var(--glass-stroke);
  transition: transform .18s ease, box-shadow .18s ease, background .15s, opacity .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--glass-stroke), 0 0 18px var(--glow); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--glass-stroke); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* nút chính: nền chuyển sắc chạy nhẹ, có bệ nổi 3D */
.btn--primary {
  border-color: transparent;
  color: var(--on-primary);
  background-image: var(--holo);
  background-size: 200% auto;
  color: #0A1130;
  box-shadow: 0 5px 0 0 rgba(10, 17, 48, .35), 0 8px 22px var(--glow);
}
.btn--primary:hover {
  box-shadow: 0 7px 0 0 rgba(10, 17, 48, .35), 0 12px 28px var(--glow);
}
.btn--primary:active { box-shadow: 0 1px 0 0 rgba(10, 17, 48, .35); }
@media (prefers-reduced-motion: no-preference) {
  .btn--primary { animation: shimmer 4s linear infinite; }
}
@keyframes shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.btn--success {
  background-image: none;
  background-color: var(--success);
  border-color: transparent;
  color: var(--on-success);
  box-shadow: 0 5px 0 0 color-mix(in srgb, var(--success) 65%, #000), 0 8px 20px var(--glow-2);
}
.btn--success:active { box-shadow: 0 1px 0 0 color-mix(in srgb, var(--success) 65%, #000); }
.btn--danger {
  background-image: none;
  background-color: var(--danger);
  border-color: transparent;
  color: var(--on-danger);
  box-shadow: 0 5px 0 0 color-mix(in srgb, var(--danger) 65%, #000);
}
.btn--danger:active { box-shadow: 0 1px 0 0 color-mix(in srgb, var(--danger) 65%, #000); }
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-soft);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn--ghost:hover { background: var(--glass-2); box-shadow: none; transform: none; color: var(--text); }
.btn--sm { padding: .36rem .75rem; font-size: .82rem; box-shadow: 0 3px 0 0 var(--glass-stroke); }
.btn--lg { padding: .85rem 1.5rem; font-size: 1.02rem; width: 100%; }
.actions { display: flex; gap: .6rem; margin-top: .8rem; }
.actions--wrap { flex-wrap: wrap; }

/* ---------------- Quiz ---------------- */
.quiz-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.quiz-bar__left, .quiz-bar__right { display: flex; align-items: center; gap: .4rem; }
.pill {
  padding: .32rem .75rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pill--time {
  color: var(--primary);
  box-shadow: 0 0 16px var(--glow);
  text-shadow: 0 0 10px var(--glow);
}
.pill--time.is-urgent {
  color: var(--on-danger);
  background: var(--danger);
  border-color: var(--danger);
  text-shadow: none;
  animation: pulse 1s infinite;
}
@keyframes pulse { 50% { opacity: .6; } }

.progress {
  height: 7px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid var(--glass-stroke);
}
.progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  box-shadow: 0 0 12px var(--glow-2);
  transition: width .3s ease;
}

/* khu vực làm bài: nhân vật đứng cạnh thẻ câu hỏi trên màn rộng */
.quiz-stage { display: flex; align-items: flex-end; gap: 1rem; }
.quiz-stage__main { flex: 1 1 auto; min-width: 0; }
.quiz-huong {
  flex: 0 0 auto;
  height: 300px;
  width: auto;
  margin-bottom: .5rem;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .quiz-huong { animation: floaty 7s ease-in-out infinite; }
}
@media (max-width: 900px) { .quiz-huong { display: none; } }

.question-card {
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.question-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--glow) 0%, transparent 55%);
  opacity: .25;
  pointer-events: none;
}
.question-card > * { position: relative; }
.question-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .6rem;
}
.tag {
  background: var(--secondary-soft);
  color: var(--secondary);
  border-radius: 999px;
  padding: .22rem .7rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.mark-btn {
  background: none;
  border: 1px solid var(--glass-stroke);
  border-radius: 999px;
  padding: .22rem .65rem;
  font-size: .76rem;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.mark-btn.is-on { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.question-card__text { font-size: 1.12rem; font-weight: 600; margin: 0 0 1.1rem; line-height: 1.55; }

.options { display: flex; flex-direction: column; gap: .55rem; }
.option {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem .9rem;
  border: 1.5px solid var(--glass-stroke);
  border-radius: var(--radius-sm);
  background: var(--glass-2);
  cursor: pointer;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  text-align: left;
  width: 100%;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.option:hover:not(:disabled) {
  border-color: var(--primary);
  transform: translateX(3px);
  box-shadow: 0 0 18px var(--glow);
}
.option:disabled { cursor: default; }
.option__key {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--glass-stroke);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .82rem;
}
.option__text { flex: 1; }
.option.is-selected {
  border-color: var(--tertiary);
  background: color-mix(in srgb, var(--tertiary) 12%, transparent);
  box-shadow: 0 0 16px var(--glow-2);
}
.option.is-selected .option__key { background: var(--tertiary); border-color: var(--tertiary); color: var(--on-tertiary); }
.option.is-correct { border-color: var(--success); background: var(--success-soft); }
.option.is-correct .option__key { background: var(--success); border-color: var(--success); color: var(--on-success); }
.option.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.option.is-wrong .option__key { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }

.explain {
  margin-top: .9rem;
  padding: .8rem .9rem;
  border-left: 3px solid var(--secondary);
  background: var(--secondary-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .9rem;
}
.explain b { display: block; margin-bottom: .15rem; }

.quiz-nav {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .5rem;
}

/* ---------------- Result ---------------- */
.result-hero {
  text-align: center;
  border-radius: var(--radius);
  padding: 1.8rem 1rem 1.4rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm), 0 0 34px var(--glow);
  position: relative;
}
.result-hero__huong {
  position: absolute;
  right: 1.2rem;
  bottom: 0;
  /* khoá theo chiều cao để tấm nào cũng vừa khung */
  height: 240px;
  width: auto;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .result-hero__huong { animation: floaty 5.5s ease-in-out infinite; }
}
@media (max-width: 720px) { .result-hero__huong { display: none; } }

.score-ring {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: grid;
  place-content: center;
  background: conic-gradient(from 180deg, var(--secondary) 0%, var(--primary) var(--pct, 0%), var(--border) 0);
  position: relative;
  box-shadow: 0 0 28px var(--glow);
}
.score-ring::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--surface);
}
.score-ring__num, .score-ring__label { position: relative; z-index: 1; text-align: center; }
.score-ring__num {
  font-size: 2.6rem;
  font-weight: 800;
  font-family: var(--display);
  line-height: 1;
  text-shadow: 0 0 18px var(--glow);
}
.score-ring__label { font-size: .85rem; color: var(--muted); }
.score-ring.pass { background: conic-gradient(from 180deg, var(--secondary) 0%, var(--tertiary) var(--pct, 0%), var(--border) 0); box-shadow: 0 0 28px var(--glow-2); }

.result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-bottom: 1rem;
}
.kpi {
  border-radius: var(--radius-sm);
  padding: .8rem .3rem;
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.kpi:hover { transform: translateY(-3px); box-shadow: 0 0 18px var(--glow); }
.kpi b { display: block; font-size: 1.3rem; font-family: var(--display); font-weight: 800; }
.kpi span { font-size: .72rem; color: var(--muted); }

.bychapter { display: flex; flex-direction: column; gap: .6rem; }
.bych-row { font-size: .87rem; }
.bych-row__head { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; }
.bych-row__bar { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.bych-row__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  border-radius: 999px;
  box-shadow: 0 0 10px var(--glow-2);
}

.review { display: flex; flex-direction: column; gap: .8rem; }
.review-item {
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: .85rem;
}
.review-item.ok { border-left-color: var(--success); }
.review-item.no { border-left-color: var(--danger); }
.review-item__q { font-weight: 600; margin-bottom: .5rem; font-size: .95rem; }
.review-item__no { color: var(--muted); font-weight: 700; margin-right: .3rem; }
.review-opt {
  display: flex;
  gap: .5rem;
  padding: .32rem .5rem;
  border-radius: 7px;
  font-size: .88rem;
}
.review-opt.correct { background: var(--success-soft); color: var(--success); font-weight: 600; }
.review-opt.chosen-wrong { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.review-item .explain { margin-top: .6rem; }

/* ---------------- Modal ---------------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 90;
  animation: fade .18s ease;
}
.modal__box {
  background: var(--surface);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius);
  width: min(580px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow), 0 0 40px var(--glow);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--glass-stroke);
}
.modal__head h3 { margin: 0; font-size: 1rem; }
.modal__body { padding: 1rem; overflow-y: auto; }
.modal__foot { padding: .8rem 1rem; border-top: 1px solid var(--glass-stroke); }

.advisor__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.advisor__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
}
.advisor__name { font-weight: 700; margin: 0; }
.advisor__website {
  display: inline-block;
  margin-top: .25rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.advisor__website:hover { text-decoration: underline; }
#btnAdvisorVoice.is-on { color: var(--primary); border-color: var(--primary); }
.modal__foot .btn { width: 100%; }
.modal__box--wide { width: min(920px, 100%); }

/* Nút trông như link — dùng cho hành động mở link cần chặn trước (mở khoá),
   không thể là thẻ <a> thật vì còn phải kiểm tra trạng thái trước khi điều hướng. */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.err {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  padding: 0;
  font-size: .84rem;
  min-height: 0;
}
.err:empty { display: none; }
.err:not(:empty) { padding: .5rem .7rem; margin: .6rem 0 0; }
.case-infographic__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-stroke);
}

.legend { display: flex; gap: 1rem; flex-wrap: wrap; padding: .7rem 1rem 0; font-size: .78rem; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: .35rem; }
.dot { width: 11px; height: 11px; border-radius: 4px; display: inline-block; border: 1px solid var(--glass-stroke); }
.dot--answered { background: var(--tertiary); border-color: var(--tertiary); }
.dot--marked { background: var(--warn); border-color: var(--warn); }
.dot--empty { background: var(--surface-2); }

.qgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: .4rem;
  padding: 1rem;
  overflow-y: auto;
}
.qgrid button {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--glass-stroke);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s, box-shadow .15s;
}
.qgrid button:hover { transform: translateY(-2px); box-shadow: 0 0 12px var(--glow); }
.qgrid button.answered {
  background: color-mix(in srgb, var(--tertiary) 22%, transparent);
  border-color: var(--tertiary);
  color: var(--tertiary);
}
.qgrid button.marked { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.qgrid button.current { outline: 2px solid var(--secondary); outline-offset: 2px; box-shadow: 0 0 16px var(--glow); }

.bank-info { font-size: .87rem; color: var(--text-soft); }
.bank-info div { padding: .15rem 0; }
.import-log { font-size: .82rem; margin-top: .5rem; color: var(--text-soft); }

/* ---------------- Toast ---------------- */
.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--surface);
  border: 1px solid var(--glass-stroke);
  color: var(--text);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 600;
  box-shadow: var(--shadow), 0 0 20px var(--glow);
  animation: toastIn .25s ease;
  max-width: 90vw;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------- Loader / Footer ---------------- */
.loader { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.loader__spin {
  width: 42px; height: 42px;
  border: 3px solid var(--glass-stroke);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 1rem;
  box-shadow: 0 0 20px var(--glow);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: space-between;
  text-align: left;
  font-size: .8rem;
  color: var(--muted);
  border-top: 1px solid var(--glass-stroke);
  margin: 3rem auto 0;
  padding: 1.3rem 1rem 2.5rem;
  max-width: 980px;
  position: relative;
  z-index: 1;
}
.footer p { margin: .2rem 0; }
/* Chữ ký nhận diện đặt trên cùng chân trang, cách bố trí lấy theo M-AIDA:
   dấu hiệu trước, dòng chức danh ngay dưới, rồi mới đến các liên kết. */
.footer__sig {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .9rem;
}
.footer__lockup-link {
  align-self: flex-start;
  display: inline-block;
}
.footer__lockup-link:hover { text-decoration: none; }
.footer__lockup {
  width: auto;
  height: 64px;                  /* đủ để đọc được dòng chữ trong dấu hiệu */
  max-width: 100%;
  display: block;
  /* Dấu hiệu vẽ bằng màu đất trên nền trong suốt; trên nền tối cần sáng lên
     một chút mới đọc được, nên nâng độ sáng thay vì đổi màu gốc. */
  filter: none;
}
html[data-theme="dark"] .footer__lockup { filter: brightness(1.18) saturate(1.05); }
.footer__sig small {
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.footer__links { flex-basis: 100%; }
.footer a { color: var(--primary); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.copyright { margin-top: .6rem; font-size: .78rem; }
.preview-head { font-size: .95rem; margin: .6rem 0; }

.author-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
  padding: .42rem .95rem;
  border: 1px solid var(--glass-stroke);
  border-radius: 999px;
  background: var(--glass-2);
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.author-link:hover { border-color: var(--primary); box-shadow: 0 0 16px var(--glow); }

/* ---------------- Nền chìm: bản đồ Việt Nam ---------------- */
#vnmark {
  position: fixed;
  top: 52%;
  right: 1.2%;
  transform: translateY(-50%);
  width: min(32vw, 430px);
  color: var(--primary);
  opacity: .16;
  pointer-events: none;
  z-index: -2;
}
#vnmark svg { width: 100%; height: auto; display: block; }

/* Quả địa cầu chìm bên trái, làm cặp với hình Việt Nam bên phải. Nhạt hơn
   hẳn và nhỏ hơn để không tranh chỗ với nội dung; màn hẹp thì bỏ đi vì hai
   hình nền cùng lúc trên màn nhỏ chỉ làm rối. */
#globemark {
  position: fixed;
  /* Thanh dọc rộng 232px và đục hẳn, đặt quả cầu trong khoảng ấy thì bị che
     mất, nên phải bắt đầu từ sau mép thanh. */
  left: calc(232px + 2%);
  bottom: 4%;
  width: min(20vw, 300px);
  opacity: .16;
  pointer-events: none;
  z-index: -2;
}
#globemark img { width: 100%; height: auto; display: block; }
@media (max-width: 1099px) { #globemark { display: none; } }
#vnmark .lh-halo { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  #vnmark .lh-light { animation: lhblink 1.8s ease-in-out infinite; }
  #vnmark .lh-halo { animation: lhhalo 1.8s ease-in-out infinite; }
  #vnmark .lh:nth-of-type(2) .lh-light, #vnmark .lh:nth-of-type(2) .lh-halo { animation-delay: .45s; }
  #vnmark .lh:nth-of-type(3) .lh-light, #vnmark .lh:nth-of-type(3) .lh-halo { animation-delay: .9s; }
  #vnmark .lh:nth-of-type(4) .lh-light, #vnmark .lh:nth-of-type(4) .lh-halo { animation-delay: 1.35s; }
}
@keyframes lhblink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes lhhalo { 0%, 100% { opacity: 0; } 50% { opacity: .7; } }
@media (max-width: 1150px) {
  #vnmark { right: 50%; top: 58%; transform: translate(50%, -50%); width: min(92vw, 400px); opacity: .1; }
}

/* ---------------- Công tắc ngôn ngữ VI | EN ---------------- */
.langtog {
  display: inline-flex;
  border: 1px solid var(--glass-stroke);
  border-radius: 20px;
  overflow: hidden;
  background: var(--glass-2);
  box-shadow: var(--shadow-sm);
}
.langtog button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 700 .72rem var(--font);
  padding: 0 .7rem;
  cursor: pointer;
  letter-spacing: .03em;
}
.langtog button.is-active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--on-primary);
}

/* ---------------- Chính sách bản quyền ---------------- */
.policy { font-size: .9rem; color: var(--text-soft); }
/* Đoạn quyền riêng tư có xuống dòng thật trong từ điển; giữ lại chỗ ngắt ấy
   để hai ý — dữ liệu học tập và việc đếm lượt truy cập — không dính làm một. */
.policy p { white-space: pre-line; }
.policy h4 { font-family: var(--display); font-size: .98rem; margin: 1rem 0 .3rem; color: var(--text); }
.policy ul { margin: .3rem 0 .6rem; padding-left: 1.1rem; }
.policy li { margin: .2rem 0; }
.policy__mark {
  border-left: 3px solid var(--secondary);
  background: var(--secondary-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .6rem .8rem;
  margin-top: .8rem;
  color: var(--text);
}

/* Chặn bôi đen và sao chép nội dung câu hỏi; ô nhập liệu vẫn dùng bình thường */
.no-copy, .no-copy * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.no-copy input, .no-copy textarea, .no-copy select,
.no-copy input *, .no-copy textarea * {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.no-copy img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* ---------------- Hương AI — tour có giọng nói ---------------- */
.tour-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.05rem .55rem .55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background-image: var(--holo);
  background-size: 200% auto;
  color: #0A1130;
  font: 700 .85rem var(--font);
  cursor: pointer;
  box-shadow: 0 5px 0 0 var(--primary-dark), 0 10px 26px var(--glow);
  transition: transform .18s, box-shadow .18s;
}
.tour-fab:hover { transform: translateY(-2px); box-shadow: 0 7px 0 0 var(--primary-dark), 0 14px 32px var(--glow); }
.tour-fab:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--primary-dark); }
@media (prefers-reduced-motion: no-preference) {
  .tour-fab { animation: shimmer 4s linear infinite; }
}
.tour-fab__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  background: var(--surface);
  border: 2px solid rgba(255, 255, 255, .75);
}

.tour-panel {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(660px, calc(100vw - 2rem));
  z-index: 90;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-stroke);
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 34px var(--glow);
  padding: .9rem 1rem;
  animation: fade .25s ease;
  /* chừa chỗ bên phải cho nhân vật đứng */
  padding-right: 8.5rem;
}
/* nhân vật toàn thân đứng cạnh bảng thoại, đổi tư thế theo bước */
.tour-panel__huong {
  position: absolute;
  right: .4rem;
  bottom: 0;
  /* khoá chiều cao: mỗi tư thế một tỷ lệ khác nhau, nếu khoá bề ngang
     thì nhân vật sẽ cao thấp nhấp nhô mỗi lần chuyển bước */
  height: 190px;
  width: auto;
  /* Ảnh giữ nguyên nền tối lúc dựng chứ không tách nền, nên đóng khung bo tròn
     cho ra dáng một tấm hình chứ không phải mảng chữ nhật thừa. */
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-sm), 0 12px 30px var(--glow);
  pointer-events: none;
  transition: opacity .25s ease;
}
.tour-panel__head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .4rem;
}
.tour-panel__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  background: var(--surface);
  border: 2px solid var(--secondary);
}
.tour-panel__who { font-weight: 700; font-size: .88rem; }
.tour-panel__step { color: var(--muted); font-size: .76rem; }
.tour-panel__close { margin-left: auto; }
.tour-panel__text {
  font-size: .93rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 .6rem;
  min-height: 3.1em;
}
.tour-panel__nav { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.tour-panel__nav .btn { padding: .35rem .8rem; font-size: .82rem; }
.tour-note { font-size: .74rem; color: var(--muted); margin: .45rem 0 0; }

/* Thẻ chốt sau khi đi hết tour */
.tour-done__lead {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
  margin: 0 0 .7rem;
  background: linear-gradient(92deg, var(--primary), var(--secondary) 60%, var(--tertiary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tour-done__title {
  margin: 0 0 .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.tour-done__list {
  list-style: none;
  margin: 0 0 .8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.tour-done__list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--text-soft);
}
.tour-done__list li > span:first-child { flex: 0 0 auto; }

/* vùng đang được thuyết minh */
.tour-spot {
  position: relative;
  z-index: 60;
  outline: 3px solid var(--secondary);
  outline-offset: 4px;
  border-radius: var(--radius);
  box-shadow: 0 0 26px var(--glow);
  animation: tourPulse 1.6s ease-in-out infinite;
}
@keyframes tourPulse {
  0%, 100% { outline-color: var(--secondary); }
  50% { outline-color: color-mix(in srgb, var(--secondary) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spot { animation: none; }
}

/* ---------------- Responsive ---------------- */

/* Màn đủ rộng: bật thanh dọc, tắt thanh dưới, đẩy nội dung sang phải */
@media (min-width: 1100px) {
  .sidenav { display: flex; }
  .botnav { display: none; }
  /* Thanh dọc chiếm 232px bên trái. Nếu chỉ đẩy lề trái đúng 232px thì cột
     nội dung dính sát thanh và dồn hết khoảng trống sang phải. Chia đôi phần
     dư của khoảng còn lại để cột đứng giữa vùng đọc thật sự. */
  .container, .footer {
    margin-left: calc(232px + max(0px, (100vw - 232px - 980px) / 2));
    margin-right: auto;
  }
  .container { padding-bottom: 5rem; }   /* chừa chỗ cho nút tour nổi ở góc */
  .topbar__inner { max-width: none; padding-left: 1.2rem; padding-right: 1.2rem; }
  .hud { display: flex; }
}

/* Màn hẹp: thanh dưới chiếm chỗ, chừa đệm để không che nội dung */
@media (max-width: 1099px) {
  .container { padding-bottom: 5.5rem; }
  /* Nút tour nổi ở 4.6rem và cao chừng 2.4rem, nên chân trang phải lùi quá
     mốc đó — trước đây nút che mất dòng địa chỉ thư. */
  .footer { padding-bottom: 8rem; }
  .tour-fab { bottom: 4.6rem; }
  .toast-wrap { bottom: 4.8rem; }
  .tour-panel { bottom: 4.6rem; }
}

@media (max-width: 620px) {
  .hero { flex-direction: column; text-align: center; padding: 1.3rem 1rem; gap: .6rem; }
  .hero__title { font-size: 1.5rem; }
  .hero__mascot { align-self: center; }
  .hero__bubble { font-size: .8rem; max-width: 13rem; }
  .hero__huong { height: 168px; width: auto; margin-bottom: -1.3rem; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__veil { background: linear-gradient(180deg,
                color-mix(in srgb, var(--bg) 70%, transparent) 0%,
                color-mix(in srgb, var(--bg) 40%, transparent) 100%); }
  /* Màn hẹp: bỏ lưới bento, xếp một cột. Phải trả các thẻ về ô mặc định,
     nếu không phần chiếm 7/12 và cao gấp đôi vẫn còn hiệu lực. */
  .modes { grid-template-columns: 1fr; }
  .modes > .mode-card,
  .mode-card--primary,
  .mode-card--wide { grid-column: auto; grid-row: auto; }
  .mode-card--primary {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    padding: .9rem;
  }
  .mode-card--primary .mode-card__icon { width: 44px; height: 44px; border-radius: 13px; }
  .mode-card--primary .mode-card__icon .ico { width: 22px; height: 22px; }
  /* Trả lại khả năng co: bản màn rộng khoá flex: 0 0 auto cho ô lớn xếp dọc,
     giữ nguyên ở đây thì phần chữ không thu lại và đẩy mũi tên ra ngoài thẻ. */
  .mode-card--primary .mode-card__body { flex: 1 1 auto; min-width: 0; }
  .mode-card--primary .mode-card__body strong { font-size: 1rem; font-family: inherit; }
  .mode-card--primary .mode-card__body small { font-size: .79rem; }
  .mode-card--primary .mode-card__go { width: 18px; height: 18px; flex: 0 0 auto; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  .quiz-nav { grid-template-columns: 1fr 1fr; }
  .quiz-nav .btn--success { grid-column: 1 / -1; }
  .brand__text small { display: none; }
  .import-grid { grid-template-columns: 1fr; }
  textarea { min-height: 190px; }
  .badges { grid-template-columns: repeat(2, 1fr); }
  .insight { flex-direction: column; }
  .hero__note { max-width: none; margin-bottom: .7rem; }
  .hero__fr { border-left: 0; padding-left: 0; }
  .tour-fab { padding: .5rem .85rem .5rem .5rem; font-size: .8rem; }
  .tour-panel { bottom: 4.4rem; padding: .8rem .85rem; padding-right: .85rem; }
  .tour-panel__huong { display: none; }
  .footer { text-align: center; justify-content: center; }
  .footer__links { text-align: center; }
}

/* Máy yếu / người dùng tắt hiệu ứng: bỏ kính mờ cho đỡ giật */
@media (prefers-reduced-transparency: reduce) {
  .glass, .panel, .mode-card, .question-card, .result-hero,
  .kpi, .chapter-item, .history-item, .review-item, .preview-item, .lecture-item,
  .topbar, .tour-panel {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media print {
  html { background: #fff; }
  body::before, #vnmark, #globemark, .hero__map, .hero__huong,
  .quiz-huong, .result-hero__huong, .tour-panel__huong,
  .chapters-stage__figure, .advisor-card { display: none !important; }
  .topbar, .quiz-nav, .actions, .modal, .footer, .toast-wrap, .tour-fab,
  .sidenav, .botnav { display: none !important; }
  .container { margin-left: 0; padding-bottom: 0; }
}