/*!
 * ============================================================================
 *  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;
    /*  Lùi theo mục menu (26 -> 18px) để chữ đầu đề không thụt vào sâu hơn hẳn danh sách
        bên dưới. Giữ đúng độ lệch 7px như thiết kế cũ (trước: 26 so với 19).  */
    padding: 14px 12px 14px 18px !important;
    border-bottom: 1px solid var(--m-border);
    font-size: 15px;
}
body .qihomemenudoc::before {
    content: "";
    position: absolute;
    left: 8px;              /* thanh màu đi theo lề trái mới */
    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;
    /*  LỀ TRÁI 8px (user chốt 01/10/2026: "cách mép trái hơi rộng, để khoảng 8px thôi").
        Cộng với `border-left: 3px` ngay dưới thì chữ bắt đầu ở 11px tính từ mép ô.  */
    padding: 8px 10px 8px 8px !important;
    font-weight: 600;
    font-size: 12.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;
    /*  Cỡ chữ hạ 14,5px -> 13,5px (user chốt 01/10/2026, sau khi menu chuyển sang viết hoa):
        chữ hoa trông đậy hơn chữ thường cùng cỡ. Đo tại `thpttranvangiau.hcm.edu.vn`: cột menu
        1667px -> 1588px, số mục phải xuống hai dòng 9 -> 8, không mục nào tràn ngang.  */
    font-size: 12.5px !important; /* cùng cỡ chữ cho mọi mục (cha .qitonggle + lá a trơn) */
    /*  Giãn dòng 1,35 -> 1,55: tên chuyên mục dài phải xuống 2–3 dòng, ở 1,35 hai dòng dính
        sát nhau, khó đọc (user báo 01/10/2026, ảnh mục "NGHIÊN CỨU KHOA HỌC — BỒI DƯỠNG
        HỌC SINH GIỎ…" ba dòng).  */
    line-height: 1.55 !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;
}

/* ============ CĂN TRÁI TIÊU ĐỀ / NỘI DUNG TIN ============ */
/*  🔄 ĐỔI 21/08/2026: khối này TRƯỚC ĐÂY căn đều hai bên (`justify`). User yêu cầu chuyển sang
    `text-align: left`.

    Vì sao căn đều hỏng ở đây: tiếng Việt không ngắt từ bằng dấu gạch nối, mà khối tin lại hẹp
    (cột 350–400px). Muốn hai mép thẳng hàng, trình duyệt phải giãn khoảng trắng rất mạnh, tạo ra
    những "dòng sông trắng" chạy dọc giữa đoạn — đó chính là cảm giác chữ thưa không đều.

    Đo trước khi sửa (khổ 1500px, số phần tử có `text-align` tính ra là `justify`):
        thptlythuongkiet 181  ·  thptnguyenhien 117  ·  thhoanghia 73  ·  thcsdongda 38

    Sửa TẠI ĐÂY chứ không đè bằng luật khác, vì chính khối này là nơi cố ý bật căn đều. Các nơi khai
    `justify` rải rác ở tệp giao diện riêng (hanoi.css, style2.css, styles.css… có `!important`) và
    phần nội dung bài dán từ CSDL kèm `style="text-align:justify"` thì chặn ở `qi-tokens.css`.

    Giữ nguyên phạm vi cũ: 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: left; }

/* ============ 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; }

/*  =====================================================================================================
    BỎ VẠCH VÀNG KHI HOVER / NHẤN CHỌN TIN BÀI (user chốt 2026-08-13:
    “khi click tin bài active hoặc hover trên trang chủ bỏ thanh gạch vàng vì đè lên chữ”).

    Các khối tin ở trên có một thanh dọc 3px màu `--m-accent` (= `--qi-gold`, #c8901f) vẽ bằng `::before`
    đặt tuyệt đối, hiện khi hover. Trên ĐIỆN THOẠI, chạm vào tin để mở là trình duyệt bật luôn trạng thái
    hover/active ⇒ vạch hiện ra ngay trên chữ (phần đẩy chữ sang phải `padding-left:11px` không phải chỗ
    nào cũng ăn, và với item chữ sát mép thì vạch nằm đè lên chữ).

    Giữ NGUYÊN phản hồi hover khác: nền sáng `--m-surface-2` và tiêu đề đổi màu — đủ để biết đang trỏ
    vào tin nào, mà không có gì che chữ. Cũng KHÔNG đụng gạch vàng dưới mục MENU (`.qimenu .nav-link`)
    vì nó nằm dưới chữ, không che.

    Tắt bằng cách vô hiệu hoá `::before` + bỏ luôn phần đẩy chữ (nếu chỉ tắt vạch mà quên phần đẩy thì
    chạm vào tin chữ sẽ nhảy sang phải 11px — nhìn như lỗi rung chữ).
    ===================================================================================================== */
.divitemtop .hntexttop::before,
.divrelateCat .box-text-ev1::before,
.top-lv2-new .col.width100::before,
.border-lr::before, .border-lr2::before,
.heightvanban > .col.d-grid::before,
.newitem::before, .itemdocnhieu::before,
.itclhol .it-ct::before,
.qiheight4 .listitem::before {
    content: none !important;
    display: none !important;
}

.divitemtop:hover .hntexttop,
.divrelateCat:hover .box-text-ev1,
.top-lv2-new:hover .col.width100 {
    padding-left: 0 !important;
}

/*  ================================================================================================
    HUY HIỆU "TIN MỚI" TRONG TIÊU ĐỀ  (user cung cấp 24/08/2026)
    ------------------------------------------------------------------------------------------------
    Ảnh `iconnew` là huy hiệu nhỏ chèn ngay sau tiêu đề tin. Không chốt cỡ thì nó ăn theo quy tắc ảnh
    chung của trang và phình to bằng cả ảnh minh hoạ, đẩy vỡ dòng tiêu đề.
    ================================================================================================ */
img[src*="iconnew"] {
    display: inline-block;
    width: auto !important;
    max-width: 30px !important;
    vertical-align: middle;
    margin-left: 4px;
    max-height: 16px !important;
}

/*  🔴 TIÊU ĐỀ HERO: TRẢ HUY HIỆU VỀ CUỐI DÒNG CHỮ (user báo 28/09/2026)
    ------------------------------------------------------------------------------------------------
    Huy hiệu nay nằm BÊN TRONG thẻ <a> tiêu đề (HtmlBuild.TagAwithImgNew). Nhưng thẻ tiêu đề tin lớn
    của Sở Hà Nội mang thêm lớp Bootstrap `d-xl-flex`, tức từ khổ >= 1200px nó thành `display:flex`
    (có !important). Khi đó chữ và huy hiệu thành HAI Ô FLEX xếp cạnh nhau ⇒ huy hiệu bị đẩy hẳn sang
    mép phải, ngang dòng đầu, tách rời chữ cuối. Đo 28/09 ở khổ 1400px: ảnh lệch x=555 y=0 so với
    khung tiêu đề; sau khi ép về hộp cắt dòng thì còn x=380 y=43 — đúng cuối dòng cạnh chữ "Hà Nội",
    và khung tiêu đề GIỮ NGUYÊN 585x65.

    Chỉ ép cho tiêu đề CÓ huy hiệu, nên tiêu đề thường không đổi gì.
    Đặt ở tệp DÙNG CHUNG này (không phải qi-hanoi-rp.css) vì bản trang chủ KHÔNG-rp
    (HomeGdHn2 -> _MasterAllDesktop) không nạp tệp rp, mà cả hai bản đều nạp tệp này.
    Độ ưu tiên (0,3,1) + !important nên thắng chắc `.d-xl-flex` (0,1,0) của Bootstrap. */
a.d-xl-flex.top-title:has(> .qiiconnew) {
    display: -webkit-box !important;
}

/*  📌 MENU VIẾT HOA ĐỒNG LOẠT (user chốt 01/10/2026)
    ------------------------------------------------------------------------------------------------
    Đơn vị tự nhập tên chuyên mục nên kiểu chữ loạn: ngay trong một cột menu ở
    `thpttranvangiau.hcm.edu.vn` đã có "Lịch công tác tuần", "Giới thiệu" nằm cạnh "HOẠT ĐỘNG
    CÂU LẠC BỘ - ĐỘI - NHÓM", "CỔNG NỘI BỘ". Tên nằm trong CSDL của 2.159 đơn vị nên không sửa
    dữ liệu được — chuẩn hoá bằng CSS, dữ liệu gốc giữ nguyên.

    ĐÃ CÓ SẴN, không đụng tới:
      · menu ngang cấp 1 (`a.nav-link` trong `ul.navbar-nav`) — các mẫu đã viết hoa từ trước;
      · `cssmenudoc.css` cũng viết hoa `ul.qimenudoc li a`, nhưng tệp đó **chỉ được một số trang
        nạp** — đo trên trang chuyên mục `/to-chuyen-mon/c/42162` thấy 310 mục đều `none`.
    Tệp NÀY thì mọi vỏ desktop/rp đều nạp, nên đặt luật ở đây mới phủ đủ.

    🔴 PHẠM VI HẸP — chỉ ba khối ĐIỀU HƯỚNG, KHÔNG đụng thân bài:
      ① `ul.qimenudoc li a`                      — menu dọc bên trái (và menu dọc trên điện thoại);
      ② `nav.navbar .navbar-nav .dropdown-item`   — mục con buông xuống của menu ngang;
      ③ `.megamenu a.nav-link2`                   — bảng menu 9 chấm.
    Cố ý bắt `.dropdown-item` **bên trong `nav.navbar`** chứ không bắt trống: lớp Bootstrap này
    còn dùng cho danh sách chuyên mục con in giữa THÂN TRANG và cho bộ chọn ngôn ngữ — những chỗ
    đó là nội dung, không phải menu.

    Dùng `!important` vì mục tiêu là ĐỒNG BỘ trên cả 46 bộ giao diện: mẫu nào đang tự đặt
    `text-transform` khác cho menu của mình thì luật này phải thắng.

    Đo sau khi áp tại `thpttranvangiau.hcm.edu.vn`: 310 + 275 + 250 mục đều thành `uppercase`,
    **0 mục bị tràn ngang**, bề rộng cột menu giữ nguyên 278px.  */
body ul.qimenudoc li a,
body nav.navbar .navbar-nav .dropdown-item,
body .megamenu a.nav-link2 {
    text-transform: uppercase !important;
}

/*  CỠ CHỮ NHỎ LẠI MỘT BẬC cho cân với chữ hoa (user chốt 01/10/2026).
    Chữ hoa trông đậy hơn chữ thường ở cùng cỡ, nên sau khi viết hoa đồng loạt thì menu trông nặng.
      · cột menu dọc trái : 14,5px -> 13,5px  (sửa ngay tại luật `#sidebar .qimenudoc` phía trên)
      · mục con menu ngang: 16px   -> 14,5px  (16px là cỡ chữ thân trang, quá to cho menu)
      · bảng menu 9 chấm   : 13,5px -> 13px                                                        */
body nav.navbar .navbar-nav .dropdown-item {
    font-size: 14.5px !important;
}

body .megamenu a.nav-link2 {
    font-size: 13px !important;
}

/*  🔴 CỘT QUẢNG CÁO HAI BÊN LÀM TRANG KÉO NGANG 34px (tự rà 01/10/2026)
    ------------------------------------------------------------------------------------------------
    Đo trên `thpttranvangiau.hcm.edu.vn` ở khổ 1366px — khổ máy tính xách tay phổ biến nhất:

        UL  [1233..1358] rộng 125px   padding-left: 32px   <- MẶC ĐỊNH của trình duyệt
        LI  [1265..1358] rộng  93px
        A   [1265..1390] rộng 125px   <- Ảnh đúng khổ nhưng đã bị đẩy sang phải 32px
        IMG [1265..1390] rộng 125px

    Thẻ `<ul>` trong `Components/QuangCao2BenMep` chỉ khai `list-style:none`, KHÔNG bỏ
    `padding-left`, nên trình duyệt vẫn giữ 32px đệm trái dành cho dấu đầu dòng. Ảnh băng rôn
    125px bị đẩy ra khỏi cột 32px ⇒ cả trang có thanh cuộn NGANG 34px ở MỌI trang.

    ⚠️ Đợt 13/08/2026 đã ẩn cột phải dưới 1320px và kết luận "từ 1366px trở lên nằm gọn" —
    kết luận đó đo THANH BỌC (`#divAdRight`, mép phải 1358, còn dư) chứ không đo THẺ BÊN
    TRONG (mép phải 1390). Bài học: đo tràn ngang phải soi tới thẻ LÁ, không dừng ở khung.

    Sau khi vá: tràn ngang 34px -> 2px.  */
#divAdLeft ul,
#divAdRight ul {
    padding-left: 0 !important;
    margin: 0 !important;
}

/*  =====================================================================================================
    ĐỢT RÀ SOÁT GIAO DIỆN 01/10/2026 — user: "check xem còn chỗ nào chưa đẹp nữa không?"
    Năm mục dưới đây user đã duyệt ("làm từ 1 đến 5").
    ===================================================================================================== */

/*  ① HAI CỘT BĂNG RÔN ĐẶT KHÔNG ĐỐI XỨNG ⇒ CỘT TRÁI BỊ CẮT MẤT HƠN NỬA
    -----------------------------------------------------------------------------------------------------
    `qistyleall.css` đặt `.adsLeft{left:-175px}` và `.adsRight{left:1125px}` — cả hai tính theo khung
    nội dung 1140px. Cột rộng 125px, nên:
        · bên TRÁI hở 50px  (175 − 125)   ⇒ cần tới 175px chỗ trống mới đủ
        · bên PHẢI ĐÈ 15px (1125 − 1140) lên chính khung nội dung
    Đo trên `thpttranvangiau.hcm.edu.vn`: khổ 1366px cột trái mất **67/125px**, khổ 1440px mất 25px.

    Nay đặt ĐỐI XỨNG, cách khung nội dung đúng 10px mỗi bên:
        trái  −135px = −(125 + 10)      phải  1150px = 1140 + 10
    Và ẨN CẢ HAI khi không đủ chỗ: cần 135px mỗi bên ⇒ bề ngang tối thiểu 1140 + 270 = 1410px;
    lấy mốc 1440px cho chắc (trừ thanh cuộn). Thà không hiện còn hơn hiện một nửa băng rôn.

    🔑 `left` ở đây tính theo KHUNG NỘI DUNG chứ không theo màn hình: plugin sticky chụp lạy toạ
    độ lúc đó rồi mới ghim `position:fixed`, nên sửa trị số CSS này là đủ, không phải sửa JS.     */
body .ads-wrapper.adsLeft { left: -135px; }
body .ads-wrapper.adsRight { left: 1150px; }

@media (max-width: 1439.98px) {
    body #qctrai,
    body #qcphai,
    body .ads-wrapper.adsLeft,
    body .ads-wrapper.adsRight {
        display: none !important;
    }
}

/*  ② DANH SÁCH TIN — CÓ ĐƯỜNG PHÂN CÁCH, DÒNG NGÀY THÁNG NHẠT HƠN
    -----------------------------------------------------------------------------------------------------
    Mỗi tin là một `li` trong `ul.item_hint`, trước đây KHÔNG viền, KHÔNG lề, KHÔNG đệm ⇒ các tin
    dính liền một khối, mắt không biết tin nào hết tin nào bắt đầu.

    Dòng ngày tháng + chuyên mục trước đây 15px, màu đen đậm **y hệt thân bài** nên không có thứ
    bậc; nay 13px và dùng màu `--m-muted` (#5c6b7e, tương phản ~5,7 trên nền trắng — vẫn đạt AA).  */
body ul.item_hint > li {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--m-border);
}

body ul.item_hint > li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

body .date_and_cate {
    font-size: 13px;
    color: var(--m-muted);
    margin-bottom: 6px;
}

body .date_and_cate > span { color: inherit; }

/*  ③ VÙNG BẤM TRÊN ĐIỆN THOẠI — ĐỦ 44px
    -----------------------------------------------------------------------------------------------------
    Chuẩn mobile của chính dự án là 44px, nhưng đo ở 375px thấy "Tải File đính kèm" chỉ cao **17px**
    (14 liên kết), mục bảng chuyên mục con 40px (bản máy tính dùng `td`, bản điện thoại dùng `div.col-sm` — nên bỏ `td` khỏi bộ chọn), đường dẫn 23px.

    Dùng `min-height` + `inline-flex` cho liên kết tệp (nó đứng riêng một dòng nên cao lên không ảnh
    hưởng ai), còn đường dẫn thì nới bằng đệm DỌC để vùng bấm to ra mà chữ không xê dịch.      */
@media (max-width: 767.98px) {
    body a.Filedinhkem {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    body .qitopsubmenu > a.dropdown-item {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    body .breadcrumb_list a { display: inline-block; padding: 11px 0; }

    /*  Nút chuyển trang 34×34px — nhỏ hơn đầu ngón tay. Cho XUỐNG DÒNG vì 10 nút × 44px = 440px
        không vừa bề ngang 355px; thành hai hàng căn giữa, cao 88px, KHÔNG tràn ngang.  */
    body ul.pagination { flex-wrap: wrap; justify-content: center; }

    body ul.pagination > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 6px 8px;
    }
}

/*  ⑤ BẢNG CHUYÊN MỤC CON GIỮA THÂN TRANG CŨNG VIẾT HOA
    -----------------------------------------------------------------------------------------------------
    Đợt trước cố ý bỏ qua bảng này vì nó nằm trong vùng nội dung. Nhưng đây thực chất là danh
    sách ĐIỀU HƯỚNG sang chuyên mục con, và nó lẫn hoa–thường ngay cạnh menu vừa chuẩn hoá
    ("TỔ GDKTPL - Mỹ thuật", "Tổ HOẠT ĐỘNG TRẢI NGHIỆM"). Bắt ĐÚNG `.qitopsubmenu > a` chứ không
    bắt `.dropdown-item` trống, để không chạm vào chỗ khác dùng chung lớp Bootstrap này.          */
body .qitopsubmenu > a.dropdown-item {
    text-transform: uppercase !important;
}

/*  🔴 MỞ CHUYÊN MỤC CON ⇒ MỤC ĐẦU THỌT RA NGOÀI MÉP TRÁI CỘT MENU (user báo 01/10/2026)
    -----------------------------------------------------------------------------------------------------
    Bấm mũi tên ở một mục menu dọc ⇒ danh sách con bung ra, và dòng đầu tiên (dòng nhắc lại tên
    chuyên mục cha) **thò hẳn ra ngoài cột menu**. Đo trên trang chủ `thpttranvangiau.hcm.edu.vn`:

        cột menu   bắt đầu ở  236px
        a.parentNote bắt đầu ở  **221px**   ← thò ra 15px

    Thủ phạm là một lề âm DI SẢN trong `cssmenudoc.css`:
        a.parentNote.menucap0       { margin-left: -10px }
        a.parentNote.menuparentcap0 { margin-left: -15px }
    Thời WebForms, thẻ `<ul>` con còn giữ đệm mặc định của trình duyệt nên lề âm đó kéo dòng nhắc
    lại về thẳng hàng với mục cha. Nay `ul.qiitems` mang sẵn `list-unstyled` (đệm 0) nên lề âm
    không còn gì để bù — nó đẩy thẳng mục ra khỏi cột.

    Nhân tiện TRẢ LẠI THỤT LỀ THEO CẤP: luật cũ `.menucap0 a{padding-left:30px}` thua luật đệm chung
    của mục menu (cả hai đều `!important`, luật chung cụ thể hơn) nên mọi cấp đã bị dồn về cùng
    một mức từ lâu, nhìn không ra cây. Nay thụt đều 14px mỗi cấp: 8 → 22 → 36 → 50px.
    Dòng nhắc lại tên cha căn THẲNG HÀNG với chính mục cha (đóng vai tiêu đề của nhóm).

    Đo sau khi vá: hộp mục đầu 221 → **236px** (bằng đúng mép cột), chữ của nó 244px — trùng
    chữ mục cha; mục con thường 258px. Không tràn ngang.                                          */
body .qimenudoc .qiitems > li > a.parentNote.menucap0,
body .qimenudoc .qiitems > li > a.parentNote.menuparentcap0 {
    margin-left: 0 !important;
}

body .qimenudoc .qiitems.menucap0 > li > a { padding-left: 22px !important; }
body .qimenudoc .qiitems.menucap1 > li > a { padding-left: 36px !important; }
body .qimenudoc .qiitems.menucap2 > li > a { padding-left: 50px !important; }

/*  Dòng đầu nhóm nay là "Xem toàn bộ" (không còn lặp tên chuyên mục cha — user chốt 01/10/2026),
    nên nó đóng vai MỘT MỤC CON chứ không còn là tiêu đề nhóm ⇒ thụt lề BẰNG các mục con cùng cấp.  */
body .qimenudoc .qiitems > li > a.parentNote.menuparentcap0 { padding-left: 22px !important; }
body .qimenudoc .qiitems > li > a.parentNote.menuparentcap1 { padding-left: 36px !important; }
body .qimenudoc .qiitems > li > a.parentNote.menuparentcap2 { padding-left: 50px !important; }

/*  MỤC CHA ĐANG MỞ SÁNG LÊN GIỐNG LÚC RÊ CHUỘT (user chốt 01/10/2026)
    -----------------------------------------------------------------------------------------------------
    Trước đây bấm mở một nhóm chuyên mục thì mục cha trở lại màu thường ngay khi rời chuột —
    danh sách con bung ra mà không biết nó thuộc mục nào. Nay mục cha đang mở giữ ĐÚNG BA dấu
    hiệu của trạng thái rê chuột: chữ màu thương hiệu, nền `--m-surface-2`, thanh màu bên trái.

    Nhận biết bằng `:has(> ul.qiitems.show)` — lớp `show` do Bootstrap collapse đặt khi mở.
    Bắt thêm `.collapsing` để màu đổi NGAY lúc bắt đầu trượt ra, không chở hết hiệu ứng.
    `aria-expanded` KHÔNG dùng được: mã sinh ra để sẵn `true` cho cả 61 mục dù chưa mở cái nào.

    🔴 PHẢI có biến thể kèm `#sidebar`: luật màu chữ sẵn có là `body #sidebar .qimenudoc a`
    (độ ưu tiên 0-1-0-3, có `!important`). Luật chỉ gồm lớp (0-0-3-2) THUA nó dù cũng
    `!important` — đã đo: nền đổi nhưng chữ vẫn đen. Giữ luôn biến thể không `#sidebar` cho
    những vỏ dựng menu dọc ngoài thẻ đó.

    Đo tại `thpttranvangiau.hcm.edu.vn`: mục đang mở chữ #186BCC · nền #f6f8fb · thanh trái #186BCC
    (trùng khớp trạng thái hover); bấm đóng lại thì trả về chữ #14202e, nền trong suốt.          */
body #sidebar .qimenudoc .qilist:has(> ul.qiitems.show) > a,
body #sidebar .qimenudoc .qilist:has(> ul.qiitems.collapsing) > a,
body .qimenudoc .qilist:has(> ul.qiitems.show) > a,
body .qimenudoc .qilist:has(> ul.qiitems.collapsing) > a {
    background: var(--m-surface-2) !important;
    border-left-color: var(--m-primary, var(--m-accent)) !important;
    color: var(--m-primary) !important;
}