/*! * ============================================================================ * 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 BIỂU BIÊN TẬP VIÊN CHÈN TRONG THÂN BÀI (user yêu cầu 2 lần; làm 2026-08-13). ĐO TRÊN BÀI THẬT `thlaivu.haiphong.edu.vn/…/ctmb/40030/643458` ở khổ 375px: · khối `.qicontentdetail` rộng 355px · bảng vẽ ra 657px ⇒ tràn khỏi thẻ cha 317px · khung cuộn `.snap-content` tràn ngang 307px ⇒ CẢ TRANG kéo ngang được, bố cục vỡ 🔑 VÌ SAO `max-width:100%` KHÔNG CỨU ĐƯỢC (trang /ctmb/ đã khai `.qicontentdetail *{max-width:100% !important}` mà bảng vẫn 657px): bề rộng dùng thật của `table` không bao giờ nhỏ hơn **min-content** của nó, và `max-width` KHÔNG hạ được giới hạn đó. Ở bài này bảng lồng trong cùng mang thuộc tính `width="653"` nên ghim min-content của cả chuỗi bảng. Muốn bảng co lại thì phải VÔ HIỆU bề rộng cứng — đó là việc của khối @media dưới đây. Hai lớp bảo vệ, cố ý tách vai: ① `.qi-bang-cuon` — khung cuộn ngang do MÁY CHỦ bọc quanh mỗi bảng cấp ngoài cùng (`QIWEB_BO/Base/QiBangNoiDung.cs`). Đây là LƯỚI AN TOÀN: bảng số liệu nhiều cột thật sự cần rộng thì cuộn TRONG khung, không đẩy tràn cả trang. Áp cho MỌI khổ màn hình. ② khối @media ≤767.98px — bỏ bề rộng cứng để những bảng CÓ THỂ vừa thì vừa hẳn, khỏi phải cuộn. 🔑 GIỮ `width` dạng PHẦN TRĂM: `table[width]:not([width$="%"])` chỉ vô hiệu bề rộng tính bằng pixel. Bảng khai `width="100%"` là muốn giãn kín cột — ép `auto` sẽ làm nó co lại, hẹp hơn trước. 🔑 `word-break: normal` cho ô: vỏ điện thoại đặt `overflow-wrap:anywhere` để chống tràn, nhưng trong ô bảng nó bẻ chữ giữa từ làm mỗi ô cao vọt (đã gặp đúng lỗi này ở cột STT trang Văn bản). ===================================================================================================== */ /* ===================================================================================================== MENU NGANG DESKTOP ĐẨY TRANG CUỘN NGANG — 55/99 mẫu (rà 2026-08-13, user chốt "chỉnh lại cho đẹp"). Đo trên trang thật ở 1280px: hàng mục menu `#main_nav99` rộng **1361–1476px** trong khung `.container.header-second` ghim **1300px** ⇒ tài liệu tràn **32–224px** (trung vị 61) ⇒ trang chủ có thanh cuộn ngang trên laptop 1280px. 🔑 ĐÍNH CHÍNH MỘT PHÂN TÍCH SAI CỦA CHÍNH TÔI: ban đầu tôi tưởng đây chỉ là chuyện khổ 1200–1300px (khung 1300px không vừa) nên định chặn ở `max-width:1319.98px` — ĐO LẠI thì sai: vì bản thân hàng menu rộng tới 1476px nên **1366px và 1440px vẫn tràn** (143px và 106px), mốc 1320px không cứu được. Tiền lệ sẵn có trong `qi-home-rp.css` cũng chỉ áp dưới 1200px và chú thích ở đó ghi "từ 1200px trở lên cửa sổ vẫn chứa hết 1300px" — câu đó KHÔNG đúng. Cách chữa: **bóp đệm ngang của từng mục menu** ở khổ < 1500px. Đo được nav **1476 → 1232px**, đủ nằm trong khung 1300px, và **giữ nguyên số dòng của menu** (không tự xuống thêm dòng như phương án cho `flex-wrap: wrap`, vốn làm đầu trang cao thêm một dòng ở nhiều đơn vị). Kèm: dưới 1320px thì khung 1300px cũng không vừa cửa sổ ⇒ cho khung co về 100%. ⚠️ Từ 1500px trở lên GIỮ NGUYÊN đệm gốc — màn hình rộng vốn không tràn, không đổi hình thức. ===================================================================================================== */ @media (max-width: 1499.98px) { .qimenu #main_nav99 .navbar-nav > .nav-item > .nav-link, #main_nav99 .navbar-nav > .nav-item > .nav-link { padding-left: 4px !important; padding-right: 4px !important; } #main_nav99 .navbar-nav > .nav-item { padding-right: 2px !important; } } @media (max-width: 1319.98px) { /* Khung 1300px của dải menu. Có HAI lớp khác nhau tuỳ họ giao diện — đo được cả hai đều ghim `width:1300px`: · `.container.header-second` (bộ Thủ Đức / Hóc Môn) · `.container.px-0.h-100` nằm trong `.container-fluid.qimenu.sticky-top` (bộ chung) Lần đầu tôi chỉ nhắm lớp thứ nhất nên 19/23 ca vẫn tràn — đo lại mới thấy lớp thứ hai (`mngialuong` tràn 102px, `thcsanduong` 32px: khung 1300px đặt ở x=82 / x=12). */ .container.header-second, .container-fluid.qimenu > .container, .container-fluid.qimenu22 > .container { width: 100% !important; max-width: 100%; } /* CỘT QUẢNG CÁO PHẢI — ẨN Ở MÀN HÌNH NHỎ (user chốt 2026-08-13). Cột này `position:absolute` rộng 125px, đặt cạnh khung nội dung nên KHÔNG co theo cửa sổ: đo được nó thò ra khỏi khung nhìn **80px ở khổ 1200px** và **40px ở khổ 1280px** ⇒ kéo cả trang cuộn ngang. Từ **1366px trở lên nó nằm gọn** (mép phải còn dư 3–120px) nên GIỮ NGUYÊN, không ẩn. Vì vậy mốc ẩn đặt đúng bằng mốc khung menu (1319.98px) cho nhất quán. Nghiệm thu `thcsanduong`: tràn ngang **112 → 0** (1200px) và **72 → 0** (1280px). ⚠️ Còn một số đơn vị vẫn tràn vài chục px ở khổ ≥1366px do NGUYÊN NHÂN KHÁC (không phải cột quảng cáo — ẩn cột đi vẫn tràn y nguyên); đã ghi trong báo cáo để rà tiếp. */ #qcphai, .ads-wrapper.adsRight, #divAdRight { display: none !important; } } /* ===================================================================================================== ẢNH BỊ KÉO MÉO TRONG KHUNG TỈ LỆ (rà 99 mẫu × 3 vỏ, 2026-08-13 — user chốt "chỉnh lại cho đẹp"). Ảnh nào bị ép `width:100%; height:100%` vào một khung tỉ lệ (16:9, 3:2…) mà KHÔNG khai `object-fit` thì bị **GIÃN**, vì giá trị mặc định của `object-fit` chính là `fill`. Đo trên trang thật: · `thdanghai` 39 ảnh biến dạng · `mnnamha` 33 ảnh · ảnh dọc tỉ lệ 0,57 vẽ ra 1,78 = lệch 210% · `mnnamha` (tab) 0,67 → 1,78 = lệch 167% · `thptdoson` (mobile) 1,0 → 1,5 = lệch 50% ⇒ ảnh chân dung/dọc bị bóp thành khổ ngang, người trong ảnh "béo ra". `cover` = phủ kín khung rồi CẮT phần dôi, giữ đúng tỉ lệ gốc — đây vốn đã là quy ước của dự án (`news_one.css` khai `.item-ratio{object-fit:cover}`); chỗ nào ra `fill` chỉ là do bỏ sót hoặc khai tay `fill`. Đã đo bản sửa: **ảnh biến dạng 39 → 0 và 33 → 0, KHUNG ẢNH GIỮ NGUYÊN từng pixel** (chỉ khác phần điểm ảnh bên trong, không xê dịch bố cục). 🔑 `object-fit` KHÔNG có tác dụng với `