/*!
 * ============================================================================
 *  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?v=2");   /* ?v: tệp @import có bộ nhớ đệm RIÊNG, `?v` của tệp cha không phá được */

: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 22px !important; /* chữ header canh sau bar (bar 10px + 4 + 8 gap = 22) */
    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);
    min-width: 240px;   /* đủ rộng để item chữ dài wrap gọn 2-3 dòng (bootstrap mặc định 160px -> hẹp) */
    max-width: 260px;
}
/* Item submenu chữ DÀI TỰ XUỐNG DÒNG (bootstrap .dropdown-item mặc định white-space:nowrap -> tràn rộng) */
.qihome_tieudebg .dropdown-menu .dropdown-item { white-space: normal !important; }
.qihome_tieudebg::before {
    content: "";
    position: absolute;
    left: 10px; /* bar nhấn trái CANH 10px = khớp mép nội dung khối (chuẩn 10px) */
    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-primary, 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: 6px 10px; /* CHUẨN CHUNG: chữ cách 2 mép trái/phải 10px (không chỉ trái) */
    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-primary, var(--m-accent)) !important; /* bar hover = MÀU CHỮ hover (--m-primary) */
}
/* 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 <li>/.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-primary, var(--m-accent)) !important; /* bar hover = MÀU CHỮ hover (--m-primary) */
}
/* 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;
}
/* :hover đặt trên TỪNG ITEM (cột chứa tiêu đề), KHÔNG trên cả .row -> hover 1 tin chỉ sáng
   tin đó (trước đây :hover trên .row làm hàng tin-liên-quan 3 cột sáng CẢ 3). */
.qiContainer_border > .row.mx-0:not(.qiheight4) > *:has(a.qitieudechinh):hover {
    background: var(--m-surface-2, #f6f8fb);
    border-left-color: var(--m-primary, var(--m-accent)) !important; /* bar hover = MÀU CHỮ hover (--m-primary) */
}
/* 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; }

/* ĐƯỜNG KẺ DỌC ngăn cách cột TIN NỔI BẬT (col-sm-7: ảnh + tóm tắt) và cột DANH SÁCH (col-sm-5)
   trong khối featured gd4 (.qiContainer_border > .row.qiheight4) — áp MỌI khối 2-cột, mọi tenant.
   Khối 1-cột (col-sm-12) không có col-sm-5 nên KHÔNG bị. Border đặt trên col-sm-5 -> cao FULL
   theo .qiheight4 (480px, cột stretch) dù danh sách ít tin. */
.qiContainer_border > .row.qiheight4 > .col-sm-5 { border-left: 1px solid var(--m-border); }
/* Khối featured gd4: container còn padding 14px + col px-2 -> nội dung cách mép ~26px (chưa 10px).
   Zero padding container (2 mép) + đặt 10px trên cột nội dung -> chữ/ảnh cách border đúng 10px 2 bên.
   (:has(> .row.qiheight4) chỉ hit khối featured, không đụng khối list :has(>ul).) */
.qiContainer_border:has(> .row.qiheight4) { padding-left: 0 !important; padding-right: 0 !important; }
.qiContainer_border > .row.qiheight4 > .col-sm-7,
.qiContainer_border > .row.qiheight4 > .col-sm-12 { padding-left: 10px !important; }
/* Featured KHÁC (không .qiheight4, vd homegd147 khối TIN TỨC: ảnh/thumbnail là .embed-responsive =
   CHÍNH cột, dùng position:absolute -> padding CỘT không đẩy được ảnh -> phải inset ở CONTAINER 10px
   + zero padding-left CỘT ĐẦU mỗi .row). :not(:has(> .row.qiheight4)) để KHÔNG đè rule gd4 ở trên. */
/* CHỈ scope .row.mx-0 (row KHÔNG margin âm — vd gd147). Row thường (vd homegd3 .row.my-2) CÓ
   margin âm -12px + cột dùng pl-4 để bù -> KHÔNG được zero padding cột (sẽ làm ảnh trôi sát/tràn mép). */
.qiContainer_border:has(> .row.mx-0):not(:has(> .row.qiheight4)) { padding-left: 10px !important; padding-right: 10px !important; }
.qiContainer_border:has(> .row.mx-0):not(:has(> .row.qiheight4)) > .row.mx-0 > [class*="col-"]:first-child { padding-left: 0 !important; }
.qiContainer_border:has(> .row.mx-0):not(:has(> .row.qiheight4)) > .row.mx-0 > [class*="col-"]:last-child { padding-right: 0 !important; } /* thumbnail/tin cuối chạm mép phải 10px */
/* Cột thumbnail (.qiimgrelate) dính border-left 3px (bar hover từ rule tin-ảnh-chính) -> box-border
   ĐẨY ảnh 3px -> ảnh lệch 13px thay vì 10px. Bỏ border-width (hover vẫn có nền sáng) -> ảnh chạm 10px. */
.qiContainer_border > .row > .qiimgrelate { border-left-width: 0 !important; }
/* homegd3 (chuyenmuchome_gd3): featured nằm trong .row.my-2 CÓ margin âm -12 + cột `pl-4` bù margin
   -> ảnh gốc lệch 26px (quá xa). Chuẩn hóa 10px: KILL margin âm (như mx-0) + container 10 + zero padL
   cột đầu / padR cột cuối. Scope :has(.qigd3right) để CHỈ đụng khối gd3 (không đụng .row.my-2 khác). */
.qiContainer_border:has(> .row.my-2):has(.qigd3right) { padding-left: 10px !important; padding-right: 10px !important; }
.qiContainer_border:has(> .row.my-2):has(.qigd3right) > .row.my-2 { margin-left: 0 !important; margin-right: 0 !important; }
.qiContainer_border:has(> .row.my-2):has(.qigd3right) > .row.my-2 > [class*="col-"]:first-child { padding-left: 0 !important; }
.qiContainer_border:has(> .row.my-2):has(.qigd3right) > .row.my-2 > [class*="col-"]:last-child { padding-right: 0 !important; }

/* ============================================================================
   TIÊU CHÍ CHUNG (áp MỌI giao diện dùng skin này):
   (1) TIÊU ĐỀ TIN (trong khối list/home) ĐỒNG NHẤT: clamp 3 DÒNG + "…", cỡ 16px, line-height
       24px, màu --m-text. SCOPE trong .qiContainer_border + các class list (itemHomeTop/listitem/
       qiheightTop/s_openmedia/mq13) -> KHÔNG đụng tiêu đề TRANG CHI TIẾT. Dùng !important để
       THẮNG CSS template nạp SAU skin (vd htmlib/.../styles.css của mỗi template home).
   (2) Khối tin dạng LIST: chữ cách mép/dòng ~10px, nền hover + đường phân cách FULL.
   (3) Slideshow amazingslider (nhiều template dùng chung): thumbnails ABSOLUTE (~204px) không
       tính vào chiều cao container -> tràn ĐÈ khối dưới. Chừa chỗ = padding-bottom (ảnh in-flow
       tự co giãn theo bề rộng). Chỉ có tác dụng ở trang CÓ slideshow.
   ============================================================================ */
.qiContainer_border .qitieudechinh,
.qiContainer_border .qitieudechinh_DN,
.qiContainer_border .qitieudechinh_DN_right,
.qiheightTop li > a,
.listitem > a,
.itemHomeTop > a,
.s_openmedia,
.mq13 a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--m-text, #1c1c1c) !important;
}
/* !important: base qistyleall/template hp/styles.css set .qiContainer_border{padding:14px} nạp sau
   -> đè rule không-important -> nền/border item BỊ THỤT ~14px. Ép 0 (container) + 10px (li) để
   NỀN + ĐƯỜNG PHÂN CÁCH chạy FULL 2 mép card, chữ vẫn cách mép 10px. (:has(>ul) chỉ hit khối LIST,
   không đụng khối featured .row.) */
.qiContainer_border:has(> ul) { padding: 0 !important; }
.qiContainer_border > ul { padding-left: 0 !important; padding-right: 0 !important; } /* ul.qiheightTop có pl-1 (4px) -> zero để li/nền chạm mép */
.qiContainer_border > ul > li { padding: 5px 10px !important; }
/* (2b) Khối TAB tin bên phải (TIN NỔI BẬT / MỚI NHẤT / XEM NHIỀU): item là .itemHomeTop
   (DIV trong .tab-pane, KHÔNG phải <ul><li>) -> rule 10px cho ul>li ở trên chưa phủ. Ép 10px
   2 mép (thắng CSS template + <style> inline .aspx nạp sau), reset padding container để nền
   hover + đường phân cách chạy FULL tới viền card. */
/* ===== Cột phải "TIN MỚI NHẤT/NỔI BẬT/XEM NHIỀU" CAO BẰNG SLIDESHOW cột trái theo TỪNG giao diện
   + NỀN FULL + đường phân cách + CUỘN khi tràn. Hai biến thể cấu trúc:
     (A) TAB  (vd homegd10): .Content_right > .tab_tieudetop + .tab-content.qitabcontent > .itemHomeTop
     (B) LIST (vd homegd2/homegd131): .Content_right > .qiContainer > .qiContainer_border > ul.qiheightTop > li
   CƠ CHẾ: .row bootstrap stretch 2 cột = nhau; cho phần cuộn flex:1 1 0 (basis 0 -> SỐ ITEM không
   kéo cao row) + min-height:0 + overflow-y:auto -> chiều cao bám SLIDESHOW, tràn thì cuộn.
   GATE bằng .row:has(.demo-slider-3) -> CHỈ ép khi cột phải thật sự cạnh slideshow (tránh sập chiều
   cao ở layout khác). Chỉ ≥576px (2 cột ngang); mobile giữ block. Đã đo DOM thật: cột phải bám sát
   slideshow (chênh ~4px), list cuộn đúng. !important thắng inline .qiheightTop{height:500px} trong .aspx. */
/* NỀN + phân cách item + KHUNG khớp khối chuẩn.
   Khối "chuẩn" (.qiContainer_border của THÔNG BÁO/VĂN BẢN...) = border-top:0 (nối liền header) +
   bo góc dưới 12px + màu --m-border. Khối tab bootstrap `.border` lại là HỘP KÍN (có border-top) +
   góc vuông + màu #dee2e6 -> lệch. Ép cho GIỐNG. */
.qitabcontent {
    padding-left: 0 !important; padding-right: 0 !important;
    background: var(--m-surface, #fff);
    border-top: 0 !important;                       /* bỏ border trên -> nối liền header tab */
    border-color: var(--m-border) !important;       /* đồng nhất màu (bootstrap #dee2e6 lệch) */
    border-radius: 0 0 12px 12px !important;         /* bo góc dưới 12px như khối chuẩn */
}
.qitabcontent > .tab-pane { margin-top: 0 !important; }   /* item đầu SÁT mép trên khung (bỏ khe .mt-2 8px) */
.qitabcontent .itemHomeTop { padding: 6px 10px !important; border-bottom: 1px solid var(--m-border); }
.qitabcontent .itemHomeTop:last-child { border-bottom: 0 !important; }
.Content_right ul.qiheightTop > li { border-bottom: 1px solid var(--m-border); }
.Content_right ul.qiheightTop > li:last-child { border-bottom: 0 !important; }
@media (min-width: 576px) {
    /* (A) biến thể TAB */
    .row:has(.demo-slider-3) .Content_right:has(> .qitabcontent) { display: flex; flex-direction: column; }
    .row:has(.demo-slider-3) .Content_right:has(> .qitabcontent) > .tab_tieudetop { flex: 0 0 auto; }
    .row:has(.demo-slider-3) .Content_right:has(> .qitabcontent) > .qitabcontent { flex: 1 1 0; min-height: 0; overflow-y: auto; }
    /* (B) biến thể LIST — con TRỰC TIẾP của Content_right có thể là .qiContainer (homegd2) HOẶC
       .tieudiemmtop (homegd147: bọc THÊM 1 lớp -> .Content_right>.tieudiemmtop>.qiContainer>...).
       Phần tử CHẶN basis:0 = con trực tiếp đó (dù là lớp nào). Các tầng trong flex:1 1 auto lấp đầy.
       Header trong qiContainer: .qihome_tieudebg (homegd2) HOẶC .logo-title (homegd147) -> giữ tự nhiên. */
    .row:has(.demo-slider-3) .Content_right:has(ul.qiheightTop) { display: flex; flex-direction: column; }
    .row:has(.demo-slider-3) .Content_right:has(ul.qiheightTop) > .qiContainer,
    .row:has(.demo-slider-3) .Content_right:has(ul.qiheightTop) > .tieudiemmtop { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
    .row:has(.demo-slider-3) .Content_right:has(ul.qiheightTop) > .tieudiemmtop > .qiContainer { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .row:has(.demo-slider-3) .Content_right:has(ul.qiheightTop) .qiContainer > .qiContainer_border { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .row:has(.demo-slider-3) .Content_right:has(ul.qiheightTop) .qiContainer > .logo-title,
    .row:has(.demo-slider-3) .Content_right:has(ul.qiheightTop) .qiContainer > .qihome_tieudebg { flex: 0 0 auto; }
    .row:has(.demo-slider-3) .Content_right:has(ul.qiheightTop) ul.qiheightTop {
        flex: 1 1 auto !important; min-height: 0 !important;
        height: auto !important; max-height: none !important;
        overflow-y: auto !important; display: block;
    }
}
.demo-slider-3 {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 180px !important;
    margin: 0 auto 10px !important;
}
/* 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 <li> 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: <div class="border p-2 my-2"><marquee direction="up">...)
   chỉ dùng .border Bootstrap (viền vuông, không bo góc/bóng) -> làm thành CARD hiện đại đồng bộ
   các khối khác. :has(> marquee[direction="up"]) nhắm đúng khối này, không đụng .border khác. */
.border:has(> marquee[direction="up"]) {
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow);
    background: var(--m-surface);
}

/* ============ MENU DỌC (DANH MỤC) ============ */
.wrapper {
    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 — để submenu flyout đâm ra phải không bị cắt */
    margin-bottom: 10px;
}
/* bo góc header khớp wrapper (vì overflow không còn hidden để clip) */
body .qihomemenudoc { border-radius: var(--m-radius) var(--m-radius) 0 0; }
/* body-prefix để THẮNG rule màu động inject (.qihomemenudoc{background:ColorSite!important}) */
body .qihomemenudoc {
    position: relative;
    background: var(--m-surface) !important;
    color: var(--m-primary) !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 14px 16px 14px 26px !important;
    border-bottom: 1px solid var(--m-border);
    font-size: 15px;
}
body .qihomemenudoc::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(var(--m-primary), var(--m-primary-dark));
}
.qimenudoc { margin: 0; padding: 6px 0; }
.qimenudoc li a,
.qimenudoc .qilist > a {
    display: block;
    padding: 10px 16px !important;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--m-text) !important;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.qimenudoc li a:hover,
.qimenudoc .qilist > a:hover {
    background: var(--m-surface-2);
    border-left-color: var(--m-primary, var(--m-accent)); /* bar = màu chữ hover */
    color: var(--m-primary) !important;
    text-decoration: none;
}

/* ===== Menu dọc dạng mở rộng (menudocexpand) ===== */
/* Màu chữ NHẤT QUÁN: mọi mục (parent + leaf) CÙNG 1 màu (dark); hover = màu thương hiệu.
   Dùng #sidebar (ID) để specificity cao, thắng chắc rule đỏ (inject/qicolordefault/parentNote). */
body #sidebar .qimenudoc a,
body #sidebar .qimenudoc .dropdown-toggle,
body #sidebar .qimenudoc .qitonggle,
body #sidebar .qimenudoc a.parentNote {
    color: var(--m-text) !important;
    font-weight: 600;
    font-size: 14.5px !important; /* cùng cỡ chữ cho mọi mục (cha .qitonggle + lá a trơn) */
    line-height: 1.35 !important;
}
body #sidebar .qimenudoc a:hover,
body #sidebar .qimenudoc .dropdown-toggle:hover,
body #sidebar .qimenudoc .qilist:hover > a { color: var(--m-primary) !important; }

/* Submenu TỰ SỔ RA BÊN PHẢI khi hover (flyout, theo hướng mũi tên ▸) */
body .qimenudoc .qilist.dropright { position: relative; }
body .qimenudoc .qilist.dropright:hover > .dropdown-menu,
body .qimenudoc .qilist.dropright:focus-within > .dropdown-menu { display: block !important; }
body .qimenudoc .dropright > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 230px;
    margin: 0 0 0 1px;
    border: 1px solid var(--m-border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16, 32, 52, .18);
    padding: 6px;
    background: #fff;
    z-index: 60;
}
body .qimenudoc .dropdown-menu a { padding: 8px 12px !important; border-radius: 6px; }
body .qimenudoc .dropdown-menu a:hover { background: var(--m-surface-2); }

/* ============ TIÊU ĐIỂM & VĂN BẢN → CARD ============ */
.van-ban {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    overflow: hidden;
    margin-bottom: 10px;
}
/* .tieudiemmtop chỉ là wrapper (bên trong đã có .qiContainer là card) → KHÔNG card kép */
.tieudiemmtop { margin-bottom: 10px; }
/* Header TIÊU ĐIỂM: bar riêng giống DANH MỤC. tieudiemhometop render .logo-title (isShowImage=false)
   HOẶC .qihome_tieudebg → style CẢ HAI thành thanh header (chữ hoa đậm + border-bottom, GIỮ logo). */
body .tieudiemmtop .logo-title,
body .tieudiemmtop .qihome_tieudebg {
    display: flex;
    align-items: center;
    background: var(--m-surface) !important;
    border-bottom: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) var(--m-radius) 0 0;
    padding: 13px 16px !important;
    margin: 0 !important;
}
body .tieudiemmtop .logo-title img {
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px;
    flex: none;
}
body .tieudiemmtop .qihome_tieude {
    font-weight: 800 !important;
    text-transform: uppercase;
    color: var(--m-primary) !important;
    font-size: 15px !important;
}

/* ===== TIÊU ĐIỂM / TIN MỚI NHẤT (cột phải row1 trang home) =====
   ĐÃ BỎ ép equal-height ở global (theo lựa chọn của user — ổn định toàn hệ thống):
   không neo position:absolute, không reserve slider. Cột phải giữ LAYOUT GỐC trong flow,
   list cao theo .qiheightTop của từng trang (cuộn nếu dài) → không đè, không trắng dư, không lệch.
   (homehcm2 giữ equal-height riêng qua qi-modern.css scope .qi-modern — không ảnh hưởng.) */

/* ============ "ĐỌC NHIỀU NHẤT" — badge tròn ============ */
/* body-prefix để thắng .s_LuotNghe{color:#cc0101} của qicolordefault (nạp sau) */
body .s_LuotNghe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--m-primary);
    color: #fff !important;
    font-weight: 800;
    font-size: 13px !important;
    font-style: normal;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(16, 32, 52, .18);
    flex: none;
}
/* Category cha (parentNote) trong menu dọc: dùng màu thương hiệu cho nhất quán,
   thắng qiStyleCategory (.qimenudoc li a.parentNote) bằng tiền tố body */
body .qimenudoc li a.parentNote,
body ul.qimenudoc li a.parentNote { color: var(--m-primary) !important; font-weight: 700; }
.qiContainer_border li:nth-child(1) .s_LuotNghe { background: linear-gradient(135deg, #f7ce46, #e0a800); color: #5a4300 !important; }
.qiContainer_border li:nth-child(2) .s_LuotNghe { background: linear-gradient(135deg, #cbd0d7, #9aa2ac); color: #333a42 !important; }
.qiContainer_border li:nth-child(3) .s_LuotNghe { background: linear-gradient(135deg, #e2a877, #c1804a); color: #4a2c12 !important; }
/* Số thứ tự (.s_LuotNghe) sang TRÁI + cách nội dung 10px (đảo thứ tự flex qua order) */
.qiContainer_border .d-flex:has(.s_LuotNghe) > *:has(> .s_LuotNghe) {
    order: -1;
    padding: 0 !important;
    margin-right: 10px !important;
}
.qiContainer_border .d-flex:has(.s_LuotNghe) > .mr-auto {
    margin-right: 0 !important;
    flex: 1;
}

/* ============ THANH NAV CHÍNH (đỏ) — giữ sticky ============ */
.qimenu.menu-main { box-shadow: 0 3px 14px rgba(0, 0, 0, .16); }
.qimenu .navbar,
.qimenu .navbar-collapse,
.qimenu .navbar-nav { align-items: center !important; }
.qimenu .navbar-nav > li { display: flex; align-items: center; justify-content: center; } /* center: chữ/icon giữa nút (nhất là menu mầm non li rộng) */
.qimenu .navbar-nav .nav-link {
    padding: 12px 16px !important;
    display: flex;
    align-items: center;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .015em;
    border-radius: 6px 6px 0 0;
    border-bottom: 3px solid transparent;
    transition: background .16s ease, border-color .16s ease;
}
.qimenu .navbar-nav > li:hover > .nav-link,
.qimenu .navbar-nav > li.active > .nav-link {
    background: rgba(255, 255, 255, .14) !important;
    border-bottom-color: var(--qi-gold, #ffd34d) !important;
    color: #fff !important;
}
/* Chữ menu chính (.qimenu = menungangall, nền màu tenant) GIỮ TRẮNG khi hover/mở-dropdown/active.
   Skin trên đã ép #fff nhưng bị hocmon.css (nạp toàn cục qua ProjectCssFile trên localhost) đè:
   .navbar-hover.navbar-dark .nav-item:hover .nav-link{color:#3c3c3c!important} (spec 0,0,5,0).
   Ép lại bằng spec cao hơn (body + 5 class = 0,0,5,1). KHÔNG đụng menu Hóc Môn .qimenu22 (khác class)
   — .qimenu mặc định luôn nền tenant nên chữ trắng là đúng. */
body .qimenu .navbar-nav .nav-item:hover .nav-link,
body .qimenu .navbar-nav .nav-link:hover,
body .qimenu .navbar-nav .nav-item.show > .nav-link,
body .qimenu .navbar-nav .nav-item.active > .nav-link {
    color: #fff !important;
}
.qimenu .navbar-nav > li.menu_0 > .nav-link {
    background: transparent !important;
    border-bottom-color: transparent !important;
    border-radius: 0 !important;
}
.qimenu .fa-home,
.qimenu .fa-th { font-size: 17px; }
.qimenu .dropdown-menu {
    border: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 30px rgba(16, 32, 52, .18);
    padding: 6px;
    margin-top: 0 !important;
}
.qimenu .dropdown-menu .dropdown-item { border-radius: 6px; padding: 8px 12px; font-weight: 500; transition: background .15s ease; }
.qimenu .dropdown-menu .dropdown-item:hover { background: var(--m-surface-2); color: var(--m-primary); }

/* ============ MEGAMENU (panel chuyên mục) — làm gọn/hiện đại ============ */
.megamenu { padding: 16px 10px !important; border-radius: 0 0 12px 12px; }
.megamenu .col-megamenu, .megamenu .widget { padding: 0 14px 16px !important; }
/* Tiêu đề cột: chữ hoa đậm màu thương hiệu + gạch nhấn dưới */
.megamenu .widget-title {
    margin: 0 0 9px !important;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--m-border, #dbe3ec);
}
.megamenu .widget-title a {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--m-primary) !important;
    text-decoration: none !important;
}
/* Link mục: bo góc, hover nền nhạt + đổi màu thương hiệu + trượt nhẹ */
.megamenu .navbar-item { margin: 0 !important; }
.megamenu .navbar-item .nav-link2 {
    display: block;
    padding: 5px 8px !important;
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 500;
    color: #2b3648 !important;
    text-decoration: none !important;
    transition: background .14s ease, color .14s ease, padding-left .14s ease;
}
.megamenu .navbar-item .nav-link2:hover {
    background: var(--m-surface-2, #f6f8fb);
    color: var(--m-primary) !important;
    padding-left: 12px !important;
}
.megamenu .navbar-item .nav-link2 .fa-caret-right { color: var(--m-primary); opacity: .5; font-size: 11px; margin-right: 3px; }
.megamenu .maxhieght { padding-right: 6px; }

/* ============ DẢI TIỆN ÍCH TRÊN (logo · đơn vị · tìm kiếm) ============ */
.navbar-fixed-top { box-shadow: inset 0 -1px 0 var(--m-border); padding-top: 4px !important; padding-bottom: 4px !important; }
.navbar-fixed-top .d-flex { align-items: center !important; }
.navbar-fixed-top .d-flex > .py-1 { padding-top: 0 !important; padding-bottom: 0 !important; }
.navbar-fixed-top .d-flex > .mr-auto.pt-1 { padding-top: 0 !important; }
/* nav.qibgtop1 (Bootstrap navbar) padding lớn → gỡ để bar không cao dư + căn giữa dọc chữ */
.navbar-fixed-top .qibgtop1 { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
.navbar-fixed-top .qibgtop1 .navbar-nav { align-items: center; }
.navbar-fixed-top .mr-auto img { padding-top: 0 !important; max-height: 40px; }
.navbar-fixed-top .input-group,
.qiMenuTime_flex .input-group { align-items: center; flex-wrap: nowrap; } /* nowrap: nút search không rớt xuống dòng dưới */
/* Dải ngày/giờ (.qiMenuTime_flex): CĂN GIỮA DỌC mọi item + GIẢM chiều cao (search nhỏ lại, ảnh RSS/EN gọn) */
.qiMenuTime_flex .d-flex { align-items: center !important; }
.qiMenuTime_flex #qitxtSearch.form-control,
.qiMenuTime_flex .input-group-append .input-group-text { height: 32px !important; }
.qiMenuTime_flex img { max-height: 24px !important; width: auto !important; }
/* Chữ chạy (marquee) TRÀN khỏi khung: .qiChuChay là flex item chứa .scrolling-text
   (nowrap, rất dài). Thiếu min-width:0 -> min-width:auto = độ rộng nội dung THẮNG cả
   max-width:650px inline -> item nở ra tràn, đẩy RSS/EN/search. Cho co lại + ẩn tràn.
   Áp cho CẢ 2 biến thể: .qiMenuTime_flex (menuchuchayngang_flex) và .qiMenuTime
   (menuchuchayngang_Old, region hcmedu/haiphong/hungyen/hoabinh - bản Old KHÔNG có
   flex-grow/max-width nên phải thêm flex:1 1 0 để co trong khổ). */
.qiMenuTime_flex .qiChuChay,
.qiMenuTime .qiChuChay {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.qiMenuTime_flex .scrolling-text,
.qiMenuTime .scrolling-text { width: 100% !important; overflow: hidden; }
/*  CHIỀU CAO DẢI NGÀY/GIỜ BẢN _Old (.qiMenuTime — region hcmedu/haiphong/hungyen/hoabinh).
    Dải này có chiều cao CỨNG 30px trong khi khay chọn ngôn ngữ cao 32px ⇒ khay thò ra khỏi dải,
    lại thêm các ô mang lớp `pt-1` (đệm trên 4px) nên chữ ngày giờ/RSS lệch so với khay
    (user 2026-08-06: "chỉnh lại chiều cao thanh menu ngày tháng cho đẹp, phù hợp với combo ngôn ngữ").
    ⇒ cho dải cao theo nội dung (tối thiểu 40px), căn giữa dọc và bỏ đệm trên cố định. */
.qiMenuTime {
    height: auto !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
}
.qiMenuTime > .container { width: 100%; }
.qiMenuTime .d-flex { align-items: center !important; }
.qiMenuTime .d-flex > * { padding-top: 0 !important; padding-bottom: 0 !important; }
.qiMenuTime .menuTime { padding-top: 0 !important; }
.qiMenuTime img { max-height: 24px !important; width: auto !important; }
/*  Ô RSS là thẻ khối cao bằng cả dải, ảnh nằm sát mép trên ⇒ tâm cao hơn 3px so với chữ và khay.
    Cho ô này tự căn giữa nội dung. */
.qiMenuTime .d-flex > .ml-auto { display: flex !important; align-items: center !important; }
/*  Bản _flex cũng cho tối thiểu 40px để hai biến thể cao bằng nhau. */
.qiMenuTime_flex { min-height: 40px; }
nav.qibgtop1 .qilitop > .qifontbold-1 { padding: 7px 12px !important; border-radius: 8px; font-weight: 700; letter-spacing: .01em; transition: background .15s ease, color .15s ease; }
nav.qibgtop1 .qilitop:hover,
nav.qibgtop1 .qilitop.show { background: transparent !important; }
nav.qibgtop1 .qilitop:hover > .qifontbold-1,
nav.qibgtop1 .qilitop.show > .qifontbold-1 { background: var(--m-primary, #c8102e) !important; color: #fff !important; }
#qitxtSearch.form-control {
    border-radius: 999px 0 0 999px !important;
    border: 1.5px solid var(--m-border) !important;
    border-right: 0 !important;
    padding: 8px 16px;
    background: #f6f8fb;
    flex: 1 1 auto; /* co giãn thích ứng thay vì cố định 210px (tránh nhảy/lệch trên tenant khác) */
    min-width: 120px;
    height: 40px !important;
    box-shadow: none;
}
#qitxtSearch.form-control:focus { background: #fff; border-color: var(--m-primary) !important; }
.input-group-append { flex: 0 0 auto; }
.input-group-append .input-group-text {
    border-radius: 0 999px 999px 0 !important;
    background: var(--m-primary, #c8102e);
    color: #fff;
    border: 0;
    cursor: pointer;
    width: 46px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter .15s ease;
}
.input-group-append .input-group-text:hover { filter: brightness(1.1); }

/* ============ THANH CUỘN mảnh, hiện đại ============ */
/* .mq13 (vùng nội dung VĂN BẢN): qistyleall để overflow-y:scroll (LUÔN hiện thanh cuộn dù còn trống)
   → auto (chỉ hiện khi thực sự tràn). */
.mq13 { overflow-y: auto !important; }
/* Firefox */
.qiContainer_border,
.qiheightTop,
.noidungthongbao,
.mq13,
.tieudiemmtop *,
.Content_right *,
.megamenu,
.megamenu .maxhieght,
.qimenu .dropdown-menu { scrollbar-width: thin; scrollbar-color: rgba(120, 135, 155, .45) transparent; }
/* WebKit (Chrome/Edge/Safari) */
.qiContainer_border::-webkit-scrollbar,
.qiheightTop::-webkit-scrollbar,
.noidungthongbao::-webkit-scrollbar,
.mq13::-webkit-scrollbar,
.tieudiemmtop *::-webkit-scrollbar,
.Content_right *::-webkit-scrollbar,
.megamenu ::-webkit-scrollbar,
.qimenu .dropdown-menu ::-webkit-scrollbar { width: 8px; height: 8px; }
.qiContainer_border::-webkit-scrollbar-track,
.qiheightTop::-webkit-scrollbar-track,
.noidungthongbao::-webkit-scrollbar-track,
.mq13::-webkit-scrollbar-track,
.tieudiemmtop *::-webkit-scrollbar-track,
.Content_right *::-webkit-scrollbar-track,
.megamenu ::-webkit-scrollbar-track,
.qimenu .dropdown-menu ::-webkit-scrollbar-track { background: transparent !important; margin: 4px 0; }
.qiContainer_border::-webkit-scrollbar-thumb,
.qiheightTop::-webkit-scrollbar-thumb,
.noidungthongbao::-webkit-scrollbar-thumb,
.mq13::-webkit-scrollbar-thumb,
.tieudiemmtop *::-webkit-scrollbar-thumb,
.Content_right *::-webkit-scrollbar-thumb,
.megamenu ::-webkit-scrollbar-thumb,
.qimenu .dropdown-menu ::-webkit-scrollbar-thumb {
    background: rgba(120, 135, 155, .4) !important;
    border-radius: 999px !important;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background .2s ease;
}
.qiContainer_border::-webkit-scrollbar-thumb:hover,
.qiheightTop::-webkit-scrollbar-thumb:hover,
.noidungthongbao::-webkit-scrollbar-thumb:hover,
.mq13::-webkit-scrollbar-thumb:hover,
.Content_right *::-webkit-scrollbar-thumb:hover,
.megamenu ::-webkit-scrollbar-thumb:hover { background: var(--m-primary, rgba(92, 107, 126, .7)) !important; }
/* homegd12 (biến thể Hà Nội): .heightvanban (THÔNG BÁO/VĂN BẢN/ĐỌC NHIỀU) dùng scroll xanh mặc định → đồng bộ scroll chung */
.heightvanban { scrollbar-width: thin; scrollbar-color: rgba(120, 135, 155, .45) transparent; }
.heightvanban::-webkit-scrollbar { width: 8px; height: 8px; }
.heightvanban::-webkit-scrollbar-track { background: transparent !important; }
.heightvanban::-webkit-scrollbar-thumb {
    background: rgba(120, 135, 155, .4) !important;
    border-radius: 999px !important;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.heightvanban::-webkit-scrollbar-thumb:hover { background: var(--m-primary, rgba(92, 107, 126, .7)) !important; }

/* ============ TIÊU ĐỀ THUMBNAIL SLIDE ============ */
/* Tiêu đề quá dài → tự cắt gọn tối đa 3 dòng + "…" (tránh tràn khung thumbnail) */
.amazingslider-nav-thumbnail-tite-0 > a,
.amazingslider-nav-thumbnail-tite-1 > a,
.amazingslider-nav-thumbnail-tite-2 > a {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

/* Item nhỏ trong khối tin (.qiheightItem — vd HOẠT ĐỘNG): tiêu đề dài cắt gọn 3 dòng + "…"
   thay cho max-height:95px;overflow:hidden của qistyleall (cắt cụt giữa dòng, xấu/ẩn chữ). */
.qiheightItem { max-height: none !important; overflow: visible !important; }
.qiheightItem a,
.qiheightItem .qitieudechinh {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}

/* ============ ƯU TIÊN CĂN ĐỀU 2 BÊN (JUSTIFY) cho TIÊU ĐỀ/NỘI DUNG tin ============ */
/* (KHÔNG áp cho header khối .qihome_tieude, ngày tháng .time, menu, badge) */
.qitieudechinh,
.titleItem, .titleItem a,
.qiheightmain, .qiheightmain a,
.qiheightItem, .qiheightItem a,
.qiContainer_border li a,
.tieudiemmtop li a,
.mq13 li a,
.noidungthongbao .titleItem,
.s_openmedia,
.van-ban li a { text-align: justify; text-justify: inter-word; }

/* ============ CHUẨN HÓA HOVER thẻ <a> TIN BÀI (toàn hệ thống) ============ */
/* Hover MỌI link tin bài -> đổi sang MÀU THƯƠNG HIỆU động var(--m-primary) (= ColorSite mỗi tenant),
   chuyển mượt, KHÔNG gạch chân. Bám theo container tin (bắt mọi <a> bên trong) + class tiêu đề đứng riêng.
   KHÔNG áp cho header khối (.qihome_tieude), "Xem thêm" (.xem-them), ngày (.time), menu, badge. */
.qiContainer_border a, .noidungthongbao a, .itemthongbao a,
.mq13 a, .heightvanban a, .van-ban li a,
.qiheightTop a, .qiheightItem a, .qiheightmain a, .tieudiemmtop a,
.listitem a, .titevideolisthome a, .qigd3right a,
.qitieudechinh, .tieudechinh a, .titleItem a, .s_openmedia,
.hol-itct a, .r-hol-snip a, .titnew-lv3 a, a.titnew-lv3,
.top-title, .txt-tplv2, .txt-sl-lv2, .txt-snipt,
.qitieudechinh_DN, .qitieudechinh_DN_right {
    transition: color .16s ease !important;
}
.qiContainer_border a:hover, .noidungthongbao a:hover, .itemthongbao a:hover,
.mq13 a:hover, .heightvanban a:hover, .van-ban li a:hover,
.qiheightTop a:hover, .qiheightItem a:hover, .qiheightmain a:hover, .tieudiemmtop a:hover,
.listitem a:hover, .titevideolisthome a:hover, .qigd3right a:hover,
.qitieudechinh:hover, .tieudechinh a:hover, .titleItem a:hover, .s_openmedia:hover,
.hol-itct a:hover, .r-hol-snip a:hover, .titnew-lv3 a:hover, a.titnew-lv3:hover,
.top-title:hover, .txt-tplv2:hover, .txt-sl-lv2:hover, .txt-snipt:hover,
.qitieudechinh_DN:hover, .qitieudechinh_DN_right:hover,
.itemHomeTop a:hover {
    color: var(--m-primary, #c8102e) !important;
    text-decoration: none !important;
}

/* ============================================================================
   HOVER CHUẨN cho MỌI khối tin HÀ NỘI (homegdhn2): item -> BAR TRÁI + NỀN + đổi
   màu tiêu đề. BAR = pseudo ::before ĐẶT TUYỆT ĐỐI, z-index cao để ĐÈ LÊN ảnh
   (item có ảnh trái .divitemtop/.divrelateCat trước đây bị ảnh che bar); top/bottom
   6px để bar NGẮN hơn container (tránh bar dài quá khối do <hr>/đệm). KHÔNG dùng
   border-left/box-shadow (bị ảnh che / phủ full cao). Class Hà Nội-riêng -> an toàn.
   Item: .divitemtop(list cạnh bài chính) .newitem(Tin mới nhất) .top-lv2-new(tin phụ)
   .border-lr/.border-lr2(list) .divrelateCat(tin ảnh) .itemdocnhieu(đọc nhiều)
   .itclhol(chuyên mục) .heightvanban>.col(Thông báo/Văn bản). ==================== */
/* Nền hover ở cấp ITEM (tô sáng cả dòng tin). */
.divitemtop, .newitem, .top-lv2-new, .border-lr, .border-lr2, .divrelateCat,
.itemdocnhieu, .itclhol, .heightvanban > .col {
    transition: background .15s ease, color .15s ease;
}
.divitemtop:hover, .newitem:hover, .top-lv2-new:hover, .border-lr:hover,
.border-lr2:hover, .divrelateCat:hover, .itemdocnhieu:hover, .itclhol:hover,
.heightvanban > .col:hover {
    background: var(--m-surface-2, #f6f8fb);
}
/* BAR CHỈ HIỆN KHI HOVER = ::before OVERLAY tuyệt đối -> KHÔNG chiếm chỗ, idle GIỮ NGUYÊN
   100% thiết kế gốc (title/date không xê dịch). KHÔNG dùng border-left/padding cố định (chiếm
   chỗ cả khi không hover).
   NHÓM A — item có WRAPPER chứa cả title+date (không ảnh/hr). */
/* A1 — item ẢNH-TRÁI (.divitemtop/.divrelateCat): idle chữ SÁT mép cột (row Bootstrap triệt
   padding) -> không có chỗ cho bar. Khi HOVER: đẩy chữ sang phải (padding) tạo KHE, bar nằm
   trong khe (cách ảnh ~2px, cách chữ ~6px). Idle: padding 0 + bar ẩn -> NGUYÊN GỐC. */
.divitemtop .hntexttop, .divrelateCat .box-text-ev1 {
    position: relative;
    transition: padding-left .14s ease;
}
.divitemtop .hntexttop::before, .divrelateCat .box-text-ev1::before {
    content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px;
    width: 3px; background: var(--m-accent, var(--m-primary, #c8102e));
    opacity: 0; transition: opacity .14s ease; border-radius: 2px; pointer-events: none;
}
.divitemtop:hover .hntexttop, .divrelateCat:hover .box-text-ev1 { padding-left: 11px; }
.divitemtop:hover .hntexttop::before, .divrelateCat:hover .box-text-ev1::before { opacity: 1; }
/* A2 — .top-lv2-new (ảnh TRÊN, tiêu đề dưới): `.row` bị ép margin:0 (fix ảnh tràn viền, ~dòng
   305) nên KHÔNG triệt padding col bên trong -> tiêu đề/ngày THỤT ~30px. Triệt padding col text
   để chữ THẲNG với ảnh (idle, mép 0); hover đẩy chữ tạo khe + bar (giống item ảnh-trái). */
.top-lv2-new .titnew-lv2 { padding-left: 0 !important; }
.top-lv2-new .col.width100 {
    position: relative;
    padding-left: 0;
    transition: padding-left .14s ease;
}
.top-lv2-new .col.width100::before {
    content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px;
    width: 3px; background: var(--m-accent, var(--m-primary, #c8102e));
    opacity: 0; transition: opacity .14s ease; border-radius: 2px; pointer-events: none;
}
.top-lv2-new:hover .col.width100 { padding-left: 11px; }
.top-lv2-new:hover .col.width100::before { opacity: 1; }
/* KHE ẢNH↔CHỮ khối tin ảnh-nhỏ (.divrelateCat): cột chữ đang .pl-1 (~4px) -> hơi sát,
   nới 10px cho thoáng (cố định, không phải hover). */
.divrelateCat .row-cols-2 > .d-grid { padding-left: 10px !important; }
/* NHÓM B — item PHẲNG (title/date/hr là ô rời cùng cấp): bar ::before ở GUTTER TRÁI
   (không đụng chữ -> title/date giữ thẳng hàng). Item CÓ <hr> -> cắt bottom để bar KHÔNG
   tính <hr>; item KHÔNG hr -> bottom sát. */
.border-lr, .border-lr2, .heightvanban > .col.d-grid, .newitem, .itemdocnhieu {
    position: relative;
}
.border-lr::before, .border-lr2::before, .heightvanban > .col.d-grid::before,
.newitem::before, .itemdocnhieu::before {
    content: ""; position: absolute; left: 6px; top: 3px; bottom: 3px;
    width: 3px; background: var(--m-accent, var(--m-primary, #c8102e));
    opacity: 0; transition: opacity .15s ease; border-radius: 2px; pointer-events: none;
}
.border-lr::before, .border-lr2::before, .heightvanban > .col.d-grid::before {
    bottom: 16px;   /* chừa <hr> ở đáy -> bar ~ bằng title+date */
}
.itemdocnhieu::before { left: 0; }   /* trước số thứ tự */
.border-lr:hover::before, .border-lr2:hover::before, .heightvanban > .col.d-grid:hover::before,
.newitem:hover::before, .itemdocnhieu:hover::before { opacity: 1; }
/* Đổi màu tiêu đề khi hover item (mọi khối). */
.divitemtop:hover .txt-tplv2, .divrelateCat:hover .titnew-lv3, .top-lv2-new:hover .txt-tplv2,
.border-lr:hover .txt-sl-lv2, .border-lr2:hover .txt-sl-lv2, .newitem:hover .txt-sl-lv2,
.heightvanban > .col:hover .txt-snipt, .itemdocnhieu:hover .txt-snipt {
    color: var(--m-primary, #c8102e) !important;
}
/* Chuyên mục: tiêu đề .txt-ct INLINE -> bar ::before trên chip .it-ct. */
.itclhol .it-ct { position: relative; }
.itclhol .it-ct::before {
    content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
    width: 3px; background: var(--m-accent, var(--m-primary, #c8102e));
    opacity: 0; transition: opacity .15s ease; border-radius: 2px;
}
.itclhol:hover .it-ct::before { opacity: 1; }
.itclhol:hover .txt-ct { color: var(--m-primary, #c8102e) !important; }

/* ============ CHÂN TRANG ============ */
footer #CenterFooter .border-bottom { border-bottom: 0 !important; }
footer #CenterFooter > .d-flex:not(.border-bottom) { border-top: 1px solid rgba(0, 0, 0, .12); margin-top: 6px; padding-top: 12px; }
footer,
footer .jumbotron { background-color: #fdf2d6; margin: 0 !important; }
.yhy-append-wrap {
    position: fixed !important;
    left: 20px;
    bottom: 20px;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    z-index: 50;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============ TIÊU ĐỀ TIN — LÀM RÕ (toàn hệ thống) ============ */
/* .qitieudechinh đặt font-weight:500 nhưng nhiều tenant dùng font chỉ nạp nét 400 & 700
   (vd Cuprum) -> nét 500 rơi về 400 (mảnh, nhìn "mờ"). Ép 700 (bold thật của font) + màu
   đậm cho tiêu đề tin toàn hệ thống. Giữ màu thương hiệu cho tin nổi bật (.color-md). */
.qitieudechinh,
.qitieudechinh15,
.qiheightTop li a,
.a-simple.fw-500,
.a-simple.anim-title,
.itemHomeTop a,
.itemthongbao a {
    font-weight: 700 !important;
}

.qitieudechinh:not(.color-md),
.itemHomeTop a,
.itemthongbao a {
    color: #1a1a1a !important;
}

/* ============================================================================
   MENU NGANG — SỬA VỠ/CAO (item dài xuống dòng làm thanh menu cao 3–4 hàng).
   Nguyên nhân: .nav-link cho phép chữ xuống dòng -> item bị co hẹp + cao ->
   fitMenu (JS trong menungangall.ascx) đo li.offsetWidth ra NHỎ -> tưởng còn chỗ
   -> KHÔNG ẩn item nào -> tất cả item hiện & wrap. Fix: ép item KHÔNG co + chữ
   NOWRAP để fitMenu đo ĐÚNG bề rộng thật & ẩn item tràn vào nút 9-chấm (menu_111).

   Chỉ áp DESKTOP ≥992px (dưới đó menu thu gọn hamburger DỌC — nowrap sẽ làm item
   dài tràn ngang; fitMenu cũng chỉ chạy ≥992px).

   (A) MENU CHUẨN .qimenu > #main_nav99 > ul.navbar-nav > li.nav-item  (menungangall
       — dùng bởi homegd3/HCM, danang… có sẵn fitMenu). Đây là fix cho homegd3.
   (B) MENU HCM menusaidong .qimenu22 > … > #main_nav99 > .link-menu (item nhét
       thẳng, không ul.navbar-nav). Scope .link-menu -> KHÔNG đụng menu Hóc Môn.
   ============================================================================ */
@media (min-width: 992px) {
    /* GIỚI HẠN MENU THEO KHỔ TRANG: min-width:0 để #main_nav99 + ul KHÔNG nở theo
       nội dung nowrap. Nếu nở, fitMenu đo row.clientWidth = bề rộng đã nở (rất lớn)
       -> avail lớn -> KHÔNG ẩn item nào -> menu tràn khỏi khổ trang. Ép về khổ trang
       để fitMenu đo đúng & ẩn item thừa vào nút 9-chấm. KHÔNG overflow:hidden (cắt
       dropdown con). */
    .qimenu #main_nav99 { min-width: 0; max-width: 100%; }
    .qimenu #main_nav99 .navbar-nav { flex-wrap: nowrap; min-width: 0; }
    .qimenu #main_nav99 .navbar-nav > .nav-item { flex: 0 0 auto; }
    /* nowrap cho MỌI nav-link (kể cả mục KHÔNG dropdown — mục dropdown đã nowrap sẵn
       từ Bootstrap .dropdown-toggle). !important phòng override. */
    .qimenu #main_nav99 .navbar-nav > .nav-item > .nav-link,
    .qimenu #main_nav99 .navbar-nav > .nav-item > .nav-link.dropdown-toggle { white-space: nowrap !important; }

    .qimenu22 .navbar-collapse:has(> .link-menu) { flex-wrap: nowrap; min-width: 0; }
    .qimenu22 .link-menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        min-width: 0;
    }
    .qimenu22 .link-menu > li { flex: 0 0 auto; list-style: none; }
    .qimenu22 .link-menu .nav-link { white-space: nowrap; }
}

/* ================== NÚT ĐỔI NGÔN NGỮ — KÍCH THƯỚC CỐ ĐỊNH TRÊN MỌI GIAO DIỆN ==================
   User chốt 2026-08-04: "phần tiếng anh nên fix cố định kích thước trên các giao diện".
   Bản cũ khai mỗi vỏ một kiểu: vỏ Hóc Môn `<img src="/Images/eng.svg">` KHÔNG có width (ăn cỡ gốc),
   trang mobile `width="50px"`, `_MasterTab` `width="50"`, Gd15/Eng còn thêm `.logo-tienganh`.
   Ảnh eng.svg / vn.svg cỡ gốc 49×24 ⇒ chốt 50×24. Rule này lặp lại trong `qi-menu-mb.css` cho các vỏ
   MOBILE/TAB (hai bộ CSS được nạp bởi hai nhóm layout khác nhau). */
#tienganh, #tiengviet { flex: 0 0 auto; display: inline-flex; align-items: center; }

#tienganh img, #tiengviet img {
    width: 50px !important;
    height: 24px !important;
    /* BẮT BUỘC có `max-height: none`: vỏ Hóc Môn có `.landing-2 img { max-height: 20px !important }`
       (và các vỏ khác cũng hay chặn kiểu này) — max-height thắng height nên nếu không mở ra thì ảnh
       vẫn cao 20px, tức mỗi vỏ một cỡ, đúng cái user muốn bỏ. Rule này CHỈ nhắm #tienganh/#tiengviet
       nên các ảnh khác trong cùng hàng (RSS, logo…) không bị ảnh hưởng. */
    max-height: none !important;
    max-width: none;
    object-fit: contain;
    display: block;
}

/* ============ NÚT "CHIA SẺ" TRÊN THANH NGÀY ĐĂNG / LƯỢT ĐỌC (trang chi tiết tin) ============
   User 2026-08-07: "chuyển nút chia sẻ lên thanh công cụ … trên mobile cùng nhóm với ngày tháng và
   lượt đọc". Nút trước đây nằm CUỐI bài (dưới nội dung, trên khối "Tin cùng chuyên mục") nên trên
   điện thoại phải cuộn hết bài mới thấy. Nay đứng ngay sau "Lượt đọc : N" trong cùng thẻ <article>,
   tự xuống dòng khi hẹp (flex-wrap ở markup). */
.qi-nhom-ngaydoc { column-gap: 12px; row-gap: 6px; }
.qi-nut-chiase { display: inline-flex; align-items: center; line-height: 0; }
.qi-nut-chiase img { display: block; width: 80px; height: auto; }

/* ============ DẢI NGÀY GIỜ / CHỮ CHẠY KHÔNG BỊ MENU ĐÈ LÊN ============
   User 2026-08-07 (/homegd15 và /homegd15rp): "menu đè lên chữ chạy".
   Đo: thanh menu `.qimenu22.sticky-top` cao 86px (0→86) còn dải `.container-fluid.qiMenuTime_flex`
   lại bắt đầu ở y=62 ⇒ chồng 24px. Thủ phạm KHÔNG nằm trong CSS dự án mà là khối <style> đi kèm phần
   "Thông tin chân trang" lấy từ CSDL: `.pb-2 { margin-top: -24px !important }` — đè lớp tiện ích pb-2
   của Bootstrap trên TOÀN TRANG, mà dải ngày giờ lại mang đúng class đó
   (`container-fluid qiMenuTime_flex pb-2`).
   Chỉ gỡ cho DẢI NGÀY GIỜ (bộ chọn 2 lớp = 0,2,0 nên thắng `.pb-2` 0,1,0 dù cả hai !important và
   khối style của CSDL đứng sau); các khối khác vẫn giữ nguyên hành vi cũ. */
.qiMenuTime_flex.pb-2,
.qiMenuTime.pb-2 { margin-top: 0 !important; }

/* ============ THANH CÔNG CỤ BÀI VIẾT TỰ TÁCH 2 DÒNG KHI HẸP ============
   User 2026-08-07: "nếu màn hình nhỏ thì tự phân tách thanh công cụ thành 2 dòng riêng biệt cho đẹp".
   Hàng `.action_bar_news` gồm 2 nhóm: (ngày đăng · lượt đọc · nút Chia sẻ) và (cỡ chữ · đọc bài ·
   tương phản · in · phông). Khi cột nội dung hẹp, hai nhóm chen nhau rồi nút Chia sẻ rơi xuống dòng
   một mình, nhìn lộn xộn (ảnh user gửi).
   Cho mỗi nhóm cơ sở 340px: còn đủ chỗ thì hai nhóm nằm CÙNG một dòng như cũ, hẹp hơn thì mỗi nhóm
   chiếm trọn một dòng — tách hẳn, không phụ thuộc bề rộng CỬA SỔ (cột nội dung có thể hẹp ngay cả khi
   màn hình rộng, đúng trường hợp user gặp). */
.action_bar_news { flex-wrap: wrap; row-gap: 8px; }
/*  Nhóm CHỮ co giãn được (cơ sở 240px, cho phép co) — nhóm CÔNG CỤ giữ nguyên bề rộng tự nhiên
    (`flex: 0 0 auto`) để KHÔNG bị bóp lại rồi phải xuống hai hàng khi trang vẫn còn chỗ
    (user 2026-08-07: "giao diện có ctfull trên link thì vẫn giữ nguyên thanh control như cũ vì vẫn còn
    không gian"). Khi hàng thật sự không đủ chỗ thì CẢ nhóm công cụ rơi xuống dòng dưới — đúng yêu cầu
    "màn hình nhỏ thì tách 2 dòng". */
.action_bar_news > article.qi-nhom-ngaydoc { flex: 1 1 240px; min-width: 0; }
.action_bar_news > article.action_button_change { flex: 0 0 auto; justify-content: flex-end; }

/*  🔴 KHÔNG ĐỂ NHÓM CÔNG CỤ TRÀN NGƯỢC LÊN CHỮ: nhóm này `flex-wrap: nowrap` + hàng canh phải
    (`justify-content: flex-end`) ⇒ khi cột nội dung hẹp (trang `/ct/` có cột trái nên chỉ ~747px),
    các nút rộng hơn ô chứa và phần thừa tràn về BÊN TRÁI, đè lên ngày đăng/lượt đọc
    (user 2026-08-07: "thanh công cụ các chức năng đè lên nhau rất xấu"). Cho phép xuống dòng. */
.action_bar_news .action_button_change { flex-wrap: wrap; row-gap: 6px; }
.action_bar_news .font-change { flex-wrap: wrap; }