/*! * ============================================================================ * qi-tokens.css — HỆ DESIGN TOKEN CHUẨN CỦA DỰ ÁN (single source of truth) * ---------------------------------------------------------------------------- * Mục đích: * - Gom TẤT CẢ biến giao diện (màu / font / spacing / bo góc / bóng đổ) về * MỘT nơi duy nhất, thay cho các bộ biến rải rác đang cạnh tranh nhau: * --mau-md, --mau-website, --main-color-*, --color-md ... * - File CHỈ chứa khai báo :root (token), KHÔNG chứa style component, * nên nạp vào là hoàn toàn "trơ" (inert): không tự đổi giao diện, * chỉ có tác dụng ở nơi nào chủ động dùng var(--qi-*). * * Kiến trúc 2 lớp (giữ theo quy ước sẵn có của dự án): * 1) Lớp INPUT thô : --mau-md, --font-chu-dao ... → theme từng tỉnh * chỉ cần GHI ĐÈ vài biến này là đổi được toàn bộ. * 2) Lớp SEMANTIC : --qi-* → component dùng lớp này, không dùng mã màu. * * NGUỒN MÀU KHI CHẠY (runtime source of truth): * Màu chủ đạo mỗi web được cấu hình trong DB (SiteConfig.ColorSite) và được * code-behind của master inject xuống CUỐI dưới dạng: * :root { --mau-md:; --color-md: !important; --b-footer:; } * Vì inject nạp SAU file này (và có !important trên --color-md) nên MÀU DB * LUÔN THẮNG. Các giá trị mặc định bên dưới chỉ là FALLBACK khi web chưa cấu * hình màu. Lớp --qi-* dẫn xuất từ --mau-md/--color-md nên tự bám theo màu DB. * * Cách đổi theme cho 1 tenant (KHÔNG sửa file này): cấu hình ColorSite trong DB, * hoặc trong CSS riêng của tỉnh (nạp SAU file này) đặt: * :root { --mau-md:#004580; --font-chu-dao:"Inter",sans-serif; } * * THỨ TỰ NẠP: nạp file này TRƯỚC bootstrap & CSS skin/tenant & inject màu động. * ============================================================================ */ :root { /* ---- LỚP 1: INPUT THÔ (theme tỉnh ghi đè các biến này) ---------------- */ /* Mặc định lấy đúng palette hiện hành của dự án (qicolordefault.css). */ --mau-md: #004580; /* Màu chủ đạo (primary) */ --mau-md-dark: #003561; /* Primary đậm — dùng cho hover/active */ --mau-md-soft: rgba(0, 69, 128, 0.08); /* Primary nhạt — nền mềm */ --mau-md-contrast: #ffffff; /* Chữ trên nền primary */ --mau-md-accent: #186bcc; /* Màu nhấn phụ (link nổi bật) */ --mau-md-shadow: 0 10px 24px rgba(0, 69, 128, 0.18); --font-chu-dao: "Roboto", Arial, Helvetica, sans-serif; /* Font chính */ --font-tieu-de: var(--font-chu-dao); /* Font tiêu đề */ /* ---- LỚP 2: SEMANTIC TOKEN (component chỉ dùng lớp này) --------------- */ /* Thương hiệu — bám theo màu DB: ưu tiên --mau-md, rồi --color-md, cuối cùng fallback */ --qi-primary: var(--mau-md, var(--color-md, #004580)); --qi-primary-dark: var(--mau-md-dark, #003561); --qi-primary-soft: var(--mau-md-soft, rgba(0, 69, 128, 0.08)); --qi-on-primary: var(--mau-md-contrast, #ffffff); --qi-accent: var(--mau-md-accent, var(--qi-primary)); --qi-gradient-primary: var(--mau-md-gradient, linear-gradient(135deg, var(--qi-primary) 0%, var(--qi-primary-dark) 100%)); /* Trạng thái */ --qi-danger: #e20001; /* Đỏ cảnh báo (theo .rssxemthem hiện tại) */ --qi-warning: #ffd800; /* Vàng nhấn (theo .highline hiện tại) */ --qi-success: #1e7e34; /* Bề mặt & nền */ --qi-body-bg: #fdf2d6; /* Nền trang hiện tại (kem) */ --qi-surface: #ffffff; --qi-surface-soft: #f7f7f7; /* Viền & chữ */ --qi-border: #e5e7eb; --qi-border-strong: #d1d5db; --qi-text: #1c1c1c; /* Chữ chính hiện tại */ --qi-muted: #64748b; /* Chữ phụ / mờ */ --qi-link: var(--qi-accent); /* Typography */ --qi-font-family: var(--font-chu-dao, "Roboto", Arial, Helvetica, sans-serif); --qi-font-heading: var(--font-tieu-de, var(--qi-font-family)); /* Bo góc */ --qi-radius-sm: 8px; --qi-radius-md: 12px; --qi-radius-lg: 16px; /* Bóng đổ */ --qi-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --qi-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08); --qi-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12); --qi-shadow-primary: var(--mau-md-shadow, 0 10px 24px rgba(0, 69, 128, 0.18)); /* Chuyển động */ --qi-transition: 180ms ease; /* ---- ALIAS TƯƠNG THÍCH NGƯỢC ----------------------------------------- */ /* Giữ các tên biến CŨ trỏ về token chuẩn, để CSS/HTML hiện tại không vỡ. Khi migrate xong có thể xoá dần các alias này. */ --mau-website: var(--qi-primary); --color-md: var(--qi-primary); --main-color-big-title: var(--qi-primary); --main-color-medium-title: var(--qi-primary); --main-color-small-title: var(--qi-primary); --main-color-pre-content: var(--qi-text); }