/* MK_TUNE_v1 — chỉnh sau khi lên site thật, ĐO theo chuẩn hệ Content Hub.
 *
 * mk.css là bản mockup nguyên văn (khung 270px). Trên máy thật khung được phóng
 * ×1,444 (390/270) nên vài kích thước của mockup nở ra quá khổ. File này đè lại
 * đúng những chỗ đó, không sửa mk.css.
 *
 * Số đo tham chiếu — đo thật ngày 22/08/2026 ở bề rộng 390px:
 *   mamnon.com.vn   topbar 56px · bottom-nav 60px · drawer 332px
 *   quoctich.com    topbar 56px · bottom-nav 57px
 *   ngonngu.com     topbar 56px · bottom-nav 60px
 *
 * Trước khi chỉnh, hai site này ra: topbar 57,8px (đạt) · bottom-nav 78px (dư 20px)
 * · drawer 316px (hẹp 16px). Quy đổi ngược về hệ 270px: chia cho 1,444.
 */

/* ── Thanh dưới: 54px mockup → 78px thật. Hạ còn 40px → 57,8px, khớp chuẩn hệ. ── */
.bn{height:40px}
.bn a{gap:2px}
.bn svg{width:16px;height:16px}
.bn span{font-size:7.6px}

/* ── Thanh trên: 40px → 57,8px, chỉ dư 1,8px so với chuẩn 56px. Hạ nhẹ. ── */
.tb{height:38.8px}

/* ── Drawer: 81% ≈ 316px, chuẩn hệ 332px. ── */
.dr{width:85%}

/* Desktop tự có kích thước riêng trong mk-desktop.css — không để bản chỉnh này
   đè lên, nếu không thanh trên desktop lại bị bóp về 38,8px. */
body.rong .tb{height:auto}
body.rong .bn{display:none}

/* Đuôi tên miền trong tên site — nhạt hơn một bậc để "Grenada" bật lên. */
.tb-tld{opacity:.62;font-weight:600}
.g .tb-tld{color:var(--g-gold)}
.s .tb-tld{color:var(--s-green)}

/* ── Cấu trúc tiêu đề đúng chuẩn: mỗi trang một H1 ──
   Mockup dùng <div class="glab"> và <h3> cho hero nên cả trang không có tiêu đề
   cấp nào. Đổi sang h1/h2 mà GIỮ NGUYÊN lớp, nên hình dạng không đổi một pixel —
   chỉ cần khử margin mặc định của trình duyệt cho thẻ mới. */
/* Nhãn mục: giữ y nguyên .glab/.slab, chỉ khử margin mặc định của h1/h2. */
h1.glab, h2.glab { margin: 0 0 8px }
h1.slab, h2.slab { margin: 0 0 8px }

/* Hero: chép đúng thuộc tính của .gh h3 / .sh h3 trong mk.css sang h1. */
.gh h1 { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.2; color: #fff; margin: 0 }
.sh h1 { font-size: 17px; line-height: 1.2; font-weight: 800; color: #fff; margin: 7px 0 5px; letter-spacing: -.01em }

/* Tiêu đề bài viết: chép từ .gart h3 / .sart h3. */
.gart h1 { font-family: var(--serif); font-weight: 600; font-size: 15.5px; line-height: 1.24; margin: 8px 0; color: var(--g-cacao) }
.sart h1 { font-size: 14.5px; line-height: 1.26; font-weight: 800; margin: 8px 0; color: var(--s-deep) }

/* Thân bài sau khi hạ cấp: h2/h3/h4/h5 phải có cỡ giảm dần, không bị trình duyệt
   trả về cỡ mặc định (h5 nhỏ hơn chữ thường). */
.gart .in h5, .sart .in h5 { font-size: 10.4px; line-height: 1.34; font-weight: 800; margin: 12px 0 0 }

/* ── Nền video ở hero (VIDEO_NEN_v2) ──
   Ba lớp rạch ròi: .gh-nen (ảnh + video) → .ov (phủ tối) → .tx (chữ).
   TUYỆT ĐỐI không đụng vào position của .ov/.tx — mockup đã đặt absolute,
   ép relative là hero vỡ. Chỉ nâng z-index. */
.gh-nen{position:absolute;inset:0;z-index:0;background:#1B120C;overflow:hidden}
.gh-anh{position:absolute;inset:0;background-size:cover;background-position:center}
.gh-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
        opacity:0;transition:opacity 1s ease;pointer-events:none}
.gh-vid.hien{opacity:1}
.gh .ov{z-index:1}
.gh .tx{z-index:2}
/* Có video thì phủ tối dày thêm để chữ trắng luôn đọc rõ dù khung hình nào đang chạy. */
.gh:has(.gh-vid.hien) .ov{background:linear-gradient(180deg,rgba(20,14,10,.5) 0%,rgba(20,14,10,.42) 42%,rgba(20,14,10,.9) 100%)}
@media (prefers-reduced-motion: reduce){.gh-vid{display:none}}

/* ── Biểu mẫu công cụ (CONGCU_FORM_v1, 23/08) ──
   Trước đây ô chọn và ô số dùng kiểu mặc định của trình duyệt: chữ 13px trong
   bảng chữ 8,2px, nút bấm màu xanh hệ thống — nhìn "rất kỳ cục" đúng như anh
   Thiện nói. Ở đây kéo mọi điều khiển về đúng bảng màu và cỡ chữ của mockup. */
.cmp select,
.cmp input[type=number],
.cmp input[type=date],
.cmp input[type=text]{
  width:100%;max-width:100%;box-sizing:border-box;
  /* ⚠️ PHẢI dùng --o-nhap, đừng đặt lại số cứng. Luật này (.cmp + bộ chọn thuộc
     tính) mạnh hơn `form input{font-size:var(--o-nhap,16px)}` ở dưới nên nó
     thắng, mà 8.6px nhân zoom 1,85 chỉ ra 15,93px — thiếu 0,07px so với ngưỡng
     16px, đủ để Safari trên iPhone phóng cả màn hình mỗi lần chạm vào ô nhập.
     Đo thật 25/08/2026. */
  font:inherit;font-size:var(--o-nhap,16px);line-height:1.3;color:var(--g-cacao);
  background:#FDFBF6;border:1px solid #E2D7C2;border-radius:5px;padding:5px 6px;
  -webkit-appearance:none;appearance:none}
.cmp select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237A6C5D' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 6px center;background-size:8px;padding-right:18px}
.cmp select:focus,.cmp input:focus{outline:none;border-color:var(--g-spice);box-shadow:0 0 0 2px rgba(176,40,26,.12)}
/* Ô số và ô đánh dấu thì không cần kéo hết chiều ngang. */
.cmp input[type=number]{width:52px;text-align:center}
.cmp input[type=checkbox]{width:15px;height:15px;accent-color:var(--g-spice);margin:0}
/* Hàng có điều khiển cần cao hơn hàng chữ, nếu không ô chọn chạm sát viền. */
.cmp .row:has(select),.cmp .row:has(input){align-items:center}
.cmp .row:has(select) div,.cmp .row:has(input) div{padding-top:6px;padding-bottom:6px}
/* Nút gửi: dùng đúng .cta của mockup, chỉ bổ sung phần <button> không có sẵn. */
button.cta{border:0;cursor:pointer;font-family:inherit}
/* Nút gửi của biểu mẫu: mockup chỉ định nghĩa .cta BÊN TRONG hero (.gh .cta),
   nên nút trong công cụ rơi về kiểu mặc định của trình duyệt — chữ 13px giữa
   trang chữ 9px, nhìn to lộc ngộc. Chép lại đúng kiểu .cta cho thẻ <button>. */
.gsec button.cta,.ssec button.cta,form button.cta{
  display:inline-block;border:0;cursor:pointer;font-family:inherit;
  background:var(--g-spice,#B0281A);color:#fff;font-size:9.4px;font-weight:700;
  padding:9px 16px;border-radius:5px;letter-spacing:.01em}
.gsec button.cta:active,form button.cta:active{transform:translateY(1px)}

/* ── Trang tĩnh / bài nhập từ WordPress (WP_TYPO_v1, 23/08) ──
   🔴 Hai lỗi cùng một gốc: mockup chỉ đặt cỡ chữ cho <p>, <li>, <h2..h4>.
   Bài WP cũ lại nhét chữ vào <div>/<span> trần (khối GutenBee), nên phần đó
   rơi về cỡ mặc định 16px của trình duyệt — nhân thêm zoom 1,44 thành 23px,
   to hơn cả tiêu đề. Đặt cỡ nền ngay trên .in để mọi thẻ con đều thừa hưởng. */
.gart .in,.sart .in{font-size:10.4px;line-height:1.75}
.gart .in div,.sart .in div,.gart .in span,.sart .in span{font-size:inherit;line-height:inherit}
/* .meta có quy tắc riêng ở mk.css, nhưng .in đứng sau nên phải giành lại. */
.gart .in .meta,.sart .in .meta{font-size:7.8px}
/* <svg> KHÔNG có width/height thì trình duyệt cho tràn 100% chiều ngang — đó là
   cái dấu tích to bằng cả màn hình ở /about/. Ép về cỡ một biểu tượng. */
.gart .in svg,.sart .in svg{width:1.5em;height:1.5em;vertical-align:-.28em;flex:0 0 auto}
/* Ảnh 1×1 chống theo dõi và ảnh hỏng không được chiếm chỗ. */
.gart .in img:not([src]),.sart .in img:not([src]),
.gart .in img[src^="data:image/gif"],.sart .in img[src^="data:image/gif"]{display:none}
/* Khối GutenBee canh giữa vẫn giữ ý đồ canh giữa. */
.gart .in .align-center,.sart .in .align-center{text-align:center}

/* ── Dải số liệu hero: gọn lại, trước cao gần bằng nửa hero (anh Thiện: "phí đất") ── */
.gstat div{padding:6px 4px}
.gstat .v{font-size:13px}
.gstat .t{font-size:6.4px;margin-top:3px;line-height:1.25}

/* ── Dải "Bài viết mới nhất" ở trang chủ ──
   Thẻ tràn ngang làm ba mục kề nhau ra ba kiểu khác nhau. Dùng đúng thẻ ngang
   nhỏ (ảnh 88px bên trái) cho khớp mục "Khách hỏi nhiều nhất" ngay phía trên. */
.lst.tin{gap:0}
/* Ảnh 62px = ĐÚNG bằng .gq-anh .qa của mục "Khách hỏi nhiều nhất" ngay phía trên.
   Để 82px thì hai mục kề nhau lệch cỡ thấy rõ (anh Thiện: "vẫn to"). */
.lst.tin .lcard{border:0;border-radius:0;background:transparent;
                border-bottom:1px solid #E9E1D2;padding:9px 0;
                grid-template-columns:62px 1fr;gap:9px;align-items:center}
.lst.tin .lcard:last-child{border-bottom:0}
.lst.tin .lcard .anh{border-radius:8px;aspect-ratio:4/3}
.lst.tin .lcard .tx{padding:0;gap:2px}
.lst.tin .lcard h4{font-size:9.6px;font-weight:600;-webkit-line-clamp:3}
.lst.tin .lcard .mt{margin-top:2px}
.lst.tin .lcard p{display:none}

/* ── Ô tra cứu một dòng (công cụ miễn visa) ──
   Ô nhập và nút để trần thì trình duyệt vẽ kiểu hệ điều hành: nút xanh iOS,
   ô bo tròn xám — lạc hẳn khỏi site. */
.ftra{margin-top:10px}
.ftra label{display:block;font-size:8px;font-weight:800;letter-spacing:.06em;
            text-transform:uppercase;color:#8A7B6B;margin-bottom:5px}
.ftra .hang{display:flex;gap:6px}
.ftra input{flex:1;min-width:0;font:inherit;font-size:9.4px;color:var(--g-cacao);
            background:#FDFBF6;border:1px solid #E2D7C2;border-radius:6px;padding:8px 10px;
            -webkit-appearance:none;appearance:none}
.ftra input:focus{outline:none;border-color:var(--g-spice);box-shadow:0 0 0 2px rgba(176,40,26,.12)}
.ftra button.cta{flex:0 0 auto;padding:8px 16px}
/* Dòng meta của thẻ: nhãn chuyên mục dài ("CHÍNH SÁCH & CẬP NHẬT") đẩy ngày ra
   ngoài khung, hiện ra "22/0I" cụt. Cho nhãn co lại, ngày và phút giữ nguyên. */
.lcard .mt .chip{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lcard .mt span:not(.chip){flex:0 0 auto}

/* Ảnh minh hoạ trong trang biểu mẫu (buổi cà phê, liên hệ). */
.anh-hop{margin:10px 0 0}
.anh-hop img{width:100%;height:auto;border-radius:10px;display:block}
.anh-hop figcaption{font-size:7.6px;opacity:.7;margin-top:5px;text-align:center}

/* Nền video cho hero khung .sh (Global Star) — cùng ba lớp như .gh. */
.sh .ov{z-index:1}
.sh .tx{z-index:2}
.sh:has(.gh-vid.hien) .ov{background:linear-gradient(180deg,rgba(6,32,44,.5) 0%,rgba(6,32,44,.42) 42%,rgba(6,32,44,.9) 100%)}

/* Tagline ở thanh trên: mockup cho MỘT dòng và cắt bằng dấu ba chấm — hợp với
   "Quốc Tịch Vàng" (3 chữ), nhưng cụm nào tagline dài ("MẦM NON SONG NGỮ CHUẨN
   QUỐC TẾ") thì ra "MẦM NON …", đọc không ra gì. Cho xuống tối đa hai dòng và
   thu cỡ chữ một chút thay vì cắt cụt. */
.tb-sub{white-space:normal;overflow:visible;text-overflow:clip;
        overflow-wrap:normal;line-height:1.18}
/* Hero có video thì phủ tối dày thêm cho chữ trắng luôn đọc rõ. */
.sh:has(.gh-vid.hien) .ov{background:linear-gradient(180deg,rgba(6,32,44,.58) 0%,rgba(6,32,44,.5) 40%,rgba(6,32,44,.93) 100%)}

/* ══════════ Công cụ của cụm Global Star ══════════
   Mười hai công cụ, mỗi cái mang một khối <style> riêng viết bằng px cho trang
   rộng bình thường: h1 23px, ô nhập 16px. Nhưng khung mockup rộng 270px được
   JS phóng ~1,44 lần, nên các con số đó ra 33px và 23px trên máy — "quá to
   khổng lồ" đúng như anh Thiện nói.
   Sửa ở MỘT chỗ bằng cách thu nhỏ chính thẻ bọc: zoom nhân dồn với zoom của
   khung, đưa mọi cỡ chữ, đệm và bo góc bên trong về đúng tỷ lệ site — không
   phải sửa mười hai khối CSS rời và cũng không sợ bỏ sót công cụ nào.
   0,62 × 1,44 ≈ 0,9 ⇒ chữ 14,5px thành ~13px, khớp chữ thân bài của site. */
.tc-wrap,.tt-wrap,.cw-wrap,.ht-wrap,.ie-wrap,.nc-wrap,
.tv-wrap,.td-wrap,.mp-wrap,.nk-wrap,.kh-wrap,.cc-wrap{
  zoom:.62;
  /* max-width tính theo hệ toạ độ đã thu nhỏ nên phải nới ra tương ứng,
     nếu không nội dung chỉ chiếm 62% bề ngang khung. */
  max-width:none;width:100%;box-sizing:border-box}

/* Dải "Công cụ khác có thể bạn cần" do App\Core\TienIch dựng ra (.ti-dai) —
   không có tệp CSS nào tả nó, nên các liên kết dính liền thành một khối chữ
   không đọc được. Cho nó cùng kiểu ô vuông với phần công cụ ở trang chủ. */
.ti-dai{padding:14px 15px 0}
.ti-t{font-size:8.2px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.ti-g{display:grid;grid-template-columns:1fr 1fr;gap:7px}
body.rong .ti-g{grid-template-columns:repeat(4,1fr)}
.ti-g a{display:flex;align-items:flex-start;gap:7px;padding:8px 9px;border-radius:9px;
        border:1px solid;text-decoration:none;background:#fff;min-width:0}
.ti-g .ic{font-size:13px;line-height:1.1;flex:0 0 auto}
.ti-g .tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.ti-g .tx b{font-size:8.6px;font-weight:700;line-height:1.3}
.ti-g .tx i{font-size:7.4px;font-style:normal;opacity:.7;line-height:1.4;
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g .ti-dai .ti-t{color:var(--g-spice)} .g .ti-g a{border-color:#E4DACA} .g .ti-g .tx b{color:#2A1B12}
.s .ti-dai .ti-t{color:var(--s-green)} .s .ti-g a{border-color:#DCE7E4} .s .ti-g .tx b{color:var(--s-deep)}

/* ── Công cụ ước tính chi phí (Global Star) ── */
.fhp{display:grid;gap:8px;margin-top:11px}
.fhp label{display:block;font-size:8.4px;font-weight:700;color:#5B6B73}
.fhp label.dong{display:flex;align-items:center;gap:7px;font-size:9.4px;color:var(--s-deep)}
.fhp select,.fhp input[type=number]{display:block;width:100%;margin-top:4px;box-sizing:border-box;
  font:inherit;font-size:9.4px;color:var(--s-deep);background:#fff;border:1px solid var(--s-line);
  border-radius:7px;padding:7px 9px;-webkit-appearance:none;appearance:none}
.fhp label.dong input{width:15px;height:15px;margin:0;accent-color:var(--s-green)}
.fhp select:focus,.fhp input:focus{outline:none;border-color:var(--s-green);box-shadow:0 0 0 2px rgba(0,160,74,.14)}
.fhp button.cta{margin-top:4px;background:var(--s-green);border-radius:20px;padding:10px 18px}
.hp-to{margin-top:11px;border-radius:12px;padding:14px;text-align:center;
       background:linear-gradient(140deg,var(--s-deep),#12536B);color:#fff}
.hp-to .n{font-size:22px;font-weight:800;line-height:1.1}
.hp-to .d{font-size:8.2px;opacity:.9;margin-top:4px;letter-spacing:.04em}
.hp-ghi{margin-top:9px;background:#F0FAF4;border:1px solid #CFE9DA;border-radius:9px;
        padding:9px 11px;font-size:8.8px;line-height:1.6;color:#0F5132}
.hp-ud{margin:9px 0 0;padding-left:15px}
.hp-ud li{font-size:9.2px;line-height:1.7;margin:3px 0;color:#3F4C55}

/* ── Dải số liệu của Global Star ──
   Mockup xếp 2×2 nên khối này cao gần bằng nửa hero — anh Thiện đánh dấu đúng
   chỗ "chiếm đất quá nhiều". Xếp một hàng bốn cột, thu cỡ chữ và đệm lại. */
.sstat{grid-template-columns:repeat(4,1fr)}
.sstat div{padding:7px 4px;border-bottom:0;border-right:1px solid rgba(255,255,255,.08)}
.sstat div:nth-child(2n){border-right:1px solid rgba(255,255,255,.08)}
.sstat div:last-child{border-right:0}
.sstat .v{font-size:12.5px}
.sstat .t{font-size:6.2px;margin-top:3px;line-height:1.25}

/* Tagline thanh trên cụm này dài 30 ký tự — hiện ĐỦ trên ba dòng nhỏ, không cắt
   bằng dấu ba chấm. Thanh trên tự cao theo nội dung nên không vỡ. */
.s .tb-sub{font-size:5.4px;letter-spacing:.02em;line-height:1.2;max-width:112px}
.s .tb{align-items:center;min-height:0}
body.rong .s .tb-sub{font-size:7.4px;max-width:none}

/* ── Bảng trong bài trên điện thoại → THẺ ──
   Bài nhập từ WordPress hay có bảng hai ba cột (bảng phí, bảng lịch). Trong
   khung hẹp thì cột cuối bị cắt mất, phải vuốt ngang mới thấy — và hầu như
   không ai vuốt. Trên điện thoại xếp mỗi hàng thành một thẻ dọc: ô đầu là nhãn,
   các ô sau là giá trị. Desktop vẫn giữ bảng như cũ. */
body:not(.rong) .gart .in table,body:not(.rong) .sart .in table{display:block;overflow:visible;font-size:9.4px}
body:not(.rong) .gart .in thead,body:not(.rong) .sart .in thead{display:none}
body:not(.rong) .gart .in tbody,body:not(.rong) .sart .in tbody,
body:not(.rong) .gart .in tr,body:not(.rong) .sart .in tr{display:block;width:auto}
body:not(.rong) .gart .in tr,body:not(.rong) .sart .in tr{
  border:1px solid;border-radius:9px;margin:7px 0;padding:8px 10px;background:#fff}
body:not(.rong) .gart .in td,body:not(.rong) .sart .in td,
body:not(.rong) .gart .in th,body:not(.rong) .sart .in th{
  display:block;border:0;padding:1px 0;text-align:left;width:auto}
body:not(.rong) .gart .in td:first-child,body:not(.rong) .sart .in td:first-child{
  font-weight:800;margin-bottom:2px}
body:not(.rong) .g .gart .in tr{border-color:#E4DACA}
body:not(.rong) .s .sart .in tr{border-color:#DCE7E4}

/* ── Ba đường dây ở chân trang ──
   Số in đậm, ghi chú nhỏ mờ ngay sau, tất cả trên MỘT dòng chữ bình thường.
   ⚠️ Đã thử display:grid rồi display:flex cho khối này — cả hai đều làm ba dòng
      cách nhau cả trăm pixel ("tè le"). Liên kết khối thường của chân trang vốn
      đã khít, nên dùng đúng nó, không dựng lưới riêng. */
.ft .fdt b{font-weight:800;font-size:9.6px;letter-spacing:.01em}
.ft .fdt i{font-style:normal;font-size:7.4px;opacity:.7}
.g .ft .fdt b{color:var(--g-gold)}
.s .ft .fdt b{color:#fff}

/* ══════════ Ô nhập liệu: luôn RENDER đúng 16px để iOS không tự phóng ══════════
   Safari trên iPhone tự phóng cả trang khi chạm vào ô nhập có cỡ chữ dưới 16px.
   Khung mockup dùng cỡ 8–9px nên chạm ô nào màn hình nhảy ô đó.
   Khung lại đang bị `zoom` một hệ số THAY ĐỔI theo bề rộng máy (w/270), nên
   không thể ghi cứng một con số px nào đúng cho mọi máy:
       320px → ×1,19 · 390px → ×1,44 · 430px → ×1,59
   Vì vậy JS trong mk_base tính sẵn `--o-nhap = 16 / hệ_số` và đặt lên #mkroot;
   nhân với zoom là ra đúng 16px thật ở mọi máy.
   ⚠️ KHÔNG sửa bằng `zoom` trên chính ô nhập — đã thử, nó kéo cả nhãn và hộp
      của thẻ <label> theo, form vỡ hàng.
   ⚠️ KHÔNG sửa bằng maximum-scale=1 — cách đó chặn luôn phóng to hai ngón của
      người mắt kém.
   Áp cho MỌI biểu mẫu: công cụ, đặt lịch, liên hệ, tìm kiếm. */
.cmp select,.cmp input,.cmp textarea,
.fhp select,.fhp input,.fhp textarea,
.ftra input,.ftra select,.ftra textarea,
.frm input,.frm select,.frm textarea,
.sov input,.bar input,
form input,form select,form textarea{font-size:var(--o-nhap,16px)}
/* Ô đánh dấu không có chữ nên không dính luật này. */
input[type=checkbox],input[type=radio]{font-size:inherit}
/* Ô nhập cao lên theo cỡ chữ mới thì đệm phải bớt lại, nếu không hộp quá cao. */
.cmp select,.cmp input[type=number],.cmp input[type=date],.cmp input[type=text]{padding:4px 6px;line-height:1.25}
.fhp select,.fhp input[type=number]{padding:5px 8px;line-height:1.25}
.ftra input{padding:6px 9px;line-height:1.25}
/* Cột "Liên hệ" chứa số điện thoại nên cần rộng hơn cột bên cạnh. */
.ft .fcols:first-of-type{grid-template-columns:1.12fr .88fr}
.ft .fdt a{white-space:nowrap}

/* ══════════ Trang campus ══════════ */
.cp-hero{position:relative;height:190px;overflow:hidden}
.cp-hero img{width:100%;height:100%;object-fit:cover}
.cp-hero .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,32,44,.18) 0%,rgba(6,32,44,.72) 58%,rgba(6,32,44,.94) 100%)}
.cp-hero .tx{position:absolute;left:0;right:0;bottom:0;padding:13px 15px;color:#fff}
.cp-hero .k{display:inline-block;font-size:7.2px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
            background:var(--s-green);padding:3px 8px;border-radius:99px}
.cp-hero h1{font-size:17px;font-weight:800;line-height:1.18;margin:7px 0 0;color:#fff}
.cp-hero p{margin:5px 0 0;font-size:8.8px;line-height:1.55;color:#D7E6EC}
.cp-so{display:grid;grid-template-columns:repeat(4,1fr);background:var(--s-deep)}
.cp-so div{padding:8px 4px;text-align:center;border-right:1px solid rgba(255,255,255,.09)}
.cp-so div:last-child{border-right:0}
.cp-so b{display:block;font-size:12.5px;font-weight:800;color:var(--s-cyan);line-height:1}
.cp-so span{display:block;font-size:6.2px;color:#9FBAC6;margin-top:3px;line-height:1.25}
.cp-lh{display:block;margin-top:2px}
.cp-lh a,.cp-lh div{display:block;font-size:9px;line-height:1.85;color:#3F4C55;text-decoration:none}
.cp-lh a b{font-weight:800;color:var(--s-deep)}
.cp-lh .dc{font-weight:600;color:var(--s-deep)}
.cp-tq{display:grid;grid-template-columns:1fr;gap:8px;margin-top:9px}
body.rong .cp-tq{grid-template-columns:1fr 1fr}
.cp-tq>div{border:1px solid var(--s-line);border-radius:11px;background:#fff;padding:10px 11px;position:relative}
.cp-tq .n{position:absolute;right:10px;top:9px;font-size:8px;font-weight:800;color:var(--s-cyan);opacity:.6}
.cp-tq h4{margin:0;font-size:9.8px;font-weight:800;color:var(--s-deep)}
.cp-tq h4 em{font-style:normal;color:var(--s-green)}
.cp-tq p{margin:4px 0 0;font-size:8.6px;line-height:1.65;color:#5B6B73}
.cp-ds{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.cp-ds a{display:block;border:1px solid var(--s-line);border-radius:10px;background:#fff;
         padding:8px 10px;text-decoration:none}
.cp-ds b{display:block;font-size:9.2px;font-weight:800;color:var(--s-deep)}
.cp-ds span{display:block;font-size:7.6px;color:#7E8C93;margin-top:2px}

/* Ô campus ở trang chủ: mockup chỉ tả `.scam div`, mà từ 23/08 mỗi ô đã thành
   thẻ <a> để bấm sang trang campus riêng → mất sạch kiểu, chữ to và dính liền.
   Tả cho cả <a>. */
.scam a{display:block;background:#fff;border:1px solid var(--s-line);border-radius:9px;
        padding:7px;font-size:8px;font-weight:800;color:var(--s-deep);line-height:1.3;text-decoration:none}
.scam a span{display:block;font-size:7px;color:#A9A093;font-weight:600;margin-top:2px}
.scam a:active{border-color:var(--s-green)}

/* Chân trang — ba đường dây: số vừa phải, ghi chú được xuống dòng.
   Trước đó số in 9,6px/800 nhìn nặng nề, còn ghi chú bị nowrap nên cắt cụt. */
.ft .fdt a{white-space:normal}
.ft .fdt b{font-weight:700;font-size:8.8px;letter-spacing:0}
.ft .fdt i{font-size:7.2px;opacity:.65}

/* ══════════ Bảng tin campus ══════════ */
.bt-ds{display:grid;grid-template-columns:1fr;gap:9px;margin-top:9px}
body.rong .bt-ds{grid-template-columns:1fr 1fr;gap:12px}
.bt{border:1px solid var(--s-line);border-radius:12px;background:#fff;padding:10px 11px}
.bt-dau{display:flex;align-items:center;gap:7px;font-size:7.4px;color:#9AA7AE}
.bt-dau .cs{font-weight:800;color:var(--s-green);text-decoration:none}
.bt-dau .ghim{margin-left:auto}
.bt h3{margin:5px 0 0;font-size:10px;font-weight:800;line-height:1.35;color:var(--s-deep)}
.bt p{margin:4px 0 0;font-size:8.8px;line-height:1.65;color:#5B6B73}
.bt-anh{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:8px}
.bt-anh.mot{grid-template-columns:1fr}
.bt-anh a{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:8px}
.bt-anh.mot a{aspect-ratio:16/9}
.bt-anh img{width:100%;height:100%;object-fit:cover;display:block}
/* Ảnh thứ tư gánh số ảnh còn lại, thẻ không cao thêm dù bài có tám ảnh. */
.bt-anh a.them::after{content:attr(data-n);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;background:rgba(6,32,44,.62);
  color:#fff;font-size:13px;font-weight:800}
.bt-video{width:100%;margin-top:8px;border-radius:9px;display:block}
.bt-chan{display:flex;gap:10px;margin-top:7px;font-size:7.4px;color:#9AA7AE}
.bt-trang{display:flex;justify-content:space-between;gap:9px;margin-top:12px}
.bt-trang a{font-size:8.8px;font-weight:700;color:var(--s-green);text-decoration:none;
            border:1px solid var(--s-line);border-radius:99px;padding:6px 13px;background:#fff}
/* Thanh dưới sáu mục: mỗi ô chỉ còn ~65px nên nhãn phải nhỏ và được xuống dòng,
   nếu không "Tuyển sinh" bị cắt thành "Tuyển s…". */
.bn:has(a:nth-child(6)) a{padding:0 1px}
.bn:has(a:nth-child(6)) svg{width:16px;height:16px}
.bn:has(a:nth-child(6)) span{font-size:6.6px;white-space:normal;line-height:1.15;
  text-overflow:clip;overflow:visible;text-align:center;max-width:100%}
/* Tim và bình luận trên bảng tin. */
.bt-chan{align-items:center}
.bt-tim,.bt-cmt{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--s-line);
  background:#fff;border-radius:99px;padding:4px 9px;cursor:pointer;font:inherit;font-size:7.8px;color:#5B6B73}
.bt-tim .ic{font-size:9px;line-height:1}
.bt-tim.on{border-color:#F2C2CE;background:#FFF1F5;color:#B81232}
.bt-tim.on .ic{color:#B81232}
.bt-xem{margin-left:auto}
.bt-hop{margin-top:9px;border-top:1px solid var(--s-line);padding-top:8px}
.bt-bl{margin-bottom:7px}
.bt-bl b{font-size:8.4px;font-weight:800;color:var(--s-deep)}
.bt-bl span{font-size:7px;color:#9AA7AE;margin-left:5px}
.bt-bl p{margin:2px 0 0;font-size:8.6px;line-height:1.6;color:#5B6B73}
.bt-form{display:grid;gap:5px;margin-top:6px}
.bt-form input,.bt-form textarea{font:inherit;font-size:var(--o-nhap,16px);color:var(--s-deep);
  background:#FBFEFC;border:1px solid var(--s-line);border-radius:7px;padding:6px 8px;
  box-sizing:border-box;width:100%;-webkit-appearance:none;appearance:none}
.bt-form textarea{resize:vertical;min-height:34px}
.bt-form button{justify-self:start;border:0;cursor:pointer;font:inherit;font-size:8.4px;font-weight:800;
  background:var(--s-green);color:#fff;border-radius:99px;padding:6px 15px}
.bt-form .bao{margin:0;font-size:7.6px;color:#5B6B73;min-height:9px}
/* Ô mồi chống máy gửi — người thật không thấy. */
.bt-form .mat{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Nhúng video ngoài: khung 16:9, ảnh chờ + nút phát, iframe chỉ nạp khi bấm. */
.vp-yt{position:relative;margin:8px 0 0;aspect-ratio:16/9;overflow:hidden;border-radius:9px;background:#000}
.vp-yt img{width:100%;height:100%;object-fit:cover;display:block}
/* Ảnh chờ giờ đúng tỷ lệ gốc (oardefault.jpg) và JS đặt aspect-ratio của khung
   theo đúng ảnh đó, nên cover khớp khít — không còn viền đen. */
.vp-yt.dang-phat img,.vp-yt.dang-phat .vp-phat{display:none}
/* Nút chính trong các mục nội dung (trang campus, công cụ) của cụm Global Star. */
.ssec a.cta{display:inline-block;background:var(--s-green);color:#fff;font-size:9.4px;font-weight:800;
            padding:9px 18px;border-radius:20px;text-decoration:none}
/* Biểu phí đầy đủ: thu lại, mở ra khi cần. Chín dòng số tiền mở sẵn thì chiếm
   gần trọn màn hình mà khách vẫn phải tự cộng. */
.cp-phi{margin-top:11px;border:1px solid var(--s-line);border-radius:10px;background:#fff}
.cp-phi summary{cursor:pointer;padding:9px 11px;font-size:8.8px;font-weight:800;color:var(--s-deep);list-style:none}
.cp-phi summary::-webkit-details-marker{display:none}
.cp-phi summary::after{content:'+';float:right;font-weight:800;opacity:.55}
.cp-phi[open] summary::after{content:'−'}
.cp-phi>.cmp,.cp-phi>p{margin:0 11px 10px}
/* Học phí chính khoá — một dòng duy nhất trên trang campus. */
.cp-hp{display:flex;align-items:baseline;justify-content:space-between;gap:9px;margin-top:11px;
  border:1px solid var(--s-line);border-radius:10px;background:#fff;padding:10px 12px}
.cp-hp span{font-size:8.8px;color:#5B6B73}
.cp-hp b{font-size:10.5px;font-weight:800;color:var(--s-deep);white-space:nowrap}
/* YouTube Shorts là video dọc — khung 9:16, chặn chiều cao cho khỏi chiếm hết màn. */
/* Khung dọc: chặn chiều cao bằng cách quy ra bề NGANG (JS đặt max-width
   = calc(78vh × tỷ lệ)). Đặt max-height trực tiếp thì bề ngang vẫn giữ nguyên,
   aspect-ratio bị bỏ qua và ảnh lại bị cắt. Ở đây chỉ lo căn giữa.
   ⚠️ KHÔNG đặt lại aspect-ratio cứng 9/16 — có video quay ngang mà vẫn đăng
      dạng Shorts; tỷ lệ do JS đo từ ảnh chờ, chính xác hơn mọi phỏng đoán. */
.vp-yt.doc{margin-left:auto;margin-right:auto}
.vp-yt.doc img{object-fit:cover}
/* Nội dung bài bảng tin: thu 6 dòng, có nút mở hết. Chữ đầy đủ vẫn nằm trong
   HTML nên mở ra là thấy ngay và máy tìm kiếm cũng đọc được. */
.bt-noi{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.bt-noi.mo{display:block;-webkit-line-clamp:none;overflow:visible}
.bt-them{margin-top:4px;border:0;background:none;cursor:pointer;font:inherit;
  font-size:8.2px;font-weight:800;color:var(--s-green);padding:2px 0}
.g .bt-them{color:var(--g-spice)}
/* Hai tab trên khối tin của trang chủ. */
.tin-tab{display:flex;gap:6px;margin-top:9px}
.tin-tab button{border:1px solid var(--s-line);background:#fff;cursor:pointer;font:inherit;
  font-size:8.2px;font-weight:700;color:#5B6B73;padding:6px 12px;border-radius:99px;white-space:nowrap}
.tin-tab button.on{background:var(--s-green);border-color:var(--s-green);color:#fff}
.g .tin-tab button{border-color:#E4DACA;color:#7A6C5D}
.g .tin-tab button.on{background:var(--g-spice);border-color:var(--g-spice);color:#fff}
/* 🔴 `.lst{display:grid}` là bộ chọn lớp nên THẮNG display:none mặc định của
   thuộc tính `hidden` — tab thứ hai vẫn hiện dù đã đặt hidden. Đúng cái bẫy đã
   dính với lớp phủ tìm kiếm (#mksov). Phải tắt tường minh. */
.lst[hidden],.tin-tab[hidden]{display:none}

/* Nút dựng bản chào phí PDF (partials/pdf_bao_phi.php). */
.pdfnut{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pdfnut .cta{cursor:pointer;border:0}
.pdfnut .cta.phu{background:transparent;color:var(--g-do,#B0281A);box-shadow:inset 0 0 0 1.5px currentColor}
.pdfnut .cta[disabled]{opacity:.55;cursor:progress}
.pdfbao{margin-top:8px;min-height:10px}