/* =========================================================
   ON LUYEN THI THEME — MAIN STYLESHEET
   Design tokens theo design-prompt.md — KHONG hardcode ma mau
   rai rac, moi thu dinh nghia o :root
   ========================================================= */

:root {
  /* --- Bang mau bat buoc (design-prompt.md muc 2) --- */
  --color-primary: #fa003c;      /* Logo, header, nut dieu huong chinh */
  --color-secondary: #0c93f4;    /* Link, badge info, progress bar */
  --color-accent: #ec407a;       /* Hover, badge Moi/Hot, gradient */
  --color-cta: #ffb039;          /* CHI danh cho nut mua hang/thanh toan */

  --color-bg: #fafafa;
  --color-bg-white: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-border: #e5e5e5;

  --color-correct: #22c55e;      /* Dap an dung khi lam quiz */
  --color-incorrect: #dc2626;    /* Dap an sai */

  /* --- Grid & Spacing (design-prompt.md muc 4) --- */
  --container-max: 1440px;
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;
  /* Bien MOI RIENG cho padding NGANG tren MOBILE — theo yeu cau nguoi
     dung "toàn bộ max width mobile... padding ngang thành 4px". KHONG
     doi truc tiep "--gutter-mobile" (bien GOC) vi no dung o NHIEU noi
     KHONG lien quan padding le man hinh: gap giua cac card trong luoi
     san pham (dong 638, ".product-grid"), va NHIEU noi CHI ap dung cho
     DESKTOP (trong "@media (min-width: 900px/1024px)", VD panel doan
     van, sidebar ket qua) — doi bien goc se VO TINH thu hep khoang
     cach giua cac the/card VA anh huong CA desktop, sai hoan toan muc
     tieu. Bien moi nay CHI dung cho cac rule PADDING LE THAT SU tren
     MOBILE (boc trong "@media (max-width: 899px)" o tung noi, xem cac
     vi tri dung ben duoi). */
  --gutter-mobile-tight: 4px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  --radius-sm: 8px;
  --radius-lg: 12px;

  --header-height-desktop: 72px;
  --header-height-mobile: 56px;
  --cta-height-desktop: 48px;
  --cta-height-mobile: 44px;
  --input-height: 44px;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.16);

  /* --- GRADIENT & CHAT LIEU (lop thi giac moi) ---
     Theo yeu cau nguoi dung: "làm lại giao diện cho đặc sắc hơn, thêm
     gradient màu sắc các thứ cho bắt mắt". TAT CA gradient duoi day
     dung DUNG 4 mau thuong hieu da khoa o tren (design-prompt.md muc
     2) — KHONG them mau moi ngoai bang, tranh pha vo nhan dien.
     "--grad-hot" dung cho diem nhan CHINH (dem nguoc, vien tren the,
     pill dang chon). "--grad-cool" cho thong tin/ket qua hoc tap.
     KHONG co gradient nao dung mau "--color-cta" (#ffb039) vi mau do
     DANH RIENG cho nut mua hang (quy tac bat buoc cua design-prompt.md
     muc 2: mau mua hang phai la mau DUY NHAT, khong lan sang vai tro
     trang tri). */
  --grad-hot: linear-gradient(135deg, #fa003c, #ec407a);
  --grad-cool: linear-gradient(135deg, #0c93f4, #5ec2ff);

  /* Mau ke o ly — lay tu chinh mau xanh thuong hieu, do mo RAT THAP de
     chi con la CHAT LIEU nen, khong canh tranh voi noi dung. Giay o ly
     that cua hoc sinh cung ke mau xanh nhat, nen dung tong. */
  --color-grid-line: rgba(12, 147, 244, 0.07);

  --font-main: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Breakpoints (dung trong media query, ghi chu tham khao) ---
     Mobile:  <= 640px
     Tablet:  641px - 1024px
     Desktop: >= 1025px
  */
}

/* =========================================================
   RESET CO BAN
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-text);
  /* NEN GIAY O LY — theo yeu cau nguoi dung: "làm lại giao diện cho
     đặc sắc hơn, thêm gradient màu sắc các thứ cho bắt mắt". Thay vi
     do 1 mau xam phang (truoc day chi "var(--color-bg)"), nen trang
     GIO la GIAY KE O LY mo — chat lieu DAC TRUNG NHAT trong the gioi
     mon Toan cua hoc sinh Viet Nam (moi bai toan deu lam tren giay o
     ly). Nho do ca site doc ra "vo lam toan" thay vi "mot san khoa hoc
     chung chung".
     3 lop nen, tu TREN xuong: (1) quang sang gradient do-hong o DAU
     trang (chi 720px dau, khong lap) tao diem nhan mau ngay khi vao
     trang; (2) duong ke NGANG; (3) duong ke DOC. O ly 22px — gan ty le
     o ly that (5mm) khi phong len man hinh. */
  background-color: var(--color-bg);
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(250, 0, 60, 0.10) 0%, rgba(236, 64, 122, 0.05) 35%, transparent 70%),
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 100% 720px, 22px 22px, 22px 22px;
  background-repeat: no-repeat, repeat, repeat;
  background-position: center top, center top, center top;
  font-size: 16px;
  line-height: 1.6;
  /* SUA LOI THUC TE nguoi dung phat hien: "menu 3 lớp ở header nhưng
     chưa được css" — sau khi them CSS submenu cap 3 dang "flyout"
     (position:absolute, left:100%, xem ".site-sidebar__nav .sub-menu
     .sub-menu"), PHAT HIEN RUI RO: neu muc menu lop 2 dang o GAN MEP
     PHAI man hinh (VD menu chinh header co nhieu muc), submenu chau co
     THE TRAN RA NGOAI VIEWPORT, gay THANH CUON NGANG xau cho CA TRANG.
     "overflow-x: hidden" o day CHAN DUNG thanh cuon do xuat hien —
     CHAP NHAN submenu co THE hoi tran ra ngoai VE MAT THI GIAC trong
     TRUONG HOP HIEM (uu tien hon la CAT MAT noi dung submenu neu dat
     overflow o pham vi hep hon nhu ".site-header"). */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-secondary); text-decoration: none; }
a:hover { color: var(--color-accent); }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.3; font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 var(--space-3); }

/* Focus state cho accessibility (design-prompt.md muc 7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* =========================================================
   LAYOUT — CONTAINER / GRID
   ========================================================= */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile-tight);
}

@media (min-width: 1025px) {
  .container { padding: 0 var(--gutter-desktop); }
}

/**
 * CSS ".site-layout"/".site-main"/khung chinh ".site-sidebar" (sidebar
 * desktop CO DINH ben trai) DA BI XOA HAN — theo yeu cau nguoi dung:
 * "tôi muốn bỏ sidebar bên trái đi, tập trung menu các thứ ở header".
 * Menu chinh GIO nam TRONG ".site-header" (header ngang tren cung, xem
 * header.php) thay vi sidebar rieng.
 *
 * CAC SELECTOR CON ben duoi (".site-sidebar__logo", ".site-sidebar__nav",
 * menu cha-con...) VAN GIU LAI — CHUNG VAN con duoc dung trong MOBILE
 * DRAWER (template-parts/sidebar-nav.php, KHONG doi gi, van la menu
 * chinh cho rieng mobile khi bam hamburger).
 */

.site-sidebar__logo {
  display: block;
  margin-bottom: var(--space-5);
}
.site-sidebar__logo img { height: 40px; }

.site-sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: 500;
  margin-bottom: var(--space-1);
}
.site-sidebar__nav-item:hover {
  background: rgba(250, 0, 60, 0.06);
  color: var(--color-primary);
}
.site-sidebar__nav-item.is-active {
  background: rgba(250, 0, 60, 0.1);
  color: var(--color-primary);
  font-weight: 700;
}
.site-sidebar__nav-item .dashicons,
.site-sidebar__nav-item .icon { font-size: 20px; width: 20px; }

/* Ho tro ICON cho tung muc menu sidebar_primary — admin tu gan class
   dashicons (VD "dashicons-admin-home") vao o "Class CSS" khi sua tung
   muc menu trong Giao dien -> Menu (can bat "Class CSS" trong Tuy chon
   man hinh, WordPress ho tro san, khong can code them). Neu KHONG gan
   class dashicons nao, muc menu van hien binh thuong (chi khong co icon)
   — khong bat buoc. */
.site-sidebar__nav-item[class*="dashicons-"]::before {
  font-family: dashicons;
  font-size: 20px;
  width: 20px;
  line-height: 1;
  display: inline-block;
}

/* MENU CHA-CON — theo yeu cau nguoi dung: "hiện tại tôi add vào thì nó
   hiển thị cùng 1 dòng hết" — TRUOC DAY hoan toan CHUA co CSS rieng cho
   submenu (WordPress TU DONG boc menu con trong "<ul class="sub-menu">"
   long BEN TRONG "<li>" cha, VA TU DONG gan class
   "menu-item-has-children" cho "<li>" cha — HANH VI MAC DINH cua
   wp_nav_menu(), KHONG can Walker rieng), nen submenu HIEN RA nhu 1
   danh sach PHANG noi tiep, khong thut le/an mac dinh.
   HANH VI CUOI CUNG (nguoi dung xac nhan RO qua nhieu lan hoi lai):
     - DESKTOP: HOVER vao "<li>" cha TU DONG mo submenu (CSS thuan,
       KHONG can JS) — chuot roi khoi vung thi TU DONG dong lai.
     - MOBILE: KHONG co hover tren cam ung — can 1 NUT MUI TEN RIENG
       BIET (".site-sidebar__submenu-toggle", THAT SU trong DOM, KHONG
       PHAI "::after" — vi "::after" la pseudo-element KHONG THE gan su
       kien click JS rieng) de BAM TOGGLE mo/dong, TACH BIET voi chinh
       link cha (bam vao CHU/link van DIEU HUONG binh thuong toi URL
       cua no, dung theo yeu cau: "bấm vào thì chuyển sang url của
       nó"). Nut nay duoc JS TU DONG CHEN vao (xem
       initSidebarSubmenuToggle() trong assets/js/main.js), KHONG can
       sua PHP/Walker gi ca.
   SUA LOI THUC TE nguoi dung phat hien: "deskop đã css đâu" — SAU KHI
   chuyen menu chinh tu sidebar len header (".site-header__main-nav-list",
   xem header.php), TOAN BO CSS submenu duoi day CHI VIET cho selector
   ".site-sidebar__nav" — class nay GIO CHI CON TON TAI trong MOBILE
   DRAWER (template-parts/sidebar-nav.php), HEADER DESKTOP dung TEN
   KHAC HAN (".site-header__main-nav-list") nen KHONG khop selector
   nao ca, submenu KHONG co CSS gi tren desktop. SUA: GOP CA 2 selector
   (".site-sidebar__nav, .site-header__main-nav-list") cho MOI rule lien
   quan cau truc menu cha-con — dung CHUNG 1 bo CSS cho CA 2 ngu canh,
   KHONG can viet lap lai 2 lan. */
.site-sidebar__nav .sub-menu,
.site-header__main-nav-list .sub-menu {
  list-style: none;
  margin: 0 0 0 var(--space-2);
  padding: 0;
}
/* DESKTOP (>=1025px) — submenu AN mac dinh, HOVER vao "<li>" cha TU
   DONG hien. Dung "max-height + overflow" (khong phai "display:none")
   de co the ANIMATE mo/dong muot ma qua transition. */
@media (min-width: 1025px) {
  .site-sidebar__nav .sub-menu,
  .site-header__main-nav-list .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .site-sidebar__nav li.menu-item-has-children:hover > .sub-menu,
  .site-header__main-nav-list li.menu-item-has-children:hover > .sub-menu {
    /* "max-height" LON (khong dung "auto" — CSS transition KHONG the
       animate toi "auto") — 600px la UOC LUONG DU DUNG cho da so
       truong hop (menu it khi qua 15-20 muc con). */
    max-height: 600px;
  }
  /* Nut toggle rieng KHONG can thiet tren desktop (hover da xu ly) —
     an di, chi con dung tren mobile. */
  .site-sidebar__submenu-toggle {
    display: none;
  }
}
/* MOBILE (duoi 1025px) — KHONG co hover, submenu CHI mo qua NUT MUI
   TEN rieng (JS toggle class "is-open" tren "<li>" cha). CHI can viet
   cho ".site-sidebar__nav" — HEADER DESKTOP (".site-header__main-nav-list")
   TU DONG AN HOAN TOAN tren mobile qua CSS RIENG (".site-header__main-nav
   { display: none }", xem ben duoi), nen KHONG can xu ly hanh vi mobile
   cho no. */
@media (max-width: 1024px) {
  .site-sidebar__nav .sub-menu {
    display: none;
  }
  .site-sidebar__nav li.menu-item-has-children.is-open > .sub-menu {
    display: block;
  }
}
.site-sidebar__nav .sub-menu .site-sidebar__nav-item,
.site-header__main-nav-list .sub-menu .site-sidebar__nav-item {
  padding-left: calc(var(--space-3) + var(--space-4));
  font-size: 0.92rem;
  font-weight: 400;
}
/* Nut MUI TEN TOGGLE — phan tu THAT trong DOM (JS tu chen, xem
   assets/js/main.js), KHONG PHAI pseudo-element — de co THE bam duoc
   RIENG BIET tren mobile (tach biet voi link cha, van dieu huong binh
   thuong khi bam vao chu). CHI can ap dung cho ".site-sidebar__nav" —
   JS "initSidebarSubmenuToggle()" CHI query dung selector nay (xem
   assets/js/main.js), va header desktop KHONG CAN nut nay (da co hover). */
.site-sidebar__nav li.menu-item-has-children {
  position: relative;
  display: flex;
  /* QUAN TRONG — "flex-wrap: wrap" BAT BUOC o day: "<li>" nay co 3 CON
     TRUC TIEP (<a> link cha, <button> mui ten, <ul class="sub-menu">
     submenu) — NEU KHONG cho wrap, ca 3 se XEP NGANG CANH NHAU tren
     CUNG 1 hang (submenu thanh 1 "cot" o BEN PHAI thay vi XUONG HANG
     RIENG o DUOI — LOI BO CUC nghiem trong da tu phat hien khi ra soat
     ky). "flex-wrap: wrap" + submenu co "flex-basis: 100%" (xem duoi)
     dam bao submenu LUON bi DAY xuong HANG RIENG, DUNG bo cuc mong
     muon. */
  flex-wrap: wrap;
  align-items: center;
}
/* HEADER DESKTOP ("<li>" cua menu chinh trong header) — KHONG CAN
   "flex-wrap: wrap" nhu mobile drawer, vi header desktop KHONG co nut
   mui ten toggle (chi co <a> + <ul class="sub-menu">, 2 con thay vi 3)
   VA submenu dung "position:absolute" (xem duoi) — khong nam trong
   dong chay binh thuong cua "<li>" nua nen khong can wrap. CHI can
   "position: relative" lam diem tua cho submenu con. */
.site-header__main-nav-list li.menu-item-has-children {
  position: relative;
}
/* SUA LOI THUC TE nguoi dung phat hien: "cần thêm nhận biết cho các
   menu cha có chứa con, hiện tại hiển thị trơn rất khó nhận biết" —
   TRUOC DAY tren DESKTOP hoan toan KHONG CO dau hieu gi (khong mui
   ten/icon) de biet muc nao CO submenu — phai HOVER THU moi biet, rat
   kho nhan ra. Them MUI TEN qua "::after" tren CHINH the <a> (khong
   dung <li> vi <a> moi la phan tu HIEN THI chinh, de dinh vi mui ten
   ngay canh chu). CHI ap dung DESKTOP (>=1025px) — MOBILE da co NUT
   MUI TEN RIENG (JS tu chen, xem initSidebarSubmenuToggle() trong
   assets/js/main.js), KHONG can them nua tranh trung lap 2 mui ten. */
@media (min-width: 1025px) {
  /* CAP 1 (menu chinh trong header) — MUI TEN TRO XUONG (▼), bao hieu
     submenu se "THA XUONG" ngay ben duoi khi hover (dung huong hien thi
     thuc te cua submenu cap 2, xem CSS "position:absolute; top:100%"
     o tren). */
  .site-header__main-nav-list > li.menu-item-has-children > a.site-sidebar__nav-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .site-header__main-nav-list > li.menu-item-has-children > a.site-sidebar__nav-item::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px; /* Can chinh nho de mui ten CAN GIUA theo chieu doc voi chu, khop dung baseline. */
    opacity: 0.6;
  }
  /* CAP 2 TRO DI (submenu long ben trong submenu, tuc muc CO chua LOP
     CHAU) — MUI TEN TRO PHAI (▶), bao hieu submenu CHAU se "TRUOT SANG
     PHAI" (flyout) thay vi tha xuong duoi — khac huong voi cap 1, dung
     KHOP voi CSS "position:absolute; left:100%" cua submenu chau da
     lam o lan sua truoc. */
  .site-header__main-nav-list .sub-menu li.menu-item-has-children > a.site-sidebar__nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .site-header__main-nav-list .sub-menu li.menu-item-has-children > a.site-sidebar__nav-item::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); /* Xoay nguoc huong so voi mui ten cap 1 — tro SANG PHAI thay vi xuong duoi. */
    flex-shrink: 0;
    opacity: 0.6;
  }
}
.site-sidebar__nav li.menu-item-has-children > .sub-menu {
  flex-basis: 100%; /* EP submenu chiem TRON 1 hang rieng, khong nam canh <a>/<button> — CHI ap dung mobile drawer, header desktop dung position:absolute rieng (xem duoi). */
}
.site-sidebar__nav li.menu-item-has-children > a.site-sidebar__nav-item {
  flex: 1;
  min-width: 0;
}
.site-sidebar__submenu-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
}
.site-sidebar__submenu-toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.site-sidebar__nav li.menu-item-has-children.is-open .site-sidebar__submenu-toggle::after {
  transform: rotate(-135deg); /* Xoay mui ten TU "xuong" (▼) thanh "len" (▲) khi submenu dang MO — CHI anh huong tren mobile (desktop da AN han nut nay). */
}

/* HEADER DESKTOP — submenu CAP 2 (con) hien theo kieu "flyout" TRUOT
   XUONG DUOI TRUC TIEP link cha (khac mobile drawer — thut le trong
   DONG CHAY binh thuong). Day la HANH VI CHUAN cua menu ngang truyen
   thong nhieu website (submenu luon "tha" xuong duoi tu muc cha trong
   thanh menu ngang), khac han sidebar doc (thut le sang phai trong
   cung 1 cot). */
@media (min-width: 1025px) {
  .site-header__main-nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    max-height: none; /* GHI DE "max-height:0" cua rule chung o tren — header desktop dung "display" thay vi "max-height" de an/hien (don gian hon, khong can animate chieu cao vi huong "tha xuong" khac voi sidebar "truot ngang"). */
    overflow: visible;
    display: none;
    min-width: 220px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: var(--space-1) 0;
    z-index: 50;
  }
  .site-header__main-nav-list li.menu-item-has-children:hover > .sub-menu {
    display: block;
  }
  .site-header__main-nav-list .sub-menu .site-sidebar__nav-item {
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
  }
}

/* MENU 3 LOP (chau) — theo yeu cau nguoi dung: "tôi có thêm menu 3 lớp
   ở header nhưng chưa được css". CSS o TREN (".sub-menu" cap 1, tuc CON
   TRUC TIEP cua menu goc) CHI xu ly dung LOP 2 (con) — LOP 3 (chau, tuc
   "<ul class="sub-menu">" LONG BEN TRONG 1 "<ul class="sub-menu">" KHAC)
   CAN CSS RIENG vi HANH VI HIEN THI KHAC HAN: nguoi dung xac nhan LOP 3
   tren DESKTOP TRUOT SANG PHAI (kieu "flyout", giong nhieu website menu
   nhieu cap) THAY VI thut le xuong duoi/tha xuong nhu lop 2. Co CHE MO
   (hover desktop / bam nut mobile) GIONG HET lop 2, CHI khac VI TRI
   hien thi. Selector ".sub-menu .sub-menu" (KHONG co ">") khop DUNG bat
   ky submenu LONG SAU BAO NHIEU CAP cung duoc — nhung PHAM VI HIEN TAI
   chi ho tro DUNG 3 LOP (ong/cha/chau) theo dung yeu cau, CHUA test cho
   lop 4+. */
@media (min-width: 1025px) {
  .site-sidebar__nav .sub-menu .sub-menu,
  .site-header__main-nav-list .sub-menu .sub-menu {
    /* GHI DE LAI hoan toan cac thuoc tinh dinh vi cua LOP 2 (thut le
       xuong duoi / tha xuong) — LOP 3 KHONG con la 1 HANG/khoi rieng
       ben duoi link cha cua no nua, ma la 1 KHOI TRUOT NGANG, dinh vi
       TUYET DOI so voi chinh "<li>" cha (lop 2) cua no.
       QUAN TRONG — "!important" BAT BUOC tren "flex-basis": rule GOC
       ".site-sidebar__nav li.menu-item-has-children > .sub-menu" (dinh
       nghia lop 2 cho MOBILE DRAWER) co DO DAC HIEU CAO HON (co them
       element selector "li") so voi rule nay (chi dung class selector,
       khong "li") — NEU KHONG co "!important", "flex-basis: 100%" cua
       rule GOC se VAN THANG (du dat SAU trong file), khien submenu
       chau BI EP chiem tron 1 hang thay vi truot sang phai nhu mong
       muon — LOI DA TU PHAT HIEN khi tinh toan ky do dac hieu CSS
       truoc khi giao. */
    position: absolute;
    top: 0;
    left: 100%;
    flex-basis: auto !important;
    min-width: 200px;
    margin: 0;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: var(--space-1) 0;
    z-index: 60; /* Cao hon lop 2 (z-index:50) de noi len TREN, tranh bi che khuat. */
  }
  /* "<li>" cha cua submenu lop 3 (chinh la 1 MUC trong submenu lop 2)
     CAN "position: relative" de lam DIEM TUA cho "position: absolute"
     cua submenu chau (dinh vi TUONG DOI so VOI CHINH "<li>" nay, khong
     phai so voi toan trang). */
  .site-sidebar__nav .sub-menu li.menu-item-has-children,
  .site-header__main-nav-list .sub-menu li.menu-item-has-children {
    position: relative;
  }
  /* Submenu CHAU AN mac dinh (khac lop 2 dung "max-height"/"display"
     rieng de animate — lop 3 dinh vi TUYET DOI nen dung "display" don
     gian, khong can hieu ung truot muot vi huong xuat hien la NGANG). */
  .site-sidebar__nav .sub-menu .sub-menu,
  .site-header__main-nav-list .sub-menu .sub-menu {
    display: none;
  }
  .site-sidebar__nav .sub-menu li.menu-item-has-children:hover > .sub-menu,
  .site-header__main-nav-list .sub-menu li.menu-item-has-children:hover > .sub-menu {
    display: block;
  }
}
/* MOBILE (duoi 1025px) — submenu CHAU dung LAI Y HET co che cua lop 2
   (thut le THEM 1 buoc nua xuong duoi, KHONG truot ngang — man hinh
   nho khong du cho de "flyout" sang phai). CHI can viet cho
   ".site-sidebar__nav" — header desktop AN HOAN TOAN tren mobile (xem
   giai thich o tren). Nut mui ten toggle (JS tu chen, xem
   initSidebarSubmenuToggle() trong assets/js/main.js) DA TU DONG hoat
   dong dung cho MOI cap do long nhau (selector JS dung
   'li.menu-item-has-children' KHONG gioi han cap, xem giai thich chi
   tiet trong file do) — KHONG can sua JS gi them. */
@media (max-width: 1024px) {
  .site-sidebar__nav .sub-menu .sub-menu .site-sidebar__nav-item {
    padding-left: calc(var(--space-3) + var(--space-4) + var(--space-3));
  }
}

/**
 * CSS ".site-sidebar__divider" va ".site-sidebar__fanpage*" DA BI XOA
 * HAN — HTML tuong ung KHONG con ton tai (da bo Fanpage theo yeu cau
 * nguoi dung: "Bỏ hẳn, không cần hiện Fanpage nữa ở vị trí nào cả").
 */

/**
 * CSS ".site-sidebar__trust" (khoi "Cam kết chất lượng") DA BI XOA HAN
 * — HTML tuong ung KHONG con ton tai (da bo theo yeu cau nguoi dung).
 */

/* =========================================================
   HEADER NGANG — design-prompt.md muc 6.1
   ========================================================= */
.site-header {
  height: var(--header-height-mobile);
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
}

@media (min-width: 1025px) {
  .site-header { height: var(--header-height-desktop); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}

/* Logo — MOI THEM, CHUYEN TU sidebar (da bo han) vao header — theo yeu
   cau nguoi dung: "tập trung menu các thứ ở header". "flex-shrink: 0"
   dam bao logo KHONG bi co lai khi cac phan tu khac (search, nav) can
   nhieu khong gian tren man hinh hep hon. */
.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header__logo img { height: 32px; }
@media (min-width: 1025px) {
  .site-header__logo img { height: 36px; }
}

.site-header__search {
  display: none;
  flex: 1;
  max-width: 360px;
}

@media (min-width: 1025px) {
  .site-header__search { display: block; }
}

.site-header__search input[type="search"] {
  width: 100%;
  height: var(--input-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  font-size: 0.95rem;
}

.site-header__main-nav { display: none; }
@media (min-width: 1025px) {
  .site-header__main-nav { display: block; }
}
.site-header__main-nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header__main-nav-list a { color: var(--color-text); font-weight: 500; }
.site-header__main-nav-list a:hover { color: var(--color-primary); }

/* ".site-sidebar__nav-item" (TEN CLASS THAT, gan TU DONG cho MOI the <a>
   cua vi tri menu 'sidebar_primary' qua filter
   ntc_sidebar_nav_link_attributes(), xem inc/helpers.php — GIU NGUYEN
   TEN CLASS GOC, KHONG doi thanh "site-header__nav-item", de KHONG lam
   vo CSS menu cha-con da lam CONG PHU cho MOBILE DRAWER (hover/accordion,
   xem ".site-sidebar__nav .sub-menu" ben duoi trong file nay) — CHI
   VIET RIENG 1 rule CHO DUNG NGU CANH HEADER (namespace qua
   ".site-header__main-nav-list", CHI anh huong <a> NAM TRONG header,
   KHONG dung chung style voi mobile drawer) — icon + chu nam NGANG don
   gian, khac voi sidebar (xep cot doc). */
.site-header__main-nav-list .site-sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  background: none;
}
.site-header__main-nav-list .site-sidebar__nav-item.is-active { color: var(--color-primary); font-weight: 700; }

/* Ho tro ICON cho tung muc menu — admin tu gan class dashicons (VD
   "dashicons-welcome-learn-more") vao o "Class CSS" khi sua tung muc
   menu trong Giao dien -> Menu (can bat "Class CSS" trong Tuy chon man
   hinh). */
.site-header__main-nav-list .site-sidebar__nav-item[class*="dashicons-"]::before {
  font-family: dashicons;
  font-size: 18px;
  line-height: 1;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
}
@media (min-width: 1025px) {
  .site-header__hamburger { display: none; }
}

/* =========================================================
   BUTTONS — 1 style duy nhat / loai (design-prompt.md muc 7)
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--cta-height-mobile);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  transition: filter 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
@media (min-width: 1025px) {
  .btn { height: var(--cta-height-desktop); }
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { filter: brightness(1.08); color: #fff; }

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.btn-secondary:hover { background: rgba(250, 0, 60, 0.06); color: var(--color-primary); }

/* Nut mua hang — MAU DUY NHAT #ffb039, chu den de dam bao contrast AA */
.btn-cta {
  background: var(--color-cta);
  color: #1a1a1a;
}
.btn-cta:hover { filter: brightness(1.05); color: #1a1a1a; }

.btn-sm { height: 36px; padding: 0 var(--space-3); font-size: 0.85rem; }
.btn-block { width: 100%; }

/* =========================================================
   HERO BANNER — design-prompt.md muc 6.1
   ========================================================= */
.hero {
  padding: var(--space-6) 0;
  /* XEP DOC (khong con Grid 2 cot) — theo yeu cau nguoi dung: "bỏ phần
     thông tin hero đi, banner cho maxwidth đếm ngược kỳ thi cho nằm
     phía dưới banner". CHI CON 2 khoi: Banner (".hero__visual") TREN,
     Dem nguoc (".hero__countdown-wrap") DUOI — CA 2 CAN GIUA man hinh,
     GIOI HAN do rong rieng (xem tung khoi ben duoi), KHONG con tran
     het container nhu cac phan khac cua trang. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
/**
 * CSS ".hero__grid"/".hero__title"/".hero__features" DA BI XOA HAN —
 * HTML tuong ung KHONG con ton tai (da bo theo yeu cau nguoi dung: "bỏ
 * phần thông tin hero đi" — tieu de + 3 gach dau dong tinh nang + nut
 * "Khám phá ngay"). Xem front-page.php.
 */

/* Dem nguoc ngay thi — xem inc/shortcodes-blocks.php (ntc_shortcode_countdown())
   va assets/js/main.js (initCountdown(), cap nhat real-time moi giay). */
/* THIET KE LAI theo yeu cau nguoi dung: "nổi bật, gây chú ý mạnh" —
   nen GRADIENT DAM (dung "--color-primary" + "--color-accent" co san,
   ghi chu TU TRUOC la "dùng cho gradient" — khop DUNG thuong hieu san
   co, khong bia mau moi), chu so LON HON han, tao CAM GIAC GAP RUT/
   KHAN TRUONG. GIU NGUYEN bo cuc "nhãn trái + 4 ô số phải, cùng 1
   hàng" theo dung xac nhan nguoi dung. */
.countdown {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-lg);
  /* Bong do MAU (khong phai xam trung tinh nhu "--shadow-card" mac
     dinh) — tao chieu sau PHU HOP voi nen gradient dam, thay vi bong
     xam nhat nhoa tren nen mau. */
  box-shadow: 0 8px 24px rgba(250, 0, 60, 0.35);
  padding: var(--space-4) var(--space-4);
}
.countdown__label {
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.countdown__boxes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.countdown__box {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  min-width: 64px;
  /* backdrop-filter — hieu ung "kinh mo" (frosted glass) tren nen
     gradient, tao cam giac hien dai/cao cap hon nen dac don gian. An
     toan tren moi trinh duyet hien dai (khong ho tro cung KHONG gay
     loi gi, chi don gian bo qua hieu ung, nen VAN hien binh thuong nho
     "background" da khai bao san o tren). */
  backdrop-filter: blur(4px);
}
.countdown__box .num {
  /* TANG font-size dang ke — chu so LON HON HAN truoc (tu 1.6rem len
     2.2rem) — theo dung yeu cau nguoi dung: "chữ số lớn". */
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  /* font-variant-numeric tabular-nums giu do rong so KHONG NHAY khi doi
     tu 1 chu so sang 2 chu so (VD tu 09 xuong 10 giay) — tranh giat layout
     nho moi lan JS cap nhat. */
  font-variant-numeric: tabular-nums;
}
.countdown__box .label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* TOI UU MOBILE — theo yeu cau nguoi dung: "tối ưu giao diện cho
   mobile". Van de THUC TE: nhan "ĐẾN KỲ THI TN THPT" (viet hoa, dam)
   kha DAI, tren man hinh HEP (< 640px) cung 4 o so tren CUNG 1 hang se
   CHEN CHUC/co TRAN — doi bo cuc sang XEP 2 TANG (nhan hang tren FULL-
   WIDTH, 4 o so hang duoi chia DEU chieu rong) — CHI tren mobile,
   DESKTOP van giu nguyen 1 hang ngang nhu cu. Breakpoint tang tu 480px
   len 640px — bao phu RONG HON cac dien thoai PHO BIEN (khong chi may
   man hinh CUC nho), dam bao bo cuc dep tren da so thiet bi di dong
   thuc te. */
@media (max-width: 640px) {
  .countdown {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .countdown__label {
    text-align: center;
    white-space: normal; /* Cho phep XUONG DONG neu ten kỳ thi qua dai (admin co the doi label tuy y trong Customizer), tranh CHU BI CAT/TRAN. */
  }
  .countdown__boxes {
    gap: var(--space-1);
  }
  .countdown__box {
    /* CHIA DEU 4 o theo chieu rong con lai (thay vi "min-width" co dinh
       co the gay tran/chat tren man hinh RAT hep) — "flex: 1" giup 4 o
       TU DONG co GIAN theo dung khong gian thuc te co san. */
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-1);
  }
  .countdown__box .num { font-size: 1.5rem; }
  .countdown__box .label { font-size: 0.65rem; }
}
@media (max-width: 380px) {
  /* Man hinh CUC HEP (VD iPhone SE) — co THEM 1 chut nua cho chac chan. */
  .countdown__box .num { font-size: 1.3rem; }
  .countdown__box .label { font-size: 0.6rem; letter-spacing: 0; }
}

.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  /* GIOI HAN do rong banner — theo yeu cau nguoi dung: "banner cho
     maxwidth" — CAN GIUA man hinh (dung ".hero" cha da co
     "align-items: center"), KHONG con tran het container nhu truoc
     (luc con la 1 nua Grid 2 cot). TANG tu 1000px len 1440px (theo yeu
     cau moi nhat) — KHOP DUNG voi "--container-max" (bien chinh cua
     toan site, xem dau file), nghia la banner GIO co the RONG TOI DA
     BANG CA container chinh, khong con gioi han hep hon nua. "width:
     100%" dam bao TREN MAN HINH HEP HON 1440px, banner van co the CO
     LAI dung theo man hinh. */
  width: 100%;
  max-width: 1440px;
}
/* Khoi boc DEM NGUOC — DI CHUYEN xuong DUOI banner (truoc day nam BEN
   TRONG ".hero__text", canh trai Grid 2 cot) — theo yeu cau nguoi dung.
   CAN GIUA man hinh (".hero" cha da co "align-items: center"), TU CO
   RONG theo NOI DUNG BEN TRONG (".countdown" da co san CSS RIENG,
   khong can gioi han them max-width o day — khoi dem nguoc von da GON
   nho hon banner nhieu, khong can rong bang). */
.hero__countdown-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
/* Bo "margin-top" rieng cua ".countdown" khi no nam trong khoi hero —
   ".hero" cha (flex column) DA CO "gap: var(--space-4)" tao khoang
   cach voi ".hero__visual" phia tren, giu ca 2 se CONG DON thanh
   khoang cach RONG HON can thiet. */
.hero__countdown-wrap .countdown {
  margin-top: 0;
}
.hero__visual img {
  max-width: 100%;
  height: auto;
  /* Bo hieu ung "animation: ntc-float" (noi len xuong lien tuc) — theo
     yeu cau nguoi dung: "không cần di chuyển lên xuống". */
}

/* =========================================================
   HERO CAROUSEL — carousel anh banner trong .hero__visual, xem
   front-page.php (CPT 'banner') va assets/js/main.js (ham initCarousels()).
   CHI thay ANH, GIU NGUYEN chu tieu de/dem nguoc ben trai — xem
   .hero__visual o tren cho khung chua chung.
   ========================================================= */
.hero-carousel {
  position: relative;
  width: 100%;
}
/* aspect-ratio 4:3 CHI ap dung cho banner Hero trang chu (anh don thuan,
   xem front-page.php) — KHONG ap dung chung cho MOI carousel, vi khoi
   "Gói học nổi bật" o trang danh muc (taxonomy-danh_muc.php) can chieu
   cao TU NHIEN theo noi dung (mo ta dai/ngan khac nhau), khong the ep
   theo 1 ti le co dinh. */
.hero-carousel--anh-don {
  aspect-ratio: 1920 / 643; /* Khop dung ti le anh goc 1920x643px (nguoi dung xac nhan day la kich thuoc anh se upload) — xem inc/meta-boxes.php, meta box banner. */
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero-carousel__track {
  display: flex;
  height: 100%;
  /* JS (initCarousels()) doi 'transform: translateX(...)' de truot
     ngang giua cac slide — xem assets/js/main.js. */
  transition: transform 0.4s ease;
}
.hero-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
/* Dung CHILD COMBINATOR ">" (khong phai descendant selector thuong) — CHI
   ap dung cho <a>/<img> la CON TRUC TIEP cua slide (dung cho banner anh
   don thuan). KHONG "lan" xuong sau vao ben trong cac card phuc tap hon
   (VD .noi-bat-card co <a> boc tieu de RIENG ben trong, KHONG duoc keo
   gian full slide theo rule nay — da GAP LOI THUC TE truoc khi sua, ghi
   chu lai de tranh lap lai). */
.hero-carousel__slide > a,
.hero-carousel__slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  z-index: 2;
}
.hero-carousel__nav--prev { left: var(--space-2); }
.hero-carousel__nav--next { right: var(--space-2); }
.hero-carousel__dots {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.hero-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0;
}
.hero-carousel__dot.is-active {
  background: #fff;
  width: 20px; /* Cham dang active DAI HON — dau hieu nhan dien nhanh vi tri hien tai, quen thuoc voi carousel pho bien. */
  border-radius: 4px;
}

/* =========================================================
   PRODUCT SECTION — design-prompt.md muc 6.1
   ========================================================= */
.product-section {
  /* BOX NEN RIENG cho MOI section danh muc — theo yeu cau nguoi dung:
     "mỗi section (Toán 12, Toán 11...) cần có khung nền riêng... để
     tách biệt rõ ràng với section kế bên, giống 1 'card' lớn bao
     quanh cả tiêu đề+pill+lưới sản phẩm". TRUOC DAY chi co
     "padding-top" DON THUAN (khong nen/khong bien/khong bo goc) —
     TACH BIET CHI dua vao KHOANG CACH trang, KHONG co RANH GIOI THI
     GIAC RO RANG. GIO them nen trang + border + bo goc + shadow nhe,
     giong 1 khoi card lon — DUNG NGUYEN TAC thiet ke da co san cho
     ".course-card" (shadow tuong tu, xem file nay). */
  padding: var(--space-5) var(--space-5) var(--space-6);
  margin-top: var(--space-4);
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* SUA VAN DE THI GIAC phat hien khi ra soat khoang cach: section
   ".product-section" DAU TIEN nam TRONG "#khoa-hoc" (tuc lop DAU TIEN
   trong vong lap, xem front-page.php) KHONG CAN "margin-top" rieng
   nua — vi TIEU DE "Danh sách theo lớp" (h2.section-heading-center) DA
   dong vai tro "mo dau"/phan tach ngay TRUOC no roi, THEM margin-top
   64px NUA se day section DAU TIEN ra QUA XA khoi tieu de MO TA truc
   tiep no, gay CAM GIAC "troi", khong ro tieu de dang gioi thieu cho
   noi dung nao. CHI loai tru section DAU TIEN — cac section TIEP THEO
   (Toan 11, Toan 10...) VAN GIU margin-top binh thuong de tach biet
   ro voi section TRUOC no. */
#khoa-hoc > .product-section:first-of-type {
  margin-top: 0;
}

/* Khu vuc BAO NGOAI toan bo cac lop ("#khoa-hoc" trong front-page.php)
   — SUA THIEU SOT phat hien khi ra soat toan bo khoang cach trang chu:
   TRUOC DAY HOAN TOAN KHONG co CSS rieng nao cho khu vuc nay — moi
   ".product-section" con ben trong CHI co "padding-top" (khong co
   "padding-bottom"), khien LOP CUOI CUNG (section cuoi trong vong lap)
   DINH SAT vao FOOTER ngay ben duoi, thieu khoang tho can thiet. Them
   "padding-bottom" DUNG BANG khoang cach da dung nhat quan giua cac
   section khac (var(--space-7)) cho DUNG NGUYEN TAC "Khoảng cách giữa
   các section: đồng nhất" (design-prompt.md muc 6.1). */
#khoa-hoc {
  /* padding-top DAM BAO khoang cach NHAT QUAN voi ".hero" phia tren
     (var(--space-7), KHOP DUNG voi khoang cach giua CAC section khac)
     — QUAN TRONG cho truong hop KHONG CO "Gói học nổi bật" (query
     rong, section do KHONG render — xem dieu kien "if" bao quanh no
     trong front-page.php): neu KHONG co padding-top rieng o day, "#khoa-hoc"
     se DINH SAT vao ".hero" (chi con 48px padding-bottom cua chinh
     hero, THAP HON han 64px chuan dung cho MOI cap section khac). */
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.product-section__title {
  font-size: 1.6rem;
  margin-bottom: var(--space-3);
}
.product-section__title .accent { color: var(--color-primary); }

/* Tieu de BAO TRUM "Danh sách theo lớp" — theo yeu cau nguoi dung, dat
   1 LAN DUY NHAT o dau khu vuc "#khoa-hoc" (front-page.php), CAN GIUA
   man hinh — khac voi ".product-section__title" (can TRAI, dung rieng
   cho TUNG lop/danh muc cap 1 ben duoi). To hon 1 chut de the hien vai
   tro "tieu de cha" bao trum toan bo khu vuc, khong bi nham voi tieu
   de con cua tung lop. */
.section-heading-center {
  font-size: 1.9rem;
  text-align: center;
  margin: 0 0 var(--space-5);
}

.filter-pills {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  margin-bottom: var(--space-4);
  scrollbar-width: none;
}
.filter-pills::-webkit-scrollbar { display: none; }

.pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.pill:hover {
  filter: brightness(0.97);
  color: var(--color-text);
}
.pill:active { transform: scale(0.97); }
.pill.is-combo {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: var(--color-bg-white);
  /* SUA LOI THUC TE phat hien khi ra soat toan bo mau sac trang chu:
     "MUA COMBO" LA NUT HANH DONG MUA HANG THAT SU (hien chu "MUA COMBO"
     + gia tien, dan toi trang thanh toan) — theo dung nguyen tac mau
     sac da dinh tu dau du an (design-prompt.md muc 2): "Nút mua #ffb039
     phải là màu DUY NHẤT xuất hiện với vai trò mua hàng trên toàn
     site". TRUOC DAY dung "border: 2px solid var(--color-primary)" (do
     thuong hieu) — SAI nguyen tac, de lan voi cac nut/khoi KHONG PHAI
     mua hang (VD nut dieu huong, tieu de nhan manh...) cung dung mau
     do. Doi sang "--color-cta" (vang cam #ffb039) cho DUNG vai tro. */
  border: 2px solid var(--color-cta);
  font-weight: 700;
}
.pill.is-combo:hover { filter: brightness(1); } /* Ghi de hover chung — khong lam mo/toi khung combo, giu do noi bat. */
.pill__combo-name {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
}
.pill__combo-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  /* Dong bo voi border (xem ".pill.is-combo" o tren) — nen "MUA COMBO"
     GIO cung dung "--color-cta", khong con "--color-primary". Chu DEN
     (khong phai trang) tren nen vang cam — dam bao contrast AA, dung
     nguyen tac da ap dung cho ".btn-cta" (xem design-prompt.md muc 7:
     "kiểm tra kỹ hoặc dùng chữ đen trên nút này"). */
  background: var(--color-cta);
  color: #1a1a1a;
  font-size: 0.8rem;
  white-space: nowrap;
}
.pill__combo-price strong { font-size: 0.9rem; }

@media (max-width: 480px) {
  .pill__combo-name,
  .pill__combo-price { padding: var(--space-1) var(--space-2); }
}
.pill.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.pill.is-active:hover { filter: brightness(1.08); color: #fff; }

/* Grid san pham: 1 mobile / 2 tablet / 4 desktop. La <ul>, moi item la <li>
   (design-prompt.md muc 6.1: grid san pham la 1 danh sach cung loai —
   dung <ul><li> dung ngu nghia HTML thay vi <div> roi rac). */
.product-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--gutter-mobile);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 641px) and (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gutter-desktop); }
}
@media (min-width: 1025px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--gutter-desktop); }
}

.product-grid__item { display: flex; } /* Dam bao <article> ben trong keo day het chieu cao <li>. */
/* Khai bao tuong minh phong ngua — cung nguyen tac da ap dung cho
   .story-overlay/.story-form-overlay (display khai bao truc tiep co the
   "thang the" [hidden] neu khong khai bao ro). Giu lai du hien khong con
   noi nao dat 'hidden' cho .product-grid, phong truong hop dung lai sau. */
.product-grid[hidden] { display: none; }

.product-grid.has-single-center { justify-items: center; }
/* Item cuoi cung tu can giua, chiem tron 1 hang rieng khi grid co du du
   (design-prompt.md muc 6.1: "cho phep card don le can giua o cuoi grid"). */
.product-grid.has-single-center .product-grid__item:last-child {
  grid-column: 1 / -1;
  max-width: 320px;
}

/* =========================================================
   CARD KHOA HOC — 1 component duy nhat dung khap site
   ========================================================= */
.course-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.course-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.course-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.course-card:hover .course-card__thumb img { transform: scale(1.05); }
.course-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--color-secondary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.course-card__badge.is-new {
  background: var(--color-accent);
  left: auto;
  right: var(--space-2);
}
/* Badge "Đã mở khoá" — mau XANH LA rieng biet, khac han is-new (cam) va
   badge mac dinh (xanh duong), de PHAN BIET ro rang trang thai "da so
   huu" voi cac trang thai khac. Neu ca 2 dieu kien is-owned/is-new deu co
   the dung (VD khoa MOI TAO va nguoi dung MOI MUA), template CHI hien 1
   trong 2 (uu tien is-owned) — xem template-parts/course-card.php,
   course-card-list.php. */
.course-card__badge.is-owned {
  background: #16a34a;
  left: auto;
  right: var(--space-2);
}
/* Note "Đã mở khoá" thay the vi tri gia trong footer khi da so huu — xem
   template-parts/course-card.php, course-card-list.php. Container GIU
   display:flex de icon+text nam ngang; rieng THE <span> BEN TRONG chua
   text (khong phai chinh no) moi ap dung ellipsis — vi 'text-overflow:
   ellipsis' CHI hoat dong dung tren noi dung TEXT truc tiep, KHONG "nhin
   xuyen" qua cac flex children (icon + span) neu ap thang len chinh
   container flex. */
.course-card__owned-note {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-weight: 600;
  font-size: 0.85rem;
  min-width: 0; /* Cho phep flex item nay co lai nho hon noi dung, thay vi ep tran ra ngoai. */
  flex: 1 1 auto;
}
.course-card__owned-note .dashicons { font-size: 18px; width: 18px; height: 18px; flex: 0 0 auto; }
.course-card__owned-note span:not(.dashicons) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.course-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.course-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
/* Mau chu RIENG cho tieu de khoa hoc — theo yeu cau nguoi dung: "các
   title ở khoá học thành màu đen, khi di chuột vào thì đổi màu đỏ như
   hiện tại". GHI DE lai CSS "a" toan cuc (mac dinh mau xanh duong
   --color-secondary, hover mau hong --color-accent, xem dau file nay)
   — CHI rieng tieu de khoa hoc doi sang den/do, KHONG anh huong cac
   link khac tren site. */
.course-card__title a {
  color: var(--color-text);
}
.course-card__title a:hover {
  color: var(--color-primary);
}
.course-card__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.course-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: nowrap; /* SUA LOI thuc te tren mobile: khai bao TUONG MINH khong cho xuong dong, tranh badge/note va nut CTA bi tach thanh 2 hang roi rac khi man hinh qua hep. */
}
.course-card__footer .btn {
  flex: 0 0 auto; /* Nut LUON giu nguyen kich thuoc, khong bi co lai — uu tien hien du chu "Học tiếp". */
}
.course-card__price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
}
.course-card__price .old {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-weight: 400;
  display: block;
}

/* =========================================================
   TRANG DANH MUC — Xem taxonomy-danh_muc.php.
   CSS ".danh-muc-noi-bat" / "__title" / "__desc" DA XOA — sau khi thiet
   ke lai trang danh muc, khoi "Gói học nổi bật" dung chung the nen
   ".product-section" va tieu de ".dm-section__title" voi cac khoi khac
   (xem cuoi khoi nay). CHI GIU LAI "__scroll" ben duoi vi hang cuon
   ngang van dung nguyen co che cu.
   ========================================================= */
.danh-muc-noi-bat__scroll {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}
/* Card ben trong khu cuon ngang can CHIEU RONG CO DINH (khong duoc
   flex-shrink het ve 0) vi ".product-grid__item" mac dinh khong co
   width rieng khi dung trong 1 hang GRID — o day dung FLEX ngang nen
   can khai bao lai.
   SUA LOI THUC TE nguoi dung phat hien ("ảnh lệch... box khoá học với
   box quiz ở danh mục lệch nhau") — TRUOC DAY "280px" CO DINH tren MOI
   kich thuoc man hinh, khien card khoa hoc (280px) HEP HON NHIEU so
   voi card quiz (chiem TRON 1 cot cua CSS Grid, TU DONG lap day chieu
   rong container) tren MOBILE. Nguoi dung XAC NHAN LAI (sau khi thu
   85%): "cho nó bằng với quiz luôn đi" — GIO card khoa hoc chiem TRON
   100% chieu rong tren mobile, KHOP CHINH XAC bang voi card quiz (thay
   vi 85% co gap-y cuon nhu ban dau).
   DESKTOP — nguoi dung XAC NHAN THEM: "tối ưu chiều rộng bằng với quiz
   ở desktop nữa kìa" — TRUOC DAY van GIU "280px" CO DINH tren desktop,
   KHONG KHOP CHINH XAC voi 1 COT cua ".quiz-grid" (Grid 4 cot, xem duoi
   trong file nay). Dung CONG THUC "calc()" TUONG DOI thay vi so PX CO
   DINH — CT chuan cho 1 cot trong Grid N cot, gap G la:
   "(100% - (N-1)*G) / N". Voi N=4 cot, gap="var(--space-4)"=24px:
   "calc((100% - 72px) / 4)" — CONG THUC NAY tu dong KHOP DUNG 1 cot
   quiz o MOI kich thuoc container (khong chi rieng 1 do rong man hinh
   cu the), vi CA HAI (Flexbox card nay VA CSS Grid cua quiz) DEU nam
   trong CUNG 1 ".container" (cung do rong tong the). */
.danh-muc-noi-bat__scroll .product-grid__item {
  flex: 0 0 100%;
}
/* QUAN TRONG — ".quiz-grid" (doi chieu) co DUNG 3 MOC, KHONG PHAI 2:
   <640px (1 cot), 640-1024px (2 cot), >=1025px (4 cot). Lan sua DAU
   TIEN chi co 2 muc (100% / 4 cot tu 641px), BO SOT khoang TABLET
   (641-1024px) — o do quiz dang la 2 COT nhung card khoa hoc lai tinh
   theo CONG THUC 4 cot, VAN LECH NHAU trong chinh khoang do. Sua du 3
   moc de KHOP CHINH XAC O MOI kich thuoc man hinh, khong con khoang
   nao bi sot. */
@media (min-width: 640px) and (max-width: 1024px) {
  .danh-muc-noi-bat__scroll .product-grid__item {
    flex: 0 0 calc((100% - 24px) / 2); /* Tablet — khop 2 cot cua quiz-grid, 1 gap duy nhat giua 2 cot. */
  }
}
@media (min-width: 1025px) {
  .danh-muc-noi-bat__scroll .product-grid__item {
    flex: 0 0 calc((100% - 72px) / 4); /* Desktop — khop 4 cot cua quiz-grid, 3 gap giua 4 cot. */
  }
}

/* --- HERO trang danh muc ---
   Nen SANG co LE DO + luoi o ly (motif "vo o ly" dung xuyen suot site).
   NHE HON hero trang khoa hoc (gradient dam) — vi day la trang DUYET/
   CHON, khong phai trang BAN: de nguoi dung tap trung quet noi dung,
   khong bi mau sac lan at. */
.dm-page { padding-bottom: var(--space-7); }
.dm-hero {
  position: relative;
  overflow: hidden;
  margin: var(--space-4) 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-white);
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: var(--shadow-card);
}
/* LE DO — duong ke doc sat mep trai, dung nhu le trong vo hoc sinh. */
.dm-hero::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--grad-hot);
  opacity: 0.5;
  pointer-events: none;
}
@media (max-width: 640px) {
  .dm-hero {
    padding: var(--space-4) var(--space-3) var(--space-4) var(--space-5);
  }
  .dm-hero::before { left: 12px; }
}
.dm-hero__title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
@media (max-width: 640px) {
  .dm-hero__title { font-size: 1.5rem; }
}
.dm-hero__desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  max-width: 68ch;
  margin: 0;
}
/* Dai SO LIEU — hoc sinh vao danh muc can biet NGAY o day co bao nhieu
   noi dung, truoc day phai cuon het trang moi doan duoc. */
.dm-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px dashed var(--color-border);
}
.dm-stat__num {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* So to gradient — diem nhan mau duy nhat cua hero nay. */
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.dm-stat__label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* --- Thanh dieu huong chuyen muc con --- */
.dm-subnav {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  scrollbar-width: none;
}
.dm-subnav::-webkit-scrollbar { display: none; }

/* --- Dau muc cua tung khoi noi dung --- */
.dm-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.dm-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  padding-left: var(--space-3);
  /* Thanh gradient DOC ben trai — dong bo voi tieu de o trang khoa hoc. */
  border-left: 4px solid transparent;
  border-image: var(--grad-hot) 1;
}
.dm-section__title .dashicons { color: #f59e0b; }
.dm-section__sub {
  width: 100%;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: 0;
}
.dm-section__count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* --- Trang thai RONG --- */
.dm-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.dm-empty .dashicons {
  font-size: 40px;
  width: 40px;
  height: 40px;
  color: var(--color-border);
}
.dm-empty__title {
  font-weight: 700;
  font-size: 1rem;
  margin: var(--space-3) 0 4px;
}
.dm-empty__desc {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

/* Danh sach dang LIST — moi item la 1 hang ngang (anh trai, noi dung
   giua, gia+nut phai). */
.course-list { list-style: none; margin: 0; padding: 0; }
.course-list__item + .course-list__item { margin-top: var(--space-3); }

.course-list-card {
  display: flex;
  gap: var(--space-4);
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  align-items: center;
}
.course-list-card__thumb {
  position: relative;
  flex: 0 0 240px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
}
.course-list-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-list-card__body {
  flex: 1 1 auto;
  min-width: 0; /* Cho phep text-overflow/wrap hoat dong dung trong flex item. */
}
.course-list-card__title {
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.course-list-card__title a { color: var(--color-text); }
.course-list-card__excerpt {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-list-card__side {
  flex: 0 0 auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}
.course-list-card__price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Bo cuc MOBILE: anh nam TREN (full-width), tieu de + noi dung o GIUA,
     gia/nut o DUOI CUNG — 3 HANG xep DOC, khac han desktop (anh trai -
     noi dung phai, xep NGANG). Dung GRID 1 COT + 3 HANG ro rang, thay vi
     co gang giu bo cuc ngang cua desktop tren man hinh hep (gay chat
     choi, kho doc). */
  .course-list-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "thumb"
      "body"
      "side";
    gap: var(--space-2);
  }
  .course-list-card__thumb {
    grid-area: thumb;
    flex-basis: auto; /* Reset gia tri flex-basis cu (140px) — khong con y nghia trong ngu canh grid. */
    aspect-ratio: 16 / 9; /* Anh full-width can 1 ti le ro rang, tranh qua cao/qua det tuy kich thuoc goc cua tung anh. */
  }
  .course-list-card__body {
    grid-area: body;
    flex: none; /* Reset flex cu — khong con y nghia trong ngu canh grid. */
  }
  .course-list-card__side {
    grid-area: side;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

/* =========================================================
   DANH SACH QUIZ (trang danh muc) — LUOI (GRID) co THUMBNAIL, theo
   yeu cau nguoi dung: "list quiz tôi muốn chia thành 4 cột, 1 cột là
   1 quiz có thumnail, title quiz, lượt thi, nút làm bài". THAY THE
   hoan toan kieu LIST don gian (khong anh) truoc do. 4 COT CHI ap
   dung tren DESKTOP — tablet/mobile TU DONG giam cot (hieu ngam dinh
   thong thuong, nguoi dung xac nhan). Xem
   template-parts/quiz-card-list.php, taxonomy-danh_muc.php.
   ========================================================= */
.quiz-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr; /* Mac dinh 1 cot (mobile) — MOBILE-FIRST, mo rong dan len qua media query duoi. */
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .quiz-grid { grid-template-columns: repeat(2, 1fr); } /* Tablet — 2 cot. */
}
@media (min-width: 1025px) {
  .quiz-grid { grid-template-columns: repeat(4, 1fr); } /* Desktop — DUNG 4 cot theo yeu cau. */
}

.quiz-grid-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.quiz-grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.quiz-grid-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.quiz-grid-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quiz-grid-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.quiz-grid-card__title {
  font-size: 1rem;
  margin: 0 0 6px;
  /* GIOI HAN 3 dong — ten quiz dai KHONG lam vo chieu cao card, giu
     CAC CARD trong CUNG 1 hang DONG DEU nhau. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quiz-grid-card__title a { color: var(--color-text); }
.quiz-grid-card__title a:hover { color: var(--color-primary); }
.quiz-grid-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.quiz-grid-card__meta .dashicons { font-size: 16px; width: 16px; height: 16px; }
.quiz-grid-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
/* Icon trai tim (luot yeu thich) — mau do NHE de goi lien tuong "yeu
   thich", khac biet voi 2 icon con lai (mau xam trung tinh mac dinh
   theo "color" cua ".quiz-grid-card__meta" cha). */
.quiz-grid-card__meta-item .dashicons-heart {
  color: var(--color-accent);
}
.quiz-grid-card__btn {
  margin-top: auto; /* DAY nut xuong DAY card — dam bao nut LUON o cuoi du title dai/ngan khac nhau giua cac card. */
  width: 100%;
  text-align: center;
}

/* Phan trang ("nav.pagination", dung "paginate_links()" mac dinh
   WordPress cho danh sach quiz o tren) — THEO YEU CAU nguoi dung can
   phan trang, nhung CHUA co CSS san nao trong theme cho pagination
   (kiem tra: "the_posts_pagination()" cung dung o 4 file khac nhung
   TU TRUOC DEN GIO CHUA TUNG co CSS rieng — thieu sot co san, ngoai
   pham vi lan sua nay). Them style co ban cho CHINH class MOI tao o
   day, tranh hien tho xau ngay tu dau. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.9rem;
}
.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.pagination .page-numbers.dots {
  border: none;
}
a.page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* =========================================================
   BADGE MUC DO (4 muc) — dung chung
   ========================================================= */
.level-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.level-badge[data-level="nhan_biet"] { color: #0c93f4; border-color: #0c93f4; }
.level-badge[data-level="thong_hieu"] { color: #22c55e; border-color: #22c55e; }
.level-badge[data-level="van_dung"] { color: #ec407a; border-color: #ec407a; }
.level-badge[data-level="van_dung_cao"] { color: #fa003c; border-color: #fa003c; }

/* =========================================================
   ACCORDION CHUONG/BAI — 1 style duy nhat
   ========================================================= */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}
.accordion__item + .accordion__item { border-top: 1px solid var(--color-border); }
.accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--color-bg-white);
  border: none;
  text-align: left;
  font-weight: 600;
}
.accordion__header .chevron { transition: transform 0.2s ease; }
.accordion__header[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.accordion__panel {
  display: none;
  padding: 0 var(--space-3) var(--space-3);
  background: var(--color-bg);
  list-style: none;
  margin: 0;
}
.accordion__panel.is-open { display: block; }
.accordion__lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: 0.9rem;
  border-top: 1px solid var(--color-border);
}
.accordion__lesson:first-child { border-top: none; }
.accordion__lesson .locked { color: var(--color-text-muted); }
.accordion__lesson .free-badge {
  font-size: 0.65rem;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  padding: 1px 6px;
}

/* =========================================================
   PROGRESS BAR — mau #0c93f4
   ========================================================= */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: var(--color-secondary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* =========================================================
   QUIZ INTERFACE — toi gian, it phan tam
   ========================================================= */
.quiz-wrap { max-width: 820px; padding: var(--space-4) var(--gutter-mobile) 190px; flex: 1 1 auto; min-width: 0; }

/* =========================================================
   KHUNG LAYOUT CONG CU THI — "Nháp" (canvas ve tay), theo yeu cau
   nguoi dung: "chia đôi màn hình thi ra bên trái là phần thi, bên
   phải là nháp cho phép nhập vẽ các thứ". Tinh nang "Máy tính" (tung
   them, mo phong fx-570ES Plus) DA BI BO HAN theo yeu cau nguoi dung:
   "thôi bỏ máy tính đi nhé, để lại nháp thôi" — CHI CON 2 TRANG THAI:
     - KHONG bat Nhap: 1 cot, ".quiz-wrap" giu nguyen max-width 720px
       CAN GIUA nhu binh thuong.
     - BAT Nhap: 2 cot, TY LE 50/50 (CO THE KEO DOI qua thanh chia
       ".quiz-tools-divider", xem initToolsResizer() trong
       assets/js/quiz-engine.js).
   CHI ap dung DESKTOP (>=1025px) — MOBILE dung layout XEP CHONG (xem
   media query rieng ben duoi), theo yeu cau nguoi dung: "áp dụng cả
   desktop lẫn mobile - cần thiết kế riêng cho màn hình nhỏ".
   ========================================================= */
@media (min-width: 1025px) {
  /* KHONG bat Nhap — GIU NGUYEN hanh vi CU (".quiz-wrap" CAN GIUA,
     max-width 720px) — class ".has-nhap" do JS TU DONG THEM/BOT tren
     ".quiz-tools-layout" tuy trang thai (xem
     capNhatTrangThaiCongCuChung() trong assets/js/quiz-engine.js). */
  .quiz-tools-layout {
    display: flex;
    justify-content: center;
    width: 100%;
    /* "width: 100%" MOT MINH chua du: flex item van co "min-width:
       auto" nen noi dung rong bat thuong (bang lon, cong thuc dai) van
       co the day rong no vuot qua 100%. */
    min-width: 0;
  }
  .quiz-tools-layout:not(.has-nhap) .quiz-wrap {
    /* 720px -> 820px theo yeu cau nguoi dung ("cho box câu hỏi rộng ra
       xíu"). PHAI sua O DAY chu khong chi sua rule goc ".quiz-wrap" —
       selector nay co do dac hieu (0,3,0), CAO HON rule goc (0,1,0)
       nen no moi la cai QUYET DINH be rong thuc te tren desktop. */
    max-width: 820px;
  }
  /* Nhap dang BAT — ".quiz-wrap" KHONG con gioi han 720px nua (se
     CHIA se khong gian voi panel Nhap theo flex-basis dong, xem duoi),
     VA ".quiz-tools-layout" GIAN SAT 2 BEN thay vi can giua (giong
     nguyen tac ".quiz-layout" da ap dung o cap ngoai). */
  .quiz-tools-layout.has-nhap .quiz-wrap {
    max-width: none;
  }
  .quiz-tools-layout.has-nhap {
    justify-content: flex-start;
    padding: 0 var(--gutter-desktop);
  }

  /* TY LE MAC DINH 50/50 — dung bien CSS RIENG cho MOI cot (JS doi GIA
     TRI bien nay khi nguoi dung KEO thanh chia, xem initToolsResizer())
     — "flex-basis" doc bien, KHONG hardcode % truc tiep, de JS chi can
     doi 1 GIA TRI DUY NHAT ma khong phai tinh toan lai CSS phuc tap. */
  .quiz-tools-layout.has-nhap .quiz-wrap {
    flex: 1 1 var(--ntc-wrap-width, 50%);
  }
  .quiz-tools-layout.has-nhap .quiz-nhap-panel-v2 {
    flex: 1 1 var(--ntc-nhap-width, 50%);
  }

  /* Chieu cao — panel Nhap cao BANG ".quiz-wrap" (100% chieu cao khung
     nhin con lai sau topbar/sticky-footer), CUON RIENG neu noi dung
     dai hon khung nhin — giong nguyen tac panel doan van truoc day. */
  .quiz-tool-panel {
    height: calc(100vh - 52px - 96px); /* Uoc luong: 52px topbar + 96px sticky-footer, giong cach tinh da dung cho panel doan van truoc day. */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }
}
/* AN HOAN TOAN panel Nhap + thanh chia neu TRANG THAI dang TAT — CSS
   "[hidden]" attribute da du (khong can class rieng), nhung THEM
   "!important" cho CHAC CHAN neu co xung dot voi "display:flex" cua
   ".quiz-tool-panel" o tren (do dac hieu [hidden] mac dinh CO THE bi
   ghi de boi cac rule "display" khac tuy thu tu trinh duyet ap dung). */
.quiz-tool-panel[hidden],
.quiz-tools-divider[hidden] {
  display: none !important;
}

/* Thanh CHIA giua cac cot — TAI SU DUNG y het co che cua thanh chia
   doan van truoc day (da xoa, gio dung lai cho cong cu thi). */
.quiz-tools-divider {
  display: none;
}
@media (min-width: 1025px) {
  .quiz-tools-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 1px;
    cursor: col-resize;
    background: var(--color-border);
    user-select: none;
    touch-action: none;
  }
  .quiz-tools-divider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    right: -6px;
  }
  .quiz-tools-divider:hover,
  .quiz-tools-divider.is-dragging {
    background: var(--color-secondary);
  }
  .quiz-tools-divider__icon {
    font-size: 14px;
    color: var(--color-text-muted);
    pointer-events: none;
  }
  .quiz-tools-divider:hover .quiz-tools-divider__icon,
  .quiz-tools-divider.is-dragging .quiz-tools-divider__icon {
    color: #fff;
  }
}

/* Header CHUNG cho ca 2 panel (Nhap + May tinh) — tieu de + (rieng
   Nhap) thanh cong cu but/tay xoa/mau/xoa het. */
.quiz-tool-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0; /* KHONG co RUT NHO khi noi dung ben duoi (canvas/may tinh) can nhieu khong gian — header LUON giu DU chieu cao hien thi het chu/nut. */
}
.quiz-tool-panel__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}

/* =========================================================
   PANEL "NHÁP" — canvas VE TAY (but/tay xoa/mau/xoa het), theo yeu
   cau nguoi dung: "cho phép nhập vẽ các thứ". Xem
   initNhapCanvas() trong assets/js/quiz-engine.js.
   ========================================================= */
.quiz-nhap-panel-v2__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.quiz-nhap-panel-v2__tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  cursor: pointer;
}
.quiz-nhap-panel-v2__tool-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.quiz-nhap-panel-v2__tool-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.quiz-nhap-panel-v2__color-label {
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
}
.quiz-nhap-panel-v2__color-label input[type="color"] {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
}
.quiz-nhap-panel-v2__canvas-wrap {
  flex: 1 1 auto;
  min-height: 0; /* Cho phep flex item CO GIAN NHO HON noi dung ben trong (canvas), can thiet de "flex:1" hoat dong dung trong flex column. */
  position: relative;
  overflow: hidden;
  background: #fff; /* Nen TRANG CO DINH cho canvas (khong doi theo dark mode neu co sau nay) — giay nhap luon can nen sang de but mau/den de thay ro. */
}
#ntc-nhap-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none; /* Ngan trinh duyet CUON/ZOOM khi ve bang ngon tay tren cam ung — BAT BUOC de ve muot, khong bi giat do cu chi mac dinh cua trinh duyet can thiep. */
}

/**
 * Toan bo khoi CSS ".quiz-calculator*" (mo phong may tinh Casio
 * fx-570ES Plus) DA BI XOA HAN — theo yeu cau nguoi dung: "thôi bỏ máy
 * tính đi nhé, để lại nháp thôi". Panel "Nháp" (canvas ve tay) van GIU
 * NGUYEN, xem CSS ".quiz-nhap-panel-v2*" trong file nay.
 */

/* MOBILE (duoi 1025px) — theo yeu cau nguoi dung: "áp dụng cả desktop
   lẫn mobile - cần thiết kế riêng cho màn hình nhỏ". KHONG THE chia
   COT NGANG nhu desktop (man hinh qua hep) — XEP CHONG DOC: de thi
   TREN CUNG, panel Nhap hien NGAY BEN DUOI khi BAT (full-width), CUON
   DOC binh thuong theo dong chay trang (KHONG dung position:fixed/
   overlay — khac han panel bang cau hoi ".quiz-grid-panel", vi Nhap
   can THAO TAC SONG SONG voi xem de, khong phai xem-roi-dong nhu bang
   cau hoi). Thanh chia (chi co y nghia KEO NGANG) AN HOAN TOAN tren
   mobile — khong the "keo" khi xep DOC. */
@media (max-width: 1024px) {
  .quiz-tools-layout {
    display: flex;
    flex-direction: column;
    /* SUA LOI nguoi dung bao: "chiều rộng đang bị tràn ra 2 bên màn
       hình". NGUYEN NHAN: ".quiz-tools-layout" la 1 FLEX ITEM cua
       ".quiz-layout" (cha co "display:flex; justify-content:center").
       Ban DESKTOP co "width: 100%" nhung ban MOBILE nay THIEU — nen no
       tu co gian theo NOI DUNG (max-content). Nang hon: flex item mac
       dinh co "min-width: auto", tuc KHONG THE co lai duoi kich thuoc
       noi tai; khi noi dung rong hon man hinh, no phinh ra VA vi cha
       dang CAN GIUA nen phan thua tran DEU RA CA HAI BEN — dung dau
       hieu nguoi dung mo ta.
       "width: 100%" ghim dung be rong man hinh, "min-width: 0" cho
       phep co lai khi noi dung ben trong rong bat thuong. */
    width: 100%;
    min-width: 0;
  }
  .quiz-tools-divider {
    display: none !important;
  }
  .quiz-tool-panel {
    /* Chieu cao CO DINH (khong phai 100vh nhu desktop, vi GIO nam
       TRONG dong chay cuon DOC cua trang, khong phai canh ".quiz-wrap"
       theo chieu ngang) — 400px DU DUNG de ve thoai mai ma khong
       chiem QUA NHIEU khong gian so voi de thi ben tren. */
    height: 400px;
    overflow-y: auto;
    margin-top: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
  }
}
@media (max-width: 480px) {
  /* Man hinh RAT hep — GIAM chieu cao panel MOT CHUT. */
  .quiz-tool-panel {
    height: 320px;
  }
}

/* Padding NGANG GIAM xuong 4px CHI tren MOBILE (duoi 900px) — theo yeu
   cau nguoi dung "toàn bộ max width mobile... padding ngang thành
   4px". GIU NGUYEN 16px cho DESKTOP (rule goc o tren ap dung DEFAULT
   cho moi kich thuoc, o day CHI ghi de rieng pham vi mobile). */
@media (max-width: 899px) {
  .quiz-wrap {
    padding-left: var(--gutter-mobile-tight);
    padding-right: var(--gutter-mobile-tight);
  }
}
/**
 * CSS ".quiz-wrap.has-doan-van" (mo rong max-width khi co doan van dung
 * chung) DA BI XOA HAN — HTML tuong ung KHONG con ton tai (da bo theo
 * yeu cau nguoi dung: "bỏ những gì liên quan tới văn, và tiếng anh luôn
 * đi nhé"). ".quiz-wrap" GIO LUON la 720px, khong con class dieu kien.
 */

/* =========================================================
   TOP BAR — 1 HANG DUY NHAT (Thoat + logo + ten de + dong ho + Ẩn đáp
   án + Nháp), khop dung anh mau DOL THPT nguoi dung cung cap. Xem
   single-quiz.php.
   ========================================================= */
.quiz-topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
}
.quiz-topbar__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.quiz-topbar__close:hover { border-color: var(--color-primary); color: var(--color-primary); }
.quiz-topbar__close .dashicons { font-size: 16px; width: 16px; height: 16px; }
.quiz-topbar__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.quiz-topbar__logo img { height: 28px; width: auto; display: block; }
.quiz-topbar__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Tang co chu tren DESKTOP cho bang nut chuyen cau (0.95rem) — theo
   yeu cau nguoi dung: "tên quiz cũng to thêm nữa". CHI desktop, dong
   bo voi cac thanh phan khac da sua (".quiz-grid-legend",
   ".quiz-info-text", ".quiz-phan-progress__label/__count",
   ".quiz-topbar__btn"). */
@media (min-width: 1025px) {
  .quiz-topbar__title {
    font-size: 0.95rem;
  }
}
.quiz-topbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.quiz-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.quiz-timer .dashicons { font-size: 16px; width: 16px; height: 16px; }
/* Dong ho doi mau CAM/DO + NHAY nhe khi CON 10 PHUT cuoi (che do Thi
   dau) — xem hienCanhBaoSapHetGio() trong assets/js/quiz-engine.js,
   tin hieu THI GIAC LIEN TUC (khac thong bao noi CHI hien 6 giay roi
   tu bien mat) de nguoi lam bai LUON de y con it thoi gian, ke ca sau
   khi thong bao da bien mat. */
.quiz-timer.is-sap-het-gio {
  color: #dc2626;
  animation: ntc-timer-nhay 1s ease-in-out infinite;
}
@keyframes ntc-timer-nhay {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Thong bao noi "Còn 10 phút" — TU BIEN MAT sau 6 giay (xem
   hienCanhBaoSapHetGio()), z-index CAO HON CA man hinh chon che do
   (70) — mac du man hinh do da bi XOA truoc khi thong bao nay co the
   xuat hien (chi xuat hien SAU KHI da chon che do Thi dau va bat dau
   dem nguoc), z-index cao van la thoi quen AN TOAN, tranh bi che khuat
   boi bat ky overlay nao khac co the them sau nay. */
.quiz-canh-bao-hetgio {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #dc2626;
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
  animation: ntc-canhbao-vao 0.25s ease-out;
}
.quiz-canh-bao-hetgio .dashicons { font-size: 18px; width: 18px; height: 18px; }
@keyframes ntc-canhbao-vao {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.quiz-topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}
/* Tang co chu tren DESKTOP cho bang nut chuyen cau (0.95rem) — theo
   yeu cau nguoi dung: "nháp... to thêm bằng với text chuyển câu".
   CHI desktop. */
@media (min-width: 1025px) {
  .quiz-topbar__btn {
    font-size: 0.95rem;
  }
}
.quiz-topbar__btn:hover { background: var(--color-bg); color: var(--color-text); }
.quiz-topbar__btn.is-active { color: var(--color-primary); background: rgba(250, 0, 60, 0.06); }
.quiz-topbar__btn .dashicons { font-size: 16px; width: 16px; height: 16px; }
/* Tren mobile hep — an bot chu, chi giu icon, tranh tran ngang. */
@media (max-width: 640px) {
  .quiz-topbar__btn-text { display: none; }
  .quiz-topbar__title { font-size: 0.8rem; }
}

/**
 * CSS ".quiz-topbar__btn--desktop-only"/".quiz-topbar__btn--mobile-only"
 * VA toan bo ".quiz-topbar__dropdown*" (menu "Công cụ" gop Nhap+May
 * tinh tren mobile) DA BI XOA HAN — theo yeu cau nguoi dung: "thôi bỏ
 * máy tính đi nhé, để lại nháp thôi". CHI CON 1 nut "Nháp" duy nhat,
 * hien CHO CA desktop LAN mobile (khong con can phan biet responsive
 * phuc tap, xem single-quiz.php).
 */

/* =========================================================
   MAN HINH CHON CHE DO — overlay CHE PHU TOAN MAN HINH, hien NGAY khi
   trang tai xong (xem single-quiz.php, initModeSelectionScreen() trong
   assets/js/quiz-engine.js). Z-INDEX CAO NHAT toan trang (70) — cao hon
   ca nut Thoat (50)/panel cau hoi noi (60), dam bao KHONG the tuong tac
   voi bat ky thanh phan nao khac cho toi khi chon xong che do.
   ========================================================= */
/* =========================================================
   MAN HINH CHON CHE DO — THIET KE LAI (theo yeu cau nguoi dung: "làm
   lại giao diện chọn loại thi quiz").

   VAN DE CU: 2 the "Luyện tập" / "Thi đấu" trong GIONG HET NHAU (cung
   nen trang, cung vien, chi khac icon + mau nut) — hoc sinh phai DOC
   HET moi phan biet duoc. GIO 2 the DOI LAP RO RANG ngay tu cai nhin
   dau tien:
     - "Luyện tập" = nen SANG, tong XANH — khong ap luc, xem duoc dap an.
     - "Thi đấu"  = nen GRADIENT DO — cang thang, tinh gio, khong xem
       dap an. Mau do bao hieu "vao that" dung nhu phong thi.
   THEM ngu canh: ten de + so cau — hoc sinh biet minh SAP LAM GI truoc
   khi chon, truoc day chi co moi dong "Chọn chế độ làm bài".
   ========================================================= */
.quiz-mode-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
  /* Nen giay o ly + quang sang do — dong bo motif "vo o ly" dung xuyen
     suot site (xem "body" o dau file). */
  background-color: var(--color-bg);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(250, 0, 60, 0.10) 0%, transparent 70%),
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px, 22px 22px;
  background-repeat: no-repeat, repeat, repeat;
}
.quiz-mode-screen__box {
  width: 100%;
  max-width: 880px;
}
.quiz-mode-screen__head {
  text-align: center;
  margin-bottom: var(--space-5);
}
.quiz-mode-screen__title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.quiz-mode-screen__quiz {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.quiz-mode-screen__count {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

/* 2 the xep DOC tren mobile, CANH NHAU tu 768px. Neu quiz CHUA thiet
   lap thoi gian lam bai thi chi con 1 the "Luyện tập" — Grid tu dan
   het chieu rong, KHONG bi lech/trong 1 nua. */
.quiz-mode-screen__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .quiz-mode-screen__cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

.quiz-mode-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.quiz-mode-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  background: var(--grad-cool);
  color: #fff;
}
.quiz-mode-card__icon .dashicons { font-size: 26px; width: 26px; height: 26px; }
.quiz-mode-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 var(--space-3);
}
.quiz-mode-card__list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Day nut CTA xuong DUOI CUNG, du 2 the co so dong mo ta khac nhau —
     dam bao 2 nut nam CUNG 1 HANG khi dat canh nhau tren desktop. */
  flex: 1 1 auto;
}
.quiz-mode-card__list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.quiz-mode-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-secondary);
  font-weight: 800;
}
/* Nut bat dau — KHONG dung ".btn-cta" (mau vang cam) nua: theo
   design-prompt.md muc 2, mau vang cam la mau DANH RIENG cho hanh dong
   MUA HANG, khong duoc dung cho viec khac keo lam mat do nhan dien cua
   nut mua. Day la loi cua ban CU da duoc sua lai o day. */
.quiz-mode-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--cta-height-mobile);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--grad-cool);
  color: #fff;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.quiz-mode-card__cta:hover { filter: brightness(1.08); }
.quiz-mode-card__cta:active { transform: translateY(1px); }

/* --- THE "THI ĐẤU" — doi lap hoan toan: nen gradient DO, chu trang.
   Bao hieu "vao that", cang thang nhu phong thi. --- */
.quiz-mode-card[data-mode="thi"] {
  border-color: transparent;
  color: #fff;
  background-color: var(--color-primary);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, #fa003c, #ec407a);
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: 0 12px 32px rgba(250, 0, 60, 0.3);
}
.quiz-mode-card[data-mode="thi"] .quiz-mode-card__icon {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.quiz-mode-card[data-mode="thi"] .quiz-mode-card__title { color: #fff; }
.quiz-mode-card[data-mode="thi"] .quiz-mode-card__list li { color: rgba(255, 255, 255, 0.9); }
.quiz-mode-card[data-mode="thi"] .quiz-mode-card__list li::before { color: #fff; }
/* Nut tren nen do — dao nguoc thanh nen TRANG chu DO, tuong phan manh
   nhat co the tren nen gradient. */
.quiz-mode-card[data-mode="thi"] .quiz-mode-card__cta {
  background: #fff;
  color: var(--color-primary);
}

/**
 * CSS ".quiz-nhap-panel" (textarea don gian) DA BI XOA HAN — theo yeu
 * cau nguoi dung: "chia đôi màn hình thi ra bên trái là phần thi, bên
 * phải là nháp cho phép nhập vẽ các thứ". Panel "Nháp" MOI dung class
 * ".quiz-nhap-panel-v2" (canvas ve tay), xem CSS rieng o
 * ".quiz-tools-layout" trong file nay.
 */

/* =========================================================
   MAN HINH KET QUA CHI TIET — hien sau khi nop bai (xem
   buildKetQuaSummary() trong assets/js/quiz-engine.js). Thay THE HOAN
   TOAN cho summary viet TAY qua "style" inline truoc day.
   ========================================================= */
/* ".quiz-summary" gio la PHAN TU CON ben trong "#ntc-quiz-result-main"
   (KHONG con tu dung rieng full-width nhu truoc — xem
   buildKetQuaMainTop() trong assets/js/quiz-engine.js), nen KHONG can
   max-width/margin rieng nua — TU DONG ke thua chieu rong tu cha
   (".quiz-result-main", xem CSS duoi). */
.quiz-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.quiz-summary__diem-box {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Vong tron diem THANG 10 — mau doi theo muc diem (xanh/vang/do), khop
   dung anh mau. Dung border thay vi SVG (don gian hon, khong can ve
   dong cung tron rieng vi day KHONG PHAI bieu do ty le, chi la khung
   tron trang tri chua con so). */
.quiz-summary__diem-vongtron {
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 8px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.quiz-summary__diem-vongtron.is-xanh { border-color: #16a34a; }
.quiz-summary__diem-vongtron.is-vang { border-color: #eab308; }
.quiz-summary__diem-vongtron.is-do { border-color: var(--color-primary); }
.quiz-summary__diem-so {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
}
.quiz-summary__diem-vongtron.is-xanh .quiz-summary__diem-so { color: #16a34a; }
.quiz-summary__diem-vongtron.is-vang .quiz-summary__diem-so { color: #b45309; }
.quiz-summary__diem-vongtron.is-do .quiz-summary__diem-so { color: var(--color-primary); }
.quiz-summary__diem-donvi {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.quiz-summary__diem-info {
  flex: 1 1 200px;
  min-width: 0;
}
.quiz-summary__diem-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}
.quiz-summary__diem-full {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.quiz-summary__diem-note {
  font-size: 0.85rem;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.quiz-summary__diem-note.is-xanh { background: rgba(22, 163, 74, 0.08); color: #15803d; }
.quiz-summary__diem-note.is-vang { background: rgba(234, 179, 8, 0.1); color: #a16207; }
.quiz-summary__diem-note.is-do { background: rgba(250, 0, 60, 0.06); color: var(--color-primary); }

.quiz-summary__so-sanh {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: var(--space-2);
}
.quiz-summary__so-sanh.is-tang { color: #16a34a; }
.quiz-summary__so-sanh.is-giam { color: var(--color-primary); }
.quiz-summary__so-sanh.is-khong-doi { color: var(--color-text-muted); }
.quiz-summary__so-sanh .dashicons { font-size: 15px; width: 15px; height: 15px; }

/* Donut "Tổng quan bài làm" — xem buildTongQuanDonutHtml() trong
   assets/js/quiz-engine.js, ve bang SVG thuan qua stroke-dasharray. */
.quiz-summary__donut-box {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.quiz-summary__donut-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  margin: 0 0 var(--space-3);
}
.quiz-summary__donut-title .dashicons { color: var(--color-primary); font-size: 17px; width: 17px; height: 17px; }
.quiz-summary__donut-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.quiz-summary__donut-svg {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
}
.quiz-summary__donut-so {
  font-size: 1.5rem;
  font-weight: 800;
  fill: var(--color-text);
}
.quiz-summary__donut-nhan {
  font-size: 0.6rem;
  fill: var(--color-text-muted);
}
.quiz-summary__donut-legend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  min-width: 0;
  /* flex:1 — LAP DAY khoang trong du trong card (khung 1440px rong hon
     nhieu so voi 1100px truoc do), tranh donut+chu thich co cum ve BEN
     TRAI, de lai 1 khoang lon vo nghia ben phai trong card. */
  flex: 1 1 auto;
}
.quiz-summary__donut-legend > div { display: flex; align-items: center; gap: 6px; }
.quiz-summary__donut-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

/* 4 the so lieu ngang: dung / sai / chua lam / thoi gian — khop dung
   anh mau. Dung "auto-fit + minmax" (thay vi "repeat(4, 1fr)" chia deu
   CUNG BUOC theo khung cha) — o khung 1440px, "repeat(4,1fr)" se keo moi
   the rong ~350px trong khi noi dung ben trong (icon nho + 2 dong text
   ngan) chi can ~200px la du dep, gay CAM GIAC RONG/TRONG TRAI khong
   can doi. "minmax(200px, 1fr)" GIOI HAN do rong toi thieu HOP LY, van
   TU DONG lap day khong gian du neu co (khong de trong khoang chet). */
.quiz-summary__stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .quiz-summary__stats-row {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
.quiz-summary__stat-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.quiz-summary__stat-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.quiz-summary__stat-card.is-dung .quiz-summary__stat-icon { background: rgba(22, 163, 74, 0.1); color: #16a34a; }
.quiz-summary__stat-card.is-sai .quiz-summary__stat-icon { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.quiz-summary__stat-card.is-chua-lam .quiz-summary__stat-icon { background: var(--color-bg); color: var(--color-text-muted); }
.quiz-summary__stat-card.is-thoi-gian .quiz-summary__stat-icon { background: rgba(250, 0, 60, 0.06); color: var(--color-primary); }
.quiz-summary__stat-so {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}
.quiz-summary__stat-nhan {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Card "Bạn có muốn thử sức lại?" — xem buildLamLaiCardEl(). */
.quiz-summary__lamlai-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  text-align: center;
}
.quiz-summary__lamlai-card h4 {
  font-size: 0.95rem;
  margin: 0 0 4px;
}
.quiz-summary__lamlai-card p {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
/* Nut "Quay lại khoá học" — MOI THEM, va lo hong UX khi an topbar sau
   khi nop bai (xem body.has-result .quiz-topbar). Dat CACH nut "Lam
   lai bai thi" phia tren mot khoang nho, khong dinh sat. */
.quiz-summary__lamlai-quaylai {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-2);
  text-decoration: none;
}

/* Kien thuc da lam tot / can on lai — 2 COT canh nhau tren desktop, xep
   DOC tren mobile. */
.quiz-summary__kienthuc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .quiz-summary__kienthuc {
    grid-template-columns: 1fr 1fr;
  }
}
.quiz-summary__kienthuc-col {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.quiz-summary__kienthuc-col h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}
.quiz-summary__kienthuc-col.is-tot h4 .dashicons { color: #16a34a; }
.quiz-summary__kienthuc-col.is-can-on h4 .dashicons { color: #dc2626; }
.quiz-summary__kienthuc-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quiz-summary__kienthuc-col li {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding-left: 14px;
  position: relative;
}
.quiz-summary__kienthuc-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.quiz-summary__kienthuc-col.is-tot li::before { background: #16a34a; }
.quiz-summary__kienthuc-col.is-can-on li::before { background: #dc2626; }

/* Danh sach cau sai — luoi o nho, bam vao 1 o CUON THANG toi dung cau
   do (xem buildKetQuaSummary(), khong dung showQuestion() vi man hinh
   ket qua da HIEN HET moi cau cung luc). */
.quiz-summary__cau-sai {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.quiz-summary__cau-sai h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}
.quiz-summary__cau-sai h4 .dashicons { color: #dc2626; }
.quiz-summary__cau-sai-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quiz-summary__cau-sai-item {
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid #dc2626;
  background: rgba(220, 38, 38, 0.06);
  color: #dc2626;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.quiz-summary__cau-sai-item:hover {
  background: #dc2626;
  color: #fff;
}

/* =========================================================
   BO CUC 2 COT MAN HINH KET QUA — chi KICH HOAT sau khi NOP BAI (class
   "has-result" duoc JS them vao, xem renderResult() trong
   assets/js/quiz-engine.js). TRUOC do, "#ntc-quiz-result-page" la
   "display:block" MAC DINH (khong khai bao gi them o day), nen KHONG
   anh huong GI CA toi giao dien LAM BAI (van full-width nhu truoc, dung
   yeu cau "trong khi lam bai giu nguyen"). Xem single-quiz.php cho cau
   truc HTML: "#ntc-quiz-result-page" > ("#ntc-quiz-result-main" +
   "#ntc-quiz-result-sidebar").
   ========================================================= */

/* QUAN TRONG — VA LOI nguoi dung phat hien: "man hinh ket qua hien
   CHEN THEM vao giao dien thi, khong THAY THE". Nguyen nhan: cac phan
   tu can AN (topbar, khoi doan van dang position:fixed, sticky footer)
   NAM RAI RAC trong DOM, KHONG PHAI la con chau cua "#ntc-quiz-result-page"
   (topbar la SIBLING TRUOC no) — chi them class cho 1 phan tu con KHONG
   AN duoc cac phan tu do. Dung "body.has-result" (JS them class nay vao
   CHINH <body>, xem renderResult()) de CSS co the AN dung MOI thu can
   an, du chung o dau trong DOM. */
body.has-result .quiz-topbar {
  display: none;
}
/**
 * CSS "body.has-result .quiz-content-layout.has-doan-van" va
 * "body.has-result .quiz-doan-van-panel, .quiz-content-divider" DA BI
 * XOA HAN — khong con panel doan van/thanh chia nao de xu ly (da bo
 * theo yeu cau nguoi dung: "bỏ những gì liên quan tới văn, và tiếng
 * anh luôn đi nhé").
 */
/* Sticky footer (dai so cau + nut chuyen cau) KHONG con y nghia gi sau
   khi da nop bai — cac nut da bi JS an TUNG CAI rieng le tu truoc (xem
   "document.querySelectorAll('.quiz-sticky-footer .btn')" trong
   renderResult()), nhung CA KHUNG STICKY FOOTER (nen trang, border-top)
   VAN con hien trong rong o duoi cung man hinh neu KHONG an luon o day. */
body.has-result .quiz-sticky-footer {
  display: none;
}
/**
 * CSS "body.has-result #ntc-btn-toggle-bai-doc" DA BI XOA HAN — nut
 * "Xem bài đọc" khong con ton tai (da bo theo yeu cau nguoi dung: "bỏ
 * những gì liên quan tới văn, và tiếng anh luôn đi nhé").
 */

.quiz-result-page.has-result {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  /* SUA LOI THUC TE nguoi dung phat hien ("bó cục" tren mobile man hinh
     ket qua): TRUOC DAY co "padding: 0 var(--gutter-mobile)" o day —
     NHUNG ".quiz-wrap" (con ben trong, xem ben duoi) DA TU CO
     "padding: ... var(--gutter-mobile) ..." RIENG CUA CHINH NO — 2 lop
     padding CONG DON lai thanh 32px MOI BEN (16px + 16px) thay vi 16px
     nhu thiet ke DU DINH, khien noi dung tren mobile bi "thu hep" ro
     ret hon can thiet. BO HAN padding NGANG o day — CHI GIU padding
     DOC (align-items) — de padding NGANG DUY NHAT do ".quiz-wrap" phu
     trach, dung 1 LOP DUY NHAT tren toan chuoi container. */
  align-items: start;
}
/* Cot PHAI ("Tổng quan bài làm" + "Làm lại bài thi") CHI xuat hien tren
   DESKTOP RONG — man hinh hep hon se AN HAN sidebar RIENG (xem duoi),
   thay vao do card lam lai/donut se CHEN VAO CUOI cot chinh qua JS neu
   can (KHONG lam trong pham vi lan sua nay — sidebar RONG tren mobile
   don gian AN DI, khong mat du lieu vi cac the so lieu chinh (dung/sai/
   chua lam) DA CO SAN o cot chinh roi). 260px la do rong HEP, CO DINH,
   khop dung ty le anh mau nguoi dung cung cap. */
@media (min-width: 1024px) {
  .quiz-result-page.has-result {
    grid-template-columns: 1fr 260px;
  }
}
.quiz-result-main {
  min-width: 0;
}
/* Khung cau hoi ("quiz-wrap") SAT 2 BEN, KHONG GIOI HAN do rong khi XEM
   KET QUA (sau khi nop bai) — CHI ghi de trong SCOPE ".has-result" (JS
   them class nay SAU KHI nop, xem renderResult() trong
   assets/js/quiz-engine.js), KHONG dung LUC DANG LAM BAI (van giu dung
   gioi han be rong o rule goc ben tren (820px), de tap trung khi dang
   thi/luyen tap — theo dung yeu cau nguoi dung). Dung "max-width: none"
   TUONG MINH (khong phai chi bo trong) — vi CHI khai bao lai "khong co
   gia tri" se KHONG GHI DE duoc rule goc (thieu thuoc
   tinh nghia la KHONG anh huong gi, rule goc VAN THANG do la rule DUY
   NHAT co gia tri max-width) — "none" la GIA TRI HOP LE, GHI DE DUNG. */
.has-result .quiz-wrap {
  /* THEM "!important" — dam bao THANG TUYET DOI trong MOI truong hop,
     KE CA khi quiz VUA co doan van (".quiz-wrap.has-doan-van" co CUNG
     do dac hieu 2-class, chi thang nhau nho THU TU trong file — mong
     manh, de vo neu sau nay co ai them rule khac). Nguoi dung yeu cau
     "cho quiz-layout đồng bộ max width giống quiz-summary" — dam bao
     ".quiz-layout" (chua cau hoi xem lai) FULL-WIDTH SAT 2 BEN giong
     HET ".quiz-summary" (diem so + 4 the, von KHONG co max-width nao
     ca) trong MAN HINH KET QUA, khong con phu thuoc thu tu CSS mong
     manh nua.
     PADDING-NGANG GIAM XUONG 4px (dung bien "--gutter-mobile-tight" moi,
     dong bo voi yeu cau moi "toàn bộ max width mobile... padding ngang
     thành 4px") — sau khi ra soat ky, phat hien ".quiz-summary" THUC RA
     dinh SAT TUYET DOI (0px) voi mep man hinh, trong khi ".quiz-wrap"
     van giu 16px rieng. Nguoi dung LUC DAU xac nhan muon DONG BO TUYET
     DOI (0px), NHUNG sau khi CANH BAO ve rui ro chu de bai/dap an dinh
     sat mep KHO DOC tren thuc te (".quiz-question" khong co padding bu
     rieng), nguoi dung CHON GIU LAI 1 chut nho (ban dau 8px, SAU DO cap
     nhat xuong 4px de dong bo voi yeu cau chung toan site). CHI khi XEM
     KET QUA (KHONG dung luc dang lam bai — TREN MOBILE luc lam bai
     cung da GIAM xuong 4px o rule rieng, xem ".quiz-wrap" trong
     "@media (max-width: 899px)"; luc lam bai tren DESKTOP van giu
     16px goc de de doc). */
  max-width: none !important;
  padding-left: var(--gutter-mobile-tight) !important;
  padding-right: var(--gutter-mobile-tight) !important;
}
/* SUA LOI THUC TE nguoi dung phat hien: "phần nộp bài ở mobile sao
   không có tổng quan bài làm với muốn thử sức lại" — TRUOC DAY sidebar
   nay CHI hien tu DESKTOP (>=1024px), AN HOAN TOAN tren mobile (comment
   cu tung noi ro "chưa làm trong phạm vi lần sửa này" — GIO THUC HIEN).
   Sidebar GIO HIEN DAY DU tren MOI kich thuoc man hinh — tren mobile,
   dung "order: -1" (CSS Grid/Flexbox DEU ho tro) de DAO LEN VI TRI DAU
   TIEN trong luong hien thi, MA KHONG CAN sua doi thu tu THAT trong
   HTML (".quiz-result-main" van dung TRUOC ve mat DOM, chi khac VE MAT
   HIEN THI) — theo dung yeu cau nguoi dung: hien PHIA TREN CUNG, truoc
   diem so + 4 the thong ke. */
.quiz-result-sidebar {
  display: block;
  order: -1;
  /* BO dem ngang rieng — dem da do ".quiz-result-page.has-result" (khoi
     cha) phu trach o CUOI FILE. Giu lai o day se CONG DON thanh 8px,
     lam cot nay THUT VAO SAU HON cac khoi khac, dung loi lech le vua
     sua. */
  /* 24px -> 32px: dong bo voi NHIP CHUNG cua man ket qua (xem
     "#ntc-quiz-result-main > * + *" o cuoi file). Cot nay tren mobile
     nam TREN CUNG (order: -1), neu de 24px thi khoang cach duoi no
     lech han so voi moi khoi con lai. */
  margin-bottom: var(--space-5);
}
@media (min-width: 1024px) {
  .quiz-result-sidebar {
    order: 0; /* Tren desktop, QUAY VE dung thu tu DOM that (cot phai, sau cot chinh ve mat code) — Grid 2 cot TU quyet dinh vi tri qua "grid-template-columns", khong can dao thu tu hien thi nua. */
    position: sticky;
    top: var(--space-4);
    min-width: 0;
    /* THEM padding-right BU LAI — ".quiz-result-page" (cha) DA BO HAN
       padding ngang chung (xem giai thich chi tiet o rule
       ".quiz-result-page.has-result" phia tren, sua loi cong don padding
       tren mobile). Sidebar la SIBLING cua ".quiz-result-main" (KHONG
       nam trong ".quiz-wrap" — noi CO padding rieng), nen SE dinh SAT
       MEP PHAI man hinh neu KHONG co padding rieng o day — chi ap dung
       TU 1024px (dung luc sidebar THAT SU hien), KHONG anh huong mobile. */
    padding-right: var(--gutter-mobile);
    padding-left: 0;
    margin-bottom: 0;
  }
}
.quiz-result-sidebar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.quiz-layout {
  display: flex;
  justify-content: center;
  /* KHONG con "max-width: 1000px" — container GIAN SAT 2 BEN man hinh
     (theo yeu cau nguoi dung), CHI "justify-content: center" lo viec CAN
     GIUA noi dung ben trong (.quiz-wrap co max-width RIENG cua no, xem
     duoi, KHONG doi gi — van gioi han do rong dong chu de de doc).
     BO padding NGANG o day (chi giu padding DOC tren/duoi) — ".quiz-wrap"
     con BEN TRONG DA CO SAN padding ngang rieng (var(--gutter-mobile)),
     giu ca 2 se bi NHAN DOI khoang cach 2 ben, khien noi dung KHONG that
     su sat mep nhu mong muon. */
  padding: var(--space-4) 0;
  position: relative;
}

/* =========================================================
   PANEL CAU HOI NOI — thay the HOAN TOAN sidebar co dinh + FAB/bottom
   sheet rieng biet cua ban truoc. Dung 1 co che DUY NHAT (an mac dinh,
   hien qua icon "⋮⋮" trong sticky footer) cho MOI kich thuoc man hinh,
   khop dung anh mau (panel noi giua man hinh, khong choan cho co dinh).
   Xem single-quiz.php, initQuestionGrid() trong assets/js/quiz-engine.js.
   ========================================================= */
.quiz-grid-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  /* Neo goc DUOI-TRAI (gan vi tri icon "⋮⋮" trong sticky footer), khac
     ban truoc (can giua man hinh) — khop dung anh mau moi nguoi dung
     cung cap: bang cau hoi "moc len" tu goc duoi trai, khong phai hien
     giua man hinh. Padding-bottom LON HON han cac canh khac — tranh de
     len sticky footer 2 hang (day so cau + hang Phan/nut dieu huong,
     xem .quiz-sticky-footer) — uoc tinh ~190px chieu cao footer.
     (Truoc day CONG THEM ~50px du cho nut "Xem bài đọc" — nut DA BI XOA
     HAN theo yeu cau doi ngach, nen GIAM lai ve dung 190px, khong con
     du thua nua.) */
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-3) var(--space-3) 190px;
}
.quiz-grid-panel[hidden] { display: none; }
/* SUA LOI THUC TE nguoi dung phat hien: "bấm panel lên là bấm mọi thứ
   khác bên ngoài không được" — TREN DESKTOP (>=1025px), ".quiz-grid-panel"
   (THE CHA, inset:0 PHU TOAN MAN HINH) van CHAN MOI click tren TOAN BO
   dien tich cua no (tru dung phan ".quiz-grid-panel__box"), DU
   ".quiz-grid-panel__backdrop" (con, cung phu inset:0) DA duoc doi
   "background: transparent" tu truoc — TRONG SUOT VE MAT THI GIAC
   KHONG DONG NGHIA trong suot ve mat TUONG TAC (con nhan CA click).
   "pointer-events: none" tren CHINH THE CHA vo hieu hoa hoan toan kha
   nang no (VA con backdrop ben trong no) nhan BAT KY su kien chuot
   nao — CHO PHEP click XUYEN QUA toi noi dung cau hoi phia sau, dung
   yeu cau nguoi dung: "tất cả các phần khác ở chức năng thi quiz đều
   bấm được bình thường". CHI ap dung DESKTOP — MOBILE (duoi 1025px)
   GIU NGUYEN hanh vi CU (panel van la overlay chan tuong tac, dung yeu
   cau nguoi dung rieng ve mobile trong yeu cau truoc do). */
@media (min-width: 1025px) {
  .quiz-grid-panel {
    pointer-events: none;
  }
}
.quiz-grid-panel__backdrop {
  position: absolute;
  inset: 0;
  /* KHONG con lam TOI giao dien cau hoi phia sau (truoc la
     "rgba(0,0,0,0.4)") — theo yeu cau nguoi dung. Van GIU LAI the nay
     (chi doi background thanh TRONG SUOT hoan toan) de chuc nang "bam
     ra ngoai de dong panel" VAN hoat dong dung TREN MOBILE (xem
     initQuestionGrid() trong assets/js/quiz-engine.js — TREN DESKTOP,
     bam backdrop KHONG con tu dong dong nua, theo yeu cau nguoi dung:
     "khi bấm chỗ khác thì vẫn giữ bảng câu hỏi... áp dụng cho desktop
     thôi mobile giữ nguyên") — chi bo hieu ung thi giac, khong bo
     logic. */
  background: transparent;
}
.quiz-grid-panel__box {
  position: relative;
  z-index: 1;
  width: 100%;
  /* BAT LAI kha nang nhan click CHO CHINH BOX NAY (khung noi dung that
     su cua panel) — vi THE CHA (".quiz-grid-panel") da bi tat het
     "pointer-events" tren desktop (xem tren), can BAT LAI RIENG cho
     box de nguoi dung VAN bam CHON DUOC cau hoi trong chinh panel
     (khong bi tat luon ca chuc nang chinh cua panel). */
  pointer-events: auto;
  /* Tang tu 340px -> 460px de VUA DU 8 cot (yeu cau moi, truoc la 5 cot)
     — voi gap 6px x 7 khoang + padding 2 ben, 340px se lam moi o QUA NHO
     kho bam chinh xac tren mobile. */
  max-width: 460px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  /* Tang do dam shadow (tu 0.18 -> 0.28) de BU cho viec bo backdrop toi
     (xem .quiz-grid-panel__backdrop o tren) — dam bao panel VAN noi bat,
     tach biet ro khoi giao dien cau hoi phia sau, du khong con lop phu
     den lam toi ca man hinh. */
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  border: 1px solid var(--color-border);
  padding: var(--space-3);
}
.quiz-grid-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-3);
}
.quiz-grid-panel__close {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--color-bg);
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.quiz-question-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.quiz-grid-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  position: relative; /* Lam diem tua cho huy hieu co goc tren-phai, xem .quiz-grid-cell__flag ben duoi. */
}
.quiz-grid-cell:hover {
  border-color: var(--color-primary);
}
.quiz-grid-cell.is-answered {
  background: rgba(22, 163, 74, 0.1);
  border-color: #16a34a;
  color: #16a34a;
  font-weight: 600;
}
.quiz-grid-cell.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
/* Huy hieu co nho goc tren-phai moi o — AN mac dinh, CHI hien khi cau do
   DA duoc danh dau (class "is-flagged" tren chinh .quiz-grid-cell, xem
   renderQuestionGrid() trong assets/js/quiz-engine.js). */
.quiz-grid-cell__flag {
  display: none;
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 12px;
  width: 14px;
  height: 14px;
  color: #f59e0b;
  background: var(--color-bg-white);
  border-radius: 50%;
}
.quiz-grid-cell.is-flagged .quiz-grid-cell__flag {
  display: block;
}

/* Tieu de nhom "Phần" trong panel cau hoi — CHI xuat hien khi quiz THAT
   SU dung tinh nang chia Phan (xem initQuestionGrid() trong
   assets/js/quiz-engine.js, bo qua nhom rong "" khong in tieu de). */
.quiz-grid-group-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 6px;
  text-transform: uppercase;
}
.quiz-grid-group-title:first-child { margin-top: 0; }

.quiz-grid-legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
/* Tang co chu tren DESKTOP cho bang KICH THUOC nut chuyen cau
   (".btn", 0.95rem) — theo yeu cau nguoi dung: "Đã làm/Đang xem/Đã
   đánh dấu... to thêm bằng với text chuyển câu". CHI desktop (nguoi
   dung xac nhan: mobile giu nguyen tranh vo bo cuc man hinh hep). */
@media (min-width: 1025px) {
  .quiz-grid-legend {
    font-size: 0.95rem;
  }
}
.quiz-grid-legend span { display: flex; align-items: center; gap: 6px; }
.quiz-grid-legend__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid var(--color-border);
}
.quiz-grid-legend__dot.is-flagged {
  background: #fef3c7;
  border-color: #f59e0b;
}
.quiz-grid-legend__dot.is-answered { background: rgba(22, 163, 74, 0.1); border-color: #16a34a; }
.quiz-grid-legend__dot.is-current { background: var(--color-primary); border-color: var(--color-primary); }

/**
 * CSS "#ntc-doan-van-tab-content" (tab "Bài đọc" mobile) DA BI XOA HAN —
 * HTML tuong ung KHONG con ton tai (da bo theo yeu cau nguoi dung: "bỏ
 * những gì liên quan tới văn, và tiếng anh luôn đi nhé").
 */

/**
 * CSS "#ntc-btn-toggle-bai-doc" va ".quiz-footer-xem-bai-doc-btn" (nut
 * "Xem bài đọc"/"Làm bài") DA BI XOA HAN — HTML tuong ung KHONG con ton
 * tai (da bo theo yeu cau nguoi dung: "bỏ những gì liên quan tới văn,
 * và tiếng anh luôn đi nhé").
 */

/* =========================================================
   TUNG CAU HOI — khung card header (badge tron + "CÂU X" + ket qua),
   dung ANH MAU: nen xanh nhat bo goc khi hien "TRẢ LỜI ĐÚNG".
   ========================================================= */
.quiz-question {
  margin-bottom: var(--space-5);
  border: none;
  padding: 0;
  min-width: 0; /* Reset kich thuoc toi thieu mac dinh cua fieldset trong 1 so trinh duyet. */
}
/* THANG HANG le trai — nguoi dung phan hoi "CÂU X" (trong khung nen
   xam cua ".quiz-question__header", co padding ngang "var(--space-3)")
   dang THUT VAO trong so voi de bai/dap an/loi giai ben duoi (khong co
   khoang cach tuong tu). Dung SELECTOR CON TRUC TIEP + ":not()" (loai
   tru chinh header) — AP DUNG cho MOI PHAN TU CON TRUC TIEP con lai
   cua ".quiz-question" (de bai, dap an, loi giai, cac khoi dung_sai/
   tra_loi_ngan/tu_luan...) — CHAC CHAN bao phu HET moi loai cau hoi
   HIEN CO VA CA CAC LOAI MOI THEM SAU NAY, khong can liet ke thu cong
   tung class rieng le (de sot).
   QUAN TRONG: dung "margin" (KHONG PHAI "padding") — nhieu phan tu con
   (VD ".quiz-option", khung dap an trac nghiem) DA CO SAN
   "padding: var(--space-3)" RIENG cua chinh no (khoang cach GIUA VIEN
   va CHU BEN TRONG khung) — neu dung "padding" o day se CONG DON vao
   padding co san, day CHU vao SAU HON trong khung thay vi dich CA
   KHUNG VIEN ra dung vi tri. "margin" dich CA KHOI (ke ca border/nen)
   ma KHONG dung cham gi den khoang cach BEN TRONG cua no. */
.quiz-question > *:not(.quiz-question__header) {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}
.quiz-question__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  /* THEM margin-top — tao KHOANG HO ro rang voi ".quiz-topbar" phia
     tren (nguoi dung phan hoi "hàng câu này bị sát với box phía
     trên"). Dat TRUC TIEP tren header (khong phu thuoc padding cua
     container cha, co the bi THIEU trong 1 so truong hop — VD
     ".quiz-content-main" tren mobile khong co padding-top rieng),
     dam bao LUON co khoang hop ly du nam trong container nao. */
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.quiz-question__header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* THEM "flex-wrap" — voi badge MUC DO moi them, tren MAN HINH RAT HEP
     (VD dien thoai nho, font chu lon do accessibility) co the KHONG DU
     CHO cho ca 3 phan tu (so + "CÂU X" + badge muc do) tren 1 dong —
     cho phep TU XUONG DONG thay vi ep tran/vo layout voi
     ".quiz-question__header-right" (nut Danh dau) ben canh. */
  flex-wrap: wrap;
  row-gap: 4px;
}
.quiz-question__header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.quiz-question__label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text);
}
/* Badge MUC DO cau hoi — hien CANH "Câu X", CHUNG cho CA luc lam bai
   lan luc xem ket qua (theo yeu cau nguoi dung). 4 mau khac nhau theo
   4 muc do (xanh la -> do), giup nhan biet NHANH bang mat khong can
   doc chu, giong tinh than mau sac dung cho "Kien thuc lam tot/can on"
   trong man hinh ket qua (nhat quan trong toan giao dien). */
.quiz-question__muc-do {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.quiz-question__muc-do--nhan_biet {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}
.quiz-question__muc-do--thong_hieu {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
.quiz-question__muc-do--van_dung {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.quiz-question__muc-do--van_dung_cao {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}
.quiz-question__ket-qua {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.quiz-question__ket-qua.is-dung { color: #16a34a; }
.quiz-question__ket-qua.is-sai { color: #dc2626; }
/* Khi da co ket qua (dung/sai), doi luon MAU NEN + BADGE cua ca khung
   header cho khop dung anh mau (nen xanh nhat khi dung). */
.quiz-question:has(.quiz-question__ket-qua.is-dung) .quiz-question__header {
  background: rgba(22, 163, 74, 0.08);
}
.quiz-question:has(.quiz-question__ket-qua.is-sai) .quiz-question__header {
  background: rgba(220, 38, 38, 0.06);
}

/* Nut "Đánh dấu" tren tung cau hoi — xem toggleFlagCauHoi() trong
   assets/js/quiz-engine.js. Mau XAM khi chua danh dau, chuyen VANG/CAM
   ro rang khi da danh dau (".is-active"), giup nguoi lam bai nhan biet
   nhanh cau nao minh da tu ghi chu can xem lai. */
.quiz-btn-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.quiz-btn-flag .dashicons { font-size: 14px; width: 14px; height: 14px; }
.quiz-btn-flag.is-active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #b45309;
}
.quiz-question__text {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  text-align: justify;
}

/* SUA LOI THUC TE nguoi dung phat hien: "công thức toán vẫn bị tràn màn
   hình gây khoảng trắng giao diện" — dau "overflow-x: auto" tren CHINH
   "mjx-container" (them o lan sua truoc) LA CHUA DU: cong thuc RAT DAI
   van co the day KHOI CHA (chinh no) GIAN RONG THEO NOI DUNG (hanh vi
   mac dinh cua the block/inline-block khi KHONG co gioi han chieu rong
   ro rang), TRUYEN LAN len ca chuoi to tien (".quiz-question",
   ".quiz-wrap"...) — gay THANH CUON NGANG cho CA TRANG (khoang trong o
   BEN PHAI khi da cuon het la vung TRONG do trang bi gian rong hon man
   hinh that su). Cach chan la KHONG cho cac khoi VAN BAN nay tu gian
   rong theo noi dung ben trong.
   CAP NHAT: ban dau dung "overflow-x: hidden" — chan duoc that, nhung
   lai CAT CUT cong thuc dai, hoc sinh khong xem duoc phan bi mat. Da
   doi sang "auto" (xem rule ben duoi): van chan tran ra trang y het
   "hidden", nhung CHO CUON de doc tiep. Gop CHUNG 1 rule cho TOAN BO
   cac khoi van ban co the chua cong thuc — dam bao DONG BO, khong sot
   noi nao. */
.quiz-question__text,
.quiz-option__text,
.quiz-dungsai-item__text,
.quiz-question__loigiai-tucthi,
.quiz-tuluan-loigiai {
  /* SUA LOI nguoi dung phat hien: "các đáp án có công thức toán có vẻ
     bị tràn và BỊ ẨN ĐI ở màn hình mobile".
     "overflow-x: hidden" (dat o lan sua truoc) CHAN duoc viec cong thuc
     day rong ca trang — NHUNG cai gia phai tra la no CAT CUT phan cong
     thuc vuot qua, hoc sinh KHONG CACH NAO xem duoc phan bi mat.
     "auto" GIU NGUYEN kha nang chan tran (noi dung thua van bi giam
     GON trong khoi nay, khong lam trang bi cuon ngang), NHUNG cho phep
     hoc sinh CUON NGANG trong chinh khoi do de doc het cong thuc. */
  overflow-x: auto;
  /* Ngan cu chi cuon ngang bi "lot" ra ngoai: tren iOS/Android, khi
     cuon het cong thuc ma van vuot tiep, trinh duyet se hieu la cu chi
     VUOT CANH va kich hoat QUAY LAI TRANG TRUOC — hoc sinh dang lam
     bai bi thoat ra ngoai, mat bai. "contain" giu cu chi lai trong
     chinh khoi cong thuc. */
  overscroll-behavior-x: contain;
  /* Thanh cuon MANH de bao hieu "keo ngang duoc" ma khong chiem cho. */
  scrollbar-width: thin;
}

/* =========================================================
   BANG (table) TRONG NOI DUNG CAU HOI/DAP AN/LOI GIAI — TRUOC DAY CHUA
   CO CSS RIENG NAO, nen bang do admin CHEN qua TinyMCE hien THEO STYLE
   MAC DINH TRAN TRUI cua trinh duyet (khong vien ro, khong padding,
   de bi tuong nham la "khong co" khi nhin luot qua — loi thuc te nguoi
   dung phat hien). Ap dung CHUNG cho MOI vung noi dung TinyMCE trong
   quiz (cau hoi, dap an trac nghiem, y dung/sai, loi giai hien tuc thi)
   qua danh sach selector nhom, tranh lap code nhieu lan rieng le. */
.quiz-question__text table,
.quiz-option__text table,
.quiz-dungsai-item__text table,
.quiz-question__loigiai-tucthi table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: 0.92em; /* Nho hon chut so voi chu thuong, dung cho bang du lieu (VD bang so lieu Su/Dia) khong lan at noi dung chinh. */
  font-weight: 400; /* Reset — ".quiz-question__text" cha co "font-weight: 600" cho CA DOAN VAN, nhung chu TRONG BANG khong nen in dam theo, tru rieng <th>. */
}
.quiz-question__text th,
.quiz-option__text th,
.quiz-dungsai-item__text th,
.quiz-question__loigiai-tucthi th {
  background: var(--color-bg);
  font-weight: 700;
  text-align: left;
}
.quiz-question__text th,
.quiz-question__text td,
.quiz-option__text th,
.quiz-option__text td,
.quiz-dungsai-item__text th,
.quiz-dungsai-item__text td,
.quiz-question__loigiai-tucthi th,
.quiz-question__loigiai-tucthi td {
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  vertical-align: top;
}
/* Hang le/chan xen ke mau nhe — de doc hon voi bang nhieu hang du lieu
   (VD bang so lieu thong ke, nien bieu lich su nhieu dong). */
.quiz-question__text tbody tr:nth-child(even) td,
.quiz-option__text tbody tr:nth-child(even) td,
.quiz-dungsai-item__text tbody tr:nth-child(even) td,
.quiz-question__loigiai-tucthi tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.015);
}
/* Bang thuong RONG hon khung cha tren MOBILE — cho phep CUON NGANG
   thay vi bop meo/vo chu qua nho, tranh tinh trang bang "vo" giao dien
   tren man hinh hep (dac biet bang nhieu cot du lieu). CHI ap dung cho
   CHINH THE <table> (dung "display:block" de kich hoat overflow-x hoat
   dong dung tren table), KHONG ap cho CA khoi cha — tranh anh huong
   toi noi dung KHAC ben trong cung khoi (VD cong thuc LaTeX dai, se bi
   cuon ngang khong mong muon neu ap overflow len ca div cha thay vi
   chi rieng table). */
.quiz-question__text table,
.quiz-option__text table,
.quiz-dungsai-item__text table,
.quiz-question__loigiai-tucthi table {
  display: block;
  overflow-x: auto;
}

/* SUA LOI THUC TE nguoi dung phat hien: "công thức toán đôi khi làm
   tràn màn hình ở mobile" — MathJax (renderer CHTML, xem inc/setup.php)
   sinh ra the "<mjx-container>" cho MOI cong thuc, co CHIEU RONG CO
   DINH theo do dai cong thuc — cong thuc DAI (VD phan so phuc tap, he
   phuong trinh nhieu bien, ma tran) co the RONG HON man hinh mobile,
   day TRAN ra ngoai, PHA VO layout (chu bi cat, thanh cuon ngang xuat
   hien cho CA TRANG thay vi chi rieng cong thuc). Cho phep CUON NGANG
   RIENG cho CHINH "<mjx-container>" (giong het cach da xu ly cho
   <table> o tren) — cong thuc qua dai se co THANH CUON RIENG CUA NO,
   khong lam vo bo cuc tong the. Ap dung DONG LOAT cho MOI khoi van ban
   co the chua cong thuc (de bai, dap an, loi giai...). */
.quiz-question__text mjx-container,
.quiz-option__text mjx-container,
.quiz-dungsai-item__text mjx-container,
.quiz-question__loigiai-tucthi mjx-container,
.quiz-tuluan-loigiai mjx-container {
  /* BO "overflow-y: hidden" (co o ban truoc) — day la LOI THU HAI gay
     "bị ẩn đi": cong thuc CAO nhu PHAN SO, CAN BAC HAI, TICH PHAN co
     phan vuon LEN TREN va XUONG DUOI dong chu; "overflow-y: hidden"
     CAT PHANG phan vuon ra do, khien phan so mat tu so hoac mau so.
     BO luon "overflow-x: auto" o day: khoi van ban cha GIO da tu cuon
     ngang duoc (xem rule o tren) — de CHA cuon thi vung cuon RONG va
     DE THAO TAC hon nhieu, thay vi bat hoc sinh cuon trong 1 o cong
     thuc be xiu long ben trong dong chu. */
  overflow: visible;
}
/* Cong thuc DANG KHOI RIENG (display math, "\[...\]") — MathJax tu them
   thuoc tinh "display=\"true\"" tren chinh "<mjx-container>", CAN xu ly
   RIENG vi no la "display: block" (chiem tron 1 dong), khac voi cong
   thuc TRONG DONG o tren. */
mjx-container[display="true"] {
  max-width: 100%;
  overflow-x: auto;
  /* KHONG dat "overflow-y: hidden" — se cat mat phan tren/duoi cua
     cong thuc cao (phan so nhieu tang, tich phan, ma tran). Cong thuc
     dang khoi la "display: block" nen chieu cao tu gian theo noi dung,
     khong can chan gi o truc doc. */
  margin: var(--space-2) 0;
}


/* Loi giai hien TUC THI (che do Luyen tap, ngay sau khi chon dap an) —
   xem hienThiKetQuaTucThi() trong assets/js/quiz-engine.js. */
.quiz-question__loigiai-tucthi {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: justify;
}

/* =========================================================
   DAP AN TRAC NGHIEM — khung tron chu cai A/B/C/D rieng ben trai, khop
   dung anh mau (khac ban truoc: chi co radio input an + text, khong co
   khung chu cai).
   ========================================================= */
.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
  background: var(--color-bg-white);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-option:hover { border-color: var(--color-secondary); }

/* Input radio that (screen reader/ban phim dung duoc binh thuong) nhung an
   khoi mat thuong — thay bang style cua chinh the <label> bao ngoai, vi
   toan bo label da la vung bam duoc (khong can hien radio mac dinh cua
   trinh duyet vi da co border/background phan hoi truc quan roi). */
.quiz-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Trang thai focus-visible (dieu huong ban phim) BAT BUOC de dam bao
   accessibility — khong an focus ring di dù input bi an truc quan. */
.quiz-option__input:focus-visible + .quiz-option__letter,
.quiz-option:has(.quiz-option__input:focus-visible) {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Khung tron chu cai A/B/C/D — mau XAM mac dinh, doi mau theo trang
   thai chon/dung/sai (xem duoi). */
.quiz-option__letter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.quiz-option:has(.quiz-option__input:checked) {
  border-color: var(--color-secondary);
  background: rgba(12, 147, 244, 0.06);
}
.quiz-option:has(.quiz-option__input:checked) .quiz-option__letter {
  background: var(--color-secondary);
  color: #fff;
}
/* Fallback cho trinh duyet chua ho tro :has() — xem quiz-engine.js. */
.quiz-option.is-checked-fallback {
  border-color: var(--color-secondary);
  background: rgba(12, 147, 244, 0.06);
}
.quiz-option.is-checked-fallback .quiz-option__letter {
  background: var(--color-secondary);
  color: #fff;
}

/* Ket qua CHAM NGAY (che do Luyen tap) — xem hienThiKetQuaTucThi() trong
   assets/js/quiz-engine.js. "is-dung" (dap an DUNG, luon to xanh du co
   phai la dap an nguoi dung chon hay khong — khop dung anh mau: option A
   to xanh vi la dap an dung, du hoc sinh co the da chon dung cau do roi).
   "is-sai" (dap an SAI ma hoc sinh DA CHON) to do. */
/* Do dac hieu: viet KEM ".is-checked-fallback" trong selector thu hai
   de CHAC CHAN thang trang thai "dang chon" (mau xanh duong). O dap an
   hoc sinh chon SAI mang DONG THOI ca 3 class
   ("is-checked-fallback is-sai is-da-chon") — neu chi dua vao thu tu
   dong trong file thi rat de bi 1 lan sua sau nay vo tinh dao nguoc.
   Viet tuong minh o day de khoa lai: trang thai CHAM DIEM luon thang
   trang thai DANG CHON. */
.quiz-option.is-dung,
.quiz-option.is-dung.is-checked-fallback {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.10);
}
.quiz-option.is-dung .quiz-option__letter,
.quiz-option.is-dung.is-checked-fallback .quiz-option__letter { background: #16a34a; color: #fff; }

.quiz-option.is-sai,
.quiz-option.is-sai.is-checked-fallback {
  border-color: #dc2626;
  /* Nen do NHE nhung THAY RO, cung do dam voi nen xanh cua dap an dung
     — theo yeu cau nguoi dung: "câu hỏi sai cho viền màu đỏ với nền
     chọn đáp án đỏ nhẹ". */
  background: rgba(220, 38, 38, 0.10);
}
.quiz-option.is-sai .quiz-option__letter,
.quiz-option.is-sai.is-checked-fallback .quiz-option__letter { background: #dc2626; color: #fff; }

/**
 * CSS ".quiz-option__ket-qua-icon" (dau tich ✓ ben phai dap an dung) DA
 * BI XOA HAN — LOI THUC TE nguoi dung phat hien: icon nay THUA, vien/nen
 * xanh cua khung (qua class "is-dung") DA DU RO RANG. Xem
 * assets/js/quiz-engine.js, ham renderResultTracNghiem().
 */

/* Khoi "Đáp án đúng: X" — hien NGAY DUOI 4 dap an sau khi nop bai, khung
   nen do nhat + vien trai do dam, icon bong den, khop dung anh mau. */
.quiz-question__dapandung {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--space-3);
  padding: 12px 14px;
  background: rgba(250, 0, 60, 0.05);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  color: var(--color-primary);
}
.quiz-question__dapandung .dashicons { font-size: 16px; width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

.quiz-option__text {
  flex: 1 1 auto;
  min-width: 0;
}

/**
 * CSS ".quiz-option__text--sap-xep-cau" (font monospace cho dap an
 * "sắp xếp câu") va "[data-loai=\"sap_xep_cau\"]" (khoang cach dong noi
 * dung) DA BI XOA HAN — loai cau hoi 'sap_xep_cau' khong con ton tai
 * trong he thong (da bo theo yeu cau nguoi dung: "bỏ những gì liên
 * quan tới văn, và tiếng anh luôn đi nhé").
 */

/* =========================================================
   QUIZ — CAU DUNG-SAI (4 y doc lap a/b/c/d)
   ========================================================= */
.quiz-dungsai-list { display: flex; flex-direction: column; gap: var(--space-2); }
.quiz-dungsai-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  /* Cho phep XUONG DONG tren mobile — xem media query duoi, dua
     ".quiz-dungsai-item__choice" xuong HANG RIENG thay vi chen ep canh
     text tren man hinh hep. */
  flex-wrap: wrap;
}
.quiz-dungsai-item__label { font-weight: 700; color: var(--color-text-muted); flex-shrink: 0; }
.quiz-dungsai-item__text {
  flex: 1;
}
/* Tren MOBILE (duoi 640px) — 2 nut "Đúng"/"Sai" (".quiz-dungsai-item__choice")
   XUONG HANG RIENG, nam DUOI ca label+text, CHIEM DAY DU chieu rong
   trong CUNG 1 khung box (khong tach thanh box rieng) — theo dung yeu
   cau nguoi dung: "nằm dưới câu hỏi trong cùng 1 box đáp án". Truoc day
   ca 3 phan tu (label/text/choice) CHEN CHUC tren 1 hang, choice bi ep
   qua nho/tran tren man hinh hep.
   MOI SUA — nguoi dung LAM RO y muon: "box nhỏ đúng sai cho rộng ra
   căn đều box cha của đáp án" — nghia la CHINH 2 NUT "Đúng"/"Sai" (khong
   phai text mo ta) can GIAN RONG BANG NHAU, LAP DAY chieu rong cua
   khung cha, khong chi dinh sat trai nhu ban dau. */
@media (max-width: 640px) {
  .quiz-dungsai-item__choice {
    flex-basis: 100%;
    margin-top: var(--space-2);
  }
  /* 2 nut GIAN DEU BANG NHAU (moi nut chiem 50% chieu rong choice), LAP
     DAY toan bo khong gian ngang — thay vi tu co theo do dai chu
     "Đúng"/"Sai" nhu truoc (dung "inline-flex" mac dinh). */
  .quiz-dungsai-item__choice .quiz-dungsai-radio {
    flex: 1;
    justify-content: center;
  }
}
.quiz-dungsai-item__choice { display: flex; gap: var(--space-2); flex-shrink: 0; }
.quiz-dungsai-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-dungsai-radio:has(.quiz-dungsai-input:checked) {
  border-color: var(--color-secondary);
  background: rgba(12, 147, 244, 0.08);
  font-weight: 600;
}
.quiz-dungsai-item.is-correct { border-color: var(--color-correct); background: rgba(34, 197, 94, 0.06); }
.quiz-dungsai-item.is-incorrect { border-color: var(--color-incorrect); background: rgba(220, 38, 38, 0.06); }

/* =========================================================
   QUIZ — CAU TRA LOI NGAN
   ========================================================= */
.quiz-traloingan-label { display: block; margin-bottom: var(--space-2); font-weight: 600; }
/* O NHAP DAP AN NGAN — VIET LAI GON cho mobile (theo yeu cau nguoi
   dung). Truoc do class nay bi 3 bo rule chong len nhau qua nhieu lan
   sua, gio gom het ve MOT CHO duy nhat.
   Do dac hieu: phai la ".quiz-question .quiz-traloingan-input" (0,2,0)
   chu KHONG chi ".quiz-traloingan-input" (0,1,0) — vi rule chan tran
   tong quat ".quiz-question input" (0,1,1) o cuoi file co do dac hieu
   cao hon, se de mat "max-width" neu viet 1 class. */
.quiz-question .quiz-traloingan-input {
  display: block;
  box-sizing: border-box;
  /* DOI CO CHE TINH BE RONG (khong con dung "width: 100%").
     Da sua 4 lan bang cach chinh "width"/"max-width" theo phan tram ma
     van tran. Da loai tru: khong co reset "box-sizing", khong co
     stylesheet nao khac, khong co "!important" nao chan. Nen thay vi
     tinh chinh tiep tren cung 1 co che, DOI HAN sang co che khac:
     "width: auto" cho o nhap tu lay be rong theo thuoc tinh "size"
     trong HTML (size="12", tuc ~12 ky tu) — day la be rong CO DINH,
     NHO, KHONG phu thuoc vao be rong khung cha, nen KHONG THE tran
     du khung cha co van de gi. "max-width: 100%" van giu lam chan
     cuoi cung phong khi man hinh cuc hep. */
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: var(--input-height);
  padding: 0 var(--space-3);
  /* Vien 2px — DONG BO voi o dap an trac nghiem va y dung-sai (deu da
     doi sang 2px), de 3 dang cau hoi trong nhu mot he thong. */
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  /* >= 16px la BAT BUOC tren mobile: font nho hon khien iOS TU DONG
     PHONG TO ca trang khi hoc sinh bam vao o nhap, lam vo bo cuc va
     phai tu thu nho lai. */
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quiz-question .quiz-traloingan-input::placeholder {
  color: var(--color-text-muted);
}
/* Vong sang khi dang go — dung "box-shadow" (KHONG dung "outline" voi
   offset) vi box-shadow chi 3px va om sat o nhap, khong bi tran ra
   ngoai vien the cau hoi nhu vien focus mac dinh truoc day. */
.quiz-question .quiz-traloingan-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(250, 0, 60, 0.12);
}
@media (max-width: 640px) {
  .quiz-question .quiz-traloingan-input {
    /* Cao hon 44px mot chut cho de bam bang ngon tay. */
    height: 48px;
    font-size: 1.05rem;
  }
}
.quiz-traloingan-input.is-correct { border-color: var(--color-correct); background: rgba(34, 197, 94, 0.06); }
.quiz-traloingan-input.is-incorrect { border-color: var(--color-incorrect); background: rgba(220, 38, 38, 0.06); }

/* =========================================================
   QUIZ — CAU TU LUAN (khong cham tu dong)
   ========================================================= */
.quiz-tuluan-image {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
}
.quiz-tuluan-label { display: block; margin-bottom: var(--space-2); font-weight: 600; }
.quiz-tuluan-textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
  resize: vertical;
}
/* SUA LAI DUNG HUONG — nguoi dung XAC NHAN muon DOI GIAO DIEN theo
   ".quiz-explanation" (da xoa o luot truoc, TUNG dung nen XANH NHAT
   "#f0f9ff" qua style inline trong JS), KHONG PHAI nguoc lai nhu lan
   sua truoc (tung doi ".quiz-explanation" theo class nay). GIU NGUYEN
   viec GOP thanh 1 CLASS DUY NHAT cho ca 5 loai cau hoi (van dung y
   dong bo), nhung DOI GIA TRI STYLE sang dung dung giao dien nen xanh
   nhat nguoi dung muon. "#f0f9ff" la mau nen dac thu RIENG cho khoi
   nay (khong co bien theme tuong duong, cac bien mau hien co deu la
   mau chuc nang dam hon nhieu — --color-secondary #0c93f4 qua dam de
   lam nen) — giu MA MAU CUNG, hop ly cho truong hop nay. */
.quiz-tuluan-loigiai {
  margin-top: var(--space-2);
  padding: 12px;
  background: #f0f9ff;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: justify;
}
.quiz-tuluan-loigiai__thang-diem {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}
.quiz-tuluan-loigiai__thang-diem li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.quiz-tuluan-loigiai__thang-diem li:first-child { border-top: none; }

/* Ghi chu ket qua ngan (VD "Đúng 3/4 ý.", "✓ Chính xác") — hien SAU khi
   nop bai, TRUOC khoi loi giai chi tiet ".quiz-tuluan-loigiai". Dung
   CHUNG 1 class cho ca dung_sai/tra_loi_ngan — SUA LOI THUC TE nguoi
   dung phat hien ("khong dong bo mau sac/font"): truoc day 2 noi nay
   dung "style.cssText" INLINE RIENG (mau chu "#6b6b6b" CUNG CAP, KHONG
   dung bien "--color-text-muted" chuan cua theme) — xem
   assets/js/quiz-engine.js. */
.quiz-result-note {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/**
 * Toan bo khoi CSS "Audio Player (Listening)", "Đoạn văn dùng chung",
 * "Bố cục 2 cột" (panel doan van + thanh chia keo duoc + noi dung
 * chinh) DA BI XOA HAN — HTML tuong ung KHONG con ton tai (da bo theo
 * yeu cau nguoi dung: "bỏ những gì liên quan tới văn, và tiếng anh
 * luôn đi nhé"). Xem single-quiz.php, inc/access-control.php.
 */

/**
 * Khoi CSS "quiz-van-ban-doc-hieu*" (rieng cho mon Van) VA
 * "quiz-doan-van-chung__author"/"__note" DA BI XOA HAN — HTML tuong
 * ung KHONG con ton tai nua (da bo theo yeu cau nguoi dung: "bỏ những
 * gì liên quan tới văn, và tiếng anh luôn đi nhé").
 */

.quiz-sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) var(--gutter-mobile);
  z-index: 30;
}
/* Padding NGANG GIAM xuong 4px CHI tren MOBILE (duoi 900px) — theo yeu
   cau nguoi dung dong bo toan site. GIU NGUYEN 16px cho DESKTOP (thanh
   nay hien tren MOI kich thuoc man hinh luc lam bai, khac voi nut "Xem
   bài đọc" chi rieng mobile, nen CAN boc rieng media query o day thay
   vi doi truc tiep). */
@media (max-width: 899px) {
  .quiz-sticky-footer {
    padding-left: var(--gutter-mobile-tight);
    padding-right: var(--gutter-mobile-tight);
  }
}
/* Noi dung BEN TRONG sticky footer — GIOI HAN chieu rong + CAN GIUA,
   khop dung "1000px" cua .quiz-layout phia tren (tranh day so cau + hang
   Phan/nut CHAY SAT MEP TRAI man hinh tren desktop rong, theo yeu cau
   nguoi dung "cho ra giua"). */
.quiz-sticky-footer__inner {
  /* KHONG con "max-width: 1000px" — GIAN SAT 2 BEN man hinh (theo yeu
     cau nguoi dung, dong bo voi .quiz-layout o tren). KHONG can them
     padding-inline rieng o day — ".quiz-sticky-footer" (the CHA bao
     ngoai) DA CO SAN "padding: var(--space-2) var(--gutter-mobile)" tu
     truoc, them padding o day se bi NHAN DOI khoang cach 2 ben khong
     can thiet. */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Nut Cau truoc/Cau sau — text DOI DONG theo SO CAU thuc te (VD "← Câu
   15" / "Câu 17 →", xem initNavButtons() trong assets/js/quiz-engine.js),
   KHONG con text tinh "Câu trước"/"Câu tiếp theo" nhu truoc. */
.quiz-btn-nav {
  white-space: nowrap;
}
.quiz-btn-nav:empty { display: none; } /* Cau dau tien khong co "Cau truoc", cau cuoi khong co "Cau sau" — an nut rong. */

/* Hang DUOI CUNG cua sticky footer — 3 COT RIENG BIET qua GRID
   "auto 1fr auto": trai (icon) va phai (nut chuyen cau) tu co theo noi
   dung, cot GIUA (the Phan) CHIEM PHAN CON LAI va TU CAN GIUA ben trong
   no — dam bao cot GIUA LUON o CHINH GIUA man hinh du 2 cot 2 ben co do
   rong khac nhau (khac "space-between" cu, chi day 2 dau, KHONG dam bao
   phan tu giua nam dung giua that su). MOI COT la 1 class RIENG BIET
   (".quiz-footer-col-left/-center/-right") — sua CSS 1 cot KHONG con anh
   huong 2 cot con lai, khac loi truoc day (gop chung vao 1 class). */
.quiz-footer-bottom {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
}

.quiz-footer-col-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
}

.quiz-footer-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  justify-self: center;
  text-align: center;
  min-width: 0; /* Cho phep cot GIUA co lai dung trong grid "1fr" khi 2 cot ben can nhieu cho — tranh tran ngang tren man hinh hep. */
  max-width: 100%;
}

.quiz-footer-col-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: end;
}

/* AN the "Phần" (cot GIUA) tren MOBILE, theo yeu cau nguoi dung — hoc
   sinh van chuyen duoc theo Phan qua bang cau hoi noi (icon "⋮⋮", moi
   Phan van co TIEU DE NHOM RO RANG trong do — xem
   ".quiz-grid-group-title" trong initQuestionGrid(), khong mat hoan
   toan chuc nang, chi mat LOI TAT nhanh o thanh footer). Doi grid tu
   "auto 1fr auto" (3 cot) sang "auto auto" (2 cot) — tranh khoang trong
   VO NGHIA o giua khi cot "1fr" con lai rong (an "display:none" khong
   tu dong lam grid co lai, van chiem dung ty le "1fr" da khai bao neu
   khong doi lai grid-template-columns). */
@media (max-width: 640px) {
  .quiz-footer-bottom {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .quiz-footer-col-center {
    display: none;
  }
}

/* Icon "⋮⋮" mo panel cau hoi — thay the HOAN TOAN nut FAB rieng biet
   position:fixed cua ban truoc (chi hien tren mobile) — gio nam TRONG
   sticky footer, dung 1 cho CO DINH duy nhat cho MOI kich thuoc man
   hinh, khop dung anh mau. */
.quiz-grid-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  cursor: pointer;
}
.quiz-grid-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.quiz-grid-toggle .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* The "Phần" — MOI: la <button> BAM DUOC (truoc la <div> tinh), vua hien
   % tien trinh VUA la nut CHUYEN Phan dang xem (loc day so cau ben canh) —
   xem chonPhanDeXem() trong assets/js/quiz-engine.js. CHI xuat hien khi
   quiz THAT SU dung tinh nang chia Phan (xem initPhanProgress(), bo qua
   neu khong co du lieu 'phan' nao — giu nguyen giao dien PHANG nhu truoc
   cho quiz cu). */
.quiz-phan-progress {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Nhieu the "Phần" tren man hinh hep -> tu xuong dong, tranh tran ngang. */
  gap: var(--space-2);
  max-width: 100%;
}
.quiz-phan-progress__item {
  flex: 0 0 auto;
  width: 150px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  background: var(--color-bg-white);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
/* TANG DO RONG khung tren DESKTOP — BU cho chu to hon (0.72rem len
   0.95rem, xem ".quiz-phan-progress__label/__count" o duoi), tranh VO
   DONG/TRAN chu trong khung 150px CO DINH qua CHAT khi chu lon hon. */
@media (min-width: 1025px) {
  .quiz-phan-progress__item {
    width: 190px;
  }
}
.quiz-phan-progress__item.is-current-phan {
  border-color: var(--color-primary);
}
/* Trang thai "dang duoc CHON" (bam vao) — VIEN + NEN nổi bat hon han chi
   "is-current-phan" (cau dang xem thuoc Phan do) — 2 trang thai nay
   THUONG trung nhau (bam Phan nao thi tu dong nhay toi cau dau Phan do),
   nhung tach RIENG de dung ("is-selected" la nguon that ve loc day so
   cau, "is-current-phan" chi la GOI Y truc quan cau hien tai dang o dau). */
.quiz-phan-progress__item.is-selected {
  border-color: var(--color-primary);
  border-width: 2px;
  background: rgba(250, 0, 60, 0.04);
}
.quiz-phan-progress__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.quiz-phan-progress__count {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  float: right;
}
/* Tang co chu tren DESKTOP cho bang nut chuyen cau (0.95rem) — theo
   yeu cau nguoi dung: "Phần I0/12... to thêm bằng với text chuyển
   câu". CHI desktop. */
@media (min-width: 1025px) {
  .quiz-phan-progress__label,
  .quiz-phan-progress__count {
    font-size: 0.95rem;
  }
}
.quiz-phan-progress__bar {
  height: 4px;
  background: var(--color-bg);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.quiz-phan-progress__fill {
  height: 100%;
  background: var(--color-primary);
  width: 0%;
  transition: width 0.2s ease;
}

/* Khoi chu NHO, DONG (loai cau hoi cua Phan dang chon + che do lam bai) —
   xem renderThongTinPhan() trong assets/js/quiz-engine.js. */
.quiz-info-text {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
/* Tang co chu tren DESKTOP cho bang nut chuyen cau (0.95rem) — theo
   yeu cau nguoi dung: "Trắc nghiệm nhiều đáp án/Học thi nghiêm túc...
   to thêm bằng với text chuyển câu". CHI desktop. */
@media (min-width: 1025px) {
  .quiz-info-text {
    font-size: 0.95rem;
  }
}
/* AN HOAN TOAN tren MOBILE (truoc day chi CAT BOT CHU o man rat hep
   480px, gio AN HAN theo yeu cau nguoi dung) — dung CHUNG breakpoint
   640px voi ".quiz-footer-col-center" (the "Phần" cung an tren mobile,
   xem o duoi) de dong bo, tranh 2 breakpoint khac nhau kho bao tri.
   Desktop (>640px) VAN GIU NGUYEN, khong doi gi. */
@media (max-width: 640px) {
  .quiz-info-text {
    display: none;
  }
}
.quiz-info-text__loai {
  display: block;
  font-weight: 600;
  color: var(--color-text);
}

/* Day so cau chay ngang, CUON DUOC — moi o la 1 nut nhay toi dung cau,
   dong bo mau/trang thai voi bang cau hoi dang luoi (xem
   renderPhanProgress() trong assets/js/quiz-engine.js). */
.quiz-strip-cauhoi {
  display: flex;
  /* GIAI QUYET TRIET DE CA 2 VAN DE (nguoi dung yêu cầu) — KHONG con
     dung 1 GIA TRI CSS TINH DUY NHAT (moi lan doi giua "center" va
     "flex-start" deu chi giai quyet DUOC 1 phia, HY SINH phia con lai):
       - "center" DEP tren desktop KHONG TRAN, nhung GAY KET CUNG tren
         mobile khi TRAN (Cau 1 khong o dung scrollLeft:0).
       - "flex-start" SUA duoc ket cung khi TRAN, nhung LAM LECH TRAI
         tren desktop KHONG TRAN (mat can doi).
     GIAI PHAP DUNG: mac dinh "flex-start" (AN TOAN, khong bao gio ket
     cung), JS (initQuestionGrid()/updateProgress() trong
     assets/js/quiz-engine.js) TU DO xem NOI DUNG CO TRAN KHONG (so
     sanh scrollWidth voi clientWidth) — CHI khi KHONG TRAN, JS THEM
     class ".is-not-overflowing" de KICH HOAT "center" (an toan tuyet
     doi, vi luc nay KHONG the co van de cuon gi ca). Dam bao CA 2
     TRUONG HOP DEU DUNG dong thoi, khong con danh doi. */
  justify-content: flex-start;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.quiz-strip-cauhoi.is-not-overflowing {
  justify-content: center;
}
.quiz-strip-cell {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
}
.quiz-strip-cell.is-answered {
  background: rgba(22, 163, 74, 0.1);
  border-color: #16a34a;
  color: #16a34a;
}
.quiz-strip-cell.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.quiz-strip-cell.is-flagged {
  box-shadow: 0 0 0 2px #f59e0b inset;
}
/* AN o KHONG thuoc Phan dang chon — xem renderPhanProgress(). Dung
   "display:none" (khong phai chi mo nhat mau) vi day so cau cua Phan
   khac KHONG lien quan gi den boi canh dang xem, an het cho gon, dung
   giong hanh vi trong anh mau nguoi dung cung cap. AP DUNG DONG NHAT
   cho CA mobile LAN desktop — nguoi dung DA HUY BO yeu cau truoc do
   ("mobile luon hien day du khong loc"), xac nhan quay lai loc GIONG
   HET desktop. */
.quiz-strip-cell.is-hidden-phan {
  display: none;
}

/* Overlay khoa noi dung chua mua */
.quiz-locked-overlay {
  position: relative;
  padding: var(--space-5) var(--space-3);
  text-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.quiz-locked-overlay__blur {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
.quiz-locked-overlay__cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: rgba(255,255,255,0.75);
}

/* =========================================================
   PAYMENT PAGE — toi gian, cam giac an toan
   ========================================================= */
.payment-box {
  max-width: 480px;
  margin: var(--space-6) auto;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}
.payment-box__qr { margin: var(--space-4) auto; max-width: 220px; }
.payment-box__amount { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); }
.payment-box__code {
  font-family: monospace;
  background: var(--color-bg);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
}
.payment-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.payment-status.pending { background: #fff3cd; color: #856404; }
.payment-status.confirmed { background: #d4edda; color: #155724; }

/* =========================================================
   DASHBOARD
   ========================================================= */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 1025px) {
  .dashboard-grid { grid-template-columns: 2fr 1fr; }
}
.dashboard-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

/* =========================================================
   TRANG CHI TIET KHOA HOC — THIET KE LAI (theo yeu cau nguoi dung:
   "giữ lại thông tin nhưng cần thiết kế lại giao diện và bố cục phù
   hợp với website giáo dục ôn thi khoá học").

   NGON NGU THIET KE dung chung voi trang chu: nen GIAY O LY + gradient
   chi o vai diem tieu cu + bong nhuom mau (xem khoi "LOP THI GIAC VO
   O LY" cuoi file). Xem single-khoa_on_luyen.php.
   ========================================================= */

.khoa-page { padding-bottom: var(--space-7); }

/* --- HERO — khoi mo dau gradient ---
   TRUOC DAY tieu de + badge nam TRO TROI tren nen trang, mo dau yeu.
   GIO gom thanh 1 khoi gradient co luoi O LY chong len (dung motif cua
   trang chu), tao diem mo dau manh va nhat quan voi toan site. */
.khoa-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin: var(--space-4) 0;
  color: #fff;
  background-color: var(--color-primary);
  /* 3 lop: luoi o ly ngang + doc (trang mo) DE LEN gradient thuong hieu. */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #fa003c, #ec407a);
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: 0 12px 32px rgba(250, 0, 60, 0.26);
}
.khoa-hero__cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.khoa-hero__cat:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }
.khoa-hero__cat .dashicons { font-size: 14px; width: 14px; height: 14px; }
.khoa-hero__title {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--space-3);
}
@media (max-width: 640px) {
  .khoa-hero { padding: var(--space-5) var(--space-4); }
  .khoa-hero__title { font-size: 1.4rem; }
}
.khoa-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}
.khoa-hero__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.khoa-hero__meta-item .dashicons { font-size: 16px; width: 16px; height: 16px; }

/* Dai 3 SO LIEU — design-prompt.md muc 6.3 yeu cau "trình bày dạng
   icon + số liệu". Day la thong tin QUYET DINH voi hoc sinh dang can
   nhac mua: khoa nay co bao nhieu chuyen de / bai / cau hoi. */
.khoa-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.khoa-stat {
  flex: 1 1 110px;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
}
.khoa-stat__num {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.khoa-stat__label {
  display: block;
  font-size: 0.78rem;
  opacity: 0.85;
  margin-top: 2px;
}

/* --- BO CUC 2 COT --- */
.khoa-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 1025px) {
  /* Box gia la CON TRUC TIEP DAU TIEN cua ".khoa-layout" (de tren
     MOBILE no hien DAU TIEN, dung thoa thuan truoc do voi nguoi dung).
     Tren DESKTOP, "grid-template-areas" dat lai dung vi tri cot phai —
     cho phep 3 phan tu con doc lap tu sap xep dung cho du chung khong
     phai cha-con cua nhau trong HTML. */
  .khoa-layout {
    grid-template-columns: 1.85fr 1fr;
    grid-template-areas:
      "main    buybox"
      "main    sidebar";
    column-gap: var(--space-5);
  }
  .khoa-buy-box--mobile-first { grid-area: buybox; }
  .khoa-layout__main { grid-area: main; }
  .khoa-layout__sidebar { grid-area: sidebar; }
}
.khoa-layout__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.khoa-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Sidebar CO DINH khi cuon (theo yeu cau nguoi dung tu truoc: "sidebar
   ở giao diện khoá học cho nằm cố định nhé"). CHI tu desktop — tren
   mobile sidebar xep DUOI theo chieu doc, sticky se gay hanh vi la. */
@media (min-width: 1025px) {
  .khoa-layout__sidebar {
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--space-3));
    max-height: calc(100vh - var(--header-height-desktop) - var(--space-4));
    overflow-y: auto;
  }
}

/* --- THE NOI DUNG --- */
.khoa-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
@media (max-width: 640px) {
  .khoa-card { padding: var(--space-4) var(--space-3); }
}
.khoa-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-3);
  /* Thanh gradient DOC ben trai tieu de — thay cho duong gach chan
     ngang truoc day. Doc ra nhu 1 muc trong vo co danh dau le. */
  border-left: 4px solid transparent;
  border-image: var(--grad-hot) 1;
}
.khoa-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.khoa-card__title-row .khoa-card__title { margin-bottom: 0; }
.khoa-card__count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* --- MUC LUC: ACCORDION tung chuyen de ---
   Xem initChuyenDeAccordion() trong assets/js/main.js. Chuyen de dau
   tien mo san qua class "is-open" gan trong HTML. */
.chuyen-de-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.chuyen-de-block:last-child { margin-bottom: 0; }
.chuyen-de-block.is-open { border-color: rgba(250, 0, 60, 0.35); }
.chuyen-de-block__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg);
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.chuyen-de-block__header:hover { background: rgba(250, 0, 60, 0.04); }
.chuyen-de-block.is-open .chuyen-de-block__header { background: rgba(250, 0, 60, 0.06); }
/* So thu tu chuyen de — o vuong gradient, giup mat dinh vi nhanh dang
   o chuyen de thu may. */
.chuyen-de-block__index {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--grad-hot);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}
.chuyen-de-block__title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}
.chuyen-de-block__count {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.chuyen-de-block__chevron {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}
.chuyen-de-block.is-open .chuyen-de-block__chevron { transform: rotate(180deg); }
.chuyen-de-block .bai-hoc-list { display: none; }
.chuyen-de-block.is-open .bai-hoc-list { display: block; }

.bai-hoc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-bg-white);
}
.bai-hoc-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.bai-hoc-item__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.bai-hoc-item__icon .dashicons { font-size: 18px; width: 18px; height: 18px; }
/* Bai DA MO — dau tich xanh la. Bai CHUA MO — icon O KHOA (design-prompt.md
   muc 6.3: "mỗi bài có icon khoá nếu chưa mua"). */
.bai-hoc-item.is-mo .bai-hoc-item__icon { color: #16a34a; }
.bai-hoc-item.is-khoa .bai-hoc-item__icon { color: var(--color-text-muted); }
.bai-hoc-item__link {
  color: var(--color-text);
  flex: 1 1 200px;
  min-width: 0;
  font-size: 0.92rem;
}
.bai-hoc-item__link:hover { color: var(--color-primary); }
.bai-hoc-item__link.locked { color: var(--color-text-muted); }
.bai-hoc-item__so-cau {
  color: var(--color-primary);
  background: rgba(250, 0, 60, 0.06);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.bai-hoc-item__owned {
  color: #16a34a;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
}
.bai-hoc-item__gia-le {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.free-badge {
  background: #16a34a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- BOX GIA (diem neo chuyen doi) --- */
.khoa-buy-box {
  position: relative;
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(250, 0, 60, 0.14);
  overflow: hidden;
}
/* Vien tren gradient — dong bo voi the khoa hoc o trang chu. */
.khoa-buy-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad-hot);
  z-index: 2;
  pointer-events: none;
}
/* Anh dai dien GIO nam TRONG box gia (truoc day la banner rieng tro
   troi giua cot trai) — box gia thanh diem neo thi giac ro rang. */
.khoa-buy-box__cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.khoa-buy-box__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.khoa-buy-box__body { padding: var(--space-4); }
.khoa-buy-box__label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 2px;
}
.khoa-buy-box__price {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.khoa-buy-box__benefits {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.khoa-buy-box__benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-text);
}
.khoa-buy-box__benefits .dashicons {
  color: var(--color-primary);
  font-size: 18px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* --- BOX "BAN SE NHAN DUOC" --- */
.khoa-benefit-box {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.khoa-benefit-box__title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 var(--space-3);
}
.khoa-benefit-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.khoa-benefit-box li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-text);
}
.khoa-benefit-box .dashicons {
  color: var(--color-secondary);
  font-size: 18px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* --- BOX HO TRO — to nen xanh nhat de tach khoi cac box trang khac,
   bao hieu "day la kenh lien he", khong phai noi dung khoa hoc. --- */
.khoa-support-box {
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.khoa-support-box__header {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-3);
}
.khoa-support-box__header .dashicons {
  color: var(--color-secondary);
  margin-top: 2px;
  flex: 0 0 auto;
}
.khoa-support-box__header p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 2px 0 0;
}
.khoa-support-box__contact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.khoa-support-box__contact .dashicons { color: var(--color-secondary); }

/* --- THANH MUA CO DINH (CHI MOBILE) ---
   design-prompt.md muc 6.3 yeu cau nut mua "sticky khi scroll (luôn
   nhìn thấy)". Desktop DA co sidebar sticky; MOBILE truoc day nut mua
   troi mat ngay khi cuon xuong muc luc, buoc hoc sinh phai cuon nguoc
   len de mua — day la ro ri chuyen doi that. */
.khoa-mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}
@media (min-width: 1025px) {
  .khoa-mobile-bar { display: none; }
}
.khoa-mobile-bar__price { display: flex; flex-direction: column; line-height: 1.2; }
.khoa-mobile-bar__label { font-size: 0.72rem; color: var(--color-text-muted); }
.khoa-mobile-bar__price strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primary);
}
.khoa-mobile-bar .btn { flex: 0 0 auto; }
/* Chua cho thanh co dinh: XEM khoi "RA SOAT MOBILE" o CUOI FILE —
   chua cho o cap BODY (khong phai ".khoa-page" nhu ban dau), vi footer
   cua site nam NGOAI ".khoa-page" nen cach cu VAN de thanh co dinh che
   mat footer. */

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-7);
  padding: var(--space-6) 0 var(--space-4);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 641px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
  .site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.site-footer__col h4 { color: var(--color-text); font-size: 0.95rem; }
.site-footer__col a { display: block; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.site-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  text-align: center;
}

/* =========================================================
   MOBILE DRAWER MENU
   ========================================================= */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}
.mobile-drawer.is-open { display: block; }
.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.mobile-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80%;
  max-width: 300px;
  background: var(--color-bg-white);
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: var(--space-3) 0;
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb .sep { margin: 0 var(--space-1); }
.breadcrumb .current { color: var(--color-text); }

/* Utility */
.text-center { text-align: center; }
/* Class AN/HIEN dung chung — CHI dat "display: none" khi CO class
   ".is-hidden", theo yeu cau nguoi dung: "danh mục con... khi bấm vào
   sẽ hiển thị các quiz của danh mục con đó" (AJAX, xem
   assets/js/main.js, initDanhMucConAjax()). */
.is-hidden { display: none !important; }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================
   SECTION "3 BƯỚC ĐƠN GIẢN" — theo yeu cau nguoi dung: "Luyện Thi
   môn Toán Hiệu Quả Với 3 Bước Đơn Giản" (trang chu, front-page.php).
   Grid 3 cot desktop, xep DOC tren mobile — moi buoc la 1 khoi don
   gian: SO THU TU + icon + tieu de + mo ta ngan.
   ========================================================= */
.how-it-works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
/* 2 cot o tablet, 3 cot CHI tu desktop. TRUOC DAY de 3 cot ngay tu
   640px — moi cot chi con ~139px cho chu, tuc ~18 ky tu/dong: doan van
   bi bop thanh dai ruy bang, rat kho doc. Doan van doc thoai mai can
   45-75 ky tu/dong. */
@media (min-width: 640px) {
  .how-it-works__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
  .how-it-works__grid { grid-template-columns: repeat(3, 1fr); }
}
.how-it-works__step {
  position: relative;
  text-align: center;
  padding: var(--space-5) var(--space-4);
}
/* SO THU TU lon, mo NHAT — dat PHIA SAU icon (giong watermark), tao
   diem nhan thi giac RO RANG cho tung buoc ma khong can duong noi/mui
   ten phuc tap giua cac buoc. */
.how-it-works__number {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--color-bg);
  z-index: 0;
  line-height: 1;
}
.how-it-works__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: var(--space-4) auto var(--space-3);
  border-radius: 50%;
  background: rgba(250, 0, 60, 0.08);
  color: var(--color-primary);
}
.how-it-works__icon .dashicons { font-size: 26px; width: 26px; height: 26px; }
.how-it-works__title {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}
.how-it-works__desc {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* =========================================================
   SECTION "HỌC SINH NÓI GÌ" — theo yeu cau nguoi dung: "Học Sinh Nói
   Gì Về Ôn Thi Edu?" (trang chu, front-page.php). Grid card cam nhan,
   dau ngoac kep lon lam diem nhan, ten + ket qua o duoi.
   ========================================================= */
.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
/* Cung ly do voi ".how-it-works__grid" o tren — 3 cot tu 640px lam
   moi the chi con ~136px cho chu. */
@media (min-width: 768px) {
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
  .testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}
.testimonial-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
}
.testimonial-card__quote-icon {
  font-size: 28px;
  width: 28px;
  height: 28px;
  color: rgba(250, 0, 60, 0.25);
  margin-bottom: var(--space-2);
}
.testimonial-card__content {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.testimonial-card__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.testimonial-card__name {
  font-size: 0.9rem;
  color: var(--color-text);
}
.testimonial-card__result {
  font-size: 0.8rem;
  color: var(--color-secondary);
}
/* =========================================================
   LOP THI GIAC "VO O LY" — theo yeu cau nguoi dung: "nghiên cứu làm
   lại giao diện cho đặc sắc hơn, thêm gradient màu sắc các thứ cho
   bắt mắt".

   Y TUONG NEN: chat lieu dac trung nhat trong the gioi mon Toan cua
   hoc sinh Viet Nam la GIAY O LY va LE DO trong quyen vo. Ca trang
   dat tren nen o ly (xem "body" o dau file), cac diem nhan dung
   gradient dung tu 4 mau thuong hieu da khoa.

   KY LUAT MAU: gradient CHI dat o vai diem tieu cu (dem nguoc o hero,
   vien tren the khoa hoc, pill dang chon, vet but da sau tieu de, so
   thu tu 3 buoc, le do the cam nhan) — KHONG trai gradient lam nen
   cho moi the, vi do la loi mon lam moi trang trong giong nhau.

   KHOI NAY DAT CUOI FILE de ghi de cac rule truoc do ma khong phai
   sua rai rac nhieu noi (tranh xung dot do dac hieu selector).
   ========================================================= */

/* --- Tieu de section: nang co chu, day weight, siet letter-spacing --- */
.section-heading-center {
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
@media (max-width: 640px) {
  .section-heading-center { font-size: 1.6rem; }
}
.product-section__title {
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* --- VET BUT DA sau tu khoa nhan trong tieu de ---
   Thay vi CHI doi mau chu (cach lam mac dinh, de doan), tu khoa duoc
   TO BANG BUT DA giong hoc sinh danh dau trong vo. Vet mau dat o 62%
   chieu cao dong nen nam DUOI duong chan chu, dung nhu but da that
   quet ngang. Dung mau hong "--color-accent" (KHONG dung mau vang
   "--color-cta" vi mau do danh RIENG cho nut mua hang). */
.product-section__title .accent,
.section-heading-center .accent {
  color: var(--color-primary);
  background-image: linear-gradient(180deg, transparent 62%, rgba(236, 64, 122, 0.28) 62%);
  padding: 0 0.12em;
}

/* --- Pill danh muc dang chon: to gradient thay vi nen phang --- */
.pill.is-active {
  background: var(--grad-hot);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(250, 0, 60, 0.28);
}

/* --- The khoa hoc / the quiz: vien tren gradient + bong nhuom mau ---
   Chi 1 duong gradient MONG o canh tren, than the giu nen trang sach
   — de luoi the van doc duoc nhu 1 danh sach, khong thanh 1 mang mau
   roi mat. Bong do khi hover NHUOM MAU thuong hieu thay vi xam mac
   dinh (rgba(0,0,0,.1) la bong xam ai cung dung). */
.course-card,
.quiz-grid-card {
  position: relative;
}
.course-card::before,
.quiz-grid-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-hot);
  z-index: 2;
  /* Dai gradient nam DE LEN mep tren cua the — neu khong tat
     "pointer-events", no se NUOT click cua nguoi dung o dai 3px do
     (the khoa hoc/quiz deu bam vao duoc de mo trang chi tiet). */
  pointer-events: none;
}
.course-card:hover,
.quiz-grid-card:hover {
  box-shadow: 0 12px 28px rgba(250, 0, 60, 0.16);
}

/* --- 3 BUOC: TRUC SO noi cac buoc ---
   3 buoc la 1 CHUOI TUAN TU that su nen danh so la hop ly. Noi chung
   bang duong NET DUT nam ngang giong TRUC SO — motif quen thuoc nhat
   trong mon Toan — thay vi de 3 the roi rac khong lien he. */
@media (min-width: 640px) {
  .how-it-works__grid { position: relative; }
  .how-it-works__grid::before {
    content: '';
    position: absolute;
    /* 84px = padding-top cua buoc (32) + margin-top icon (24) + nua
       chieu cao icon (28) — canh DUNG tam vong tron icon. */
    top: 84px;
    left: 16%;
    right: 16%;
    border-top: 2px dashed rgba(250, 0, 60, 0.22);
    z-index: 0;
  }
}
/* Vong tron icon: to gradient dac + vien trang day de "dam thung"
   duong truc so chay phia sau, tao cam giac cac buoc NAM TREN truc. */
.how-it-works__icon {
  background: var(--grad-hot);
  color: #fff;
  box-shadow: 0 0 0 8px var(--color-bg-white), 0 8px 20px rgba(250, 0, 60, 0.28);
}
/* So thu tu lon phia sau: to gradient thay vi mau xam phang. */
.how-it-works__number {
  font-size: 4.5rem;
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.16;
  letter-spacing: -0.04em;
}

/* --- The cam nhan hoc sinh: to tren GIAY O LY + LE DO ---
   Cam nhan cua hoc sinh dat trung tren giay o ly co le do — dung nhu
   trang vo that. Day la cho y tuong nen tra ve ro nhat. */
.testimonial-card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-white);
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--color-border);
  padding-left: var(--space-5);
}
/* LE DO — duong ke doc mau do sat mep trai, dung nhu le trong vo hoc
   sinh Viet Nam. */
.testimonial-card::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--grad-hot);
  opacity: 0.45;
  pointer-events: none;
}
.testimonial-card__quote-icon {
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.testimonial-card__result {
  font-weight: 600;
}

/* --- Ton trong nguoi dung tat hieu ung chuyen dong --- */
@media (prefers-reduced-motion: reduce) {
  .course-card,
  .quiz-grid-card,
  .course-card:hover,
  .quiz-grid-card:hover {
    transition: none;
    transform: none;
  }
}

/* --- 4 DAC DIEM (duoi phan "3 bước") ---
   PHAN BIET RO voi khoi "3 bước" ngay tren: o day dung hinh VUONG BO
   GOC (khong phai vong TRON), canh TRAI (khong can GIUA), KHONG danh
   so — vi day la 4 dac diem SONG SONG, khong phai chuoi tuan tu.
   Luoi 2 COT (khong phai 4) de dong chu khong bi qua hep, de doc.
   Gradient LUAN PHIEN nong/lanh giua cac o — tao mau sac nhung van co
   quy luat, khong loan mau. */
.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5) var(--space-4);
}
/* 2 cot tu 768px (khong phai 640px) — moi o co icon 48px + khoang
   cach, o 640px phan chu chi con ~236px, hoi chat de doc. */
@media (min-width: 768px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
}
.features__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.features__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--grad-hot);
  color: #fff;
  box-shadow: 0 6px 16px rgba(250, 0, 60, 0.24);
}
.features__item:nth-child(even) .features__icon {
  background: var(--grad-cool);
  box-shadow: 0 6px 16px rgba(12, 147, 244, 0.24);
}
.features__icon .dashicons { font-size: 24px; width: 24px; height: 24px; }
.features__body { min-width: 0; }
.features__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.features__desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- DONG BO CHIEU RONG TREN MOBILE ---
   Theo yeu cau nguoi dung: "chiều rộng của các phần ở mobile đồng bộ
   với banner và đếm ngược kì thi".

   NGUYEN NHAN LECH: banner (".hero__visual") va dem nguoc nam TRUC
   TIEP trong ".container" nen chi cach mep man hinh dung 4px
   ("--gutter-mobile-tight"). Trong khi do cac box ".product-section"
   co THEM dem trong 32px ("--space-5") tu luc lam "box nen" — khien
   noi dung ben trong bi thut vao 36px, HEP HON HAN banner.

   CACH SUA: tren mobile/tablet (duoi 1025px, dung nguong ma
   ".container" doi gutter), BO dem NGANG cua box — noi dung se bat
   dau dung 4px giong het banner. Dem DOC giu nguyen de cac box van co
   khoang tho tren/duoi. Desktop KHONG doi (van 32px, vi man hinh rong
   thi dem trong lam box de nhin hon). */
@media (max-width: 1024px) {
  .product-section {
    padding-left: 0;
    padding-right: 0;
  }
  /* Cac khoi NHIEU CHU (3 buoc, 4 dac diem, cam nhan) van can 1 chut
     dem de dong chu khong dinh sat mep man hinh gay kho doc — dung
     "--gutter-mobile-tight" (4px) de TONG khoang cach van dung 8px,
     gan nhu trung khit banner, chenh khong dang ke. */
  .how-it-works,
  .features,
  .testimonials {
    padding-left: var(--gutter-mobile-tight);
    padding-right: var(--gutter-mobile-tight);
  }
}

/* =========================================================
   GIAO DIEN LAM BAI — THIET KE LAI (theo yeu cau nguoi dung: "làm lại
   ... giao diện thi quiz").

   Y TUONG: moi cau hoi trinh bay nhu 1 TRANG VO LAM BAI — the trang co
   LE DO ben trai, dat tren nen giay o ly cua trang. Dung dung motif da
   dung xuyen suot site, va lan nay dac biet HOP NGU CANH: hoc sinh
   dang THUC SU lam bai.

   KHOI NAY CHI doi phan TRINH BAY (mau, khoang cach, kich thuoc) —
   KHONG dung toi cac rule TRANG THAI da duoc tinh chinh ky qua nhieu
   phien (".is-dung", ".is-sai", ":checked", ".is-checked-fallback",
   ":focus-visible"...), tranh lam hong hanh vi dang chay tot.
   ========================================================= */

/* --- Thanh tren --- */
.quiz-topbar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* --- The cau hoi ---
   THANH DOC (le do) BEN TRAI DA BO theo yeu cau nguoi dung: "bỏ cái
   thanh dọc ở box câu hỏi bên trái đi". Bo no cung cho phep dua dem
   ngang ve DOI XUNG va NHO HON — truoc day phai chua rieng 1 khoang
   trai rong de ke thanh doc, an mat be rong noi dung tren mobile
   (chinh la nguyen nhan "box câu hỏi bị tràn màn hình"). */
.quiz-question {
  position: relative;
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
@media (max-width: 640px) {
  /* Dem ngang chi con 8px MOI BEN — tra lai gan nhu toan bo be rong
     cho noi dung (336/352px tren man 360px). Bang so lieu va cong thuc
     dai vi the co du cho hien, khong bi day tran. */
  .quiz-question {
    padding: var(--space-3) var(--space-2);
  }
}

/* So thu tu cau — badge gradient, de mat dinh vi nhanh dang o cau nao. */
.quiz-question__label {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--grad-hot);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* --- Dap an: o bam TO HON, trang thai chon RO HON --- */
.quiz-option {
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-width: 2px;
  margin-bottom: var(--space-3);
}
.quiz-option:hover {
  background: rgba(12, 147, 244, 0.04);
}
.quiz-option__letter {
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
  border: 1px solid var(--color-border);
  transition: background 0.15s ease, color 0.15s ease;
}
/* Dap an DANG CHON — vien + chu cai to gradient, ro rang hon han ban
   cu (chi doi mau vien nhat). */
.quiz-option:has(.quiz-option__input:checked) .quiz-option__letter {
  background: var(--grad-hot);
  border-color: transparent;
  color: #fff;
}
/* TAI KHANG DINH mau CHAM DIEM — BAT BUOC, khong duoc bo.
   LOI DA TU PHAT HIEN khi tinh do dac hieu: rule ":has(...)" ngay tren
   co do dac hieu (0,4,0) — CAO HON rule cham diem co san
   ".quiz-option.is-dung .quiz-option__letter" (0,3,0). Neu khong co
   khoi nay, SAU KHI NOP BAI dap an SAI da chon van hien mau gradient
   do-hong thay vi mau DO bao sai -> hoc sinh doc NHAM ket qua.
   2 selector duoi day co do dac hieu (0,5,0) — cao hon ca 2, dam bao
   trang thai cham diem LUON THANG moi trang thai chon. */
.quiz-option.is-dung .quiz-option__input:checked + .quiz-option__letter,
.quiz-option.is-dung:has(.quiz-option__input) .quiz-option__letter {
  background: #16a34a;
  border-color: transparent;
  color: #fff;
}
.quiz-option.is-sai .quiz-option__input:checked + .quiz-option__letter,
.quiz-option.is-sai:has(.quiz-option__input) .quiz-option__letter {
  background: #dc2626;
  border-color: transparent;
  color: #fff;
}

/* --- Thanh duoi cung --- */
.quiz-sticky-footer {
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.07);
}

/* --- Tinh chinh theo yeu cau nguoi dung: "cho box câu hỏi rộng ra
   xíu, với cái thanh ở giữa khi bật nháp nhỏ lại" --- */

@media (min-width: 1025px) {
  /* THANH CHIA giua de thi va nhap — NHO LAI.
     NGUYEN NHAN no trong TO: icon dung class ".dashicons", ma
     ".dashicons" mac dinh co "width: 20px; height: 20px" — trong khi
     thanh chia chi rong 1px, nen icon TRAN RA ~10px MOI BEN, nhin nhu
     1 khoi to lo lung giua man hinh. Rule cu CHI dat "font-size",
     KHONG dat lai width/height nen khong khac phuc duoc.
     GIO: thu nho ca font-size LAN width/height, va giam do dam mau —
     thanh chia tro thanh 1 tay nam kin dao, khong con cuop su chu y
     khoi noi dung bai lam. */
  .quiz-tools-divider__icon {
    font-size: 10px;
    width: 10px;
    height: 10px;
    opacity: 0.5;
  }
  /* Khi RE CHUOT/dang keo thi hien ro hon — van cho nguoi dung biet
     day la thanh keo duoc, chi la luc BINH THUONG thi kin dao. */
  .quiz-tools-divider:hover .quiz-tools-divider__icon,
  .quiz-tools-divider.is-dragging .quiz-tools-divider__icon {
    opacity: 1;
  }
}

/* =========================================================
   RA SOAT MOBILE — cac diem gay tren man hinh nho, phat hien khi tu
   kiem tra lai bang so do cu the (khong doan bang mat).
   ========================================================= */
@media (max-width: 640px) {
  /* Dai 3 so lieu o hero TRANG KHOA HOC — truoc day moi o doi toi
     thieu 110px, tong 3 o + khoang cach = 362px > 304px kha dung tren
     man 360px, nen BI XUONG DONG thanh 2 o tren + 1 o duoi, nhin lech
     han. Bo rang buoc be rong toi thieu (flex-basis 0) de 3 o CHIA DEU
     va LUON nam gon 1 hang; giam co so cho vua. */
  .khoa-hero__stats { gap: var(--space-2); }
  .khoa-stat {
    flex: 1 1 0;
    padding: var(--space-2) 4px;
  }
  .khoa-stat__num { font-size: 1.3rem; }
  .khoa-stat__label { font-size: 0.7rem; }

  /* Dai so lieu o hero TRANG DANH MUC — khoang cach 32px qua rong tren
     man hinh hep, lam 3 muc de bi day xuong dong. */
  .dm-hero__stats { gap: var(--space-4); }
  .dm-stat__num { font-size: 1.35rem; }
}

/* Thanh mua CO DINH o trang khoa hoc noi tren cung — no CHE MAT phan
   cuoi trang khi cuon het xuong. Truoc day chi chua cho bang
   "padding-bottom" tren ".khoa-page", NHUNG footer cua site nam NGOAI
   khoi do nen VAN bi che. Chua cho o cap BODY moi xu ly triet de. */
@media (max-width: 1024px) {
  body:has(.khoa-mobile-bar) { padding-bottom: 84px; }
}

/* --- CHONG TRAN NGANG: chuoi dai KHONG NGAT DUOC ---
   RA SOAT phat hien: toan bo file KHONG CO bat ky rule "overflow-wrap"
   / "word-break" nao. Bang <table> va cong thuc MathJax da duoc chan
   tran tu truoc (deu co "overflow-x: auto" rieng), NHUNG 1 CHUOI DAI
   LIEN TUC KHONG CO DAU CACH thi khong co gi chan: vi du cong thuc go
   thang bang chu, duong link dan vao de bai, hoac day so dai. Chuoi do
   se DAY RONG khoi cha ra qua man hinh.
   "overflow-wrap: anywhere" cho phep NGAT giua chuoi KHI VA CHI KHI
   khong con cach nao khac — chu binh thuong VAN xuong dong theo tu nhu
   thuong, khong bi ngat bua bai. */
.quiz-question__text,
.quiz-option__text,
.quiz-dungsai-item__text,
.quiz-question__loigiai-tucthi,
.quiz-tuluan-loigiai,
.bai-hoc-item__link,
.khoa-card .content-desc {
  overflow-wrap: anywhere;
}

/* --- CAN BANG GIAO DIEN GIUA CAC LOAI CAU HOI ---
   Theo yeu cau nguoi dung: "cân bằng lại giao diện thi các loại thi".
   Truoc day moi loai mot kieu: o dap an trac nghiem vien 2px va dem
   16/24px, con o dung-sai vien 1px va dem 16px — dat canh nhau trong
   cung 1 de thi trong lech han. Gio dung CHUNG do day vien va dem. */
.quiz-dungsai-item {
  border-width: 2px;
  padding: var(--space-3) var(--space-4);
}

@media (max-width: 640px) {
  /* Tren mobile, dem ngang 24px cua o dap an an mat qua nhieu be rong
     (chinh la phan "nhập đáp án bị tràn"). Giam ve 16px, thu nho vong
     tron chu cai va khoang cach — tra lai ~44px cho phan chu. */
  .quiz-option,
  .quiz-dungsai-item {
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .quiz-option__letter {
    width: 28px;
    height: 28px;
    font-size: 0.82rem;
  }
  /* O nhap dap an ngan: bo gioi han 240px tren man hep de o nhap dung
     tron chieu rong kha dung, de bam va de doc so vua go hon. */
}

/* =========================================================
   CAN BANG GIAO DIEN DAP AN — theo yeu cau nguoi dung: "cân bằng lại
   giao diện đáp án".

   RA SOAT phat hien 4 diem 2 loai dap an (trac nghiem / dung-sai)
   TRONG KHAC HAN NHAU du nam canh nhau trong CUNG 1 de:
     1. Nhan: trac nghiem co chu cai trong VONG TRON, dung-sai chi la
        chu "a)" tron -> nhin nhu 2 he thong khac nhau.
     2. Canh doc: trac nghiem canh GIUA, dung-sai canh TREN.
     3. Khoang cach nhan-chu: 16px vs 8px.
     4. Khoang cach giua cac muc: 16px vs 8px.
   ========================================================= */

/* 1. Nhan dung-sai (a/b/c/d) to VONG TRON giong het trac nghiem. */
.quiz-dungsai-item__label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* 2-4. Dong bo canh doc + khoang cach cho CA HAI loai.
   Doi sang canh TREN (khong phai canh GIUA): dap an dai nhieu dong thi
   canh giua se lam vong tron chu cai troi lo lung o giua khoi chu,
   nhin lech han so voi dong dau tien. */
.quiz-option,
.quiz-dungsai-item {
  align-items: flex-start;
  gap: var(--space-3);
}
.quiz-option { margin-bottom: var(--space-3); }
.quiz-dungsai-list { gap: var(--space-3); }

/* Chu dap an canh dung dong dau voi vong tron chu cai — vong tron cao
   32px, dong chu dau cao ~24px, nen day chu xuong 4px cho 2 tam trung
   nhau khi dap an CHI CO 1 DONG (dap an nhieu dong van canh tren dung
   nhu mong doi). */
.quiz-option__text,
.quiz-dungsai-item__text {
  padding-top: 4px;
}

@media (max-width: 640px) {
  /* Man hep: vong tron nho lai cho ca 2 loai, khoang cach thu gon —
     giu dung nguyen tac "2 loai giong het nhau". */
  .quiz-dungsai-item__label {
    width: 28px;
    height: 28px;
    font-size: 0.82rem;
  }
  .quiz-option__text,
  .quiz-dungsai-item__text {
    padding-top: 2px;
  }
}

/* Nhan dung-sai DOI MAU khi cham diem — dong bo voi vong tron chu cai
   cua trac nghiem (".quiz-option.is-dung .quiz-option__letter").
   TRUOC DAY dung-sai CHI doi vien + nen o (".is-correct"/".is-incorrect"),
   nhan van xam nguyen. Khi nhan con la chu "a)" tron thi khong ai de y,
   NHUNG gio no da thanh VONG TRON giong trac nghiem — neu khong doi mau
   theo se lo ro su thieu nhat quan giua 2 loai cau hoi.
   LUU Y: dung-sai dung ten class KHAC voi trac nghiem
   (".is-correct"/".is-incorrect" chu khong phai ".is-dung"/".is-sai") —
   day la cach dat ten co san cua du an, giu nguyen de khong pha JS. */
.quiz-dungsai-item.is-correct .quiz-dungsai-item__label {
  background: #16a34a;
  border-color: transparent;
  color: #fff;
}
.quiz-dungsai-item.is-incorrect .quiz-dungsai-item__label {
  background: var(--color-incorrect);
  border-color: transparent;
  color: #fff;
}

/* =========================================================
   CHAN TRAN TONG QUAT TRONG THE CAU HOI
   Nguoi dung bao "box nhập đáp án đang bị tràn ra" tren mobile. Ra
   soat tung rule cho thay MOI o nhap deu da "width: 100%" voi
   "box-sizing: border-box" — ve ly thuyet khong the tran. Nghia la
   nguyen nhan den tu thu KHONG NAM TRONG CSS da ra soat: noi dung
   thuc te cua de (cong thuc dai, bang rong, anh kho lon), hoac 1 phan
   tu con nao do co kich thuoc noi tai lon hon khung.
   Thay vi doan tiep, dat 1 LOP CHAN CHUNG: KHONG phan tu con nao
   trong the cau hoi duoc phep rong hon chinh the do. Cach nay bat
   duoc MOI nguyen nhan, ke ca nguyen nhan chua biet.
   ========================================================= */
.quiz-question > *,
.quiz-question input,
.quiz-question textarea,
.quiz-question select,
.quiz-question img,
.quiz-question pre,
.quiz-question iframe {
  max-width: 100%;
}
/* Phan tu con trong flex mac dinh KHONG co lai duoi kich thuoc noi
   tai cua no ("min-width: auto") — day la nguyen nhan tran pho bien
   nhat va kho thay nhat trong bo cuc flex. Dat ve 0 cho cac vung chua
   noi dung do admin nhap (co the chua chuoi/cong thuc dai bat ky). */
.quiz-option,
.quiz-option__text,
.quiz-dungsai-item,
.quiz-dungsai-item__text,
.quiz-question__header,
.quiz-question__header-left {
  min-width: 0;
}
/* Bang rong hon khung: cho CUON NGANG TRONG chinh o cua no thay vi
   day rong ca the cau hoi. (Bang trong cau hoi/loi giai da co san co
   che nay; o day bo sung cho bang nam trong DAP AN va Y DUNG-SAI —
   truoc day chua co.) */
.quiz-option__text table,
.quiz-dungsai-item__text table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

/* =========================================================
   O NHAP DAP AN NGAN — SUA LOI "thò ra ngoài khung" tren mobile
   (nguoi dung xac nhan: bi o dang cau "Trả lời ngắn", thu bi tran la
   O NHAP CHU).

   NGUYEN NHAN: o nhap rong DUNG 100% khung cha nen 2 canh cua no NAM
   SAT mep trong cua the cau hoi. Khi hoc sinh BAM VAO de go dap an,
   trinh duyet ve VIEN FOCUS (rule "input:focus-visible" o dau file):
   vien day 2px, lai co "outline-offset: 2px" — tuc 4px nam HOAN TOAN
   BEN NGOAI o nhap. Voi the cau hoi chi con 8px dem ngang tren mobile,
   vien nay an het vao phan dem va TRAN ra ngoai vien the, nhin dung
   nhu "o nhap tho ra khoi khung tong dang sau".

   Vien focus la yeu cau tro nang (design-prompt.md muc 7) nen KHONG
   BO — thay vao do: (a) khong de o nhap rong het 100% nua, (b) keo
   vien focus sat vao trong.
   ========================================================= */
/* Keo vien focus SAT vao o nhap (offset 2px -> 1px) — van thay ro khi
   dieu huong bang ban phim, nhung chiem it khong gian ben ngoai hon. */
.quiz-question input:focus-visible,
.quiz-question textarea:focus-visible {
  outline-offset: 1px;
}

/* =========================================================
   MAN HINH KET QUA (sau khi nop bai) — SUA LE TREN MOBILE
   Theo yeu cau nguoi dung: "độ rộng của các câu hỏi đáp án chưa khớp
   với độ rộng thiết bị mobile".

   NGUYEN NHAN: tren man hinh ket qua co HAI khoi xep chong nhau nhung
   LE KHAC NHAU:
     - Khoi tong ket (diem so + 4 the thong ke): nam trong
       ".quiz-result-main" — KHONG co dem ngang nao -> DINH SAT 0px vao
       mep man hinh.
     - Khoi cau hoi xem lai (".quiz-wrap"): co dem ngang 4px.
   Lech 4px giua 2 khoi xep ngay tren duoi nhau nen nhin ra ngay. Va
   khoi tong ket dinh sat tuyet doi 0px cung khong dep tren mobile.

   CACH SUA: dat dem ngang o DUNG MOT LOP DUY NHAT — tren
   ".quiz-result-page" (khoi cha chung cua ca hai) — va BO dem cua
   ".quiz-wrap" trong che do ket qua. Nho vay MOI KHOI deu thang hang
   voi nhau va co le deu voi mep may.
   ========================================================= */
.quiz-result-page.has-result {
  padding-left: var(--gutter-mobile-tight);
  padding-right: var(--gutter-mobile-tight);
}
@media (min-width: 1025px) {
  .quiz-result-page.has-result {
    padding-left: var(--gutter-desktop);
    padding-right: var(--gutter-desktop);
  }
}
/* Bo dem ngang cua ".quiz-wrap" khi xem ket qua — dem da do khoi cha
   phu trach o tren. Dung "body.has-result" (0,2,1) + "!important" vi
   rule goc ".has-result .quiz-wrap" (0,2,0) CUNG dang dung "!important"
   — phai co do dac hieu CAO HON moi ghi de duoc. */
body.has-result .quiz-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Dem duoi 190px la de chua cho THANH DUOI CUNG khi dang lam bai.
     Khi xem ket qua thanh do DA BI AN ("body.has-result
     .quiz-sticky-footer { display: none }") — giu 190px chi tao 1
     khoang trong lon vo nghia o cuoi trang, tren mobile phai cuon
     them mot doan dai moi het. */
  padding-bottom: var(--space-6) !important;
}

/* =========================================================
   TU CHAM CAU TU LUAN — theo yeu cau nguoi dung: "với các đề tự luận
   cần tự chấm điểm theo thang điểm cũng cần phải thông báo cho user
   biết để tăng trải nghiệm người dùng", va diem tu cham CO tinh vao
   diem tong.
   ========================================================= */

/* Bao TRUOC, ngay luc dang lam bai — hoc sinh biet cau nay se tu cham,
   khong bat ngo luc nop. */
.quiz-tuluan-thongbao {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--color-text);
}
.quiz-tuluan-thongbao .dashicons {
  color: var(--color-secondary);
  flex: 0 0 auto;
}

/* Thanh nhac o DAU man hinh ket qua — noi ro diem tong CHUA gom phan
   tu luan, va cho nut cong vao. */
.quiz-thanh-tucham {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  /* Vien va nen mau CAM/VANG — bao hieu "con viec chua xong", khac han
     mau do thuong hieu (dung cho diem so) va mau xanh (thong tin). */
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.quiz-thanh-tucham__noi-dung { flex: 1 1 260px; min-width: 0; }
.quiz-thanh-tucham__noi-dung strong { display: block; margin-bottom: 4px; }
.quiz-thanh-tucham__noi-dung p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.quiz-thanh-tucham__tong {
  margin-top: var(--space-2) !important;
  color: var(--color-text) !important;
}
.quiz-thanh-tucham__tong strong { display: inline; font-size: 1.1rem; color: var(--color-primary); }
/* Sau khi da cong diem — doi sang tong XANH LA bao "xong viec". */
.quiz-thanh-tucham.is-xong {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

/* Khoi tu cham gan duoi tung cau tu luan. */
.quiz-tucham {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 2px dashed #fde68a;
  border-radius: var(--radius-sm);
  background: #fffbeb;
}
.quiz-tucham__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.quiz-tucham__badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
}
.quiz-tucham__diem { font-size: 0.9rem; }
.quiz-tucham__diem strong { font-size: 1.15rem; color: var(--color-primary); }
.quiz-tucham__huong-dan {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.quiz-tucham__list { list-style: none; margin: 0; padding: 0; }
.quiz-tucham__list li { margin-bottom: var(--space-2); }
.quiz-tucham__list label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 0.9rem;
}
.quiz-tucham__list label:hover { border-color: #f59e0b; }
/* O tick TO HON mac dinh — de bam bang ngon tay tren dien thoai. */
.quiz-tucham__list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #16a34a;
}
.quiz-tucham__y { flex: 1 1 auto; min-width: 0; }
.quiz-tucham__moc-diem {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

/* --- NHAN "Bạn chọn" tren dap an hoc sinh da tick ---
   Theo yeu cau nguoi dung: "hiển thị đáp án đúng và sai tôi không biết
   câu nào là câu tôi chọn". Mau nen doi theo ket qua: xanh neu chon
   dung, do neu chon sai — nen chi liec 1 cai la biet ngay minh chon
   cai nao va co dung khong. */
.quiz-option__ban-chon {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-text-muted);
  color: #fff;
  white-space: nowrap;
}
.quiz-option.is-dung .quiz-option__ban-chon { background: #16a34a; }
.quiz-option.is-sai .quiz-option__ban-chon { background: #dc2626; }
/* Vien DAY HON o dap an da chon — them 1 tang phan biet nua ngoai nhan
   chu, huu ich cho nguoi kho phan biet mau. */
.quiz-option.is-da-chon { border-width: 3px; }

/* Ghi chu cau bo trong. */
.quiz-result-note--chua-lam {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.88rem;
}

/* Phan to VIEN + DAI MAU DOC cho ca THE CAU HOI DA BI BO — do la cach
   hieu SAI y nguoi dung o lan truoc. Nguoi dung noi ro: "ý tôi không
   phải cái viền bên trái, mà viền với nền trong class này nè
   quiz-option ... is-sai is-da-chon" — tuc diem nhan phai nam o CHINH
   O DAP AN, khong phai o khung cau hoi. Xem ".quiz-option.is-sai" o
   tren. */



/* =========================================================
   TRANG TAI KHOAN — xem page-dashboard.php, inc/tai-khoan.php.
   ========================================================= */
.tk-page { padding-bottom: var(--space-7); }

/* --- Dau trang: avatar + ten + nut thoat --- */
.tk-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-white);
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: var(--shadow-card);
}
.tk-hero__avatar img { border-radius: 50%; display: block; }
.tk-hero__info { flex: 1 1 180px; min-width: 0; }
.tk-hero__ten { font-size: 1.35rem; font-weight: 800; margin: 0; }
.tk-hero__email { margin: 2px 0 0; font-size: 0.88rem; color: var(--color-text-muted); }
.tk-hero__thoat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.tk-hero__thoat:hover { color: var(--color-primary); }

/* --- Thanh tab: cuon ngang duoc tren dien thoai --- */
.tk-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
}
.tk-tabs::-webkit-scrollbar { display: none; }
.tk-tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.tk-tab:hover { background: var(--color-bg); color: var(--color-text); }
.tk-tab.is-active {
  background: var(--grad-hot);
  color: #fff;
  box-shadow: 0 4px 12px rgba(250, 0, 60, 0.26);
}

/* Panel: an het, chi hien panel dang mo. */
.tk-panel { display: none; }
.tk-panel.is-active { display: block; }

.tk-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.tk-card__title { font-size: 1.05rem; font-weight: 800; margin: 0 0 var(--space-3); }

/* --- Khoi "Hoc tiep" — viec tiep theo nen lam, dat TREN CUNG --- */
.tk-tiep-tuc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  color: #fff;
  background-color: var(--color-primary);
  background-image: var(--grad-hot);
  box-shadow: 0 10px 26px rgba(250, 0, 60, 0.26);
}
.tk-tiep-tuc__nhan { display: block; font-size: 0.78rem; opacity: 0.9; }
.tk-tiep-tuc strong { font-size: 1.05rem; }
.tk-tiep-tuc .btn { background: #fff; color: var(--color-primary); }

/* --- Dai so lieu nhanh --- */
.tk-so-lieu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
@media (min-width: 768px) {
  .tk-so-lieu { grid-template-columns: repeat(4, 1fr); }
}
.tk-so-lieu li {
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-card);
}
.tk-so-lieu__num {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.tk-so-lieu__label { display: block; font-size: 0.78rem; color: var(--color-text-muted); }

/* --- Bieu do tien bo dang CHUNG KHOAN ---
   Duong "gia" = diem trung binh moi ngay; cot "khoi luong" ben duoi =
   so bai lam trong ngay. Hai thu bo sung cho nhau: diem cao ma chi lam
   1 bai khong cung nghia bang diem cao khi lam 5 bai.
   Ve bang SVG thuan, KHONG nap thu vien do thi — trang tai khoan khong
   dang de tai them vai tram KB JavaScript chi de ve 1 duong gap khuc. */
.tb-do {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.tb-do__ke { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3 3; }
.tb-do__nhan { font-size: 10px; fill: var(--color-text-muted); }
.tb-do__ngay { font-size: 9px; fill: var(--color-text-muted); }
/* O bat chuot trong suot, RONG bang khoang cach giua 2 moc — cham tron
   chi 3,5px nen rat kho tro trung, nhat la tren man cam ung. */
.tb-do__vung { fill: transparent; cursor: pointer; }
.tb-do__vung:hover { fill: rgba(12, 147, 244, 0.06); }
.tb-do__duong {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Vung to duoi duong — mau do thuoc tinh fill="url(#...)" trong the
   SVG quyet dinh (chuyen sac theo xu huong), o day chi chan vien. */
.tb-do__to { stroke: none; }
.tb-do__cham { stroke: var(--color-bg-white); stroke-width: 1.5; }

.tb-chu-thich {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-4);
}


.tb-so-lieu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .tb-so-lieu { grid-template-columns: repeat(4, 1fr); }
}
.tb-so-lieu li {
  text-align: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.tb-so-lieu strong { display: block; font-size: 1.15rem; font-weight: 800; }
.tb-so-lieu span { font-size: 0.72rem; color: var(--color-text-muted); }
/* Muc "so voi nua dau" to mau theo huong — quy uoc quen thuoc cua
   bieu do chung khoan: xanh la tang, do la giam. */
.tb-so-lieu li.is-len strong { color: #16a34a; }
.tb-so-lieu li.is-xuong strong { color: #dc2626; }
.tb-ghi-chu { font-size: 0.8rem; color: var(--color-text-muted); margin: var(--space-3) 0 0; }

.tk-muc-do { margin-bottom: var(--space-3); }
.tk-muc-do:last-child { margin-bottom: 0; }
.tk-muc-do__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}

/* --- Khoa hoc --- */
.tk-khoa__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.tk-khoa__pct { font-weight: 800; color: var(--color-primary); }
.tk-khoa__meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-3);
}

/* --- Bang du lieu: tren MOBILE doi thanh dang the xep doc ---
   Bang nhieu cot khong the doc noi tren man 360px. Thay vi cho cuon
   ngang (rat kho thao tac), moi HANG bien thanh 1 KHOI, moi o co nhan
   rieng lay tu thuoc tinh "data-nhan" trong HTML. */
.tk-bang { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tk-bang th,
.tk-bang td { padding: var(--space-2); text-align: left; }
.tk-bang thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
}
.tk-bang tbody tr { border-bottom: 1px solid var(--color-border); }
.tk-bang tbody tr:last-child { border-bottom: none; }
@media (max-width: 640px) {
  .tk-bang thead { display: none; }
  .tk-bang tbody tr {
    display: block;
    padding: var(--space-3) 0;
  }
  .tk-bang td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 4px 0;
  }
  .tk-bang td::before {
    content: attr(data-nhan);
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--color-text-muted);
  }
}
.tk-diem.is-tot { color: #16a34a; }
.tk-diem.is-kem { color: #dc2626; }
.tk-diem__chi-tiet { font-size: 0.78rem; color: var(--color-text-muted); margin-left: 4px; }
.tk-trang-thai {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.tk-trang-thai.is-xong { background: #dcfce7; color: #166534; }
.tk-trang-thai.is-cho { background: #fef3c7; color: #92400e; }

/* --- Danh sach de da luu --- */
.tk-danh-sach { list-style: none; margin: 0; padding: 0; }
.tk-danh-sach__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-card);
}
.tk-danh-sach__meta { display: block; font-size: 0.78rem; color: var(--color-text-muted); }

/* --- Trang thai rong --- */
.tk-trong-box {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.tk-trong-box .dashicons {
  font-size: 40px;
  width: 40px;
  height: 40px;
  color: var(--color-border);
}
.tk-trong-box p { margin: var(--space-3) 0; color: var(--color-text-muted); }
.tk-trong { color: var(--color-text-muted); font-size: 0.88rem; margin: 0; }

/* --- Form thong tin --- */
.tk-form__hang { margin-bottom: var(--space-3); }
.tk-form__hang label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.tk-form__hang input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  height: var(--input-height);
  padding: 0 var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  /* >= 16px: tranh iOS tu phong to trang khi bam vao o nhap. */
  font-size: 1rem;
}
.tk-form__hang input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(250, 0, 60, 0.12);
  outline: none;
}
.tk-form__chia { border: none; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }
.tk-form__ghi-chu { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.tk-thong-bao {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  font-size: 0.88rem;
}
.tk-thong-bao.is-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.tk-thong-bao.is-loi { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.tk-thong-bao p { margin: 0 0 4px; }
.tk-thong-bao p:last-child { margin-bottom: 0; }
.tk-canh-bao { padding: var(--space-6) 0; text-align: center; }

/* =========================================================
   TRANG DANG NHAP / DANG KY — thay cho wp-login.php.
   Xem page-dang-nhap.php, inc/dang-nhap.php.
   ========================================================= */
.dn-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--gutter-mobile-tight) var(--space-7);
}
.dn-box {
  width: 100%;
  max-width: 440px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-white);
  /* Nen giay o ly — dong bo motif dung xuyen suot site. */
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
@media (max-width: 640px) {
  .dn-box { padding: var(--space-4) var(--space-3); }
}
.dn-box__head { text-align: center; margin-bottom: var(--space-4); }
.dn-box__title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.dn-box__sub {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 0;
}

.dn-form__hang { margin-bottom: var(--space-3); }
.dn-form__hang label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.dn-form__hang input[type="text"],
.dn-form__hang input[type="email"],
.dn-form__hang input[type="password"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  /* >= 16px: neu nho hon, iOS TU DONG PHONG TO ca trang khi bam vao o
     nhap — dang o man dang nhap ma bi phong to la trai nghiem rat te. */
  font-size: 1rem;
  background: var(--color-bg-white);
}
.dn-form__hang input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(250, 0, 60, 0.12);
  outline: none;
}
.dn-form__goi-y {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.dn-form__dong-phu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 0.85rem;
}
.dn-nho-toi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.dn-nho-toi input { width: 18px; height: 18px; accent-color: var(--color-primary); }

.dn-thong-bao {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-size: 0.88rem;
}
.dn-thong-bao p { margin: 0 0 4px; }
.dn-thong-bao p:last-child { margin-bottom: 0; }
.dn-thong-bao.is-loi { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.dn-thong-bao.is-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }

.dn-chuyen {
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.dn-chuyen a { font-weight: 600; }

/* =========================================================
   HEADER & FOOTER — THIET KE LAI (theo yeu cau nguoi dung: "làm lại
   giao diện header và footer cho phù hợp, từ cách trình bày bố cục màu
   sắc").
   ========================================================= */

/* --- HEADER ---
   Giu nguyen bo cuc 1 hang (logo | menu | tim kiem | tai khoan) da chot
   o cac phien truoc, chi lam lai phan trinh bay. */
.site-header {
  /* Vien duoi mo dan thay cho duong ke 1px cung — khi CHUA cuon, header
     hoa vao trang; khi DA cuon moi noi len bang bong do (xem
     ".is-scrolled" ben duoi). */
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* O tim kiem: bo vien vuong, doi thanh vien bo tron co icon ben trong —
   de nhan ra la o tim kiem ngay ca khi chua doc chu goi y. */
.site-header__search { position: relative; }
.site-header__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.site-header__search input[type="search"] {
  padding-left: 34px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.site-header__search input[type="search"]:focus {
  border-color: var(--color-primary);
  background: var(--color-bg-white);
  outline: none;
}

/* Muc menu DANG XEM — WordPress tu gan class "current-menu-item".
   Gach chan gradient thay vi chi doi mau chu: de nhan ra hon, va dong bo
   voi cach nhan tu khoa o tieu de cac section. */
.site-header__main-nav-list .current-menu-item > a,
.site-header__main-nav-list .current-menu-ancestor > a {
  color: var(--color-primary);
  font-weight: 700;
}
.site-header__main-nav-list > li > a {
  position: relative;
  padding-bottom: 2px;
}
.site-header__main-nav-list > li.current-menu-item > a::after,
.site-header__main-nav-list > li.current-menu-ancestor > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-hot);
}

.site-header__tai-khoan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-header__tai-khoan .dashicons { font-size: 16px; width: 16px; height: 16px; }
@media (max-width: 640px) {
  /* Man hep: nut tai khoan chi con ICON — nhuong cho cho logo va o tim
     kiem, von quan trong hon voi nguoi chua dang nhap. */
  .site-header__tai-khoan-chu { display: none; }
  .site-header__tai-khoan { padding: 0 10px; }
}

/* =========================================================
   FOOTER — nen DO GRADIENT toan phan (ban thu nghiem).
   Da di qua 2 ban: nen toi (nguoi dung che xau) va nen sang. Ban nay to
   HAN mau thuong hieu cho ca chan trang, dung dung cong thuc da dung o
   hero trang khoa hoc va khoi dem nguoc trang chu — nen dong bo voi cac
   diem nhan manh nhat cua site.
   Neu muon quay lai ban sang, chi can doi lai khoi nay.
   ========================================================= */
.site-footer {
  position: relative;
  margin-top: var(--space-7);
  padding: var(--space-6) 0 var(--space-4);
  border-top: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  background-color: var(--color-primary);
  /* 3 lop: luoi o ly trang mo DE LEN gradient do-hong — giu motif "vo o
     ly" dung xuyen suot site, khong bi lac dieu chi vi doi mau nen. */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, #fa003c, #ec407a);
  background-size: 22px 22px, 22px 22px, auto;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
  /* Cot thuong hieu chiem tron 1 hang tren tablet — noi dung dai hon 3
     cot menu kia nhieu, nhet chung 1 hang se chat. */
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1025px) {
  /* Desktop: cot thuong hieu RONG GAP DOI cot menu. */
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .site-footer__brand { grid-column: auto; }
}

.site-footer__logo { display: inline-block; margin-bottom: var(--space-3); }
.site-footer__logo img {
  height: 34px;
  width: auto;
  /* Logo von la ban cho nen SANG — tren nen do se chim hoac chỏi mau.
     Chuyen han sang TRANG de doc duoc va sach mat, khong phai lam them
     file logo rieng. */
  filter: brightness(0) invert(1);
}
.site-footer__mo-ta {
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0 0 var(--space-4);
  max-width: 42ch;
}
/* Khoi hotline: nen trang DAC tren nen do — tuong phan manh nhat co the,
   dam bao so dien thoai la thu noi bat nhat trong chan trang. */
.site-footer__hotline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid #fff;
  color: var(--color-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.site-footer__hotline:hover { color: var(--color-text); filter: brightness(0.97); }
.site-footer__hotline .dashicons { color: var(--color-primary); }
.site-footer__hotline small { display: block; font-size: 0.72rem; color: var(--color-text-muted); }
.site-footer__hotline strong { font-size: 1rem; color: var(--color-primary); }

.site-footer__col h4 {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.site-footer__nav-list { list-style: none; margin: 0; padding: 0; }
.site-footer__nav-list li { margin-bottom: var(--space-2); }
.site-footer__col a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  margin-bottom: 0;
}
.site-footer__col a:hover { color: #fff; }

.site-footer__bottom {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}
.site-footer__bottom p { margin: 0; }

/* =========================================================
   TRANG QUIZ — an header/footer KHI DANG LAM BAI, hien lai KHI XEM
   KET QUA (theo yeu cau nguoi dung: "chỉ ẩn header với footer với giao
   diện thi thôi").

   Vi sao an bang CSS chu khong phai bang PHP: viec nop bai xay ra o
   TRINH DUYET (AJAX), luc PHP dung trang KHONG THE biet truoc hoc sinh
   se nop hay chua. Nen van in day du header/footer roi de CSS quyet
   dinh — JS gan class "has-result" vao <body> sau khi cham xong (xem
   renderResult() trong assets/js/quiz-engine.js).
   ========================================================= */
body.ntc-quiz-fullscreen .site-header,
body.ntc-quiz-fullscreen .site-footer {
  display: none;
}
/* Da nop bai -> hien tra lai. Do dac hieu (0,3,1) cao hon rule an o
   tren (0,2,1) nen chac chan thang. */
body.ntc-quiz-fullscreen.has-result .site-header { display: flex; }
body.ntc-quiz-fullscreen.has-result .site-footer { display: block; }
/* Khoang cach cho chan trang tach khoi phan xem lai bai — man ket qua
   von khong co le duoi (thanh dieu khien da bi an), de sat qua se dinh
   lien vao footer. */
body.ntc-quiz-fullscreen.has-result .site-footer { margin-top: var(--space-6); }

/* =========================================================
   LO TRINH SAU KHI NOP BAI — theo yeu cau nguoi dung: "khi nộp sẽ có 1
   lộ trình kiểu gì đó cho đúng với trạng thái ôn thi".
   Xem renderLoTrinh() trong assets/js/quiz-engine.js.
   ========================================================= */
.lt-box {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-white);
  /* Nen giay o ly — dong bo motif dung xuyen suot site. */
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 2px solid rgba(250, 0, 60, 0.18);
  box-shadow: 0 6px 20px rgba(250, 0, 60, 0.08);
}
.lt-box__title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 4px solid transparent;
  border-image: var(--grad-hot) 1;
}

/* --- Chan doan --- */
.lt-chan-doan {
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.lt-chan-doan p { margin: 0 0 6px; }
.lt-chan-doan p:last-child { margin-bottom: 0; }

/* --- Tien do khoa --- */
.lt-tien-do {
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.lt-tien-do__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.88rem;
  margin-bottom: var(--space-2);
}
.lt-tien-do__head strong { color: var(--color-primary); white-space: nowrap; }
.lt-tien-do__vi-tri {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

/* --- Ba viec nen lam --- */
.lt-viec {
  list-style: none;
  counter-reset: lt;
  margin: 0;
  padding: 0;
}
.lt-viec__item {
  counter-increment: lt;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  padding-left: 46px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
}
.lt-viec__item:hover { border-color: rgba(250, 0, 60, 0.35); }
/* So thu tu trong vong tron gradient — day la CHUOI VIEC CO THU TU nen
   danh so la dung ban chat, khong phai trang tri. */
.lt-viec__item::before {
  content: counter(lt);
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-hot);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
.lt-viec__item > .dashicons {
  flex: 0 0 auto;
  color: var(--color-primary);
  margin-top: 2px;
}
.lt-viec__noi-dung { flex: 1 1 auto; min-width: 0; }
.lt-viec__noi-dung a { color: var(--color-text); }
.lt-viec__noi-dung a:hover { color: var(--color-primary); }
.lt-viec__mo {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* --- De goi y them --- */
.lt-goi-y {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}
.lt-goi-y h3 {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.lt-goi-y ul { list-style: none; margin: 0; padding: 0; }
.lt-goi-y li { margin-bottom: 6px; font-size: 0.88rem; }

@media (max-width: 640px) {
  .lt-box { padding: var(--space-3) var(--space-2); }
  .lt-viec__item { padding-left: 40px; }
}

/* =========================================================
   CAN CHINH KHOANG CACH MAN HINH KET QUA — theo yeu cau nguoi dung:
   "nhiều phần đang sát vào nhau nhìn không được đồng đều".

   NGUYEN NHAN: moi khoi TU QUYET DINH khoang cach cua rieng no, nen ra
   3 gia tri khac nhau — va khoi diem so thi KHONG CO khoang cach nao
   (dinh sat vao khoi ngay duoi).

   CACH SUA: dat NHIP CHUNG o khoi CHA, roi go bo khoang cach rieng cua
   tung khoi. Nho vay sau nay them khoi moi cung tu dong dung nhip,
   khong phai nho dat margin cho no.
   ========================================================= */
body.has-result #ntc-quiz-result-main > * + * {
  /* 32px — bang dung khoang cach giua cac THE CAU HOI ben duoi, de
     toan trang chay theo MOT nhip duy nhat. */
  margin-top: var(--space-5);
}
/* Go khoang cach rieng cua tung khoi — neu giu lai se CONG DON voi
   nhip chung o tren (24 + 32 = 56px), lai lech tiep. */
body.has-result .quiz-summary,
body.has-result .quiz-thanh-tucham,
body.has-result .lt-box {
  margin-bottom: 0;
}
/* Chua khoang tho o dinh trang ket qua — thanh dieu khien luc thi da
   bi an, khong con gi do khoi diem so khoi dinh sat mep tren. */
body.has-result .quiz-result-page {
  padding-top: var(--space-4);
}

/* =========================================================
   BAI VIET & TRANG — archive.php, single.php, page.php,
   template-parts/post-card.php.
   ========================================================= */
.bv-page { padding-bottom: var(--space-7); }

/* --- Hero trang danh muc bai viet --- */
.bv-hero {
  position: relative;
  overflow: hidden;
  margin: var(--space-4) 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-white);
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: var(--shadow-card);
}
/* Le do — motif "vo o ly" dung xuyen suot site. */
.bv-hero::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--grad-hot);
  opacity: 0.5;
  pointer-events: none;
}
@media (max-width: 640px) {
  .bv-hero { padding: var(--space-4) var(--space-3) var(--space-4) var(--space-5); }
  .bv-hero::before { left: 12px; }
}
.bv-hero__title {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
@media (max-width: 640px) { .bv-hero__title { font-size: 1.45rem; } }
.bv-hero__desc { color: var(--color-text-muted); font-size: 0.95rem; max-width: 68ch; }
.bv-hero__desc p { margin: 0; }
.bv-hero__dem { font-size: 0.85rem; color: var(--color-text-muted); margin: var(--space-2) 0 0; }

/* --- Luoi the bai viet --- */
.bv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .bv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .bv-grid { grid-template-columns: repeat(3, 1fr); } }

/* O trong luoi — cho the con GIAN DAY o, de cac the trong cung 1 hang
   cao BANG NHAU du noi dung dai ngan khac nhau. */
.bv-grid__item { display: flex; }
.bv-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-white);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(250, 0, 60, 0.14);
}
/* Vien tren gradient — dong bo voi the khoa hoc va the quiz. */
.bv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-hot);
  z-index: 2;
  pointer-events: none;
}
.bv-card__anh {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg);
}
.bv-card__anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bai KHONG co anh dai dien: hien 1 o xam co icon thay vi de trong —
   the khong anh se thap hon han cac the khac, lam luoi so le. */
.bv-card__anh-trong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.bv-card__anh-trong .dashicons {
  font-size: 36px;
  width: 36px;
  height: 36px;
  color: var(--color-border);
}
.bv-card__than {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-4);
}
.bv-card__danh-muc {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(12, 147, 244, 0.1);
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
}
.bv-card__danh-muc:hover { background: rgba(12, 147, 244, 0.18); color: var(--color-secondary); }
.bv-card__tieu-de {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 var(--space-2);
  /* Cat 2 dong — de moi the trong luoi cao BANG NHAU du tieu de dai
     ngan khac nhau. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bv-card__tieu-de a { color: var(--color-text); }
.bv-card__tieu-de a:hover { color: var(--color-primary); }
.bv-card__tom-tat {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bv-card__meta {
  margin: auto 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.bv-card__cham { margin: 0 4px; }

/* --- Bai viet don --- */
.bv-bai {
  margin: var(--space-4) 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-card);
}
@media (max-width: 640px) { .bv-bai { padding: var(--space-4) var(--space-3); } }

.bv-bai__head { margin-bottom: var(--space-4); }
.bv-bai__danh-muc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(250, 0, 60, 0.08);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.bv-bai__danh-muc:hover { background: rgba(250, 0, 60, 0.15); color: var(--color-primary); }
.bv-bai__danh-muc .dashicons { font-size: 14px; width: 14px; height: 14px; }
.bv-bai__title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
@media (max-width: 640px) { .bv-bai__title { font-size: 1.45rem; } }
.bv-bai__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.bv-bai__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.bv-bai__meta-item .dashicons { font-size: 15px; width: 15px; height: 15px; }

.bv-bai__anh {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bv-bai__anh img { width: 100%; height: auto; display: block; }
.bv-bai__anh figcaption {
  padding: var(--space-2) var(--space-3);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
}

/* Be rong dong chu — yeu to QUAN TRONG NHAT quyet dinh doc noi hay
   khong. 68 ky tu la khoang de doc thoai mai; de tran het chieu rong
   the (co the hon 100 ky tu) thi mat de lac dong khi xuong hang. */
.bv-bai__noi-dung {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.75;
}
.bv-bai__noi-dung > * + * { margin-top: var(--space-3); }
.bv-bai__noi-dung h2 { font-size: 1.35rem; margin-top: var(--space-5); }
.bv-bai__noi-dung h3 { font-size: 1.15rem; margin-top: var(--space-4); }
.bv-bai__noi-dung img { border-radius: var(--radius-sm); }
.bv-bai__noi-dung blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid transparent;
  border-image: var(--grad-hot) 1;
  background: var(--color-bg);
  font-style: italic;
}

.bv-bai__the {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.bv-the {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-muted);
}
.bv-the:hover { background: rgba(250, 0, 60, 0.08); color: var(--color-primary); }
.bv-bai__phan-trang { margin-top: var(--space-4); font-size: 0.88rem; }

/* --- Bai lien quan --- */
.bv-lien-quan { margin-top: var(--space-6); }
.bv-lien-quan__title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-3);
  border-left: 4px solid transparent;
  border-image: var(--grad-hot) 1;
}


/* --- Trang thai rong --- */
.bv-trong {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.bv-trong .dashicons {
  font-size: 40px;
  width: 40px;
  height: 40px;
  color: var(--color-border);
}
.bv-trong__title { font-weight: 700; font-size: 1rem; margin: var(--space-3) 0 4px; }
.bv-trong__desc { color: var(--color-text-muted); font-size: 0.88rem; margin: 0; }

/* --- NUT YEU THICH (trai tim) tren the quiz ---
   Xem inc/yeu-thich.php va initYeuThich() trong assets/js/main.js. */
.quiz-tim {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.quiz-tim:hover { background: rgba(250, 0, 60, 0.07); color: var(--color-primary); }

/* CHUA LUU — trai tim chi co VIEN, ruot RONG. Day la diem nguoi dung
   yeu cau: trai tim DAC luc chua luu nhin y het da luu roi, khong phan
   biet duoc trang thai. */
.quiz-tim__icon {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.15s ease, transform 0.15s ease;
}
/* DA LUU — to DAC mau thuong hieu. */
.quiz-tim.is-tim { color: var(--color-primary); }
.quiz-tim.is-tim .quiz-tim__icon {
  fill: currentColor;
  transform: scale(1.08);
}
/* Dang gui len server — lam mo de nguoi dung biet dang xu ly, va tranh
   bam lien tuc nhieu lan. */
.quiz-tim:disabled { opacity: 0.6; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .quiz-tim,
  .quiz-tim__icon { transition: none; }
  .quiz-tim.is-tim .quiz-tim__icon { transform: none; }
}

/* =========================================================
   CAN THANG HANG ICON VOI CHU o dong thong tin the quiz.

   NGUYEN NHAN: icon Dashicons la KY TU CHU (icon font), duoc ve theo
   DUONG CHAN CHU chu khong can giua trong o cua no — nen nhin luon
   thap hon dong chu ben canh. Dat "align-items: center" o khoi cha
   KHONG cuu duoc: 2 cai HOP van dung tam nhau, chi HINH VE ben trong
   hop icon la lech.
   CACH SUA: bien chinh o icon thanh 1 khoi flex va CAN GIUA ky tu ben
   trong no, dong thoi khoa "line-height: 1" de o icon dung bang kich
   thuoc khai bao, khong bi gian theo line-height ke thua (1.6) cua
   dong chu.
   ========================================================= */
.quiz-grid-card__meta .dashicons,
.quiz-grid-card__meta-item .dashicons,
.khoa-hero__meta-item .dashicons,
.bv-bai__meta-item .dashicons,
.bv-card__meta .dashicons {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}
/* Dong thong tin: khoa line-height de chieu cao dong chu ON DINH,
   khong phu thuoc line-height 1.6 cua toan trang — nho vay tam cua
   dong chu va tam cua icon trung nhau. */
.quiz-grid-card__meta,
.quiz-grid-card__meta-item {
  line-height: 1.2;
}
/* Nut luu de nam CHUNG hang voi cac muc thong tin khac.
   Bo MARGIN AM (von de keo nut sat vao hang) nhung GIU LAI padding —
   padding la cho de ve nen khi re chuot; bo han thi nut mat dau hieu
   bam duoc, ma day lai la thu duy nhat trong dong nay bam duoc. */
.quiz-grid-card__meta-item .quiz-tim {
  margin: 0;
  padding: 2px 4px;
  line-height: 1.2;
}
.quiz-tim__icon { display: block; }

/* =========================================================
   CHUOI NGAY HOC — xem inc/chuoi-hoc.php, page-dashboard.php.
   ========================================================= */
.ch-box {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-white);
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 2px solid rgba(250, 0, 60, 0.15);
  box-shadow: 0 6px 20px rgba(250, 0, 60, 0.07);
}
/* --- Hang dau: ngon lua + con so, xep NGANG ---
   Truoc day 3 thanh phan nhoi trong 1 hinh tron 96px: khong the can
   deu vi moi thu mot chieu cao, tam quang hoc lech tam hinh hoc. Xep
   ngang thi chi con 1 truc de can, va cung mo rong duoc khi chu dai. */
.ch-dau {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ch-dau__lua {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
}
/* Chi to mau khi CHUOI DANG CHAY — chuoi = 0 de xam, tranh viec so 0
   van ruc ro nhu dang co thanh tich. */
.ch-dau__lua.is-chay {
  background: rgba(250, 0, 60, 0.08);
  border-color: rgba(250, 0, 60, 0.28);
}
.ch-dau__chu { flex: 1 1 auto; min-width: 0; }
.ch-dau__so {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 2px;
  line-height: 1.1;
}
.ch-dau__so strong {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}
.ch-dau__so span { font-size: 0.92rem; color: var(--color-text-muted); }

.ch-nhac { font-weight: 600; margin: 0; font-size: 0.9rem; }
.ch-nhac.is-xong { color: #16a34a; }

/* Hang phu: ky luc + so ve. Thong tin tra cuu nen de nho, tach khoi
   hang tren cho do chen chuc. */
.ch-phu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.ch-phu__muc { display: inline-flex; align-items: center; gap: 5px; }
.ch-phu__muc .dashicons {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 15px;
  width: 15px;
  height: 15px;
  color: var(--color-secondary);
}

.ch-lich {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: var(--space-4);
}
@media (min-width: 640px) {
  /* Man rong: trai het 31 o thanh 1 dai, nhin ra "chuoi" ro hon la
     xep theo tuan. */
  .ch-lich { grid-template-columns: repeat(16, 1fr); }
}
.ch-lich__o {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.ch-lich__o.is-hoc {
  background: var(--grad-hot);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}
/* Ngay dung ve dong bang — mau XANH, khac han mau ngay hoc that, de
   hoc sinh khong nham la minh da hoc hom do. */
.ch-lich__o.is-bang {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}
.ch-lich__o.is-sau { opacity: 0.4; }

/* --- Huy hieu --- */
.ch-huy-hieu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0 0;
  border-top: 1px dashed var(--color-border);
}
.ch-huy-hieu__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.78rem;
  /* Moc CHUA dat van hien, chi lam mo — de hoc sinh thay MUC TIEU ke
     tiep, thay vi chi thay nhung gi da co. */
  opacity: 0.45;
}
.ch-huy-hieu__item.is-dat {
  opacity: 1;
  background: rgba(250, 0, 60, 0.07);
  border-color: rgba(250, 0, 60, 0.3);
}
.ch-huy-hieu__so {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-border);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}
.ch-huy-hieu__item.is-dat .ch-huy-hieu__so { background: var(--grad-hot); }
.ch-huy-hieu__ten { color: var(--color-text); }

/* Chuoi ngay hoc hien o man hinh ket qua (trong khoi lo trinh). */
.lt-chuoi {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  margin: 0 0 var(--space-3);
}
.lt-chuoi__so {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--grad-hot);
  color: #fff;
  font-weight: 800;
}
.lt-chuoi__ky-luc { color: var(--color-text-muted); font-size: 0.85rem; }
.lt-huy-hieu-moi {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-size: 0.92rem;
}

/* --- Icon ngon lua + chuoi tren header --- */
.ch-lua-icon {
  flex: 0 0 auto;
  display: block;
}
/* TRANG THAI CHUA CO CHUOI — to XAM.
   CSS "fill" GHI DE duoc thuoc tinh fill="url(#...)" viet thang trong
   the SVG (quy tac CSS luon thang thuoc tinh trinh bay), nen chi can
   1 dong la tat duoc chuyen sac, khong phai ve rieng 1 icon xam. */
.ch-lua-icon.is-tat .ch-lua-icon__ngoai { fill: #c7c9cd; }
.ch-lua-icon.is-tat .ch-lua-icon__trong { fill: #e3e5e8; }
.lt-chuoi__so .ch-lua-icon { margin-right: 4px; }

.site-header__chuoi {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(250, 0, 60, 0.08);
  white-space: nowrap;
}
.site-header__chuoi:hover { background: rgba(250, 0, 60, 0.15); color: var(--color-primary); }
/* HOM NAY CHUA HOC — doi sang tong CAM va cho ngon lua nhap nhay nhe,
   bao hieu "chuoi dang co nguy co dut". Khac han trang thai da hoc
   (do, dung yen) de nguoi dung phan biet duoc chi bang mot cai liec. */
.site-header__chuoi.is-can-giu {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
}
/* CHUA CO CHUOI — xam hoan toan. Van hien (khong an di) de hoc sinh
   biet co thu nay ton tai va bat dau, nhung khong to mau nhu dang co
   thanh tich. */
.site-header__chuoi.is-tat {
  color: var(--color-text-muted);
  background: var(--color-bg);
}
.site-header__chuoi.is-tat:hover {
  color: var(--color-text);
  background: var(--color-border);
}
.site-header__chuoi.is-can-giu .ch-lua-icon {
  animation: ntc-lua-nhay 1.6s ease-in-out infinite;
}
@keyframes ntc-lua-nhay {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.92); }
}
/* Ton trong nguoi dung tat hieu ung chuyen dong — nhap nhay lien tuc
   co the gay kho chiu voi mot so nguoi. */
@media (prefers-reduced-motion: reduce) {
  .site-header__chuoi.is-can-giu .ch-lua-icon { animation: none; }
}
@media (max-width: 640px) {
  /* Man hep: chi giu ngon lua + so, bo bot dem cho do chiem cho. */
  .site-header__chuoi { padding: 4px 7px; font-size: 0.8rem; }
}


/* =========================================================
   MUC DO dang BAC THANG + DIEM YEU THEO CHUYEN DE.
   Xem page-dashboard.php, inc/tai-khoan.php.
   ========================================================= */
.md-chan-doan {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border-left: 4px solid transparent;
  border-image: var(--grad-hot) 1;
}

/* Bac thang: moi bac CAO DAN theo do kho cua muc do (bien --md-cao do
   PHP tinh). Cot ben trong duoc DO DAY theo ti le lam dung — nhin mot
   cai la thay "vung den bac nao thi hut". */
.md-thang {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.md-bac {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.md-bac__cot {
  position: relative;
  display: block;
  width: 100%;
  height: var(--md-cao, 44px);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-bottom: none;
  overflow: hidden;
}
.md-bac__day {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: var(--color-border);
}
.md-bac.is-vung .md-bac__day { background: #16a34a; }
.md-bac.is-tam  .md-bac__day { background: #f59e0b; }
.md-bac.is-yeu  .md-bac__day { background: #dc2626; }

.md-bac__pct {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  padding-top: 4px;
  border-top: 2px solid var(--color-border);
  width: 100%;
}
.md-bac.is-vung .md-bac__pct { color: #16a34a; border-top-color: #16a34a; }
.md-bac.is-tam  .md-bac__pct { color: #b45309; border-top-color: #f59e0b; }
.md-bac.is-yeu  .md-bac__pct { color: #dc2626; border-top-color: #dc2626; }
/* Chua lam cau nao — de trung tinh, KHONG to do. To do se khien hoc
   sinh tuong minh lam sai het, trong khi that ra chua lam bao gio. */
.md-bac.is-trong .md-bac__pct { color: var(--color-text-muted); }

.md-bac__ten {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.25;
}
.md-bac__so { display: block; font-size: 0.7rem; color: var(--color-text-muted); }

/* --- Chuyen de can on lai --- */
.md-ghi-chu {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.md-chuyen-de { list-style: none; margin: 0; padding: 0; }
.md-chuyen-de__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.md-chuyen-de__item:last-child { margin-bottom: 0; }
.md-chuyen-de__chu { flex: 1 1 200px; min-width: 0; }
.md-chuyen-de__chu strong { display: block; font-size: 0.92rem; }
.md-chuyen-de__chu span { font-size: 0.78rem; color: var(--color-text-muted); }
.md-chuyen-de__phai {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}
.md-chuyen-de__pct { font-size: 1.05rem; font-weight: 800; color: #b45309; }
.md-chuyen-de__pct.is-yeu { color: #dc2626; }