/* ============================================================================= Trang chủ — thứ bậc tiêu đề ----------------------------------------------------------------------------- Viết ngày 16/08/2026, sau khi người dùng phản ánh trang chủ "rất rời rạc, như một website lỗi". NGUYÊN NHÂN ĐO ĐƯỢC trên Chrome thật, viewport 1905px: vị trí dọc cấp cỡ chữ nội dung ───────── ─── ────── ───────────────────────────────── 738 H2 36px Những trường quay Haliti đã dựng 1646 H1 16px Thiết kế và thi công trường quay ảo… 1857 H2 16px NEW ARRIVALS 2026 2417 H2 16px Đang bán chạy Hai lỗi cùng lúc: 1. **H1 của trang chỉ 16px** — nhỏ bằng mọi tiêu đề khác, nằm lọt thỏm giữa trang, trông như một dòng chữ thừa sót lại chứ không phải tiêu đề chính. Class `haliti-tieu-de-trang-chu` đã có sẵn trong HTML nhưng **không có CSS ở bất kỳ đâu** — được thêm vào với kỳ vọng style sau rồi bị bỏ quên. 2. **Tiêu đề to nhất trang lại là H2** (36px, của khối năng lực), đứng trên cả H1. Thứ bậc thị giác mâu thuẫn với thứ bậc ngữ nghĩa — mắt người và máy tìm kiếm đều bị rối. Sửa: cho H1 đúng tầm vóc (lớn hơn H2), và chuyển khối năng lực xuống dưới H1 trong nội dung trang. ========================================================================== */ .haliti-tieu-de-trang-chu { font-family: var(--ht-font-tieu-de); /* * 17/08/2026 — NÂNG TỪ 42px LÊN THANG display (34 → 60px). * * Bản trước: H1 42px, H2 36px. Chênh 6px, tỷ lệ 1,17 — tiêu đề quan trọng * nhất trang chỉ nhỉnh hơn tiêu đề mục một chút, nên liếc nhanh không biết * đâu là chính. Thang mới cho tỷ lệ 1,875 (60/32). * * Độ đậm 800 và giãn chữ −0,03em là hai thứ gánh vai trò của "mặt chữ tiêu * đề riêng" — brand chốt một họ chữ nên phân cấp phải đến từ đây. */ font-size: var(--ht-co-display); font-weight: var(--ht-dam-display); line-height: var(--ht-cao-dong-tieu-de); letter-spacing: var(--ht-gian-display); color: var(--ht-chu); text-align: center; text-wrap: balance; /* Bề rộng đọc dễ chịu, không kéo dài hết 1370px */ max-width: 24ch; margin-inline: auto; /* * Khoảng thở. Khối "Tiêu đề trang" của Flatsome chỉ có padding 14px, và * mọi section khác trên trang chủ có padding 0 — nên nhịp dọc phải đặt ở * chính thẻ H1 này. */ margin-block: var(--ht-cach-7) var(--ht-cach-6); } @media (max-width: 640px) { .haliti-tieu-de-trang-chu { max-width: none; margin-block: var(--ht-cach-6) var(--ht-cach-5); } } /* ============================================================================= Hero gộp — ảnh + tiêu đề + nút trong CÙNG một thẻ ----------------------------------------------------------------------------- Người dùng ngày 16/08/2026: "gộp ảnh vào nội dung + nút bấm làm 1 được không". Trước đó ảnh banner là một khối riêng, tiêu đề và nút là một khối riêng, giữa hai khối có 24px nền xám — đọc ra thành hai thứ rời nhau chứ không phải một phần mở đầu. ⚠️ VÌ SAO KHÔNG PHỦ CHỮ ĐÈ LÊN ẢNH (kiểu hero thường thấy). Ba ảnh banner đo được là 1340×405 và 1158×350 — tỷ lệ 3,31:1 — và **đã có sẵn chữ in trong ảnh**: "LIVE STREAMING", "Dịch vụ setup", tên dịch vụ. Đặt thêm H1 lên trên là hai lớp chữ chồng nhau, không lớp nào đọc được. ⚠️ VÌ SAO KHÔNG CHIA ĐÔI TRÁI–PHẢI. Với tỷ lệ 3,31:1, ảnh nhét vào cột 55% chỉ còn cao khoảng 228px — thành một dải mỏng, mất hết sức nặng thị giác của banner. Cách gộp phù hợp với tài sản đang có: đưa cả ba thứ vào **một thẻ trắng bo góc 8px** giống hệt các khối còn lại của trang, ảnh tràn sát mép thẻ. ========================================================================== */ /* * `overflow: hidden` để bốn góc ảnh bị cắt theo bo góc của thẻ. Không có dòng * này thì ảnh vuông góc thò ra ngoài thẻ bo tròn, nhìn như lỗi render. */ .haliti-hero .col-inner { overflow: hidden; } /* * Hàng dùng style="collapse" nên cột không còn padding — ảnh tràn sát mép thẻ * đúng như mong muốn, nhưng chữ cũng mất luôn lề. Trả lề riêng cho chữ. * * Bộ chọn hai lớp (0,2,0) để thắng khai báo margin gốc của * `.haliti-tieu-de-trang-chu` (0,1,0) mà không phải dùng !important. */ /* ⚠️ KHOANG TREN PHAI BANG KHOANG GIUA MENU VA SLIDE — CA HAI LA 24px. Do tren Chrome 18/08/2026: menu do -> slide 24px (le cua section, --ht-cach-5) slide -> H1 48px (--ht-cach-7) <- gap doi, doc ra lech Anh banner bi ke boi hai khoang khac nhau nen no khong con la mot cum, ma thanh mot vat the troi lo lung. Ha xuong 24px cho ca hai deu nhau. */ .haliti-hero .haliti-tieu-de-trang-chu { margin-block: var(--ht-cach-5) var(--ht-cach-5); padding-inline: var(--ht-cach-5); } .haliti-hero .haliti-cta-trang-chu { margin-bottom: var(--ht-cach-7); padding-inline: var(--ht-cach-5); } @media (max-width: 640px) { .haliti-hero .haliti-tieu-de-trang-chu { /* Cung nguyen tac: tren dien thoai le section la --ht-cach-4 (16px), nen khoang tren cua H1 cung phai 16px. */ margin-block: var(--ht-cach-4) var(--ht-cach-4); padding-inline: var(--ht-cach-4); } .haliti-hero .haliti-cta-trang-chu { margin-bottom: var(--ht-cach-6); padding-inline: var(--ht-cach-4); } } /* ============================================================================= CTA kép dưới H1 — khối 1 trong thiết kế ----------------------------------------------------------------------------- Spec mục 6.3: "CTA kép: Nhận tư vấn dự án (chính) + Xem thiết bị (phụ)". Hai đích: - Nhận tư vấn dự án → #ht-tu-van, neo tới form ở CUỐI CHÍNH TRANG NÀY. Không trỏ /lien-he/ vì form đã nằm sẵn trên trang chủ (module 43) — bắt khách tải một trang mới để làm việc mà trang hiện tại làm được là bỏ phí. - Xem thiết bị → /san-pham/, đã kiểm chứng đây chính là trang cửa hàng WooCommerce (wc_get_page_id('shop') = 6). Vì H1 đã căn giữa nên cụm nút cũng căn giữa. Nút chính tô đặc, nút phụ viền rỗng — chênh lệch thị giác đủ rõ để mắt biết đâu là hành động được mong đợi, mà không cần thêm màu thứ hai vào bảng màu. ========================================================================== */ .haliti-cta-trang-chu { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ht-cach-4); margin: 0 0 var(--ht-cach-7); } /* * Bộ chọn có `.haliti-cta-trang-chu` đứng trước là CỐ Ý, không thừa. * Flatsome đặt kiểu cho mọi thẻ `a` trong nội dung trang (màu, gạch chân, * line-height), và `.button` của nó còn có box-shadow lẫn chiều cao cố định. * Bọc thêm một lớp lớp cha để thắng mà không phải dùng !important. */ .haliti-cta-trang-chu .haliti-cta-trang-chu__nut { display: inline-block; padding: var(--ht-cach-4) var(--ht-cach-7); font-family: var(--ht-font-than); font-size: var(--ht-co-than); font-weight: var(--ht-dam-vua); line-height: 1.2; height: auto; border-radius: var(--ht-bo-goc); text-decoration: none; box-shadow: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } /* --- Nút chính ----------------------------------------------------------- */ .haliti-cta-trang-chu .haliti-cta-trang-chu__nut--chinh { background: var(--ht-nhan); color: var(--ht-chu-tren-nhan); border: 1px solid var(--ht-nhan); } .haliti-cta-trang-chu .haliti-cta-trang-chu__nut--chinh:hover, .haliti-cta-trang-chu .haliti-cta-trang-chu__nut--chinh:focus-visible { background: var(--ht-nhan-hover); border-color: var(--ht-nhan-hover); color: var(--ht-chu-tren-nhan); } /* --- Nút phụ ------------------------------------------------------------- */ .haliti-cta-trang-chu .haliti-cta-trang-chu__nut--phu { background: transparent; color: var(--ht-chu); border: 1px solid var(--ht-duong-vien); } .haliti-cta-trang-chu .haliti-cta-trang-chu__nut--phu:hover, .haliti-cta-trang-chu .haliti-cta-trang-chu__nut--phu:focus-visible { border-color: var(--ht-nhan); color: var(--ht-nhan); background: transparent; } /* * Cuộn mượt khi bấm nút chính. Chỉ đặt trên trang chủ (`.home`) chứ không đặt * cho cả site — cuộn mượt toàn site đổi hành vi của mọi liên kết neo, kể cả * trong khu quản trị và trong các trang tài liệu dài. */ .home { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .home { scroll-behavior: auto; } .haliti-cta-trang-chu .haliti-cta-trang-chu__nut { transition: none; } } @media (max-width: 640px) { /* * Xếp dọc và kéo hết chiều ngang. Hai nút cạnh nhau trên màn hẹp làm chữ * "Nhận tư vấn dự án" xuống dòng giữa chừng, trông như nút hỏng. */ .haliti-cta-trang-chu { flex-direction: column; gap: var(--ht-cach-3); margin-bottom: var(--ht-cach-6); } .haliti-cta-trang-chu .haliti-cta-trang-chu__nut { display: block; text-align: center; } } /* ============================================================================= Nền dải — tách bạch các khối ----------------------------------------------------------------------------- Đo trên Chrome thật ngày 16/08/2026, sau khi người dùng yêu cầu "tạo background giữa các khối như solutions.viettel.vn". PHÁT HIỆN: KHÔNG PHẢI THIẾU THIẾT KẾ, MÀ LÀ THIẾT KẾ BỊ VÔ HÌNH. Nội dung trang chủ trong UX Builder đã dựng sẵn kiểu thẻ nổi: - mọi [row] đều có col_bg="rgb(255,255,255)" col_bg_radius="8" - mọi [section] đều có class="shadow" Và DOM xác nhận `.col-inner` thật sự đang có background-color: rgb(255, 255, 255); border-radius: 8px; Nhưng chuỗi tổ tiên lại thế này: HTML rgb(77, 77, 77) BODY trong suốt #wrapper rgb(255, 255, 255) ← trắng #main rgb(255, 255, 255) ← trắng .content-area trong suốt section trong suốt .col-inner rgb(255, 255, 255) ← thẻ trắng nằm trên nền trắng Thẻ trắng trên nền trắng: bo góc 8px không nhìn thấy, ranh giới giữa các khối biến mất, mọi thứ dính liền thành một mảng phẳng. Đây chính là thứ người dùng mô tả là "rời rạc, như một website lỗi" — nghịch lý chỉ ở bề mặt: không có ranh giới nên mắt không gom được khối nào với khối nào. Vì vậy KHÔNG cần vẽ thêm dải nền cho từng khối. Chỉ cần đổi canvas sang xám là toàn bộ hệ thẻ có sẵn hiện lên. Ít CSS hơn, và tôn trọng đúng ý đồ người dựng trang ban đầu. Phạm vi: chỉ trang chủ. File này chỉ nạp khi is_front_page() (functions.php), và mọi bộ chọn đều gắn `.home` — các trang khác không bị ảnh hưởng. ========================================================================== */ /* * Canvas xám. Đặt ở #main chứ không phải body: body đang trong suốt và * #wrapper còn bọc cả header/footer — tô ở #wrapper sẽ làm xám luôn chân trang. */ .home #main { background: var(--ht-nen-phu); } /* * Khoảng thở giữa các dải — DÙNG MARGIN, KHÔNG DÙNG PADDING. * * ⚠️ ĐỪNG ĐỔI SANG `padding`. Đã thử và nó là CSS chết. * * Mọi [section] trên trang chủ đều đặt padding="0px", và UX Builder xuất * thuộc tính đó thành CSS nội tuyến neo bằng bộ chọn id: * #section_1154247639 { padding-top: 0px; padding-bottom: 0px } * Độ ưu tiên id (1,0,0) thắng mọi bộ chọn class trong file này (cao nhất * 0,3,1), nên `padding-block` ở đây không bao giờ có tác dụng. Kiểm chứng * bằng CSSOM: rule `.home .content-area > section:not(.ht-nang-luc)` có khớp * phần tử nhưng giá trị padding tính ra vẫn là 0px. * * Builder KHÔNG ghi margin cho section, nên margin là đường vào duy nhất mà * không phải dùng !important. * * Lề dọc của các section liền kề tự gộp (margin collapsing) — không cộng dồn * thành 48px mà giữ đúng 24px giữa mọi cặp khối. Đó là kết quả mong muốn. * * 16/08/2026 — BỎ LOẠI TRỪ .ht-nang-luc. * Trước đây khối đó tự quản padding 64px vì nó là dải trắng tràn viền. Nay ba * module (.ht-nang-luc, .ht-giai-phap, .ht-tu-van) đã chuyển thành thẻ, padding * nằm bên trong thẻ, nên chúng cần đúng margin 24px như mọi section khác. Giữ * loại trừ sẽ làm ba khối này dính sát khối trên dưới. */ .home .content-area > section { margin-block: var(--ht-cach-5); } /* * NHỊP HAI TỐC ĐỘ — đừng gộp lại thành một giá trị. * * Bản trước để mọi khối cách nhau đúng 24px. Nhịp đều tuyệt đối không phải là * nhịp: mắt không biết chỗ nào là ngắt ý lớn, chỗ nào chỉ là hàng kế tiếp của * cùng một ý. Đo được 8/9 khối có lề y hệt nhau. * * Trang chủ thật ra có HAI loại khối khác hẳn nhau: * * luận điểm — giải pháp · năng lực · form tư vấn * mỗi khối là một ý riêng, cần khoảng lặng trước và sau * * quầy hàng — thương hiệu · nhóm thiết bị · hàng mới · bán chạy · kiến thức * năm hàng của cùng một mạch "xem hàng đi", nên đi liền nhau * * Lề dọc liền kề tự gộp, nên giữa một khối luận điểm và một hàng quầy sẽ ra * 48px, còn giữa hai hàng quầy vẫn 24px. Đúng hai tốc độ, không phải một. */ .home .content-area > section:is(.ht-giai-phap, .ht-nang-luc, .ht-tu-van) { margin-block: var(--ht-cach-7); } /* Hero cần khoảng lặng lớn nhất trang — nó là câu mở đầu. */ .home .content-area > section.haliti-hero { margin-block: var(--ht-cach-5) var(--ht-cach-8); } /* * Khối "NEW ARRIVALS" bật mask hình mũi tên, và flatsome.css kéo nó lên bằng * .mask-angled, .mask-angled-right, .mask-arrow { margin-top: -30px } * Giá trị âm đó ăn hết khoảng hở phía trên, làm dải logo thương hiệu dính * thẳng vào khối sản phẩm mới. Bộ chọn của Flatsome chỉ (0,1,0) nên ghi đè * được bình thường. */ .home .content-area > section.mask-arrow, .home .content-area > section.mask-angled, .home .content-area > section.mask-angled-right { margin-top: var(--ht-cach-5); } /* * ⚠️ ID CỦA SECTION KHÔNG BỀN — ĐỪNG NEO CSS VÀO CHÚNG. * * Flatsome sinh lại id ngẫu nhiên sau mỗi lần render: cùng một khối tiêu đề * đo được là #section_2143043333 ở lần tải này và #section_1079200035 ở lần * tải sau. Muốn đổi nền hay padding của một section thì sửa thuộc tính trong * nội dung trang (bg_color, padding), không viết bộ chọn id ở đây. */ /* --- Điện thoại ---------------------------------------------------------- */ @media (max-width: 640px) { .home .content-area > section { margin-block: var(--ht-cach-4); } .home .content-area > section.mask-arrow, .home .content-area > section.mask-angled, .home .content-area > section.mask-angled-right { margin-top: var(--ht-cach-4); } } /* ============================================================================= Tiêu đề khối sản phẩm Flatsome — đồng bộ với tiêu đề module tự viết ----------------------------------------------------------------------------- Viết 16/08/2026, sau khi ba module đã chuyển sang kiểu thẻ. Còn lại một chỗ lệch: tiêu đề của các khối sản phẩm vẫn theo mặc định Flatsome, khác hẳn tiêu đề của module. MARKUP THẬT (đo trên haliti.com.vn ngày 16/08/2026, 10 khối đều giống nhau):

NEW ARRIVALS 2026 Xem tất cả

Kiểu mặc định của Flatsome: .section-title-normal flex · space-between · padding 16px .section-title-main 20px / 600, có ::before border-left 3px (vạch accent) a nằm bên phải, padding-left 15px Kiểu của module (.ht-giai-phap__dau + __h2): căn giữa, cỡ --ht-co-h2, không vạch accent, không có gì nằm bên phải. Vạch accent nằm ở `::before` của .section-title-main chứ không phải border của thẻ hay hai — hai đó Flatsome đã để display:none sẵn. Đo bằng getComputedStyle(el, '::before') mới ra: border-left 3px. Phạm vi: chỉ trang chủ (`.home`) và chỉ trong `.sanpham`. Các trang danh mục, trang sản phẩm vẫn giữ tiêu đề Flatsome mặc định. ========================================================================== */ .home .sanpham .section-title-container { padding: 0; } /* --- Gỡ lề âm của UX Builder cắt cụt đáy khối -------------------------------- Người dùng báo 23/08/2026: hàng thương hiệu thứ hai (DJI, Yamaha…) sát đáy thẻ trắng, không cân với khoảng trắng giữa hai hàng. Nguyên nhân KHÔNG nằm ở CSS của theme mà ở CSS nội tuyến do Flatsome UX Builder sinh ra từ thiết lập lề của cột trong trình dựng trang: #col-1411950160 > .col-inner { margin-bottom: -33px } @media (min-width: 550px) … -21px @media (min-width: 850px) … -23px Lề âm kéo đáy khối cha lên 23px, làm hàng thứ hai TRÀN ra ngoài thẻ trắng — đo được nhãn "DJI" nằm thấp hơn đáy thẻ 5px. ⚠️ `!important` Ở ĐÂY LÀ BẮT BUỘC, VÀ KHÔNG THỂ NEO THEO ID. Bộ chọn kia là (1,1,0) và nằm nội tuyến trong trang nên nạp sau mọi file CSS — không bộ chọn nào trong file này thắng được bằng độ ưu tiên. Neo theo `#col-1411950160` cũng vô ích vì UX Builder sinh lại id khác mỗi lần render (xem ghi nhớ về bẫy UX Builder). Chỉ còn đường neo theo cấu trúc + !important. Kiểm chứng trước khi đặt: quét cả 41 phần tử `.home .sanpham .col > .col-inner` thì CHỈ 1 cái có lề khác 0, và đó chính là cái lề âm này. Không có lề dương nào bị luật này xoá oan. Kết quả đo trên dev, khung 1920px: trước: đáy thẻ 841 · dưới nhãn hàng 2 = −5px (tràn) · giữa hai hàng 18px sau : đáy thẻ 864 · dưới nhãn hàng 2 = 18px · giữa hai hàng 18px Cách sửa tận gốc là bỏ thiết lập lề âm trong UX Builder, nhưng thiết lập đó nằm trong nội dung trang (database) chứ không nằm trong git. -------------------------------------------------------------------------- */ .home .sanpham .col > .col-inner { margin-bottom: 0 !important; } /* * ⚠️ CĂN TRÁI, KHÔNG CĂN GIỮA. ĐỪNG ĐỔI LẠI. * * Bản trước căn giữa tiêu đề mục cho khớp với ba module tự viết. Cách đó hoà * giải được thứ bậc nhưng đẩy trang vào lỗi nặng hơn: đo được 11 khai báo * `text-align: center` trên bốn file — H1 giữa, mọi H2 giữa, câu phụ giữa, * nhãn số liệu giữa, nút giữa. Không còn một trục lệch nào, mà trang không có * trục lệch thì mắt không có chỗ bám, đọc ra phẳng và máy móc. * * Hướng đã chọn ngược lại: **chỉ hero căn giữa, mọi tiêu đề mục căn trái.** * Phá đối xứng đúng một lần là đủ, và cái được phá phải là cái quan trọng nhất. * * Tiêu đề trái + "Xem tất cả" phải là mẫu đầu mục có hành động, hoàn toàn khác * mẫu bị cấm "thẻ nhãn trái / tiêu đề phải" (nhãn `01 · MỤC` ở cột hẹp bên * trái, tiêu đề ở cột bên phải). Ở đây không có nhãn số nào cả. */ .home .sanpham .section-title.section-title-normal { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--ht-cach-4); /* ⚠️ ĐỆM TRÊN LÀ BẮT BUỘC — ĐỪNG ĐƯA VỀ `padding: 0`. Thẻ trắng bọc ngoài (`.col-inner`) có `padding: 0 30px`: đệm NGANG 30px nhưng đệm DỌC bằng 0. Nên nếu tiêu đề cũng không có đệm trên thì chữ dính đúng mép trên thẻ — đo ngày 22/08/2026 được khoảng cách 0px. Bản Flatsome gốc không lộ lỗi này vì nó có `padding: 16px` quanh tiêu đề. */ padding: var(--ht-cach-5) 0 0; margin: 0 0 var(--ht-cach-6); border: 0; text-align: start; } /* Hai là đường kẻ ngang hai bên của Flatsome. Đã display:none sẵn ở bản hiện tại, khai báo lại để không phụ thuộc biến thể section-title khác. */ .home .sanpham .section-title-normal > b { display: none; } /* * ⚠️ PHẢI GIỮ ĐỦ `.section-title-normal.section-title` TRONG BỘ CHỌN. * * Bản đầu viết gọn `.home .sanpham .section-title-main` (0,3,0). Flatsome khai * cùng thuộc tính bằng `.section-title-normal.section-title .section-title-main` * — cũng (0,3,0). Hoà độ ưu tiên thì thắng thua do THỨ TỰ NGUỒN, mà style.css * của theme nạp sau trang-chu.css, nên Flatsome thắng và rule ở đây chết lặng: * CSSOM xác nhận rule có khớp phần tử nhưng cỡ chữ tính ra vẫn là 20px. * * Thêm hai lớp của Flatsome vào bộ chọn đẩy lên (0,5,0), thắng dứt điểm mà * không phải dùng !important. */ .home .sanpham .section-title-normal.section-title .section-title-main { font-family: var(--ht-font-tieu-de); /* 24px cố định, KHÔNG dùng --ht-co-h2. Bản trước dùng --ht-co-h2 nên ở khung nhìn 1920px tiêu đề phình lên 32px — to gấp 1,6 lần bản Flatsome gốc (20px) và người dùng báo "to quá" ngày 22/08/2026. Lý do chọn 24 nằm ở chú thích của token trong tokens.css. */ font-size: var(--ht-co-h2-muc); font-weight: var(--ht-dam-tieu-de); line-height: var(--ht-cao-dong-tieu-de); letter-spacing: var(--ht-gian-tieu-de); color: var(--ht-chu); padding: 0; margin: 0; /* Chữ hoa của Flatsome làm tiêu đề mục trông như nhãn phụ, không như đầu mục. Trả về dạng chữ gốc để nó cùng giọng với ba module tự viết. */ text-transform: none; } /* * Bỏ vạch accent 3px. * * Đây là một trong CHÍN vạch đỏ cạnh trái đo được trên cùng một màn hình: bốn * ô số liệu của khối năng lực và năm tiêu đề mục này. Vạch đậm lệch một cạnh * lặp chín lần không còn là điểm nhấn — nó thành hoa văn nền, và là dấu hiệu * SaaS-2018 dễ nhận nhất. * * Giữ vạch ở ô số liệu (nơi nó phân tách bốn con số), bỏ ở tiêu đề mục (nơi * cỡ chữ và độ đậm đã đủ phân cấp). */ .home .sanpham .section-title-normal.section-title .section-title-main::before, .home .sanpham .section-title-normal.section-title .section-title-main::after { content: none; } /* * "Xem tất cả" nằm bên phải, cùng đường chân chữ với tiêu đề. Đây là mắt thứ * hai của đầu mục: mắt đọc tiêu đề bên trái, muốn xem thêm thì liếc sang phải. */ .home .sanpham .section-title-normal > a { padding: 0; flex: none; font-family: var(--ht-font-than); font-size: var(--ht-co-nho); font-weight: var(--ht-dam-nhan); color: var(--ht-chu-mo); text-decoration: none; white-space: nowrap; /* chữ bấm được không bao giờ xuống hai dòng */ transition: color var(--ht-nhanh) var(--ht-ra); } .home .sanpham .section-title-normal > a:hover, .home .sanpham .section-title-normal > a:focus-visible { color: var(--ht-nhan); } /* ============================================================================= MỘT MÉP TRÁI DUY NHẤT CHO CẢ TRANG — 30px tính từ mép thẻ ----------------------------------------------------------------------------- Viết 20/08/2026. Đo trên dev, viewport 1905px, mép thẻ ở 281px. HIỆN TRẠNG TRƯỚC KHI SỬA — bốn mép trái khác nhau, trải 40px: khối tiêu đề nội dung ───────────────────────── ─────── ──────── Haliti thi công những gì 313 313 Những trường quay đã dựng 313 313 Thương hiệu nổi bật 281 ← 303 Mua theo nhóm thiết bị 281 ← 313 New Arrivals 311 321 Đang bán chạy 311 321 Kiến thức 311 311 Hai khối "Thương hiệu nổi bật" và "Mua theo nhóm thiết bị" có tiêu đề DÍNH SÁT mép thẻ trắng — không một pixel padding nào — trong khi logo bên dưới lại thụt vào 22px. Lệch ngay trong cùng một khối nên đọc ra như lỗi dựng trang, nặng hơn hẳn chuyện 311 với 313 chênh nhau 2px. --------------------------------------------------------------------------- NGUYÊN NHÂN: PADDING DO UX BUILDER ĐẶT, NEO BẰNG ID SINH NGẪU NHIÊN Cả năm khối có cấu trúc HTML giống hệt nhau: .row-small > .col.sanpham > .col-inner > .section-title-container Khác nhau đúng một chỗ — padding trên `.col-inner`, do UX Builder in ra trong thẻ