/* ============================================================ TẦNG 2 — BASE Reset, kiểu chữ nền, lớp bố cục dùng chung. ⚠️ MỌI quy tắc đều bắt đầu bằng .bmh — không rò rỉ ra trang khác. ============================================================ */ .bmh *{margin:0;padding:0;box-sizing:border-box} html:has(.bmh){scroll-behavior:smooth} body.bmh{ /* BAT BUOC. `.bmh *` chi chon thu BEN TRONG .bmh, khong chon chinh , nen van giu le mac dinh 8px cua trinh duyet -> hero khong tran het man hinh + trang tran ngang 4px o 1440. */ margin:0; background:var(--bone); color:var(--body); font-family:var(--font-body); font-weight:300; font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; } .bmh img,.bmh svg{display:block;max-width:100%;height:auto;border-radius:0} .bmh a{color:inherit;text-decoration:none} /* Chu in dam: mac dinh trinh duyet la 'bolder', tinh tu than trang 300 chi ra 400 -> gan nhu khong noi bat. Dat thang 500 (do dam nay VAN DANG duoc tai ve tu Google Fonts nhung truoc gio khong dung toi). */ .bmh strong,.bmh b{font-weight:500} .bmh h1,.bmh h2,.bmh h3,.bmh h4{ font-family:var(--font-head);font-weight:400;text-transform:uppercase; color:var(--ink);line-height:var(--lh-head);text-wrap:balance;hyphens:none; } /* ---------- KHUNG ---------- */ .bmh .wrap{width:100%;max-width:var(--maxw);margin:0 auto; padding-left:var(--gutter);padding-right:var(--gutter)} /* dùng padding-top/bottom RIÊNG LẺ. Viết gộp `padding: 72px 0` sẽ XOÁ lề trái/phải của .wrap → chữ dính mép. */ .bmh .pad-l{padding-top:var(--sp-l);padding-bottom:var(--sp-l)} .bmh .pad-xl{padding-top:var(--sp-xl);padding-bottom:var(--sp-xl)} .bmh .pad-xxl{padding-top:var(--sp-xxl);padding-bottom:var(--sp-xxl)} .bmh .bg-white{background:var(--white)} /* NỀN TRƯNG BÀY ĐÁ */ .bmh .bg-bone{background:var(--bone)} .bmh .bg-dark{background:var(--ink);color:rgba(243,238,231,.85)} .bmh .bg-dark h2,.bmh .bg-dark h3,.bmh .bg-dark .eyebrow{color:var(--bone)} .bmh .tc{text-align:center} .bmh .measure{max-width:60ch} .bmh .measure-c{max-width:62ch;margin-left:auto;margin-right:auto} .bmh .mt-s{margin-top:20px} .bmh .mt-m{margin-top:36px} .bmh .mt-l{margin-top:64px} .bmh .hair{height:1px;background:var(--hairline);border:0} /* ---------- LƯỚI ---------- */ .bmh .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)} .bmh .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)} .bmh .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)} /* Dung `fr` KHONG dung `%`. Viet 48% 52% la tong 100% RUOI khoang ho -> luoi rong hon khung chua -> tran ngang. `fr` chia phan CON LAI sau khoang ho. */ .bmh .split{display:grid;grid-template-columns:48fr 52fr; gap:clamp(24px,5vw,80px);align-items:center} @media(max-width:1000px){.bmh .g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:900px){.bmh .g3{grid-template-columns:repeat(2,1fr)} .bmh .split{grid-template-columns:1fr}} @media(max-width:560px){.bmh .g2,.bmh .g3,.bmh .g4{grid-template-columns:1fr}} /* ---------- CHỮ ---------- */ .bmh .eyebrow{display:block;font-family:var(--font-head);font-size:var(--fs-label); font-weight:400;letter-spacing:.30em;text-transform:uppercase;color:var(--muted)} .bmh h2{font-size:var(--fs-h2);letter-spacing:.16em} .bmh h3{font-size:var(--fs-h3);letter-spacing:.20em} .bmh .lead{font-size:var(--fs-body-l);color:var(--body)} .bmh ::selection{background:var(--ink);color:var(--bone)} .bmh :focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* (17/08 sếp — mobile) Kéo quá đáy trang trên iPhone lộ nền kem lạc lõng sau footer đen → nền gốc đổi theo màu footer; thân trang vẫn bone. */ html:has(body.bmh){background-color:#262626}