/* Hallmark · genre: modern-minimal · macrostructure: Split Studio * theme: custom (vibe: "vững chãi, nhà thầu B2B, đỏ Haliti") * paper: oklch(96.7% 0.003 264.5) · accent: oklch(55.4% 0.208 26.9) warm * display + body: Be Vietnam Pro (single-family discipline) * axes: paper=light · display=grotesk-sans · accent=warm * nav: N11 mega-menu · footer: Ft5 statement · enrichment: none * pre-emit critique: P5 H5 E4 S5 R5 V4 */ /* ============================================================================= Haliti 2026 — Bộ design token ----------------------------------------------------------------------------- Nguồn: brand guidelines Haliti + genre modern-minimal của Hallmark. File này CHỈ khai báo biến, không tự áp lên phần tử nào. Phương án màu nền đã chốt (phương án C): - Trang chủ, cửa hàng, danh mục, sản phẩm -> nền sáng - Trang giải pháp, trang dự án -> nền tối Dùng lớp bối cảnh `.ht-toi` trên để đảo bộ biến. --------------------------------------------------------------------------- 17/08/2026 — CHUYỂN TOÀN BỘ SANG OKLCH. Màu nhìn thấy KHÔNG đổi: mỗi giá trị dưới đây là bản chuyển đúng của mã hex cũ (kèm hex gốc trong chú thích để đối chiếu). Đổi cách biểu diễn để về sau chỉnh được độ sáng mà giữ nguyên sắc và độ bão hoà — việc hex không làm được. Ví dụ: cần một sắc đỏ nhạt hơn cho nền tối thì chỉ sửa số L, không phải dò lại cả ba kênh RGB. ========================================================================== */ :root { /* --- Màu thương hiệu ------------------------------------------------- */ --ht-do: oklch(55.4% 0.208 26.9); /* #D12124 đỏ chính */ --ht-do-dam: oklch(47.3% 0.175 26.4); /* #A81B1E trạng thái hover */ --ht-do-nhat: oklch(64.0% 0.208 24.4); /* #F04548 nhãn, nền tối */ /* --- Trung tính ------------------------------------------------------ */ --ht-trang: oklch(100% 0 0); /* #FFFFFF */ --ht-den: oklch(21.8% 0 0); /* #1A1A1A */ --ht-den-phu: oklch(29.7% 0 0); /* #2D2D2D */ --ht-chu-phu: oklch(55.1% 0.023 264.4); /* #6B7280 */ --ht-nen-nhat: oklch(96.7% 0.003 264.5); /* #F3F4F6 */ --ht-vien: oklch(91.2% 0.006 264.5); /* #E0E2E6 */ /* --- Trạng thái ------------------------------------------------------ ⚠️ MÀU LỖI TRÙNG SẮC VỚI MÀU THƯƠNG HIỆU. --ht-loi ở 25,3° còn --ht-do ở 26,9° — lệch 1,6°, mắt không phân biệt được. Nên thông báo lỗi TUYỆT ĐỐI không được dựa vào màu để truyền đạt: luôn kèm nhãn chữ ("Số điện thoại chưa đúng"), không bao giờ chỉ tô đỏ viền ô nhập rồi để người dùng tự đoán. Đây cũng là yêu cầu WCAG 1.4.1 (không dùng riêng màu để truyền thông tin). */ --ht-thanh-cong: oklch(69.6% 0.149 162.5); /* #10B981 */ --ht-canh-bao: oklch(76.9% 0.165 70.1); /* #F59E0B */ --ht-loi: oklch(63.7% 0.208 25.3); /* #EF4444 */ /* --- Vai trò ngữ nghĩa ---------------------------------------------- Luôn dùng nhóm này khi viết CSS, đừng gọi thẳng màu ở trên. Nhờ vậy chỉ cần đảo nhóm này là đổi được cả bối cảnh sáng/tối. */ --ht-nen: var(--ht-trang); --ht-nen-phu: var(--ht-nen-nhat); --ht-chu: var(--ht-den); --ht-chu-mo: var(--ht-chu-phu); --ht-nhan: var(--ht-do); --ht-nhan-hover: var(--ht-do-dam); --ht-chu-tren-nhan: var(--ht-trang); --ht-duong-vien: var(--ht-vien); /* Vòng focus. Tách riêng khỏi --ht-nhan để có thể chỉnh độ tương phản mà không kéo theo màu nút. Phải ≥ 3:1 so với cả hai nền sáng đang dùng. */ --ht-focus: oklch(47.3% 0.175 26.4); /* --- Chữ ------------------------------------------------------------- MỘT HỌ CHỮ, THEO ĐÚNG BRAND GUIDELINES. Genre modern-minimal của Hallmark gọi đây là "single-family discipline": Stripe, Linear, ElevenLabs đều chạy một họ chữ từ đầu tới cuối. Phân cấp không đến từ mặt chữ thứ hai mà đến từ ba thứ bên dưới — DẢI ĐỘ ĐẬM, GIÃN CHỮ, và CỠ CHỮ. Trước đây site chỉ dùng 400/600/700 và không có kỷ luật giãn chữ nào, nên mọi tiêu đề trông như nhau. ⚠️ ĐIỂM ĐỔI MẶT CHỮ NẰM Ở ĐÚNG MỘT DÒNG. Nếu brand duyệt cho thêm mặt chữ tiêu đề riêng, chỉ sửa --ht-font-tieu-de bên dưới và thêm link tải font trong functions.php. Không phải sửa chỗ nào khác — mọi tiêu đề trong theme đều gọi qua biến này. */ --ht-font-tieu-de: 'Be Vietnam Pro', system-ui, sans-serif; --ht-font-than: 'Be Vietnam Pro', system-ui, sans-serif; --ht-font-en: 'Inter', system-ui, sans-serif; /* --- Thang cỡ chữ ---------------------------------------------------- ⚠️ THANG CŨ QUÁ PHẲNG — ĐỪNG QUAY LẠI. Bản trước: h1 48 · h2 36 · h3 24. Đo trên trang thật thì H1 render 42px còn 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 mắt không biết đâu là chính đâu là phụ. Thang mới bước 1,875 lần giữa display và h2 (60/32). Khoảng cách đó đọc được từ xa, kể cả khi liếc nhanh. */ --ht-co-display: clamp(2.125rem, 3.6vw + 0.75rem, 3.75rem); /* 34 → 60px */ --ht-co-h2: clamp(1.5rem, 1.1vw + 1.05rem, 2rem); /* 24 → 32px */ /* Tiêu đề của HÀNG NGANG trên trang chủ (Thương hiệu nổi bật, Mua theo nhóm thiết bị, Đang bán chạy…). Cố ý nhỏ hơn --ht-co-h2 và KHÔNG co giãn. Đây là bậc thứ hai, không phải bậc hai. Ba khối kể chuyện ("Haliti thi công những gì", "Những trường quay Haliti đã dựng", "Nhận tư vấn…") giữ --ht-co-h2 vì chúng là nội dung chính; năm hàng ngang bán hàng chỉ là đầu mục dẫn vào danh sách nên phải nhẹ hơn. Vì sao 24px chứ không phải 20px như bản Flatsome gốc: nhãn dưới mỗi ô chỉ 13,6–14px. Ở 20px thì tỷ lệ chỉ 1,45 lần — đúng cái thang phẳng mà bộ token này sinh ra để thay. 24px cho tỷ lệ 1,7. */ --ht-co-h2-muc: 1.5rem; /* 24px */ --ht-co-h3: 1.25rem; /* 20px */ --ht-co-than: 1rem; /* 16px */ --ht-co-nho: 0.875rem; /* 14px */ --ht-co-nhan: 0.75rem; /* 12px */ /* --- Độ đậm ---------------------------------------------------------- Năm bậc thay vì ba. 800 chỉ dành cho display của trang chủ — đó là thứ thay vai trò của "mặt chữ tiêu đề riêng" trong hệ một họ chữ. */ --ht-dam-display: 800; --ht-dam-tieu-de: 700; --ht-dam-vua: 600; --ht-dam-nhan: 500; --ht-dam-than: 400; /* --- Giãn chữ -------------------------------------------------------- Chữ càng to càng phải bó lại, nếu không các chữ cái trôi rời nhau. Đây là nửa còn lại của phân cấp trong hệ một họ chữ. */ --ht-gian-display: -0.03em; --ht-gian-tieu-de: -0.02em; --ht-gian-nhan: 0.02em; --ht-cao-dong: 1.6; --ht-cao-dong-tieu-de: 1.15; /* --- Khoảng cách ----------------------------------------------------- Thang 4px. Dùng thang này thay vì gõ số lẻ, để nhịp trang đều. */ --ht-cach-1: 4px; --ht-cach-2: 8px; --ht-cach-3: 12px; --ht-cach-4: 16px; --ht-cach-5: 24px; --ht-cach-6: 32px; --ht-cach-7: 48px; --ht-cach-8: 64px; --ht-cach-9: 96px; /* --- Hình khối ------------------------------------------------------- Bo góc rất nhẹ: nghiêm túc, không tròn trịa kiểu hàng tiêu dùng. */ --ht-bo-goc: 6px; --ht-bo-goc-nho: 4px; --ht-bo-goc-tron: 999px; /* Bo góc của THẺ KHỐI trên trang chủ. Phải là 8px, không dùng --ht-bo-goc. Nội dung trang chủ dựng trong UX Builder đặt col_bg_radius="8" cho mọi row, nên .col-inner của Flatsome bo 8px. Module tự viết muốn nằm cùng hàng với chúng thì phải bo đúng con số đó — lệch 2px vẫn nhìn ra được khi hai thẻ xếp sát nhau theo chiều dọc. */ --ht-bo-goc-the: 8px; --ht-vien-manh: 1px; --ht-do-bong: 0 1px 3px oklch(21.8% 0 0 / .08); --ht-do-bong-noi: 0 12px 32px oklch(21.8% 0 0 / .14); /* --- Chuyển động ----------------------------------------------------- Ba tiết tấu có tên, không dùng `ease` mặc định của trình duyệt. Genre modern-minimal gần như không có chuyển động: không hiệu ứng hiện dần khi cuộn, không nảy. Các giá trị này chỉ dùng cho trạng thái hover và focus của phần tử tương tác. */ --ht-ra: cubic-bezier(0.16, 1, 0.3, 1); --ht-vao: cubic-bezier(0.7, 0, 0.84, 0); --ht-ra-vao: cubic-bezier(0.65, 0, 0.35, 1); --ht-nhanh: 120ms; --ht-vua: 220ms; /* --- Bề rộng nội dung ------------------------------------------------ 1343px là bề rộng thật của .col-inner trong .row-small của Flatsome (1370 − 13,5×2). Mọi khối tự viết phải dùng con số này mới thẳng hàng với các khối dựng bằng builder. Đo trên Chrome 16/08/2026. */ --ht-rong-khoi: 1343px; --ht-rong-toi-da: 1200px; --ht-rong-doc: 72ch; /* bề rộng dễ đọc cho đoạn văn dài */ } /* ----------------------------------------------------------------------------- Bối cảnh nền tối — dùng cho trang giải pháp và trang dự án. Chỉ đảo nhóm vai trò ngữ nghĩa, không đụng tới màu gốc. -------------------------------------------------------------------------- */ .ht-toi { --ht-nen: var(--ht-den); --ht-nen-phu: var(--ht-den-phu); --ht-chu: var(--ht-trang); --ht-chu-mo: oklch(73.5% 0.012 264.5); /* #A8ADB5 */ --ht-nhan: var(--ht-do-nhat); --ht-nhan-hover: var(--ht-do); --ht-chu-tren-nhan: var(--ht-trang); --ht-duong-vien: oklch(35.5% 0.006 264.5); /* #3A3D42 */ --ht-focus: var(--ht-do-nhat); --ht-do-bong: 0 1px 3px oklch(0% 0 0 / .5); --ht-do-bong-noi: 0 12px 32px oklch(0% 0 0 / .6); } /* ----------------------------------------------------------------------------- Tôn trọng lựa chọn giảm chuyển động của người dùng. Đặt thời lượng về 1ms chứ không phải 0 — một số trình duyệt bỏ qua sự kiện transitionend khi thời lượng bằng 0, làm hỏng script chờ hiệu ứng kết thúc. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --ht-nhanh: 1ms; --ht-vua: 1ms; } }