/* ========================================================================= NgoiSaoXanh — design tokens Nguồn: yeu-cau-du-an.md §3 (màu), §5 (chữ), §31 (ít bo góc, shadow nhẹ). Mọi giá trị màu/khoảng cách/cỡ chữ trong CSS mới PHẢI lấy từ biến ở đây. ========================================================================= */ :root { /* Bảng màu theo ma-mau.css (gốc dự án), tên biến ghi trong ngoặc */ /* ---- Màu nền ---- Chuẩn là --surface (#127552 = hsl 159°, 73%, 26.5%). Các màu nền khác giữ nguyên sắc độ + độ bão hoà, chỉ đổi độ sáng theo bậc: bg-3 11.5% < bg-0 16.5% < bg-1 19.5% < bg-2 22.5% < surface 26.5% < surface-2 33%. Đổi --surface thì tính lại cả dãy theo cùng tỉ lệ. */ --bg-0: #0B4933; /* nền chính của trang (--bg) */ --bg-1: #0D563C; /* section xen kẽ (--bg-section) */ --bg-2: #0F6346; /* section xen kẽ 2 (--bg-section-alt) */ --bg-3: #083324; /* footer / nền sâu nhất (--bg-deep) */ --surface: #127552; /* card, input, dropdown (--surface) — MÀU CHUẨN */ --surface-2: #169267; /* card hover, tab active (--surface-hover) */ /* ---- Accent: chỉ dùng cho CTA, active, line, số, icon, highlight ---- */ --accent: #20E85A; /* (--primary) */ --accent-2: #4DFF78; /* hover của accent (--primary-light) */ --accent-ink: #03170F; /* chữ đặt trên nền accent */ --accent-soft: rgba(32, 232, 90, .12); --accent-line: rgba(32, 232, 90, .35); /* (--border-primary) */ --accent-line-strong: rgba(32, 232, 90, .65); /* viền nút outline, nút tròn (--border-primary-strong) */ --glow: 0 0 30px rgba(32, 232, 90, .18); /* (--glow-primary) */ /* ---- Chữ ---- */ --text: #F4F8F5; /* tiêu đề, chữ nổi bật (--text) */ --text-2: #E0E9E4; /* body text (--text-secondary); đạt AA trên --surface */ --muted: #CBD7D1; /* (--text-muted); đạt AA trên các nền --bg-*, trên --surface chỉ ~3.8:1 → chữ nhỏ trên card dùng --text-2 */ --muted-2: #A3B5AC; /* ghi chú, placeholder (--text-subtle); chỉ đạt AA trên --bg-0/--bg-3, không dùng cho chữ nhỏ trên --surface */ /* ---- Viền ---- */ --border: rgba(255, 255, 255, .10); /* (--border) */ --border-strong: rgba(255, 255, 255, .16); /* (--border-light) */ --border-bright: rgba(255, 255, 255, .45); /* viền nút phụ trắng trên ảnh ("Xem dự án") */ /* ---- Khung kính mờ đặt trên ảnh (panel "Năng lực & Cam kết") ---- */ --panel: rgba(13, 86, 60, .72); /* = --bg-1 */ /* ---- Trạng thái ---- */ --danger: #FF6B6B; --warning: #F5C451; --info: #6FC3FF; --success: var(--accent); --warm: #D8B878; /* ánh đèn vàng công trình — điểm nhấn hiếm (--warm) */ /* ---- Card sáng trên nền tối (khối "Năng lực & Cam kết") ---- */ --cream: #ecf6e7; /* nền card trắng kem */ --cream-2: #d9ecd3; /* khối nổi trên nền kem (ô Tóm tắt, đầu bảng trong bài viết) */ --cream-line: #20E85A; /* rgba(8, 51, 36, .12); /* viền / vạch trên nền kem */ --cream-ink: #083324; /* chữ tiêu đề trên nền kem (= --bg-3) */ --cream-ink-2: #3A4F45; /* chữ mô tả trên nền kem, đạt AA */ /* ---- Overlay ảnh ---- */ /* rgb(11, 73, 51) = --bg-0 */ --overlay: linear-gradient(180deg, rgba(11, 73, 51, .15) 0%, rgba(11, 73, 51, .55) 55%, rgba(11, 73, 51, .92) 100%); --overlay-side: linear-gradient(90deg, rgba(11, 73, 51, .92) 0%, rgba(11, 73, 51, .6) 45%, rgba(11, 73, 51, .1) 100%); --radial-glow: radial-gradient(60% 50% at 50% 0%, rgba(32, 232, 90, .10) 0%, rgba(32, 232, 90, 0) 70%); /* ---- Font ---- */ --font: "SVN-Avo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* @font-face ở base.css */ --font-sm-bold: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* chữ nhỏ hơn 1rem mà đậm 600+ (khối "CHỮ NHỎ IN ĐẬM" cuối các file CSS) */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Cỡ chữ responsive: min (360px) -> max (1440px) */ --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem); /* hero H1 40 -> 84 */ --fs-h1: clamp(2rem, 1.45rem + 2.6vw, 3.75rem); /* 32 -> 60 */ --fs-h2: clamp(1.625rem, 1.25rem + 1.8vw, 2.75rem); /* 26 -> 44 */ --fs-h3: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); /* 20 -> 28 */ --fs-h4: clamp(1.0625rem, 1rem + .3vw, 1.25rem); /* 17 -> 20 */ --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem); /* 17 -> 20 */ --fs-base: 1rem; /* 16 */ --fs-sm: .875rem; /* 14 */ --fs-xs: .75rem; /* 12 */ --fs-stat: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); /* số liệu "10+" 28 -> 44 */ --fs-index: clamp(2rem, 1.6rem + 1.8vw, 3rem); /* số thứ tự "01" 32 -> 48 */ --lh-tight: 1.1; --lh-heading: 1.2; --lh-base: 1.65; --tracking-tight: -.02em; --tracking-wide: .16em; /* eyebrow, nhãn in hoa */ /* ---- Khoảng cách (nền 4px) ---- */ --sp-1: .25rem; /* 4 */ --sp-2: .5rem; /* 8 */ --sp-3: .75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ --section-y: clamp(4rem, 2.5rem + 6vw, 8rem); /* padding dọc của section: 64 -> 128 */ --gutter: clamp(1rem, .5rem + 2vw, 2rem); /* lề trái/phải container: 16 -> 32 */ /* ---- Khung ---- */ --container: 1280px; --container-narrow: 820px; /* bài viết, form */ --container-wide: 1440px; --section-head-max: 1000px; /* bề rộng tối đa của tiêu đề + mô tả section (căn giữa) */ --header-h: 72px; --topbar-h: 0px; /* thanh trên cùng của header; style.css đặt 36px từ 1024px */ --bottombar-h: 64px; /* thanh Gọi/Zalo/Báo giá trên mobile */ /* ---- Bo góc: ít, nhỏ ---- */ --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ---- Bóng: nhẹ ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --shadow: 0 8px 24px rgba(0, 0, 0, .28); --shadow-lg: 0 20px 48px rgba(0, 0, 0, .38); /* ---- Chuyển động ---- */ --ease: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: .15s; --dur: .3s; --dur-slow: .6s; --zoom: 1.04; /* ảnh hover 1.03–1.05 (§25) */ /* ---- Lớp chồng ---- */ --z-base: 1; --z-dropdown: 50; --z-sticky: 100; --z-header: 200; --z-bottombar: 250; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* ---- Focus ---- */ --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent); }