/* =========================================================================
   BỘ QUY CHUẨN GIAO DIỆN 8020 — sửa ở ĐÂY, cả web đổi theo.
   Lý do có file này: trước đó toàn site dùng 306 mã màu và 20 giá trị bo góc
   khác nhau (3 màu navy gần y hệt nhau, 2 hồng, 2 đỏ, 3 xám) nên mỗi trang
   trông như một web khác. Từ giờ trang mới chỉ được dùng biến bên dưới.
   ========================================================================= */
:root{
  /* --- Màu thương hiệu --- */
  --navy:#1C355F;      /* nền chính, chữ tiêu đề */
  --navy-d:#12325A;    /* đầu tối của dải gradient navy */
  --navy-l:#2A4A85;    /* đầu sáng của dải gradient navy */
  --pink:#ED0E57;      /* CTA chính — chỉ dùng cho việc muốn khách bấm */
  --pink2:#EA1A5C;     /* trạng thái rê chuột của CTA */
  --pink-d:#C2185B;    /* hồng đậm cho chữ trên nền sáng (đủ tương phản) */
  /* --- Nền & chữ --- */
  --bg:#f5f7fb; --card:#fff; --line:#e3e8f0; --txt:#1b2433; --muted:#6b7689;
  --ok:#16a34a; --bad:#dc2626; --warn:#b45309;
  --ok-bg:#dcfce7; --bad-bg:#fef2f2; --warn-bg:#fef3c7;
  /* --- Bo góc: ĐÚNG 4 mức, đừng đẻ thêm --- */
  --r-sm:10px;         /* nút, ô nhập, nhãn nhỏ */
  --r-md:14px;         /* thẻ thường */
  --r-lg:18px;         /* khối lớn, banner */
  --r-pill:999px;      /* chip, huy hiệu */
  --radius:var(--r-md);/* tên cũ — giữ cho các rule đang dùng khỏi gãy */
  /* --- Đổ bóng: 3 mức theo độ "nổi" --- */
  --sh-1:0 1px 3px rgba(20,40,80,.05);
  --sh-2:0 4px 14px rgba(20,40,80,.09);
  --sh-3:0 12px 32px rgba(20,40,80,.14);
  /* --- Nhịp dọc giữa các khối lớn: cả web thở cùng một nhịp --- */
  --sec:34px;
}
*{box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.55}
/* Phóng to tổng thể trên màn hình lớn để đập vào là đọc rõ, khỏi zoom tay.
   Dùng zoom (áp cho toàn bộ px của site) — chỉ bật ở màn ≥1000px, mobile giữ nguyên. */
@media(min-width:1000px){ body{zoom:1.15} }
@media(min-width:1600px){ body{zoom:1.22} }
a{color:var(--navy)}
.wrap{max-width:1040px;margin:0 auto;padding:20px}
header.top{background:#fff;color:var(--navy);padding:10px 20px;display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  border-bottom:1px solid var(--line)}
header.top .brand{display:flex;align-items:center}
header.top .brand img{height:38px;width:auto;display:block;transition:transform .15s ease}
header.top .brand a{display:inline-flex}
header.top .brand img:hover{transform:scale(1.12)}
header.top a{color:var(--navy);font-weight:600;text-decoration:none}
/* Nút "Đăng ký" ở đầu trang là thẻ <a class="btn"> nên dính luôn màu navy của
   dòng trên — thành chữ navy #1C355F trên nền hồng #ED0E57, hai màu đậm ngang
   nhau, tỷ lệ tương phản khoảng 1.5:1 (chuẩn tối thiểu là 4.5:1). Đúng cái nút
   quan trọng nhất đầu trang lại là cái khó đọc nhất. Trả lại chữ trắng. */
header.top a.btn:not(.ghost){color:#fff}
header.top a:hover{color:var(--pink)}
/* Dải hành trình học */
.journey{background:var(--navy);color:#fff;padding:9px 20px;display:flex;
  align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600}
.journey .step{background:rgba(255,255,255,.12);padding:4px 12px;border-radius:999px;white-space:nowrap}
.journey .step.end{background:var(--pink)}
.journey .arr{color:var(--pink);font-weight:800}
/* Chân trang */
.site-foot{background:var(--navy);color:#fff;padding:16px 20px;text-align:center;
  font-size:13px;margin-top:32px}
.site-foot b{color:#fff}
.site-foot a{color:#fff;text-decoration:none}
.site-foot .pk{color:var(--pink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;box-shadow:0 1px 3px rgba(20,40,80,.05)}
/* ===== Thang tiêu đề dùng chung =====================================
   Trước đây mỗi trang tự đặt cỡ chữ (trang chủ h1 30px, trang /sat h1 mặc
   định 32px, /trongdiem có tới 3 thẻ h1) nên không trang nào giống trang nào
   và Google cũng không biết đâu là ý chính. Giờ cố định một thang:
   h1 = tên trang (MỖI TRANG ĐÚNG MỘT CÁI), h2 = khối lớn, h3 = mục con. */
h1{color:var(--navy);margin:.2em 0;font-size:clamp(24px,3.2vw,31px);line-height:1.2;letter-spacing:-.4px}
h2{color:var(--navy);font-size:clamp(20px,2.4vw,25px);line-height:1.25;letter-spacing:-.3px;margin:0 0 .45em}
h3{color:var(--navy);font-size:18px;line-height:1.3;margin:0 0 .4em}
/* Nhịp dọc: mọi khối lớn cách nhau đúng --sec, khỏi mỗi chỗ một kiểu margin */
.wrap > section{margin-bottom:var(--sec)}
.lead{font-size:15.5px;line-height:1.6;color:var(--muted);margin:.2em 0 0;max-width:760px}

/* ===== ĐẦU TRANG (dùng chung cho trang chủ và /trongdiem) ==================
   Trước đây đầu trang chủ có HAI khối dẫn tới đúng cùng 9 sản phẩm: hàng chip
   "Bạn cần học" rồi ngay dưới là 9 thẻ to "Chọn chương trình" — 18 link cho 9
   đích, cách nhau đúng một màn hình. Bỏ hàng chip, giữ khối thẻ (thẻ có mô tả
   nên người đang phân vân mới chọn được) và đưa nó lên ngay dưới header.
   Thứ tự chuẩn của một trang đích: tiêu đề → lời hứa dùng free → thứ để chọn
   → dải bằng chứng. Trang nào cũng theo đúng thứ tự này thì mới ra một nhà.
   ======================================================================== */
.ht{max-width:1040px;margin:0 auto;padding:16px 20px 0}
.ht h1{margin:0 0 6px}
.ht-lead{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0;max-width:800px}
.ht-lead b{color:var(--txt)}
/* Dải lời hứa: gộp 3 thứ khách cần biết ngay (làm bài free · tài liệu free ·
   có theo dõi tiến độ) vào MỘT dòng. Trước đây 3 ý này nằm rải rác ở banner
   xanh lá, thanh 5 nút học viên và tận cuối trang. */
.ht-free{display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;
  background:var(--ok-bg);border:1px solid #bfe8cc;border-radius:var(--r-md);
  padding:12px 16px;margin:14px 0 0}
.ht-free-t{font-weight:800;color:#15803d;font-size:15px;flex:1 1 100%}
.ht-free ul{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:0;padding:0}
.ht-free li{font-size:13.5px;color:#256b40;font-weight:600}
.ht-free li b{color:#15803d}
.ht-free .btn{padding:8px 16px;font-size:14px;margin-left:auto}
@media(max-width:640px){
  .ht{padding:14px 14px 0}
  .ht-free .btn{margin-left:0;width:100%;text-align:center}
}
.btn{display:inline-block;background:var(--pink);color:#fff;border:0;border-radius:10px;
  padding:11px 18px;font-weight:700;cursor:pointer;text-decoration:none;font-size:15px}
.btn:hover{background:var(--pink2)} .btn.ghost{background:transparent;border:1px solid var(--navy);color:var(--navy)}
.btn:disabled{opacity:.5;cursor:not-allowed}
input,textarea,select{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;font-family:inherit;margin:6px 0 12px}
textarea{min-height:120px;resize:vertical}
label{font-weight:600;font-size:14px}
label.agree{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:13.5px;
  color:var(--muted);margin:4px 0 12px;cursor:pointer}
label.agree input{width:auto;margin:2px 0 0;flex:0 0 auto}
label.agree a{color:var(--navy);font-weight:600}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tabs button{flex:1;background:#eef1f7;border:0;padding:10px;border-radius:10px;font-weight:700;cursor:pointer}
.tabs button.active{background:var(--navy);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:#eef1f7;color:var(--navy)}
.pill.green{background:#dcfce7;color:var(--ok)} .pill.gray{background:#eef1f7;color:var(--muted)}
.pill.pill-lg{font-size:15px;font-weight:800;padding:5px 14px}
/* Phân loại trong trang quản trị: Đề (navy) vs Tài liệu (hồng) */
.card.type-de{border-left:6px solid var(--navy);background:#f6f8fc}
.card.type-de h2{color:var(--navy)}
.card.type-tl{border-left:6px solid var(--pink);background:#fff5f8}
.card.type-tl h2{color:var(--pink2)}
/* ===== Câu hỏi kiểu SAT: đề in đậm, đáp án là ô bo tròn có badge chữ cái ===== */
.q{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:14px 0;background:#fff}
/* Đề (prompt) in đậm để tách bạch với đáp án; riêng bài đọc giữ chữ thường */
.q .q-stem{font-size:16px;font-weight:600;line-height:1.55;margin-bottom:14px;color:var(--navy)}
.q .q-stem .passage{font-weight:400}
.q .stem svg{display:block;margin:8px 0;max-width:100%;height:auto}
/* Đáp án xếp DỌC, mỗi ô 1 dòng — giống đề thi chuẩn */
.q .opts{display:flex;flex-direction:column;gap:10px}
.q .opt{display:flex;align-items:center;gap:12px;padding:11px 14px;margin:0;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;font-size:15.5px;line-height:1.4;
  font-weight:400;background:#fff;transition:border-color .12s,background .12s}
.q .opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.q .opt-badge{flex:0 0 auto;width:27px;height:27px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;color:var(--muted);
  transition:background .12s,color .12s,border-color .12s}
.q .opt-text{flex:1 1 auto}
.q .opt:hover{border-color:var(--navy)}
.q .opt:has(input:checked){border-color:var(--navy);background:#f4f7ff}
.q .opt:has(input:checked) .opt-badge{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Kết quả (đúng/sai) phải THẮNG trạng thái "đang chọn" — thêm .opts để tăng độ ưu tiên */
.q .opts .opt.correct{border-color:var(--ok);background:#f0fdf4}
.q .opts .opt.correct .opt-badge{background:var(--ok);color:#fff;border-color:var(--ok)}
.q .opts .opt.wrong{border-color:var(--bad);background:#fef2f2}
.q .opts .opt.wrong .opt-badge{background:var(--bad);color:#fff;border-color:var(--bad)}
.q textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px;
  padding:11px 14px;font-size:15.5px;line-height:1.5;font-family:inherit;min-height:96px;resize:vertical}
.q textarea:focus{outline:none;border-color:var(--navy)}
.q .explain{font-size:14.5px}
/* ===== Khối điểm SAT (Verbal /800 + Math /800 = Total /1600) ===== */
.sat-box{border:1.5px solid var(--navy);border-radius:14px;padding:14px 16px;margin:6px 0 12px;background:#f4f7ff}
.sat-total{display:flex;align-items:baseline;gap:8px}
.sat-total span{font-weight:600;color:var(--navy)}
.sat-total b{font-size:30px;line-height:1;color:var(--navy)}
.sat-total i{font-style:normal;color:var(--muted);font-size:15px}
.sat-subs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.sat-sub{flex:1 1 180px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.sat-sub b{font-size:20px;color:var(--navy)}
.sat-sub i{font-style:normal;color:var(--muted);font-size:13.5px}
.sat-sub em{font-style:normal;color:var(--muted);font-size:12.5px;flex:1 1 100%}
.sat-tag{font-weight:700;font-size:12px;padding:2px 9px;border-radius:999px;color:#fff}
.sat-tag.v{background:var(--pink2,#be185d)} .sat-tag.m{background:var(--navy)}
/* Điểm thành phần SAT (8 domain) — kiểu bảng như báo cáo SAT thật */
.sat-comp{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
@media(max-width:640px){.sat-comp{grid-template-columns:1fr}}
.sat-comp h4{margin:0 0 6px;font-size:13px;color:var(--navy);text-transform:uppercase;letter-spacing:.4px}
.sat-comp h4.v{color:var(--pink2,#be185d)}
.sat-dom{margin:7px 0}
.sat-dom-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--navy);margin-bottom:3px}
.sat-dom-top em{font-style:normal;color:var(--muted)}
.sat-bar{height:9px;border-radius:999px;background:#e3e8f4;overflow:hidden}
.sat-bar>span{display:block;height:100%;border-radius:999px}
.sat-bar.v>span{background:var(--pink2,#be185d)} .sat-bar.m>span{background:var(--navy)}
/* Bảng báo cáo SAT kiểu College Board (Total + Section + 8 domain vẽ bằng ô câu) */
.sat-report{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin:8px 0}
.sat-report .rep-head{background:#f6f8fc;border-bottom:1px solid var(--line);padding:12px 16px;font-weight:800;color:var(--navy);font-size:17px}
.sat-report .rep-body{display:grid;grid-template-columns:200px 1fr;gap:0}
@media(max-width:640px){.sat-report .rep-body{grid-template-columns:1fr}}
.sat-report .rep-left{background:#fafbfe;border-right:1px solid var(--line);padding:14px 16px}
@media(max-width:640px){.sat-report .rep-left{border-right:none;border-bottom:1px solid var(--line)}}
.sat-report .rep-right{padding:14px 18px}
.rep-lbl{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;margin:2px 0 4px}
.rep-total{font-size:38px;line-height:1;font-weight:800;color:var(--navy)}
.rep-total small{font-size:13px;color:var(--muted);font-weight:600}
.rep-sec{margin-top:12px}
.rep-sec b{font-size:13px;color:var(--navy)}
.rep-sec .sc{font-size:26px;font-weight:800;color:var(--navy);line-height:1.1}
.rep-sec.v .sc{color:var(--pink2,#be185d)}
.rep-sec .sc small{font-size:12px;color:var(--muted);font-weight:600}
.rep-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
@media(max-width:560px){.rep-cols{grid-template-columns:1fr}}
.rep-cols h4{margin:0 0 8px;font-size:14px;color:var(--navy)}
.rep-cols h4.v{color:var(--pink2,#be185d)}
.rep-dom{margin:9px 0}
.rep-dom .nm{font-size:12.5px;font-weight:700;color:var(--navy)}
.rep-dom .qn{font-size:11px;color:var(--muted);margin-bottom:4px}
.rep-boxes{display:flex;flex-wrap:wrap;gap:3px}
.rep-boxes i{width:16px;height:12px;border-radius:2px;border:1px solid var(--navy);display:inline-block}
.rep-boxes i.on{background:var(--navy)}
.rep-boxes.v i{border-color:var(--pink2,#be185d)} .rep-boxes.v i.on{background:var(--pink2,#be185d)}
/* Bài đọc trong đề (Reading passage) */
.passage{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:15.5px;line-height:1.6}
.passage p{margin:.5em 0}
.explain{background:#f8fafc;border-left:3px solid var(--navy);padding:10px 12px;margin-top:8px;border-radius:0 8px 8px 0;font-size:14px;line-height:1.65}
.explain mark{background:#dbeafe;color:#1e3a5f;padding:1px 3px;border-radius:3px;font-style:italic}
.ex-trap{color:#b91c1c;font-weight:700}
.ex-para{background:#e0e7ff;color:#3730a3;font-weight:700;padding:0 4px;border-radius:3px;font-size:12px}
/* Free vs PRO explain gating */
.explain.explain-sample{position:relative;border-left-color:#2563eb;background:linear-gradient(135deg,#eff6ff 0%,#f0f7ff 100%);box-shadow:0 2px 8px rgba(37,99,235,.1)}
.explain.explain-sample::after{content:'XEM MẪU';position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:10px;padding:2px 10px;border-radius:6px;letter-spacing:.5px;font-weight:700;box-shadow:0 2px 6px rgba(37,99,235,.25)}
.explain-short{background:#f1f5f9;border-left:3px solid #94a3b8;padding:8px 12px;margin-top:8px;border-radius:0 8px 8px 0;font-size:14px;color:#475569}
.explain-blur{position:relative;overflow:hidden;max-height:44px;margin-top:4px;padding:0 12px}
.explain-blur span{filter:blur(5px);user-select:none;pointer-events:none;font-size:13px;line-height:1.5;color:#94a3b8;display:block}
.explain-blur::after{content:'';position:absolute;bottom:0;left:0;right:0;height:28px;background:linear-gradient(transparent,#f1f5f9)}
.pro-gate{background:linear-gradient(135deg,#eff6ff,#ecfdf5);border:1.5px solid #bfdbfe;border-radius:10px;padding:16px 18px;margin-top:10px;text-align:center}
.pro-gate h4{margin:0 0 10px;color:var(--navy);font-size:15px;font-weight:700}
.pro-compare{display:flex;gap:16px;justify-content:center;margin:10px 0 14px;font-size:13px;text-align:left}
.pro-compare > div{flex:1;max-width:200px;padding:10px 12px;border-radius:8px}
.pc-free{background:#f8fafc;border:1px solid #e2e8f0;color:#64748b}
.pc-pro{background:#ecfdf5;border:1.5px solid #6ee7b7;color:#065f46}
.pc-free b,.pc-pro b{display:block;margin-bottom:6px;font-size:14px}
.pc-off{color:#cbd5e1;text-decoration:line-through}
.btn-pro{display:inline-block;background:var(--navy);color:#fff;padding:9px 24px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;transition:opacity .15s}
.btn-pro:hover{opacity:.88}
.pro-gate-inline{display:flex;align-items:center;gap:8px;justify-content:space-between;background:#f0f7ff;border:1px dashed #93c5fd;border-radius:8px;padding:8px 12px;margin-top:6px;font-size:13px;color:#1e40af}
.pro-gate-inline a{white-space:nowrap;font-weight:600;color:var(--navy);text-decoration:none}
.pro-gate-inline a:hover{text-decoration:underline}
.msg{padding:10px 14px;border-radius:10px;margin:8px 0;font-size:14px}
.msg.err{background:#fef2f2;color:var(--bad)} .msg.ok{background:#f0fdf4;color:var(--ok)}
.muted{color:var(--muted);font-size:14px}
.help{background:#f1f5ff;border:1px solid #d8e2f3;color:var(--txt);border-radius:10px;
  padding:10px 14px;font-size:13.5px;line-height:1.65;margin-top:8px;text-align:left}
.help b{color:var(--navy)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}
/* Header auth buttons */
.nav-auth{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Hero / giới thiệu */
.hero{background:linear-gradient(160deg,var(--navy),#13294b);color:#fff;padding:34px 0 30px}
.hero h1{color:#fff;font-size:clamp(24px,4vw,34px);margin:0 0 .3em}
.hero .lead{color:#e7ecf5;font-size:16px;max-width:760px;margin:0 0 18px}
.hero .lead b{color:#fff}
.hero-cta{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.hero-cta .btn.ghost{border-color:#fff;color:#fff}
.hero-cta .btn.ghost:hover{background:rgba(255,255,255,.12)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.stat{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);padding:14px;text-align:center}
.stat .num{display:block;font-size:28px;font-weight:800;color:#fff;line-height:1.1}
.stat .lbl{display:block;font-size:12px;color:#cdd6e6;margin-top:4px}
/* Huy hiệu trường */
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{background:#eef1f7;color:var(--navy);font-weight:700;font-size:13px;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
/* Khuyến khích đăng ký */
.promo{background:#fff0f5;border:1px solid #f9c2d6;color:#9d174d;border-radius:12px;
  padding:10px 14px;font-size:14px;font-weight:600;margin-bottom:14px}
.promo b{color:var(--pink2)}
.hero .promo{background:rgba(237,14,87,.16);border-color:rgba(255,255,255,.25);color:#fff;
  display:inline-block;margin:14px 0 0}
.hero .promo b{color:#ffd1e0}
/* Logo trường trọng điểm */
.schools-h{color:var(--navy);font-size:15px;margin:14px 0 10px}
.schools{display:flex;flex-wrap:wrap;gap:18px}
.school{width:108px;margin:0;text-align:center}
.school .logo{position:relative;display:flex;align-items:center;justify-content:center;
  width:84px;height:84px;margin:0 auto 8px;border-radius:50%;background:#fff;
  border:1px solid var(--line);overflow:hidden}
.school .logo .ph{font-weight:800;font-size:18px;color:var(--navy)}
.school .logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:6px;background:#fff}
.school figcaption{font-size:13px;font-weight:600;color:var(--navy);line-height:1.3}
/* Dải tài liệu cuộn ngang (tối đa 3 dòng) */
.strip-wrap{position:relative}
/* 1 HÀNG NGANG, lướt ngang bằng nút ‹ › (không xếp dọc) */
.strip{display:grid;grid-auto-flow:column;grid-auto-rows:1fr;
  grid-auto-columns:minmax(240px,260px);gap:14px;overflow-x:auto;scroll-behavior:auto;
  padding:4px 2px 10px}
.strip-card{margin:0!important;scroll-snap-align:start;display:flex;flex-direction:column}
/* mô tả tài liệu tối đa 2 dòng cho gọn */
.strip-card .muted{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.strip-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:none;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--navy);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(20,40,80,.15)}
.strip-arrow:hover{border-color:var(--navy)}
.strip-arrow.left{left:-6px} .strip-arrow.right{right:-6px}
.strip-wrap.scrollable .strip-arrow{display:flex;align-items:center;justify-content:center}
/* Dải khoá/thẻ chia CỘT (mặc định 2 thẻ/cột = tối đa 2 hàng), dư thì cuộn NGANG bằng nút ‹ › */
.strip3{display:flex;gap:16px;overflow-x:auto;scroll-behavior:auto;padding:4px 2px 14px;
  scrollbar-width:thin;scrollbar-color:var(--pink,#ED0E57) #e7ebf2}
.strip3::-webkit-scrollbar{height:10px}
.strip3::-webkit-scrollbar-track{background:#e7ebf2;border-radius:6px}
.strip3::-webkit-scrollbar-thumb{background:var(--pink,#ED0E57);border-radius:6px;border:2px solid #e7ebf2}
.strip3::-webkit-scrollbar-thumb:hover{background:var(--pink2,#EA1A5C)}
.col3{display:flex;flex-direction:column;gap:16px;flex:0 0 auto;width:min(290px,74vw)}
.col3 .post-card,.col3 .course-card,.col3 .card{margin:0!important}
/* Cover trên card + nút giỏ hàng */
.card-cover{display:block;margin:-2px 0 10px}
.card-cover img{width:100%;height:150px;object-fit:cover;border-radius:10px;display:block;background:#eef1f7}
.card-title{color:var(--navy);text-decoration:none}
.card-title:hover{color:var(--pink)}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.card-actions .btn{flex:1;text-align:center;white-space:nowrap}
.btn:disabled{opacity:1;background:#dcfce7;color:var(--ok);cursor:default}
/* Trang chi tiết khoá học */
.course-head{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.course-cover{flex:0 0 320px;max-width:100%}
.course-cover img{width:100%;border-radius:var(--radius);border:1px solid var(--line);display:block}
.course-meta{flex:1;min-width:240px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.gallery img{width:100%;height:140px;object-fit:cover;border-radius:10px;border:1px solid var(--line);
  display:block;cursor:pointer;transition:transform .12s}
.gallery img:hover{transform:scale(1.02)}
/* Toggle Free/Bán trong admin */
.seg{display:flex;gap:8px;margin:6px 0 12px}
.seg-opt{display:flex;align-items:center;gap:6px;font-weight:600;background:#eef1f7;
  border:1px solid var(--line);border-radius:10px;padding:8px 14px;cursor:pointer}
.seg-opt input{width:auto;margin:0}
/* ===== Danh sách bài học (course.html) ===== */
.lessons{display:flex;flex-direction:column;gap:10px}
.lesson-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:#fbfcfe}
.lesson-row.locked{background:#f3f5f9;opacity:.85}
.lesson-no{flex:0 0 auto;font-weight:800;color:var(--navy);background:#eef1f7;border-radius:10px;
  padding:8px 12px;font-size:13px;white-space:nowrap}
.lesson-main{flex:1;min-width:0}
.lesson-title{font-weight:600;color:var(--txt)}
.lesson-meta{font-size:12px;margin-top:2px}
.lesson-act{flex:0 0 auto}
.lesson-act .lock{font-size:20px;opacity:.7}
/* ===== PDF nhúng (lesson.html) ===== */
.pdf-card{padding:12px}
.pdf-frame{width:100%;height:78vh;min-height:480px;border:1px solid var(--line);border-radius:10px;
  background:#f0f2f7;display:block}
/* ===== Admin: khoá nhiều bài học ===== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.lesson-edit{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:#fbfcfe}
.lesson-edit-h{font-weight:800;color:var(--navy);margin-bottom:4px}
.ck-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.ck{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.ck input{width:auto;margin:0}
/* ===== Tài liệu nhiều phần: nút tải từng phần ===== */
.part-dls{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.part-dls .btn{flex:0 1 auto}
/* ===== Đồng hồ đếm ngược làm bài (lesson.html) ===== */
.timer{position:sticky;top:8px;z-index:20;background:var(--navy);color:#fff;
  border-radius:12px;padding:10px 16px;font-size:16px;text-align:center;
  box-shadow:0 3px 10px rgba(20,40,80,.18);margin:6px 0 12px}
.timer b{color:#fff;font-variant-numeric:tabular-nums;font-size:19px}
.timer.warn{background:var(--bad);animation:timerpulse 1s infinite}
@keyframes timerpulse{50%{opacity:.75}}

/* ===== Đa chương trình: menu 4 nhóm + nhãn ===== */
.prog-nav{display:flex;flex-wrap:wrap;gap:10px;max-width:960px;margin:14px auto 0;padding:0 20px}
/* Mỗi ô nhóm = 1 wrapper để chứa menu con thả xuống */
.prog-item{flex:1 1 200px;position:relative;display:flex}
.prog-item .prog-link{flex:1 1 auto;width:100%}
.prog-caret{font-size:12px;opacity:.7}
/* cầu nối trong suốt để rê chuột từ nút xuống menu không bị rớt hover */
.prog-item.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:8px}
.prog-sub{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  display:none;flex-direction:column;gap:2px;padding:6px;
  background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(20,40,80,.18)}
.prog-item.has-sub:hover .prog-sub,
.prog-item.has-sub:focus-within .prog-sub,
.prog-item.has-sub.open .prog-sub{display:flex}
.prog-sublink{display:block;padding:9px 12px;border-radius:8px;text-decoration:none;
  font-weight:700;color:var(--navy);font-size:14.5px;line-height:1.25}
.prog-sublink:hover{background:#eef3fb;color:var(--pink,#ED0E57)}
@media(max-width:560px){.prog-item{flex:1 1 140px}
  .prog-sub{position:static;box-shadow:none;margin-top:4px}}
.prog-link{flex:1 1 200px;min-height:60px;display:flex;align-items:center;justify-content:center;
  gap:10px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;font-weight:700;color:var(--navy);
  box-shadow:0 2px 8px rgba(20,40,80,.06);transition:.15s}
.prog-link:hover{border-color:var(--navy);transform:translateY(-1px)}
.prog-link.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.prog-link .pe{font-size:26px;line-height:1}
.prog-link .prog-name{text-align:center;line-height:1.18;text-wrap:balance}
.prog-logo{height:34px;width:auto;max-width:80px;object-fit:contain;display:inline-block;
  vertical-align:middle;background:#fff;border-radius:5px;padding:2px 4px;flex:0 0 auto}
/* IELTS / SAT: chỉ logo, to rõ, chiếm hết ô (không kèm chữ) */
.prog-link.logo-only{padding:8px 12px}
.prog-link.logo-only .prog-logo{height:42px;max-width:150px;padding:2px 6px}
.prog-link.logo-only .pe{font-size:32px}
.prog-badges{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.prog-checks{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 4px;
  background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.prog-hero{max-width:960px;margin:0 auto;padding:20px 20px 0}
.prog-hero h1{margin:.1em 0}

/* ===== Thanh khu học viên: Lộ trình / Dashboard / Khoá học của tôi / Lịch sử nộp bài =====
   CHỈ hiện khi đã đăng nhập (xem mountStudentNav trong config.js). Popup .stn-gate
   mời đăng nhập đã bỏ cùng lúc: không còn ai bấm vào đây mà chưa có tài khoản. */
.student-nav{display:flex;flex-wrap:wrap;gap:8px;max-width:960px;margin:12px auto 0;padding:0 20px}
.stn-link{flex:1 1 160px;display:flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 14px;font-weight:700;font-size:14px;color:var(--navy);
  box-shadow:var(--sh-1);transition:.15s}
.stn-link:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--sh-2)}
.stn-link.stn-home{background:linear-gradient(135deg,var(--navy),var(--navy-l));color:#fff;border-color:var(--navy)}
.stn-link.stn-home:hover{filter:brightness(1.08)}
.stn-ic{font-size:17px;line-height:1}
@media(max-width:640px){.stn-link{flex:1 1 42%;font-size:13px;padding:9px 8px}.stn-ic{font-size:15px}}

/* ===== 🔥 Chế độ sỉ nhục: ô tick dưới thanh khu học viên + bong bóng nhắc học ===== */
.roast-row{max-width:960px;margin:8px auto 0;padding:0 20px;display:flex;flex-wrap:wrap;
  gap:6px 10px;align-items:center}
.roast-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 13px;
  font-weight:700;font-size:13.5px;color:var(--navy);user-select:none;transition:.15s}
.roast-toggle:hover{border-color:var(--pink);color:var(--pink)}
.roast-toggle input{margin:0;width:15px;height:15px;accent-color:var(--pink);cursor:pointer}
.roast-note{font-size:12.5px;color:var(--muted)}
/* bottom 86px: nằm TRÊN nút nổi "Đăng ký học" (#ldBtn của zalo-support.js) cho khỏi che nhau */
.roast-toast{position:fixed;right:16px;bottom:86px;z-index:9991;width:384px;max-width:calc(100vw - 28px);
  background:#fff;border:1px solid var(--line);border-left:6px solid var(--pink);border-radius:18px;
  padding:16px 18px 15px;box-shadow:0 22px 54px rgba(20,40,80,.26);
  opacity:0;transform:translateY(18px) scale(.94);pointer-events:none;transition:.28s ease}
/* Lúc hiện thì nảy nhẹ một cái (cubic-bezier vọt quá 1 rồi rơi về) cho đập vào mắt */
.roast-toast.on{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
  transition:opacity .3s ease,transform .46s cubic-bezier(.18,1.5,.4,1)}
.roast-x{position:absolute;top:7px;right:9px;background:none;border:0;font-size:17px;
  color:var(--muted);cursor:pointer;line-height:1;padding:5px}
.roast-x:hover{color:var(--navy)}
.roast-body{display:flex;gap:13px;align-items:center;padding-right:14px}
/* Nhân vật: SVG vẽ tay (trong config.js) đặt trên nền tròn hồng. To hẳn + NHÚN NHẢY để hút mắt:
   lấy đà (bẹp xuống) → bật lên nghiêng người → rơi xuống nảy thêm cái nữa, rồi đứng im nghỉ. */
.roast-pet{position:relative;flex:0 0 auto;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#FFF0F5 0%,#FFE1EC 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Quầng hồng phập phồng phía sau — đây là thứ kéo ánh mắt về góc màn hình */
.roast-pet::before{content:"";position:absolute;inset:-7px;border-radius:50%;
  background:radial-gradient(circle,rgba(237,14,87,.30) 0%,rgba(237,14,87,0) 70%);
  animation:roastHalo 2.2s ease-in-out infinite}
.roast-pet svg{width:96px;height:96px;display:block;position:relative;
  transform-origin:50% 88%;   /* gốc xoay ở chân → nhún/nghiêng ra dáng chứ không quay quanh bụng */
  animation:roastHop 2.2s cubic-bezier(.3,.9,.4,1) infinite}
@keyframes roastHop{
  0%,52%,100%{transform:translateY(0) rotate(0) scale(1,1)}
  58%{transform:translateY(2px) rotate(0) scale(1.12,.86)}        /* nhún lấy đà */
  70%{transform:translateY(-16px) rotate(-14deg) scale(.92,1.12)} /* bật lên */
  79%{transform:translateY(-2px) rotate(10deg) scale(1.08,.94)}   /* chạm đất */
  88%{transform:translateY(-9px) rotate(-6deg) scale(1,1)}        /* nảy nhẹ lần 2 */
  95%{transform:translateY(0) rotate(0) scale(1.05,.95)}
}
@keyframes roastHalo{0%,55%,100%{opacity:.3;transform:scale(1)}74%{opacity:.85;transform:scale(1.16)}}
@media(prefers-reduced-motion:reduce){.roast-pet svg,.roast-pet::before,.roast-tag{animation:none}}
/* Tem chữ kiểu truyện tranh dán lệch trên đầu con thú */
.roast-tag{position:absolute;top:-9px;left:-12px;z-index:2;background:var(--pink);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.3px;padding:3px 9px;border-radius:9px;
  transform:rotate(-11deg);box-shadow:0 4px 10px rgba(237,14,87,.4);white-space:nowrap;
  animation:roastTag 2.2s ease-in-out infinite}
@keyframes roastTag{0%,58%,100%{transform:rotate(-11deg) scale(1)}
  70%{transform:rotate(-16deg) scale(1.18)}82%{transform:rotate(-7deg) scale(1.02)}}
.roast-msg{font-size:15.5px;line-height:1.55}
.roast-act{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.roast-act .btn{padding:8px 17px;font-size:14px}
@media(max-width:640px){
  .roast-toast{right:10px;left:10px;bottom:78px;width:auto}
  .roast-pet{width:88px;height:88px}
  .roast-pet svg{width:82px;height:82px}
  .roast-msg{font-size:14.5px}
  .roast-note{flex:1 1 100%}
}

/* ===== Trọng điểm: sub-nav 4 phần (chip nhảy tới section) ===== */
.tdpart-nav{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.tdpart-chip{display:inline-block;text-decoration:none;font-weight:700;font-size:13px;
  background:#eef1f7;color:var(--navy);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;transition:.15s}
.tdpart-chip:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Nhãn HOT cho phần mới nổi bật */
.hot-badge{display:inline-block;background:#ED0E57;color:#fff;font-size:12px;font-weight:800;
  padding:2px 9px;border-radius:999px;vertical-align:middle;margin-left:8px;letter-spacing:.3px;
  box-shadow:0 2px 6px rgba(237,14,87,.35)}
.tdpart-chip.hot{background:#ED0E57;color:#fff;border-color:#ED0E57}
.tdpart-chip.hot:hover{background:#c60b49;border-color:#c60b49}
.tdpart-chip.new{background:#16a34a;color:#fff;border-color:#16a34a}
.tdpart-chip.new:hover{background:#128a3e;border-color:#128a3e}
/* Badge NEW (xanh lá) kế bên HOT */
.new-badge{display:inline-block;background:#16a34a;color:#fff;font-size:12px;font-weight:800;
  padding:2px 9px;border-radius:999px;vertical-align:middle;margin-left:6px;letter-spacing:.3px;
  box-shadow:0 2px 6px rgba(22,163,74,.35)}
/* Heading phần HOT: rê chuột vào phóng to nhẹ cho nổi bật */
.part-hot{display:inline-block;transform-origin:left center;transition:transform .18s ease}
.part-hot:hover{transform:scale(1.06)}
/* Đánh giá sao X.X/5.0 trên thẻ khoá */
.rating{display:flex;align-items:center;gap:6px;margin:2px 0 6px;font-size:13px}
.rating .stars{position:relative;display:inline-block;color:#d8dbe2;font-size:15px;line-height:1;letter-spacing:1px}
.rating .stars::before{content:"★★★★★"}
.rating .stars>i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#f5a623}
.rating .stars>i::before{content:"★★★★★"}
.rating b{color:var(--navy);font-weight:800}
.rating .rmuted{color:#8a93a6;font-size:12px}

/* Link "Xem nội dung →" trên thẻ khoá: rõ hơn muted nhưng vẫn nhỏ gọn */
.more-link{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;
  color:var(--navy);text-decoration:underline;text-underline-offset:2px;
  transform-origin:left center;transition:transform .15s ease,color .15s ease}
.more-link:hover{color:var(--pink2);transform:scale(1.12)}

/* Bộ lọc nhóm/phần ở trang quản trị */
.admin-filter{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:6px 0 12px}
.admin-filter label{font-weight:600;font-size:13px;color:var(--navy);display:inline-flex;align-items:center;gap:6px}
.admin-filter select{width:auto;min-width:150px;max-width:280px;margin:0;padding:7px 9px;font-size:13.5px}

/* ===== Thành tích học viên SAT (testimonials) ===== */
.wins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.win-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 4px 16px rgba(20,40,80,.08);display:flex;flex-direction:column}
.win-top{background:linear-gradient(135deg,#0aa0e0,#0767b3);color:#fff;
  padding:16px 18px 14px;display:flex;align-items:baseline;gap:6px;position:relative}
.win-label{position:absolute;top:12px;right:16px;font-size:11px;font-weight:800;letter-spacing:1px;
  background:rgba(255,255,255,.22);padding:2px 8px;border-radius:999px}
.win-total{font-size:40px;font-weight:800;line-height:1}
.win-max{font-size:16px;opacity:.85;font-weight:600}
.win-subs{display:flex;border-bottom:1px solid var(--line)}
.win-sub{flex:1;padding:12px 10px;text-align:center}
.win-sub+.win-sub{border-left:1px solid var(--line)}
.win-sub b{display:block;font-size:22px;color:var(--navy);line-height:1.1}
.win-sub span{font-size:11.5px;color:var(--muted);font-weight:600}
.win-stars{color:#f5b301;font-size:16px;letter-spacing:2px;padding:12px 18px 0}
.win-name{font-weight:800;color:var(--navy);font-size:17px;padding:4px 18px 0}
.win-course{font-size:12.5px;color:var(--pink2);font-weight:700;padding:2px 18px 0}
.win-quote{font-size:13.5px;color:var(--txt);font-style:italic;padding:8px 18px 16px;margin:0}

/* ===== Lộ trình CHỌN (chọn mục tiêu → nhận tư vấn) — dùng chung IELTS/SAT/Quốc tế/Trọng điểm (ct.html + index.html) ===== */
.lt-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:stretch;margin:26px 0;
  background:linear-gradient(180deg,#fbfcfe,#fff);border-radius:24px;padding:32px 34px;position:relative;overflow:hidden;
  box-shadow:0 16px 40px rgba(28,53,95,.14),0 2px 10px rgba(28,53,95,.06)}
.lt-wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,#3f8f5f,#d9822b,#6b3fa0,#ED0E57)}
.lt-wrap+.lt-wrap{margin-top:22px}
.lt-kicker{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.6px;color:#fff;
  text-transform:uppercase;background:linear-gradient(135deg,#ED0E57,#ff5c8a);padding:6px 15px;border-radius:999px}
.lt-title{margin:14px 0 6px;color:var(--navy);font-size:30px;font-weight:800;line-height:1.25}
.lt-lead{color:var(--muted);font-size:14.5px;margin:0 0 20px;line-height:1.55}
.lt-btns{display:flex;flex-direction:column;gap:12px}
.lt-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;
  border:2px solid var(--line);background:#f5f7fb;color:var(--navy);
  font-weight:800;font-size:17px;padding:17px 20px;border-radius:15px;cursor:pointer;transition:.18s;
  box-shadow:0 2px 6px rgba(28,53,95,.04)}
.lt-btn:hover{border-color:#c9d3e6;transform:translateX(4px);box-shadow:0 6px 16px rgba(28,53,95,.1)}
.lt-btn.active{background:linear-gradient(135deg,#1C355F,#2a4a85);border-color:#1C355F;color:#fff;
  box-shadow:0 10px 24px rgba(28,53,95,.34);transform:translateX(4px)}
.lt-btn.active::after{content:"✓";font-size:17px;font-weight:900}
.lt-card{background:#fff;border:2px solid var(--line);border-radius:20px;padding:32px 34px;
  display:flex;flex-direction:column;justify-content:center;min-height:240px;
  box-shadow:0 10px 28px rgba(28,53,95,.09);animation:ltFade .25s ease}
@keyframes ltFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lt-card-band{font-size:16.5px;font-weight:900;margin-bottom:8px}
.lt-card-band .lt-arrow{color:var(--muted);font-weight:700;font-size:19px;margin:0 5px}
.lt-card-title{margin:0 0 10px;color:var(--navy);font-size:26px;font-weight:800}
.lt-card-title span{display:block;font-weight:600;color:var(--muted);font-size:14px;margin-top:4px}
.lt-card-desc{font-size:15.5px;line-height:1.65;color:var(--txt);margin:0 0 22px}
.lt-cta{align-self:flex-start;border:none;background:linear-gradient(135deg,#ED0E57,#ff5c8a);color:#fff;
  font-weight:800;font-size:17px;padding:17px 30px;border-radius:15px;cursor:pointer;transition:.18s;
  box-shadow:0 10px 22px rgba(237,14,87,.34)}
.lt-cta:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 14px 28px rgba(237,14,87,.42)}
@media(max-width:760px){.lt-wrap{grid-template-columns:1fr;padding:24px}.lt-title{font-size:25px}}

/* =========================================================================
   ĐIỆN THOẠI — khối tối ưu chung (41% học viên vào bằng mobile)
   Đặt CUỐI FILE để đè các rule phía trên. Chỉ ảnh hưởng màn hình nhỏ.
   ========================================================================= */

/* Safari tự phóng chữ khi xoay ngang -> tắt, giữ đúng cỡ mình đặt */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media(max-width:768px){

  /* --- 1. CHẶN iOS TỰ PHÓNG TO KHI BẤM VÀO Ô NHẬP ---------------------
     Safari trên iPhone tự zoom trang nếu ô nhập có cỡ chữ < 16px, và KHÔNG
     tự thu lại -> học viên phải tự vuốt thu nhỏ. 16px là ngưỡng bắt buộc.
     (Trang đăng ký có 25 ô đang ở 15px -> dính lỗi này ở ngay cửa vào.) */
  input,textarea,select{font-size:16px}
  /* Ô tick/radio không cần 16px, giữ nhỏ gọn để không phá layout hàng ngang */
  input[type=checkbox],input[type=radio]{font-size:inherit}

  /* --- 2. VÙNG BẤM TỐI THIỂU 44px (chuẩn Apple HIG) ------------------- */
  .btn,.stn-link,.prog-link,.prog-sublink,button{min-height:44px}
  .btn{display:inline-flex;align-items:center;justify-content:center}
  /* Ngón tay không "trượt" mục tiêu như con trỏ chuột: nới khoảng cách */
  .prog-nav,.student-nav{gap:10px}

  /* --- 3. TÔN TRỌNG TAI THỎ / THANH HOME (iPhone X trở lên) ----------- */
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  header.top{padding-top:calc(10px + env(safe-area-inset-top))}

  /* --- 4. LẤY LẠI BỀ NGANG ĐỌC --------------------------------------- */
  /* 20px x 2 bên trên màn 375px = mất 11% chiều ngang cho khoảng trắng */
  .wrap{padding:14px 14px 24px}
  .prog-nav,.student-nav,.prog-hero{padding-left:14px;padding-right:14px}

  /* --- 5. CHỐNG TRÀN NGANG ------------------------------------------- */
  /* Từ dài / link dán thẳng (URL, email) là thủ phạm tràn ngang hay gặp */
  body{overflow-wrap:break-word}
  /* Bảng không co được -> cho cuộn ngang RIÊNG bảng, đừng để vỡ cả trang.
     Không dùng white-space:nowrap: bảng chữ dài sẽ kéo ngang vô tận. */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  img,video,iframe{max-width:100%}

  /* --- 6. CHẠM CHO CÓ PHẢN HỒI --------------------------------------- */
  a,button,.btn,.stn-link{-webkit-tap-highlight-color:rgba(237,14,87,.15)}
  /* Bỏ hiệu ứng rê chuột trên cảm ứng: chạm xong nút bị "dính" trạng thái hover */
  .prog-link:hover,.stn-link:hover{transform:none;box-shadow:0 2px 8px rgba(20,40,80,.06)}

  /* --- 7. PDF BÀI HỌC ------------------------------------------------- */
  /* iOS Safari chỉ hiện trang 1 của PDF trong iframe và không cuộn được
     -> thu iframe lại, nhường chỗ cho nút "Mở tài liệu" (xem lesson.html) */
  .pdf-frame{height:60vh;min-height:0}
}

/* Máy rất nhỏ (iPhone SE ~320px) */
@media(max-width:380px){
  .stn-link{font-size:12.5px;padding:9px 6px}
  .wrap{padding:12px 11px 22px}
}

/* =========================================================================
   THANH ĐIỀU HƯỚNG CHÍNH (mega menu) + các khối chuẩn hoá — thêm 11/8/2026.
   Vì sao có: trước đó cả web KHÔNG có menu nào. Sitemap có 104 URL nhưng từ
   trang chủ không bấm tới được trang nào trong số đó, nên vừa mất khách vừa
   mất SEO (Google không có đường bò, không có liên kết nội bộ để truyền lực).
   Cấu trúc học theo ma trận của UWorld: mỗi kỳ thi mở ra ĐÚNG các cột giống
   nhau (Khoá học · Luyện tập · Tìm hiểu) nên thêm môn mới không làm menu rối.
   Dùng <details> chứ không dùng JS: bấm được cả khi JS chưa tải, đọc được
   bằng bàn phím, và Google thấy toàn bộ link ngay trong HTML.
   ========================================================================= */
.mainnav{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(20,40,80,.04)}
.mainnav-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:stretch;gap:2px}
.mainnav details{position:relative}
.mainnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  padding:13px 15px;font-weight:650;font-size:15px;color:var(--navy);white-space:nowrap;
  border-bottom:3px solid transparent;transition:color .12s,border-color .12s}
.mainnav summary::-webkit-details-marker{display:none}
.mainnav summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .15s}
.mainnav summary:hover{color:var(--pink)}
.mainnav details[open] > summary{color:var(--pink);border-bottom-color:var(--pink)}
.mainnav details[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
/* Link phẳng (không có menu con) — cùng chiều cao với summary để hàng thẳng */
.mainnav > .mainnav-in > a.nav-flat{display:flex;align-items:center;padding:13px 15px;
  font-weight:650;font-size:15px;color:var(--navy);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent}
.mainnav a.nav-flat:hover{color:var(--pink);border-bottom-color:var(--pink)}
.mainnav a.nav-flat.free{color:var(--ok)}
.mainnav a.nav-flat.free:hover{border-bottom-color:var(--ok)}
/* Tấm menu xổ xuống */
.megabox{position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--line);
  border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--sh-3);padding:22px 24px;
  display:grid;gap:26px;min-width:520px;max-width:min(920px,94vw);
  /* Cột IB có 12 môn + dòng "xem tất cả" — trên laptop 13" tấm menu dài hơn màn
     hình, môn cuối bị cắt mất. Cho cuộn riêng trong tấm, không cho cuộn cả trang. */
  max-height:min(74vh,620px);overflow-y:auto;overscroll-behavior:contain}
.megabox.cols-2{grid-template-columns:repeat(2,minmax(190px,1fr))}
.megabox.cols-3{grid-template-columns:repeat(3,minmax(180px,1fr))}
.megabox.cols-4{grid-template-columns:repeat(4,minmax(160px,1fr))}
.mega-col h4{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--muted)}
.mega-col a{display:block;padding:6px 0;font-size:14.5px;color:var(--txt);text-decoration:none;line-height:1.4}
.mega-col a:hover{color:var(--pink)}
.mega-col a .sub{display:block;font-size:12.5px;color:var(--muted)}
.mega-col a.strong{font-weight:700;color:var(--navy)}
/* Cột cuối kiểu "thẻ nổi bật" — chỗ đặt bản miễn phí, học theo UWorld */
.mega-feat{background:linear-gradient(160deg,#f6f8fd,#eef3ff);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px}
.mega-feat h4{color:var(--navy)}
.mega-feat p{margin:0 0 12px;font-size:13px;color:var(--muted);line-height:1.5}
/* Nút bật menu trên điện thoại */
.nav-burger{display:none}
@media(max-width:900px){
  .mainnav-in{flex-direction:column;padding:0;display:none}
  .mainnav-in.open{display:flex}
  .nav-burger{display:flex;align-items:center;gap:8px;width:100%;padding:11px 20px;
    background:none;border:0;border-bottom:1px solid var(--line);font:inherit;
    font-weight:700;font-size:15px;color:var(--navy);cursor:pointer}
  .mainnav summary,.mainnav > .mainnav-in > a.nav-flat{border-bottom:1px solid var(--line);
    border-radius:0;padding:13px 20px}
  .mainnav details[open] > summary{border-bottom-color:var(--line);background:#f6f8fd}
  .megabox{position:static;min-width:0;max-width:none;grid-template-columns:1fr !important;
    border:0;border-radius:0;box-shadow:none;padding:8px 20px 16px;gap:16px;background:#fbfcfe}
}

/* ===== DẢI BẰNG CHỨNG dưới thanh menu ==================================
   Học theo Magoosh: ngay dưới menu là bằng chứng kiểm chứng được, không phải
   tính từ. Không ghi sĩ số — chỉ ghi thứ có thể mở ra xem (bằng, điểm thi). */
.proofbar{background:var(--navy);color:#fff}
.proofbar-in{max-width:1180px;margin:0 auto;padding:9px 20px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:8px 26px;font-size:13.5px;font-weight:600}
.proofbar b{color:#ffd764}
.proofbar a{color:#fff;text-decoration:underline;text-underline-offset:3px;opacity:.92}
.proofbar a:hover{opacity:1}
@media(max-width:600px){ .proofbar-in{font-size:12.5px;gap:6px 16px;padding:8px 14px} }

/* ===== ĐƯỜNG DẪN PHÂN CẤP (breadcrumb) ================================
   Trang môn học trước đây là ngõ cụt: chỉ có một link ngược về /#catalog.
   Breadcrumb cho học viên biết đang đứng ở đâu và cho Google hiểu cây trang. */
.crumb{max-width:1180px;margin:0 auto;padding:14px 20px 0;font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--pink);text-decoration:underline}
.crumb span{margin:0 7px;opacity:.5}

/* ===== DẢI MÔN CÙNG NHÓM (sibling links) ==============================
   Thứ UWorld làm mà mình chưa có: từ AP Biology bấm thẳng sang 14 môn AP
   còn lại, không phải quay về trang chủ. */
.siblings{margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.siblings h2{font-size:17px;margin:0 0 12px}
.sib-grid{display:flex;flex-wrap:wrap;gap:8px}
.sib-grid a{display:inline-block;padding:7px 13px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:13.5px;color:var(--navy);text-decoration:none;
  transition:border-color .12s,color .12s,transform .12s}
.sib-grid a:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-1px)}
.sib-grid a[aria-current=page]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}

/* ===== BẢNG MA TRẬN SẢN PHẨM (trang hub nhóm) =========================
   Mỗi môn đúng 3 ô giống nhau — quy tắc cứng của UWorld: học một lần là
   đoán được URL của môn thứ 45. */
.matrix{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:table}
.matrix th,.matrix td{padding:11px 14px;text-align:left;font-size:14px;border-bottom:1px solid var(--line)}
.matrix thead th{background:#f6f8fd;color:var(--muted);font-size:11.5px;letter-spacing:.8px;
  text-transform:uppercase;font-weight:800}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix tbody th{font-weight:700;color:var(--navy);white-space:nowrap}
.matrix td a{color:var(--pink);text-decoration:none;font-weight:600}
.matrix td a:hover{text-decoration:underline}
.matrix td.off{color:#b6becd}
@media(max-width:760px){ .matrix{display:block;overflow-x:auto} }

/* ===== KHỐI MỞ ĐẦU TRANG CHƯƠNG TRÌNH (được render sẵn trong HTML) =====
   Khối này nằm thẳng trong file .html của từng chương trình, không do JS vẽ,
   để Google đọc được ngay ở lần bò đầu tiên. */
.seo-hero{max-width:1180px;margin:0 auto;padding:20px 20px 4px}
.seo-hero h1{font-size:clamp(26px,3.6vw,38px);letter-spacing:-.8px;margin:.1em 0 .25em}
.seo-hero .lead{font-size:clamp(16px,1.7vw,18.5px);color:#48536a;max-width:720px}
.seo-hero .hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin:20px 0 4px}
.seo-hero .hero-cta .btn{padding:12px 24px;font-size:15.5px}
/* .hero-cta đã có sẵn từ khối #hero8020 — khối đó nền NAVY nên nút phụ được đặt
   chữ trắng viền trắng. Khối mở đầu mới này nền SÁNG, dùng lại tên lớp là thừa
   hưởng luôn màu trắng đó -> nút "Xem học phí" thành trắng trên nền sáng, nhìn
   như biến mất. Trả lại màu navy cho đúng nền. */
.seo-hero .hero-cta .btn.ghost{border-color:var(--navy);color:var(--navy);background:#fff}
.seo-hero .hero-cta .btn.ghost:hover{background:#f2f5fb;border-color:var(--pink);color:var(--pink)}
.seo-facts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.seo-facts li{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:7px 15px;font-size:13.5px;color:var(--navy);font-weight:600}