/* EDUZO · THANH PHAN DESIGN SYSTEM 1.0 (24/09/2026)
   ============================================================================
   Dich tu ban tham chieu `Design System/design_handoff_eduzo/thiet-ke/Ez*.dc.html`
   (dac ta props/trang thai: `ban-giao/thanh-phan.json`). CHI goi token `--ez-*`.

   Moi thanh phan khai o DAY, mot lan, CHI voi ten `.ez-*`; markup bon vo goi
   thang ten ay (buoc 3b, 26/09/2026: go het bi danh `:where(.lop-cu)`, vi bi danh
   do uu tien 0 de luat app cung do uu tien thang im lang). Tep nay nap SAU
   `ds.css` nen hinh o day la hinh cuoi cung; `ds.css` chi giu bo cuc rieng tung man.
   Cho nao app con giu mat khac DS thi luat ay nang do uu tien va khai MIEN trong
   `thu/ghi-de-ds-gate.mjs` (cho anh chot theo ban ve).

   Thu tu: nut · o nhap · the · dap an · phan hoi · the so · thuong · thanh dinh ·
   tab day · thanh ben · chip · tab · nhan · thanh tien do · the keo · o hinh ·
   trang thai rong · tieu de.
   Trang thai chung (DS): chua-lam · di-chuot · nhan · tieu-diem · da-chon · dung ·
   sai · gan-dung · dap-an · tat · dang-tai · loi.
   ============================================================================ */

/* THUOC TINH `hidden` LA LUAT CUA CA HE (25/09). Mot lop khai `display: flex`
   thi de len `display: none` cua trinh duyet, va phan tu "da giau" van ve ra:
   hop bao loi rong o tab Nha minh la mot dai hong khong chu. Hai lan truoc va
   le tung lop (`.cho-chon[hidden]`, `.o-co-hinh[hidden]`); nay va o goc. */
[hidden] { display: none !important; }

/* ---- CHU: tieu de va moi con so la Nunito, than chu la Lexend --------------- */
body{ font-family: var(--ez-phong-than); color: var(--ez-muc-chinh); background: var(--ez-nen-trang); }
h1, h2, h3, .ez-tieu-de-1, .ez-tieu-de-2, .ez-tieu-de-3, .ez-tieu-de{
  font-family: var(--ez-phong-tieu-de); font-weight: 800; color: var(--ez-muc-chinh);
}
/* NGAT DONG (ra soat UI/UX 14/10): bon vo deu mo coi mot chu o dong cuoi ("nao.",
   "phut.", "thuoc") va nhan nut gay hai dong. Tieu de + cau ngan can deu dong;
   than chu tranh mo coi; nhan khong bao gio gay. */
h1, h2, h3, h4, .ez-tieu-de-1, .ez-tieu-de-2, .ez-tieu-de-3, .ez-tieu-de, .nhan-khoi, .ez-the__ten,
.trong-vui__cau, .ez-thanh-dinh__ten, figcaption{ text-wrap: balance; }
p, li, dd, .ez-phu, .dai, .nhac, .ez-the-so__cau{ text-wrap: pretty; }
.ez-nhan, .ez-tab, .ez-chip, .ez-tab-day__ten, th{ white-space: nowrap; }
h1, .ez-tieu-de-1{ font-size: var(--ez-chu-tieu-de-1-co); line-height: var(--ez-chu-tieu-de-1-cao); letter-spacing: -0.015em; }
h2, .ez-tieu-de-2{ font-size: var(--ez-chu-tieu-de-2-co); line-height: var(--ez-chu-tieu-de-2-cao); letter-spacing: -0.01em; }
h3, .ez-tieu-de-3{ font-size: var(--ez-chu-tieu-de-3-co); line-height: var(--ez-chu-tieu-de-3-cao); }
.ez-so, .ez-so-deu, .ez-the-so__so, th, td{
  font-variant-numeric: tabular-nums lining-nums;
}
.ez-so{ font-family: var(--ez-phong-so); font-weight: 800; }
.ez-phu{ color: var(--ez-muc-phu); }
:where(input, select, textarea, button) { font-family: inherit; }
:where(button) { color: inherit; }
/* O nhap tran (khong lop): chu va nen cua he, khong phai mau mac dinh cua trinh duyet. */
:where(input, select, textarea) { color: var(--ez-muc-chinh); background-color: var(--ez-nen-the); }
/* O danh dau va o chon mot: mau hanh dong cua he, khong de mau mac dinh trinh duyet. */
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ez-hanh-dong-nen); }

/* ---- EzNut ------------------------------------------------------------------
   Bien the: chinh (mac dinh cua .nut--chinh) · phu · vien (mac dinh cua .nut) ·
   chu · bieu-tuong · nguy-hiem (+ nguy-vien cho dong bang). Co: lon · vua · nho. `--day`: rong het khung.
   Nhan MOT dong khi du cho; hep thi xuong dong chu khong tran (luat co gian). */
.ez-nut{
  position: relative; box-sizing: border-box;
  min-height: var(--ez-vung-cham); min-width: var(--ez-vung-cham);
  padding: var(--ez-khe-8) calc(var(--ez-le-trong) + var(--ez-khe-4));
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ez-khe-trong-khoi);
  border-radius: var(--ez-bo-nut); border: 2px solid var(--ez-vien-dam);
  background: var(--ez-nen-the); color: var(--ez-muc-chinh); box-shadow: var(--ez-bong-nut-phu);
  font-family: var(--ez-phong-tieu-de); font-weight: 800;
  font-size: calc(var(--ez-chu-nut-co) - 1px); line-height: var(--ez-chu-nut-cao);
  text-align: center; text-wrap-style: balance; cursor: pointer; text-decoration: none;
  transition: background var(--ez-td-nhanh) var(--ez-dc-chuan), transform var(--ez-td-nhanh) var(--ez-dc-chuan);
}
.ez-nut:active{ background: var(--ez-nen-chim); transform: translateY(2px); box-shadow: none; }
.ez-nut:focus-visible{ outline: none; box-shadow: var(--ez-noi-tieu-diem); }

.ez-nut--chinh{
  background: var(--ez-hanh-dong-nen); color: var(--ez-hanh-dong-tren);
  border-color: transparent; box-shadow: var(--ez-bong-nut);
}
.ez-nut--chinh:active{ background: var(--ez-hanh-dong-nhan); transform: translateY(3px); box-shadow: none; }
.ez-nut--chinh:focus-visible{ box-shadow: var(--ez-bong-nut), var(--ez-noi-tieu-diem); }

.ez-nut--phu{
  background: var(--ez-hanh-dong-nhat); color: var(--ez-hanh-dong-chu);
  border-color: var(--ez-mau-tim-200); box-shadow: var(--ez-bong-nut-phu);
}
.ez-nut--phu:active{ background: var(--ez-mau-tim-200); }

.ez-nut--chu{
  background: transparent; color: var(--ez-hanh-dong-chu); border-color: transparent; box-shadow: none;
  /* CHU THANG LE (ra soat UI/UX 14/10): dem ngang cua nut day chu vao ~20px nen
     "Ve trang chinh", "Xem bao cao" lech khoi le cot. Dem gon + le am bang dem:
     chu dung dung le, nen di chuot van tran ra hai ben nhu mot vung bam. */
  padding-inline: var(--ez-khe-8); margin-inline: calc(-1 * var(--ez-khe-8));
}
.ez-nut--chu:active{ background: var(--ez-mau-tim-100); transform: none; }

.ez-nut--nguy{
  background: var(--ez-he-thong-loi-dam); color: var(--ez-muc-tren-dam);
  border-color: transparent; box-shadow: var(--ez-bong-nut-nguy);
}
/* Ve di chuot CHI o may co chuot that (14/10, cham luot 4): tren man cham, cham xong
   :hover dinh lai tren nut, nut chu hien o nen mo nhu mot nut khac kieu. */
@media (hover: hover){
  .ez-nut:hover{ background: var(--ez-nen-trang); }
  .ez-nut--chinh:hover{ background: var(--ez-hanh-dong-di-chuot); }
  .ez-nut--phu:hover{ background: var(--ez-mau-tim-100); }
  .ez-nut--chu:hover{ background: var(--ez-hanh-dong-nhat); }
  .ez-nut--nguy:hover{ background: var(--ez-mau-do-800); }
}
/* Nguy VIEN (ra soat UI/UX 14/10): nut nguy lap lai tren moi dong bang thi to dac
   lam no thanh thu noi nhat bang. Vien do, nen trong; to dac chi o hop xac nhan. */
.ez-nut--nguy-vien:not(:disabled){
  background: transparent; color: var(--ez-he-thong-loi-dam);
  border-color: var(--ez-he-thong-loi-dam); box-shadow: none;
}
@media (hover: hover){ .ez-nut--nguy-vien:not(:disabled):hover{ background: var(--ez-he-thong-loi-nen); } }
.ez-nut--bieu-tuong{ padding: 0; width: var(--ez-vung-cham); border-color: var(--ez-vien-nhat); box-shadow: none; }

.ez-nut--lon{ min-height: calc(var(--ez-vung-cham) + var(--ez-khe-8)); font-size: var(--ez-chu-nut-co); }
.ez-nut--nho{
  width: auto; min-height: max(32px, calc(var(--ez-vung-cham) - var(--ez-khe-8)));
  padding: var(--ez-khe-4) var(--ez-le-trong); font-size: calc(var(--ez-chu-nut-co) - 3px);
}
/* Nut nho van giu VUNG CHAM day du: mot lop trong suot phu len tren va duoi. */
.ez-nut--nho::after{
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: max(100%, var(--ez-vung-cham)); transform: translateY(-50%);
}
.ez-nut--day{ width: 100%; }
.ez-nut--chu.ez-nut--day{ margin-inline: 0; }
/* G2 (ra soat lan 2): `--nho` khai dem SAU nen de mat dem gon cua nut chu, chu thut
   ~8px khoi le. Nut chu o cot can giua (cua vao, form) thi khong can le am. */
.ez-nut--chu.ez-nut--nho{ padding-inline: var(--ez-khe-8); }
.man--giua .ez-nut--chu{ margin-inline: 0; }

/* Nut tat: trang thai TRUNG TINH, khong phai mau hanh dong lam mo. */
.ez-nut:disabled, .ez-nut[aria-disabled="true"]{
  background: var(--ez-hanh-dong-tat); color: var(--ez-hanh-dong-chu-tat);
  border-color: transparent; box-shadow: none; transform: none; cursor: not-allowed;
}
.ez-nut--chu:disabled{ background: transparent; }
.ez-nut[aria-busy="true"] .hinh{ animation: ezSpin 900ms linear infinite; }

/* Tren may cham: moi nut, ke ca nut nho, cao bang vung cham that. */
@media (pointer: coarse) {
  .ez-nut--nho{ min-height: var(--ez-vung-cham); }
}

/* ---- O NHAP (dung chung vien, bo, vong tieu diem voi EzDapAn) --------------- */
.ez-o{
  box-sizing: border-box; width: 100%; min-height: var(--ez-vung-cham);
  padding: var(--ez-khe-8) var(--ez-khe-12);
  border: 2px solid var(--ez-vien-dam); border-radius: var(--ez-bo-nut);
  background: var(--ez-nen-the); color: var(--ez-muc-chinh);
  font-family: var(--ez-phong-than); font-size: var(--ez-chu-than-lon-co); line-height: var(--ez-chu-than-lon-cao);
}
.ez-o::placeholder{ color: var(--ez-muc-mo); }
.ez-o:focus{ outline: none; border-color: var(--ez-vien-tieu-diem); box-shadow: 0 0 0 3px var(--ez-mau-tim-100); }
.ez-o[aria-invalid="true"]{ border-color: var(--ez-he-thong-loi-dam); background: var(--ez-he-thong-loi-nen); }
select.ez-o{ appearance: auto; }
/* O nhap ghep: co bieu tuong o dau (`.o-co-hinh`, chua bieu tuong 32px le 8px) va
   nhan nam trong o (`.ez-o-co-nhan`, vo boc ve khung, o nhap ben trong tran). */
.ez-o-co-hinh > .ez-o{ padding-left: calc(var(--ez-khe-8) * 2 + var(--ez-khe-32)); }
.ez-o-co-nhan > .ez-o{ border: 0; padding: 0; min-height: 0; background: transparent; }
/* Vo boc da ve vien khi dang chon (:focus-within): o trong khong ve vong thu hai (dien tap 28/09). */
.ez-o-co-nhan > .ez-o:focus{ box-shadow: none; }

/* ---- THE (khung module) ------------------------------------------------------ */
.ez-the{
  box-sizing: border-box; background: var(--ez-nen-the);
  border: 1px solid var(--ez-vien-nhat); border-radius: var(--ez-bo-the);
  box-shadow: var(--ez-noi-1); padding: var(--ez-le-trong);
  display: flex; flex-direction: column; gap: var(--ez-khe-trong-khoi);
}
/* EzTheSo `noi` (ban ve): the chua viec chinh, vien 2px mau hanh dong. */
.ez-the--noi{ border: 2px solid var(--ez-hanh-dong-nen); }

/* ---- EzDapAn (lua chon tra loi) ---------------------------------------------- */
.ez-dap-an{
  box-sizing: border-box; position: relative; width: 100%;
  display: flex; align-items: center; gap: var(--ez-khe-hang);
  min-height: calc(var(--ez-vung-cham) + var(--ez-khe-12));
  padding: var(--ez-khe-12) var(--ez-le-trong);
  border: 2px solid var(--ez-vien-dam); border-radius: calc(var(--ez-bo-nut) + 2px);
  background: var(--ez-nen-the); color: var(--ez-muc-chinh); box-shadow: var(--ez-bong-nut-phu);
  font-family: var(--ez-phong-so); font-weight: 600;
  font-size: var(--ez-chu-than-lon-co); line-height: var(--ez-chu-than-lon-cao);
  font-variant-numeric: tabular-nums; text-align: left; overflow-wrap: anywhere; cursor: pointer;
  transition: background var(--ez-td-nhanh) var(--ez-dc-chuan), transform var(--ez-td-nhanh) var(--ez-dc-chuan);
}
/* Re chuot chi cho dap an CHUA mang trang thai. `:hover` (0,2,0) cao hon lop trang thai
   (0,1,0) nen truoc day re len dap an da sai thi mat vien do, chu van do (28/09).
   `:where` giu nguyen do uu tien cu, luat cua vo khong bi dao thu tu. */
@media (hover: hover){ .ez-dap-an:hover:where(:not(:disabled, .ez-dap-an--da-chon, .ez-dap-an--dung, .ez-dap-an--sai, .ez-dap-an--loi-giai)){ border-color: var(--ez-mau-xam-500); background: var(--ez-nen-trang); } }
.ez-dap-an:focus-visible{ outline: none; box-shadow: var(--ez-noi-tieu-diem); }
.ez-dap-an--da-chon{
  border-color: var(--ez-hanh-dong-nen); background: var(--ez-hanh-dong-nhat); color: var(--ez-hanh-dong-chu);
  box-shadow: none; transform: translateY(2px);
}
.ez-dap-an--dung{ border-color: var(--ez-hoc-dung-dam); background: var(--ez-hoc-dung-nen); color: var(--ez-hoc-dung-dam); box-shadow: none; transform: translateY(2px); }
.ez-dap-an--sai{ border-color: var(--ez-hoc-sai-dam); background: var(--ez-hoc-sai-nen); color: var(--ez-hoc-sai-dam); box-shadow: none; transform: translateY(2px); }
.ez-dap-an--loi-giai{ border-style: dashed; border-color: var(--ez-hoc-dung-dam); }
.ez-dap-an:disabled{ cursor: default; }
/* Phim ky hieu (A, B, C... hoac 1, 2, 3) dau moi dap an. */
.ez-dap-an__ky{
  flex: none; width: var(--ez-khe-32); height: var(--ez-khe-32); border-radius: var(--ez-bo-8);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ez-nen-trang); color: var(--ez-muc-phu);
  font-family: var(--ez-phong-tieu-de); font-weight: 800; font-size: var(--ez-chu-phu-co);
}
.ez-dap-an--da-chon .ez-dap-an__ky{ background: var(--ez-hanh-dong-nen); color: var(--ez-muc-tren-dam); }
/* Trong nhom `.ez-lua-chon`, phim ve bang ::before + CSS counter (khong can
   `.ez-dap-an__ky`): 0 dong JS, chu cua phim khong lot vao ten nut, trinh doc
   man hinh va phep do chi thay dap an. Ban ve
   EzDapAn: phim 32px o le trai 12px, mau theo trang thai o. Nhieu lua chon: chu
   A B C moi thiet bi; hai lua chon (--doi) va dau so sanh (--dau): so 1 2 3, chi
   o may co ban phim (tren may cham chung la phim tat khong bam duoc). */
.ez-lua-chon{ counter-reset: dapan; }
.ez-lua-chon > .ez-dap-an::before{
  position: absolute; left: var(--ez-khe-12); top: 50%; transform: translateY(-50%);
  width: var(--ez-khe-32); height: var(--ez-khe-32); border-radius: var(--ez-bo-8);
  display: grid; place-items: center;
  font-family: var(--ez-phong-tieu-de); font-size: var(--ez-chu-phu-co); font-weight: 800;
  background: var(--ez-nen-trang); color: var(--ez-muc-phu);
}
.ez-lua-chon:not(.ez-lua-chon--doi):not(.ez-lua-chon--dau) > .ez-dap-an{ counter-increment: dapan; justify-content: flex-start; padding-left: calc(var(--ez-khe-32) + var(--ez-khe-24)); }
.ez-lua-chon:not(.ez-lua-chon--doi):not(.ez-lua-chon--dau) > .ez-dap-an::before{ content: counter(dapan, upper-alpha); }
@media (hover: hover) and (pointer: fine) and (min-width: 600px) {
  .ez-lua-chon:is(.ez-lua-chon--doi, .ez-lua-chon--dau) > .ez-dap-an{ counter-increment: dapan; padding-left: var(--ez-khe-48); padding-right: var(--ez-khe-48); }
  .ez-lua-chon:is(.ez-lua-chon--doi, .ez-lua-chon--dau) > .ez-dap-an::before{ content: counter(dapan); }
}
@media (hover: hover){ .ez-dap-an:hover .ez-dap-an__ky, .ez-lua-chon > .ez-dap-an:hover::before{ background: var(--ez-nen-chim); } }
.ez-dap-an:disabled .ez-dap-an__ky, .ez-lua-chon > .ez-dap-an:disabled::before{ background: var(--ez-nen-chim); color: var(--ez-hanh-dong-chu-tat); }
.ez-lua-chon > .ez-dap-an.ez-dap-an--da-chon::before{ background: var(--ez-hanh-dong-nen); color: var(--ez-muc-tren-dam); }
.ez-dap-an--loi-giai .ez-dap-an__ky, .ez-lua-chon > .ez-dap-an.ez-dap-an--loi-giai::before{ background: var(--ez-hoc-dung-nen); color: var(--ez-hoc-dung-dam); }
.ez-dap-an--dung .ez-dap-an__ky, .ez-lua-chon > .ez-dap-an.ez-dap-an--dung::before{ background: var(--ez-hoc-dung-dam); color: var(--ez-muc-tren-dam); }
.ez-dap-an--sai .ez-dap-an__ky, .ez-lua-chon > .ez-dap-an.ez-dap-an--sai::before{ background: var(--ez-hoc-sai-dam); color: var(--ez-muc-tren-dam); }

/* ---- EzPhanHoi (tam phan hoi sau Kiem tra) ------------------------------------
   Dung · sai · gan dung · loi giai: NEN nhat + VACH tren 4px + bieu tuong + chu.
   Khong chi mau (qc 10). */
.ez-phan-hoi{
  display: flex; flex-direction: column; gap: var(--ez-khe-trong-khoi);
  padding: var(--ez-le-trong); border-radius: var(--ez-bo-the); border: 0;
  font-family: var(--ez-phong-than); color: var(--ez-muc-chinh);
  background: var(--ez-hoc-dung-nen); box-shadow: inset 0 4px 0 var(--ez-hoc-dung-vien);
}
.ez-phan-hoi__dinh{
  display: flex; align-items: center; gap: var(--ez-khe-trong-khoi);
  font-family: var(--ez-phong-tieu-de); font-weight: 800;
  font-size: var(--ez-chu-tieu-de-3-co); line-height: var(--ez-chu-tieu-de-3-cao);
  color: var(--ez-hoc-dung-dam);
}
.ez-phan-hoi__hinh{ display: inline-flex; flex: none; color: inherit; background: none; width: auto; height: auto; }
.ez-phan-hoi--dung{ background: var(--ez-hoc-dung-nen); box-shadow: inset 0 4px 0 var(--ez-hoc-dung-vien); }
.ez-phan-hoi--sai{ background: var(--ez-hoc-sai-nen); box-shadow: inset 0 4px 0 var(--ez-hoc-sai-vien); }
.ez-phan-hoi--sai .ez-phan-hoi__dinh{ color: var(--ez-hoc-sai-dam); }
.ez-phan-hoi--gan-dung{ background: var(--ez-bai-gan-dung-nen); box-shadow: inset 0 4px 0 var(--ez-bai-gan-dung-vien); }
.ez-phan-hoi--gan-dung .ez-phan-hoi__dinh{ color: var(--ez-bai-gan-dung-dam); }
.ez-phan-hoi--dap-an{ background: var(--ez-hoc-can-on-nen); box-shadow: inset 0 4px 0 var(--ez-hoc-can-on-vien); }
.ez-phan-hoi--dap-an .ez-phan-hoi__dinh{ color: var(--ez-hoc-can-on-dam); }
/* EzPhanHoi `day` (ban ve M3): tam phan hoi thanh DAI DAY MAN — nen va vach tren
   trai het be ngang bang border-image (ve tran, khong sinh cuon ngang), chu thang
   mep cot dap an. Mau theo trang thai qua hai bien. */
.ez-phan-hoi--day{
  --ph-nen: var(--ez-hoc-dung-nen); --ph-vien: var(--ez-hoc-dung-vien);
  border-radius: 0; box-shadow: none; background: none;
  padding: var(--ez-le-trong) 0 calc(var(--ez-le-trong) + env(safe-area-inset-bottom));
  border-image: linear-gradient(var(--ph-vien) 0 4px, var(--ph-nen) 4px) fill 0 / 0 / 0 100vmax;
}
.ez-phan-hoi--day.ez-phan-hoi--sai{ --ph-nen: var(--ez-hoc-sai-nen); --ph-vien: var(--ez-hoc-sai-vien); }
.ez-phan-hoi--day.ez-phan-hoi--gan-dung{ --ph-nen: var(--ez-bai-gan-dung-nen); --ph-vien: var(--ez-bai-gan-dung-vien); }
.ez-phan-hoi--day.ez-phan-hoi--dap-an{ --ph-nen: var(--ez-hoc-can-on-nen); --ph-vien: var(--ez-hoc-can-on-vien); }
.ez-phan-hoi__dap{ font-weight: 600; font-size: var(--ez-chu-than-co); line-height: var(--ez-chu-than-cao); }
.ez-phan-hoi__vi{ font-size: var(--ez-chu-than-co); line-height: var(--ez-chu-than-cao); color: var(--ez-muc-chinh); }
.ez-phan-hoi__dinh .nut--nghe{ margin-inline-start: auto; }
.ez-phan-hoi__goi-y{ display: flex; flex-wrap: wrap; gap: var(--ez-khe-trong-khoi); }

/* ---- EzTheSo (the con so) ------------------------------------------------------ */
.ez-the-so{
  box-sizing: border-box; display: flex; flex-direction: column; gap: var(--ez-khe-trong-khoi);
  padding: var(--ez-le-trong); border-radius: var(--ez-bo-the);
  background: var(--ez-nen-the); border: 1px solid var(--ez-vien-nhat); box-shadow: var(--ez-noi-1);
  color: var(--ez-muc-chinh); text-align: left;
}
.ez-the-so__nhan{ font-size: var(--ez-chu-nhan-co); line-height: var(--ez-chu-nhan-cao); font-weight: 600; color: var(--ez-muc-phu); }
.ez-the-so__so{ font-family: var(--ez-phong-so); font-weight: 800; font-size: var(--ez-chu-tieu-de-1-co); line-height: var(--ez-chu-tieu-de-1-cao); }
.ez-the-so__cau{ font-size: var(--ez-chu-phu-co); line-height: var(--ez-chu-phu-cao); color: var(--ez-muc-phu); }
.ez-the-so__cau--len{ color: var(--ez-he-thong-thanh-cong-dam); font-weight: 600; }
.ez-the-so__cau--xuong, .ez-the-so__cau--ngang{ color: var(--ez-muc-phu); }
.ez-the-so__hinh{ display: inline-flex; }
.ez-the-so__hinh .hinh{ color: var(--ez-thuong-xp-nen); }
.ez-the-so__hinh[data-thuong="chuoi-ngay"] .hinh{ color: var(--ez-thuong-chuoi-ngay-nen); }
.ez-the-so__hinh[data-thuong="gem"] .hinh{ color: var(--ez-thuong-gem-nen); }
.ez-the-so__hinh[data-thuong="muc"] .hinh{ color: var(--ez-hanh-dong-nen); }
/* O so theo loai thuong (ban ve man ket buoi, Pha 4 nguyen mau lam bai): nen NHAT
   + chu + bieu tuong cung mot loai, khong vien; nhan doc mau chu cua o. */
.ez-the-so--xp{ background: var(--ez-thuong-xp-nhat); color: var(--ez-thuong-xp-chu); border-color: transparent; }
.ez-the-so--chuoi-ngay{ background: var(--ez-thuong-chuoi-ngay-nhat); color: var(--ez-thuong-chuoi-ngay-chu); border-color: transparent; }
.ez-the-so--gem{ background: var(--ez-thuong-gem-nhat); color: var(--ez-thuong-gem-chu); border-color: transparent; }
.ez-the-so--muc{ background: var(--ez-hanh-dong-nhat); color: var(--ez-hanh-dong-chu); border-color: transparent; }
.ez-the-so:is(.ez-the-so--xp, .ez-the-so--chuoi-ngay, .ez-the-so--gem, .ez-the-so--muc) .ez-the-so__nhan{ color: inherit; }

/* ---- EzThuong (huy hieu dem: XP, chuoi ngay, gem, huy hieu, cap do) ------------ */
.ez-thuong{
  display: inline-flex; align-items: center; gap: var(--ez-khe-8);
  min-height: 36px; padding: 0 var(--ez-khe-12) 0 var(--ez-khe-4); border-radius: var(--ez-bo-tron);
  font-family: var(--ez-phong-so); font-weight: 800; font-size: var(--ez-chu-phu-co);
  font-variant-numeric: tabular-nums;
}
.ez-thuong__dot{ width: 28px; height: 28px; border-radius: var(--ez-bo-tron); display: inline-flex; align-items: center; justify-content: center; color: var(--ez-muc-tren-dam); }
.ez-thuong--xp{ background: var(--ez-thuong-xp-nhat); color: var(--ez-thuong-xp-chu); }
.ez-thuong--xp .ez-thuong__dot{ background: var(--ez-thuong-xp-nen); }
.ez-thuong--chuoi-ngay{ background: var(--ez-thuong-chuoi-ngay-nhat); color: var(--ez-thuong-chuoi-ngay-chu); }
.ez-thuong--chuoi-ngay .ez-thuong__dot{ background: var(--ez-thuong-chuoi-ngay-nen); }
.ez-thuong--gem{ background: var(--ez-thuong-gem-nhat); color: var(--ez-thuong-gem-chu); }
.ez-thuong--gem .ez-thuong__dot{ background: var(--ez-thuong-gem-nen); }
.ez-thuong--huy-hieu{ background: var(--ez-thuong-huy-hieu-nhat); color: var(--ez-thuong-huy-hieu-chu); }
.ez-thuong--huy-hieu .ez-thuong__dot{ background: var(--ez-thuong-huy-hieu-nen); }
.ez-thuong--trung-tinh, .ez-thuong.dinh__mot--ngat{ background: var(--ez-nen-trang); }

/* ---- EzThanhDinh (thanh dinh + dai nhan vai 3px) ---------------------------- */
.ez-thanh-dinh{
  display: flex; align-items: center; gap: var(--ez-khe-hang);
  min-height: 52px; padding: var(--ez-khe-8) var(--ez-luoi-le);
  background: var(--ez-nen-the); color: var(--ez-muc-chinh);
  border: 0; border-bottom: 3px solid var(--ez-vai-mau); border-radius: 0;
  font-family: var(--ez-phong-than);
}
.ez-thanh-dinh__logo{
  font-family: var(--ez-phong-tieu-de); font-weight: 800; font-size: var(--ez-bt-24);
  letter-spacing: -0.02em; line-height: 1; color: var(--ez-hanh-dong-nen);
}
/* Tieu de + dong phu (ban ve desktop: "Hoc" / "Toan lop 3"). Duoi 1024 chi con
   logo va ben phai; man khong co thanh ben giu dong phu (ten vo) canh logo. */
.ez-thanh-dinh__dau{ display: flex; flex-direction: column; min-width: 0; }
.ez-thanh-dinh__ten{ display: none; font-family: var(--ez-phong-tieu-de); font-weight: 800; color: var(--ez-muc-chinh);
  font-size: var(--ez-chu-tieu-de-3-co); line-height: var(--ez-chu-tieu-de-3-cao); }
.ez-thanh-dinh__ten:empty, .ez-thanh-dinh__phu:empty{ display: none; }
.ez-thanh-dinh__phu{ font-size: var(--ez-chu-phu-co); line-height: var(--ez-chu-phu-cao); color: var(--ez-muc-phu); font-weight: 400; }
body:has(.ez-tab-day) .ez-thanh-dinh__phu{ display: none; }
.ez-thanh-dinh__phai{ margin-left: auto; display: inline-flex; align-items: center; gap: var(--ez-khe-8); color: var(--ez-muc-phu); font-weight: 400; }
/* Mat nguoi dung: chi tu 1024 (ban ve: dien thoai khong co mat tren thanh dinh). */
.ez-thanh-dinh__mat{ display: none; }
/* Mat co anh (G14): anh be da chon lap tron o, khong nen tim cua chu dau. */
.ez-mat--anh{ overflow: hidden; background: var(--ez-nen-trang); }
.ez-mat__anh{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1024px) {
  body:has(.ez-tab-day) .ez-thanh-dinh{ min-height: 72px; padding: 0 var(--ez-khe-32); }
  body:has(.ez-tab-day) .ez-thanh-dinh__logo{ display: none; }
  body:has(.ez-tab-day) .ez-thanh-dinh__ten:not(:empty), body:has(.ez-tab-day) .ez-thanh-dinh__phu:not(:empty){ display: block; }
  body:has(.ez-tab-day) .ez-thanh-dinh__mat:not([hidden]){
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: var(--ez-bo-tron);
    background: var(--ez-hanh-dong-nhat); color: var(--ez-hanh-dong-chu);
    font-family: var(--ez-phong-tieu-de); font-weight: 800; font-size: var(--ez-chu-phu-co);
  }
  body:has(.ez-tab-day) .ez-thanh-dinh__hep{ display: none; }
  /* Khoang tho duoi thanh dinh (EzKhuon: dem tren 32px o may tinh), ca bon vo. */
  body:has(.ez-tab-day) main.khung{ padding-top: var(--ez-khe-32); }
  /* Thanh dinh da noi tieu de man: tieu de trong ruot thoi lap lai. */
  body:has(.ez-tab-day):has(.ez-thanh-dinh__ten:not(:empty)) .tieu-de-man{ display: none; }
}

/* Ten man o dau ruot duoi 1024, khi man khong tu ve tieu de (khung-vo.js ghi
   `data-ten-man`). Tu 1024 thanh dinh da noi ten nen khoi nay an. */
@media (max-width: 1023px) {
  body:has(.ez-tab-day) main.khung[data-ten-man]:not(:has(.tieu-de-man))::before{
    content: attr(data-ten-man); display: block; margin-bottom: var(--ez-khe-16);
    font-family: var(--ez-phong-tieu-de); font-weight: 800; color: var(--ez-muc-chinh);
    font-size: var(--ez-chu-tieu-de-2-co); line-height: var(--ez-chu-tieu-de-2-cao); text-wrap: balance;
  }
}

/* ---- EzTabDay (duoi 1024) ------------------------------------------------------ */
.ez-tab-day{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: var(--ez-khe-8) var(--ez-khe-8) calc(var(--ez-khe-8) + env(safe-area-inset-bottom));
  background: var(--ez-nen-the); border-top: 1px solid var(--ez-vien-nhat);
  font-family: var(--ez-phong-than);
}
/* Tab day dinh DAY man: cuon mot o/nut "vua du thay" (Tab, ban phim nhay o, scrollIntoView)
   ma khong khai phan ay thi no nam DUOI tab day, cham roi vao tab (dien tap live 28/09:
   nut Luu thong tin nhan tien bi che, cham doi muc, mat chu vua go). */
html:has(.ez-tab-day){ scroll-padding-bottom: calc(var(--ez-vung-cham) + var(--ez-khe-8) * 3 + env(safe-area-inset-bottom)); }
.ez-tab-day__muc{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--ez-vung-cham); width: auto; padding: 0; border: 0; border-radius: var(--ez-bo-nut);
  background: transparent; box-shadow: none; cursor: pointer;
  font-family: var(--ez-phong-than); font-size: var(--ez-chu-nhan-co); line-height: var(--ez-chu-nhan-cao);
  font-weight: 600; color: var(--ez-muc-phu);
}
.ez-tab-day__muc:hover{ background: transparent; }
.ez-tab-day__muc:active{ transform: none; background: transparent; }
.ez-tab-day__hinh{
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 32px; border-radius: var(--ez-bo-tron); background: transparent;
}
.ez-tab-day__muc[aria-current="page"], .ez-tab-day__muc.ez-tab-day__muc--dang{ font-weight: 800; color: var(--ez-hanh-dong-chu); }
.ez-tab-day__muc[aria-current="page"] .ez-tab-day__hinh, .ez-tab-day__muc.ez-tab-day__muc--dang .ez-tab-day__hinh{ background: var(--ez-hanh-dong-nhat); }

/* ---- EzThanhBen (tu 1024) ------------------------------------------------------ */
.ez-thanh-ben{
  box-sizing: border-box; width: var(--ez-rong-thanh-ben);
  display: flex; flex-direction: column; gap: var(--ez-khe-giua-khoi);
  padding: var(--ez-khe-24) var(--ez-khe-16);
  background: var(--ez-nen-the); border-right: 1px solid var(--ez-vien-nhat);
  font-family: var(--ez-phong-than); color: var(--ez-muc-chinh);
}
.ez-thanh-ben__dau{ display: flex; flex-direction: column; gap: var(--ez-khe-8); padding: 0 var(--ez-khe-12); }
.ez-thanh-ben__logo{ font-family: var(--ez-phong-tieu-de); font-weight: 800; font-size: var(--ez-bt-32); letter-spacing: -0.02em; line-height: 1; color: var(--ez-hanh-dong-nen); }
.ez-thanh-ben__vai{
  align-self: flex-start; padding: 2px var(--ez-khe-8); border-radius: var(--ez-bo-tron);
  font-size: var(--ez-chu-chu-thich-co); line-height: var(--ez-chu-chu-thich-cao); font-weight: 600;
  color: var(--ez-vai-mau); box-shadow: inset 0 0 0 1.4px var(--ez-vai-mau);
}
.ez-thanh-ben__ds{ display: flex; flex-direction: column; gap: var(--ez-khe-4); }
.ez-thanh-ben__muc{
  display: flex; align-items: center; gap: var(--ez-khe-12);
  min-height: var(--ez-vung-cham); padding: 0 var(--ez-khe-12); border: 0; border-radius: var(--ez-bo-nut);
  background: transparent; color: var(--ez-muc-phu); cursor: pointer; text-align: left; width: 100%;
  font-family: var(--ez-phong-than); font-size: var(--ez-chu-than-co); line-height: var(--ez-chu-than-cao); font-weight: 400;
}
.ez-thanh-ben__muc:hover{ background: var(--ez-nen-trang); }
.ez-thanh-ben__muc:focus-visible{ outline: none; box-shadow: var(--ez-noi-tieu-diem); }
.ez-thanh-ben__muc[aria-current="page"]{ background: var(--ez-hanh-dong-nhat); color: var(--ez-hanh-dong-chu); font-weight: 600; }

/* ---- TAB DAY -> THANH BEN tu 1024 (luat co gian DS: "thanh ben tu 1024; duoi
   1024 dung tab day"). CUNG mot phan tu `.ez-tab-day`, cung muc, cung thu tu. */
.ez-tab-day__dau{ display: none; flex-direction: column; gap: var(--ez-khe-8); padding: 0 var(--ez-khe-12) var(--ez-khe-16); }
.ez-tab-day__chan{ display: none; }
@media (min-width: 1024px) {
  /* EzThanhBen: tu 1024 tab day thanh THANH BEN (luat co gian: "thanh ben tu
     1024; duoi 1024 dung tab day"). Cung mot phan tu, cung bon muc, cung thu tu. */
  body:has(.ez-tab-day){ padding-left: var(--ez-rong-thanh-ben); }
  html:has(.ez-tab-day){ scroll-padding-bottom: 0; }
  .ez-tab-day{
    top: 0; bottom: 0; left: 0; right: auto; width: var(--ez-rong-thanh-ben); transform: none;
    grid-auto-flow: row; grid-auto-rows: min-content; grid-auto-columns: auto; align-content: start;
    gap: var(--ez-khe-4); padding: var(--ez-khe-24) var(--ez-khe-16);
    border-top: 0; border-right: 1px solid var(--ez-vien-nhat); border-radius: 0;
  }
  .ez-tab-day__dau{ display: flex; }
  .ez-tab-day__muc{
    flex-direction: row; justify-content: flex-start; gap: var(--ez-khe-12);
    padding: 0 var(--ez-khe-12); font-size: var(--ez-chu-than-co); line-height: var(--ez-chu-than-cao); font-weight: 400;
  }
  .ez-tab-day__muc:hover{ background: var(--ez-nen-trang); }
  .ez-tab-day__muc[aria-current="page"], .ez-tab-day__muc.ez-tab-day__muc--dang, .ez-tab-day__muc[aria-current="page"]:hover, .ez-tab-day__muc.ez-tab-day__muc--dang:hover{ background: var(--ez-hanh-dong-nhat); font-weight: 600; }
  .ez-tab-day__hinh, .ez-tab-day__muc[aria-current="page"] .ez-tab-day__hinh, .ez-tab-day__muc.ez-tab-day__muc--dang .ez-tab-day__hinh{ width: auto; height: auto; background: transparent; }
  /* Chan thanh ben (EzThanhBen): the nguoi dang dung, day xuong day cot. */
  .ez-tab-day__chan:not([hidden]){
    position: absolute; left: var(--ez-khe-16); right: var(--ez-khe-16); bottom: var(--ez-khe-24);
    display: flex; align-items: center; gap: var(--ez-khe-12);
    padding: var(--ez-khe-12); border-radius: var(--ez-bo-nut); background: var(--ez-nen-trang);
  }
  .ez-tab-day__mat{
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; border-radius: var(--ez-bo-tron);
    background: var(--ez-hanh-dong-nhat); color: var(--ez-hanh-dong-chu);
    font-family: var(--ez-phong-tieu-de); font-weight: 800; font-size: var(--ez-chu-phu-co);
  }
  .ez-tab-day__nguoi{ display: flex; flex-direction: column; min-width: 0; }
  .ez-tab-day__ten{ font-weight: 600; font-size: var(--ez-chu-phu-co); line-height: var(--ez-chu-phu-cao); color: var(--ez-muc-chinh);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ez-tab-day__phu{ font-size: var(--ez-chu-chu-thich-co); line-height: var(--ez-chu-chu-thich-cao); color: var(--ez-muc-phu); }
}

/* ---- THANH GON (rail) 600-1023 cho vo thay co va buong lai (DS: "thanh ben,
   thu gon < 1024"; EzKhuon L4/L5: nav may tinh bang = rail 88px). Duoi 600 van
   la tab day. */
@media (min-width: 600px) and (max-width: 1023px) {
  html[data-vai="thay-co"] body:has(.ez-tab-day), html[data-vai="quan-tri"] body:has(.ez-tab-day){ padding-left: 88px; }
  html[data-vai="thay-co"]:has(.ez-tab-day), html[data-vai="quan-tri"]:has(.ez-tab-day){ scroll-padding-bottom: 0; }
  [data-vai="thay-co"] .ez-tab-day, [data-vai="quan-tri"] .ez-tab-day{
    top: 0; bottom: 0; left: 0; right: auto; width: 88px;
    grid-auto-flow: row; grid-auto-rows: min-content; grid-auto-columns: auto; align-content: start;
    gap: var(--ez-khe-8); padding: var(--ez-khe-24) var(--ez-khe-8);
    border-top: 0; border-right: 1px solid var(--ez-vien-nhat);
  }
}

/* ---- CHIP (chip mon, chip loc): khong xuong hang, cuon ngang ------------------- */
.ez-chip{
  display: inline-flex; align-items: center; gap: var(--ez-khe-8); flex: none;
  min-height: calc(var(--ez-vung-cham) - var(--ez-khe-8)); padding: 0 var(--ez-khe-12);
  border: 2px solid var(--ez-vien-nhat); border-radius: var(--ez-bo-tron);
  background: var(--ez-nen-the); color: var(--ez-muc-chinh); box-shadow: none; cursor: pointer; width: auto;
  font-family: var(--ez-phong-than); font-weight: 600; font-size: var(--ez-chu-phu-co); line-height: var(--ez-chu-phu-cao);
  white-space: nowrap;
}
.ez-chip[aria-pressed="true"], .ez-chip.ez-chip--dang{
  border-color: var(--mon-mau, var(--ez-hanh-dong-nen)); background: var(--mon-nen, var(--ez-hanh-dong-nhat));
  color: var(--mon-mau, var(--ez-hanh-dong-chu));
}
.ez-chip:disabled{ background: var(--ez-nen-chim); color: var(--ez-hanh-dong-chu-tat); cursor: default; }
@media (pointer: coarse) { .ez-chip{ min-height: var(--ez-vung-cham); } }

/* ---- TAB trong trang ------------------------------------------------------------ */
.ez-tab{
  min-height: var(--ez-vung-cham); padding: var(--ez-khe-8) var(--ez-khe-16); width: auto;
  border: 0; border-radius: var(--ez-bo-nut); background: transparent; box-shadow: none; cursor: pointer;
  font-family: var(--ez-phong-than); font-weight: 600; font-size: var(--ez-chu-than-co); color: var(--ez-muc-phu);
}
.ez-tab[aria-selected="true"], .ez-tab.ez-tab--dang{ background: var(--ez-hanh-dong-nhat); color: var(--ez-hanh-dong-chu); font-weight: 800; }
.ez-tab-hang{ display: flex; gap: var(--ez-khe-4); flex-wrap: nowrap; overflow-x: auto; }

/* ---- NHAN trang thai (khong bam duoc) ------------------------------------------- */
.ez-nhan{
  display: inline-flex; align-items: center; gap: var(--ez-khe-4); align-self: flex-start;
  padding: 2px var(--ez-khe-8); border-radius: var(--ez-bo-tron);
  font-size: var(--ez-chu-nhan-co); line-height: var(--ez-chu-nhan-cao); font-weight: 600;
  background: var(--ez-nen-chim); color: var(--ez-muc-phu);
}
.ez-nhan--on{ background: var(--ez-hoc-can-on-nen); color: var(--ez-hoc-can-on-dam); }
.ez-nhan--moi{ background: var(--ez-hoc-moi-nen); color: var(--ez-hoc-moi-dam); }
.ez-nhan--dung{ background: var(--ez-hoc-dung-nen); color: var(--ez-hoc-dung-dam); }
.ez-nhan--da-thuoc{ background: var(--ez-hoc-da-thuoc-nen); color: var(--ez-hoc-da-thuoc-dam); }
.ez-nhan--dang-hoc{ background: var(--ez-hoc-dang-hoc-nen); color: var(--ez-hoc-dang-hoc-dam); }
.ez-nhan--can-giup{ background: var(--ez-hoc-can-on-nen); color: var(--ez-hoc-can-on-dam); }
.ez-nhan--dang-duyet{ background: var(--ez-hoc-can-on-nen); color: var(--ez-hoc-can-on-dam); }
/* Nhan cuoi mot dong BAM DUOC ("Lam de"): mang mau hanh dong, khong mau nhan trung tinh. */
.ez-nhan--lam{ background: var(--ez-hanh-dong-nhat); color: var(--ez-hanh-dong-chu); align-self: center; flex: none;
  padding: var(--ez-khe-4) var(--ez-khe-12); border: 1px solid var(--ez-hanh-dong-vien); font-weight: 800; }
:is(button, a):hover > .ez-nhan--lam{ background: var(--ez-hanh-dong-nen); color: var(--ez-hanh-dong-tren); border-color: var(--ez-hanh-dong-nen); }

/* ---- THANH TIEN DO ---------------------------------------------------------------- */
.ez-tien-do{ height: var(--ez-khe-12); background: var(--ez-tien-do-ranh); border-radius: var(--ez-bo-tron); overflow: hidden; }
.ez-tien-do__day{ height: 100%; background: var(--ez-tien-do-dang); border-radius: var(--ez-bo-tron); }
.ez-tien-do--xong .ez-tien-do__day{ background: var(--ez-tien-do-xong); }

/* ---- EzTheKeo (the keo, o dich). Keo tha LUON co phuong an ban phim ------------- */
.ez-the-keo{
  box-sizing: border-box; position: relative;
  display: flex; align-items: center; gap: var(--ez-khe-8);
  min-height: var(--ez-vung-cham); padding: 0 var(--ez-khe-16);
  border: 2px solid var(--ez-vien-dam); border-radius: var(--ez-bo-nut);
  background: var(--ez-nen-the); color: var(--ez-muc-chinh); box-shadow: var(--ez-bong-nut-phu);
  font-family: var(--ez-phong-so); font-weight: 600; font-size: var(--ez-chu-than-lon-co); line-height: var(--ez-chu-than-lon-cao);
  cursor: grab; text-align: left; overflow-wrap: anywhere;
}
.ez-the-keo:focus-visible{ outline: none; box-shadow: var(--ez-noi-tieu-diem); }
.ez-the-keo--dang-lam{ border-color: var(--ez-bai-dang-lam-vien); box-shadow: var(--ez-bai-bong-nhac); }
.ez-the-keo--da-chon{ border-color: var(--ez-hanh-dong-nen); background: var(--ez-hanh-dong-nhat); color: var(--ez-hanh-dong-chu); box-shadow: none; }
.ez-the-keo--dung{ border-color: var(--ez-hoc-dung-dam); background: var(--ez-hoc-dung-nen); color: var(--ez-hoc-dung-dam); box-shadow: none; }
/* Sap xep thu tu: moi muc mot hang, o so thu tu ben trai (ban ve DS 1.0); be
   cham lan luot, so hien ngay tren hang vua cham. */
.ez-the-keo--thu-tu{ width: 100%; padding-left: calc(var(--ez-khe-32) + var(--ez-khe-24)); }
.ez-the-keo--thu-tu::before{
  content: attr(data-so); position: absolute; left: var(--ez-khe-12); top: 50%; transform: translateY(-50%);
  width: var(--ez-khe-32); height: var(--ez-khe-32); border-radius: var(--ez-bo-8);
  display: grid; place-items: center; box-sizing: border-box;
  font-family: var(--ez-phong-tieu-de); font-size: var(--ez-chu-phu-co); font-weight: 800;
  border: 2px dashed var(--ez-vien-dam); color: var(--ez-muc-phu);
}
.ez-the-keo--thu-tu.ez-the-keo--da-chon::before{ border: 0; background: var(--ez-hanh-dong-nen); color: var(--ez-muc-tren-dam); }
.ez-o-dich{
  min-height: var(--ez-vung-cham); border: 2px dashed var(--ez-bai-o-dich-vien); border-radius: var(--ez-bo-nut);
  background: var(--ez-bai-o-dich-nen); color: var(--ez-muc-mo);
}

/* ---- EzOHinh (o chua hinh minh hoa co ma). Chua co hinh: bieu tuong + ma -------- */
.ez-o-hinh{
  position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ez-khe-4);
  border-radius: var(--ez-bo-long, var(--ez-bo-the)); overflow: hidden;
  background: var(--ez-mau-tim-50); color: var(--ez-mau-tim-600);
}
.ez-o-hinh img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ez-o-hinh--nhan-vat, .ez-o-hinh--huy-hieu, .ez-o-hinh--anh-dai-dien{ aspect-ratio: 1 / 1; }
.ez-o-hinh--anh-dai-dien{ border-radius: var(--ez-bo-tron); }
/* Nhan vat, huy hieu la anh NEN TRONG: co anh roi thi bo nen cho cua o (nen tim
   chi danh cho luc chua co tep), khong thi thanh o vuong sau linh vat. */
.ez-o-hinh:is(.ez-o-hinh--nhan-vat, .ez-o-hinh--huy-hieu):has(> img){ background: transparent; }
.ez-o-hinh--bia-mon{ aspect-ratio: 3 / 1; }
.ez-o-hinh--bia-chuong{ aspect-ratio: 3 / 2; }

/* ---- TRANG THAI RONG / LAN DAU (minh hoa he thong 64px duotone) ---------------- */
.ez-trong-vui{ align-items: center; text-align: center; }
.ez-trong-vui__hinh{ display: inline-flex; color: var(--ez-mau-tim-500); }
/* O khoa khong bam duoc: mau chu phu, khong mau hanh dong (ra soat luot 2, G11; doi tu ds.css 14/10 vi cong ghi-de-ds). */
.ez-trong-vui__hinh--khoa{ color: var(--ez-muc-phu); }

/* ---- BAO (dai thong bao he thong) ------------------------------------------------ */
.ez-bao{
  padding: var(--ez-khe-12) var(--ez-khe-16); border-radius: var(--ez-bo-nut);
  font-size: var(--ez-chu-than-co); line-height: var(--ez-chu-than-cao);
}
.ez-bao--loi{ background: var(--ez-he-thong-loi-nen); color: var(--ez-he-thong-loi-dam); border: 1px solid var(--ez-he-thong-loi-vien); }
.ez-bao--thuong{ background: var(--ez-nen-the); color: var(--ez-muc-chinh); border: 1px solid var(--ez-vien-nhat); }
.ez-bao--thanh-cong{ background: var(--ez-he-thong-thanh-cong-nen); color: var(--ez-he-thong-thanh-cong-dam); border: 1px solid var(--ez-he-thong-thanh-cong-vien); }
.ez-hang-doi{ padding: var(--ez-khe-8) var(--ez-khe-12); font-size: var(--ez-chu-phu-co); line-height: var(--ez-chu-phu-cao); text-align: center; background: var(--ez-he-thong-canh-bao-nen); color: var(--ez-he-thong-canh-bao-dam); }

/* ---- GIAM CHUYEN DONG ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ez-nut, .ez-dap-an{ transition: none; }
  .ez-nut:active, .ez-dap-an--da-chon{ transform: none; }
}

/* Lop dung chung duoc goi tu JS (soat-lop doi moi lop goi phai co khai bao). */
.ez-tab-day__chu { white-space: nowrap; }
/* EzOHinh theo loai (danh muc hinh): ti le mac dinh; o-hinh.js dat ti le chinh xac. */
.ez-o-hinh--minh-hoa-trang-thai { aspect-ratio: 4 / 3; }
.ez-o-hinh--bia-mon-rong { aspect-ratio: 16 / 9; }
.ez-o-hinh--hinh-de-bai { aspect-ratio: 16 / 9; }

/* ---- EzKhuon: KHUON BO CUC L1-L9 tren LUOI 4 · 8 · 12 (Pha 3d, 26/09/2026) ----
   Vung ruot cua man khai `data-khuon`; thuoc `thu/_soi-ds.mjs` do moi man co
   dung MOT khuon va moi khoi rong dung so cot. Khong man nao tu che luoi.
     L1  tap trung mot cot (lam bai, form, cua vao)  -> cot doc, khung 560/720
     L2  chinh + phu (man Hoc)                      -> 8+4 · 5+3 · mot cot
     L3  bang the so lieu                           -> the khai data-nhip 3/4/6/8/12
     L4  danh sach + chi tiet                       -> 4+8 · 3+5 · mot cot
     L5  bang du lieu day                           -> ca hang, bang cuon ngang
     L6  luoi the (mon, huy hieu, goi)              -> 2 · 3 · 4 the mot hang
     L7  toan man khoanh khac                       -> cot doc can giua, 560
     L8  sanh tro choi                              -> 2 · 3 · 3 the mot hang
     L9  ban choi                                   -> cot doc can giua, 720
   Nhip the (the-module): dien thoai moi the CA HANG; bang doc 3/4 -> 4 cot,
   6/8/12 -> 8 cot; tu 1024 dung so khai. ------------------------------------ */
.ez-luoi, [data-khuon="L2"], [data-khuon="L3"], [data-khuon="L4"], [data-khuon="L5"]{
  display: grid; grid-template-columns: repeat(var(--ez-luoi-cot), minmax(0, 1fr));
  column-gap: var(--ez-luoi-khe); row-gap: var(--ez-khe-giua-khoi); align-items: start;
}
:is(.ez-luoi, [data-khuon="L2"], [data-khuon="L3"], [data-khuon="L4"], [data-khuon="L5"]) > *{ grid-column: 1 / -1; min-width: 0; }
/* L3: the module cung hang cao bang nhau (bang the so lieu). */
[data-khuon="L3"]{ align-items: stretch; }
[data-khuon="L1"], [data-khuon="L7"], [data-khuon="L9"]{ display: flex; flex-direction: column; gap: var(--ez-khe-giua-khoi); }
[data-khuon="L6"], [data-khuon="L8"]{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ez-luoi-khe); align-items: stretch;
}
:is([data-khuon="L6"], [data-khuon="L8"]) > :is(h1, h2, h3, p, .hieu2, .hieu3, .nhan-khoi){ grid-column: 1 / -1; }
@media (min-width: 600px){
  :is(.ez-luoi, [data-khuon="L3"]) > :is([data-nhip="3"], [data-nhip="4"]){ grid-column: span 4; }
  :is(.ez-luoi, [data-khuon="L3"]) > :is([data-nhip="6"], [data-nhip="8"], [data-nhip="12"]){ grid-column: span 8; }
  [data-khuon="L2"] > .cot-chinh, [data-khuon="L4"] > .cot-chi-tiet{ grid-column: span 5; }
  [data-khuon="L2"] > .cot-phu, [data-khuon="L4"] > .cot-ds{ grid-column: span 3; }
  [data-khuon="L6"], [data-khuon="L8"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  :is(.ez-luoi, [data-khuon="L3"]) > [data-nhip="3"]{ grid-column: span 3; }
  :is(.ez-luoi, [data-khuon="L3"]) > [data-nhip="4"]{ grid-column: span 4; }
  :is(.ez-luoi, [data-khuon="L3"]) > [data-nhip="6"]{ grid-column: span 6; }
  :is(.ez-luoi, [data-khuon="L3"]) > [data-nhip="8"]{ grid-column: span 8; }
  :is(.ez-luoi, [data-khuon="L3"]) > [data-nhip="12"]{ grid-column: span 12; }
  [data-khuon="L2"] > .cot-chinh, [data-khuon="L4"] > .cot-chi-tiet{ grid-column: span 8; }
  [data-khuon="L2"] > .cot-phu, [data-khuon="L4"] > .cot-ds{ grid-column: span 4; }
  [data-khuon="L6"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* KHOI DUNG MOT MINH NEO LE TRAI (ra soat lan 2, 14/10): ban can giua cua lan 1
     lam le trai nhay theo man (Sanh 288, Nhan tin va Dau tri 451 o 1280) trong khi
     hang tab van o 288. Moi man L2/L3 chung MOT le trai voi tab; cot doc hep hon
     thi de trong ben phai, khong dich ca cot. */
}
/* HANG CHI SO (ban ve M5, M6): cac o so lieu nho DEU mot hang o moi kho, khe
   bang khe luoi; trong luoi 12 cot, ba o = ba nhip 4. */
.hang-so{ display: grid; grid-template-columns: repeat(var(--so-o, 3), minmax(0, 1fr)); gap: var(--ez-luoi-khe); }
.hang-so > *{ min-width: 0; }
/* May hep (< 600): o so gon, can giua, so bac tieu de 2 (ban ve M5). */
@media (max-width: 599px){
  .hang-so > :is(.o-so, .ez-the-so){ padding: var(--ez-khe-12); align-items: center; text-align: center; }
  .hang-so :is(.o-so__gia, .ez-the-so__so){ font-size: var(--ez-chu-tieu-de-2-co); line-height: var(--ez-chu-tieu-de-2-cao); overflow-wrap: anywhere; }
  /* Cua nguoi lon doc so ca ngay (doi tac): can trai nhu the so buong lai, khong can giua. */
  .hang-so--trai > .ez-the-so{ align-items: flex-start; text-align: left; }
  /* Bon o thuong co bieu tuong (xong phien): bieu tuong TRAI, so + nhan PHAI.
     Xep doc thi bon o thanh 2 x 2 cao ~120px, nut chinh bi day xuong nep gap. */
  .hang-so:has(> :nth-child(4):last-child) > .ez-the-so:has(> .ez-the-so__hinh){
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ez-khe-8); row-gap: 0;
    align-items: center; justify-items: start; text-align: left; }
  .hang-so:has(> :nth-child(4):last-child) > .ez-the-so > .ez-the-so__hinh{ grid-row: span 2; }
  .hang-so:has(> :nth-child(4):last-child) > .ez-the-so:has(> .ez-the-so__hinh) > .ez-the-so__so{ font-size: var(--ez-chu-tieu-de-3-co); line-height: var(--ez-chu-tieu-de-3-cao); overflow-wrap: normal; }
}
/* (doi tu ds.css 14/10 vi cong ghi-de-ds) Man xong phien tu 1024: man cao 800 ma bon the thuong xep 2 x 2 cao ~150 moi the,
   hang thu hai nam duoi thanh nut dinh day. O the gon: bieu tuong canh so, nhan
   duoi; nhan vat nho lai. */
@media (min-width: 1024px) {
  .man--mung .hang-so > .ez-the-so:has(> .ez-the-so__hinh) { display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; column-gap: var(--ez-khe-8); row-gap: var(--ez-khe-4); padding: var(--ez-khe-12) var(--ez-khe-16); }
  .man--mung .hang-so > .ez-the-so:has(> .ez-the-so__hinh) > :not(.ez-the-so__hinh, .ez-the-so__so) { grid-column: 1 / -1; }
  .man--mung .hang-so .ez-the-so__so { font-size: var(--ez-chu-tieu-de-2-co); line-height: var(--ez-chu-tieu-de-2-cao); }
}
.hang-so:has(> :nth-child(2):last-child){ --so-o: 2; }
.hang-so:has(> :nth-child(4):last-child){ --so-o: 4; }
.hang-so:has(> :nth-child(5)){ --so-o: 3; }
/* Duoi 600 hang tu 4 o chia 2 cot. Bo chon PHAI bang do uu tien hai luat tren (0,3,0):
   ban cu `:has(> :nth-child(4))` chi (0,2,0) nen thua va 4 o chen mot hang o 390
   (chu gay tung tu, thuoc gayTu cua _soi-ds bat 26/09). */
@media (max-width: 599px){ .hang-so:is(:has(> :nth-child(4):last-child), :has(> :nth-child(5))){ --so-o: 2; } }
/* Man khoanh khac (L7) la cot doc 560: bon o mot hang chi con ~120px, "Lam quen",
   "chuoi ngay" gay tung chu (ra soat UI/UX 14/10). O cot doc luon 2 x 2. */
.man--mung .hang-so:has(> :nth-child(4):last-child){ --so-o: 2; }
/* TIEU DE MUC trong khuon luoi: khe VUNG phia tren, khe TRONG khoi phia duoi
   (row-gap cua luoi la khe giua khoi, nen bu bang margin). */
:is([data-khuon="L3"], [data-khuon="L4"], [data-khuon="L5"]) > :is(h2, .hieu2){ margin: 0; }
:is([data-khuon="L3"], [data-khuon="L4"], [data-khuon="L5"]) > * + :is(h2, .hieu2){ margin-top: calc(var(--ez-khe-vung) - var(--ez-khe-giua-khoi)); }
:is([data-khuon="L3"], [data-khuon="L4"], [data-khuon="L5"]) > :is(h2, .hieu2) + *{ margin-top: calc(var(--ez-khe-trong-khoi) - var(--ez-khe-giua-khoi)); }

/* ---- Nut Dang xuat ba vo nguoi lon (chung/khung-vo.js, 27/09) -------------------
   Nut chu nho o cuoi Cai dat / cuoi Bao cao: khong gian het cot. */
.nut--dang-xuat{ align-self: flex-start; }   /* khe tren do khe khoi cua vo lo (bo khe vai) */