/* /App_Themes/all/allcss/qi-desktop-hep.css */ /* ===================================================================================== VỎ DESKTOP Ở CỬA SỔ HẸP (< 1200px) — thêm 2026-08-11 User báo giao diện vỡ khi xem ở khổ iPad (ảnh chụp 1024×1366): ba cột 590+295+295 chồng lên nhau, sinh một dải trắng giữa cột tin và cột "Tin mới nhất". NGUYÊN NHÂN đo được: bộ vỏ desktop bị GHIM KHUNG CỨNG — · `.container { min-width: 1200px }` và `#MainContent { min-width: 1200px }` (có trong CẢ style2.css LẪN App_Themes/hanoi/css/hanoi.css của tenant Hà Nội); · quảng cáo "bay hai bên mép" định vị tuyệt đối theo mép 1275px. ⇒ ở khung 1014px trang rộng 1342px, cuộn ngang và vỡ cột. PHẠM VI CỐ Ý HẸP — tệp này CHỈ làm ba việc, và chỉ dưới 1200px: ① gỡ khoá khung cứng (min-width) để bố cục co được; ② ẩn quảng cáo bay hai mép (ở khổ này chúng nằm ngoài vùng nhìn hoặc đè nội dung); ③ cho thanh menu ngang cuộn trong chính nó thay vì đẩy cả trang. KHÔNG đụng tới lưới, cỡ chữ hay màu của bất kỳ mẫu nào: từ 1200px trở lên tệp này không sinh một luật nào, nên 46 mẫu giữ nguyên hiển thị như trước. TRANG CHỦ của đơn vị đã bật Is_auto_Responive không cần tới đây: `_MasterAllDesktop` đưa cửa sổ hẹp sang thẳng bản "rp" (đã responsive hoàn chỉnh). Tệp này lo phần còn lại — các TRANG TRONG và những đơn vị chưa bật cờ. ===================================================================================== */ @media (max-width: 1199.98px) { /* ① Gỡ khoá khung. Dùng !important vì luật gốc nằm ở style2.css / hanoi.css của tenant, nạp sau tệp này trong vài nhánh vỏ. */ .container, #MainContent, .content { min-width: 0 !important; } /* ② Quảng cáo bay hai bên mép: định vị theo mép màn hình rộng nên ở khổ này luôn nằm ngoài khung hoặc chồng lên nội dung. */ .ads-wrapper.adsLeft, .ads-wrapper.adsRight { display: none !important; } /* ③ Menu ngang dài hơn khung thì cuộn trong chính nó, không đẩy cả trang trượt ngang. */ .qimenu, .menu-main { overflow-x: auto; } } /* /App_Themes/all/allcss/qi-landing-ct2.css */ /* ===================================================================================================== MẪU gdnn4 — CỔNG THÔNG TIN ĐIỆN TỬ, BẢN 2026 V2 (Sở GD&ĐT Hà Nội) ----------------------------------------------------------------------------------------------------- Dựng theo bản thiết kế Figma "SoHanoi – 2026 V2" (user giao 21/08/2026) + phong cách hero của hanoi.gov.vn (ảnh lớn, ô tìm kiếm giữa, nút truy cập nhanh). Màu và cỡ chữ đo trực tiếp trên 6 khung thiết kế — xem docs/KHAO-SAT-MAU-HANOI-EDU-2026.md. Khác gdnn3 (bản 11/08) ở ba điểm: đỏ #C8102E làm màu chủ đạo thay vì xanh; hero kiểu cổng thành phố; ba khối nội dung mới (tin tức sự kiện, thông tin chuyên ngành, mega menu chuyên mục). 🔑 Tự co giãn MỘT địa chỉ cho mọi thiết bị — không có bản mobile riêng. Mốc: 1200 / 992 / 768 / 560. 🔑 Chữ CĂN TRÁI toàn bộ, đúng chuẩn đã chốt cho hệ thống ngày 21/08 (bản thiết kế cũng căn trái). ===================================================================================================== */ .qict2 { /* ---- màu ---- */ --do: #C8102E; /* đỏ chủ đạo: dải tiện ích, gạch tiêu đề, nhãn chuyên mục, số liệu */ --do-dam: #A50D26; --do-nhat: #FDF2F3; /* nền thẻ Thông báo */ --xanh: #1B5FA8; /* tiêu đề tin, tiêu đề thẻ số liệu */ --xanh-dam: #1B4C82; /* nền chân trang */ --xanh-nhat: #F0F6FC; /* nền thẻ Văn bản */ --luc: #1F7A3D; --luc-nhat: #F1F8F2; /* nền thẻ Hoạt động ngành */ --nen: #F5F6F8; --mat: #FFFFFF; --muc: #1A1A1A; --muc-phu: #4B5563; --muc-mo: #6B7280; --vach: #E5E7EB; --bong: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08); --bong-noi: 0 12px 40px rgba(16,24,40,.16); --bo: 14px; --bo-lon: 24px; /* ---- khung ---- */ --rong: 1440px; --khe: 10px; /* khe giữa các khối — chuẩn 10px của hệ thống */ background: var(--nen); color: var(--muc); font-size: 16px; line-height: 1.6; text-align: left; } .qict2 *, .qict2 *::before, .qict2 *::after { box-sizing: border-box; } .qict2 img { max-width: 100%; height: auto; display: block; } .qict2 a { color: inherit; text-decoration: none; } .qict2 a:hover { color: var(--do); } .qict2 :focus-visible { outline: 2px solid var(--do); outline-offset: 2px; } .qict2-wrap { max-width: var(--rong); margin: 0 auto; padding: 0 24px; } /* Tiêu đề khối: gạch đứng đỏ + chữ in hoa. Cấu trúc này lặp ở mọi khối nên tách riêng. */ .qict2-tieude { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: clamp(19px, 2vw, 28px); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--muc); } .qict2-tieude::before { content: ""; flex: 0 0 5px; align-self: stretch; min-height: 28px; background: var(--do); border-radius: 3px; } .qict2-tieude .xem-them { margin-left: auto; font-size: 14px; font-weight: 500; text-transform: none; color: var(--xanh); white-space: nowrap; } /* ================= ① THANH TIỆN ÍCH (đỏ) ================= */ .qict2-ti { background: var(--do); color: #fff; font-size: 14px; } .qict2-ti-in { display: flex; align-items: center; gap: 18px; min-height: 40px; padding: 6px 24px; } .qict2-ti-ngay { font-weight: 500; white-space: nowrap; } .qict2-ti-chao { flex: 1 1 auto; text-align: center; font-weight: 500; } .qict2-ti-phai { display: flex; align-items: center; gap: 16px; white-space: nowrap; } .qict2-ti a { color: #fff; } .qict2-ti a:hover { color: #fff; text-decoration: underline; } .qict2-ti-mxh { display: inline-flex; gap: 10px; align-items: center; } .qict2-ti-mxh a { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; } /* Nút mở mega menu — vùng bấm 44px theo chuẩn tiếp cận. */ .qict2-burger { width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: #fff; cursor: pointer; font-size: 20px; line-height: 1; } /* ================= ② ĐẦU TRANG ================= */ /* GHIM HÀNG LOGO + MENU khi cuộn (user chốt 21/08: *"thanh menu header phải giữ nguyên khi scroll"*). Chỉ ghim hàng này, KHÔNG ghim dải tiện ích đỏ phía trên — dải đó chỉ có ngày/giờ và liên hệ, ghim cả hai thì mất thêm 46px chiều cao đọc nội dung trên mọi lần cuộn. z-index 100: phải cao hơn mọi lớp trong thân trang (cao nhất đang là 60 của menu con) nhưng vẫn thấp hơn hộp mega menu (200) để hộp đó còn phủ được lên header. */ /* MẶC ĐỊNH LÀ NỀN ĐỤC (sửa 25/08). Bản trước để nền mờ 55% ở trạng thái thường và trông chờ JS gắn lớp `.da-cuon` mới đổi sang đục — JS hỏng, chạy chậm một nhịp, hoặc `IntersectionObserver` không kịp là chữ của trang chạy xuyên qua header (user báo: *"khi scroll menu header bị chèn vào chữ"*). Trang TRONG lại chẳng có ảnh nào phía sau nên không có lý do gì để trong suốt. Nay: đục là mặc định; CHỈ trang thật sự có hero mới trong suốt, và chỉ khi chưa cuộn. */ .qict2-dau { /* 🔴 `height: auto` KHÔNG THỪA. Có một luật TOÀN CỤC `header { height: 40px; … }` trong bộ CSS dùng chung; luật này thắng về màu nền và z-index nhưng KHÔNG đặt `height` nên 40px của nó vẫn ăn. Ruột header cần ~85px ⇒ nội dung tràn ra NGOÀI dải header, và khi cuộn thì chữ của trang chạy đè lên (user báo 25/08, tự soi ra bằng DevTools). Đo được trước khi sửa: `#qict2Dau` cao 40px trong khi `.qict2-menu` bên trong cao 46px. */ height: auto; min-height: 0; background: var(--mat); border-bottom: 1px solid var(--vach); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0); /* hiện dần khi cuộn, JS gắn lớp .da-cuon */ transition: background .22s ease, box-shadow .22s ease, border-color .22s ease; } /* Nền mờ kiểu hanoi.gov.vn — chỉ ở trang CÓ HERO và CHƯA CUỘN. Giữ chữ màu đậm chứ không đổi sang trắng: nền trắng 55% đủ để chữ đậm đọc được trên bất kỳ vùng ảnh nào, còn chữ trắng thì phụ thuộc ảnh — mà ảnh do Sở tự đưa lên, không kiểm soát được. */ body:has(.qict2-hero) .qict2-dau:not(.da-cuon) { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom-color: rgba(255,255,255,.35); } .qict2-dau.da-cuon { background: var(--mat); border-bottom-color: var(--vach); box-shadow: 0 3px 12px rgba(0,0,0,.16); -webkit-backdrop-filter: none; backdrop-filter: none; } .qict2-dau-in { display: flex; align-items: center; gap: 24px; padding: 14px 24px; } .qict2-hieu { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } .qict2-hieu img { width: 56px; height: 56px; object-fit: contain; } .qict2-hieu-chu { display: flex; flex-direction: column; gap: 2px; } .qict2-hieu-1 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muc); } .qict2-hieu-2 { font-size: 15px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--do); } .qict2-menu { margin-left: auto; } .qict2-menu > ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; } .qict2-menu > ul > li { position: relative; } .qict2-menu > ul > li > a { display: block; padding: 10px 14px; font-size: 16px; font-weight: 500; border-radius: 8px; color: var(--muc); } .qict2-menu > ul > li > a:hover, .qict2-menu > ul > li > a.dang-o { color: var(--do); background: var(--do-nhat); } .qict2-sub { position: absolute; top: 100%; left: 0; min-width: 240px; z-index: 60; margin: 0; padding: 10px; list-style: none; background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); box-shadow: var(--bong-noi); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .qict2-menu li:hover > .qict2-sub, .qict2-menu li:focus-within > .qict2-sub { opacity: 1; visibility: visible; transform: none; } /* 🔴 MENU CON CỦA MẤY MỤC CUỐI phải mở về BÊN TRÁI, nếu không nó thò ra ngoài khung nhìn. Đo được ở khổ 1200px: tràn ngang 64px do `ul.qict2-sub` của mục cuối. Hộp này đang `visibility: hidden` nhưng vẫn được xếp chỗ nên VẪN kéo dài `scrollWidth` — ẩn không có nghĩa là vô hại. Cùng loại lỗi đã gặp ở dropdown mẫu Hóc Môn/Đà Nẵng đầu phiên 21/08. */ .qict2-menu > ul > li:nth-last-child(-n+3) > .qict2-sub { left: auto; right: 0; } .qict2-sub { max-width: calc(100vw - 24px); } .qict2-sub a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 15px; } .qict2-sub a:hover { background: var(--do-nhat); color: var(--do); } /* ================= ③ HERO ================= */ /* Nền dự phòng của hero: chuyển sắc theo màu thương hiệu. Dùng khi đơn vị chưa nạp banner và không có ảnh tin nào đủ lớn (xem lưới chặn chất lượng trong JS cuối trang) — hero vẫn ra dáng một dải mở đầu có chủ ý chứ không phải một ô trống. */ /* CHIỀU CAO 680px CỐ ĐỊNH — ĐO ĐƯỢC TRÊN hanoi.gov.vn (user chốt 21/08). `.UIBannerFullControl` của họ: 1920×680 · 1600×680 · 1366×680 · 1240×680 ⇒ không theo tỉ lệ nào, chiều cao ghim 680px, ảnh là nền `cover` nên bị CẮT ngang khi khổ hẹp lại. `cover` chỉ cắt, không bao giờ làm méo ảnh — nên "cao cố định như hanoi.gov.vn" và "không bị co ảnh" không chống nhau. Bản trước để `aspect-ratio: 16/9`: ở khổ 1600 hero cao tới 900px, chiếm gần trọn màn hình và đẩy hết tin bài xuống dưới nếp gấp. Ảnh nền 1920×1080 với hero 680px thì dải còn thấy là y 200..880 (khổ 1920 là cắt nhiều nhất) — mọi thắng cảnh đã được đặt trong dải đó, xem chú thích trong `docs/tao-anh-hero-demo.py`. Hero là flex cột xếp về đáy, vì `.qict2-hero-in` không còn `min-height` để tự đẩy nội dung xuống. */ .qict2-hero { position: relative; overflow: hidden; height: 680px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(135deg, #12395F 0%, #1B5FA8 55%, #164C86 100%); /* Kéo lên nằm dưới header để header đè lên ảnh. Chiều cao header do JS đo và đặt vào `--qict2-cao-dau` — không ghi cứng, vì header cao khác nhau theo khổ màn hình và theo độ dài tên đơn vị (tên dài thì xuống hai dòng). 85px chỉ là giá trị lui khi JS chưa chạy. */ margin-top: calc(-1 * var(--qict2-cao-dau, 85px)); } .qict2-hero-anh { position: absolute; inset: 0; overflow: hidden; } /* Các slide phải XẾP CHỒNG, không xếp dọc: thiếu `position:absolute` thì ảnh là phần tử static, ảnh thứ hai trở đi rơi xuống dưới khung hero. Một ảnh thì không lộ (ảnh đầu vừa khít khung), có từ hai ảnh là hero trông như trống trơn dù ảnh vẫn tải đủ — đã trả giá đúng lỗi này. */ .qict2-hero-anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; } .qict2-hero-anh img.hien { opacity: 1; } /* Lớp phủ tối để chữ trắng và ô tìm kiếm luôn đọc được trên MỌI ảnh Sở đưa lên — không kiểm soát được độ sáng của ảnh nên không thể trông vào ảnh "đủ tối". */ /* Dải mờ TRÊN CÙNG: header nền trắng 55% nằm trên ảnh, nếu đúng chỗ đó ảnh lại sáng trắng thì viền và chữ header nhòe vào nhau. Một dải tối rất nhẹ ở đỉnh (12%) đủ tách hai lớp mà không làm đục màu ảnh. */ .qict2-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6,23,43,.20) 0%, rgba(6,23,43,0) 100%); } .qict2-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* Đáy nâng .62 → .72 (25/08): với 8 ảnh chụp thật, ảnh "Lễ tuyên dương" có sân khấu vàng–đỏ rất sáng đúng vùng đặt viên thuốc, đo được tương phản chữ chỉ 4,14 — dưới ngưỡng WCAG AA 4,5. Bảy ảnh còn lại đều 6,3–8,1 nên chỉ cần đậm thêm một nấc, không phải đổi nền viên thuốc (nền đó là số đo lấy đúng từ hanoi.gov.vn). */ background: linear-gradient(180deg, rgba(6,20,40,.45) 0%, rgba(6,20,40,.18) 38%, rgba(6,20,40,.72) 100%); } /* Nội dung hero DỒN XUỐNG ĐÁY (user chốt 21/08: *"cho ô tìm kiếm dịch xuống phía đáy slide cũng được, để đỡ bị chèn vào ảnh"*). Trước đây căn giữa, mà hero chỉ cao 460px trong khi ảnh nền là 1920×1000 ⇒ `object-fit:cover` chỉ lấy DẢI GIỮA của ảnh — đúng chỗ đặt nút và ô tìm kiếm, nên chữ trên ảnh bị che. Đệm đáy 96px là để chừa chỗ cho khay chấm (bottom 54px) và dải tin chạy (cao ~37px). */ .qict2-hero-in { position: relative; z-index: 2; min-height: 0; padding: 24px 24px 96px; /* min-height cũ 460px giữ hero cao cứng */ display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; /* 🔴 `width: 100%` LÀ BẮT BUỘC, không thừa. Khối này là FLEX ITEM của `.qict2-hero` (flex cột) nên trục ngang là TRỤC PHỤ. Quy tắc flexbox: `align-self: stretch` chỉ ăn khi kích thước trục phụ là `auto` VÀ lề trục phụ KHÔNG phải `auto`. Ở đây có `margin: 0 auto` ⇒ stretch bị vô hiệu, khối co lại vừa khít nội dung rồi mới được hai lề auto căn giữa. Hậu quả: bề rộng hero do HÀNG NÚT NHANH quyết định, mà số nút lại khác nhau theo đơn vị. Đo 26/08/2026 ở khổ 1870px: Hà Nội 4 nút ⇒ hero-in 917px, thanh chọn khối 869px, cao 70px (một hàng, đúng); **TP.HCM chỉ 3 nút ⇒ hero-in 824px, thanh chọn khối 776px trong khi ruột cần 834px ⇒ XUỐNG HAI HÀNG, cao 114px** — user báo "vỡ khối tìm kiếm". `.qict2-khoi { width: 100% }` không cứu được vì trong khối cha co-vừa-nội-dung thì phần trăm tham chiếu vòng tròn, trình duyệt coi như `auto`. Đặt `width: 100%` thì khối luôn rộng bằng hero rồi `max-width` + lề auto lo phần căn giữa — và cũng đúng bản Figma hơn (thiết kế cho thanh này trải hết bề ngang khối nội dung). */ width: 100%; max-width: var(--rong); margin: 0 auto; } /* Ô TÌM KIẾM nằm TRONG thanh chọn khối (user chốt 21/08: "chuyển thanh tìm kiếm xuống dưới cạnh khối khác để không bị trống"). Trước đó là một ô lớn giữa hero, để hở một vùng trống phía trên. */ /* Ô tìm kiếm nằm TRONG viên thuốc đã mờ ⇒ không lồng thêm một nền mờ nữa (mờ trên mờ thành đục), chỉ một vạch trắng ngăn với danh sách khối. */ .qict2-khoi-tim { display: flex; align-items: center; gap: 6px; margin-left: auto; background: none; border: 0; border-left: 1px solid rgba(255,255,255,.55); border-radius: 0; padding: 4px 4px 4px 16px; min-width: 260px; flex: 0 1 340px; } .qict2-khoi-tim input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; color: #fff; padding: 8px 0; } .qict2-khoi-tim input::placeholder { color: rgba(255,255,255,.85); } .qict2-khoi-tim button { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 999px; cursor: pointer; background: var(--do); color: #fff; font-size: 15px; } .qict2-khoi-tim button:hover { background: var(--do-dam); } /* Bộ chọn ngôn ngữ trên dải đỏ — dùng lại bộ dùng chung, chỉ đổi màu cho nền đỏ. */ .qict2 .qi-ngonngu--ct2 .qi-ngonngu-nut { height: 28px; font-size: 13px; color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); } .qict2 .qi-ngonngu--ct2 .qi-ngonngu-nut:hover { background: #fff; color: var(--do); } .qict2 .qi-ngonngu--ct2 .qi-ngonngu-mui { border-top-color: currentColor; } .qict2 .qi-ngonngu--ct2 .qi-ngonngu-ten { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Nút truy cập nhanh */ .qict2-nhanh { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .qict2-nhanh a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: rgba(27,95,168,.88); color: #fff; font-weight: 600; font-size: 16px; box-shadow: var(--bong); transition: background .18s ease, transform .18s ease; } .qict2-nhanh a:hover { background: var(--xanh); color: #fff; transform: translateY(-1px); } /* Thanh chọn khối đơn vị — viên thuốc MỜ dưới hero */ /* ĐỘ MỜ ĐO TRÊN hanoi.gov.vn (user chốt 21/08: *"và có độ opacity như của hanoi.gov.vn"*): thanh tìm kiếm ở hero của họ là `.input-text` với `background: rgba(255,255,255,.38)`, `border: 2px solid #fff`, `border-radius: 99px`, chữ trong ô màu trắng 16px, không blur. Lấy đúng bộ số đó cho viên thuốc này để ảnh nền còn nhìn thấy xuyên qua. */ .qict2-khoi { display: flex; align-items: center; gap: 0; flex-wrap: wrap; background: rgba(255,255,255,.38); border: 2px solid #fff; border-radius: 99px; box-shadow: none; padding: 8px 10px 8px 8px; max-width: 1180px; width: 100%; margin: 0 auto; } .qict2-khoi-hieu { flex: 0 0 auto; width: 44px; height: 44px; margin-right: 8px; } .qict2-khoi-ds { display: flex; align-items: center; flex-wrap: wrap; } /* Chữ TRẮNG vì viên thuốc đã chuyển sang nền mờ — chữ mực đen trên nền mờ 38% đè lên ảnh thì tuỳ ảnh mà mất tương phản. Bóng chữ mỏng để giữ đọc được cả khi Sở đưa ảnh sáng lên. */ .qict2-khoi-ds a { padding: 10px 16px; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .01em; border-radius: 999px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .qict2-khoi-ds a:hover { color: var(--do); background: #fff; text-shadow: none; } .qict2-khoi-ds span.vach { color: rgba(255,255,255,.6); } /* ================= ④ KHỐI NỘI DUNG CHUNG ================= */ .qict2-than { padding: 28px 0 40px; } /* MỖI KHỐI MỘT VIÊN RIÊNG (user chốt 21/08: *"các khối có boder riêng"*). Trước đây các khối chỉ cách nhau bằng khoảng trắng nên đọc liền một dải, không thấy đâu là hết khối này sang khối khác — nhất là các khối theo chuyên mục vì khối nào cũng cùng một bố cục. Đệm 10px đúng chuẩn khoảng cách của trang; tiêu đề nằm TRONG viền. */ .qict2-khoiND { margin-bottom: 20px; padding: 10px; background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); } /* Danh sách bên trong khối bỏ viền riêng của nó, không thì thành viền lồng viền. */ .qict2-khoiND .qict2-cmkhoi-ds, .qict2-khoiND .qict2-cmkhoi-anh { border: 0; background: none; padding-left: 0; padding-right: 0; } .qict2-khoiND .qict2-cmkhoi-ds { border-left: 1px solid var(--vach); padding-left: 10px; } .qict2-khoiND .qict2-cmkhoi-anh { border-left: 1px solid var(--vach); padding-left: 10px; } @media (max-width: 991.98px) { /* Dưới 992px thì 680px quá cao so với bề ngang (gần thành hình vuông) ⇒ chuyển sang chạy theo TỈ LỆ CỦA CHÍNH ẢNH — 1920/680. Trước ghi 16/9 là theo bộ ảnh tự vẽ cũ; ảnh Figma là 1920×680 nên để 16/9 sẽ cắt mất hai bên rất nhiều. hanoi.gov.vn giữ 680px xuống tới 1200px nên khổ 1200 vẫn khớp với họ. */ .qict2 .qict2-hero { height: auto; aspect-ratio: 1920 / 680; } } @media (max-width: 767.98px) { /* Điện thoại xếp một cột ⇒ vạch dọc thành vô nghĩa. */ .qict2-khoiND .qict2-cmkhoi-ds, .qict2-khoiND .qict2-cmkhoi-anh { border-left: 0; padding-left: 0; } } /* Tin nổi bật lớn: ảnh trái / chữ phải */ .qict2-lon { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 10px; align-items: start; } .qict2-lon-anh { border-radius: var(--bo); overflow: hidden; background: var(--vach); } .qict2-lon-anh img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .35s ease; } .qict2-lon-anh:hover img { transform: scale(1.03); } .qict2-lon-tit { font-size: clamp(21px, 2.4vw, 34px); line-height: 1.28; font-weight: 700; color: var(--xanh); margin: 0 0 10px; } .qict2-lon-tit a:hover { color: var(--do); } .qict2-meta { font-size: 14px; color: var(--muc-mo); margin: 0 0 10px; } .qict2-meta .cm { color: var(--xanh); } .qict2-lon-mo { font-size: 16.5px; line-height: 1.65; color: var(--muc-phu); margin: 0 0 10px; } .qict2-xem { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; background: var(--xanh-nhat); color: var(--xanh); font-weight: 600; font-size: 15px; } .qict2-xem:hover { background: var(--xanh); color: #fff; } /* Lưới thẻ tin */ .qict2-luoi { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--khe); margin-top: var(--khe); } .qict2-the { background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; } .qict2-the:hover { box-shadow: var(--bong); transform: translateY(-2px); } .qict2-the-anh { background: var(--vach); overflow: hidden; } .qict2-the-anh img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .35s ease; } .qict2-the:hover .qict2-the-anh img { transform: scale(1.04); } .qict2-the-in { padding: 10px; display: flex; flex-direction: column; gap: 10px; } .qict2-the-cm { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--do); } .qict2-the-tit { font-size: 18px; line-height: 1.42; font-weight: 700; margin: 0; } .qict2-the-mo { font-size: 15px; line-height: 1.6; color: var(--muc-phu); margin: 0; } .qict2-the-ngay { font-size: 13px; color: var(--muc-mo); } /* ================= ④b TIN NỔI BẬT + TIN MỚI CẬP NHẬT (khung 1 của thiết kế) ================= Hai cột: trái là ảnh lớn với TIÊU ĐỀ CHỒNG TRÊN ẢNH và chấm băng trượt; phải là thẻ "Tin mới cập nhật" — tiêu đề có biểu trưng + gạch chân đỏ, danh sách ngày + tiêu đề, cuối thẻ là nút "Xem thêm" dạng viên thuốc. */ .qict2-dautin { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--khe); align-items: stretch; margin-bottom: 30px; } /* ---- Cột trái: tin nổi bật, tiêu đề chồng trên ảnh ---- */ /* 🔴 ẢNH PHẢI LẤP ĐẦY CỘT, không được để trống phía dưới. Đo lần đầu: cột trái cao 681px (bị lưới kéo giãn cho bằng cột "Tin mới cập nhật") nhưng ảnh chỉ 525px ⇒ hở một dải tối **156px** dưới tiêu đề. Vì `align-items: stretch` làm cột cao theo cột bên cạnh, còn ảnh thì giữ tỉ lệ 16/10 của riêng nó. Cách xử lý: MỌI tấm đều `position: absolute; inset: 0` (kể cả tấm đang hiện) để lấp đúng chiều cao thật của cột, và dùng `::before` làm cữ chiều cao tối thiểu cho trường hợp cột phải thấp hơn. */ .qict2-noibat { position: relative; border-radius: var(--bo); overflow: hidden; background: var(--vach); } .qict2-noibat::before { content: ""; display: block; padding-top: 62.5%; } /* cữ tỉ lệ 16:10 */ .qict2-noibat-tam { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; } .qict2-noibat-tam.hien { opacity: 1; } .qict2-noibat-tam > a { display: block; height: 100%; } .qict2-noibat img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Dải tối chỉ ở đáy để chữ trắng đọc được mà không làm ảnh xám cả tấm. */ .qict2-noibat-chu { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 10px 10px; background: linear-gradient(180deg, rgba(8,18,32,0) 0%, rgba(8,18,32,.82) 68%, rgba(8,18,32,.92) 100%); } .qict2-noibat-tit { margin: 0; font-size: clamp(18px, 1.9vw, 27px); line-height: 1.3; font-weight: 700; color: #fff; } .qict2-noibat-tit a { color: #fff; } .qict2-noibat-tit a:hover { color: #fff; text-decoration: underline; } /* `inline-block` để hộp bó sát chữ. Để `block` thì hộp trải hết chiều rộng và đè lên hàng chấm băng trượt ở góc dưới phải (đo được vẫn chồng dù chữ nằm hẳn bên trái). */ .qict2-noibat-ngay { display: inline-block; margin-top: 10px; font-size: 13.5px; color: #D8E2EE; } /* Chấm băng trượt — vùng bấm 44px theo chuẩn tiếp cận, riêng chấm nhìn thấy thì nhỏ. */ /* Chấm đặt góc dưới PHẢI: góc dưới trái đã có ngày đăng trong `.qict2-noibat-chu`, để cùng bên là hai thứ đè lên nhau (đã thấy khi chụp kiểm). */ .qict2-cham { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; gap: 6px; } .qict2-cham button { width: 28px; height: 24px; padding: 10px 4px; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; } .qict2-cham button::before { content: ""; display: block; width: 20px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.5); transition: background .2s ease; } .qict2-cham button[aria-current="true"]::before { background: var(--do); } /* ---- Cột phải: thẻ Tin mới cập nhật ---- */ .qict2-moi { background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); box-shadow: var(--bong); display: flex; flex-direction: column; overflow: hidden; } .qict2-moi-dau { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 2px solid var(--do); font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muc); } .qict2-moi-dau img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; } .qict2-moi ul { margin: 0; padding: 0 10px; list-style: none; flex: 1 1 auto; } .qict2-moi li { padding: 10px 0; border-bottom: 1px solid var(--vach); } .qict2-moi li:last-child { border-bottom: 0; } .qict2-moi li .ng { display: block; font-size: 13px; color: var(--muc-mo); margin-bottom: 4px; } .qict2-moi li a { font-size: 15.5px; line-height: 1.5; font-weight: 500; } .qict2-moi-them { padding: 10px; } .qict2-moi-them a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--xanh-nhat); color: var(--xanh); font-weight: 600; font-size: 15px; } .qict2-moi-them a:hover { background: var(--xanh); color: #fff; } /* ================= ⑤ THÔNG TIN CHUYÊN NGÀNH (3 thẻ màu) ================= */ .qict2-ba { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--khe); } .qict2-cot { border: 1px solid var(--vach); border-radius: var(--bo); overflow: hidden; background: var(--mat); } .qict2-cot-dau { display: flex; align-items: center; gap: 10px; padding: 10px; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .qict2-cot-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; } .qict2-cot.do .qict2-cot-dau { background: var(--do-nhat); color: var(--do); } .qict2-cot.do .qict2-cot-icon { background: var(--do); } .qict2-cot.xanh .qict2-cot-dau { background: var(--xanh-nhat); color: var(--xanh); } .qict2-cot.xanh .qict2-cot-icon { background: var(--xanh); } .qict2-cot.luc .qict2-cot-dau { background: var(--luc-nhat); color: var(--luc); } .qict2-cot.luc .qict2-cot-icon { background: var(--luc); } .qict2-cot ul { margin: 0; padding: 0 10px 10px; list-style: none; } .qict2-cot li { padding: 5px 0; border-bottom: 1px solid var(--vach); } .qict2-cot li:last-child { border-bottom: 0; } .qict2-cot li .ng { display: block; font-size: 13px; color: var(--muc-mo); margin-bottom: 4px; } .qict2-cot li a { font-size: 15.5px; line-height: 1.55; } /* ================= ⑥ MEGA MENU "TẤT CẢ CHUYÊN MỤC" ================= */ .qict2-mega { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(10,18,30,.5); padding: 48px 16px; overflow: auto; } .qict2-mega[open], .qict2-mega.mo { display: block; } .qict2-mega-hop { max-width: 1320px; margin: 0 auto; background: var(--mat); border-radius: var(--bo-lon); box-shadow: var(--bong-noi); padding: 26px 28px 34px; } .qict2-mega-dau { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .qict2-mega-dau h2 { margin: 0; font-size: 19px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .qict2-mega-dong { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; color: var(--do); font-size: 15px; font-weight: 600; } .qict2-mega-luoi { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px 28px; } .qict2-mega-nhom h3 { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--vach); font-size: 15.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--do); } .qict2-mega-nhom ul { margin: 0; padding: 0; list-style: none; } .qict2-mega-nhom li { margin-bottom: 2px; } .qict2-mega-nhom a { display: block; padding: 7px 0; font-size: 15px; color: var(--muc-phu); } .qict2-mega-nhom a:hover { color: var(--do); } /* ================= ⑦ CHÂN TRANG ================= */ .qict2-chan { background: var(--xanh-dam); color: #E8EEF6; padding: 40px 0 26px; } .qict2-chan-luoi { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) auto; gap: 32px; } .qict2-chan h2 { margin: 0 0 18px; font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; } .qict2-chan-ten { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; } .qict2-chan-ten b { display: block; font-size: 19px; margin-top: 4px; } .qict2-chan p { margin: 12px 0 0; font-size: 15px; line-height: 1.7; } .qict2-chan a { color: #E8EEF6; } .qict2-chan a:hover { color: #fff; text-decoration: underline; } .qict2-chan ul { margin: 0; padding: 0; list-style: none; } .qict2-chan ul li { margin-bottom: 10px; padding-left: 14px; position: relative; font-size: 15px; } .qict2-chan ul li::before { content: "•"; position: absolute; left: 0; color: #9CC0E4; } .qict2-chan-cuoi { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); font-size: 14px; color: #C6D6E8; } /* ================= ⑧ CO GIÃN THEO KHỔ ================= */ @media (max-width: 1199.98px) { .qict2-menu > ul > li > a { padding: 9px 10px; font-size: 15px; } .qict2-hero-in { min-height: 400px; } } @media (max-width: 991.98px) { .qict2-dautin { grid-template-columns: 1fr; } .qict2-lon { grid-template-columns: 1fr; gap: var(--khe); } .qict2-luoi { grid-template-columns: repeat(2, minmax(0,1fr)); } .qict2-ba { grid-template-columns: 1fr; } .qict2-mega-luoi { grid-template-columns: repeat(2, minmax(0,1fr)); } .qict2-chan-luoi { grid-template-columns: 1fr 1fr; } .qict2-chan-nca { grid-column: 1 / -1; } /* Menu ngang không đủ chỗ ⇒ ẩn, người đọc dùng nút ba gạch (mega menu). */ .qict2-menu { display: none; } } @media (max-width: 767.98px) { .qict2-wrap, .qict2-ti-in, .qict2-dau-in, .qict2-hero-in { padding-left: 16px; padding-right: 16px; } .qict2-ti-ngay, .qict2-ti-chao { display: none; } /* giữ lại đúng phần bấm được */ .qict2-ti-phai { margin-left: auto; } .qict2-hieu img { width: 44px; height: 44px; } .qict2-hieu-1 { display: none; } /* điện thoại chỉ giữ một dòng tên */ .qict2-hieu-2 { font-size: 15px; } .qict2-hero-in { min-height: 320px; padding-top: 28px; gap: 16px; } .qict2-nhanh a { padding: 10px 16px; font-size: 15px; } .qict2-khoi { border-radius: var(--bo); padding: 8px; } .qict2-khoi-ds { width: 100%; } .qict2-khoi-tim { margin-left: 0; width: 100%; flex: 1 1 100%; } .qict2-khoi-ds a { flex: 1 1 auto; text-align: center; font-size: 13.5px; padding: 9px 10px; } .qict2-khoi-ds span.vach { display: none; } .qict2-luoi { grid-template-columns: 1fr; } .qict2-mega-luoi { grid-template-columns: 1fr; } .qict2-chan-luoi { grid-template-columns: 1fr; } .qict2-mega { padding: 16px 10px; } .qict2-mega-hop { padding: 18px 16px 24px; border-radius: var(--bo); } } @media (max-width: 559.98px) { .qict2-tim form { padding-left: 14px; } .qict2-tim input { font-size: 16px; } /* 16px để iOS không tự phóng to khi bấm vào ô nhập */ .qict2-nhanh { gap: 8px; } .qict2-nhanh a { flex: 1 1 calc(50% - 8px); justify-content: center; } } /* ================= ⑨ QUỐC TANG ================= */ /* Dùng lại đúng cơ chế của gdnn3: đơn vị bật cờ thì có lớp qi-quoctang. */ body.qi-quoctang .qict2-hero-anh img, body.qi-quoctang .qict2-lon-anh img, body.qi-quoctang .qict2-the-anh img { filter: grayscale(1); } body.qi-quoctang .qict2-ti { background: #6B6B6B; } @media (prefers-reduced-motion: reduce) { .qict2 * { transition: none !important; animation: none !important; } } /* ===================================================================================================== CHUẨN 10px CHO MỌI KHOẢNG CÁCH BÊN TRONG (user chốt 21/08/2026) ----------------------------------------------------------------------------------------------------- *"chuẩn hóa text đến các mép viền, text đến ảnh hoặc giữa các tin bài là 10px"* Ba loại khoảng cách, cùng một con số: · chữ → mép viền thẻ = 10px (đệm trong của mọi thẻ) · chữ → ảnh = 10px (khe của lưới trong thẻ tin và tin nổi bật) · giữa hai tin bài = 10px (khe lưới + đệm dòng danh sách) Khối `@media` cho khổ hẹp phía dưới cũng đã đưa về 10px, để con số không đổi theo thiết bị. ===================================================================================================== */ .qict2 .qict2-the-in, .qict2 .qict2-cot-dau { padding: 10px; } .qict2 .qict2-cot ul { padding: 0 10px 10px; } /* Dòng danh sách tin: đệm 5px trên + 5px dưới ⇒ khoảng giữa hai tin đúng 10px (cộng 1px đường kẻ phân cách của bản thiết kế). Để 10px mỗi phía thì thành 21px. */ .qict2 .qict2-cot li { padding: 5px 0; } .qict2 .qict2-cot li:first-child { padding-top: 10px; } .qict2 .qict2-cot li:last-child { padding-bottom: 10px; } .qict2 .qict2-luoi, .qict2 .qict2-lon, .qict2 .qict2-ba { gap: 10px; } .qict2 .qict2-the-in > * { margin-top: 0; margin-bottom: 0; } /* khe do `gap` lo, tránh cộng dồn lề */ /* ===================================================================================================== SÁU KHỐI BỔ SUNG — đọc từ bản Figma bằng cách CUỘN trong khung thiết kế (21/08/2026 đợt 4) ----------------------------------------------------------------------------------------------------- Ban đầu tôi chỉ xem 6 ảnh chụp rời của prototype nên tưởng trang chủ có 3 khối. Cuộn trong chính khung thiết kế mới thấy đủ **8 khối** và thứ tự thật: ① Tin nổi bật + Tin mới cập nhật ② Thông tin chuyên ngành ③ Lãnh đạo Sở ④ Thông tin tuyên truyền + Đọc nhiều nhất ⑤ Chuyên mục ⑥ Thông tin đơn vị ⑦ Truyền hình giáo dục ⑧ Hệ thống phần mềm công vụ Bài học: prototype Figma chỉ trưng vài khung; muốn biết trình tự thật thì phải CUỘN trong khung, đừng suy ra từ các ảnh rời. ===================================================================================================== */ /* ---- Nút "Xem tất cả" ở cuối mỗi thẻ màu (bản thiết kế có, bản đầu thiếu) ---- */ .qict2-cot-them { padding: 10px; margin-top: auto; } .qict2-cot { display: flex; flex-direction: column; } .qict2-cot-them a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; } .qict2-cot.do .qict2-cot-them a { background: var(--do-nhat); color: var(--do); } .qict2-cot.do .qict2-cot-them a:hover { background: var(--do); color: #fff; } .qict2-cot.xanh .qict2-cot-them a { background: var(--xanh-nhat); color: var(--xanh); } .qict2-cot.xanh .qict2-cot-them a:hover { background: var(--xanh); color: #fff; } .qict2-cot.luc .qict2-cot-them a { background: var(--luc-nhat); color: var(--luc); } .qict2-cot.luc .qict2-cot-them a:hover { background: var(--luc); color: #fff; } /* ---- ③ LÃNH ĐẠO SỞ — dải nền xanh, ảnh chân dung tròn viền đỏ ---- */ .qict2-lanhdao { background: linear-gradient(135deg, #164C86 0%, #1B5FA8 60%, #14406F 100%); padding: 30px 0; margin-bottom: 30px; } .qict2-lanhdao .qict2-tieude { color: #fff; } .qict2-lanhdao .qict2-tieude::before { background: #fff; } .qict2-lanhdao-ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--khe); } .qict2-lanhdao-o { text-align: center; } .qict2-lanhdao-anh { width: 128px; height: 128px; margin: 0 auto 10px; border-radius: 999px; overflow: hidden; border: 3px solid var(--do); background: rgba(255,255,255,.12); } .qict2-lanhdao-anh img { width: 100%; height: 100%; object-fit: cover; } .qict2-lanhdao-ten { font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; } .qict2-lanhdao-cv { font-size: 14.5px; color: #CFE0F2; margin-top: 4px; } /* ---- ④ THÔNG TIN TUYÊN TRUYỀN: 3 cột (tin lớn · danh sách ảnh nhỏ · đọc nhiều nhất) ---- */ .qict2-ba-cot { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); gap: var(--khe); align-items: start; } /* Danh sách có ảnh nhỏ bên trái */ .qict2-ds-anh { background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); padding: 0 10px; } .qict2-ds-anh li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--vach); list-style: none; } .qict2-ds-anh li:last-child { border-bottom: 0; } .qict2-ds-anh ul { margin: 0; padding: 0; } .qict2-ds-anh .anh { flex: 0 0 96px; border-radius: 8px; overflow: hidden; background: var(--vach); } .qict2-ds-anh .anh img { width: 96px; height: 64px; object-fit: cover; } .qict2-ds-anh .chu { min-width: 0; } .qict2-ds-anh .chu a { font-size: 15px; line-height: 1.45; font-weight: 500; } .qict2-ds-anh .chu .ng { display: block; font-size: 12.5px; color: var(--muc-mo); margin-top: 4px; } /* Đọc nhiều nhất — số thứ tự lớn màu đỏ, đúng bản thiết kế (01 … 07) */ .qict2-docnhieu { background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); box-shadow: var(--bong); } .qict2-docnhieu ol { margin: 0; padding: 0 10px; list-style: none; counter-reset: dn; } .qict2-docnhieu li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--vach); counter-increment: dn; } .qict2-docnhieu li:last-child { border-bottom: 0; } /* Số thứ tự CĂN GIỮA CẢ HAI CHIỀU (user chốt 25/08). Lần đầu tôi chỉ căn giữa theo chiều NGANG — đo ra thì đã đúng tâm máng, nhưng "01" rộng ~24px trong ô 34px nên so với căn trái chỉ lệch 5px, nhìn như không đổi gì. Cái lệch thật là chiều DỌC: số dính lên đỉnh mỗi mục, trong khi mục cao 2–4 dòng tuỳ tiêu đề nên cả cột số nhấp nhô. `align-self: center` cho số nằm giữa chiều cao của chính mục đó. */ .qict2-docnhieu li::before { content: counter(dn, decimal-leading-zero); flex: 0 0 40px; align-self: center; font-family: inherit; font-size: 24px; font-weight: 700; color: var(--do); line-height: 1.1; text-align: center; } .qict2-docnhieu .ng { display: block; font-size: 12.5px; color: var(--muc-mo); margin-bottom: 2px; } .qict2-docnhieu a { font-size: 15px; line-height: 1.45; } /* ---- ⑤ CHUYÊN MỤC — lưới thẻ, biểu tượng tròn nhiều màu ---- */ .qict2-cm-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--khe); } .qict2-cm-o { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); transition: box-shadow .2s ease, transform .2s ease; } .qict2-cm-o:hover { box-shadow: var(--bong); transform: translateY(-2px); } .qict2-cm-o .bt { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .qict2-cm-o .ten { font-size: 15.5px; font-weight: 500; } /* Sáu màu luân phiên — bản thiết kế mỗi chuyên mục một màu, không phải một màu chung. */ .qict2-cm-o:nth-child(6n+1) .bt { background: #1B5FA8; } .qict2-cm-o:nth-child(6n+2) .bt { background: #E8590C; } .qict2-cm-o:nth-child(6n+3) .bt { background: #C8102E; } .qict2-cm-o:nth-child(6n+4) .bt { background: #B5179E; } .qict2-cm-o:nth-child(6n+5) .bt { background: #1F7A3D; } .qict2-cm-o:nth-child(6n+6) .bt { background: #0E7490; } /* ---- ⑦ TRUYỀN HÌNH GIÁO DỤC — thẻ video có nút phát ---- */ .qict2-video-anh { position: relative; } .qict2-video-anh::after { content: "\f04b"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 999px; background: rgba(200,16,46,.92); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; padding-left: 4px; } .qict2-the:hover .qict2-video-anh::after { background: var(--do); } /* ---- ⑧ HỆ THỐNG PHẦN MỀM CÔNG VỤ ---- */ .qict2-pm-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--khe); } /* 🔴 ẢNH PHẦN MỀM LÀ ẢNH NGANG, KHÔNG PHẢI BIỂU TƯỢNG VUÔNG. Bản thiết kế vẽ biểu tượng vuông nhiều màu, nhưng ảnh đơn vị thực nạp vào bảng `Advertising` là ảnh cỡ banner (`cosodulieunganh2.jpg`, `tuyensinhdaucap2.jpg`…). Ép vào ô 48×48 thì ảnh teo lại, nhìn đúng như ảnh lỗi — user đã chỉ ra. Vì vậy cho ảnh chiếm cả bề rộng thẻ theo tỉ lệ thật, tên xuống dưới. Đơn vị nào nạp biểu tượng vuông thì vẫn hiển thị đẹp vì dùng `object-fit: contain`. */ .qict2-pm-o { display: flex; flex-direction: column; padding: 10px; gap: 10px; background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); transition: box-shadow .2s ease, transform .2s ease; } .qict2-pm-o:hover { box-shadow: var(--bong); transform: translateY(-2px); } .qict2-pm-o .anh { display: block; border-radius: 10px; overflow: hidden; background: var(--nen); } .qict2-pm-o .anh img { width: 100%; height: auto; max-height: 150px; object-fit: contain; display: block; } .qict2-pm-o .chu { display: flex; align-items: center; gap: 10px; } .qict2-pm-o .ten { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.4; } .qict2-pm-o .mui { flex: 0 0 auto; color: var(--do); } @media (max-width: 991.98px) { .qict2-ba-cot { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .qict2-lanhdao-ds { grid-template-columns: repeat(2, minmax(0,1fr)); } .qict2-lanhdao-anh { width: 104px; height: 104px; } .qict2-cm-luoi, .qict2-pm-luoi { grid-template-columns: 1fr; } } /* ===================================================================================================== KHỐI TIN THEO CHUYÊN MỤC (sinh động) — user chốt 21/08: "các khối tin khác để như trên trang hiện tại", "để động dưới phần chuyên mục". Bố cục lấy từ chính hanoi.edu.vn đang chạy: tin lớn bên trái · danh sách chữ ở giữa · danh sách có ảnh nhỏ bên phải. Mỗi chuyên mục đang bật cờ trang chủ là một khối, không đặt tên cứng khối nào. ===================================================================================================== */ .qict2-cmkhoi { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap: var(--khe); align-items: start; } /* ---- tin lớn ---- */ .qict2-cmkhoi-lon .anh { display: block; border-radius: var(--bo); overflow: hidden; background: var(--vach); } .qict2-cmkhoi-lon .anh img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: transform .35s ease; } .qict2-cmkhoi-lon .anh:hover img { transform: scale(1.03); } .qict2-cmkhoi-lon h3 { margin: 10px 0 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.4; font-weight: 700; color: var(--xanh); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .qict2-cmkhoi-lon h3 a:hover { color: var(--do); } .qict2-cmkhoi-lon .ng { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--muc-mo); } /* ---- danh sách chữ ---- */ .qict2-cmkhoi-ds { margin: 0; padding: 0 10px; list-style: none; background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); } .qict2-cmkhoi-ds li { padding: 10px 0; border-bottom: 1px solid var(--vach); } .qict2-cmkhoi-ds li:last-child { border-bottom: 0; } /* TIÊU ĐỀ TỐI ĐA 3 DÒNG (user chốt 24/08). Tin của Sở có tiêu đề rất dài — đo trên trang thật có tiêu đề chiếm 6 dòng, kéo cả hàng cao ngoằng và làm lệch hẳn ba cột của khối. */ .qict2-cmkhoi-ds a { font-size: 15.5px; line-height: 1.5; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .qict2-cmkhoi-ds .ng { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muc-mo); } /* ---- danh sách có ảnh nhỏ ---- */ .qict2-cmkhoi-anh { margin: 0; padding: 0 10px; list-style: none; background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); } .qict2-cmkhoi-anh li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--vach); } .qict2-cmkhoi-anh li:last-child { border-bottom: 0; } /* `align-self: flex-start` là chỗ phải sửa: ô ảnh là flex-child nên mặc định `stretch` cao bằng cả dòng, mà ảnh bên trong chỉ cao 62px ⇒ phần thừa lòi ra đúng NỀN XÁM của ô, nhìn hệt ảnh hỏng. Đã kiểm 30/30 ảnh trên trang thật đều trả 200 — lỗi nằm ở đây chứ không ở ảnh. */ .qict2-cmkhoi-anh .anh { flex: 0 0 92px; align-self: flex-start; height: 62px; /* chốt cứng, không để chiều cao chạy theo chữ */ border-radius: 8px; overflow: hidden; background: var(--vach); } .qict2-cmkhoi-anh .anh img { width: 92px; height: 62px; object-fit: cover; display: block; } .qict2-cmkhoi-anh .chu { min-width: 0; } .qict2-cmkhoi-anh .chu a { font-size: 15px; line-height: 1.45; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .qict2-cmkhoi-anh .chu .ng { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muc-mo); } @media (max-width: 1199.98px) { .qict2-cmkhoi { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); } .qict2-cmkhoi-anh { grid-column: 1 / -1; } } @media (max-width: 767.98px) { .qict2-cmkhoi { grid-template-columns: 1fr; } } /* ===================================================================================================== ĐIỆN THOẠI: ẨN HAI KHỐI (user chốt 21/08 — "trên mobile thì ẩn chuyên mục giữa trang đi và khu vực slide show") ----------------------------------------------------------------------------------------------------- User nói rõ ở câu sau: *"khối ảnh đầu tiên slide show giống hanoi.gov.vn"* ⇒ "khu vực slide show" là LỚP ẢNH CỦA HERO, không phải băng trượt tin ở giữa trang. Ban đầu tôi hiểu sai và ẩn băng trượt tin — đã sửa lại. Đo khổ 430px: lưới "Chuyên mục" cao 480px. Hero cao một khoảng lớn chỉ để làm nền ảnh. Dùng `display:none` chứ không `visibility:hidden` để KHÔNG còn chiếm chỗ, và ảnh cũng thôi tải vì phần tử không được dựng khung. ===================================================================================================== */ @media (max-width: 767.98px) { /* ẢNH HERO (khối ảnh đầu tiên, băng trượt kiểu hanoi.gov.vn) — ẨN LỚP ẢNH, GIỮ phần dùng được. Bỏ hẳn cả khối hero thì mất luôn ô tìm kiếm, hàng nút truy cập nhanh và thanh chọn khối — ba thứ điện thoại cần nhất. Vì vậy chỉ ẩn lớp ảnh; hero còn lại nền chuyển sắc thương hiệu, cao vừa đủ chứa nội dung. */ /* Điện thoại ẩn lớp ảnh ⇒ phải BỎ tỉ lệ 16:9, không thì hero trơ ra một dải màu cao 242px (430 × 9/16) chẳng có gì trong đó. Cũng KHÔNG kéo hero lên: không có ảnh để đè, kéo lên chỉ làm header đè vào viên thuốc tìm kiếm. */ .qict2 .qict2-hero { height: auto; aspect-ratio: auto; margin-top: 0; } .qict2 .qict2-hero::before { display: none; } .qict2 .qict2-dau { background: var(--mat); backdrop-filter: none; border-bottom-color: var(--vach); } .qict2 .qict2-hero-anh { display: none; } .qict2 .qict2-hero-in { min-height: 0; padding-top: 16px; padding-bottom: 16px; } /* Lưới "Chuyên mục" giữa trang — điện thoại đã có nút ba gạch mở mega menu "Tất cả chuyên mục", lưới này chỉ lặp lại đúng danh sách ấy (đo được cao 480px). */ .qict2 .qict2-an-mb { display: none; } /* TRANG TRONG trên điện thoại: ẨN CỘT TRÁI (user chốt 25/08). Ba hộp ở đó — "Danh mục", "Liên kết website", "Thống kê truy cập" — khi xếp một cột thì nằm TRÊN cả bài viết, người đọc phải cuộn qua chúng mới tới nội dung. "Danh mục" lại đúng bằng mega menu của nút ba gạch, nên chỉ là lặp lại. */ .qict2 .left_detail_content { display: none !important; } .qict2 .right_detail_content { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* CẮT LỀ THỪA CHO CHỮ ĐƯỢC RỘNG HƠN (user chốt 25/08: *"mobile bỏ bớt border và khoảng thừa để dữ liệu hiển thị được nhiều hơn"*). Đo ở khổ 440px trước khi sửa — lề trái cộng dồn qua 4 lớp: .qict2-wrap 5px + main.center-column 8px + aside.p-15 16px + viền 1px = 30px MỖI BÊN ⇒ chữ chỉ còn 380/440 (86%). Và khoảng trống dọc trước breadcrumb: .qict2-than 28px + .qict2-wrap 10px + aside.pd-15 15px = 53px. Gộp lại còn MỘT lề duy nhất ở `#MainContent`, các lớp trong bỏ hết đệm ngang. Lề 10px chứ không phải 8px: 8px làm thanh đường dẫn trông sát mép (user báo lại 25/08), và 10px cũng là chuẩn khe khối của cả dự án. */ .qict2 .qict2-than { padding: 10px 0 20px; } /* 🔴 Phải chọn theo Ý ĐỊNH `#MainContent`: `hoidap.css` có `#MainContent { padding-right: 5px }` — chọn theo id nên độ ưu tiên 1-0-0, mọi luật theo lớp của tôi đều thua. Đây đúng cái bẫy "cùng/không đủ độ ưu tiên, tệp nạp sau thắng" đã trả giá nhiều lần. */ .qict2 .qict2-than > #MainContent.qict2-wrap { padding: 0 10px !important; } body .qict2 .center-column { padding-left: 0 !important; padding-right: 0 !important; } body .qict2 .center-doc { padding-top: 0 !important; padding-bottom: 0 !important; } body .qict2 .ArticleDetailControl { padding: 10px !important; } /* Thẻ bài viết và các hộp: bo góc nhỏ lại và đệm 10px — ở khổ hẹp, đệm 16px chỉ ăn mất chữ. */ .qict2 .tinlienquan { padding: 10px 8px; } .qict2 section.bread { padding: 6px 10px; margin-bottom: 8px; } } /* ===================================================================================================== HERO KIỂU hanoi.gov.vn — BĂNG TRƯỢT CÓ ĐIỀU KHIỂN + DẢI TIN CHẠY Ở ĐÁY ----------------------------------------------------------------------------------------------------- User chốt 21/08: *"khối ảnh đầu tiên slide show giống hanoi.gov.vn"*. Trên hanoi.gov.vn hero là một băng trượt ảnh lớn, đáy có dải thông tin (thời tiết + tin chạy). Bản trước chỉ tự đổi ảnh sau 6 giây, KHÔNG có điều khiển ⇒ người đọc không biết đó là băng trượt; lại thêm việc trên tenant Sở chỉ 1 ảnh vượt ngưỡng chất lượng nên trông hệt ảnh tĩnh. Hệ thống KHÔNG có nguồn thời tiết nên dải đáy chỉ dựng phần TIN — không bịa dữ liệu thời tiết. ===================================================================================================== */ .qict2-hero-nut { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.28); color: #fff; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease; } .qict2-hero-nut:hover { background: rgba(255,255,255,.55); } .qict2-hero-nut.truoc { left: 10px; } .qict2-hero-nut.sau { right: 10px; } .qict2-hero-cham { position: absolute; left: 0; right: 0; bottom: 54px; z-index: 4; display: flex; justify-content: center; gap: 8px; } .qict2-hero-cham button { width: 30px; height: 24px; padding: 10px 4px; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; } .qict2-hero-cham button::before { content: ""; display: block; width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.55); transition: background .2s ease; } .qict2-hero-cham button[aria-current="true"]::before { background: var(--do); } /* ---- Dải tin chạy ở đáy hero ---- */ /* NỀN TƯƠI SÁNG (user chốt 21/08: *"màu nền chữ chạy tươi sáng hơn"*). Trước là `rgba(8,18,32,.62)` — gần như đen, nhìn nặng và không ăn nhập với dải tiện ích đỏ ở đầu trang. Đổi sang đúng dải đỏ chủ đạo của mẫu; chữ trắng trên nền này ĐO ĐƯỢC (lấy mẫu điểm ảnh trên ảnh chụp, không tính lý thuyết vì nền là gradient alpha .90–.94 đè lên ảnh hero) tương phản **6,25**, đạt WCAG AA. Nhãn "TIN MỚI" phải đảo thành nền trắng chữ đỏ, không thì đỏ trên đỏ mất hẳn. */ .qict2-hero-dai { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: #fff; background: linear-gradient(90deg, rgba(200,16,46,.94) 0%, rgba(228,30,58,.90) 50%, rgba(200,16,46,.94) 100%); } .qict2-hero-dai .nhan { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--do); font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .qict2-hero-dai .chay { flex: 1 1 auto; min-width: 0; overflow: hidden; } .qict2-hero-dai .chay-in { display: inline-flex; gap: 40px; white-space: nowrap; animation: qict2Chay 45s linear infinite; } .qict2-hero-dai .chay:hover .chay-in { animation-play-state: paused; } /* dừng để còn bấm được */ .qict2-hero-dai a { color: #FFF; font-size: 15px; } .qict2-hero-dai a:hover { color: #FFF; text-decoration: underline; } @keyframes qict2Chay { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .qict2-hero-dai .chay-in { animation: none; } } @media (max-width: 767.98px) { /* Điện thoại đã ẩn lớp ảnh hero ⇒ ẩn luôn điều khiển và dải tin của nó cho khỏi trơ ra. */ .qict2 .qict2-hero-nut, .qict2 .qict2-hero-cham, .qict2 .qict2-hero-dai { display: none; } } /* Dải mạng xã hội (dựng ở layout dùng chung, xem `Partials/_MangXaHoi`) neo mép phải nên CHE ĐÚNG mũi tên "ảnh sau" của băng trượt hero — đo được cả hai đều `right: 10px`. Dịch mũi tên vào trong, nhưng CHỈ khi trang thật sự có dải: đơn vị chưa nhập mạng xã hội thì không dựng dải, lúc đó mũi tên phải trở về mép. */ body:has(.qi-mxh) .qict2-hero-nut.sau { right: 74px; } /* ===================================================================================================== PHẦN LÕI TRANG TRONG — cho hợp tông với vỏ ct2 (user chốt 25/08/2026) ----------------------------------------------------------------------------------------------------- Vỏ đã đúng tông đỏ #C8102E nhưng phần lõi (cột trái, đường dẫn, bài viết, tin liên quan) vẫn giữ kiểu cũ: dải đường dẫn xanh đậm, tiêu đề hộp nền xanh, bảng thống kê nền xanh — nhìn như hai trang khác nhau ghép lại. Mọi luật ở đây bọc trong `.qict2` nên chỉ ăn ở vỏ này, không đụng các mẫu khác. Các lớp bên dưới lấy từ CHÍNH trang thật (dump cấu trúc trang chi tiết của Sở Hà Nội). ===================================================================================================== */ /* ---- khung chung ---- */ /* 🔴 PHẢI BỌC `#MainContent`, KHÔNG được bọc `.qict2-than` trơn. `.qict2-than` là thân của CẢ HAI: trang chủ gdnn4 (HomeGdNn4.cshtml) lẫn trang trong (_MasterAllDesktop). Chỉ trang trong mới có `#MainContent` bên trong. Khi luật màu chữ liên kết của trang trong viết là `.qict2-than a` thì nó tràn sang trang chủ, và vì cùng độ ưu tiên (0-1-1) với `.qict2-noibat-tit a` nhưng đứng SAU trong tệp nên nó THẮNG: · tiêu đề tin nổi bật trên băng trượt hero hoá XANH trên nền ảnh (thiết kế Figma: chữ TRẮNG), · mọi tiêu đề tin trong thẻ (Tin mới cập nhật · Thông báo · Văn bản · Đọc nhiều nhất · Thông tin đơn vị · video · phần mềm) cũng hoá xanh, trong khi Figma để mực đậm. Đo 25/08/2026: `.qict2-noibat-tit a` computed = rgb(27,95,168). Xem [[qiweb-chuan-hoa-giao-dien]] — cùng một bẫy "độ ưu tiên bằng nhau, luật sau thắng". */ .qict2-than { min-height: 320px; } .qict2-than img, .qict2-than video, .qict2-than iframe { max-width: 100%; } .qict2-than #MainContent a { color: var(--xanh); } .qict2-than #MainContent a:hover { color: var(--do); } /* ---- ĐƯỜNG DẪN (breadcrumb) ---- Bản cũ là một dải xanh đậm chạy hết bề ngang, nặng hơn cả tiêu đề bài. Đổi thành dải nhạt có viền, chữ mực mờ — nhường chỗ cho tiêu đề. */ .qict2 section.bread { background: var(--nen) !important; border: 1px solid var(--vach); border-radius: var(--bo); padding: 8px 12px; margin-bottom: 10px; } .qict2 section.bread .breadcrumb_list { gap: 6px; flex-wrap: wrap; } .qict2 section.bread, .qict2 section.bread a, .qict2 section.bread li, .qict2 section.bread span { color: var(--muc-mo) !important; font-size: 14px; } .qict2 section.bread a:hover { color: var(--do) !important; } .qict2 section.bread li:last-child, .qict2 section.bread li:last-child a { color: var(--muc) !important; font-weight: 600; } /* ---- HỘP CỘT TRÁI ---- Gom mỗi hộp thành một thẻ trắng có viền, giống hệt khối ở trang chủ (`.qict2-khoiND`). */ .qict2 .left_detail_content > .wrapper, .qict2 .left_detail_content > .qiContainer, .qict2 .left_detail_content > ul.list-unstyled { background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); padding: 10px; margin-bottom: 10px; overflow: hidden; } /* Tiêu đề hộp: gạch đỏ bên trái + chữ hoa, đúng kiểu `.qict2-tieude` của trang chủ. Bản cũ là một dải nền xanh đặc. */ .qict2 .left_detail_content .qihome_tieudebg, .qict2 .left_detail_content .heading_block_item, .qict2 .left_detail_content .qihomemenudoc { background: none !important; border: 0 !important; border-bottom: 1px solid var(--vach) !important; border-radius: 0 !important; padding: 4px 0 8px 12px !important; margin: 0 0 8px !important; position: relative; color: var(--muc) !important; font-weight: 700; font-size: 16px; text-transform: uppercase; } .qict2 .left_detail_content .qihome_tieudebg::before, .qict2 .left_detail_content .heading_block_item::before, .qict2 .left_detail_content .qihomemenudoc::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 11px; width: 4px; border-radius: 2px; background: var(--do); } .qict2 .left_detail_content .qihome_tieudebg a, .qict2 .left_detail_content .heading_block_item a, .qict2 .left_detail_content .qihomemenudoc a { color: var(--muc) !important; } /* Menu "Danh mục" trong cột trái */ .qict2 .left_detail_content .qimenudoc > li > a, .qict2 .left_detail_content .qimenudoc a { color: var(--muc) !important; font-size: 15px; font-weight: 500; } .qict2 .left_detail_content .qimenudoc a:hover { color: var(--do) !important; } .qict2 .left_detail_content .qimenudoc > li { border-bottom: 1px solid var(--vach); } .qict2 .left_detail_content .qimenudoc > li:last-child { border-bottom: 0; } /* Bảng thống kê truy cập — bỏ nền xanh, để nền thẻ trắng như các hộp khác. */ .qict2 .left_detail_content table.thongke, .qict2 .left_detail_content table.thongke td, .qict2 .left_detail_content table.thongke tr { background: none !important; color: var(--muc) !important; } .qict2 .left_detail_content table.thongke td { border-bottom: 1px solid var(--vach); font-size: 14px; } /* BỀ RỘNG CÁC KHỐI TRONG CỘT TRÁI — bộ CSS cũ ghim cứng 280px cho danh sách menu và 258px cho bảng thống kê. Trong thẻ mới, phần lòng thẻ chỉ rộng 258px (280 − 2×10 đệm − 2 viền) nên danh sách menu THÒI RA 22px, đè lên viền phải của thẻ — đúng dải trắng user khoanh ở ảnh 25/08. Ở khổ hẹp thì ngược lại: thẻ rộng 404px mà danh sách vẫn 280px nên hở một mảng trắng. Ép đầy thẻ ở MỌI khổ (bản trước chỉ đặt trong `@media (max-width: 991.98px)` nên khổ rộng vẫn lỗi). */ .qict2 .left_detail_content > ul.list-unstyled, .qict2 .left_detail_content .qimenudoc, .qict2 .left_detail_content .qimenudoc > li, .qict2 .left_detail_content .qiContainer_border, .qict2 .left_detail_content table.thongke { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* ---- BÀI VIẾT ---- */ .qict2 .ArticleDetailControl { background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); padding: 16px !important; margin-bottom: 10px; } .qict2 .title_news h1, .qict2 h1.heading_title { color: var(--xanh) !important; font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; } /* Dòng ngày tháng + lượt đọc + thanh công cụ: gom vào một dải nhạt cho tách khỏi nội dung. */ .qict2 .date_and_cate { background: var(--nen); border: 1px solid var(--vach); border-radius: var(--bo); padding: 8px 10px; color: var(--muc-mo); font-size: 13.5px; } .qict2 .qicontentdetail { font-size: 16px; line-height: 1.75; color: var(--muc); } .qict2 .qicontentdetail p { margin-bottom: 10px; } /* ---- TIN LIÊN QUAN ---- */ .qict2 .tinlienquan { background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); padding: 10px; margin-right: 0 !important; } .qict2 .tinlienquan .big_item_news h1, .qict2 .tinlienquan > .line-5 > h1, .qict2 .tinlienquan .big_item_news h2, .qict2 .tinlienquan > .line-5 > h2 { color: var(--muc) !important; font-size: 18px; font-weight: 700; text-transform: uppercase; padding-left: 12px; position: relative; border-bottom: 1px solid var(--vach); padding-bottom: 8px; } .qict2 .tinlienquan .big_item_news h1::before, .qict2 .tinlienquan > .line-5 > h1::before, .qict2 .tinlienquan .big_item_news h2::before, .qict2 .tinlienquan > .line-5 > h2::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 10px; width: 4px; border-radius: 2px; background: var(--do); } .qict2 .tinlienquan .item_hint > .item, .qict2 .tinlienquan .item_hint > .itemNoanh { padding: 10px 0; border-bottom: 1px solid var(--vach); } .qict2 .tinlienquan .item_hint > *:last-child { border-bottom: 0; } /* Cắt tiêu đề còn 3 dòng — cùng luật với khối chuyên mục ở trang chủ, vì tin của Sở có tiêu đề rất dài (đo được 6 dòng) làm lệch hẳn danh sách. */ .qict2 .tinlienquan .item_hint a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.45; } /* 🔴 ẢNH PHẢI PHỦ KÍN HỘP TỈ LỆ CỦA CHÍNH NÓ — áp cho MỌI khối trong thân trang. Bộ CSS cũ dựng ảnh theo kiểu hộp tỉ lệ: `a.image_big_item` / `a.image_item_hint` là hộp `position: relative` có sẵn chiều cao, ảnh bên trong `position: absolute`. Nhưng ảnh chỉ được đặt `width: 100%` còn chiều cao để `auto` ⇒ cao theo tỉ lệ ảnh gốc, KHÔNG khớp hộp. Đo trên trang chuyên mục: hộp cao 636px, ảnh 800×496 kéo rộng 1136 thành cao 704px — thừa 68px, tràn xuống ĐÈ LÊN TIÊU ĐỀ 57px (user báo *"ảnh chuyên mục lại chèn lên tiêu đề"*). Hai lần trước tôi vá hụt: lần đầu ép ảnh 92×62 như khối chuyên mục trang chủ (ảnh teo thành con tem giữa khung 459×286), lần hai chỉ bọc phạm vi `.tinlienquan` nên trang chuyên mục vẫn lỗi. Lần này bọc `.qict2-than` — toàn bộ thân trang trong. */ .qict2-than a[class*="image_"] { display: block; position: relative; overflow: hidden; border-radius: 8px; background: var(--vach); } .qict2-than a[class*="image_"] img { width: 100%; height: 100%; object-fit: cover; } /* ---- KHỔ HẸP ---- */ @media (max-width: 991.98px) { .qict2-than .d-flex { flex-wrap: wrap; } .qict2-than .d-flex > * { min-width: 0; } .qict2 .left_detail_content, .qict2 .right_detail_content { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-right: 0 !important; } /* Bảng người dùng dán từ Word thường có bề rộng cứng — cho cuộn TRONG khối, không đẩy cả trang. */ .qict2-than table { display: block; overflow-x: auto; max-width: 100%; } /* Thanh công cụ bài viết là một hàng ngang cứng ~525px: cho cuộn trong chính nó. Phải ghim bề rộng thì `overflow` mới có tác dụng — khối này là flex item nên tự giãn theo nội dung, `overflow-x` một mình không cứu được. */ .qict2 .action_button_change { flex-wrap: nowrap; overflow-x: auto; width: 100%; max-width: 100%; min-width: 0; } } /* ===================================================================================================== ĐỒNG BỘ CHỮ · MÀU · KHOẢNG CÁCH VỚI BẢN THIẾT KẾ FIGMA (25/08/2026) ----------------------------------------------------------------------------------------------------- User đối chiếu trang thật với Figma "SoHanoi – 2026 V2" và chốt: **GIỮ NGUYÊN BỐ CỤC đang chạy**, chỉ chỉnh *kiểu chữ · màu chữ · khoảng cách* của KHỐI TIN TIÊU ĐIỂM và KHỐI TIN CHUYÊN MỤC cho giống thiết kế. CÁCH LẤY SỐ (không đoán): bản chụp Figma `docs/khaosat-hanoi-edu/cuon-*.jpg` là ảnh **1:1**, không thu phóng — kiểm được vì khung thiết kế rộng 1920, khối nội dung rộng 1298 ⇒ lề trái đúng (1920-1298)/2 = 311px, khớp số đo trên ảnh. Cỡ chữ suy từ **chiều cao dải mực** của từng hàng chữ (quét hàng điểm ảnh tối), khoảng cách dòng suy từ **bước giữa hai dải liên tiếp**. | Thành phần | Figma đo được | Trước khi sửa | |--------------------------------|----------------------|--------------------| | Tiêu đề tin nổi bật (hero nhỏ) | 31px / dòng 42 (1,32)| 27px / 1,3 | | Đầu thẻ "Tin mới cập nhật" | 22px, chữ ĐỎ | 19px, mực đậm | | Tiêu đề tin trong danh sách | 14,5px / dòng 19,5 | 15,5px / dòng 24 | | Ngày đăng | 13px xám | 13px xám (khớp) | | Đầu thẻ màu (THÔNG BÁO…) | 19px | 17px | | Khe giữa hai tin trong thẻ | ~34px (đệm 16px/phía)| 10px (đệm 5px/phía)| | Tiêu đề khối (gạch đỏ) | 24px | 28px | | Tin lớn: tiêu đề / tóm tắt | 25px/1,28 · 14,5/1,5 | 34px/1,28 · 16,5/1,65 | | Cột trái : cột phải (tiêu điểm)| 858 : 400 = 2,15 : 1 | 1,55 : 1 | 🔴 MỘT ĐIỂM VƯỢT QUYẾT ĐỊNH CŨ: chuẩn "giữa hai tin bài = 10px" (user chốt 21/08) nhỏ hơn hẳn thiết kế. Ở đây theo Figma (đệm 14px mỗi phía) vì user vừa yêu cầu "khoảng cách như thiết kế"; khe GIỮA CÁC THẺ/KHỐI vẫn giữ 10px như cũ. Muốn quay lại 10px thì sửa đúng hai dòng `li{padding}`. Vì sao đặt ở CUỐI TỆP: các luật trên chỉ nâng cỡ/khoảng cách của chính những bộ chọn đã có, cùng độ ưu tiên với bản gốc — phải đứng sau mới thắng. Xem bẫy "độ ưu tiên bằng nhau" ở đầu tệp. ===================================================================================================== */ /* ---- ① KHỐI TIN TIÊU ĐIỂM: hai cột đúng tỉ lệ thiết kế ---- */ /* 🔴 PHẢI BỌC `@media (min-width: 992px)`. Luật gốc xếp một cột cho khổ hẹp nằm ở `@media (max-width: 991.98px) { .qict2-dautin { grid-template-columns: 1fr } }` — bộ chọn 0-1-0. Viết `.qict2 .qict2-dautin` (0-2-0) ở cuối tệp thì THẮNG cả luật trong media query, và điện thoại 440px vẫn hiện HAI CỘT: ảnh tin nổi bật co còn ~270px, thẻ "Tin mới cập nhật" còn ~120px, chữ vỡ từng dòng một. Đã chụp thấy ở lần sửa đầu. */ @media (min-width: 992px) { .qict2 .qict2-dautin { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); } } /* Tiêu đề tin nổi bật chồng trên ảnh: to hơn, vẫn chữ trắng. */ .qict2 .qict2-noibat-tit { font-size: clamp(20px, 2.05vw, 31px); line-height: 1.32; } /* ---- Thẻ "Tin mới cập nhật" ---- */ /* Figma để chữ tiêu đề thẻ màu ĐỎ chủ đạo, không phải mực đậm. */ .qict2 .qict2-moi-dau { font-size: 22px; color: var(--do); } .qict2 .qict2-moi-dau img { width: 34px; height: 34px; } .qict2 .qict2-moi li { padding: 14px 0; } .qict2 .qict2-moi li:first-child { padding-top: 12px; } .qict2 .qict2-moi li:last-child { padding-bottom: 12px; } .qict2 .qict2-moi li .ng { margin-bottom: 3px; } /* đo: khe ngày→tiêu đề của Figma là 12px ink, 6px ra 16px */ /* Cắt 2 dòng đúng thiết kế: tin của Sở có tiêu đề rất dài, để nguyên thì cột phải cao vượt ảnh tin nổi bật và kéo lệch cả khối (đo trên trang thật: một tin chiếm 4 dòng). */ .qict2 .qict2-moi li a { font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- ② KHỐI TIN CHUYÊN MỤC: ba thẻ màu (Thông báo · Văn bản · Hoạt động ngành) ---- */ .qict2 .qict2-cot-dau { font-size: 19px; } .qict2 .qict2-cot li { padding: 14px 0; } .qict2 .qict2-cot li:first-child { padding-top: 12px; } .qict2 .qict2-cot li:last-child { padding-bottom: 12px; } .qict2 .qict2-cot li .ng { margin-bottom: 3px; } .qict2 .qict2-cot li a { font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Tiêu đề khối (gạch đỏ + chữ hoa) ---- */ .qict2 .qict2-tieude { font-size: clamp(19px, 1.6vw, 24px); } /* ---- Tin lớn trong khối tuyên truyền / chuyên mục ---- */ .qict2 .qict2-lon-tit { font-size: clamp(20px, 1.75vw, 25px); line-height: 1.28; } .qict2 .qict2-lon-mo { font-size: 14.5px; line-height: 1.5; } .qict2 .qict2-meta { font-size: 13px; } /* ---- Thẻ tin có ảnh (Thông tin đơn vị · Truyền hình) ---- */ .qict2 .qict2-the-tit { font-size: 17px; line-height: 1.4; } .qict2 .qict2-the-mo { font-size: 13.5px; line-height: 1.45; } /* ---- Danh sách trong khối chuyên mục (1 ảnh lớn + 2 cột) ---- */ .qict2 .qict2-cmkhoi-lon h3 { font-size: clamp(17px, 1.45vw, 20px); } .qict2 .qict2-cmkhoi-ds a, .qict2 .qict2-cmkhoi-anh .chu a { font-size: 14.5px; line-height: 1.35; } .qict2 .qict2-cmkhoi-ds li, .qict2 .qict2-cmkhoi-anh li { padding: 12px 0; } /* ===================================================================================================== TRANG DANH SÁCH KIỂU BẢNG — Thông báo · Thư mời · Bá công khai · Tìm kiếm · Hỏi đáp… (26/08/2026) ----------------------------------------------------------------------------------------------------- User báo "trang thông báo còn xấu" (/thongbao). Đo trên trang thật, bốn chỗ lệch hẳn với vỏ ct2: ① Tiêu đề trang `.qihome_tieudebg` vẫn là dải XANH kiểu cũ. Bộ luật đổi sang "gạch đỏ + chữ mực" ở trên CHỈ bọc `.left_detail_content` (cột trái), mà trang này KHÔNG có cột trái nên không ăn. ② Ô tìm kiếm: nút "Tìm kiếm" là khối xanh Bootstrap mặc định, cao hơn ô nhập, bo góc lệch nhau. ③ Bảng có hàng đầu "STT | Danh sách bản tin" — thừa, và cột STT chiếm chỗ như bảng nhập liệu. ④ 🔴 Dòng NÀO CÓ ẢNH thì ảnh chiếm `col-sm-5` của khối rộng ~1380px ⇒ ảnh 560×270, to gấp mấy lần chữ, phá vỡ nhịp của cả danh sách (đo ở dòng 9 trang /thongbao). Dòng không ảnh thì `col-sm-12`. Vì thế danh sách nhìn "gãy khúc" chứ không phải do khoảng cách. Chỉ sửa KIỂU, không đụng mã dựng trang: partial `_ThongBaoThuMoiBody` dùng chung cho ~12 trang và cho CẢ bản điện thoại lẫn 46 mẫu giao diện khác. Bọc `.qict2` nên chỉ họ vỏ ct2 đổi. ===================================================================================================== */ /* ① Tiêu đề trang — cùng kiểu `.qict2-tieude` của trang chủ: gạch đỏ + chữ mực đậm. */ .qict2 #MainContent > .qihome_tieudebg { background: none !important; border: 0 !important; border-bottom: 1px solid var(--vach) !important; border-radius: 0 !important; padding: 0 0 10px 12px !important; margin: 0 0 12px !important; position: relative; } .qict2 #MainContent > .qihome_tieudebg::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 12px; width: 5px; border-radius: 3px; background: var(--do); } .qict2 #MainContent > .qihome_tieudebg .qihome_tieude, .qict2 #MainContent > .qihome_tieudebg p { margin: 0; color: var(--muc) !important; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; } /* ② Ô tìm kiếm — ô nhập và nút cùng chiều cao, nút mang màu đỏ chủ đạo. */ .qict2 #MainContent .input-group > .form-control { height: 44px; border: 1px solid var(--vach); border-right: 0; border-radius: 10px 0 0 10px; padding: 0 14px; font-size: 15px; box-shadow: none; } .qict2 #MainContent .input-group > .form-control:focus { border-color: var(--do); outline: 2px solid rgba(200,16,46,.18); outline-offset: 0; } .qict2 #MainContent .input-group .btn.btnqi { height: 44px; border: 0; border-radius: 0 10px 10px 0; padding: 0 24px; background: var(--do); color: #fff; font-size: 15px; font-weight: 600; line-height: 44px; } .qict2 #MainContent .input-group .btn.btnqi:hover { background: var(--do-dam); color: #fff; } /* Dòng đếm kết quả. */ .qict2 #MainContent .qi-tk-dem { font-size: 14px; color: var(--muc-mo); margin: 12px 0 6px; } /* 🔴 PHẢI BÓ THEO `:has(.qititle)` — KHÔNG được nhắm mọi `table.GridViewStyle2`. Cùng một lớp bảng dùng cho HAI loại trang khác hẳn nhau: · DANH SÁCH TIN (thongbao · thumoi · bacongkhai · Timkiem) — mỗi ô có `h5.qititle`, hàng tiêu đề chỉ ghi "STT | Danh sách bản tin" nên ẩn đi là gọn; · BẢNG DỮ LIỆU THẬT (DsDonViGiaoDuc · hoidap) — hàng tiêu đề mang tên cột có nghĩa (Công lập · Tư thục · Liên cấp · Nước ngoài · địa chỉ web). Ẩn đi là mất thông tin: đã chụp thấy 4 cột ô đánh dấu trơ trọi không còn nhãn. Đếm trên trang thật: /thongbao 15 `qititle`, /Timkiem 6, còn /DsDonViGiaoDuc và /hoidap = 0. */ /* ③ Bảng danh sách — bỏ dáng "bảng nhập liệu", đưa về danh sách có số thứ tự màu đỏ. Hàng tiêu đề GIỮ LẠI cho trình đọc màn hình (ẩn bằng kỹ thuật clip, không `display:none`). */ .qict2 #MainContent table.GridViewStyle2 { border: 0; margin-bottom: 0; } /* Bootstrap 4 đặt `.table tbody { border-top: 2px solid #212529 }` — một vạch ĐEN đậm chắn ngang ngay trên dòng đầu, còn nặng hơn cả đường kẻ dưới tiêu đề trang. Đo được rgb(33,37,41) 2px. */ .qict2 #MainContent table.GridViewStyle2 tbody { border-top: 0; } .qict2 #MainContent table.GridViewStyle2:has(.qititle) thead tr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .qict2 #MainContent table.GridViewStyle2:has(.qititle) td { border: 0; border-bottom: 1px solid var(--vach); padding: 10px 0; background: none; } .qict2 #MainContent table.GridViewStyle2:has(.qititle) tr:last-child td { border-bottom: 0; } /* Cột số thứ tự phải có ĐƯỜNG KẺ DỌC tách khỏi cột bản tin (user chốt 26/08: "cột số thứ tự chưa phân tách với bản tin"). Cùng cách xử lý với vỏ rp trong `qi-noidung-rp.css`. */ .qict2 #MainContent table.GridViewStyle2:has(.qititle) td:first-child { width: 46px; color: var(--do); font-weight: 700; font-size: 15px; border-right: 1px solid var(--vach); padding-right: 10px; } .qict2 #MainContent table.GridViewStyle2:has(.qititle) td:nth-child(2) { padding-left: 14px; } .qict2 #MainContent table.GridViewStyle2:has(.qititle) .qititle { font-size: 15.5px; line-height: 1.4; font-weight: 600; margin: 0; } .qict2 #MainContent table.GridViewStyle2:has(.qititle) .time { font-size: 13px; color: var(--muc-mo); margin: 4px 0 0 !important; } .qict2 #MainContent table.GridViewStyle2:has(.qititle) .row { margin: 0; } .qict2 #MainContent table.GridViewStyle2:has(.qititle) .qibootomSpace { padding-top: 0 !important; } /* ④ Ảnh của dòng có ảnh: ghim ô ảnh 180px và cắt theo tỉ lệ 3/2 thay vì để chiếm 5/12 bề ngang. Chỉ áp từ 576px trở lên — dưới ngưỡng đó Bootstrap cho `col-sm-*` chiếm trọn dòng, ảnh to là đúng với điện thoại; ép 180px ở khổ hẹp sẽ còn ~230px cho chữ, tiêu đề vỡ vụn. */ @media (min-width: 576px) { .qict2 #MainContent table.GridViewStyle2:has(.qititle) td .row > [class*="col-sm-5"] { flex: 0 0 180px; max-width: 180px; padding-right: 10px; } .qict2 #MainContent table.GridViewStyle2:has(.qititle) td .row > [class*="col-sm-7"] { flex: 1 1 0%; max-width: none; padding-left: 0; } .qict2 #MainContent table.GridViewStyle2:has(.qititle) td .row img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; } } /* /App_Themes/all/allcss/qiUserLogin.css */ .open-chat-btn { position: fixed; bottom: 150px; right: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); cursor: pointer; z-index: 100000; } .open-chat-btn:hover { background-color: #0056b3; } /* Popup chat */ .chat-popup { display: none; /* Ẩn popup mặc định */ position: fixed; bottom: 200px; /* Cách nút 60px */ right: 20px; width: 380px; height: 450px; background-color: white; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1100; overflow: hidden; } /* Header của popup */ .chat-header { background-color: #007bff; color: white; padding: 10px; font-size: 16px; font-weight: bold; position: relative; } /* Nút đóng trong popup */ .close-btn { position: absolute; top: 5px; right: 10px; background: none; border: none; color: white; font-size: 16px; cursor: pointer; } .close-btn:hover { color: #ffdddd; } .login-web { position: fixed; bottom: 150px; right: 20px; z-index: 9000; background: #006ab0; padding: 5px; border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } a:focus-visible { outline: none !important; } .qibgmenutop .pt-1 { padding-top: 5px !important; } .goog-te-combo { border: 1px solid #ddd !important; padding: 2px 10px; border-radius: 5px; } select:focus-visible { outline: 1px solid #ddd !important; } .skiptranslate { width: 0px !important; height: 0px !important; } body { top: 0px !important; } .VIpgJd-ZVi9od-aZ2wEe-wOHMyf.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc { width: 0px !important; height: 0px !important; display: none !important; } #goog-gt-tt { display: none !important; } #google_translate_element { bottom: 0px !important; position: fixed; } .infoFooter { text-wrap: balance; } .zalo-chat-widget { bottom: 80px !important; right: 20px !important; /*left: auto !important;*/ visibility: visible !important; /*position: fixed !important;*/ }