/*! * ============================================================================ * 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; } } /* ===================================================================================================== LƯỚI AN TOÀN CHO NỘI DUNG BÀI VIẾT (2026-08-13) — user báo “một số tin bài trên điện thoại bị kéo dài bất thường”. Gốc rễ nằm ở DỮ LIỆU (bài thiếu một thẻ , đã chữa ở QIWEB_BO/Base/QiCanBangHtml.cs): thẻ còn mở nuốt luôn thẻ đóng của khung bao, khiến các khối phía sau (tệp đính kèm · tác giả · tin cùng chuyên mục) lọt VÀO cùng một hàng flex với nội dung. Khi đó `.col` (flex: 1 1 0) phải chia bề rộng với chúng — đo trên hanoi.edu.vn ở 375px: khối nội dung chỉ còn **148px**, mỗi dòng 3–4 chữ. Quy tắc dưới đây là lớp phòng thủ: nội dung bài LUÔN chiếm trọn hàng của nó, dù bài có soạn sai thẻ. 🔑 Bắt buộc giới hạn `.row >` — chỉ hàng NGANG. Trang chi tiết bản máy tính đặt `.qicontentdetail` trong `.d-flex.flex-column`, ở đó trục chính là DỌC nên `flex-basis:100%` sẽ thành “cao bằng khung” và làm vỡ bố cục. ===================================================================================================== */ .row > .qicontentdetail.col, .row > .qifile.col { flex: 0 0 100% !important; max-width: 100% !important; } /* ===================================================================================================== ẢNH TRONG THÂN BÀI BỊ KÉO DÀI (user báo 2026-08-13, đo trên hanoi.edu.vn/…/ctmb/545/17034). Biên tập viên dán ảnh kèm kích thước cứng `style="width:900px; height:625px"` (đúng tỉ lệ gốc 1,44). Trang điện thoại có luật `.qicontentdetail *{max-width:100% !important}` nên BỀ RỘNG co về 325px, còn CHIỀU CAO vẫn ghim 625px ⇒ ảnh ra 325×625, tỉ lệ **0,52** thay vì 1,44 — người ngồi thành người đứng. Đo được cả 5 ảnh trong bài đều vậy. Chỉ cần cặp đôi `max-width` + `height:auto` đi CÙNG NHAU là hết: ép rộng mà quên cao thì luôn méo. 🔑 Trừ `.item-ratio` — ảnh nằm trong hộp tỉ lệ, phải bám khít bốn cạnh hộp (đã có tiền lệ 2026-08-11: cho nó `height:auto` là ảnh thò ra đè lên tiêu đề tin). ===================================================================================================== */ .qicontentdetail img:not(.item-ratio), .detail_news_content img:not(.item-ratio), .content-detail img:not(.item-ratio) { max-width: 100% !important; height: auto !important; } /* --------------------------------------------------------------------------------------------------- ĐIỆN THOẠI: ảnh trong bài RỘNG BẰNG KHỔ NGANG, cao tự động (user chốt 2026-08-13). Ảnh biên tập viên chèn thường có kích thước cứng theo khổ máy tính (900px, 600px…) nên trên điện thoại mỗi ảnh một cỡ, so le nhau. Cho tất cả bằng bề rộng cột, cao tự tính theo tỉ lệ gốc. 🔑 Chỉ nhắm ảnh THẬT SỰ là ảnh minh hoạ, tránh phóng to mấy ảnh nhỏ chèn giữa dòng chữ (icon, con dấu, biểu tượng) thành mờ nhoè: `.anhnoidung` là lớp hệ thống tự gắn cho ảnh thân bài, còn `img:only-child` là ảnh đứng một mình trong khối của nó — đúng cách biên tập viên chèn ảnh. --------------------------------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .qicontentdetail img.anhnoidung, .content-detail img.anhnoidung, .qicontentdetail p > img:only-child, .qicontentdetail div > img:only-child, .qicontentdetail figure > img, .qicontentdetail > img.img-responsive { width: 100% !important; height: auto !important; } } /* ===================================================================================================== BẢNG DANH SÁCH VĂN BẢN TRÊN ĐIỆN THOẠI (user báo 2026-08-13) — hai chỗ: ① CỘT SỐ THỨ TỰ bị xuống dòng GIỮA HAI CHỮ SỐ ("11" thành "1" / "1"). Đo trên hcm.edu.vn/van-ban/vbmb/42303 ở 375px: ô rộng **17px**, `overflow-wrap: anywhere` (luật chống tràn của vỏ mobile) nên số hai chữ số bị bẻ đôi. `width:1%` trong markup càng ép ô hẹp hết cỡ. Sửa: cấm ngắt trong ô + chừa đủ chỗ cho 3 chữ số (danh sách có thể tới hàng trăm dòng). ② PHÂN TRANG `.qipaging` TRƯỚC ĐÂY KHÔNG CÓ LUẬT CSS NÀO — chỉ là mấy chữ số trần dính nhau ("1 2 … 231 ›"), bấm rất khó trúng trên điện thoại. Cho mỗi số thành một nút vuông tối thiểu 36px (chuẩn vùng chạm), bo góc, trang hiện tại tô đậm; xuống dòng được khi nhiều nút. ===================================================================================================== */ th.qi-stt, td.qi-stt { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; width: 1%; min-width: 3.2em; text-align: center; /* Căn GIỮA theo chiều dọc (user 2026-08-13): tiêu đề văn bản dài 3–4 dòng nên ô cao, số thứ tự dính sát mép trên nhìn lệch hẳn so với dòng tiêu đề. */ vertical-align: middle !important; } .qipaging { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; } .qipaging > a, .qipaging > span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid #d9dee7; border-radius: 6px; background: #fff; color: var(--mau-md, #1c64d4); font-size: 15px; line-height: 1; text-decoration: none; } .qipaging > span { /* dấu "…" không phải nút bấm */ border-color: transparent; background: transparent; color: #98a2b3; min-width: 18px; padding: 0 2px; } .qipaging > a:hover { border-color: var(--mau-md, #1c64d4); } .qipaging > a.qipagingcurrent { background: var(--mau-md, #1c64d4); border-color: var(--mau-md, #1c64d4); color: #fff; font-weight: 600; } /* ===================================================================================================== TRANG CHI TIẾT VĂN BẢN — 4 chỗ user chỉ ra ngày 2026-08-13 (đo trên hcm.edu.vn/van-ban/…/vbctmb/41014/89315 ở 375px). ===================================================================================================== */ /* ① BẢNG THUỘC TÍNH (Ngày ban hành · Số ký hiệu · Ngày hiệu lực · Người ký · Trích yếu): ô chỉ có `padding:4px`, viền xám mảnh, chữ dính sát khung ⇒ trông thô. Cho thành một thẻ có bo góc, ô thở 10px và nhãn đậm hơn phần giá trị. */ table.qi-bang-thuoctinh { margin-bottom: 12px; border: 1px solid #e3e7ee; border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; } table.qi-bang-thuoctinh td { padding: 10px 12px !important; font-size: 14.5px; line-height: 1.5; vertical-align: top; border: 0 !important; border-top: 1px solid #eef0f4 !important; background: #fff; } table.qi-bang-thuoctinh tr:first-child td { border-top: 0 !important; } table.qi-bang-thuoctinh td + td { border-left: 1px solid #eef0f4 !important; } table.qi-bang-thuoctinh b, table.qi-bang-thuoctinh strong { color: #475467; font-weight: 600; } /* ② TỆP ĐÍNH KÈM: nhiều tệp nối thẳng vào nhau, giữa hai trình xem là một khoảng trắng lớn không có vạch nào ⇒ không biết đâu là hết tệp này. Mỗi tệp thành một khối, cách nhau 10px + vạch ngăn. */ .qi-tep-dinhkem + .qi-tep-dinhkem { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e3e7ee; } .qi-tep-dinhkem .Filedinhkem_P { margin-top: 0 !important; } /* ③ "TIN CÙNG CHUYÊN MỤC": mỗi tin là `.row.qibootomSpace.pt-2`, đo được khe giữa hai tin **36px** (đệm dưới 20px + đệm trên 5px + dòng trống) — user chốt chuẩn trên/dưới 10px. */ .qiboxtincungchuyenmuc .qibootomSpace { margin: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; } .qiboxtincungchuyenmuc .qibootomSpace + .qibootomSpace { border-top: 1px solid #eef0f4; } /* ④ Dải tiêu đề chuyên mục trên đầu trang điện thoại ("VĂN BẢN"): đệm CỘNG HAI TẦNG — khung `7px 10px` + thẻ chữ `11px` ⇒ chữ thụt 21px, dải cao 55px cho một dòng chữ. Về đúng một tầng 10px. */ .scrollmenu .qihome_tieudebg { padding: 10px !important; } .scrollmenu .qihome_tieude { padding: 0 !important; } /* DẢI CHUYÊN MỤC TRÊN ĐẦU TRANG ĐIỆN THOẠI (`.scrollmenu`): mũi tên `>` giữa hai mục nằm CAO HƠN chữ khoảng 12px (user khoanh đỏ 2026-08-13). Nguyên nhân: dải là `display:flex` mà không khai `align-items`, nên mặc định `stretch` kéo thẻ `` cao bằng cả hàng (42px) — glyph vẽ ở ĐỈNH hộp đó, còn chữ trong các thẻ bên cạnh lại nằm giữa hàng. Cho căn giữa theo trục dọc là hai thứ thẳng hàng. (Đo: hộp mũi tên 42px ở y=48 → 14px ở y=62, đúng tầm chữ y=60.) 📌 Khiếm khuyết CÓ SẴN, không phải do đợt sửa này — đã kiểm bằng cách tắt CSS mới, hình học y hệt. */ .scrollmenu { align-items: center; }