/* Hallmark · genre: modern-minimal · nav: N11 mega-menu (giữ nguyên cấu trúc) * design-system: tokens.css · pre-emit critique: P5 H4 E5 S5 R5 V3 */ /* ============================================================================= Đầu trang — toàn site ----------------------------------------------------------------------------- ⚠️ FILE NÀY NẠP TRÊN MỌI TRANG. Sửa ở đây là đổi cả 2.600 URL, và header chứa tìm kiếm + tài khoản + giỏ hàng nên phải thử lại luồng mua hàng trên điện thoại trước khi lên live. --------------------------------------------------------------------------- CHỈ SỬA MÀU VÀ CHỮ — KHÔNG ĐỔI BỐ CỤC. Bản audit gọi header hiện tại là "AI nav". Đúng về hình dáng, nhưng sai về kết luận nên làm gì: site này có 37 mục menu, một ô tìm kiếm, tài khoản và giỏ hàng WooCommerce. Trong bộ archetype của Hallmark thì đó chính là N11 mega-menu — và Haliti đã dùng đúng N11 rồi. Đổi sang N5 floating pill (mặc định của genre modern-minimal) sẽ không chứa nổi ba thứ đó. Nên việc cần làm ở đây không phải dựng lại nav mà là kéo nó về đúng bảng màu. --------------------------------------------------------------------------- BA LỆCH ĐO ĐƯỢC (17/08/2026, Chrome) .header-bottom nền rgb(221, 51, 51) = #DD3333 ⚠️ KHÔNG PHẢI đỏ thương hiệu #D12124. Hai sắc đỏ khác nhau trên cùng một trang: thanh nav một sắc, mọi nút và mọi vạch nhấn một sắc khác. Chênh lệch nhỏ nên không ai gọi tên được, nhưng mắt thấy là trang thiếu chỉn chu. chữ link rgb(0, 0, 0) đen tuyệt đối và rgb(40, 39, 38) Bảng màu dùng mực oklch(21.8%) = #1A1A1A. Đen tuyệt đối đọc ra cứng và tổng hợp. font lọt "arial" bên cạnh Be Vietnam Pro Brand chốt một họ chữ; arial là mặc định của trình duyệt chui vào ở chỗ nào đó chưa khai font-family. ========================================================================== */ /* --- Bộ chuyển ngôn ngữ hỏng: ẩn đi ------------------------------------- ⚠️ ĐÂY LÀ BẢN VÁ TẠM. NGUỒN TIÊM CHƯA GỠ ĐƯỢC. Kiểm chứng ngày 18/08/2026 bằng cú bấm thật trên Chrome: · vn1.png và en1.png đều trỏ `javascript:void(0)` · bấm cờ Anh rồi chờ 3 giây — trang KHÔNG dịch một chữ nào, vẫn nguyên "Thiết kế và thi công trường quay ảo…", "Liên hệ chúng tôi", "Giỏ hàng" · nhưng 2 script từ translate.google VẪN nạp trên mọi lượt vào trang, kèm 3 ảnh cleardot.gif 0×0 — tàn dư widget Google Translate cài dở Tức là: script còn, dây nối đứt. Người dùng bấm vào thì không có gì xảy ra — tệ hơn cả việc không có nút, vì nó hứa một thứ rồi không làm. Đã tìm nguồn tiêm ở SÁU chỗ, không thấy: repo theme/plugin · theme_mod header_top_elements_* · UX Block · custom_css · thư mục plugins · theme cha Flatsome. Nghi phạm còn lại là một khối HTML trong header builder. CSS chỉ giấu phần nhìn thấy. Hai script translate.google VẪN TẢI — mỗi lượt xem trang vẫn là một request sang Google. Muốn hết hẳn thì phải tìm và gỡ khối tiêm; xem ghi chú bàn giao. ------------------------------------------------------------------------ */ .header-top a[href^="javascript:void"], .header-top a[href="#"]:has(> img[src*="cleardot"]) { display: none; } /* --- Thanh menu: trả về đúng đỏ thương hiệu ------------------------------ */ .header-wrapper .header-bottom, #masthead .header-bottom { background-color: var(--ht-nhan); } /* --- Chữ: về mực của hệ thống, bỏ đen tuyệt đối -------------------------- */ #masthead .header-main a, #masthead .header-top a { color: var(--ht-chu); } #masthead .header-bottom a { color: var(--ht-chu-tren-nhan); } #masthead .header-bottom a:hover, #masthead .header-bottom a:focus-visible { color: var(--ht-chu-tren-nhan); text-decoration: underline; text-underline-offset: 4px; } /* --- Font: chặn arial lọt vào ------------------------------------------- Khai lại ở cấp header thay vì đi dò từng phần tử — rẻ hơn và không bỏ sót chỗ nào. Mọi thứ trong header thừa kế Be Vietnam Pro trừ khi có khai báo riêng đè lên. ------------------------------------------------------------------------ */ #masthead, #masthead input, #masthead button, #masthead select { font-family: var(--ht-font-than); } /* --- Số điện thoại: nâng thành hành động chính -------------------------- Với khách B2B, số điện thoại LÀ đường chuyển đổi — không phải giỏ hàng. Hiện nó đang là dòng chữ 15px nằm dưới nhãn "Liên hệ chúng tôi" 12,8px, cạnh một biểu tượng người đeo tai nghe và một mũi tên xổ xuống. Bốn phần tử cho một việc, và phần tử quan trọng nhất lại nhỏ nhất. Đảo lại: nhãn thu nhỏ và mờ đi, số điện thoại to lên và đậm lên. ------------------------------------------------------------------------ */ /* ⚠️ PHẢI TRỎ CẢ BÊN TRONG, KHÔNG CHỈ THẺ . Flatsome bọc số trong ``, và cỡ chữ nằm ở span đó chứ không ở . Bản đầu chỉ khai cho nên đo ra vẫn 15px/500 — rule khớp phần tử nhưng phần tử đó không cầm cỡ chữ. */ #masthead .header-main a[href^="tel:"], #masthead .header-main a[href^="tel:"] span { font-size: var(--ht-co-h3); font-weight: var(--ht-dam-tieu-de); letter-spacing: var(--ht-gian-tieu-de); color: var(--ht-chu); white-space: nowrap; /* số điện thoại không bao giờ xuống hai dòng */ } #masthead .header-main a[href^="tel:"]:hover, #masthead .header-main a[href^="tel:"]:focus-visible { color: var(--ht-nhan); } /* --- Logo: giữ đúng tỷ lệ, không bóp méo ------------------------------- Đo ngày 22/08/2026 trên bản dựng lại từ dev: file gốc haliti-logo-2000-2000-e1750507705769.jpg 1907×707px tỷ lệ 2,70 hiển thị 155×96px tỷ lệ 1,61 Logo đang bị BÓP NGANG KÉO DỌC, không phải bị mờ do phóng to — file gốc to gấp 12 lần chỗ cần dùng. Nguyên nhân: CSS nội tuyến Flatsome sinh từ Customizer đặt `#logo{width:155px}` và `#logo img{max-height:96px}`. Ảnh nhận đủ cả hai chiều nên `object-fit` mặc định là `fill` kéo ảnh cho vừa hộp, méo tỷ lệ. Sửa: bỏ ràng buộc cứng, chỉ giữ hộp giới hạn 155×96 và để ảnh tự co theo tỷ lệ thật bên trong hộp đó. Dùng hai `#` để thắng `#logo img` nội tuyến mà không phải viết `!important`. ⚠️ Hệ quả cho người làm ảnh: chiều RỘNG mới là cạnh quyết định, không phải chiều cao. Với tỷ lệ logo hiện tại, ảnh sẽ hiện 155×57px chứ không phải 155×96px — logo trông thấp hơn trước, đó là kích thước ĐÚNG. ------------------------------------------------------------------------ */ #masthead #logo img { width: auto; height: auto; max-width: 100%; max-height: 96px; object-fit: contain; } /* --- Ô tìm kiếm: nhẹ đi ------------------------------------------------ Viền cứng làm ô đọc như trường nhập trong trang quản trị. Ô tìm kiếm của cửa hàng nên là một vùng mời gõ: nền xám rất nhạt, viền chỉ hiện khi focus. ⚠️ ĐỪNG TÔ NỀN VÀO INPUT — VỆT NỀN SẼ THÒ RA NGOÀI KHUNG. Đo trên bản dựng lại từ dev ngày 22/08/2026 (khung nhìn 1905px): form.searchform 350px trái 418 · phải 768 ← khung nhìn thấy div.flex-row 346px trái 420 · phải 766 div.flex-col.flex-grow 360px trái 420 · phải 780 ← TRÀN khỏi hàng cha input.search-field 356px trái 420 · phải 776 ← thò 8px khỏi khung Cột chứa input nhận 360px trong khi hàng cha chỉ 346px. Đã thử sáu cách gỡ (min-width:0 cho cột, cho cả input, overflow:hidden ở cột và ở form, đổi flex-basis) — CẢ SÁU đều không đổi được một pixel nào. Đã kiểm chứng công cụ đo bằng cách ép width:100px: rect đổi đúng 100, nên phép đo là tin được và cột thật sự cứng ở 360px. Chưa truy ra vì sao flex không co. Nhưng chừng nào input còn trong suốt thì phần tràn đó không ai nhìn thấy — nên đây là chỗ cần giữ, không phải chỗ cần sửa cho đẹp lý thuyết. Diện mạo của ô (nền trắng, viền 1px #111, bo 5px, cao 50px) do CSS trong CUSTOMIZER quy định — nằm trong database, không có trong git, và nạp SAU mọi file CSS nên luôn thắng. Muốn đổi hình thức ô thì sửa ở Customizer, sửa ở đây vô ích. ------------------------------------------------------------------------ */ /* Chặn phần tràn 8px nói trên sơn ra ngoài khung, kể cả khi sau này có ai tô nền lại cho input. Form có bo góc nên cắt theo đúng đường bo. */ #masthead .searchform { overflow: hidden; } /* Input và nút để trong suốt — nền của ô do form gánh, xem cảnh báo bên trên. */ #masthead .searchform input[type="search"], #masthead .search-field, #masthead .searchform .ux-search-submit { background-color: transparent; border: 0; box-shadow: none; color: var(--ht-chu); } #masthead .searchform input[type="search"]::placeholder, #masthead .search-field::placeholder { color: var(--ht-chu-mo); opacity: 1; /* Firefox hạ opacity mặc định, làm placeholder mờ quá mức */ } /* * `:focus-within` chứ không phải `:focus` — con trỏ nằm trong input nhưng khung * nhìn thấy là form, nên trạng thái focus phải vẽ ở form. * * Ở đây CHỈ đặt vòng focus. Đừng thêm `background-color` hay `border-color`: * CSS Customizer nạp sau file này và đã ghim nền trắng + viền #111 cho * `#masthead .searchform`, nên hai thuộc tính đó viết ra cũng không bao giờ * thắng — đã thử và bỏ ngày 22/08/2026. */ #masthead .searchform:focus-within { outline: 2px solid var(--ht-focus); outline-offset: 1px; } /* Đã có vòng focus ở form rồi, thêm vòng nữa quanh input thành hai vòng lồng. */ #masthead .searchform input[type="search"]:focus, #masthead .searchform input[type="search"]:focus-visible, #masthead .search-field:focus { outline: none; } /* --- Ô tìm kiếm: chặn giãn quá dài -------------------------------------- Đo ở khung nhìn rộng: ô rộng 417px, cách "Tài khoản" 292px — không sát. Nhưng ô nằm trong cột giữa co giãn, nên ở dải khung nhìn khác nó kéo dài ra và tiến sát cụm tài khoản/giỏ hàng. Chặn bằng `max-width` thay vì đặt chiều rộng cố định: ô vẫn co lại được trên màn hẹp, chỉ không giãn quá 520px trên màn rộng. Quá 520px thì ô tìm kiếm không dễ dùng hơn — chuỗi người ta gõ hiếm khi dài thế — mà chỉ hút mất khoảng thở giữa ba cụm của header. ------------------------------------------------------------------------ */ /* ⚠️ KHÔNG THÊM `margin-inline: auto`. ĐÃ THỬ VÀ HỎNG. Ô tìm kiếm nằm trong một cột flex. Cặp `max-width` + `margin auto` căn giữa nó trong cột đó, và vì cột rộng hơn 520px nên ô bị ĐẨY SANG PHẢI: đo được khoảng cách tới "Tài khoản" tụt từ 292px xuống 198px — đúng cái cần tránh. Chỉ đặt max-width, để ô giữ nguyên mép trái của cột. */ #masthead .header-search-form, #masthead .searchform, #masthead form[role="search"] { /* 350px theo yeu cau nguoi dung 18/08/2026. ⚠️ `max-width` MOT MINH LA KHONG DU — DA THU VA TRUOT. max-width chi la TRAN. O tim kiem nam trong mot cot flex, va o khung nhin 958px container bop no con 297px — chua bao gio cham tran 350. Bo ba nay moi ra dung 350px: width 350px — chieu rong that flex-shrink 0 — cam cot flex bop no lai max-width 100% — nhung van co duoc khi container HEP HON 350, neu khong header se tran ngang tren dien thoai */ width: 350px; flex-shrink: 0; max-width: 100%; } /* --- Thanh trên: cùng lề với cụm tài khoản/giỏ hàng --------------------- Đo được ở khung nhìn rộng: mép phải "Hệ thống Showroom" = 1623, mép phải "Giỏ hàng" = 1623 — TRÙNG KHÍT. Nên lệch chỉ xảy ra ở một dải khung nhìn khác, do thanh trên và hàng chính dùng lề ngang khác nhau. Ép hai vùng dùng chung một bề rộng và một lề, để chúng thẳng hàng ở MỌI khung nhìn chứ không chỉ ở khung rộng. ------------------------------------------------------------------------ */ #masthead .header-top > .flex-row, #masthead .header-main > .flex-row { max-width: var(--ht-rong-khoi); margin-inline: auto; padding-inline: 15px; box-sizing: border-box; } /* --- Vòng focus: bàn phím phải thấy được mình đang ở đâu ----------------- Header là nơi người dùng bàn phím đi qua đầu tiên trên mọi trang. Vòng focus hiện tức thì, không transition. ------------------------------------------------------------------------ */ #masthead a:focus-visible, #masthead button:focus-visible, #masthead input:focus-visible { outline: 2px solid var(--ht-focus); outline-offset: 2px; } /* Trên nền đỏ thì vòng focus màu đỏ sẽ chìm — đổi sang trắng. */ #masthead .header-bottom a:focus-visible { outline-color: var(--ht-chu-tren-nhan); } /* --- Điện thoại ---------------------------------------------------------- */ @media (max-width: 40rem) { /* Vùng bấm tối thiểu 44px theo WCAG — header là nơi có nhiều biểu tượng nhỏ nhất trang (tài khoản, giỏ hàng, tìm kiếm). */ #masthead .header-main a, #masthead .header-bottom a { min-height: 44px; display: inline-flex; align-items: center; } }