/* ===== KHUNG CHUNG CHO MỌI KHU LUYỆN THI =====
   Lấy nguyên hệ thiết kế của khu SAT (Roger chốt: "SAT8020 làm chuẩn") rồi bổ
   sung đúng những thứ SAT không có: công thức toán KaTeX, lưới chọn môn của
   trang cổng, và màu nhấn đổi theo kỳ thi.

   IMPORT chứ không chép: sửa sat.css là 41 khu đổi theo. Chép ra 41 bản thì lần
   sửa nào cũng sót vài khu, mà không ai mở đủ 41 khu để phát hiện. */
@import url("/sat8020/sat.css?v=20260824f");

/* ---- Màu nhấn theo kỳ thi ----------------------------------------------
   Mỗi họ đề một màu để mở tab lên là biết đang ở đâu, nhưng vẫn cùng một tông
   với navy của bộ nhận diện. Giá trị chọn theo độ tương phản trên nền trắng
   tối thiểu 4,5:1 — chữ 14px trên màu nhạt hơn là đọc không nổi.        */
body.ky-ap      { --acc:#B23A1E; --acc-lite:#E4633F; --acc-soft:#FDF0EB; }
body.ky-ib      { --acc:#1D6F5C; --acc-lite:#2FA184; --acc-soft:#EAF7F2; }
body.ky-alevel  { --acc:#6B2D8A; --acc-lite:#9B58BC; --acc-soft:#F6EEFA; }
body.ky-igcse   { --acc:#8A5A00; --acc-lite:#C08A1E; --acc-soft:#FBF3E3; }
/* Hai bậc dưới của lộ trình Cambridge (30/8/2026). Cố ý KHÔNG lấy tông nâu của
   IGCSE hay tím của A-Level: bốn khu Cambridge nằm cạnh nhau trong menu, cùng
   tông là phụ huynh mở nhầm bậc của con mà không nhận ra. */
body.ky-cam-pri { --acc:#4338CA; --acc-lite:#6D62E0; --acc-soft:#EFEDFC; }
body.ky-cam-low { --acc:#1B7F79; --acc-lite:#2FA9A1; --acc-soft:#E8F6F5; }
/* (4/10/2026) Toán Olympiad — AMC · TIMO: cam đậm, khác hẳn tông các họ học thuật. */
body.ky-olym    { --acc:#C2410C; --acc-lite:#EA6A2E; --acc-soft:#FFF1E8; }
body.ky-ged     { --acc:#0E6EA0; --acc-lite:#2EA5D6; --acc-soft:#EAF6FD; }
body.ky-ssat    { --acc:#A32357; --acc-lite:#D4548A; --acc-soft:#FCEDF3; }
/* Trọng điểm / lớp 6 Trần Đại Nghĩa: hồng đỏ cùng tông với #ED0E57 của bộ nhận
   diện, nhưng tối hơn để chữ 14px trên nền trắng đạt 4,5:1 (bản gốc chỉ 3,6:1). */
body.ky-tdn     { --acc:#B0186A; --acc-lite:#E0489B; --acc-soft:#FDEDF5; }

/* Logo khu: dùng logo 8020 chung + tên môn viết cạnh, vì 41 môn thì không thể
   có 41 file logo riêng. */
.site-logo span { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Công thức toán ----------------------------------------------------
   Công thức dài (ma trận, tích phân nhiều tầng) tràn ngang làm cả trang cuộn
   ngang trên điện thoại. Cho riêng khối công thức cuộn trong lòng nó.        */
.katex-display { overflow-x:auto; overflow-y:hidden; padding:2px 0; }
.katex { font-size:1.04em; }
.q-opts .katex-display { margin:4px 0; }

/* ---- Trang cổng chọn môn (/ap, /ib, /igcse, /a-level) ------------------- */
.mon-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px; margin-top:18px; }
.mon-o { display:block; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; text-decoration:none; color:inherit;
  transition:border-color .12s, transform .12s; }
.mon-o:hover { border-color:var(--acc-lite); transform:translateY(-1px); }
.mon-o b { display:block; color:var(--navy); font-size:15.5px; }
.mon-o .so { margin-top:7px; font-size:12.5px; color:var(--muted); }
.mon-o .so i { font-style:normal; color:var(--acc); font-weight:700; }
.mon-o.trong { opacity:.55; }
.mon-o.trong .so { color:var(--warn); }

/* ---- Ba bài gần nhất trong hero trang Lộ trình -------------------------
   Lớp này KHÔNG có trong sat.css (khu SAT dựng khối đó bằng style nội tuyến).
   Thiếu nó thì ba phần tử dính liền nhau: "0/40 đúngĐề thi thử tổng hợp". */
.gan-day { display:flex; align-items:center; gap:10px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:9px 13px;
  font-size:13.5px; }
.gan-day > b { color:var(--acc); flex:none; }
.gan-day > span:not(.pill) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gan-day > .pill { margin-left:auto; flex:none; }

/* ---- Tài liệu PDF (mấy quyển sách free tải về) --------------------------
   Mỗi quyển một HÀNG chứ không phải thẻ trong lưới: tên sách ở đây dài và
   không đều nhau ("Đề thi trọng điểm các trường ( Hoa Lư, Trần Quốc Toản,
   Bình Thọ ...)" cạnh "Toán tư duy"), nhồi vào lưới thì thẻ so le cao thấp.
   Hàng thì tên dài bao nhiêu cũng vẫn thẳng cột, và nút Tải luôn nằm cùng một
   chỗ để mắt rà xuống.

   TÊN LỚP LÀ .tl-hang, KHÔNG PHẢI .tl-o: sat.css (khung.css @import nó ở đầu
   file) đã xí mất .tl-o cho thẻ tài liệu có ảnh bìa của khu SAT, và thẻ đó là
   flex-direction:column. Trùng tên thì hàng ở đây dựng đứng lên cao 390px —
   icon một dòng, chữ một dòng, nút một dòng. */
.tl-ds { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
/* Tiêu đề nhóm môn. Có 16 quyển nên danh sách phẳng bắt phụ huynh đọc hết mới
   biết khu này có sách Khoa học hay không; cắt theo môn thì mắt nhảy thẳng tới
   môn con đang yếu. Số quyển đứng cạnh tên để thấy ngay nhóm nào dày. */
.tl-nhom { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:26px 0 0; color:var(--navy); font-size:17px; }
.tl-nhom:first-child { margin-top:6px; }
.tl-nhom .tl-dem { font-size:12.5px; font-weight:700; color:var(--acc);
  background:var(--acc-soft); border-radius:999px; padding:2px 9px; }
.tl-hang { display:flex; flex-direction:row; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; transition:border-color .12s; }
.tl-hang:hover { border-color:var(--acc-lite); }
.tl-hang .tl-ic { flex:none; color:var(--acc); display:flex; }
.tl-hang .tl-nd { flex:1 1 240px; min-width:0; }
/* Tên sách phải là BLOCK: quyển nào không có mô tả (Toán tư duy) thì dòng
   "Xem thử một trang" bị hút lên nằm dính ngay sau tên, đọc ra thành một câu. */
.tl-hang .tl-nd b { display:block; color:var(--navy); font-size:15px; }
.tl-hang .tl-nd p { margin-top:3px; font-size:13px; color:var(--muted); }
.tl-hang .tl-tai { flex:none; display:inline-flex; align-items:center; gap:7px; }

/* Ảnh MỘT TRANG BÊN TRONG sách, thay chỗ cái icon.
   TÊN LÀ .tl-bia, KHÔNG PHẢI .tl-anh: sat.css cũng xí mất .tl-anh rồi (cùng
   một cái bẫy đã làm hàng sách dựng đứng — xem ghi chú .tl-hang ở trên). */
.tl-hang .tl-bia { flex:none; width:172px; height:104px; padding:0; cursor:zoom-in;
  border:1px solid var(--line-2); border-radius:6px; overflow:hidden; background:#fff;
  display:block; transition:border-color .12s, transform .12s; }
/* (27/8/2026) ĐỔI TỪ object-fit:none SANG cover — đây là ĐỔI CÓ CHỦ Ý, không
   phải vá lỗi; bản 'none' vẫn chạy đúng như nó được thiết kế.

   'none' cắt 1:1 từ góc trên-trái, nên nó CHỈ đúng khi ảnh nguồn đã ngắm sẵn
   vào đúng góc đó. Bốn ảnh cũ là ảnh chụp màn hình cắt tay, cỡ chữ to, tỉ lệ
   mỗi cái một kiểu (1,16 · 1,34 · 1,29 · 1,95) — hợp với 'none' và đọc được
   vài dòng thật, đúng như ghi chú cũ nói.

   Đổi vì kho nhảy từ 4 lên 16 quyển và ảnh nay do MÁY dựng hàng loạt
   (tools/anh-xem-thu-tdn.py), ngắm vào HÌNH VẼ giữa trang chứ không vào góc
   trên-trái. Với ảnh kiểu đó thì 'none' chỉ hiện một mẩu tuỳ tiện và xén mất
   chính cái hình. Nay ảnh cắt sẵn đúng tỉ lệ 172:104 nên 'cover' chỉ co lại
   chứ không xén thêm gì. Đánh đổi: chữ nhỏ lại không đọc nổi — chấp nhận, vì ở
   ô 172px cái nhận ra được là HÌNH, muốn đọc chữ thì bấm vào xem trọn trang.

   RÀNG BUỘC KÈM THEO: ảnh nạp vào cover_url phải là bản CẮT SẴN tỉ lệ 172:104.
   Nạp ảnh trọn trang A4 (tỉ lệ 0,71) vào đây thì 'cover' chỉ hiện một dải ngang
   giữa trang. qa/tests/15-tai-lieu-trong-diem.spec.mjs canh đúng ràng buộc này. */
.tl-hang .tl-bia img { width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; }
.tl-hang .tl-bia:hover { border-color:var(--acc); transform:translateY(-1px); }
.tl-hang .tl-xem-nhac { display:inline-block; margin-top:5px; font-size:12.5px;
  font-weight:700; color:var(--acc); cursor:zoom-in; }
.tl-hang .tl-xem-nhac:hover { text-decoration:underline; }

/* Lớp phóng to — ảnh gốc rộng 800–1100px nên đọc được chữ trong trang. */
.tl-lop-xem { position:fixed; inset:0; z-index:9996; background:rgba(16,24,40,.72);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.tl-lop-xem .tl-khung { background:var(--card); border-radius:var(--radius);
  max-width:900px; width:100%; max-height:100%; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 24px 60px rgba(16,24,40,.35); }
.tl-lop-xem .tl-khung-dau, .tl-lop-xem .tl-khung-chan {
  display:flex; align-items:center; gap:12px; padding:12px 16px; flex:none; }
.tl-lop-xem .tl-khung-dau { border-bottom:1px solid var(--line); }
.tl-lop-xem .tl-khung-dau b { color:var(--navy); font-size:15px; flex:1; min-width:0; }
.tl-lop-xem .tl-dong { flex:none; border:0; background:transparent; cursor:pointer;
  font-size:17px; line-height:1; color:var(--muted); padding:4px 6px; }
.tl-lop-xem .tl-dong:hover { color:var(--navy); }
/* Ảnh CUỘN trong lòng khung chứ không co lại vừa màn hình: co vừa thì trang
   sách 800px cao ép xuống còn 300px, chữ nát không đọc nổi — mà đọc thử được
   một trang mới là lý do tồn tại của lớp này. */
.tl-lop-xem .tl-khung img { flex:1; min-height:0; width:100%; object-fit:contain;
  overflow:auto; background:#fff; }
.tl-lop-xem .tl-khung-chan { border-top:1px solid var(--line); justify-content:space-between; }
.tl-lop-xem .tl-khung-chan .muted { font-size:13px; }

/* Điện thoại: nút xuống hàng riêng và kéo hết bề ngang — nút Tải bị bóp còn
   một mẩu cạnh tên sách dài là đúng thứ ngón tay bấm trượt. Ảnh thu nhỏ lại
   để tên sách còn đủ chỗ đứng cạnh nó. */
@media (max-width:560px) {
  .tl-hang { align-items:flex-start; }
  /* Ô ảnh nhỏ CHẾT trên điện thoại: 76px thì cả trang sách co lại thành một
     mảng xám trắng, người ta đọc ra là "ảnh hỏng". Đổi hẳn cách bày — ảnh kéo
     hết bề ngang. Giữ NGUYÊN tỉ lệ 172:104 của ảnh nguồn (aspect-ratio thay cho
     height cứng 104px): ép cao 104px trên màn rộng 340px là tỉ lệ 3,3:1, cover
     sẽ xén mất trên dưới đúng cái hình vẽ vừa ngắm vào giữa. */
  .tl-hang .tl-bia { order:-1; width:100%; height:auto; aspect-ratio:172/104; }
  .tl-hang .tl-tai { width:100%; justify-content:center; }
  /* KHÔNG kéo khung full màn trên điện thoại: ảnh trang sách tỉ lệ 4:3, ép cao
     bằng màn 812px thì nó vẫn chỉ rộng bằng màn, thừa ra hai mảng trắng trên
     dưới. Để khung ôm sát ảnh, còn thấy nền tối xung quanh — nhìn ra ngay là
     một lớp đè lên, bấm ra ngoài là đóng. */
  .tl-lop-xem { padding:12px; }
  .tl-lop-xem .tl-khung-chan { flex-direction:column; align-items:stretch; gap:8px; }
}

/* ---- Bảng giá gói PRO --------------------------------------------------
   (9/9/2026) BỎ khuôn ô giá riêng của khu. Trước đây khu vẽ .goi-luoi với ô căn
   giữa, một con số tổng to đùng và không có gì để so — 2.099.000đ đứng trần trên
   trang là một cục tiền, không phải một mức giá. Nay dùng ĐÚNG khuôn .goi-grid
   của sat.css (đã import ở đầu file): giá mỗi ngày đứng đầu, quy ra mỗi tháng có
   gạch giá gốc và nhãn tiết kiệm, tổng gói nằm dưới cùng sau một đường kẻ.
   Khuôn đó đã chạy ở SAT và 10 khu ngoại ngữ, không có lý do gì 56 khu còn lại
   phải có một khuôn thứ hai để mà lệch nhau.

   Ở ĐÂY CHỈ GIỮ phần sat.css không có: dải cam kết trong ô, và lưới một-ô. */

/* KHUÔN CŨ vẫn sống cho hai nơi còn dùng .goi-luoi: bảng giá của trang cổng họ
   (/ap /ib /a-level /igcse — tools/hoban.py) và khối bán của Trọng điểm/TĐN
   (khu/tdn.js). Cố ý bó vào trong .goi-luoi: để trần thì nó đè lên .goi của
   sat.css và kéo sập bảng giá mới của 56 trang PRO. */
.goi-luoi { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px; margin-top:18px; }
.goi-luoi > .goi { position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 18px; text-align:center; display:block; }
.goi-luoi > .goi.hay { border-color:var(--acc); border-width:2px; background:var(--card); }
.goi-luoi > .goi .tem { position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--acc); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.4px; padding:3px 10px; border-radius:3px; white-space:nowrap; }
.goi-luoi > .goi h3 { color:var(--navy); font-size:16px; }
.goi-luoi > .goi .gia { font-size:26px; font-weight:800; color:var(--acc); margin:8px 0 4px;
  display:block; font-variant-numeric:tabular-nums; }
.goi-luoi > .goi .mo { font-size:13px; color:var(--muted); min-height:38px; margin-bottom:12px; }
.goi-luoi > .goi .btn { width:100%; }

/* Một gói duy nhất (SSAT · GED · TOPIK…) thì auto-fit kéo ô rộng hết hàng, nhìn
   như một cái bảng thông báo chứ không phải một món hàng. Chặn bề ngang lại. */
.goi-grid { justify-content:start; }
.goi-grid > .goi { min-width:0; }
.goi-grid:has(> .goi:only-child) { grid-template-columns:minmax(260px,340px); }
/* (27/9/2026) Lưới giá trang PRO điền SAU khi tải bảng giá: rỗng rồi phình 316–1181px, đẩy khối
   "PRO mở gì" khỏi màn (CLS 0,3). Giữ chỗ theo mức thấp nhất đo được (GED 1 gói). */
#goiList:empty { min-height:310px; }

/* Dải chấn an dưới bảng giá — ba lời hứa ngắn, không phải một đoạn văn. */
.pro-tin { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px;
  font-size:13px; color:var(--muted); }
.pro-tin span { display:inline-flex; align-items:center; gap:6px; }
.pro-tin b { color:var(--text); font-weight:700; }

/* Bốn thứ PRO mở ra — chip đọc lướt, đặt DƯỚI bảng giá. */
.pro-mo { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px; margin-top:14px; }
.pro-mo div { background:var(--acc-soft); border-radius:var(--radius);
  padding:11px 13px; font-size:13.5px; color:var(--text); line-height:1.5; }
.pro-mo b { color:var(--navy); }

/* Điều kiện gói cam kết: có đủ chữ nhưng gấp lại, không chắn đường người mua. */
.pro-dk { margin-top:16px; font-size:13px; color:var(--muted); }
.pro-dk summary { cursor:pointer; font-weight:700; color:var(--navy); }
.pro-dk p { margin:8px 0 0; }

/* ---- BẢNG LIỆT KÊ (kho bộ đề, chọn môn, đề thi thử) --------------------
   (24/8/2026, Roger: "hình 1 sao lạ vậy, đồng bộ thành giao diện hình 2 hết")

   Trước đây mọi danh sách ở khu mới là LƯỚI THẺ, chép từ khu SAT. Ở SAT lưới
   thẻ hợp lý vì mỗi thẻ mở đầu bằng một mẩu nội dung thật của đề — hình vẽ,
   bảng số liệu. Ở 41 môn quốc tế thì không:
     · đề rút từ LaTeX nên mẩu xem trước là MÃ THÔ ($\dfrac{a}{b}$), phơi ra
       trông như trang lỗi;
     · dạng nào chỉ có 1 bộ thì thẻ đứng lẻ giữa hai ô trống, lưới rách.
   Bảng chữa cả hai: không có ô xem trước để mà hỏng, và một dòng vẫn là một
   bảng hoàn chỉnh. Số căn phải, dùng chữ số đều bề ngang để cột đọc lướt được. */
.dang-khoi { margin-top:26px; }
.dang-khoi > h3 { color:var(--navy); font-size:16.5px; display:flex; align-items:baseline; gap:10px; }
.dang-khoi > h3 span { font-size:12.5px; color:var(--muted); font-weight:400; }

.bang-de { width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); margin-top:10px; font-size:14px; }
.bang-de th { text-align:left; font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--muted); font-weight:700; padding:9px 14px;
  border-bottom:1px solid var(--line-2); background:#F8FAFC; white-space:nowrap; }
.bang-de td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.bang-de tr:last-child td { border-bottom:0; }
.bang-de tbody tr:hover { background:var(--acc-soft); }
.bang-de .so { text-align:right; white-space:nowrap; color:var(--muted);
  font-variant-numeric:tabular-nums; font-size:13px; }
/* Tiêu đề cột số phải căn phải THEO ô số bên dưới. Để mặc định căn trái thì
   chữ "SỐ CÂU" đứng lệch hẳn khỏi cột số nó đang gọi tên, đọc ra là hai cột
   khác nhau. Trong <thead> không có class .so nên nhắm theo vị trí cột. */
.bang-de thead th:not(:first-child) { text-align:right; }
.bang-de thead th:last-child { width:1%; }
.bang-de .ten { font-weight:600; color:var(--navy); }
.bang-de .ten a { color:inherit; text-decoration:none; }
.bang-de .ten a:hover { text-decoration:underline; }
/* Dòng phụ dưới tên (trang cổng /ky-thi-khac): sáu cái tên viết tắt đứng trần
   thì phần lớn phụ huynh không biết GED khác SSAT chỗ nào. Chữ nhỏ, thường,
   xuống dòng — để cột tên vẫn đọc lướt được như mọi bảng khác. */
.bang-de .ten .mo { display:block; font-weight:400; font-size:12.5px;
  color:var(--muted); margin-top:2px; max-width:46em; }
/* Trên điện thoại, dòng mô tả kéo cột tên hẹp lại thành một cột chữ dựng đứng
   cao cả màn hình. Ba cột số ở đây là thông tin phụ (bảng /ap vốn không có mô
   tả nên không dính) — giấu chúng đi, giữ lại tên + mô tả + nút bấm. */
@media (max-width:620px){
  body.ky-khac .bang-de th:nth-child(2), body.ky-khac .bang-de td:nth-child(2),
  body.ky-khac .bang-de th:nth-child(3), body.ky-khac .bang-de td:nth-child(3),
  body.ky-khac .bang-de th:nth-child(4), body.ky-khac .bang-de td:nth-child(4){ display:none }
  body.ky-khac .bang-de .di{ vertical-align:top; padding-top:13px }
}
/* Cột cuối là chỗ bấm — để nó luôn nằm sát mép phải, đừng trôi theo độ dài tên. */
.bang-de .di { text-align:right; white-space:nowrap; width:1%; }
.bang-de .di a { color:var(--acc); font-weight:700; text-decoration:none; font-size:13px; }
.bang-de .di a:hover { text-decoration:underline; }
/* Dòng đã làm rồi: tô nhạt để lướt mắt là biết còn bộ nào chưa đụng tới. */
.bang-de tr.xong td { background:#F7FBF8; }
.bang-de tr.xong .ten { color:#065F46; }

/* Dòng NHÓM (tên dạng/chương) chạy ngang hết bảng, đóng vai tiêu đề mục mà
   vẫn nằm trong cùng một bảng — nhờ vậy các cột số của mọi dạng thẳng hàng
   nhau. scroll-margin-top để khi nhảy từ #d03 thì dòng không nấp dưới header
   dính trên đỉnh. */
.bang-de tr.nhom td { background:#EEF2F7; padding:9px 14px; border-bottom:1px solid var(--line-2);
  scroll-margin-top:120px; }
.bang-de tr.nhom:hover td { background:#EEF2F7; }
.bang-de tr.nhom b { color:var(--navy); font-size:14px; }
.bang-de tr.nhom span { color:var(--muted); font-size:12.5px; margin-left:10px; }

/* Bảng rộng hơn màn thì cuộn trong lòng nó, đừng đẩy cả trang tràn ngang. */
.bang-cuon { overflow-x:auto; }

/* ---- Đề thi thử tổng hợp ----------------------------------------------- */
.thi-mo { background:linear-gradient(135deg,var(--acc-soft),#F7FAFD 60%,#fff);
  border:1px solid var(--line-2); border-radius:var(--radius); padding:22px 24px; margin-top:18px; }
.thi-mo h2 { color:var(--navy); font-size:20px; }
.thi-mo .luat-thi { margin:12px 0 16px; font-size:13.5px; color:var(--muted); }
.thi-mo .luat-thi li { margin:3px 0; }

/* ---- Lưu ý khi môn còn ít đề -------------------------------------------
   Nói thẳng số đề đang có thay vì để trang trông như đã đầy. Học viên vào thấy
   9 câu mà trang hứa "kho đề" là mất niềm tin vào cả 40 môn còn lại.        */
.it-de { background:var(--warnbg); border:1px solid #F5D9AE; border-radius:var(--radius);
  padding:12px 15px; font-size:13.5px; color:var(--warn); margin-top:16px; }

@media (max-width:640px) {
  .mon-luoi, .bo-luoi { grid-template-columns:1fr; }

  /* Tên môn dài ("Duolingo English Test", "IGCSE Additional Mathematics") đẩy
     nút bên phải ra khỏi màn — trang tràn ngang 25px. Cho phần tên co lại và
     cắt bằng dấu ba chấm, còn nút thì giữ nguyên: nút là đường về duy nhất,
     mất nó thì người dùng kẹt trong khu. */
  .site-header .top-row { gap:10px; }
  /* min-width:0 phải đặt ở CẢ HAI tầng. Mặc định min-width của một phần tử
     flex là auto, tức "không được co nhỏ hơn nội dung" — nên chỉ đặt ở
     .site-logo thì cái <span> bên trong vẫn giữ nguyên bề ngang của chuỗi
     nowrap và đẩy nút ra ngoài y như cũ. */
  .site-logo { min-width:0; flex:1 1 auto; overflow:hidden; }
  .site-logo span { min-width:0; max-width:100%; font-size:13.5px; }
  /* width RÕ RÀNG, không để trình duyệt tự suy từ tỉ lệ ảnh: khi thanh nút bên
     phải ăn gần hết bề ngang, ảnh không có width bị co lại còn 6px — logo thành
     một vệt mực dựng đứng. flex:none một mình KHÔNG cứu được (đã đo trên khu
     TĐN 26/8/2026: img 892×439 ép height 28px vẫn ra bề ngang 6,3px).
     57px = 28 × 892/439, đúng tỉ lệ thật của /logo.png. */
  .site-logo img { height:28px; width:57px; flex:none; object-fit:contain; }
  .header-cta { flex:none; }
  .header-cta .btn, .cta-stack .btn { max-width:none; font-size:12px; padding:6px 10px; }

  /* Khu Trọng điểm: tên khu dài ("Lớp 6 Trần Đại Nghĩa" = 140px) mà chỗ trống
     chỉ còn ~51px, nên nó bị cắt thành "Lớp …" — ba chấm đứng cạnh logo đọc ra
     như trang lỗi, tệ hơn là không có chữ nào. Giấu hẳn phần chữ, để logo 8020
     đứng một mình; tên khu vẫn còn ở <title> và ở H1 ngay dưới.
     CHỈ khu này: 41 khu còn lại tên ngắn ("SAT", "IELTS", "AP Biology") nên
     chúng vẫn hiện đủ chữ. */
  body.ky-tdn .site-logo span { display:none; }

  /* Bảng nhiều cột (quy đổi điểm, lịch sử làm bài) cuộn trong lòng nó thay vì
     đẩy cả trang. */
  .ls-table { display:block; overflow-x:auto; }

  /* (24/9/2026, bộ QA 01-quet bắt) 16 trang tràn ngang 30–187px trên màn 375px.
     HAI bệnh khác nhau, vá cả hai ở đây vì hai stylesheet cùng phục vụ các khu này.

     (1) Khối nút hero — tools/khubuild.py sinh ra với style="flex:none" nên KHÔNG co
     được, mà JS thay chữ nút bằng TÊN BÀI HỌC dài lúc chạy ("Bắt đầu: Reading for
     argument: claim, evidence, assumption" = 517px). HTML tĩnh để chữ ngắn "Bắt đầu
     bài hôm nay" nên lúc build không lộ, chỉ lộ trên máy người dùng thật.
     Dùng !important vì phải đè style inline; nguồn khubuild.py đã sửa cho lần build sau.

     (2) Bảng UNIT · TRỌNG SỐ · 8020 CÓ rộng ~400px: co lề và cho chữ xuống dòng.

     (3) Header khu HSK: nút "Pinyin: Bật" (91px) là thứ thêm sau bản vá header 4/9,
     đẩy tổng lên 410px. Cho header co lại thay vì giữ nguyên bề ngang. */
  .lt-hero > div[style*="flex:none"] { flex:0 1 auto !important; min-width:0; max-width:100%; }
  .lt-hero .btn { white-space:normal; overflow-wrap:anywhere; }
  .bang-de th, .bang-de td { padding:8px 9px; font-size:12.5px; overflow-wrap:anywhere; }
  .site-header .top-row { min-width:0; }
  .header-cta { min-width:0; flex:0 1 auto; }
  #khungPinyin { font-size:11.5px; padding:5px 8px; flex:0 1 auto; min-width:0; }
}

/* ---- Tab "Tài liệu PDF" đứng riêng góc phải ----------------------------
   (Roger 25/8/2026, "nổi bật xíu") Ô này dạt sang phải nên nằm giữa vùng xám
   trống, mắt lướt qua thanh tab từ trái sang là hết đà trước khi tới nó. Tô đặc
   màu nhấn + một icon tải xuống: trên dải xám #EEF2F8 thì mảng đặc là thứ DUY
   NHẤT có màu, không cần thêm tem hay chữ in hoa.

   Khi ĐANG ĐỨNG ở trang tài liệu thì trả về kiểu tab thường (nền trắng, gạch
   đáy màu nhấn) — giữ đặc luôn thì thanh tab có hai ô cùng "đang chọn", người
   đọc mất mốc mình đang ở đâu. */
.nav-item.nav-tailieu { border-right:0; border-left:1px solid #DCE3ED; }
.main-nav .nav-item.nav-tailieu > a {
  background:var(--acc); color:#fff; border-bottom-color:var(--acc); }
.main-nav .nav-item.nav-tailieu > a:hover { background:var(--acc-lite); color:#fff; }
.main-nav .nav-item.nav-tailieu > a.active {
  background:#fff; color:var(--acc); border-bottom-color:var(--acc); }
.main-nav .nav-item.nav-tailieu > a.active:hover { background:#fff; }
/* Icon phải co cứng: trong flex nó bị bóp méo thành hình bầu dục khi tab hẹp. */
.main-nav .nav-item.nav-tailieu > a svg { flex:none; }

/* Điện thoại: thanh tab cuộn ngang (.main-nav overflow-x trong sat.css), nên
   margin-left:auto MẤT tác dụng — ô Tài liệu tụt ra ngoài màn, phải vuốt qua 5
   ô mới thấy. Ghim nó dính vào mép phải: các ô kia trôi ở dưới, ô này đứng yên
   như một cái nút. Đây là lý do ô phải tô ĐẶC — nền trắng thì chữ bên dưới lòi
   qua khi trôi ngang.
   .nav-item mặc định là position:static (sat.css) nên phải ghi đè, và .nav-drop
   ở khổ này vốn display:none rồi nên sticky không nhốt được menu xổ nào cả. */
@media (max-width:760px) {
  .nav-item.nav-tailieu { position:sticky; right:0; z-index:5;
    box-shadow:-8px 0 12px -6px rgba(16,24,40,.25); }
  /* Hàng trên của header khoá cứng height:58px (sat.css), trong khi khối nút
     xếp dọc "Đăng nhập" + "PRO" cao 63px — nó tràn ra ngoài cả trên lẫn dưới,
     và mép dưới đè lên viền thanh tab. Đổi sang min-height để hàng tự giãn
     theo nội dung. Chỉ đặt ở khu: sat.css còn dùng cho /sat8020, mà khu đó có
     bộ nút khác nên chưa chắc cần. */
  .site-header .top-row { height:auto; min-height:58px; padding:6px 0; }
  /* Nhãn rút còn "Tài liệu PDF": ô ghim mà giữ nguyên chữ dài thì nó ăn 198 trên
     335px thanh tab, che gần hết mấy ô môn đang trôi bên dưới nó. */
  .nav-tailieu .tl-dai { display:none; }
}

/* ---- Mock Test ----------------------------------------------------------
   Màn mở: bảng cấu trúc đề + danh sách lần làm. Màn kết quả: điểm quy thang
   to ở giữa, dưới là trắc nghiệm từng phần và nhận xét từng câu tự luận.   */
.mock-bang { width:100%; border-collapse:collapse; margin:10px 0 4px; font-size:13.5px; }
.mock-bang th { text-align:left; font-size:11px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); padding:7px 10px; border-bottom:2px solid var(--line-2); }
.mock-bang td { padding:8px 10px; border-bottom:1px solid var(--line); }
.mock-lan { display:flex; gap:14px; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 13px;
  margin-top:8px; font-size:13.5px; }
.mock-lan a { color:var(--acc); font-weight:700; text-decoration:none; }
.mock-frq { width:100%; font:inherit; font-size:14.5px; line-height:1.55; padding:12px;
  border:1px solid var(--line-2); border-radius:8px; margin-top:14px; resize:vertical; }
.mock-frq:focus { outline:2px solid var(--acc-lite); border-color:transparent; }
.mock-kq .mock-diem { display:flex; align-items:baseline; gap:12px; margin:10px 0 18px; }
.mock-kq .mock-diem .to { font-size:52px; font-weight:800; color:var(--acc); line-height:1; }
.mock-kq .mock-diem .thang { color:var(--muted); font-size:14px; }
.mock-sec { padding:9px 0; border-bottom:1px solid var(--line); }
.mock-sec-top { display:flex; align-items:center; justify-content:space-between; font-size:14px; }
.mock-sec-top span { color:var(--muted); font-weight:700; font-size:13px; }
.mock-sec-bar { height:6px; border-radius:3px; background:#EEF1F5; overflow:hidden; margin-top:6px; }
.mock-sec-bar span { display:block; height:100%; background:var(--acc); border-radius:3px; }
.mock-frq-kq { background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; margin-top:12px; font-size:13.5px; }
.mock-frq-kq .mock-sec-bar { margin-top:8px; margin-bottom:2px; }
.mock-frq-kq .tc { margin-top:6px; color:var(--muted); }
.mock-frq-kq .tc span { color:var(--navy); font-weight:600; }
.mock-frq-kq .nx { margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }

/* ---- Thẻ điểm AP dựng theo đúng giao diện báo điểm của College Board -----
   (màn "Your Score" trên apscore.collegeboard.org: đầu xanh hoạ tiết nơ-ron,
   "YOUR SCORE" uốn vòng cung trên con số, dãy nhà trường nét mảnh, nút viên
   "Find College Credit"). Chỉ dựng khi K.kythi === "AP" — hàm chung
   KHUNG.veTheDiemAP trong khung.js, dùng ở cả trang-thi.js và trang-mock.js.
   Các kỳ thi khác (IB, A-Level, IGCSE, GED, SSAT) vẫn dùng .mock-diem đơn
   giản vì không mô phỏng giao diện báo điểm của kỳ thi nào. Màu ở đây cố ý
   bám College Board, KHÔNG theo biến màu của site. */
.cb-the { max-width:340px; margin:22px auto 8px; background:#fff; border:1px solid #E2E6EB;
  border-radius:10px; overflow:hidden; text-align:center;
  box-shadow:0 12px 30px rgba(15,40,70,.13); }
.cb-the-dau { position:relative; height:84px; background:#3D7FA6; display:flex;
  align-items:center; justify-content:center; }
.cb-the-dau > svg { position:absolute; top:0; left:0; width:100%; height:100%; }
.cb-the-dau b { position:relative; color:#fff; font-size:16.5px; font-weight:600;
  letter-spacing:.2px; }
.cb-the-than { padding:24px 24px 22px; }
.cb-the-vong { width:186px; max-width:100%; margin:0 auto; display:block; }
.cb-the-nha { width:232px; max-width:100%; margin:10px auto 0; display:block; }
.cb-the-loi { margin:14px auto 0; max-width:252px; color:#1E1E1E; font-size:14.5px;
  line-height:1.45; }
.cb-the-nut { display:inline-block; margin-top:16px; padding:9px 24px; background:#fff;
  border:1.6px solid #1E1E1E; border-radius:999px; color:#1E1E1E; font-weight:700;
  font-size:14px; text-decoration:none; }
.cb-the-nut:hover { background:#F3F6F8; }
.cb-the-ve { display:block; margin-top:13px; color:#1E1E1E; font-size:13.5px;
  text-decoration:underline; }
.cb-the-chuthich { max-width:360px; margin:10px auto 20px; text-align:center;
  font-size:12.5px; color:var(--muted); }

/* ==========================================================================
   BÀI HỌC — lý thuyết song ngữ (26/8/2026)

   VÌ SAO SONG NGỮ CHỨ KHÔNG DỊCH HẲN SANG TIẾNG VIỆT
   --------------------------------------------------
   Đề AP thi bằng tiếng Anh. Học viên đọc lý thuyết bằng tiếng Việt xong vào
   phòng thi gặp "instantaneous rate of change" là chững lại — thuật ngữ chưa
   bao giờ gặp trong ngữ cảnh gốc. Nên phần định nghĩa/định lý giữ nguyên tiếng
   Anh đúng cách College Board diễn đạt, còn tiếng Việt đứng CẠNH để giải thích
   ý, không thay thế.

   Bố cục hai cột trên máy tính, xếp chồng trên điện thoại — không dùng bảng,
   vì bảng hai cột trên màn 375px là hai cột chữ mỗi cột 6 ký tự.
   ========================================================================== */
.bh-dau { background:linear-gradient(135deg,var(--acc-soft),#F7FAFD 60%,#fff);
  border:1px solid var(--line-2); border-radius:var(--radius); padding:20px 22px; margin-top:16px; }
.bh-dau h1 { color:var(--navy); font-size:22px; line-height:1.3; }
.bh-dau .vi { color:var(--acc); font-size:15px; font-weight:600; margin-top:4px; }
.bh-dau .tom { margin-top:10px; font-size:14px; color:var(--muted); line-height:1.7; }
.bh-dau .meta { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.bh-dau .meta span { background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:4px 12px; font-size:12.5px; color:var(--navy); }
.bh-dau .meta span i { font-style:normal; color:var(--acc); font-weight:700; }

/* Thanh điều khiển: đổi chế độ hiển thị + nhảy nhanh trong chương */
.bh-thanh { position:sticky; top:0; z-index:20; background:#fff;
  border-bottom:1px solid var(--line); margin:18px 0 0; padding:9px 0;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.bh-nut { display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; }
.bh-nut button { border:0; background:#fff; padding:6px 12px; font:inherit; font-size:12.5px;
  cursor:pointer; color:var(--muted); }
.bh-nut button + button { border-left:1px solid var(--line-2); }
.bh-nut button.on { background:var(--acc); color:#fff; font-weight:700; }
.bh-thanh .muc { margin-left:auto; font-size:12.5px; color:var(--muted); }

/* Một bài trong chương */
.bh-bai { margin-top:26px; }
.bh-bai > h2 { color:var(--navy); font-size:18.5px; line-height:1.35;
  padding-bottom:8px; border-bottom:2px solid var(--acc); display:inline-block; }
.bh-bai > h2 small { display:block; font-size:13.5px; color:var(--acc);
  font-weight:600; margin-top:3px; }

/* Khối lý thuyết hai cột */
.bh-ly { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:16px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; }
.bh-ly > div { padding:15px 18px; font-size:14.5px; line-height:1.75; }
.bh-ly .en { color:var(--navy); }
.bh-ly .vi { background:var(--acc-soft); border-left:1px solid var(--line);
  color:#334155; font-size:14px; }
.bh-ly h3 { font-size:14.5px; color:var(--navy); margin:0 0 6px; }
.bh-ly p + p { margin-top:9px; }
.bh-ly ul, .bh-ly ol { margin:8px 0 0 20px; }
.bh-ly li { margin:4px 0; }
.bh-ly b { color:var(--navy); }
.bh-ly .nhan { display:block; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:7px; }
/* Chỉ-tiếng-Anh: giấu cột Việt, cột Anh chiếm cả bề ngang */
body.bh-en .bh-ly { grid-template-columns:1fr; }
body.bh-en .bh-ly .vi { display:none; }
body.bh-vi .bh-ly { grid-template-columns:1fr; }
body.bh-vi .bh-ly .en { display:none; }
body.bh-vi .bh-ly .vi { border-left:0; }

/* Ví dụ có lời giải — luôn mở, đây là phần free */
.bh-vd { background:#fff; border:1px solid var(--line-2); border-left:4px solid var(--acc);
  border-radius:8px; padding:14px 17px; margin-top:14px; font-size:14.5px; line-height:1.7; }
.bh-vd .nhan { font-size:10.5px; letter-spacing:.7px; text-transform:uppercase;
  color:var(--acc); font-weight:700; }
.bh-vd .giai { margin-top:9px; padding-top:9px; border-top:1px dashed var(--line); }
.bh-vd .giai b:first-child { color:var(--acc); }

/* Bẫy hay mất điểm */
.bh-bay { background:var(--warnbg); border:1px solid #F5D9AE; border-radius:8px;
  padding:12px 16px; margin-top:14px; font-size:14px; line-height:1.7; color:#7C4A03; }
.bh-bay .nhan { font-weight:700; color:var(--warn); }

/* Chốt phải nhớ */
.bh-chot { background:#F0FDF4; border:1px solid #BBF7D0; border-radius:8px;
  padding:12px 16px; margin-top:14px; font-size:14px; line-height:1.7; color:#14532D; }
.bh-chot .nhan { font-weight:700; color:#15803D; }

/* Hình vẽ / đồ thị — SVG nội tuyến, không ảnh:
   ảnh raster mờ khi phóng to và nặng gấp 20 lần; SVG còn ăn theo màu nhấn của
   kỳ thi và đọc được bằng trình đọc màn hình. */
.bh-hinh { margin-top:16px; text-align:center; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.bh-hinh svg { max-width:100%; height:auto; }
.bh-hinh .chu { margin-top:9px; font-size:13px; color:var(--muted); line-height:1.6;
  text-align:left; }
.bh-hinh .chu b { color:var(--navy); }

/* ---- Phần luyện tập trong bài học -------------------------------------- */
.bh-luyen { margin-top:34px; padding-top:22px; border-top:2px solid var(--line-2); }
.bh-cau { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-top:14px; }
.bh-cau .so { font-size:11.5px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); font-weight:700; }
.bh-cau .tang { display:inline-block; margin-left:8px; border-radius:20px; padding:1px 9px;
  font-size:11px; font-weight:700; letter-spacing:.3px; }
.bh-cau .tang.K  { background:#FEF3C7; color:#92400E; }
.bh-cau .tang.RK { background:#FEE2E2; color:#991B1B; }
.bh-cau .de { margin-top:8px; font-size:15px; line-height:1.75; color:var(--navy); }
.bh-cau .pa { margin-top:12px; display:grid; gap:7px; }
.bh-cau .pa button { text-align:left; background:#fff; border:1px solid var(--line-2);
  border-radius:8px; padding:10px 13px; font:inherit; font-size:14.5px; cursor:pointer;
  display:flex; gap:10px; align-items:flex-start; line-height:1.6; }
.bh-cau .pa button:hover:not(:disabled) { border-color:var(--acc-lite); background:var(--acc-soft); }
.bh-cau .pa button:disabled { cursor:default; }
.bh-cau .pa button .k { flex:none; width:23px; height:23px; border-radius:50%;
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; color:var(--muted); }
.bh-cau .pa button.dung { border-color:#15803D; background:#F0FDF4; }
.bh-cau .pa button.dung .k { background:#15803D; border-color:#15803D; color:#fff; }
.bh-cau .pa button.sai { border-color:#B91C1C; background:#FEF2F2; }
.bh-cau .pa button.sai .k { background:#B91C1C; border-color:#B91C1C; color:#fff; }
.bh-cau .giai { margin-top:13px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:14px; line-height:1.75; color:#334155; }
.bh-cau .giai .nhan { font-weight:700; color:var(--acc); }

/* ---- Tự luận ----------------------------------------------------------- */
.bh-frq { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin-top:16px; }
.bh-frq h3 { color:var(--navy); font-size:16px; }
.bh-frq h3 .diem { float:right; font-size:12.5px; color:var(--muted); font-weight:400; }
.bh-frq .de { margin-top:10px; font-size:14.5px; line-height:1.8; color:var(--navy); }
.bh-frq textarea { width:100%; font:inherit; font-size:14.5px; line-height:1.6; padding:12px;
  border:1px solid var(--line-2); border-radius:8px; margin-top:12px; resize:vertical;
  min-height:190px; }
.bh-frq textarea:focus { outline:2px solid var(--acc-lite); border-color:transparent; }
.bh-frq .chan { margin-top:11px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.bh-frq .chan .muted { font-size:12.5px; }
.bh-frq .kq { margin-top:14px; padding-top:13px; border-top:1px dashed var(--line); font-size:14px; }
.bh-frq .kq .diem-to { font-size:30px; font-weight:800; color:var(--acc); line-height:1; }
.bh-frq .kq .tc { margin-top:10px; }
.bh-frq .kq .tc > div { padding:7px 0; border-bottom:1px solid var(--line); }
.bh-frq .kq .tc b { color:var(--navy); }
.bh-frq .kq .tc p { color:var(--muted); font-size:13.5px; margin-top:3px; line-height:1.65; }
.bh-frq .mau { margin-top:14px; background:#F0FDF4; border:1px solid #BBF7D0;
  border-radius:8px; padding:13px 16px; font-size:14px; line-height:1.75; color:#14532D; }
.bh-frq .mau .nhan { font-weight:700; color:#15803D; display:block; margin-bottom:6px; }

/* ---- Mục lục bài học --------------------------------------------------- */
/* Mục lục bài học nay dựng bằng .kh-chuong/.kh-bai của sat.css (28/8/2026) —
   cùng một bộ lớp với khoá học SAT, nên khỏi phải nuôi hai hệ thẻ song song.
   Bộ .bh-muc* cũ đã gỡ: nó đặt .bh-muc a { display:block; padding:15px 18px }
   với độ ưu tiên cao hơn .kh-bai, nên chỉ cần còn nằm quanh danh sách bài là
   mỗi dòng phình lên 138px và mục lục dài gấp ba. */

/* Vài chỗ chỉnh riêng cho khu: mục lục ở đây lồng BÀI trong CHƯƠNG, còn SAT
   phẳng một cấp, nên chương cần tách nhau rõ hơn. */
#bhMuc .kh-chuong { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
#bhMuc .kh-chuong:first-child { border-top:0; padding-top:0; }
#bhMuc .kh-ds { margin-top:12px; }

@media (max-width:820px) {
  .bh-ly { grid-template-columns:1fr; }
  .bh-ly .vi { border-left:0; border-top:1px solid var(--line); }
  .bh-thanh { position:static; }
  .bh-dau h1 { font-size:19px; }
}

/* ---- Chọn đề mock (chỉ hiện khi môn có từ 2 đề) -------------------------
   Nút to, có kèm số lượt còn lại ngay trên mặt nút: thứ học viên cần biết
   trước khi bấm chính là "đề này mình còn được làm mấy lần", không phải tên đề. */
.mock-chon-de { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 4px; }
.mock-chon-de button { flex:1 1 190px; text-align:left; background:#fff;
  border:1px solid var(--line-2); border-radius:10px; padding:11px 14px; font:inherit;
  cursor:pointer; }
.mock-chon-de button b { display:block; color:var(--navy); font-size:14.5px; }
.mock-chon-de button span { display:block; margin-top:3px; font-size:12.5px; color:var(--muted); }
.mock-chon-de button:hover { border-color:var(--acc-lite); }
.mock-chon-de button.on { border-color:var(--acc); border-width:2px; background:var(--acc-soft); }
.mock-chon-de button.on b { color:var(--acc); }
/* Đề chưa mở khoá: mờ đi nhưng VẪN BẤM ĐƯỢC để xem cấu trúc. Khoá kín thì
   người ta không biết mình đang bỏ lỡ gì — mà đó mới là thứ bán được gói. */
.mock-chon-de button.khoa { background:#FAFBFC; }
.mock-chon-de button.khoa b { color:var(--muted); }
.mock-chon-de button.khoa span { color:var(--acc); font-weight:600; }

/* ---- Khối thay nút "Bắt đầu" khi đề thuộc gói PRO ----------------------- */
.mock-khoa {
  border:1px solid var(--line-2); border-left:3px solid var(--acc); border-radius:10px;
  background:var(--acc-soft); padding:16px 18px; margin:16px 0;
  display:flex; flex-direction:column; gap:9px; align-items:flex-start;
}
.mock-khoa b { color:var(--navy); font-size:15.5px; }
.mock-khoa p { margin:0; font-size:14px; color:var(--txt); max-width:62ch; }
.mock-khoa .btn { margin-top:2px; }

/* ---- Bảng số liệu trong đề bài -----------------------------------------
   Đề AP thật đưa số liệu thí nghiệm bằng bảng. Trước đó 8 câu mock Biology
   viết chạy dòng ("pH: 2 / 4 / 6 / 8 / 10"), đọc phải tự ghép cặp trong đầu —
   đó là thêm một việc không liên quan tới sinh học vào bài thi sinh học.
   Nhãn nằm cột đầu, in đậm; các mốc đo là cột. Hẹp thì cuộn trong lòng bảng. */
.de-bang-o { overflow-x:auto; margin:14px 0; }
.de-bang { border-collapse:collapse; font-size:.94em; min-width:min(100%,340px); }
.de-bang th, .de-bang td {
  border:1px solid var(--line); padding:6px 12px; text-align:center; white-space:nowrap;
}
.de-bang th {
  text-align:left; background:#F4F7FA; font-weight:600; white-space:normal; min-width:130px;
}

/* ── Bổ sung 28/8/2026 sau đợt rà soát trình bày ────────────────────────────
   Ba luật dưới đây vá đúng ba chỗ mà dữ liệu đề đã dùng nhưng CSS chưa hề khai,
   nên trình duyệt rơi về mặc định và làm vỡ bố cục trên điện thoại.              */

/* 1. Khối mã nguồn trong đề (AP Computer Science A dùng 308 khối). Trước đây
      class "de-ma" KHÔNG có luật nào trong toàn repo → <pre> giữ nguyên
      white-space:pre mà không có overflow, nên một dòng 85 ký tự kéo CẢ TRANG
      cuộn ngang chứ không chỉ khối mã. */
.de-ma {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:#F4F7FA; border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; margin:10px 0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13.5px; line-height:1.65; color:var(--navy);
}
.q-stem .de-ma, .bh-cau .de .de-ma, .q-giai .de-ma, .bh-cau .giai .de-ma { margin:9px 0; }

/* 2. Hình SVG trong câu hỏi. .bh-hinh (phần lý thuyết) đã có max-width từ trước,
      nhưng SVG nằm trong THÂN CÂU thì chưa — 203 hình khai width cố định
      460-480px, rộng hơn màn hình điện thoại 360px. */
.q-stem svg, .q-opt svg, .q-giai svg,
.bh-cau .de svg, .bh-cau .giai svg, .bh-cau .pa svg, .bh-frq .de svg {
  max-width:100%; height:auto;
}

/* 3. Khoảng trắng trong <code> là NỘI DUNG của một số câu (ví dụ phân biệt
      substring trả về " CS" với "CS"). Mặc định inline gộp khoảng trắng nên hai
      phương án khác nhau hiện ra y hệt. */
/* Ba selector cuối thêm 29/8/2026 sau rà soát độc lập: 1.595 thẻ <code> của AP
   Computer Science A nằm trong LỜI GIẢI — tức đúng phần bán gói PRO — mà khu vực
   .q-giai và .bh-cau .giai trước đó không có luật nào, nên khoảng trắng trong mã
   bị gộp và làm hỏng chính thứ khách trả tiền để đọc. */
.q-opt code, .bh-cau .pa code, .q-stem code,
.q-giai code, .bh-cau .giai code, .bh-cau .de code { white-space:pre-wrap; }

/* ── Xem lại từng câu sau khi nộp mock (29/8/2026) ──────────────────────────
   Trước đây nộp mock xong chỉ còn một con số 1–5 và mấy thanh phần trăm; học
   viên làm 2–3 tiếng mà không biết sai câu nào, trong khi bài luyện lẻ cho đáp
   án ngay và miễn phí. Khối này liệt kê đúng những câu làm sai hoặc bỏ trống. */
.mock-xemlai { margin-top:18px; }
.mock-xl-sec { margin-top:16px; }
.mock-xl-cau { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 15px; margin-top:10px; }
.mock-xl-cau .so { font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted); font-weight:600; }
.mock-xl-cau .de { margin-top:6px; font-size:15px; line-height:1.7; color:var(--navy); }
.mock-xl-cau .de svg { max-width:100%; height:auto; }
.mock-xl-pa { list-style:none; margin:11px 0 0; padding:0; display:grid; gap:6px; }
.mock-xl-pa li { display:flex; gap:9px; align-items:flex-start; font-size:14.5px;
  line-height:1.6; padding:7px 10px; border:1px solid var(--line-2); border-radius:8px; }
.mock-xl-pa li .k { flex:none; width:21px; height:21px; border-radius:50%; font-size:12px;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line-2);
  font-weight:700; }
.mock-xl-pa li.dung { border-color:#15803D; background:#F0FDF4; }
.mock-xl-pa li.dung .k { background:#15803D; border-color:#15803D; color:#fff; }
.mock-xl-pa li.sai { border-color:#B91C1C; background:#FEF2F2; }
.mock-xl-pa li.sai .k { background:#B91C1C; border-color:#B91C1C; color:#fff; }
.mock-xl-pa .nhan { font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
  margin-left:5px; }

/* ── Dải tên riêng cuối trang ─────────────────────────────────────────────
   Khai "SAT8020 là tên gọi tắt của khu…" + link sang tên riêng các khu khác.
   Dựng bởi tools/thuonghieu.py (khối giữa hai mốc TEN-RIENG-START/END).

   Đây là chỗ DUY NHẤT chuỗi "SAT8020" nằm trong chữ nhìn thấy được của trang —
   trước 30/8/2026 nó chỉ có trong đường dẫn, và Google trả kết quả cho bóng đèn
   Satco S8020 chứ không cho khu này. KHÔNG display:none, KHÔNG nhét vào
   <details> đóng, KHÔNG để JS vẽ: cả ba đều làm Google hạ giá trị hoặc bỏ qua. */
.th-dai{max-width:1120px;margin:56px auto 28px;padding:18px 20px 20px;
  border-top:1px solid #e5e7eb;color:#6b7280;font-size:13.5px;line-height:1.65}
.th-dai p{margin:0}
.th-dai p + p{margin-top:7px}
.th-dai b{color:#111827}
.th-dai a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.th-dai a:hover{color:#2563eb}
.th-ds{word-spacing:.02em}

/* ── Dải thang bậc Cambridge ──────────────────────────────────────────────
   Primary → Lower Secondary → IGCSE → A-Level: bốn khu là bốn chặng của MỘT
   con đường, nhưng tới 9/9/2026 chúng không dẫn sang nhau — khu Lower Secondary
   có 0 lượt vào trong hai tuần đầu đo lượt dù đủ 3 môn và 720 câu. Dải này in ở
   trang cổng của cả bốn chặng; chặng đang đứng in đậm và KHÔNG phải link.
   Sinh bởi tools/hoban.py:khoi_bac cho IGCSE và A-Level; hai trang cổng
   Cambridge viết thẳng trong HTML vì chúng không do generator nào dựng. */
.bac-thang{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:18px 0 6px;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;
  background:#f9fafb}
.bac-nhan{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#6b7280;margin-right:4px}
.bac-thang .bac-di,.bac-thang .bac-o{display:flex;flex-direction:column;line-height:1.25;
  padding:6px 12px;border-radius:8px;font-size:14px;text-decoration:none}
.bac-thang .bac-di{color:#1f2937;border:1px solid #e5e7eb;background:#fff}
.bac-thang .bac-di:hover{border-color:#2563eb;color:#2563eb}
.bac-thang .bac-o{background:#111827;color:#fff;border:1px solid #111827}
.bac-thang small{font-size:11.5px;opacity:.7;font-weight:400}

/* (27/9/2026) Chống giật ở các trang khu (CLS 0,25–0,98 đo ở /tdn8020/*):
   - Giữ chỗ header lúc khung.js chưa vẽ (mức thấp nhất đo được: 106px; máy rộng phóng 1,1 theo zoom).
   - Khu Trọng điểm: hàng đầu header (logo + "Môn đang chọn" + Giáo viên) rớt 2 dòng ở màn ≤402px SAU khi
     phông tải xong (58→84px) → giữ sẵn 84px.
   - Footer .th-dai: ẩn (visibility, vẫn giữ chỗ) cho tới khi tdn.js vẽ xong thân trang (body.tdn-xong) —
     phần tử ẩn không tính vào CLS. Chốt an toàn: JS có hỏng thì footer vẫn tự hiện sau 3 giây. */
#khuHeader:empty { min-height:106px; }
@media (max-width:402px) { body.ky-tdn .site-header .top-row { min-height:84px; } }
body.ky-tdn:not(.tdn-xong) .th-dai { visibility:hidden; animation:tdnHienChan 0s linear 3s forwards; }
@keyframes tdnHienChan { to { visibility:visible; } }

/* (4/10/2026) Câu ĐIỀN ĐÁP SỐ (khu TIMO — kieu "so"): một ô nhập lớn, dễ gõ trên điện thoại. */
.q-dien { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 4px; }
.q-dien label { font-weight:800; color:var(--navy,#1B355E); }
.q-dien input { font-size:20px; font-weight:700; width:160px; max-width:60vw; padding:9px 12px;
  border:2px solid var(--acc,#1B355E); border-radius:10px; text-align:center; background:#fff; }
.q-dien input:disabled { background:#F8FAFC; color:#334155; }
.q-dien-kq { font-weight:800; }
.q-dien-kq.dung { color:#047857; } .q-dien-kq.sai { color:#B91C1C; }
.hinh-de svg { max-width:100%; height:auto; }