/* ===== 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; }
body.ky-ged     { --acc:#0E6EA0; --acc-lite:#2EA5D6; --acc-soft:#EAF6FD; }
body.ky-ssat    { --acc:#A32357; --acc-lite:#D4548A; --acc-soft:#FCEDF3; }

/* 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 ------------------------------------------------------ */
.tl-o { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tl-o .tl-nd { flex:1 1 240px; }
.tl-o .tl-nd b { color:var(--navy); font-size:15px; }
.tl-o .tl-nd p { margin-top:3px; font-size:13px; }

/* ---- Bảng giá gói PRO -------------------------------------------------- */
.goi-luoi { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px; margin-top:18px; }
.goi { position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 18px; text-align:center; }
.goi.hay { border-color:var(--acc); border-width:2px; }
.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 h3 { color:var(--navy); font-size:16px; }
.goi .gia { font-size:26px; font-weight:800; color:var(--acc); margin:8px 0 4px;
  font-variant-numeric:tabular-nums; }
.goi .mo { font-size:13px; color:var(--muted); min-height:38px; margin-bottom:12px; }
.goi .btn { width:100%; }

/* ---- Kho bộ đề của một môn (/…/luyen) ---------------------------------- */
.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; }
.bo-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:14px; margin-top:12px; }
.bo-o { display:block; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; }
.bo-o:hover { border-color:var(--acc-lite); }
.bo-o .than { padding:11px 13px 13px; }
.bo-o .ten { font-size:13.5px; font-weight:700; color:var(--navy); line-height:1.45; }
.bo-o .chan { margin-top:7px; display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted); }
.bo-o .chan .pill { margin-left: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; }
  .site-logo img { height:28px; flex:none; }
  .header-cta { flex:none; }
  .header-cta .btn, .cta-stack .btn { max-width:none; font-size:12px; padding:6px 10px; }

  /* 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; }
}