/* ========================================================================== DIGI PIPE — TOKENS Đây là NƠI DUY NHẤT khai báo màu, font, khoảng cách, bóng đổ. Muốn đổi tông cả trang → sửa ở file này, không sửa chỗ khác. Concept thiết kế: "HỒ SƠ KỸ THUẬT MINH BẠCH" Trang phải đọc như một biên bản kiểm định, không phải brochure quảng cáo. ========================================================================== */ :root { /* --------------------------------------------------------------- 1. MÀU — palette "phòng lab nước", NEO THEO LOGO TGLT Gốc: xanh dương logo #249CD8 (hue 236.5°) · xanh lá logo #24A048 (hue 148°). Mọi sắc độ dưới đây giữ nguyên 2 hue đó, chỉ khác độ sáng → cả trang là anh em ruột của logo, logo không còn trông như dán từ chỗ khác vào. Mọi cặp text/nền dưới đây đã ĐO bằng công thức WCAG 2.1, đạt AA (≥4.5:1). Hồ sơ đầy đủ + quy tắc dùng: plans/research/digipipe-tone-mau-nhan-dien.md --------------------------------------------------------------- */ /* Mực — nền tối (section công nghệ) và chữ đậm. Hue 236.5° = ĐÚNG họ màu của logo TGLT, không ngả tím như bản cũ. */ --ink-900: #041e2d; /* nền dark section — chữ trắng 17.09:1 ✓ AAA */ --ink-850: #0b2635; --ink-800: #132d3d; --ink-700: #223d4d; --ink-600: #355060; /* Xám xanh — chữ phụ, viền */ --slate-600: #46596a; --slate-500: #5a6e80; /* 5.28:1 trên trắng ✓ AA */ --slate-400: #7d8f9e; --slate-300: #a9b8c4; --slate-200: #cbd6df; /* Giấy — nền sáng. THỬ NGHIỆM 19-08: chuyển nền từ xám trung tính sang XANH NƯỚC cùng hue logo. Lý do: đo diện tích màu trên trang cũ ra 34% trắng + 33% xám không màu → trang đọc khô như tài liệu, trong khi đây là dịch vụ về NƯỚC. Landing v1 phủ 19% nền xanh nhạt nên mát mắt hơn hẳn. Chỉ đổi NỀN, không đổi chữ: xanh sáng làm chữ chỉ đạt 3.1:1, trượt AA. Mọi cặp chữ/nền dưới đây đã đo lại: thấp nhất là chữ phụ 4.56:1 ✓ AA. */ --paper: #ffffff; --paper-2: #edf4fa; /* chữ phụ 4.76:1 ✓ */ --paper-3: #e5f0f8; /* chữ phụ 4.56:1 ✓ — sát ngưỡng, KHÔNG được làm đậm thêm */ --line: #dde8f1; /* hairline bản vẽ kỹ thuật */ --line-strong: #c9dae7; /* --------------------------------------------------------------- XANH DƯƠNG TGLT — vai trò: HÀNH ĐỘNG (CTA, link, focus, dòng nước) LUẬT BẤT DI BẤT DỊCH: hue khoá ở 236.5° đúng theo logo TGLT. Cần đủ tương phản thì chỉnh ĐỘ SÁNG, TUYỆT ĐỐI KHÔNG chỉnh hue — đó là thứ duy nhất giữ mọi sắc độ trên trang cùng họ với logo. --------------------------------------------------------------- */ --brand-blue: #249cd8; /* MÀU LOGO nguyên bản. CHỈ dùng trên nền tối (5.55:1 trên ink-900). Trên trắng chỉ 3.08:1 → CẤM làm chữ hoặc nền khối lớn. */ --blue-700: #004d73; /* 9.09:1 ✓ AAA — hover / pressed */ --blue-600: #0e5c80; /* 7.34:1 ✓ AAA — CTA chính, link, viền focus. Trùng mã đã chốt cho tài liệu in → web và bản in cùng tông. */ --blue-500: #409cd0; /* 3.05:1 — CHỈ viền, icon, gradient trang trí. Không dùng cho chữ. */ --blue-300: #71c2f2; /* accent trên nền tối (8.71:1 ✓ AAA) */ --blue-100: #d6edfd; --blue-50: #eaf8ff; /* XANH LÁ TGLT — vai trò duy nhất: XÁC NHẬN (dấu tick, đã nghiệm thu). Hue 148° đúng theo logo. Chroma đã tiết chế → không phải xanh lá chói. CẤM dùng làm CTA: xanh lá diện tích lớn đẩy trang sang tông "eco/TPCN". */ --green-700: #206b33; /* 6.54:1 ✓ AA */ --green-600: #338445; /* 4.64:1 ✓ AA — tick trên trắng, nền số bước cuối */ --green-500: #4da55f; /* 3.06:1 — viền */ --green-300: #7dd18b; /* tick trên nền tối (9.25:1 ✓ AAA) */ --green-100: #dbf0dd; /* Cảnh báo — dùng CỰC tiết chế, chỉ ở bảng so sánh & banner nháp */ --amber-600: #b45309; --amber-100: #fdf2df; --red-600: #b42318; --red-100: #fdeceb; /* --------------------------------------------------------------- 2. VAI TRÒ MÀU (semantic) — code section dùng biến này, không gọi thẳng màu thô ở trên --------------------------------------------------------------- */ --bg: var(--paper); --bg-soft: var(--paper-2); --bg-dark: var(--ink-900); --text: var(--ink-900); --text-muted: var(--slate-500); --text-on-dark: #e7eff6; --text-on-dark-muted: #a2b4c4; --border: var(--line); /* Trên nền sáng dùng --accent; trên nền tối dùng thẳng --brand-blue (đó là nơi duy nhất màu logo được xuất hiện nguyên bản). */ --accent: var(--blue-600); --accent-ink: #ffffff; /* --------------------------------------------------------------- 3. CHỮ Inter (đổi 19-08-2026 theo yêu cầu): font giao diện hiện đại, có bộ vietnamese subset trên Google Fonts nên dấu tiếng Việt hiển thị đủ. ⚠️ Lưu ý so với Be Vietnam Pro trước đây: dấu của Inter là dấu thêm vào font Latin chứ không thiết kế riêng cho tiếng Việt, nên ở cỡ chữ nhỏ các tổ hợp dấu chồng (ế, ộ, ữ) hơi chật hơn. Đổi lại chữ Latin và con số gọn, hiện đại hơn. IBM Plex Mono: DNA kỹ thuật/công nghiệp — dùng cho mã bước, nhãn, số liệu. Đây là thứ tạo cảm giác "biên bản đo đạc". --------------------------------------------------------------- */ --font-sans: "Inter", "Segoe UI", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Roboto", Arial, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace; /* Thang cỡ chữ — dùng clamp() để tự co giữa 390px và 1440px */ --fs-display: clamp(2.25rem, 1.35rem + 3.7vw, 4rem); /* 36 → 64 */ --fs-h1: clamp(2rem, 1.35rem + 2.7vw, 3.25rem); /* 32 → 52 */ --fs-h2: clamp(1.625rem, 1.2rem + 1.75vw, 2.5rem); /* 26 → 40 */ --fs-h3: clamp(1.25rem, 1.06rem + 0.78vw, 1.75rem); /* 20 → 28 */ --fs-h4: clamp(1.0625rem, 0.99rem + 0.31vw, 1.25rem); /* 17 → 20 */ --fs-lead: clamp(1.0625rem, 0.98rem + 0.36vw, 1.3125rem); /* 17 → 21 */ --fs-body: 1.0625rem; /* 17 — đọc thoải mái trên mobile */ --fs-sm: 0.9375rem; /* 15 */ --fs-xs: 0.8125rem; /* 13 */ --fs-mono-label: 0.75rem; /* 12 — nhãn mono uppercase */ --lh-tight: 1.12; --lh-snug: 1.28; --lh-normal: 1.62; --lh-relaxed: 1.75; /* Giãn chữ — anh chốt 19-08: mặc định KHÔNG giãn, cần lắm mới giãn chút. Tiêu đề để 0; riêng chữ cực lớn giữ -0.01em vì ở 64px mà tracking 0 thì các chữ cái rời rạc trông lỏng. Nhãn mono viết hoa giữ 0.04em — bỏ hẳn thì các chữ hoa dính vào nhau, đọc không ra. */ --ls-display: -0.01em; --ls-heading: 0; --ls-mono: 0.04em; /* --------------------------------------------------------------- 4. KHOẢNG CÁCH — base 4px --------------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* Nhịp trong khối — 4 bậc DUY NHẤT cho gap giữa cột và padding ruột card. Trước đây mỗi khối tự chế một clamp() riêng (13 công thức khác nhau) nên mắt đọc thấy nhịp lệch dù từng khối không sai. Mọi khối nay chỉ được chọn một trong 4 bậc dưới đây. Cần bậc mới → thêm vào đây, không tự chế tại chỗ. */ --flow-sm: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem); /* 20 → 28 — ruột card nhỏ */ --flow-md: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem); /* 24 → 40 — ruột card chuẩn */ --flow-lg: clamp(2rem, 1.35rem + 2.75vw, 3.5rem); /* 32 → 56 — gap giữa 2 cột */ --flow-xl: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem); /* 40 → 72 — gap khối lớn nhất */ --flow-2xl: clamp(2.5rem, 1.5rem + 4.4vw, 6rem); /* 40 → 96 — hở mở màn (hero) */ /* Đệm dọc mỗi section — thoáng là biểu hiện của sự tự tin */ --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem); /* 56 → 120 */ --section-y-sm: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); /* --------------------------------------------------------------- 5. BỐ CỤC --------------------------------------------------------------- */ --container: 1200px; /* nội dung trong viewport 1440px */ --container-narrow: 820px; /* đoạn văn dài — giữ độ dài dòng dễ đọc */ --container-wide: 1360px; --gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem); --header-h: 68px; /* --topbar-h đã gỡ 19-08-2026 cùng dải topbar. */ /* --------------------------------------------------------------- 6. BO GÓC & BÓNG Bóng cực nhẹ, 2 tầng — trang kỹ thuật không dùng bóng phồng. --------------------------------------------------------------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --shadow-xs: 0 1px 2px rgba(4, 30, 45, 0.05); --shadow-sm: 0 1px 2px rgba(4, 30, 45, 0.05), 0 2px 8px rgba(4, 30, 45, 0.04); --shadow-md: 0 2px 4px rgba(4, 30, 45, 0.05), 0 8px 24px rgba(4, 30, 45, 0.07); --shadow-lg: 0 4px 8px rgba(4, 30, 45, 0.06), 0 16px 48px rgba(4, 30, 45, 0.1); --shadow-focus: 0 0 0 3px rgba(14, 92, 128, 0.32); /* --------------------------------------------------------------- 7. CHUYỂN ĐỘNG --------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); --t-fast: 140ms; --t-base: 240ms; --t-slow: 480ms; /* --------------------------------------------------------------- 8. LƯỚI KỸ THUẬT — hoạ tiết nền "bản vẽ" Đây là chữ ký thị giác của trang. Dùng ở các section "biên bản". --------------------------------------------------------------- */ --grid-size: 28px; --grid-line: rgba(34, 61, 77, 0.055); --grid-line-dark: rgba(255, 255, 255, 0.05); --z-sticky-cta: 60; --z-header: 70; --z-draft: 90; --z-modal: 100; }