/*! * ============================================================================ * 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; } /* ============================================================================= MENU CHÂN TRANG — CHO HÀNG XUỐNG DÒNG, ĐỪNG BÓP TỪNG MỤC (2026-08-12) User báo "menu footer xấu" (thpttrannguyenhan.haiphong.edu.vn): mỗi nhãn bị vỡ giữa cụm từ — "GIỚI / THIỆU", "KỶ NIỆM 50 NĂM THÀNH LẬP / TRƯỜNG". Đo trên trang thật: 8 mục có tổng bề rộng chữ 977px, cộng đệm ~192px ≈ 1.169px, trong khung ~1.148px. Hàng đặt `flex-wrap: nowrap` mà mục lại `flex: 0 1 auto` (CO ĐƯỢC) ⇒ thiếu ~21px là MỌI mục cùng bị bóp, chữ vỡ hàng loạt. Cách chữa: cho HÀNG xuống dòng (mục cuối rơi xuống dòng hai) và giữ mỗi nhãn trên MỘT dòng. Không đụng markup để giữ đúng bản port. ========================================================================== */ .menu-list .list-inline.d-xl-flex { flex-wrap: wrap; } .menu-list .list-inline.d-xl-flex > li { flex: 0 0 auto; /* không cho co lại: thiếu chỗ thì xuống dòng, không bóp chữ */ } .menu-list .list-inline.d-xl-flex > li > a { white-space: nowrap; } /* ============================================================================= LỚP TIỆN ÍCH KHOẢNG CÁCH DÙNG CHUNG (2026-08-12) User báo "style lại chân trang để chữ và Icon không dính vào nhau và dính vào mép" (ptanhxtanh.haiphong.edu.vn). Đo trên trang thật: icon chân trang có sẵn class `mr-10` nhưng `margin-right` tính ra **0px** ⇒ khe icon–chữ **0px**. Nguyên nhân rộng hơn cái chân trang: các lớp dạng `mr-10`/`mt-10`/`pl-15`/`wi-15` (số > 5 nên KHÔNG thuộc bộ tiện ích Bootstrap) chỉ được định nghĩa trong `htmlib/duan/hp/assets/css/Module/content.compiled.css` — tệp của MỘT mẫu. Tenant nào không nạp tệp đó thì mất sạch khoảng cách ở mọi nơi dùng các lớp này (rà được 36 lớp × hơn 150 chỗ trong mã). Chép ĐÚNG giá trị gốc sang đây (tệp nạp từ `_MasterAll` nên áp cho mọi giao diện); tenant vốn đã nạp tệp gốc thì giá trị y nguyên ⇒ KHÔNG đổi hình thức. ========================================================================== */ .mb-10 { margin-bottom: 10px !important; } .mb-12 { margin-bottom: 12px !important; } .mb-15 { margin-bottom: 15px !important; } .mb-20 { margin-bottom: 20px !important; } .ml-10 { margin-left: 10px !important; } .ml-14 { margin-left: 14px !important; } .ml-30 { margin-left: 30px !important; } .mr-6 { margin-right: 6px !important; } .mr-8 { margin-right: 8px !important; } .mr-10 { margin-right: 10px !important; } .mr-13 { margin-right: 13px !important; } .mr-15 { margin-right: 15px !important; } .mr-25 { margin-right: 25px !important; } .mt-6 { margin-top: 6px !important; } .mt-9 { margin-top: 9px !important; } .mt-10 { margin-top: 10px !important; } .mt-14 { margin-top: 14px !important; } .mt-15 { margin-top: 15px !important; } .mt-17 { margin-top: 17px !important; } .mt-20 { margin-top: 20px !important; } .mt-30 { margin-top: 30px !important; } .mt-50 { margin-top: 50px !important; } .pb-10 { padding-bottom: 10px !important; } .pb-20 { padding-bottom: 20px !important; } .pb-50 { padding-bottom: 50px !important; } .pl-7 { padding-left: 7px !important; } .pl-10 { padding-left: 10px !important; } .pl-15 { padding-left: 15px !important; } .pl-20 { padding-left: 20px !important; } .pr-10 { padding-right: 10px !important; } .pr-15 { padding-right: 15px !important; } .pt-10 { padding-top: 10px !important; } .pt-20 { padding-top: 20px !important; } .wi-10 { width: 10px !important; } .wi-14 { width: 14px !important; } .wi-15 { width: 15px !important; } .wi-42 { width: 42px !important; } /* Chân trang: chừa lề hai bên ở khổ máy tính. Khối thông tin mang `p-2 p-xl-0` nên từ 1200px trở lên đệm về 0 ⇒ chữ sát mép (đo được chỉ còn 12px của thẻ bọc). Dùng padding chứ không margin để không đổi bề rộng khối. */ @media (min-width: 1200px) { footer.footer .container.w-1300, footer.footer > aside.w-1300 { padding-left: 20px !important; padding-right: 20px !important; } }