/*!
* ============================================================================
* qistyleall-modern.css — PHIÊN BẢN HIỆN ĐẠI (drop-in thay cho qistyleall.css)
* ----------------------------------------------------------------------------
* Cách dùng: ở master/trang muốn hiện đại, ĐỔI link
* /App_Themes/all/allcss/qistyleall.css → /App_Themes/all/allcss/qistyleall-modern.css
* File này @import toàn bộ qistyleall.css gốc (giữ nguyên contract class) rồi
* phủ lớp skin hiện đại lên trên. Trang không đổi link => KHÔNG bị ảnh hưởng.
*
* Màu bám động theo tenant qua var(--qi-primary) (= --mau-md, DB ColorSite).
* KHÔNG set font-family (để font động của master áp dụng).
* Chỉ chứa skin TÁI DÙNG (card, tiêu đề khối, menu, nav, footer, scrollbar,
* badge). KHÔNG chứa layout riêng của homehcm2 (qim-align3, TIÊU ĐIỂM neo...).
* ============================================================================
*/
@import url("qistyleall.css");
:root {
--m-primary: var(--qi-primary, var(--mau-md, #004a8f));
--m-primary-dark: var(--qi-primary-dark, #003666);
--m-accent: var(--qi-gold, #c8901f);
--m-surface: #ffffff;
--m-surface-2: #f6f8fb;
--m-border: #dbe3ec;
--m-text: #14202e;
--m-muted: #5c6b7e;
--m-radius: 12px;
--m-radius-sm: 8px;
--m-shadow: 0 1px 2px rgba(16, 32, 52, .04), 0 6px 18px rgba(16, 32, 52, .06);
--m-shadow-h: 0 6px 14px rgba(16, 32, 52, .09), 0 18px 38px rgba(16, 32, 52, .12);
}
/* Nền trang sạch (tenant đặt BgcolorBody trong DB sẽ tự đè lên) */
body { background: #eef2f7; }
/* ============ KHỐI → CARD ============ */
.qiContainer {
background: var(--m-surface);
border: 1px solid var(--m-border);
border-radius: var(--m-radius);
box-shadow: var(--m-shadow);
overflow: visible; /* KHÔNG hidden — để dropdown 3-gạch trong header không bị cắt */
margin-bottom: 10px;
transition: box-shadow .18s;
}
.qiContainer:hover { box-shadow: var(--m-shadow-h); }
/* Tiêu đề khối: phẳng + gạch nhấn trái */
.qihome_tieudebg {
position: relative;
display: flex;
align-items: center;
min-height: 48px; /* mọi header khối cao BẰNG NHAU */
padding: 8px 16px 8px 26px !important;
background: var(--m-surface) !important;
border-bottom: 1px solid var(--m-border) !important;
border-left: 0 !important;
}
/* "Xem thêm" → nút pill gọn đẹp (ẩn ảnh »» cũ, hover đổi màu thương hiệu) */
.qihome_tieudebg > .xem-them { margin-left: auto; }
.qihome_tieudebg .xem-them {
display: inline-flex !important;
align-items: center;
white-space: nowrap;
font-size: 12px !important;
font-weight: 600;
line-height: 1;
color: var(--m-primary) !important;
background: rgba(16, 32, 52, .05);
padding: 5px 12px;
border-radius: 999px;
text-decoration: none !important;
transition: background .15s ease, color .15s ease;
}
.qihome_tieudebg .xem-them:hover { background: var(--m-primary) !important; color: #fff !important; }
.qihome_tieudebg .xem-them img { display: none !important; }
.qihome_tieudebg .xem-them::after { content: "›"; margin-left: 5px; font-size: 15px; font-weight: 700; line-height: 0; }
/* Gỡ dải trắng 10px trên header (.qiContainer>.qihome_tieudebg{margin-top:10px} của qistyleall)
để header các khối (THÔNG BÁO/THƯ MỜI trong .qiContainer vs VĂN BẢN trong .van-ban) ĐỒNG NHẤT.
+ bo góc trên header khớp card (vì card không còn overflow:hidden để clip). */
.qiContainer > .qihome_tieudebg { margin-top: 0 !important; border-radius: var(--m-radius) var(--m-radius) 0 0; }
/* Dropdown 3-gạch (.s_CategoryHome_Title_Chilrent) trong header: canh phải, mở vào TRONG card.
Bootstrap dùng Popper đặt vị trí bằng transform inline → phải hủy transform + ép right:0. */
.qihome_tieudebg .dropdown-menu {
right: 0 !important;
left: auto !important;
top: 100% !important;
transform: none !important;
margin-top: 2px !important;
border: 1px solid var(--m-border);
border-radius: var(--m-radius-sm, 8px);
box-shadow: 0 10px 26px rgba(16, 32, 52, .16);
max-width: 260px;
}
.qihome_tieudebg::before {
content: "";
position: absolute;
left: 14px;
top: 12px;
bottom: 12px;
width: 4px;
border-radius: 3px;
background: linear-gradient(var(--m-primary), var(--m-primary-dark));
}
.qiborderbottom-2 { border-bottom-width: 1px !important; }
/* Khối VĂN BẢN (dạng .qiContainer, vd homegd7) cao BẰNG THÔNG BÁO/THƯ MỜI (.noidungthongbao 600px):
ghim vùng nội dung 600px + cuộn. Nhắm riêng khối tiêu đề "Văn bản" qua :has()+title, không đụng khối khác. */
.qiContainer:has(.qihome_tieude[title="Văn bản"]) > .qiContainer_border {
max-height: 600px;
overflow-y: auto;
}
.qihome_tieude {
font-weight: 800 !important;
font-size: 15px !important;
text-transform: uppercase;
letter-spacing: .01em;
color: var(--m-primary) !important;
}
/* Vùng nội dung + item tin */
.qiContainer_border { border: 0 !important; padding: 6px 14px 12px !important; }
.qiContainer_border ul { margin: 0; }
.qiContainer_border li,
.qiContainer_border .qilinoimage {
padding: 9px 4px !important;
border-bottom: 1px dashed var(--m-border);
border-left: 3px solid transparent;
transition: background .15s, border-color .15s;
}
.qiContainer_border li:last-child { border-bottom: 0; }
.qiContainer_border li:hover { background: var(--m-surface-2); border-left-color: var(--m-accent); }
.qiContainer_border a { color: var(--m-text); }
.qiContainer_border a:hover { color: var(--m-primary); text-decoration: none; }
/* THANH BAR TRÁI khi hover — đồng bộ MỌI item tin đẹp như khối TIN MỚI NHẤT (.qiContainer_border li) */
.itemthongbao,
.mq13 li, .heightvanban li, .van-ban li,
.qiheightTop li, .tieudiemmtop li,
.listitem, .itemHomeTop {
border-left: 3px solid transparent;
padding-left: 8px;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.itemthongbao:hover,
.mq13 li:hover, .heightvanban li:hover, .van-ban li:hover,
.qiheightTop li:hover, .tieudiemmtop li:hover,
.listitem:hover, .itemHomeTop:hover {
background: var(--m-surface-2, #f6f8fb);
border-left-color: var(--m-accent, var(--m-primary)) !important;
}
/* Item tin CÓ THUMBNAIL trong khối chuyenmuchome_gd3 (.row.qigd3right: ảnh col-sm-5 + tiêu đề
col-sm-7) — items này KHÔNG phải /.listitem nên chưa có THANH BAR TRÁI hover như chuẩn.
Bổ sung cho đồng bộ. (.qigd3right có .px-0 !important nên padding-left cần !important). */
.qiContainer_border .qigd3right {
border-left: 3px solid transparent;
padding-left: 6px !important;
border-radius: 4px;
transition: background .15s ease, border-color .15s ease;
}
.qiContainer_border .qigd3right:hover {
background: var(--m-surface-2, #f6f8fb);
border-left-color: var(--m-accent, var(--m-primary)) !important;
}
/* Số dòng TIÊU ĐỀ item chuyenmuchome_gd3: bỏ hard-clip .qimaxheighthome (max-height:100px cắt cụt
giữa dòng), thay bằng line-clamp cắt gọn có "…":
- Tin CÓ ảnh (tiêu đề ở col-sm-7) -> tối đa 3 dòng.
- Tin KHÔNG ảnh (tiêu đề ở col-sm-12) -> tối đa 2 dòng. */
.qigd3right .qimaxheighthome { max-height: none !important; overflow: visible !important; }
.qigd3right .titevideolisthome a {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.qigd3right > .col-sm-7.titevideolisthome a { -webkit-line-clamp: 3; }
.qigd3right > .col-sm-12.titevideolisthome a { -webkit-line-clamp: 2; }
/* TIN ẢNH CHÍNH (a.qitieudechinh trong .qiContainer_border > .row.mx-0 — khối đơn vị/chuyên mục có ảnh nổi bật):
thanh BAR TRÁI + nền khi hover, đặt ở CỘT TEXT (cột chứa tiêu đề), KHÔNG ở cạnh ảnh.
:has() để nhắm đúng cột dù mỗi control đặt class khác nhau (col-sm-6 / col-sm-6 qiheightmain...). */
/* :not(.qiheight4) — KHÔNG áp cho khối chuyenmuchome_gd4 (.row.mx-0.qiheight4) vì đó là
layout 2 CỘT (featured + danh sách), cả 2 cột đều chứa a.qitieudechinh -> hover bất kỳ
đâu sẽ sáng nền + bar CẢ 2 cột. Ở gd4 để item tự hover riêng (.listitem / a.qitieudechinh). */
.qiContainer_border > .row.mx-0:not(.qiheight4) > *:has(a.qitieudechinh) {
border-left: 3px solid transparent;
border-radius: var(--m-radius-sm, 6px);
padding-left: 10px;
transition: background .15s ease, border-color .15s ease;
}
.qiContainer_border > .row.mx-0:not(.qiheight4):hover > *:has(a.qitieudechinh) {
background: var(--m-surface-2, #f6f8fb);
border-left-color: var(--m-accent, var(--m-primary)) !important;
}
/* Title vốn đỏ thương hiệu (≈ primary) nên hover đổi màu không thấy -> làm tối nhẹ cho có phản hồi */
.qiContainer_border a.qitieudechinh { transition: filter .15s ease, color .15s ease; }
.qiContainer_border a.qitieudechinh:hover { filter: brightness(.82); }
.embed-responsive-16by9 { border-radius: var(--m-radius-sm); overflow: hidden; }
/* Khối 2 cột (vd CT GDPT 2018-SGK, Thông tin CSGD): bỏ border THỪA ở 2 mép ngoài,
chỉ giữ 1 đường phân cách GIỮA 2 cột (border-left của cột từ thứ 2). */
.qiContainer_border .row > .col-sm-6.border { border-left: 0 !important; border-right: 0 !important; }
.qiContainer_border .row > .col-sm-6.border ~ .col-sm-6.border { border-left: 1px solid var(--m-border) !important; }
/* Khối tin dạng col KHÔNG bọc .qiContainer (vd chuyenmuchome_gd4 / homegd10):
tạo VIỀN CARD BO GÓC riêng = viền header (bo góc trên) + viền nội dung (bo góc dưới). */
.col-sm-6:has(> .qihome_tieudebg) > .qihome_tieudebg {
border: 1px solid var(--m-border);
border-radius: var(--m-radius) var(--m-radius) 0 0;
}
.col-sm-6:has(> .qihome_tieudebg) > .qiContainer_border {
border: 1px solid var(--m-border) !important;
border-top: 0 !important;
border-radius: 0 0 var(--m-radius) var(--m-radius);
box-shadow: var(--m-shadow);
}
/* Khối chuyenmuchome_gd4 (.row.mx-0.qiheight4): control đưa bài ẢNH CHÍNH (.gd4-main) lên TOP
cột trái + rải tin khác lấp xuống dưới, phần dư sang cột phải. Xếp TỰ NHIÊN từ trên xuống
(KHÔNG space-between vì sẽ giãn ảnh/tiêu đề ra xa trông xấu). .gd4-main giữ ảnh+tiêu đề dính
liền (khối con), các .listitem xếp liền dưới. Khoảng trắng (nếu chuyên mục ít tin) dồn xuống
ĐÁY một cách tự nhiên, không tạo khe giữa. */
.qiheight4 > [class*="col-sm-7"] > .gd4-main { margin-bottom: 6px; }
/* Gạch phân tách giữa TIN CHÍNH (.gd4-main) và TIN PHỤ thêm xuống dưới — chỉ hiện khi CÓ tin
phụ (selector .gd4-main + .listitem chỉ khớp ở cột trái, nơi listitem đứng ngay sau bài chính). */
.qiheight4 .gd4-main + .listitem {
border-top: 1px solid var(--m-border, #ddd);
margin-top: 4px;
padding-top: 10px;
}
/* 2 cột (featured trái + danh sách phải) trong khối gd4 sát nhau (cột phải px-0) -> thêm
khoảng cách GIỮA 2 cột cho thoáng. */
.qiheight4 > [class*="col-sm-5"] { padding-left: 20px !important; }
.qiheight4 > [class*="col-sm-7"] { padding-left: 12px !important; padding-right: 12px !important; }
/* Đường kẻ dọc ngăn 2 cột — CHỈ khi cột TRÁI có tin phụ (.gd4-main kèm .listitem, tức bài
chính mô tả ngắn nên có tin lấp xuống). Không có tin phụ thì không kẻ. */
.qiheight4:has(> [class*="col-sm-7"] .listitem) > [class*="col-sm-5"] {
border-left: 1px solid var(--m-border, #ddd);
}
/* Tin (.listitem) trong khối gd4 THẲNG LỀ với bài chính (ảnh + tiêu đề): bỏ thụt do
border+padding, cho chữ bắt đầu ở mép nội dung cột. Thanh bar hover chuyển sang ::before
nằm trong gutter trái (px-2 của cột) -> KHÔNG đẩy chữ, KHÔNG dính chữ, KHÔNG lệch lề. */
.qiheight4 .listitem {
padding-left: 0 !important;
border-left: 0 !important;
position: relative;
}
.qiheight4 .listitem::before {
content: "";
position: absolute;
left: -9px;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 2px;
background: transparent;
transition: background .15s ease;
}
.qiheight4 .listitem:hover::before { background: var(--m-accent, var(--m-primary)); }
/* Khối biến thể Hà Nội (.white-back trong section.bg-cl — TIN TỨC, CHUYÊN MỤC, THÔNG TIN CSGD homegd12):
card viền bo góc + bóng, cách nhau. Dùng .bg-cl .white-back (2 class) để THẮNG .margin0 (hanoi)
vốn làm các khối DÍNH SÁT nhau. GIỮ NGUYÊN cấu trúc bên trong. */
.bg-cl .white-back {
border: 1px solid var(--m-border) !important;
border-radius: var(--m-radius) !important;
box-shadow: var(--m-shadow);
overflow: hidden;
margin: 0 auto 16px !important;
background: var(--m-surface) !important;
}
/* Khối THÔNG BÁO/VĂN BẢN/ĐỌC NHIỀU (.r-hol-snip): mỗi cột đã là .card riêng → KHÔNG cần viền card ngoài */
.bg-cl .white-back.r-hol-snip {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
border-radius: 0 !important;
overflow: visible;
}
/* Vùng nội dung .hol-itct có class .padding0 (padding 0) → nội dung/ảnh SÁT viền card.
Thêm padding để mọi thứ thụt vào, ảnh không dính viền. (.bg-cl .white-back thắng .padding0) */
.bg-cl .white-back .hol-itct { padding: 10px 14px !important; }
/* Header khối Hà Nội (.b-title — vd CHUYÊN MỤC) chỉ có padding-left → SÁT viền trên. Thêm padding dọc. */
.white-back .b-title { padding-top: 14px !important; padding-bottom: 12px !important; }
/* Cỡ chữ tiêu đề item TIN TỨC Hà Nội (.titnew-lv3/.txt-sl-lv2/.txt-tplv2) đang 13px → 15px cho ĐỒNG CHUẨN (= .txt-snipt) */
.white-back .titnew-lv3,
.white-back .txt-sl-lv2,
.white-back .txt-tplv2 { font-size: 15px !important; line-height: 21px !important; }
/* Ảnh trong khối Hà Nội: bo góc cho đẹp */
.white-back .item-ratio,
.white-back .img-tt2,
.white-back .img-evnews,
.white-back .img-lv2 { border-radius: 8px; }
/* Viền cột Hà Nội (.border-lr/.border-lr2/.border-right/.border-left): làm NHẠT, chỉ là đường phân cách */
.white-back .border-lr,
.white-back .border-lr2,
.white-back .border-right,
.white-back .border-left { border-color: var(--m-border) !important; }
/* .top-lv2-new (ảnh + tiêu đề) có border full → ảnh dán sát viền mép trên.
Thêm padding cho ảnh thụt vào + bo góc trên + viền nhạt; last item bo góc dưới khớp. */
.white-back .top-lv2-new {
padding: 6px !important;
border-color: var(--m-border) !important;
border-radius: 8px 8px 0 0;
overflow: hidden; /* clip ảnh trong bo góc, không tràn viền */
}
/* NGUYÊN NHÂN ảnh .top-lv2-new "chèn lên border": .row bên trong có margin âm -15px của
Bootstrap -> ảnh/nội dung TRÀN ra ngoài padding+viền card. Triệt margin âm để nằm gọn. */
.white-back .top-lv2-new .row { margin-left: 0 !important; margin-right: 0 !important; }
/* Item danh sách tin Hà Nội THOÁNG hơn: thêm khoảng đệm dọc cho .border-lr (cột giữa) +
nới khe .divrelateCat (cột phải ảnh+tiêu đề). */
.white-back .border-lr,
.white-back .border-lr2 { padding-top: 9px !important; padding-bottom: 9px !important; }
.white-back .divrelateCat { margin-bottom: 16px !important; padding-bottom: 16px !important; }
.white-back .border-lr:last-child {
border-color: var(--m-border) !important;
border-radius: 0 0 8px 8px !important;
}
.qiContainer_border .embed-responsive-item img,
.qiContainer_border img { border-radius: var(--m-radius-sm); transition: transform .25s; }
.qiContainer_border li:hover img { transform: scale(1.03); }
/* Bài NỔI BẬT (.qiimagemain) & tin ảnh liên quan (.qiimgrelate) trong chuyenmuchome_gd1/dn1
KHÔNG phải nên chưa có hiệu ứng zoom ảnh khi hover -> bổ sung (khung đã overflow:hidden). */
.qiimagemain img,
.qiimgrelate .qiimg { transition: transform .45s ease; }
.qiimagemain:hover img,
.qiimgrelate:hover .qiimg { transform: scale(1.08); }
/* Cột tiêu đề item-có-ảnh (chuyenmuctraiphai/tieudiemhometop...). qistyleall gốc ép
div.qimaxheight{max-height:80px;overflow:hidden}; cộng justify-content:center bên dưới ->
tiêu đề dài (nhất là nét đậm 700) bị căn giữa rồi CẮT cả trên lẫn dưới = "che lấp".
Bỏ giới hạn cứng để tiêu đề hiện đủ (tiêu đề đã giới hạn ~10 từ ở server). */
.qimaxheight {
display: flex;
flex-direction: column;
justify-content: center;
max-height: none !important;
overflow: visible !important;
}
/* An toàn cho control đưa full title: cắt GỌN ở cuối bằng "..." (tối đa 4 dòng) thay vì
cắt ngang che chữ; ngày tháng phía dưới vẫn hiển thị đủ. */
.qimaxheight .qitieudechinh {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Item CÓ ẢNH (ảnh .col-sm-5 + tiêu đề .col-sm-7.qimaxheight) trong khối chuyên mục trái/phải
(chuyenmuctraiphai — vd KIỂM ĐỊNH CHẤT LƯỢNG) & tiêu điểm: ẢNH đẩy LÊN ĐẦU (float trái),
tiêu đề CHẢY bên cạnh rồi XUỐNG DƯỚI ảnh khi dài -> choán khoảng trắng dưới ảnh (thay layout
2 cột cố định vốn để trắng dưới ảnh khi tiêu đề ngắn/dài lệch nhau). :has() nhắm đúng hàng
item-có-ảnh (chứa .col-sm-7.qimaxheight), không đụng item không ảnh (.qilinoimage). */
.qiContainer_border li .row:has(> .col-sm-7.qimaxheight) { display: flow-root; }
.qiContainer_border li .row:has(> .col-sm-7.qimaxheight) > .col-sm-5 {
float: left;
width: 40%;
max-width: 40%;
margin-right: 10px;
}
.qiContainer_border li .row:has(> .col-sm-7.qimaxheight) > .col-sm-7.qimaxheight {
display: block;
float: none;
width: auto;
max-width: none;
overflow: visible !important;
}
/* Bỏ giới hạn 3 dòng cho tiêu đề item-có-ảnh này để chữ dài CHẢY đủ xuống dưới ảnh (choán trắng). */
.qiContainer_border li .row:has(> .col-sm-7.qimaxheight) .qitieudechinh {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
/* Khối "chữ chạy dọc" (chuchaydoc: