/* ========================================================================== 10-base.css — tách từ style.css ngày 17/08/2026 theo III.4.1. Nội dung bên dưới là NGUYÊN VĂN các mục §2 nền & chữ toàn site của bản gộp; không sửa một luật nào trong lần tách này. ========================================================================== */ /* ── §2 nền & chữ toàn site (dòng 65–119 của style.css cũ) ──────────────────── */ /* -------------------------------------------------------------------------- 2. NỀN & CHỮ TOÀN SITE -------------------------------------------------------------------------- */ body.t4 { background-color: var(--t4-light); font-family: var(--t4-font-body); font-size: 16px; line-height: 26px; color: var(--t4-text); margin: 0; } .t4 h1, .t4 h2, .t4 h3, .t4 h4, .t4 h5, .t4 h6 { font-family: var(--t4-font-head); color: var(--t4-text); margin: 0 0 16px; } .t4 h1, .t4-h1 { font-size: 50px; line-height: 60px; font-weight: 500; } .t4 h2, .t4-h2 { font-size: 40px; line-height: 53px; font-weight: 600; color: var(--t4-dark-moss); } .t4 h3, .t4-h3 { font-size: 24px; line-height: 32px; font-weight: 500; } .t4 p { margin: 0 0 16px; } .t4 a { color: inherit; } .t4-lede { font-size: 20px; line-height: 35px; color: #252930; } /* [phục vụ] dòng kicker chữ hoa đầu section | [trang] toàn site [figma] Text Style "Headline 20" — Manrope 800 20/35, giãn −0.2, 40 khung [lý do vượt panel] panel Text không có letter-spacing lẫn text-transform ⚠ 'letter-spacing' thêm 17/08/2026 khi quét kho style chung (III.4.0). Figma khai −0.2 ngay từ đầu; bộ đo KHÔNG hề kêu vì ngưỡng letter-spacing là 0,5px (I.2) nên −0,2 lúc nào cũng "đạt". Đây đúng kiểu sai cộng dồn đã ghi ở bàn giao: một dòng 30 ký tự lệch ~6px bề rộng mà bảng vẫn xanh. */ .t4-kicker { font-family: var(--t4-font-body); font-weight: 800; font-size: 20px; line-height: 35px; letter-spacing: -0.2px; text-transform: uppercase; color: var(--t4-gray); margin: 0; } .t4-italic { font-style: italic; font-weight: 400; } .t4-hero-h1-mb strong, #hanh-trinh h2 strong { font-weight: 700; } .t4 .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 250, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } @media (max-width: 849px) { .t4 h1, .t4-h1 { font-size: 32px; line-height: 42px; } .t4 h2, .t4-h2 { font-size: 32px; line-height: 43px; } .t4 h3, .t4-h3 { font-size: 20px; line-height: 28px; } .t4-lede { font-size: 16px; line-height: 26px; } .t4-kicker { font-size: 15px; line-height: 26px; } } /* ══ DỜI TỪ '40-page-xu-ly-loi-sai-google-ads.css' (20/08/2026) ═══════════ Gỡ khung mặc định của Flatsome quanh nội dung. Áp cho MỌI trang — khớp ở cả 8 trang thử khi đo bằng CSSOM, dù trước nay nằm trong mô-đun mang tên trang #4. Sau khi gỡ: '.section' rộng hết khung nhìn, bề rộng nội dung do '.row' quyết định (Figma dùng khung 1080). */ .t4 #content.page-wrapper > .row-main { max-width: none; margin: 0; } .t4 #content.page-wrapper > .row-main > .col { padding: 0; } /* ══ B1 · DẢI TRẮNG 30px TRÊN ĐẦU MỌI TRANG (20/08/2026) ═════════════════ [phục vụ] cả 25 trang — Flatsome khai '.page-wrapper { padding-top: 30px }' nên phần tử đầu của mọi trang bị đẩy xuống 30px so với Figma. Đo trên Figma trước khi sửa, khe header → phần tử đầu: trang chủ header 163:7688 đáy y=642 · hero 1208:7757 y=642 ⇒ 0 trang #4 header 163:7757 đáy y=12658 · crumb 1015:14115 y=12658 ⇒ 0 blog header đáy y=13694 · breadcrumb 1015:14354 y=13694 ⇒ 0 Quy luật đúng cho toàn file: mọi 'Frame 12' (khung nội dung của một trang) bắt đầu ĐÚNG tại đáy header. ⚠ Đã kiểm riêng ba trang KHÔNG mở bằng hero (blog · chính sách · bài viết mẫu) như tài liệu chia việc dặn — chúng mở bằng breadcrumb cao 70, và breadcrumb cũng dính header. Không trang nào muốn giữ 30px. */ .t4 #content.page-wrapper { padding-top: 0; } /* ══ DỜI TỪ '44-nhom-ggm.css' (20/08/2026) ═══════════════════════════════ Đo bằng CSSOM: luật này khớp ở 19 trang NGOÀI nhóm GGM, tức là luật nền toàn site nằm nhầm trong mô-đun nhóm. Chú thích gốc giữ nguyên bên dưới. 19.1 NỀN TOÀN TRANG BỊ FLATSOME PHỦ TRẮNG đã đúng #FCFBF6, nhưng Flatsome đặt #wrapper và #main nền TRẮNG ĐẶC che sạch lên trên. Mọi section Figma tô #FCFBF6 vì thế đang hiện TRẮNG. Đo tại chỗ: site rgb(255,255,255) ↔ Figma rgb(252,251,246). Không section nào có nền trắng trong Figma (hero là #FCFCFA), nên bỏ trắng ở hai tầng bọc là an toàn — thẻ trắng vẫn tự khai nền riêng. */ .t4 #wrapper, .t4 #main { background-color: transparent; } /* ══ DỜI TỪ '40-page-xu-ly-loi-sai-google-ads.css' (20/08/2026) ═══════════ [phục vụ] khung nội dung mobile của MỌI section | [trang] toàn site [figma] khung 352 tại x=25 trong khổ 402 [lý do vượt panel] panel không đặt được bề rộng khung theo breakpoint ⛔ ĐÂY LÀ LUẬT NỀN TOÀN SITE, không phải luật của trang #4. Nó nằm nhầm trong mô-đun mang tên trang #4 suốt từ lần tách, và các mô-đun nạp SAU đã viết cả chú thích tham chiếu tới nó ('50-nhom-noi-dung.css:379' ghi rõ "'width' thắng"). Linter mục (8) bắt đúng chỗ này. ⚠ BA KHỐI, GIỮ NGUYÊN THỨ TỰ. Chúng khai chồng nhau có chủ đích: khối sau ghim chặt hơn khối trước (382 → 352 → width 352). Đảo thứ tự là đổi kết quả. Ở tệp cũ chúng nằm rải rác ba chỗ; gộp về đây nhưng KHÔNG hợp nhất, vì hợp nhất là tự ý quyết định luật nào thắng. [figma] Container 352 khổ Mobile '1093:8882'. 382 = 352 + 30 đệm cột của Flatsome — 382 KHÔNG có trong Figma (0/127.233 node). Xem khối "GIA ĐÌNH SỐ KHUNG" đầu '30-components.css'. */ @media (max-width: 849px) { /* Lề mobile 25px mỗi bên (Figma: khung nội dung 352 trong 402). */ .t4 .section-content > .row { max-width: 382px; } .t4 .section-content > .row.row-collapse { max-width: 352px; } } @media (max-width: 849px) { /* Khung nội dung mobile: 352 tại x=25 — ghim đủ độ ưu tiên, và bỏ đệm cột */ .t4 .section-content > .row, .t4 .section-content > .row.row-collapse { max-width: 352px; margin-left: auto; } .t4 .section-content > .row > .col { padding-left: 0; padding-right: 0; } } @media (max-width: 849px) { /* Ghim WIDTH chứ không chỉ max-width */ .t4 .section-content > .row, .t4 .section-content > .row.row-collapse { width: 352px; max-width: 352px; } }