/* /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-ct.css */
/* =====================================================================================
MẪU GIAO DIỆN MỚI gdnn3 — CỔNG THÔNG TIN (theo hanoi.gov.vn)
User chốt 2026-08-11: "triển khai mẫu giống trang này cho Sở giáo dục Hà Nội,
https://hanoi.gov.vn/". Các con số dưới đây ĐO TRỰC TIẾP trên trang đó:
· nền đầu trang linear-gradient(#1566bf → …) · màu chữ/nút chính #175ca9
· nút nhanh bo tròn 99px, nền #175ca9, chữ trắng · tiêu đề khối 18px/700 IN HOA #175ca9
· tiêu đề tin trong hero 24px/700 #1b1d2d · nền trang trắng, khối xen kẽ xám nhạt
· chế độ quốc tang: .TopBanner { filter: grayscale(1) } — xem khối "QUỐC TANG" cuối tệp
Toàn bộ luật nằm trong .qict để không rò ra 46 mẫu cũ.
===================================================================================== */
.qict {
--ct-main: #175ca9; /* ghi đè bằng màu đơn vị (ColorSite) ở thuộc tính style */
--ct-dam: color-mix(in srgb, var(--ct-main) 78%, #000);
--ct-nhat: color-mix(in srgb, var(--ct-main) 8%, #fff);
--ct-vien: #e3e8ef;
--ct-chu: #1b1d2d;
--ct-chu-nhat: #5a6472;
--ct-cam: #d83b01; /* dải nhấn (thời tiết/tiện ích) */
--ct-rong: 1200px;
--ct-khe: 20px;
color: var(--ct-chu);
background: #fff;
/* Bố cục tự co giãn: KHÔNG bao giờ đẩy thanh cuộn ngang dù khối con rộng hơn khung. */
overflow-x: clip;
}
.qict *, .qict *::before, .qict *::after { box-sizing: border-box; }
.qict img { max-width: 100%; height: auto; }
/* 🔴 .qict a { color: inherit } sẽ THẮNG mọi luật màu chỉ có một class (0,1,0 < 0,1,1).
Đó là nguyên nhân ba lần icon/nút bị đen ở hai mẫu landing trước ⇒ ở đây mọi luật màu cho
thẻ đều khai kèm `a.` để có cùng độ đặc hiệu. */
.qict a { color: inherit; text-decoration: none; }
.qict a:hover { color: var(--ct-main); }
.qict-wrap { max-width: var(--ct-rong); margin: 0 auto; padding: 0 16px; }
/* ============================ ① THANH TIỆN ÍCH TRÊN CÙNG ============================ */
.qict-tienich { background: var(--ct-dam); color: #fff; font-size: 13.5px; }
.qict-tienich-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; flex-wrap: wrap; }
.qict-ti-trai, .qict-ti-phai { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qict-tienich a.qict-ti-lk, .qict-tienich button {
color: #fff; background: none; border: 0; padding: 6px 10px; font: inherit; cursor: pointer; border-radius: 4px;
}
.qict-tienich a.qict-ti-lk:hover, .qict-tienich button:hover { background: rgba(255,255,255,.16); color: #fff; }
.qict-ngay { opacity: .9; }
/* Khay chọn ngôn ngữ (Google dịch, 13 thứ tiếng) trên nền xanh đậm.
⚠️ KHÔNG ẩn #google_translate_element bằng display:none — làm thế là hỏng luôn chức năng dịch
(đã dính ở mẫu gdnn1); chỉ khoác lại kiểu dáng cho vừa thanh tiện ích. */
.qict .qi-ngonngu--ct { margin: 0 6px; }
.qict .qi-ngonngu--ct .qi-ngonngu-nut { height: 28px; font-size: 13px; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); color: #fff; }
.qict .qi-ngonngu--ct .qi-ngonngu-nut:hover { background: #fff; color: var(--ct-main); }
.qict .qi-ngonngu--ct .qi-ngonngu-mui { border-top-color: currentColor; }
.qict .qi-ngonngu--ct .qi-ngonngu-ten { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qict-tb-eng img { height: 17px; width: auto; }
/* ============================ ② ĐẦU TRANG (nền ảnh + gradient) ============================ */
.qict-header {
background-color: var(--ct-main);
background-image: linear-gradient(90deg, var(--ct-main) 0%, var(--ct-dam) 100%);
color: #fff;
}
.qict-header-in { display: flex; align-items: center; gap: 18px; padding: 14px 16px; flex-wrap: wrap; }
.qict-logo { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 320px; }
.qict-logo img { width: 62px; height: 62px; object-fit: contain; flex: none; }
.qict-logo-ten { margin: 0; font-size: 20px; line-height: 1.28; font-weight: 700; text-transform: uppercase; color: #fff; }
.qict-logo-phu { display: block; font-size: 13px; font-weight: 400; text-transform: none; opacity: .92; }
.qict a.qict-logo:hover .qict-logo-ten { color: #fff; }
/* Ô tìm kiếm + nút nhanh ở đầu trang — như cụm bên phải của cổng TP */
.qict-header-phai { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.qict-tim { display: flex; align-items: center; background: #fff; border-radius: 99px; padding: 4px 4px 4px 14px; min-width: 260px; }
.qict-tim input {
border: 0; outline: 0; font: inherit; font-size: 14px; padding: 6px 4px; flex: 1 1 auto; min-width: 0;
color: var(--ct-chu); background: transparent;
}
.qict-tim button {
border: 0; cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
background: var(--ct-main); color: #fff; flex: none;
}
.qict-nhanh { display: flex; gap: 8px; flex-wrap: wrap; }
.qict a.qict-nut-nhanh {
display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 99px;
background: rgba(255,255,255,.16); color: #fff; font-size: 13.5px; font-weight: 600;
border: 1px solid rgba(255,255,255,.35);
}
.qict a.qict-nut-nhanh:hover { background: #fff; color: var(--ct-main); }
/* ============================ ③ MENU NGANG ============================ */
.qict-menu-bar { background: var(--ct-dam); position: relative; z-index: 30; }
.qict-menu-in { display: flex; align-items: center; }
.qict-burger { display: none; background: none; border: 0; padding: 10px 12px; cursor: pointer; }
.qict-burger span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; }
.qict-menu > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.qict-menu > ul > li { position: relative; }
.qict-menu > ul > li > a {
display: block; padding: 13px 15px; color: #fff; font-size: 14.5px; font-weight: 600; text-transform: uppercase;
}
.qict-menu > ul > li > a:hover, .qict-menu > ul > li > a.dang-o { background: rgba(255,255,255,.18); color: #fff; }
.qict-sub {
list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0; min-width: 250px;
background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.16); border-top: 3px solid var(--ct-main);
display: none; z-index: 40;
}
.qict-menu li.co-con:hover > .qict-sub, .qict-menu li.co-con:focus-within > .qict-sub { display: block; }
.qict-sub li a { display: block; padding: 9px 16px; font-size: 14px; color: var(--ct-chu); }
.qict-sub li a:hover { background: var(--ct-nhat); color: var(--ct-main); }
/* ============================ ④ HERO / SLIDE ĐẦU ============================
Đây là "khối slide đầu" mà user nhắc tới khi nói về giao diện quốc tang. */
.qict-hero { background: #f4f6f9; padding: 22px 0 26px; }
.qict-hero-in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--ct-khe); }
.qict-hero-chinh { position: relative; display: block; border-radius: 8px; overflow: hidden; background: #dfe4ea; }
.qict-hero-chinh img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.qict-hero-phu {
position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 18px 16px; color: #fff;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 68%);
}
.qict-hero-phu h2 { margin: 0; font-size: 24px; line-height: 1.34; font-weight: 700; color: #fff; }
.qict-hero-phu span { display: block; margin-top: 6px; font-size: 13px; opacity: .9; }
.qict a.qict-hero-chinh:hover .qict-hero-phu h2 { color: #fff; text-decoration: underline; }
.qict-hero-ds { display: flex; flex-direction: column; gap: 12px; }
.qict-hero-ds article { display: flex; gap: 11px; background: #fff; border-radius: 6px; padding: 9px; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.qict-hero-ds img { width: 108px; height: 72px; object-fit: cover; border-radius: 4px; flex: none; }
.qict-hero-ds h3 { margin: 0; font-size: 14.5px; line-height: 1.42; font-weight: 600; }
.qict-hero-ds time { display: block; margin-top: 5px; font-size: 12px; color: var(--ct-chu-nhat); }
/* ============================ KHỐI CHUNG ============================ */
.qict-sec { padding: 26px 0; }
.qict-sec-nen { background: #f4f6f9; }
.qict-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--ct-vien); }
.qict-dau h2, .qict-dau h3 {
margin: 0 0 -2px; padding: 0 0 8px; font-size: 18px; font-weight: 700; text-transform: uppercase;
color: var(--ct-main); border-bottom: 3px solid var(--ct-main);
}
.qict a.qict-xem { font-size: 13.5px; font-weight: 600; color: var(--ct-main); white-space: nowrap; }
.qict a.qict-xem:hover { text-decoration: underline; }
.qict-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ct-khe); }
.qict-luoi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qict-the { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,40,.08); display: flex; flex-direction: column; }
.qict-the .qict-anh { display: block; background: #e8ecf1; }
.qict-the .qict-anh img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .35s ease; }
.qict-the:hover .qict-anh img { transform: scale(1.045); }
.qict-the-tt { padding: 11px 13px 14px; display: flex; flex-direction: column; gap: 6px; }
.qict-the h4 { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 600; }
.qict-the time { font-size: 12.5px; color: var(--ct-chu-nhat); }
/* Danh sách gạch đầu dòng (thông báo/văn bản/đọc nhiều) */
.qict-3cot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ct-khe); }
.qict-ds { list-style: none; margin: 0; padding: 0; }
.qict-ds li { padding: 9px 0 9px 16px; border-bottom: 1px dashed var(--ct-vien); position: relative; font-size: 14.5px; line-height: 1.5; }
.qict-ds li::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--ct-main); }
.qict-ds li span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ct-chu-nhat); }
/* ============================ ⑤ LÃNH ĐẠO ĐƠN VỊ ============================ */
.qict-lanhdao { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--ct-khe); }
.qict-ld { background: #fff; border: 1px solid var(--ct-vien); border-radius: 8px; padding: 14px; text-align: center; }
.qict-ld img { width: 108px; height: 108px; object-fit: cover; border-radius: 50%; margin: 0 auto 10px; display: block; border: 3px solid var(--ct-nhat); }
.qict-ld-ten { margin: 0; font-size: 15.5px; font-weight: 700; text-transform: uppercase; color: var(--ct-main); }
.qict-ld-cv { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ct-chu-nhat); }
/* ============================ ⑥ BẢN ĐỒ SỐ MẠNG LƯỚI TRƯỜNG HỌC ============================ */
.qict-bando-khoi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--ct-khe); align-items: stretch; }
.qict-bando {
height: 460px; border-radius: 8px; overflow: hidden; border: 1px solid var(--ct-vien); background: #e8ecf1;
/* Bản đồ nằm dưới menu xổ xuống (Leaflet đặt z-index 400 cho pane bản đồ). */
position: relative; z-index: 1;
}
.qict-bando .leaflet-container { font: inherit; }
.qict-bando-ben { display: flex; flex-direction: column; gap: 12px; }
.qict-bando-loc { display: flex; flex-wrap: wrap; gap: 7px; }
.qict-bando-loc button {
border: 1px solid var(--ct-vien); background: #fff; color: var(--ct-chu); border-radius: 99px;
padding: 6px 13px; font: inherit; font-size: 13.5px; cursor: pointer;
}
.qict-bando-loc button.dang-chon { background: var(--ct-main); border-color: var(--ct-main); color: #fff; font-weight: 600; }
.qict-so-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qict-so-o { background: #fff; border: 1px solid var(--ct-vien); border-radius: 8px; padding: 12px 14px; }
.qict-so-o b { display: block; font-size: 24px; font-weight: 700; color: var(--ct-main); line-height: 1.15; }
.qict-so-o span { font-size: 13px; color: var(--ct-chu-nhat); }
.qict-bando-ghichu { font-size: 12.5px; color: var(--ct-chu-nhat); line-height: 1.55; }
.qict-bando-pop b { display: block; font-size: 14px; margin-bottom: 3px; color: var(--ct-main); }
.qict-bando-pop small { color: var(--ct-chu-nhat); }
.qict-bando-iframe { width: 100%; height: 460px; border: 0; border-radius: 8px; }
/* ============================ ⑦ THƯ VIỆN ẢNH / VIDEO ============================ */
.qict-anh-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qict a.qict-anh-o { position: relative; display: block; border-radius: 8px; overflow: hidden; background: #e8ecf1; }
.qict-anh-o img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.qict-anh-o span {
position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; color: #fff; font-size: 13px;
background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75));
}
.qict-vid { position: relative; display: block; }
.qict-vid > i {
position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%;
background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
}
/* ============================ ⑧ LIÊN KẾT / CHÂN TRANG ============================ */
.qict-lienket { display: flex; flex-wrap: wrap; gap: 10px; }
.qict a.qict-lk-o {
border: 1px solid var(--ct-vien); background: #fff; border-radius: 6px; padding: 9px 14px; font-size: 14px;
}
.qict a.qict-lk-o:hover { border-color: var(--ct-main); color: var(--ct-main); }
.qict-footer { background: var(--ct-dam); color: #fff; padding: 30px 0 0; margin-top: 8px; }
.qict-footer a { color: #fff; }
.qict-footer-in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--ct-khe); }
.qict-footer h3 { margin: 0 0 10px; font-size: 15px; text-transform: uppercase; color: #fff; }
.qict-footer ul { list-style: none; margin: 0; padding: 0; }
.qict-footer li { padding: 5px 0; font-size: 14px; }
.qict-footer p { margin: 6px 0; font-size: 14px; line-height: 1.6; opacity: .92; }
.qict-ft-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.qict-ft-logo img { width: 54px; height: 54px; object-fit: contain; }
.qict-ft-logo span { font-weight: 700; text-transform: uppercase; line-height: 1.3; }
.qict-ft-day { margin-top: 22px; background: rgba(0,0,0,.25); }
.qict-ft-day-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 16px; font-size: 13px; }
/* Biểu tượng mạng xã hội — GIỮ MÀU THƯƠNG HIỆU (user chốt 2026-08-11).
Base khai `a.qict-mxh` để modifier bên dưới (cùng 0,2,1) có thể thắng nền mặc định. */
.qict-mxh-hang { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.qict a.qict-mxh, .qict .qict-mxh {
width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.18); color: #fff; font-size: 15px;
}
.qict a.qict-mxh:hover { transform: translateY(-2px); color: #fff; }
.qict a.qict-mxh--fb { background: #1877f2; }
.qict a.qict-mxh--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.qict a.qict-mxh--li { background: #0a66c2; }
.qict a.qict-mxh--tt { background: #010101; }
.qict a.qict-mxh--yt { background: #ff0000; }
.qict a.qict-mxh--gg { background: #ea4335; }
.qict-mxh .qict-svg { width: 16px; height: 16px; }
.qict-len {
position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0;
background: var(--ct-main); color: #fff; cursor: pointer; display: none; z-index: 60; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.qict-len.hien { display: block; }
/* ============================ LÕI TRANG TRONG ============================
Trang chuyên mục / chi tiết dùng CHUNG vỏ này (user chốt 2026-08-11: "các trang trong…
vẫn phải giữ nguyên được các đặc trưng như header, Footer, menu, chỉ thay phần lõi thôi").
Phần lõi là markup CŨ của từng trang nên chỉ cần cho nó một khung nền trắng, có khoảng thở. */
.qict-loi { padding: 22px 0 30px; min-height: 320px; }
.qict-loi-in { background: #fff; }
/* Lõi là markup CŨ, dựng cho khung cố định ~1100px (Bootstrap 4 + vài khối width cứng), nên ở khổ
hẹp phải bù. Không bù thì cột phải của trang chi tiết bị `overflow-x: clip` của .qict cắt mất —
đã đo: article.d-flex rộng 558px trong khung 349px, mất trọn khối "Tin liên quan". */
.qict-loi img, .qict-loi video, .qict-loi iframe { max-width: 100%; }
.qict-loi table { max-width: 100%; }
@media (max-width: 900px) {
.qict-loi .d-flex { flex-wrap: wrap; }
/* Không có min-width:0 thì con flex giữ nguyên chiều rộng nội dung (thanh cỡ chữ + chia sẻ của
trang chi tiết đo được 364px trong khung 349px) và tiếp tục đẩy khối cha ra ngoài mép. */
.qict-loi .d-flex > * { min-width: 0; }
.qict-loi .left_detail_content,
.qict-loi .right_detail_content,
.qict-loi aside,
.qict-loi [class*="col-sm-"],
.qict-loi [class*="col-md-"] { width: 100%; max-width: 100%; flex: 0 0 100%; margin-right: 0; }
/* Bảng do người dùng dán từ Word thường có width cứng — cho cuộn ngang TRONG khối, không đẩy trang. */
.qict-loi table { display: block; overflow-x: auto; }
/* Thanh công cụ bài viết (chọn phông · cỡ chữ · đọc bài · chia sẻ) là một hàng ngang cứng
525px: cho cuộn ngang trong chính nó thay vì tràn ra ngoài rồi bị cắt. */
/* Phải ghim chiều 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 (đo được 525px trong khung 349px) và overflow-x một mình không cứu được. */
.qict-loi .action_button_change {
flex-wrap: nowrap; overflow-x: auto; width: 100%; max-width: 100%; min-width: 0;
}
}
/* Quảng cáo "bay hai bên mép" của bộ vỏ cũ định vị theo mép màn hình 1250px; trong vỏ landing
(khung 1200px, có overflow-x: clip) nó luôn nằm ngoài vùng nhìn thấy ⇒ ẩn hẳn cho sạch. */
.qict .ads-wrapper.adsLeft, .qict .ads-wrapper.adsRight { display: none; }
/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
.qict-hero-in { grid-template-columns: minmax(0, 1fr); }
.qict-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qict-luoi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qict-3cot { grid-template-columns: minmax(0, 1fr); }
.qict-bando-khoi { grid-template-columns: minmax(0, 1fr); }
.qict-anh-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qict-footer-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.qict-header-in { padding: 12px 16px; }
.qict-logo img { width: 50px; height: 50px; }
.qict-logo-ten { font-size: 16.5px; }
.qict-header-phai { width: 100%; }
.qict-tim { width: 100%; min-width: 0; }
.qict-burger { display: block; }
.qict-menu {
display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ct-dam);
max-height: 72vh; overflow: auto;
}
.qict-menu.mo { display: block; }
.qict-menu > ul { flex-direction: column; }
.qict-menu > ul > li > a { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.qict-sub { position: static; display: block; box-shadow: none; border-top: 0; background: rgba(0,0,0,.16); }
.qict-sub li a { color: #fff; padding-left: 30px; }
.qict-sub li a:hover { background: rgba(255,255,255,.12); color: #fff; }
.qict-luoi, .qict-luoi-3 { grid-template-columns: minmax(0, 1fr); }
.qict-anh-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qict-footer-in { grid-template-columns: minmax(0, 1fr); }
.qict-hero-phu { padding: 30px 12px 12px; }
.qict-hero-phu h2 { font-size: 18px; }
.qict-bando { height: 360px; }
.qict-so-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ============================ QUỐC TANG ============================
User chốt 2026-08-11: "vì đang quốc tang nên khối slide đầu sẽ phủ 1 lớp giao diện màu đen,
mình có thể ứng dụng cho giao diện quốc tang này".
Hệ thống đã có SẴN hai mức cờ trong SiteConfig (DMDonVi):
· isGiaoDienQuocTangFull → xám TOÀN TRANG (body) — MasterAllHeaderData lo, không cần gì ở đây;
· isGiaoDienQuocTang → chỉ xám phần KHUNG. Với mẫu này, "khung" = thanh tiện ích + đầu
trang + menu + KHỐI SLIDE ĐẦU + chân trang, đúng như cổng hanoi.gov.vn đang làm
(.TopBanner { filter: grayscale(1) }).
Lớp .qi-quoctang do MasterAllHeaderData gắn thêm vào (xem Support/MasterAllHeaderData.cs). */
body.qi-quoctang .qict-tienich,
body.qi-quoctang .qict-header,
body.qi-quoctang .qict-menu-bar,
body.qi-quoctang .qict-hero,
body.qi-quoctang .qict-footer { filter: grayscale(100%); }
/* Lớp phủ tối trên chính ảnh slide đầu — phần "phủ 1 lớp giao diện màu đen" user mô tả. */
body.qi-quoctang .qict-hero-chinh::after {
content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); pointer-events: none; z-index: 2;
}
body.qi-quoctang .qict-hero-phu { z-index: 3; }
/* Dải băng tang mảnh phía trên cùng — nhận diện quen thuộc của các cổng thông tin trong ngày Quốc tang. */
body.qi-quoctang .qict-bang-tang { display: block; }
.qict-bang-tang { display: none; height: 6px; background: linear-gradient(90deg, #000 0%, #4a4a4a 50%, #000 100%); }
/* =============================================================================
BẢN ĐỒ MẠNG LƯỚI NHÚNG TỪ HỆ THỐNG CÓ SẴN (2026-08-11)
========================================================================== */
.qict-bando-nhung-khung {
position: relative;
display: flex;
flex-direction: column;
min-height: 460px;
border: 1px solid var(--ct-vien, #e3e7ee);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.qict-bando-thanh {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--ct-vien, #e3e7ee);
background: #f6f8fb;
}
.qict-bando-nhan { flex: 1 1 auto; font-size: 13.5px; font-weight: 600; color: var(--ct-ink, #16233a); }
.qict-bando-nhan i { margin-right: 6px; color: var(--ct-main, #0b4f9e); }
.qict-bando-nut {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border: 1px solid var(--ct-vien, #e3e7ee);
border-radius: 8px;
background: #fff;
color: var(--ct-main, #0b4f9e);
font-size: 13px;
cursor: pointer;
text-decoration: none;
}
.qict-bando-nut:hover { background: var(--ct-main, #0b4f9e); border-color: var(--ct-main, #0b4f9e); color: #fff; }
.qict-bando-iframe { flex: 1 1 auto; width: 100%; min-height: 420px; border: 0; display: block; }
/* ---- Mở rộng: bung ra toàn màn hình ---- */
.qict-bando-nhung-khung.dang-rong {
position: fixed;
inset: 0;
z-index: 2000;
border-radius: 0;
/* dvh: bản đồ mở toàn màn hình trên điện thoại — 100vh cao hơn vùng nhìn thấy khi thanh địa
chỉ đang hiện, làm khung bản đồ thò xuống dưới mép. */
min-height: 100vh;
min-height: 100dvh;
}
.qict-bando-nhung-khung.dang-rong .qict-bando-iframe { min-height: calc(100vh - 49px); min-height: calc(100dvh - 49px); }
body.qict-khoa-cuon { overflow: hidden; }
/* ---- Dự phòng khi trang bản đồ không cho nhúng ---- */
.qict-bando-chan {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 40px 20px;
text-align: center;
}
.qict-bando-chan > i { font-size: 34px; color: var(--ct-main, #0b4f9e); opacity: .55; }
.qict-bando-chan p { margin: 0; color: var(--ct-ink-2, #5b6673); font-size: 14px; }
.qict-bando-mo {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 10px;
background: var(--ct-main, #0b4f9e);
color: #fff !important;
font-size: 14.5px;
text-decoration: none;
}
/* Khối bản đồ nhúng: cho phần bản đồ rộng hơn phần số liệu. */
@media (min-width: 992px) {
.qict-bando-khoi.qict-bando-nhung { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
}
/* /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;*/
}
/* /htmlib/css/gdfull.css */
body {
}
#MainContent {
padding: 10px 5px !important;
}
.container, .container-fluid, .menu-main, .sticky-top, .container-fluid.qiMenuTime_flex, div#banner, footer, .left_detail_content .list-unstyled {
max-width: 100% !important;
}
.container main {
/*width: 95%;*/
padding-left: 15px !important;
padding-right: 15px !important;
}
.hntexttop
{
width:70% !important
}
.hnimgtop
{
width:30% !important
}
.item-ratio {
object-fit: cover !important;
}
.fit-obj {
object-fit: cover !important;
}
.img-lv2 {
width: 100%;
height: auto;
max-height: 83px;
}
/* Slideshow homegd131:
- BỎ ép "#amazingslider-12 { height:max-content }": max-content làm container co ~0 (slide
là ABSOLUTE) -> slide tràn xuống ĐÈ khối "Tin tức sự kiện". Bỏ đi để amazingslider tự set
chiều cao thật, chứa slide -> hết đè.
- .demo-slider-3: BỎ margin-bottom 8em (128px) thừa (nguồn KHOẢNG TRẮNG phải: cột slideshow
cao 638 trong khi cột "Tin mới nhất" chỉ ~498). min-height chỉ còn floor an toàn, height auto
-> cột ôm SÁT slider thật. */
/* Reservation CO GIÃN cho slider: ảnh (#amazingslider-12, in-flow) tự co giãn theo bề rộng
cột (JS set, vd 324px@628 / 484px@938...); dải THUMBNAILS là ABSOLUTE, cao CỐ ĐỊNH ~204px,
không tính vào chiều cao -> dùng padding-bottom (KHÔNG min-height cố định) để chừa chỗ cho
thumbnails ở MỌI khổ màn -> khối tin dưới không bị đè. (min-height cố định sai ở màn rộng.) */
.demo-slider-3 {
min-height: 0 !important;
height: auto !important;
padding-bottom: 210px !important;
margin: 0 auto 8px !important;
}
div#amazingslider-12, .left_detail_content .list-unstyled {
width: 100% !important;
}
/* "Tin mới nhất" (cột phải row đầu) GIÃN đầy chiều cao cột = cao slideshow -> hết khoảng trắng
giữa nó và "Văn bản" (khối bên dưới). */
.col-sm-4.Content_right { display: flex; flex-direction: column; }
.col-sm-4.Content_right > .qiContainer { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* Bỏ padding-left mặc định của qiContainer_border (~14px) -> text SÁT MÉP như khối Văn bản. */
.col-sm-4.Content_right > .qiContainer > .qiContainer_border { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 !important; }
/* Danh sách tin: mỗi tin CÁCH NHAU 10px (gap), text SÁT MÉP (~6px, như Văn bản),
CUỘN DỌC (overflow-y:auto) nếu tin nhiều hơn chiều cao khung. min-height:0 để scroll chạy
đúng trong flex. */
.col-sm-4.Content_right > .qiContainer > .qiContainer_border > ul.qiheightTop {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding: 6px 0 !important;
margin: 0 !important;
}
/* Giữ nguyên chiều cao tin (không để flex bóp méo) -> tràn thì CUỘN, không cắt lem nhem.
padding NGANG 10px -> chữ cách mép 10px, nền/viền full. */
.col-sm-4.Content_right ul.qiheightTop > li { flex: 0 0 auto !important; padding-left: 10px !important; padding-right: 10px !important; }
/* ===== Khối VĂN BẢN: bỏ chiều cao cố định gây THỪA khoảng trắng =====
qistyleall ép .mq13{height:600px} + block bị fix height:638 nhưng chỉ vài tin -> trắng đáy.
Cho co theo nội dung (max-height 420 + scroll khi nhiều tin). */
.rightitem.van-ban { height: auto !important; min-height: 0 !important; }
.rightitem.van-ban .mq13 { height: auto !important; max-height: 420px !important; overflow-y: auto !important; }
.rightitem.van-ban .mq13 .slick-list { height: auto !important; }
/* Slick (rows:10) set inline width ~310px cho track/slide/li (HẸP hơn khối 475) -> HỞ mép PHẢI.
Ép full-width + padding 5px 10px (chữ cách mép 10px, các dòng cách nhau 10px = 5+5). */
.rightitem.van-ban .mq13 .slick-track,
.rightitem.van-ban .mq13 .slick-slide,
.rightitem.van-ban .mq13 .slick-slide > div { width: 100% !important; }
.rightitem.van-ban .mq13 ul li {
width: 100% !important;
display: block !important;
padding: 5px 10px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* (Clamp 3 dòng + đồng nhất cỡ/màu tiêu đề tin: ĐÃ chuyển sang skin qistyleall-modern.css,
bản SCOPE trong .qiContainer_border để không cắt tiêu đề trang chi tiết. Không lặp ở đây.) */
/* ===== Khối tin dạng LIST: CHỮ cách mép ~10px, nhưng NỀN hover + ĐƯỜNG PHÂN CÁCH FULL =====
Đặt padding NGANG trên LI (nền/border của li full theo mép; nội dung thụt 10px). Container
bỏ padding. :has(>ul) để CHỈ áp cho khối dạng list, KHÔNG đụng khối featured 2-cột (>.row). */
.qiContainer_border:has(> ul) { padding: 0 !important; }
.qiContainer_border > ul > li { padding: 5px 10px !important; }
/* Font tiêu đề trong .listitem ĐỒNG ĐỀU: item MỚI NHẤT render KHÔNG có class qitieudechinh
nên thiếu font-weight -> đậm/nhạt lệch. Ép 500 = đúng như .qitieudechinh (qistyleall). */
.listitem > a { font-weight: 500 !important; }
.big_item .item:last-child {
width: 350px;
}
.bgwhite{
padding: 0 !important;
}
.width1200 {
max-width: 100% !important;
}
.w-1300{
max-width: 100% !important;
}
.right_gallery_home {
/*right: 0;
position: relative;
z-index: 9999;
pointer-events: auto;*/
}
.left_gallery_home {
/*left: 0;
position: relative;
z-index: 9999;
pointer-events: auto;*/
}
.adsRight {
display: none;
}
.adsLeft {
display: none;
}
article.itemhome {
padding-left: 30px;
padding-right: 30px;
}
.right_detail_content {
width: 100% !important;
}