/*! * ============================================================================ * 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); } /* ============================================================================= TIÊU ĐỀ CẤP 1 CHỈ DÀNH CHO MÁY ĐỌC (thêm 2026-08-12) Dùng ở `_MasterAll.cshtml`: trang chủ đơn vị trước đây KHÔNG có thẻ `h1` nào. Thẻ này khai chủ đề trang cho máy tìm kiếm và trình đọc màn hình mà KHÔNG chiếm một pixel nào của bố cục. 🔴 Cố ý KHÔNG dùng `display:none` hay `visibility:hidden` — hai cách đó khiến trình đọc màn hình BỎ QUA luôn, tức mất đúng cái mình vừa thêm. Cách dưới đây là cách chuẩn (giữ trong luồng đọc). ========================================================================== */ .qi-h1-seo { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ============================================================================= NÚT TÌM KIẾM TRÊN THANH TRÊN — user báo 2026-08-12 ("lỗi giao diện trang chi tiết tin của hải phòng"): ở TRANG CHI TIẾT nút hiện thành một Ô TRẮNG trên dải xanh, biểu tượng kính lúp biến mất. Nguyên nhân: `htmlib/duan/hp/assets/css/styles.css` khai `.search_button { background: white }`, còn `.btn` của Bootstrap khai `background-color: transparent`. Hai bên **cùng độ ưu tiên (0,1,0)** ⇒ ai nạp SAU thì thắng. Trang chủ và trang trong nạp CSS theo thứ tự khác nhau nên trang chủ ra nền trong suốt (đúng), trang chi tiết ra nền trắng (sai) — icon lại là SVG màu trắng nên mất hút. Ghim nền trong suốt ở đây (tệp này nạp trong `_MasterAll` nên áp cho MỌI trang), độ ưu tiên (0,2,0) để không phụ thuộc thứ tự tệp. ========================================================================== */ a.search_button, .btn.search_button { background: transparent !important; }