/* Hallmark · genre: modern-minimal · footer: Ft5 statement (biến thể có ràng buộc pháp lý) * design-system: tokens.css · pre-emit critique: P5 H5 E4 S5 R4 V4 */ /* ============================================================================= Chân trang — toàn site ----------------------------------------------------------------------------- ⚠️ FILE NÀY NẠP TRÊN MỌI TRANG, không chỉ trang chủ. Sửa ở đây là đổi cả 2.600 URL. Kiểm ít nhất một trang sản phẩm và một trang bài viết trước khi lên live. --------------------------------------------------------------------------- HIỆN TRẠNG ĐO ĐƯỢC (17/08/2026, Chrome) footer-1 3 cột × 343px nền #FFFFFF Hỗ trợ khách hàng · Giới thiệu Haliti · Kết nối với Haliti footer-2 3 cột × 685px nền rgb(245, 248, 253) ← ngoài bảng màu Hệ thống showroom · Chứng nhận · Thông tin công ty absolute-footer nền rgb(77, 77, 77) ← ngoài bảng màu Sáu cột link kèm tiêu đề đậm, thêm hàng biểu tượng mạng xã hội và dòng bản quyền nhỏ ở đáy — đây đúng khuôn chân trang SaaS giống hệt nhau trên hàng nghìn trang. Với một nhà thầu thi công trường quay thì sáu cột link chính sách là sai giọng: thứ khách cần thấy ở chân trang là Haliti có thật, ở đâu, gọi số nào. --------------------------------------------------------------------------- ⚠️ KHÔNG XOÁ WIDGET NÀO. ĐẢO THỨ BẬC, KHÔNG CẮT NỘI DUNG. Chân trang này chứa thứ bắt buộc phải có theo pháp luật và theo yêu cầu thương mại điện tử Việt Nam: · 4 trang chính sách (bảo hành, đổi trả, thanh toán, bảo mật) · số ĐKKD 0108954957 và mã số thuế · hai huy hiệu tinnhiemmang.vn và online.gov.vn Gỡ bất kỳ mục nào trong số đó để "cho gọn" là tạo rủi ro pháp lý, không phải cải tiến thiết kế. Nên cách làm là ĐẢO THỨ BẬC bằng CSS, giữ nguyên mọi widget: trước — sáu cột link ngang hàng nhau, ai cũng như ai sau — địa chỉ và pháp nhân nổi lên trước (bằng chứng Haliti có thật), cụm link chính sách lùi xuống thành một hàng chữ nhỏ mờ ========================================================================== */ /* --- Nền: gom về đúng bảng màu ------------------------------------------- */ .footer-wrapper .footer-1, .footer-wrapper .footer-2 { background-color: var(--ht-nen); border-top: var(--ht-vien-manh) solid var(--ht-duong-vien); } /* * Thanh đáy dùng màu mực của hệ thống thay cho rgb(77,77,77) tuỳ tiện. * oklch(21.8%) đậm hơn hẳn — tương phản với chữ trắng lên 15,9:1, thừa chuẩn * WCAG AAA, trong khi #4D4D4D chỉ đạt khoảng 7,5:1. */ .footer-wrapper .absolute-footer { background-color: var(--ht-chu); color: var(--ht-nen); padding-block: var(--ht-cach-4); font-size: var(--ht-co-nho); } .footer-wrapper .absolute-footer a { color: var(--ht-nen); text-decoration: underline; text-underline-offset: 2px; } /* * ⚠️ CÁC BỘ CHỌN TIÊU ĐỀ WIDGET PHẢI MANG `#footer`. ĐỪNG RÚT GỌN. * * style.css của theme khai `footer#footer span.widget-title { font-size: 14px }` * — có id nên độ ưu tiên (1,1,2). Bản đầu ở đây viết `.footer-wrapper .footer-2 * .widget-title` (0,3,0) và thua sạch: CSSOM cho thấy rule khớp phần tử nhưng * cỡ chữ tính ra vẫn 14px. Thêm `#footer` đẩy lên (1,2,0) — cùng số id, hơn về * số lớp, nên thắng mà không cần !important. */ /* --- Vùng 1: cụm link phụ trợ, ĐẨY XUỐNG hàng thứ yếu ------------------- Đây là bốn trang chính sách + bốn trang giới thiệu + hai mạng xã hội. Cần có, nhưng không phải thứ khách đọc chân trang để tìm. Thu nhỏ chữ, làm mờ màu, bỏ độ đậm của tiêu đề cột — cụm này trở thành một dải tra cứu chứ không còn là sơ đồ trang. ------------------------------------------------------------------------ */ .footer-wrapper .footer-1 { padding-block: var(--ht-cach-6) var(--ht-cach-5); } #footer .footer-1 .widget-title, #footer .footer-1 span.widget-title { font-family: var(--ht-font-than); font-size: var(--ht-co-nhan); font-weight: var(--ht-dam-nhan); letter-spacing: var(--ht-gian-nhan); text-transform: uppercase; color: var(--ht-chu-mo); } .footer-wrapper .footer-1 li a { font-size: var(--ht-co-nho); line-height: 1.9; color: var(--ht-chu-mo); transition: color var(--ht-nhanh) var(--ht-ra); } .footer-wrapper .footer-1 li a:hover, .footer-wrapper .footer-1 li a:focus-visible { color: var(--ht-nhan); } /* --- Vùng 2: pháp nhân và địa chỉ, KÉO LÊN hàng chính ------------------- Hai văn phòng, số ĐKKD, mã số thuế, hai huy hiệu chứng nhận. Với khách doanh nghiệp đang cân nhắc một gói thi công vài trăm triệu, đây mới là phần chân trang họ thật sự đọc. ------------------------------------------------------------------------ */ .footer-wrapper .footer-2 { padding-block: var(--ht-cach-7); border-top: 0; } #footer .footer-2 .widget-title, #footer .footer-2 span.widget-title { font-family: var(--ht-font-tieu-de); font-size: var(--ht-co-h3); font-weight: var(--ht-dam-tieu-de); letter-spacing: var(--ht-gian-tieu-de); text-transform: none; color: var(--ht-chu); } .footer-wrapper .footer-2 .textwidget { font-size: var(--ht-co-than); line-height: var(--ht-cao-dong); color: var(--ht-chu); } /* Địa chỉ là chuỗi dài — cho nó bề rộng đọc dễ chịu thay vì trải hết 685px. */ .footer-wrapper .footer-2 .textwidget p { max-width: 46ch; } /* * Hai huy hiệu chứng nhận: bỏ hiệu ứng, chỉ hạ độ mờ nhẹ khi rảnh tay. * Đây là dấu xác thực pháp lý, không phải nút bấm — không cho chúng cư xử * như nút. */ .footer-wrapper .footer-2 img { max-height: 44px; width: auto; } /* --- Thanh đáy: bỏ dòng bản quyền trùng --------------------------------- ⚠️ ĐỌC TRƯỚC KHI ĐIỀN LẠI `footer_left_text` TRONG CUSTOMIZER. Chân trang từng hiện HAI dòng bản quyền mâu thuẫn nhau: widget text-2 "© 2019 – [ux_current_year] Công Ty TNHH Haliti Việt Nam" footer_left_text "Copyrights © 2021 by CÔNG TY HALITI VIỆT NAM" Dòng thứ hai vừa thừa vừa sai năm — nó tĩnh nên đứng yên ở 2021 trong khi dòng thứ nhất tự cập nhật theo năm hiện tại. Đã xoá `footer_left_text` trong theme_mods. Đừng điền lại; dòng bản quyền đúng nằm ở widget text-2. ------------------------------------------------------------------------ */ /* --- Máy tính bảng và nhỏ hơn -------------------------------------------- */ @media (max-width: 60rem) { .footer-wrapper .footer-2 { padding-block: var(--ht-cach-6); } .footer-wrapper .footer-2 .textwidget p { max-width: none; } } @media (max-width: 40rem) { /* Vùng đáy trên điện thoại: chữ nhỏ nhưng vẫn phải đọc được, và mọi liên kết giữ vùng bấm tối thiểu 44px theo WCAG. */ .footer-wrapper .footer-1 li a, .footer-wrapper .absolute-footer a { display: inline-block; min-height: 44px; line-height: 44px; } } /* ============================================================================= CHÂN TRANG PHẢI THẲNG HÀNG VỚI LOGO — TRỤC 283px ----------------------------------------------------------------------------- Thêm 21/08, chỉnh lại 22/08/2026. Đo trên Chrome, khung nhìn 1920px (clientWidth 1905). ⚠️ TRỤC CỦA SITE LÀ 283, KHÔNG PHẢI 311. ĐỌC KỸ TRƯỚC KHI ĐỔI. Trên site này có hai đường thẳng đứng dễ nhầm với nhau: 283 logo header · H1 trang danh mục · thẻ sản phẩm · gallery trang sản phẩm · CẠNH thẻ trắng trang chủ (281, lệch 2px) 311 mép CHỮ bên trong thẻ trắng trang chủ — thụt vào 30px vì thẻ có padding, KHÔNG phải một trục riêng Bản đầu của luật này đặt trần 1283px để chân trang khớp con số 311. Sai: chân trang không nằm trong thẻ trắng nào, nên phải so với mép ngoài. Khớp 311 là đẩy chân trang thụt vào 28px so với logo — mà logo có mặt trên cả 2.600 URL, còn thẻ trắng chỉ có ở trang chủ. Cách làm hiện tại DÙNG ĐÚNG CƠ CHẾ CỦA HEADER, không phải một con số tự chế: header là `.container` trần 1370px + padding 15px, ra 283 → 1623. Chân trang khai y hệt nên hai bên trùng khít, và nếu sau này đổi bề rộng site thì chỉ cần sửa một chỗ. Trước sửa: mép trái 268, mép phải 1638 — lệch 15px so với logo. Độ ưu tiên (0,3,0) để thắng `.row` của Flatsome (0,1,0), không cần `!important`. ========================================================================== */ .footer-wrapper .footer-1 .row, .footer-wrapper .footer-2 .row, .footer-wrapper .absolute-footer .row { max-width: 1370px; padding-inline: 15px; }