:root {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F4F6F9;
    --text: #0E1A2B;
    --text-2: #5B6B80;
    --line: #E2E7EE;
    /* DẢI = những mảng trước đây nền navy (đầu trang, kết quả, đăng ký, chân
       trang). Nay tất cả cùng nền trắng: navy chỉ còn là màu CHỮ, vàng đậm là
       màu nhấn. Hai tông xám rất nhạt dưới đây là cách duy nhất để tách lớp mà
       không quay lại nền tối. */
    --dai: #FFFFFF;
    --dai-2: #F5F7FA;
    --dai-vien: #E2E7EE;
    --dai-chu: #0E1A2B;
    --dai-chu-2: #5B6B80;
    --gold: #8E6118;
    --vang-dam: #8E6118;
    --ivy: #17694F;
    /* Màu báo lỗi ô nhập. Chọn đỏ chứ không dùng lại vàng đậm --vang-dam: vàng
       đậm là màu NHẤN của cả trang (chữ nghiêng ở tiêu đề, nút chính), nên tô
       lỗi bằng nó thì ô sai trông hệt mọi thứ khác đang được nhấn mạnh. */
    --do-loi: #B3261E;
    --do-loi-nen: #FDF4F3;
    --shadow: 0 1px 2px rgba(14,26,43,.06), 0 12px 32px -12px rgba(14,26,43,.18);
    color-scheme: light;
    --spine: 1120px;
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  }
  /* MỘT BẢNG MÀU DUY NHẤT — TRANG LUÔN NỀN TRẮNG.
     Cố ý không khai bảng màu tối theo prefers-color-scheme: đây là trang giới
     thiệu, phụ huynh mở trên máy đặt chế độ tối vẫn phải thấy đúng bộ nhận diện
     mà trung tâm in ra tờ rơi và chụp ảnh quảng cáo. Hai dải navy (kết quả và
     đăng ký) là điểm nhấn cố định, không phải nền trang. */

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .num { font-family: var(--serif); font-weight: 500; text-wrap: balance; margin: 0; }
  p { margin: 0; max-width: 66ch; }
  a { color: inherit; }
  .spine { max-width: var(--spine); margin: 0 auto; padding: 0 24px; }
  .eyebrow {
    font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-2); margin: 0;
  }
  /* chỗ trung tâm phải điền thông tin thật */
  .fill {
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
    opacity: .92;
    cursor: help;
  }

  /* ---------- thanh điều hướng ---------- */
  .nav {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--dai) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dai-vien);
    color: var(--dai-chu);
  }
  .nav-in { display: flex; align-items: center; gap: 28px; height: 62px; }
  .brand { display: flex; align-items: baseline; gap: 9px; font-family: var(--serif); font-size: 21px; letter-spacing: .01em; }
  .brand b { font-weight: 600; }
  .brand span { font-size: 10.5px; font-family: var(--sans); font-weight: 700; letter-spacing: .18em; color: var(--vang-dam); text-transform: uppercase; }
  .nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
  .nav-links a { color: var(--dai-chu-2); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--dai-chu); border-bottom-color: var(--vang-dam); }
  .nav .btn-sm {
    font-family: var(--sans); font-size: 13.5px; font-weight: 600;
    background: var(--vang-dam); color: #FFFFFF; border: 0; border-radius: 3px;
    padding: 9px 15px; text-decoration: none; white-space: nowrap;
  }
  .nav .btn-sm:hover { background: #75500F; }

  /* ---------- hero ---------- */
  .hero { background: var(--dai); color: var(--dai-chu); padding: 74px 0 0; position: relative; overflow: hidden; }
  .hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 56px; align-items: start; }
  .hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.08; letter-spacing: -.015em; margin: 18px 0 0; }
  .hero h1 em { font-style: italic; color: var(--vang-dam); }
  .hero-lede { margin-top: 20px; font-size: 17.5px; color: var(--dai-chu-2); max-width: 52ch; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
  .btn {
    font-family: var(--sans); font-size: 15px; font-weight: 600; text-decoration: none;
    border: 0; border-radius: 3px; padding: 14px 22px; cursor: pointer; display: inline-block;
    background: var(--vang-dam); color: #FFFFFF;
    transition: transform .14s ease, box-shadow .14s ease;
  }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(142,97,24,.45); }
  .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
  .btn-ghost:hover { border-color: var(--vang-dam); color: var(--vang-dam); box-shadow: none; }
  .hero-note { font-size: 13px; color: var(--dai-chu-2); margin-top: 16px; }

  /* đếm ngược tới mốc thi thật */
  .clock { border: 1px solid var(--dai-vien); background: var(--dai-2); border-radius: 4px; padding: 22px; }
  .clock h2 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--dai-chu-2); }
  .exam { padding: 16px 0; border-bottom: 1px solid var(--dai-vien); }
  .exam:last-of-type { border-bottom: 0; padding-bottom: 4px; }
  .exam-name { font-family: var(--serif); font-size: 19px; color: var(--dai-chu); }
  .exam-date { font-size: 12.5px; color: var(--dai-chu-2); margin-top: 2px; }
  .exam-count { display: flex; align-items: baseline; gap: 7px; margin-top: 9px; }
  .exam-count .d { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--vang-dam); font-variant-numeric: tabular-nums; }
  .exam-count .u { font-size: 12.5px; color: var(--dai-chu-2); letter-spacing: .04em; }
  .clock-foot { font-size: 11.5px; color: var(--dai-chu-2); margin-top: 14px; line-height: 1.5; }

  .hero-strip { margin-top: 60px; border-top: 1px solid var(--dai-vien); display: grid; grid-template-columns: repeat(4, 1fr); }
  .hero-strip div { padding: 20px 22px 24px; border-right: 1px solid var(--dai-vien); }
  .hero-strip div:last-child { border-right: 0; }
  .hero-strip .k { font-family: var(--serif); font-size: 27px; color: var(--dai-chu); font-variant-numeric: tabular-nums; }
  .hero-strip .l { font-size: 12.5px; color: var(--dai-chu-2); margin-top: 2px; }

  /* ---------- dải kết quả ---------- */
  .result { background: var(--dai-2); color: var(--dai-chu); border-top: 1px solid var(--dai-vien); padding: 66px 0; }
  .result-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 54px; align-items: center; }
  .headline-num { font-family: var(--serif); font-size: clamp(76px, 12vw, 132px); line-height: .95; margin-top: 20px; color: var(--vang-dam); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .headline-sub { font-family: var(--serif); font-size: clamp(21px, 2.6vw, 29px); line-height: 1.28; margin-top: 10px; color: var(--dai-chu); max-width: 24ch; }
  .result-source { font-size: 12.5px; color: var(--dai-chu-2); margin-top: 18px; max-width: 40ch; }
  .rows { display: grid; gap: 0; }
  .row {
    display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
    padding: 15px 0; border-bottom: 1px solid var(--dai-vien);
  }
  .row:first-child { border-top: 1px solid var(--dai-vien); }
  .row-l { font-size: 15px; color: var(--dai-chu); }
  .row-l small { display: block; font-size: 12.5px; color: var(--dai-chu-2); }
  .row-v { font-family: var(--serif); font-size: 26px; color: var(--vang-dam); font-variant-numeric: tabular-nums; }

  /* ---------- khối nội dung chung ---------- */
  .sec { padding: 78px 0; }
  .sec-head { max-width: 62ch; }
  .sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -.012em; margin-top: 12px; }
  .sec-head p { margin-top: 14px; color: var(--text-2); font-size: 16.5px; }

  /* đề thi thật đòi gì — hai cột đối chiếu */
  .exam-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
  .exam-card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 28px; box-shadow: var(--shadow); }
  .sec-trang { background: var(--bg); }
  .exam-card h3 { font-size: 23px; }
  .exam-card .spec { font-size: 12.5px; color: var(--text-2); margin-top: 4px; letter-spacing: .02em; }
  .exam-card ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 13px; }
  .exam-card li { display: grid; grid-template-columns: 68px 1fr; gap: 14px; font-size: 14.5px; align-items: start; }
  .exam-card li b { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding-top: 3px; }

  /* lộ trình — thanh thời gian */
  .rail { margin-top: 42px; overflow-x: auto; padding-bottom: 6px; }
  .rail-in { display: grid; grid-template-columns: repeat(4, minmax(238px, 1fr)); gap: 0; min-width: 720px; }
  .stage { padding: 0 22px 4px 0; border-top: 3px solid var(--line); position: relative; }
  .stage:nth-child(1) { border-top-color: var(--gold); }
  .stage:nth-child(2) { border-top-color: color-mix(in srgb, var(--gold) 72%, var(--line)); }
  .stage:nth-child(3) { border-top-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
  .stage-when { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 16px; }
  .stage h3 { font-size: 19px; margin-top: 7px; }
  .stage p { font-size: 14.5px; color: var(--text-2); margin-top: 8px; max-width: 34ch; }
  .stage ul { margin: 12px 0 0; padding-left: 18px; font-size: 14px; color: var(--text-2); display: grid; gap: 6px; }

  /* cách học — chuỗi 4 bước */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 40px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
  .step { background: var(--surface); padding: 26px 22px 28px; }
  .step-n { font-family: var(--serif); font-size: 15px; color: var(--gold); letter-spacing: .06em; }
  .step h3 { font-size: 18px; margin-top: 8px; }
  .step p { font-size: 14px; color: var(--text-2); margin-top: 8px; }

  /* offline / online */
  .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
  .mode { border: 1px solid var(--line); background: var(--surface); border-radius: 4px; padding: 28px; }
  .mode.pick { border-color: var(--gold); box-shadow: var(--shadow); }
  .mode-tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
  .mode h3 { font-size: 22px; margin-top: 8px; }
  .mode dl { margin: 18px 0 0; display: grid; gap: 12px; }
  .mode .pair { display: grid; grid-template-columns: 116px 1fr; gap: 14px; font-size: 14.5px; }
  .mode dt { color: var(--text-2); font-size: 13px; }
  .mode dd { margin: 0; }

  /* cam kết */
  .pledge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 38px; }
  .pledge-item { border-left: 2px solid var(--ivy); padding: 4px 0 4px 20px; }
  .pledge-item h3 { font-size: 18px; }
  .pledge-item p { font-size: 14.5px; color: var(--text-2); margin-top: 7px; }

  /* phụ huynh nói gì */
  .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 38px; }
  .quote { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
  .quote blockquote { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.5; font-style: italic; }
  .quote footer { font-size: 13px; color: var(--text-2); margin-top: auto; }
  .sample-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--line); border-radius: 2px; padding: 3px 8px; }

  /* FAQ */
  .faq { margin-top: 36px; border-top: 1px solid var(--line); max-width: 78ch; }
  details { border-bottom: 1px solid var(--line); }
  summary { cursor: pointer; padding: 18px 0; font-family: var(--serif); font-size: 19px; list-style: none; display: flex; gap: 16px; align-items: baseline; }
  summary::-webkit-details-marker { display: none; }
  summary::before { content: "+"; color: var(--gold); font-family: var(--sans); font-weight: 600; }
  details[open] summary::before { content: "–"; }
  details p { padding: 0 0 20px 26px; color: var(--text-2); font-size: 15px; }

  /* form đăng ký */
  .signup { background: var(--dai); color: var(--dai-chu); padding: 78px 0; }
  .signup-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 54px; align-items: start; }
  .signup h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.14; }
  .signup .lede { color: var(--dai-chu-2); margin-top: 14px; font-size: 16.5px; }
  .checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; font-size: 14.5px; color: var(--dai-chu); }
  .checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
  .checks span { color: var(--vang-dam); }
  form { background: var(--dai-2); border: 1px solid var(--dai-vien); border-radius: 4px; padding: 28px; }
  .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .field { display: grid; gap: 6px; }
  .field.wide { grid-column: 1 / -1; }
  label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dai-chu-2); }
  input, select, textarea {
    font-family: var(--sans); font-size: 15px; color: var(--dai-chu);
    background: var(--dai); border: 1px solid var(--dai-vien); border-radius: 3px;
    padding: 11px 12px; width: 100%;
  }
  textarea { resize: vertical; min-height: 74px; }
  input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible, button:focus-visible {
    outline: 2px solid var(--vang-dam); outline-offset: 2px;
  }
  select option { color: #10203A; background: #fff; }
  .form-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 20px; }
  .form-note { font-size: 12px; color: var(--dai-chu-2); max-width: 42ch; }
  .msg { margin-top: 16px; font-size: 14.5px; padding: 13px 15px; border-radius: 3px; display: none; }
  .msg.ok { display: block; background: #EAF6F0; border: 1px solid #B7DECB; color: #10553C; }
  .msg.err { display: block; background: #FBF3E3; border: 1px solid #E4CE9C; color: #7A5214; }

  footer.site { background: var(--dai); color: var(--dai-chu-2); border-top: 1px solid var(--dai-vien); padding: 40px 0 52px; font-size: 13.5px; }
  .foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
  .foot-grid h3 { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dai-chu); }
  .foot-grid ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
  .legend { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--dai-vien); font-size: 12.5px; line-height: 1.6; }

  @media (max-width: 940px) {
    .hero-grid, .result-grid, .signup-grid, .exam-cols, .modes { grid-template-columns: 1fr; gap: 34px; }
    .hero-strip { grid-template-columns: 1fr 1fr; }
    .hero-strip div:nth-child(2) { border-right: 0; }
    .hero-strip div:nth-child(1), .hero-strip div:nth-child(2) { border-bottom: 1px solid var(--dai-vien); }
    .steps, .pledge, .quotes { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .fields { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

/* lỗi từng ô của biểu mẫu đăng ký */
/* Ô nhập sai phải NHÌN THẤY được là sai.
   Trước đây lỗi chỉ là một dòng chữ nhỏ màu vàng đậm bên dưới ô, còn ô nhập
   giữ nguyên viền xám như mọi ô khác — trong khi dòng thông báo phía trên lại
   bảo "kiểm tra lại các ô được đánh dấu". Không ô nào được đánh dấu cả, nên
   người điền phải dò từng ô một. Trên điện thoại, ô sai còn nằm ngoài màn hình. */
.field.co-loi label { color: var(--do-loi); }
.field.co-loi input,
.field.co-loi select,
.field.co-loi textarea {
  border-color: var(--do-loi);
  box-shadow: inset 0 0 0 1px var(--do-loi);   /* dày lên mà không đội layout */
  background: var(--do-loi-nen);
}
.loi-o { font-size: 13px; font-weight: 600; color: var(--do-loi); }
.loi-o::before { content: "▲ "; font-size: 10px; vertical-align: 1px; }
.msg.ok, .msg.err { margin-top: 0; margin-bottom: 16px; }

/* ---------- logo ---------- */
.brand-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
/* Huy hiệu rộng hơn cao (tỷ lệ ~1,41). Cố định CHIỀU CAO và để chiều rộng tự
   theo tỷ lệ; ép cả hai chiều như dấu vuông cũ sẽ bóp méo logo. Bỏ bo góc vì
   logo đã có viền tròn riêng và nền trong suốt. */
.brand-logo img { width: auto; height: 40px; display: block; }
.brand-logo .brand { gap: 8px; }
.nav .brand { color: var(--dai-chu); }

/* ---------- đầu trang phụ (học phí, liên hệ) ---------- */
.trang-dau { background: var(--dai); color: var(--dai-chu); padding: 62px 0 56px; border-bottom: 1px solid var(--line); }
.trang-dau h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.1; letter-spacing: -.015em; margin-top: 14px; }
.trang-dau h1 em { font-style: italic; color: var(--vang-dam); }
.trang-dau p { color: var(--dai-chu-2); margin-top: 16px; font-size: 17px; }
.trang-dau .eyebrow { color: var(--dai-chu-2); }

/* ---------- bảng học phí ---------- */
.goi-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 24px; margin-top: 40px; align-items: start; }
.goi {
  background: var(--surface); border: 1px solid var(--line); border-radius: 5px;
  padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 16px;
}
.goi.pick { border-color: var(--gold); box-shadow: var(--shadow); }
.goi-nhan { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.goi h2 { font-size: 23px; }
.goi-doi-tuong { font-size: 14px; color: var(--text-2); }
.goi-gia { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.goi-gia .so { font-family: var(--serif); font-size: 33px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.goi-gia .thang { font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.goi-thong-so { display: grid; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.goi ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px; }
.goi ul li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; }
.goi ul li span:first-child { color: var(--ivy); font-weight: 700; }
.goi-ghi-chu { font-size: 12.5px; color: var(--text-2); }
.goi .btn { margin-top: auto; text-align: center; }

.chinh-sach { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; margin-top: 38px; }
.chinh-sach-item { border-left: 2px solid var(--gold); padding: 4px 0 4px 20px; }
.chinh-sach-item h3 { font-size: 18px; }
.chinh-sach-item p { font-size: 14.5px; color: var(--text-2); margin-top: 7px; }

/* ---------- trang liên hệ ---------- */
.lien-he-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 48px; align-items: start; }
.kenh { display: grid; gap: 0; border-top: 1px solid var(--line); }
.kenh-item { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.kenh-item dt { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.kenh-item dd { margin: 0; font-size: 16px; }
.kenh-item dd a { text-decoration: none; border-bottom: 1px solid var(--gold); }
.co-so-list { display: grid; gap: 22px; margin-top: 38px; }
.co-so { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 24px 26px; }
.co-so h3 { font-size: 20px; }
.co-so .dia { font-size: 15px; color: var(--text-2); margin-top: 6px; }
.co-so ul { margin: 14px 0 0; padding-left: 18px; font-size: 14px; color: var(--text-2); display: grid; gap: 6px; }
.co-so .ban-do { display: inline-block; margin-top: 14px; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--gold); }

@media (max-width: 940px) {
  .lien-he-grid { grid-template-columns: 1fr; gap: 34px; }
  .kenh-item { grid-template-columns: 1fr; gap: 2px; }
}

/* Máy màn hình rất hẹp: thanh trên bị tràn vì logo + tên + nút cùng một hàng.
   Thu gap và nút lại, và bỏ chữ ENGLISH nhỏ để tên trung tâm vẫn đọc được. */
@media (max-width: 620px) {
  .nav-in { gap: 12px; }
  .nav .btn-sm { font-size: 12.5px; padding: 8px 12px; }
  .brand { font-size: 19px; }
  .brand span { display: none; }
  .trang-dau { padding: 44px 0 40px; }
  .goi-list { gap: 18px; }
}

/* ---------- bảng học phí thật ---------- */
.khoi { margin-top: 36px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); overflow: hidden; }
.khoi-noi-bat { border-color: var(--gold); box-shadow: var(--shadow); }
.khoi-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 26px 18px; border-bottom: 1px solid var(--line); }
.khoi-dau h3 { font-size: 21px; }
.khoi-dau .ct { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-left: 6px; white-space: nowrap; }
.khoi-gv { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.khoi-nhan { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 2px; padding: 4px 9px; }
.bang-wrap { overflow-x: auto; }
.bang-phi { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.bang-phi th, .bang-phi td { padding: 14px 26px; text-align: left; border-bottom: 1px solid var(--line); }
.bang-phi tbody tr:last-child th, .bang-phi tbody tr:last-child td { border-bottom: 0; }
.bang-phi thead th { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding-top: 13px; padding-bottom: 13px; }
.bang-phi tbody th { font-weight: 600; }
.bang-phi .giua { text-align: center; }
.bang-phi .phai { text-align: right; }
.bang-phi .gia { font-family: var(--serif); font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bang-phi .moi-buoi { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.bang-phi tbody tr:hover { background: var(--surface-2); }
.khoi-ghi-chu { font-size: 13px; color: var(--text-2); padding: 14px 26px 18px; }
.phi-chu { margin-top: 30px; font-size: 13.5px; color: var(--text-2); max-width: 78ch; }

.buoi-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 38px; }
.buoi-nhom { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 24px 26px 20px; }
.buoi-nhom h3 { font-size: 19px; }
.buoi-nhom dl { margin: 16px 0 0; display: grid; gap: 0; }
.buoi-dong { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.buoi-nhom .buoi-dong:last-child { border-bottom: 0; padding-bottom: 2px; }
.buoi-dong dt { font-size: 14.5px; color: var(--text-2); }
.buoi-dong dd { margin: 0; font-family: var(--serif); font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.buoi-dong .tl { font-family: var(--sans); font-size: 12px; color: var(--text-2); margin-left: 6px; }

@media (max-width: 620px) {
  .khoi-dau { flex-direction: column; padding: 18px 18px 14px; }
  .bang-phi th, .bang-phi td { padding: 12px 18px; }
  .khoi-ghi-chu { padding: 12px 18px 16px; }
}

/* Ba cột số gom về bên phải, cột tên khoá nhận phần còn lại: nếu để bảng tự
   chia đều, "học phí" và "mỗi buổi" dạt ra hai đầu và mắt phải đi rất xa mới
   ghép được tên khoá với giá của nó. */
.bang-phi th:first-child, .bang-phi td:first-child { width: auto; }
.bang-phi th:nth-child(2), .bang-phi td:nth-child(2) { width: 110px; }
.bang-phi th:nth-child(3), .bang-phi td:nth-child(3) { width: 190px; }
.bang-phi th:nth-child(4), .bang-phi td:nth-child(4) { width: 120px; }

/* ---------- dải phổ điểm ----------
   Ba mốc điểm nằm trên một trục có tỷ lệ thật, không phải ba con số rời. Nhờ
   vậy người xem thấy được điều quan trọng nhất: khoảng trống bên dưới mốc thấp
   nhất — vùng KHÔNG có học viên nào. Vị trí % do models.dai_diem() tính, ở đây
   chỉ vẽ.
   Nhãn "thấp nhất" và "nhiều nhất" đặt phía trên trục, "cao nhất" cũng vậy;
   riêng mốc 10 nằm sát mép phải nên phải dịch nhãn vào trong, nếu không nó bị
   cắt mất một nửa. */
.pho-diem { margin: 26px 0 0; padding: 0; }
.pho-diem figcaption {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dai-chu-2); margin-bottom: 84px;
}
.pd-truc { position: relative; height: 10px; }
.pd-day {
  position: absolute; inset: 0; border-radius: 99px;
  background: var(--dai-2); border: 1px solid var(--dai-vien);
}
.pd-dai {
  position: absolute; top: 0; bottom: 0; border-radius: 99px;
  background: linear-gradient(90deg, #C79A4A, var(--gold));
}
.pd-moc { position: absolute; top: -6px; width: 0; }
.pd-moc::after {
  content: ''; position: absolute; left: -1.5px; top: 0; width: 3px; height: 22px;
  border-radius: 2px; background: var(--dai-chu);
}
.pd-nhan {
  position: absolute; bottom: 26px; left: 0; transform: translateX(-50%);
  font-family: var(--serif); font-size: 27px; line-height: 1; color: var(--dai-chu);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pd-nhan small {
  display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dai-chu-2); margin-top: 5px;
}
.pd-thap .pd-nhan, .pd-thap::after { color: var(--gold); }
.pd-thap::after { background: var(--gold); }
.pd-thap .pd-nhan { color: var(--gold); }
/* Mốc cuối nằm đúng mép phải của trục. Nhãn mặc định căn giữa theo mốc, nên ở
   đây một nửa nhãn sẽ tràn ra ngoài khung — dán mép phải nhãn vào mép phải
   trục. Mốc đầu trục cũng vậy nhưng ngược lại. */
.pd-cao .pd-nhan { left: auto; right: 0; transform: none; }
.pd-vach { position: relative; height: 18px; margin-top: 9px; }
.pd-vach span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 11px; color: var(--dai-chu-2); font-variant-numeric: tabular-nums;
}
.pd-vach span:first-child { transform: none; }
.pd-vach span:last-child { transform: translateX(-100%); }

@media (max-width: 620px) {
  .pd-nhan { font-size: 20px; }
  .pd-nhan small { font-size: 9.5px; letter-spacing: .06em; }
  .pho-diem figcaption { margin-bottom: 66px; }
}

/* ---------- ô ảnh ----------
   Ảnh dùng object-fit: cover trong khung có tỷ lệ cố định. Không làm vậy thì
   ảnh trung tâm tải lên với tỷ lệ bất kỳ (ảnh dọc chụp điện thoại chẳng hạn)
   sẽ đẩy cả khối bên dưới xuống mỗi khi đổi ảnh. */
.anh { margin: 0; position: relative; overflow: hidden; background: var(--surface-2); }
.anh img { display: block; width: 100%; height: 100%; object-fit: cover; }
.anh-bang { aspect-ratio: 21 / 8; }
.anh-the { aspect-ratio: 16 / 10; border-radius: 4px 4px 0 0; }
.anh-nhan {
  position: absolute; bottom: 8px; right: 8px;
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; background: rgba(14,26,43,.72);
  padding: 4px 8px; border-radius: 2px; backdrop-filter: blur(2px);
}
.dai-anh { max-width: var(--spine); margin: 0 auto; padding: 0 24px 8px; }
.dai-anh .anh { border-radius: 5px; }

/* Ảnh dán sát mép trên thẻ nên phải kéo ngược ra khỏi phần đệm của thẻ. Số âm
   phải khớp ĐÚNG padding từng loại thẻ (.mode 28px, .co-so 24px 26px), lệch 2px
   là hở một vạch trắng ở hai bên ảnh. */
.mode .anh-the { margin: -28px -28px 20px; border-radius: 3px 3px 0 0; }
.co-so .anh-the { margin: -24px -26px 18px; border-radius: 4px 4px 0 0; }

@media (max-width: 620px) {
  .anh-bang { aspect-ratio: 3 / 2; }
  .dai-anh { padding: 0 18px 6px; }
}