/* MK_DESKTOP_v1 — lớp bố cục cho màn rộng.
 *
 * mk.css là bản mockup NGUYÊN VĂN, vẽ cho khung điện thoại 270px. File này KHÔNG
 * sửa file đó, chỉ đè khi <body> có lớp `rong` (bề rộng ≥ 900px). Điện thoại
 * không nạp lớp nào ở đây, nên bản mobile vẫn khớp mockup từng pixel.
 *
 * Ở chế độ rộng, JS nới khung từ 270px lên 620px (toạ độ trước zoom) rồi zoom ~1.9
 * → khung thật ~1.180px. Nhờ vậy cỡ chữ vẫn đúng tỷ lệ mockup, còn lưới thì giãn
 * ra nhiều cột như một trang desktop thật.
 */

/* ── Khung ── */
body.rong #mkroot{box-shadow:none;background:transparent}
body.rong .scroll{overflow:visible}

/* ── Thanh trên — TB_MOTHANG_v1 (11/10/2026) ──
   Bản cũ xuống HAI hàng (thương hiệu + menu ngang), cao 146px thật và dính cứng
   khi cuộn: chiếm gần 1/6 màn hình laptop suốt thời gian đọc.
   Nay: desktop (≥1100, lớp `desk`) MỘT hàng — thương hiệu · menu · nút — cao ≈57px;
   máy tính bảng (760–1099) giữ đúng bộ của điện thoại: nút ☰ + thanh dưới, vì là
   máy cảm ứng và khung hẹp không đủ chỗ cho menu ngang một hàng.
   Kéo xuống thì thanh lui lên, kéo lên hiện lại (TB_AN_v1 trong mk_base.php). */
body.rong #mkroot>.tb{transition:transform .28s ease}
body.rong.tb-an #mkroot>.tb{transform:translateY(-105%)}
@media (prefers-reduced-motion:reduce){body.rong #mkroot>.tb{transition:none}}
body.rong .tb{height:30px;min-height:0;padding:0 14px;gap:10px;flex-wrap:nowrap}
body.rong .tb-name{font-size:11.5px}
body.rong .tb-sub{font-size:6.4px;max-width:none;overflow:visible}
body.rong .tb-emoji{font-size:17px}
body.rong .tb-logo{height:22px}
body.desk .tb{height:34px;padding:0 16px;gap:14px}
body.desk .tb-brand{flex:0 0 auto;min-width:0;padding:0}
body.desk .hamb{display:none}
body.desk .tbnav{display:flex;align-items:center;justify-content:center;gap:4px;flex:1 1 auto;
                 min-width:0;overflow:hidden;margin:0;padding:0;border:0}
body.desk .tbnav a{position:relative;font-size:8.4px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
                   padding:5px 8px;border-radius:6px;opacity:.82;transition:opacity .15s,background .15s}
body.desk .tbnav a:hover{opacity:1;background:rgba(255,255,255,.07)}
body.desk .tbnav a.on{opacity:1}
body.desk .tbnav a.on::after{content:"";position:absolute;left:8px;right:8px;bottom:1px;height:1.4px;
                   border-radius:2px;background:currentColor}
/* Màu chữ menu phải lấy theo bảng màu từng site — để inherit thì chìm vào nền tối. */
body.rong .g .tbnav a{color:var(--g-sand)}
body.rong .s .tbnav a{color:var(--s-deep)}
body.desk .s .tbnav a:hover{background:rgba(0,0,0,.05)}
.tbnav{display:none}

/* ── Thanh dưới: chỉ desktop bỏ (đã có menu ngang); máy tính bảng giữ ── */
body.desk .bn{display:none}

/* ── Hero cao hơn, chữ nằm trong cột đọc ── */
/* Hero desktop: 300px trước zoom ×1,95 = 585px thật — chiếm gần trọn màn hình
   đầu, ảnh nền phải phóng to 1,7 lần nên nhoè. 210 ⇒ ~410px, vừa mắt. */
body.rong .gh,body.rong .sh{height:250px}
body.rong .gh .tx,body.rong .sh .tx{max-width:60%}

/* ── Các mục: đệm rộng ra ── */
body.rong .gsec,body.rong .ssec{padding:26px 24px 0}
body.rong .glab,body.rong .slab{font-size:8.4px}

/* ── Lưới: đây là chỗ desktop khác hẳn điện thoại ── */
body.rong .gtools{grid-template-columns:repeat(4,1fr);gap:9px}
body.rong .gtool.hero{grid-column:1 / -1}
body.rong .stools{grid-template-columns:repeat(6,1fr);gap:8px}
body.rong .gben{display:grid;grid-template-columns:1fr 1fr;gap:9px}
body.rong .gstep{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
                 border-left:0;border-top:1.5px solid #E0D5C0;padding-left:0;padding-top:12px}
body.rong .gpart{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
body.rong .sev{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;overflow:visible}
body.rong .sevc{width:auto}
body.rong .scam{grid-template-columns:repeat(3,1fr);gap:8px}
/* Dải số liệu: mockup xếp 2×2 cho khung hẹp, desktop trải một hàng. */
body.rong .sstat{grid-template-columns:repeat(4,1fr)}
body.rong .sprog{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Ý kiến phụ huynh: grid ở thẻ bọc, từng thẻ giữ nguyên flex của mockup. */
.ststs{display:grid;grid-template-columns:1fr;gap:0}
body.rong .ststs{grid-template-columns:1fr 1fr;column-gap:8px}
body.rong .stst{width:auto;margin-right:0}
/* 🔴 Bản trước: `body.rong .gq{display:inline-block}` — độ ưu tiên cao hơn
   `.gq-anh{display:flex}` nên trên desktop thẻ hỏi đáp MẤT flex, ô ảnh 62px nở
   ra chiếm nửa màn hình. Xếp hai cột bằng grid ở thẻ bọc, còn từng thẻ giữ
   nguyên flex như điện thoại. */
.gqs{display:grid;grid-template-columns:1fr;gap:0}
body.rong .gqs{grid-template-columns:1fr 1fr;column-gap:22px}
body.rong .gq{display:flex;width:auto;margin-right:0}

/* ── Khối chốt trang & chân trang ── */
body.rong .gcta,body.rong .scta{margin:26px 24px 0;border-radius:12px;padding:26px}
body.rong .ft{padding:26px 24px 30px}
body.rong .ft .fcols{grid-template-columns:repeat(4,1fr);gap:20px}
body.rong .fds{max-width:60%}

/* ── Trang bài viết: cột đọc hẹp lại cho dễ đọc ── */
/* Ảnh bìa 300 trước zoom = 585px thật, cao hơn cả màn hình đầu. 190 ⇒ ~370px. */
body.rong .gart .cv,body.rong .sart .cv{height:190px}
/* 430 ⇒ ~840px một dòng — quá dài, mắt phải quét ngang mỏi. 370 ⇒ ~720px. */
body.rong .gart .in,body.rong .sart .in{max-width:400px;margin:0 auto;padding:22px 0 30px}

/* Bộ lọc chuyên mục: điện thoại vuốt ngang, desktop xuống dòng cho thấy hết. */
body.rong .mloc{flex-wrap:wrap;overflow:visible;justify-content:center;padding:12px 24px 0}

/* ── Công cụ dạng bảng ── */
body.rong .cmp{max-width:520px;margin:0 auto}

/* ── Lớp phủ tìm kiếm ── */
body.rong #mksov{max-width:720px;left:50%;transform:translateX(-50%)}

/* Khung ở nấc giữa (760–1099px) hẹp hơn nên vài lưới 4–6 cột phải bớt cột lại,
   nếu không mỗi ô chỉ còn vài chục pixel. */
@media (max-width:1099px){
  body.rong .gtools{grid-template-columns:repeat(2,1fr)}
  body.rong .stools{grid-template-columns:repeat(3,1fr)}
  body.rong .gstep{grid-template-columns:repeat(2,1fr)}
  body.rong .gpart{grid-template-columns:repeat(2,1fr)}
  body.rong .ft .fcols{grid-template-columns:repeat(2,1fr)}
  body.rong .lst,body.rong .lst.muc{grid-template-columns:repeat(2,1fr)}
}