/* MK_DOC_v1 — trang danh sách (chuyên mục · thẻ · tìm kiếm) và trang bài viết.
 *
 * Mockup đã duyệt chỉ vẽ trang chủ, drawer, so sánh hộ chiếu, một bài mẫu và màn
 * tìm kiếm — không vẽ trang danh mục. Phần này dựng theo ĐÚNG ngôn ngữ thị giác
 * của mockup (bo góc, viền mảnh, nhãn chữ hoa giãn chữ) và theo cách bố trí tin
 * tức của topxephang.com: ảnh đại diện → tiêu đề → mô tả → dòng meta có nhãn
 * chuyên mục, ngày, phút đọc.
 *
 * Toạ độ vẫn là hệ 270px của mockup (trang được phóng bằng zoom), nên các cỡ chữ
 * ở đây nhìn nhỏ nhưng ra máy thật là ×1,444.
 */

/* ══════════ Đường dẫn phân cấp ══════════ */
/* Một dòng, cắt bớt phần cuối nếu dài — xuống hai dòng thì dính vào ảnh bìa bài. */
.bcrumb{display:flex;gap:4px;align-items:center;font-size:7.4px;font-weight:700;
        letter-spacing:.04em;padding:9px 15px;opacity:.72;white-space:nowrap;overflow:hidden}
.bcrumb>span:last-child{overflow:hidden;text-overflow:ellipsis}
.bcrumb a{text-decoration:none}
.bcrumb span.sep{opacity:.5}

/* ══════════ Lưới thẻ bài ══════════ */
.lst{display:grid;grid-template-columns:1fr;gap:9px;margin-top:9px}
.lcard{display:grid;grid-template-columns:88px 1fr;gap:9px;border:1px solid;border-radius:11px;
       overflow:hidden;text-decoration:none;background:#fff}
.lcard .anh{position:relative;aspect-ratio:4/3;overflow:hidden;background:#EDE7DC}
.lcard .anh img{width:100%;height:100%;object-fit:cover;display:block}
.lcard .tx{padding:8px 9px 9px 0;min-width:0;display:flex;flex-direction:column;gap:3px}
.lcard h4{font-size:9.6px;font-weight:700;line-height:1.32;margin:0;
          display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lcard p{font-size:7.8px;line-height:1.5;margin:0;opacity:.72;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lcard .mt{display:flex;gap:5px;align-items:center;font-size:6.6px;margin-top:auto;opacity:.66;
           white-space:nowrap;overflow:hidden}
.lcard .chip{font-size:6.8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
             padding:2px 5px;border-radius:4px}

/* Thẻ nổi bật — bài đầu danh sách, ảnh tràn ngang */
.lcard.to{grid-template-columns:1fr}
.lcard.to .anh{aspect-ratio:16/9}
.lcard.to .tx{padding:9px 11px 11px}
.lcard.to h4{font-size:12px;-webkit-line-clamp:3}
.lcard.to p{font-size:8.4px;-webkit-line-clamp:3}

/* Màu theo từng site */
.g .lcard{border-color:#E4DACA}
.g .lcard h4{color:#2A1B12}
.g .lcard .chip{background:#F6E7D8;color:#B0281A}
.g .bcrumb,.g .bcrumb a{color:#8A7B6B}
.s .lcard{border-color:#DCE7E4}
.s .lcard h4{color:#0B3B4F}
.s .lcard .chip{background:#E4F5EA;color:#00863E}
.s .bcrumb,.s .bcrumb a{color:#7E8C93}

/* ══════════ Bộ lọc chuyên mục ══════════ */
.mloc{display:flex;gap:5px;overflow-x:auto;padding:9px 15px 2px;scrollbar-width:none}
.mloc::-webkit-scrollbar{display:none}
.mloc a{flex:0 0 auto;font-size:7.6px;font-weight:700;padding:4px 9px;border-radius:99px;
        border:1px solid;text-decoration:none;white-space:nowrap}
.g .mloc a{border-color:#E4DACA;color:#5A4636}
.g .mloc a.on{background:#B0281A;border-color:#B0281A;color:#fff}
.s .mloc a{border-color:#DCE7E4;color:#42606D}
.s .mloc a.on{background:#00A04A;border-color:#00A04A;color:#fff}

/* ══════════ Phân trang ══════════ */
.ptrang{display:flex;gap:5px;justify-content:center;align-items:center;padding:14px 15px 4px;flex-wrap:wrap}
.ptrang a,.ptrang span{font-size:8.4px;font-weight:700;padding:5px 9px;border-radius:7px;border:1px solid;
                       text-decoration:none;min-width:22px;text-align:center}
.g .ptrang a,.g .ptrang span{border-color:#E4DACA;color:#5A4636}
.g .ptrang .on{background:#B0281A;border-color:#B0281A;color:#fff}
.s .ptrang a,.s .ptrang span{border-color:#DCE7E4;color:#42606D}
.s .ptrang .on{background:#00A04A;border-color:#00A04A;color:#fff}

/* ══════════ Trang bài viết ══════════
   Mockup đặt thân bài 9,4px (≈13,6px thật) — đọc dài thì mỏi. Nâng lên 10,4px
   (≈15px thật, đúng cỡ thân bài của mamnon/quoctich) và giãn dòng 1,75. */
.gart p,.sart p{font-size:10.4px;line-height:1.75;margin:11px 0 0}
.gart .in h2,.sart .in h2{font-size:12.6px;line-height:1.3;font-weight:800;margin:18px 0 0}
.gart .in h3,.sart .in h3{font-size:11.2px;line-height:1.32;font-weight:800;margin:15px 0 0}
.gart .in h4,.sart .in h4{font-size:10.4px;line-height:1.34;font-weight:800;margin:13px 0 0}
.gart .in ul,.sart .in ul,.gart .in ol,.sart .in ol{margin:9px 0 0;padding-left:16px;list-style:disc}
.gart .in ol,.sart .in ol{list-style:decimal}
.gart .in li,.sart .in li{font-size:10.4px;line-height:1.7;margin:4px 0}
.gart .in a,.sart .in a{text-decoration:underline;text-underline-offset:2px}
.g .gart .in a{color:#B0281A}
.s .sart .in a{color:#00863E}
/* ⚠️ min-width:0 KHÔNG được bỏ. mk.css có luật toàn cục `table{min-width:660px}`
   (bảng của mockup vốn nằm trong khung .tw rộng có thanh cuộn riêng). Bài nhập
   từ WordPress đặt bảng thẳng trong .in nên nuốt luôn luật đó: bảng bị ép rộng
   660px trong khung 270px, đẩy vỡ cả bố cục bài — /tuyen-sinh/ dính đúng vậy.
   Chỉ đặt overflow-x:auto là chưa đủ, vì min-width vẫn giữ nguyên. */
.gart .in table,.sart .in table{width:100%;max-width:100%;min-width:0;border-collapse:collapse;margin:12px 0 0;font-size:8.8px;display:block;overflow-x:auto}
.gart .in td,.gart .in th,.sart .in td,.sart .in th{border:1px solid rgba(0,0,0,.12);padding:5px 7px;text-align:left}

/* Ảnh trong bài: luôn tràn hết cột đọc, bo góc, có chú thích */
.gart .in img,.sart .in img{width:100%;height:auto;border-radius:9px;margin:12px 0 0;cursor:zoom-in}
.gart .in figure,.sart .in figure{margin:12px 0 0}
.gart .in figcaption,.sart .in figcaption{font-size:7.6px;opacity:.7;margin-top:4px;text-align:center}

/* Thẻ (tag) */
.gtags{display:flex;flex-wrap:wrap;gap:4px;margin-top:14px}
.gtags a{text-decoration:none}
.gtags span{display:inline-block;font-size:7.4px;font-weight:700;padding:3px 7px;border-radius:99px;border:1px solid}
.g .gtags span{border-color:#E4DACA;color:#8A7B6B}
.s .gtags span{border-color:#DCE7E4;color:#7E8C93}

/* Bài liên quan */
.lqan{padding:0 15px}

/* ══════════ Xem ảnh phóng to ══════════ */
.lbox{position:fixed;inset:0;background:rgba(10,8,6,.94);z-index:400;display:none;
      align-items:center;justify-content:center;padding:14px}
.lbox.mo{display:flex}
.lbox img{max-width:100%;max-height:82vh;border-radius:8px;object-fit:contain}
.lbox .dong{position:absolute;top:10px;right:14px;color:#fff;font-size:15px;font-weight:800;cursor:pointer;
            background:rgba(255,255,255,.14);border-radius:99px;width:26px;height:26px;display:grid;place-items:center}
.lbox .cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#EDE7DC;font-size:8.4px;padding:0 20px}
.lbox .qua{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:20px;font-weight:800;
           cursor:pointer;padding:8px 10px;background:rgba(255,255,255,.12);border-radius:8px;user-select:none}
.lbox .qua.tr{left:8px}
.lbox .qua.ph{right:8px}

/* ══════════ Màn rộng ══════════ */
body.rong .lst{grid-template-columns:repeat(3,1fr);gap:14px}
body.rong .lcard{grid-template-columns:1fr}
body.rong .lcard .anh{aspect-ratio:16/9}
body.rong .lcard .tx{padding:10px 12px 12px}
body.rong .lcard.to{grid-column:1 / -1;grid-template-columns:1.4fr 1fr;align-items:stretch}
body.rong .lcard.to .anh{aspect-ratio:auto;height:100%}
body.rong .lcard.to .tx{justify-content:center;padding:18px 20px}
body.rong .lcard.to h4{font-size:16px}
body.rong .bcrumb,body.rong .mloc,body.rong .ptrang,body.rong .lqan{padding-left:24px;padding-right:24px}

/* ══════════ Form liên hệ (MK_LIENHE_v1) ══════════ */
.frm{margin-top:10px;display:flex;flex-direction:column;gap:9px}
.frm .mat{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frm .o{display:flex;flex-direction:column;gap:3px}
.frm label{font-size:8.2px;font-weight:700;letter-spacing:.02em}
.frm label i{font-style:normal;color:#C0392B}
.frm input,.frm select,.frm textarea{font:inherit;font-size:9.6px;padding:7px 8px;border:1px solid;
  border-radius:8px;background:#fff;width:100%;box-sizing:border-box;color:inherit}
.frm textarea{resize:vertical;min-height:52px}
.frm .khac{display:none;margin-top:4px}
.frm .loi{font-size:7.4px;color:#C0392B;font-style:normal;font-weight:700}
.frm .o.hong input,.frm .o.hong select,.frm .o.hong textarea{border-color:#C0392B}
.frm .nut-gui{font-size:10px;font-weight:800;padding:10px;border:0;border-radius:9px;color:#fff;cursor:pointer;margin-top:3px}
.frm .rieng{font-size:7.2px;opacity:.62;margin:0;text-align:center}
.g .frm input,.g .frm select,.g .frm textarea{border-color:#E0D5C0}
.g .frm .nut-gui{background:#B0281A}
.s .frm input,.s .frm select,.s .frm textarea{border-color:#DCE7E4}
.s .frm .nut-gui{background:#00A04A}

.hop-ok,.hop-loi{border-radius:10px;padding:11px 12px;margin-top:9px;font-size:9px;line-height:1.55}
.hop-ok b{display:block;font-size:10.4px;margin-bottom:3px}
.hop-ok p{margin:0}
.g .hop-ok{background:#F6E7D8;border:1px solid #E0D5C0}
.s .hop-ok{background:#E4F5EA;border:1px solid #CCE9D9}
.hop-loi{background:#FDECEA;border:1px solid #F5C6C0;color:#8E2A1E}

body.rong .frm{max-width:430px}

/* ── Khối hỏi đáp cuối bài ── */
.hoi-dap{margin-top:10px;border:1px solid;border-radius:11px;overflow:hidden}
.hoi-dap details{border-bottom:1px solid}
.hoi-dap details:last-child{border-bottom:0}
.hoi-dap summary{cursor:pointer;padding:9px 11px;font-size:9.6px;font-weight:700;line-height:1.4;list-style:none}
.hoi-dap summary::-webkit-details-marker{display:none}
.hoi-dap summary::after{content:'+';float:right;font-weight:800;opacity:.6}
.hoi-dap details[open] summary::after{content:'−'}
.hoi-dap details>div{padding:0 11px 10px;font-size:9.4px;line-height:1.7}
.hoi-dap details>div p{margin:0 0 6px;font-size:9.4px}
.g .hoi-dap,.g .hoi-dap details{border-color:#E4DACA}
.g .hoi-dap summary{background:#FBF6EE;color:#2A1B12}
.s .hoi-dap,.s .hoi-dap details{border-color:#DCE7E4}
.s .hoi-dap summary{background:#F4FAF7;color:#0B3B4F}

/* ── Ô trang Facebook dưới chân trang ── */
.fbpage{display:flex;align-items:center;gap:9px;margin-top:14px;padding:9px 11px;border-radius:11px;
        border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);text-decoration:none}
.fbpage .ic{width:26px;height:26px;border-radius:7px;background:#1877F2;color:#fff;font-weight:800;
            font-size:15px;display:grid;place-items:center;font-family:Georgia,serif;flex:0 0 auto}
.fbpage .tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.fbpage .tx b{font-size:9.4px;font-weight:700}
.fbpage .tx i{font-style:normal;font-size:7.8px;opacity:.72;margin-top:1px}
.fbpage .go{margin-left:auto;font-size:8px;font-weight:800;padding:4px 9px;border-radius:99px;
            background:#1877F2;color:#fff;flex:0 0 auto}
body.rong .fbpage{max-width:340px}

/* Emoji và biểu tượng trong thân bài: giữ nguyên cỡ thật, nằm trong dòng chữ. */
.gart .in img.anh-nho, .sart .in img.anh-nho{
  width:auto;max-width:1.35em;height:auto;display:inline;vertical-align:-.18em;
  margin:0 .1em;border-radius:0;cursor:auto}

/* Khối "Khách hỏi nhiều nhất" có ảnh nhỏ bên trái. */
.gq-anh{display:flex;gap:9px;align-items:center;text-decoration:none}
.gq-anh .qa{flex:0 0 62px;width:62px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#EDE7DC}
.gq-anh .qa img{width:100%;height:100%;object-fit:cover;display:block}
.gq-anh .qt{min-width:0;display:flex;flex-direction:column;gap:2px}
.gq-anh .qt h4{margin:0}
body.rong .gq-anh .qa{flex-basis:96px;width:96px}

/* ── Trình phát video tự dựng ── */
.vplayer{position:relative;margin:12px 0 0;border-radius:11px;overflow:hidden;background:#000;line-height:0}
.vplayer video{width:100%;height:auto;display:block;max-height:70vh;object-fit:contain;background:#000}
.vplayer .vp-phat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;
  border:0;border-radius:99px;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;
  cursor:pointer;transition:opacity .25s,transform .25s;z-index:2}
.vplayer .vp-phat svg{width:22px;height:22px;margin-left:2px}
.vplayer.dang .vp-phat{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}
.vplayer .vp-thanh{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;
  padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.72));z-index:3;line-height:1}
.vplayer .vp-nut{border:0;background:transparent;color:#fff;font-size:11px;cursor:pointer;padding:2px 3px}
.vplayer .vp-tien{flex:1;height:3px;accent-color:#fff;cursor:pointer}
.vplayer .vp-gio{color:#fff;font-size:7.6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vplayer figcaption{padding:7px 10px;font-size:8px;line-height:1.5;background:#141210;color:#D8CFC2}
.s .vplayer figcaption{background:#0B3B4F}
body.rong .vplayer .vp-gio{font-size:9px}

/* Lưới chuyên mục: ảnh tràn ngang cho dễ nhận ra chủ đề. */
/* Trang /danh-muc/ có 12 mục — mỗi thẻ tràn màn hình thì cuộn mỏi tay. Hai cột
   trên điện thoại, ảnh 16:9, đủ thấy cả trang trong một hai lần vuốt. */
.lst.muc{grid-template-columns:repeat(2,1fr);gap:8px}
.lst.muc .lcard{grid-template-columns:1fr}
.lst.muc .lcard .anh{aspect-ratio:16/9}
.lst.muc .lcard .tx{padding:9px 11px 11px}
.lst.muc .lcard h4{font-size:10px;-webkit-line-clamp:2}
.lst.muc .lcard p{font-size:8px;-webkit-line-clamp:3}
body.rong .lst.muc{grid-template-columns:repeat(3,1fr)}

/* Tích xanh cạnh tên trang Facebook ở chân trang. Dùng em nên nó tự lớn nhỏ
   theo cỡ chữ của <b>, không phải chỉnh lại mỗi lần đổi cỡ chữ chân trang. */
.fbpage .tx b{display:inline-flex;align-items:center;gap:3px}
.fbpage .vfy{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.13em}