/* ============================================================================= 00-tokens.css — CHỈ CHỨA BIẾN. Không rule, không selector nào khác :root. Luật III.4.1 · kế hoạch mục 2.1 ⛔ Giá trị dưới đây là ƯỚC TỪ MOCKUP, CHƯA CHỐT. Kế hoạch 2.1 bắt phải xác minh bằng eyedropper trên ảnh gốc rồi 4T duyệt. Mockup hiện có bị Zalo nén (qa/phan-hoi-mockup.md · PH-01) — màu vùng phẳng vẫn tin được, nhưng phải đo lại khi có ảnh gốc. ⛔ Cột "panel chỉnh được?" của kế hoạch 2.1 là cột quan trọng nhất: CÓ thì KHÔNG viết CSS. Primary color, font, nút mặc định đặt ở Customizer. Biến ở đây chỉ để CSS child tham chiếu. ============================================================================= */ :root { /* --- Màu thương hiệu ------------------------------------------------- */ --tl-navy: #010f38; /* ĐO 18/08: trung vị 4 vùng navy. Kế hoạch ước #0d2b52 — SAI, màu thật tối hơn hẳn. Đặt ở Customizer color_secondary. */ --tl-cam: #eb500e; /* ĐO 18/08: trung vị 4 nút CTA. Đây là màu THƯƠNG HIỆU, chỉ dùng cho thứ KHÔNG mang chữ: nét icon, kẻ ngang, dấu ✓, dấu nháy trang trí. Với trắng chỉ đạt 3,69:1 — đủ cho "đối tượng đồ hoạ" (WCAG 1.4.11 cần 3:1) nhưng KHÔNG đủ cho chữ. */ --tl-cam-chu: #c4400a; /* Cam ĐẬM cho CHỮ và nền nút mang chữ trắng. 5,14:1 cả hai chiều ⇒ đạt WCAG AA (4,5:1). ⛔ Chữ cam nhỏ mà dùng --tl-cam là KHÔNG ĐỌC ĐƯỢC với người mắt kém — site này phục vụ người bệnh. */ --tl-cam-nhat: #fbf4ef; /* ĐO 18/08: band CTA 2 trang */ --tl-xam-nen: #f4f6f9; /* CHƯA ĐO — chưa tìm được vùng xám đủ lớn */ --tl-trang: #ffffff; /* --- Bóng đổ ---------------------------------------------------------- */ --tl-bong: 0 2px 12px rgba(1, 15, 56, .06); /* thẻ ở trạng thái nghỉ */ --tl-bong-noi: 0 10px 26px rgba(1, 15, 56, .13); /* thẻ khi rê chuột (lift) */ /* --- Chuyển động ------------------------------------------------------ */ --tl-chuyen: .2s ease; /* audit 3.7 chốt 0,2s cho mọi hover/focus */ /* --- Nhịp khoảng cách section — BẢNG TRA, KHÔNG phải biến ------------- ⛔ CỐ Ý không khai thành biến CSS. Padding của Section là thuộc tính PANEL (Luật 1 · III.1.2): khai biến rồi viết CSS đè là tước quyền tự chỉnh của 4T. Bảng này để người dựng tra khi gõ vào panel. Đo trên trang-chu.jpg 18/08: khoảng trống giữa các khối là 8 · 8 · 10 · 10 · 19 px (thang ảnh), tỉ lệ 1 : 1,25 : 2,38. ⚠ Tỉ lệ tin được, PX TUYỆT ĐỐI THÌ KHÔNG — mockup thu nhỏ đồng dạng, hệ số thu chưa biết (PH-01). Thang dưới đây neo vào giá trị đang dùng nhiều nhất (40px) chứ không phải quy đổi thẳng từ ảnh. breadcrumb 16px / sm 12px hero mở đầu trang 32px / sm 20px section thường 40px / sm 28px Trước 19/08 có 8 giá trị rời rạc: 0·16·24·32·36·40·48·64. ------------------------------------------------------------------- */ /* --- Hình khối -------------------------------------------------------- */ --tl-bo: 12px; /* bo góc thẻ — panel Image/Button/Col cũng đặt được */ /* --- Bề ngang dải nội dung ------------------------------------------ MỘT công thức duy nhất cho header · thân trang · footer. Ba nơi cùng `var(--tl-be-ngang)` nên logo, nội dung và footer thẳng một mép. ⛔ Customizer `site_width` chỉ nhận MỘT số px cố định (đang 1200 ⇒ .row 1170 ở mọi khổ, để 215px lề chết mỗi bên ở màn 1600). Brief muốn nới DẦN theo khổ màn — panel không diễn đạt được, nên đây là ví dụ hợp lệ của CSS vượt panel. Ba vế: 94vw giữ lề thở · (62vw+396px) là đường brief xin · 1360px trần. 1024 → 962 · 1200 → 1128 · 1280 → 1189 1366 → 1243 · 1440 → 1289 · ≥1555 → 1360 Thoả ĐỒNG THỜI cả hai brief 19/08: trang chủ xin 1120–1160 · 1240–1280 · 1280–1320 · 1360–1380 hành trình xin 1120–1160 · 1240–1280 · ~1280 · tối đa 1360 (Công thức cũ của trang chủ `min(93vw,1380)` thật ra LỆCH brief của chính nó ở 2 khổ: 1200 ra 1116 < 1120, và 1440 ra 1339 > 1320.) ⛔ ĐỪNG đổi sang clamp() có SÀN px: sàn giữ nguyên ở khổ hẹp hơn sàn ⇒ hàng rộng hơn màn hình, tràn phải. min() không có sàn nên tự co. ------------------------------------------------------------------- */ --tl-be-ngang: min(94vw, 62vw + 396px, 1360px); /* --- Breakpoint (ghi để tra, CSS không dùng biến trong @media) -------- Hệ Flatsome: 549 / 849 / 850 (luật III.4.3-3). ⛔ KHÔNG tự chế 768/1024 — lệch mốc với CSS cha tạo vùng 769–849px nơi rule hai bên áp chéo. ------------------------------------------------------------------- */ }