/* Design tokens — hướng "Bảo Mật, Kỹ Thuật" (Direction B), rollout dần từng trang. Trang nào load file này thì theo token mới; trang chưa load vẫn dùng style.css/admin-template.css gốc như cũ. Opt-in only: load qua $extraStyles (xem page/terms.php pattern) — KHÔNG phải global replacement cho css/style.css / css/admin-template.css. */ :root { /* Nền */ --bg: #0a0c14; --bg-alt: #10121d; --surface: #141726; --border: #262b40; /* Chữ */ --ink: #eef0ff; --ink-soft: #a7aecb; --ink-faint: #6d7392; /* Accent — bump sáng hơn bản gốc #667eea/#764ba2 cho dễ đọc trên nền tối; bản gốc GIỮ NGUYÊN cho email/trang sáng */ --a1: #5f90f7; --a2: #38bdf8; --accent-soft: rgba(95, 144, 247, .14); /* Semantic (alpha trên nền tối, không dùng bg đặc như bản sáng) */ --danger-bg: rgba(239, 68, 68, .14); --danger-ink: #fca5a5; --success-bg: rgba(16, 185, 129, .14); --success-ink: #6ee7b7; --warning-bg: rgba(245, 158, 11, .14); --warning-ink: #fbbf24; /* Hình khối */ --radius-card: 16px; --radius-pill: 8px; --shadow-card: 0 0 0 1px rgba(95, 144, 247, .12), 0 24px 60px rgba(0, 0, 0, .55); --shadow-hover: 0 0 0 1px rgba(95, 144, 247, .35), 0 0 40px rgba(95, 144, 247, .25); --icon-ring: 0 0 0 6px rgba(95, 144, 247, .08), 0 0 24px rgba(95, 144, 247, .35); /* Số liệu (tiền, %, fraud score...) */ --num-font: 'Courier New', ui-monospace, monospace; /* Glass / iOS (task 056, 2026-08-11) — MỚI, CHƯA áp dụng ở đâu. Task 058 sẽ dùng nhóm này để làm lại .glass-btn (css/style.css:69-110) cho nền tối và thống nhất giá trị blur (khắc phục lệch blur(5px) vs blur(20px) ở style.css:72-73). */ --glass-blur: 20px; /* 1 giá trị canonical thay 2 giá trị lệch nhau */ --glass-bg: rgba(20, 23, 38, .55); /* dựa trên --surface #141726, thêm alpha cho hiệu ứng kính tối */ --glass-border: rgba(95, 144, 247, .22); /* cùng họ màu --a1, nhất quán với --shadow-card/--icon-ring đã có */ --glass-ink: var(--ink); /* alias — chữ sáng trên nền kính tối, tách token riêng để đổi độc lập sau này nếu cần */ --glass-shadow-resting: 0 4px 24px rgba(0, 0, 0, .35); --glass-shadow-hover: 0 8px 32px rgba(95, 144, 247, .25); --glass-radius: 20px; /* khớp border-radius hiện có của .glass-btn, tách khỏi --radius-pill (8px)/--radius-card (16px) vì đây là hình khối pill lớn hơn, không dùng chung 2 token kia */ /* Solid-fill variants (task 059) — --danger-bg/--success-bg chỉ có bản alpha (dùng cho nền khối), 2 token này dành cho fill đặc (data-viz bar/dot) — giá trị y hệt #dc3545/#28a745 cũ, KHÔNG đổi hiển thị, chỉ đặt tên. */ --danger-solid: #dc3545; --success-solid: #28a745; /* =================================================================== Hình khối card + thang khoảng cách dùng chung (task 109, N2 + N3) ------------------------------------------------------------------- KHÁC với --radius-card/--shadow-card ở trên: 2 token kia thuộc hệ Direction B (nền tối, card lớn của landing/pricing). Nhóm dưới đây là hình khối của card *bên trong app* (nền sáng) — trước task này có 7 định nghĩa card song song (.stat-card ×2 file, .card, .content-card, .chart-card, .overview-stat-card, .provider-pill), mỗi cái một bộ padding/radius/shadow riêng, không cái nào giống cái nào. Giá trị chọn nhỏ và nhẹ hơn hiện trạng theo phản hồi chủ dự án 2026-08-14 ("vẫn quá to, thô và xấu"). ⚠️ File này từ task 109 được nạp TOÀN CỤC ở page/_parts/header.php (trước đó chỉ opt-in trên index/pricing/auth). An toàn vì file chỉ khai custom property, không có selector class nào — nhưng nghĩa là đổi giá trị ở đây ảnh hưởng MỌI trang, không còn là opt-in nữa. */ --card-pad: 16px; --card-pad-sm: 6px 10px; /* biến thể pill/chip, nhỏ hơn card thường có chủ đích */ --card-radius: 10px; /* 2026-08-15: shadow đổi sang ám lạnh (rgba 27,32,56 = --n-900) và nhẹ hơn — card giờ đọc ra nhờ hairline --card-border, không còn phải nhờ shadow "gồng" lên để tách khỏi nền. */ --card-shadow: 0 1px 2px rgba(27, 32, 56, .06), 0 1px 3px rgba(27, 32, 56, .04); --card-shadow-hover: 0 4px 12px rgba(27, 32, 56, .09), 0 2px 4px rgba(27, 32, 56, .05); /* Khoảng cách dọc giữa 2 section/card liền kề. Trước task 109 có 3 chỗ hardcode 30px (tình cờ giống nhau, không dùng chung nguồn) và .chart-card thì thiếu hẳn margin-bottom → 2 chart dính nhau 0px. */ --space-section: 24px; /* =================================================================== BẢNG MÀU ỨNG DỤNG (nền sáng) — 2026-08-15 ------------------------------------------------------------------- VÌ SAO CÓ NHÓM NÀY: trước hôm nay app chạy 3 bộ màu thương hiệu song song mà không bộ nào là nguồn chuẩn — · header #313c6d → #523175 (đậm, navy ngả tím) · nút/nav/banner #667eea → #764ba2 (nhạt hơn ~35% lightness) · landing --a1/--a2 (bản cũ #7c8cf3 / #a06de0, nền tối) Cùng hue (~232 indigo / ~272 violet) nhưng lệch độ sáng quá xa nên nhìn như 3 sản phẩm khác nhau trong cùng 1 màn hình. Nhóm dưới đây là MỘT thang duy nhất chứa cả 3 điểm đó: brand-400 = --a1 (landing), brand-600 = nút hành động, brand-800/cyan-800 = header. Đổi tông toàn app giờ = đổi 2 dòng --brand-600/--cyan-600. ⚠️ KHÔNG dùng lại tên --bg/--surface/--ink/--border — đó là hệ tối Direction B ở đầu file, landing.css + auth.css đang đọc. Nhóm này cố ý mang tiền tố --app-* để 2 hệ sống chung không đè nhau. ⚠️ #667eea + chữ trắng = contrast 3.59:1 → TRƯỢT WCAG AA (cần 4.5:1). Đây là lý do khách quan nút primary cũ trông bạc màu. ── SỬA ĐỔI 2026-08-15 (lần 2): BỎ HẲN TÍM ──────────────────────── Bản đầu của nhóm này đi indigo → violet (#4c56d4 → #7546b8). Chủ dự án bác: không muốn tím nữa. Thay bằng XANH DƯƠNG → XANH NGỌC. Vì sao chọn hướng này chứ không phải xanh đơn sắc: · giữ đúng thứ đã được khen ở gradient cũ — có chuyển động màu, nền đậm — chỉ bỏ đúng đầu tím bị bác; · xanh dương–xanh ngọc là hệ màu của sản phẩm bảo mật/giám sát, hợp "phát hiện click gian lận" hơn tím; · KHÔNG lấn ngữ nghĩa đang dùng: xanh lá = thành công, vàng = cảnh báo, đỏ = chặn. Xanh ngọc (petrol, hue ~193) đủ xa xanh lá (hue ~150) để không đọc nhầm thành "OK". Cả 2 đầu gradient đều đạt WCAG AA với chữ trắng: --brand-600 (#2158d8) = 5.99:1 · --cyan-600 (#0e7490) = 5.28:1 */ /* Thang xanh dương (hue ~220) */ --brand-50: #eff5ff; --brand-100: #dbe8fe; --brand-200: #bed3fd; --brand-300: #92b6fb; --brand-400: #5f90f7; /* = --a1, điểm neo với landing (nền tối) */ --brand-500: #3b73ee; --brand-600: #2158d8; /* nút hành động chính — 5.99:1 với chữ trắng */ --brand-700: #1a45ab; /* hover của nút chính */ --brand-800: #26407e; /* = điểm đầu gradient header */ --brand-900: #131d3d; /* Thang xanh ngọc / petrol (hue ~193) — thay hoàn toàn thang violet cũ. Tên token đổi luôn (--violet-* → --cyan-*) để không ai nhìn tên mà tưởng vẫn còn tím. */ --cyan-400: #38bdf8; /* = --a2, điểm neo với landing (nền tối) */ --cyan-500: #0ea5c9; --cyan-600: #0e7490; /* điểm cuối gradient hành động — 5.28:1 */ --cyan-700: #155e75; --cyan-800: #14657f; /* = điểm cuối gradient header */ /* Trung tính ám xanh dương — thay 5 họ xám rời rạc đang dùng lẫn lộn (#e0e0e0 / #e5e7eb / #f0f0f0 / #dee2e6 / #d1d5db cho VIỀN, và #333 / #666 / #374151 / #6b7280 cho CHỮ). Bản đầu ám indigo (b > r rõ, hơi ngả tím); bản này kéo về xanh-thép cho khớp thương hiệu mới. */ --n-25: #f9fbfd; --n-50: #f4f7fb; --n-100: #eaeff7; --n-200: #dfe5ef; --n-300: #c9d2e0; --n-400: #95a0b5; --n-500: #667487; --n-700: #3a4657; --n-900: #16202f; /* Alias ngữ nghĩa — CSS component nên đọc nhóm này, không đọc thẳng thang số ở trên (đổi thang mà không phải sửa component). */ --app-bg: var(--n-50); --app-surface: #ffffff; --app-surface-muted: var(--n-100); /* thead bảng, hàng hover, nút ghost */ --app-border: var(--n-200); /* hairline card/ô/hàng */ --app-border-strong: var(--n-300); /* chân thead, viền nút phụ */ --app-ink: var(--n-900); --app-ink-soft: var(--n-500); --app-ink-faint: var(--n-400); --app-primary: var(--brand-600); --app-primary-hover: var(--brand-700); --app-primary-soft: var(--brand-50); /* nền nhạt: hàng hover, nav hover, chip */ /* 2 gradient — PHÂN VAI RÕ, không dùng lẫn: deep = thanh điều hướng lớn (header) — đậm nhất, làm nền cho mọi thứ brand = khối hành động/nhấn trong nội dung (nút primary, nav active, welcome banner) — sáng hơn header 1 bậc để có phân cấp, vẫn đủ tối cho chữ trắng đạt AA */ --brand-gradient-deep: linear-gradient(135deg, var(--brand-800) 0%, var(--cyan-800) 100%); --brand-gradient: linear-gradient(135deg, var(--brand-600) 0%, var(--cyan-600) 100%); --focus-ring: 0 0 0 3px rgba(33, 88, 216, .28); --shadow-primary: 0 2px 6px rgba(33, 88, 216, .28); --shadow-primary-hover: 0 6px 16px rgba(33, 88, 216, .34); /* Card nền sáng: thêm hairline. Trước đây card chỉ có shadow rất nhạt trên nền #f5f7fa → mép card gần như tan vào nền ("nền card chưa chuyên nghiệp"). 1px viền là thứ làm card đọc ra rõ nét. Shadow cũng đổi sang ám lạnh cùng gia đình --n-900 thay vì xám trung tính. */ --card-border: 1px solid var(--app-border); /* =================================================================== CONTROL LỌC / TÌM KIẾM — một kích thước duy nhất (2026-08-15) ------------------------------------------------------------------- Chủ dự án: *"chuẩn hoá bộ search/filter cho tất cả các page user lẫn admin: control làm nhỏ gọn lại 1 chuẩn, không có padding bao xung quanh để cân bằng layout, mỗi control đều phải có icon"*. Hiện trạng trước đó — 2 họ filter song song, không họ nào là chuẩn: · trang user `.filters-panel` → control cao 42px, bọc trong card trắng padding 25px; · trang admin `.filters-row` → control cao 40px, bọc trong card trắng padding 16px 20px, viền + shadow riêng. Tệ hơn: `.filter-group`, `.filter-select`, `.filter-input`, `.filter-actions`, `.filter-label` được định nghĩa ở CẢ HAI file với giá trị khác nhau — trang nào nạp cả hai stylesheet thì kết quả phụ thuộc thứ tự nạp chứ không phải thiết kế. Chuẩn mới: 34px, khớp đúng thanh lọc toàn cục (--fbar-control-h) mà chủ dự án lấy làm mẫu. Card bọc bị BỎ HẲN — hàng lọc giờ nằm thẳng hàng lề với bảng dữ liệu bên dưới thay vì thụt vào 25px. */ --ctl-h: 34px; /* cao: input, select, nút, toggle — tất cả */ --ctl-radius: 8px; --ctl-pad-x: 10px; --ctl-font: 13px; --ctl-icon: 16px; /* cỡ icon đứng trước control */ --ctl-gap: 8px; /* khoảng cách giữa 2 control liền nhau */ }