/* 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 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: cao hơn, có menu ngang, bỏ hamburger ── */ /* Desktop: thanh trên xuống hai hàng — hàng 1 thương hiệu + nút, hàng 2 menu ngang. Nhồi tất cả vào một hàng thì tagline bị co thành "M…", xấu hơn là tách hàng. */ body.rong .tb{height:auto;min-height:52px;padding:0 20px;gap:12px;position:sticky;top:0;flex-wrap:wrap} body.rong .tb-name{font-size:14px} body.rong .tb-sub{font-size:8px} body.rong .tb-brand{flex:1 1 auto;min-width:0;margin-right:4px;padding:7px 0} body.rong .tb-sub{max-width:none;overflow:visible} body.rong .tb-emoji{font-size:22px} body.rong .tb-logo{height:30px} body.rong .hamb{display:none} body.rong .tbnav{display:flex;align-items:center;gap:18px;order:9;flex:0 0 100%; border-top:1px solid rgba(128,128,128,.18);padding:7px 0;margin:0} body.rong .tbnav a{font-size:9.4px;font-weight:700;letter-spacing:.02em;white-space:nowrap;opacity:.9} body.rong .tbnav a:hover{opacity:1;text-decoration:underline} /* 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)} .tbnav{display:none} /* ── Bỏ thanh dưới: desktop đã có menu ngang ── */ body.rong .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:210px} 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:370px;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:620px;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)} }