/* ================================================================================
   qi-home-rp.css — MẪU TRANG CHỦ RESPONSIVE (một markup cho máy tính / máy tính bảng / điện thoại)
   ================================================================================
   Dùng cho các trang chủ bản mới có hậu tố "rp" (vd /homegd1rp). Trang chủ CŨ (/homegd1…) KHÔNG
   nạp tệp này và không đổi gì — bản cũ vẫn chuyển hướng sang giao diện mobile/tab như trước.

   Tham khảo bố cục báo Dân trí (đo trực tiếp 2026-08-04): vùng nội dung 1128 px, lưới
   `minmax(0,1fr) 554px 300px` khoảng cách 20 px, ảnh tin tỉ lệ 3:2, tiêu đề tin 16/22 px đậm 600,
   tin lớn 24/33 px, chữ phụ 14 px. Các mốc ngắt của họ: 1280 · 1158 · 1128 · 1024 · 991 · 480.

   NGUYÊN TẮC Ở ĐÂY:
   · Mọi màu lấy từ biến theme của đơn vị (--mau-md do ThietLapMaMau sinh) nên đổi đơn vị là đổi màu,
     không cần sửa CSS. Có giá trị dự phòng cho đơn vị chưa cấu hình màu.
   · Chỉ dùng lớp tiền tố `qirp-` để không đụng bất kỳ lớp nào của Bootstrap hay skin cũ.
   · Dùng `aspect-ratio` + `object-fit: cover` thay cho `embed-responsive` của Bootstrap 4.
   · Lưới bằng CSS Grid, KHÔNG dùng cột Bootstrap: nhờ vậy một markup chạy cho cả 3 thiết bị,
     thứ tự khối đổi được bằng `order` khi xuống một cột.
   ================================================================================ */

:root {
    --qirp-rong: 1128px;      /* bề rộng vùng nội dung (Dân trí: 1128) */
    /* Khoảng cách ĐO TỪ BẢN DESKTOP GỐC (/homegd147 ở 1366px): khe giữa viền các khối của hai cột
       cạnh nhau = 10px (cả trái↔giữa và giữa↔phải), khe DỌC giữa các khối trong một cột = 10px.
       Trước đây để 20px/28px theo mẫu Dân trí ⇒ trông rời rạc, lệch hẳn bản cũ
       (user 2026-08-04: "căn lề giữa các khối của bản desktop khá lớn"). */
    --qirp-khe: 10px;         /* khoảng cách giữa các cột */
    --qirp-khe-doc: 10px;     /* khoảng cách dọc giữa các khối */
    --qirp-cot-trai: 240px;
    --qirp-cot-phai: 300px;

    /* ---- BỘ CHỮ + MÀU: đo trực tiếp trên dantri.com.vn (2026-08-04) ----
       body 14px/19.6 màu #4d4d4d · tiêu đề màu #000 đậm 600 giãn chữ -0.4%
       (lớn 24/33 · thường 16/22 · nhỏ 15/20.6) · thời gian #666 13px/14 · đường kẻ #e3e5e8 */
    /*  🔤 BỘ CHỮ = BỘ CHỮ CỦA ĐƠN VỊ (user chốt 2026-08-05: "bản rp cảm giác font chữ chưa ăn theo font
        cấu hình của đơn vị… ví dụ font đang dùng của Hà Nội là Roboto").
        Trước đây ghim cứng **Inter** (bộ chữ của Dân trí, chọn khi thân trang rp còn dùng thẻ tin kiểu Dân
        trí). Nay thân trang dùng ĐÚNG khối HTML của bản desktop, mà mỗi đơn vị có bộ chữ riêng trong CSDL
        (SiteConfig.FontCss/FontLink → ThemeStyles đã nạp sẵn) ⇒ đo trên /homegdhn2rp thấy vỏ + tiêu đề là
        **Roboto** nhưng vùng `.qirp` lại **Inter** — lệch ngay giữa trang.
        `inherit` để mọi thành phần rp ăn theo bộ chữ đơn vị; đơn vị không cấu hình thì vẫn nhận bộ chữ mặc
        định do `qifontdefault*.css` đặt trên body.  */
    --qirp-font: inherit;
    --qirp-chu: #000;             /* tiêu đề */
    --qirp-chu-thuong: #4d4d4d;   /* chữ nội dung, sapo */
    --qirp-chu-mo: #666;          /* thời gian, chú thích */
    --qirp-vien: #e3e5e8;
    --qirp-nen-nhat: #f2f3f5;
    --qirp-giancach: -0.01em;     /* ≈ -0.4% của Dân trí */
    --qirp-bo: 3px;
}

/* ---------- khung trang ---------- */
.qirp {
    max-width: var(--qirp-rong);
    margin: 0 auto;
    padding: 0 12px;
    font-family: var(--qirp-font);
    font-size: 14px;
    line-height: 1.4;
    color: var(--qirp-chu-thuong);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Bộ chữ của đơn vị (ThietLapMaMau sinh rule `*{font-family:…!important}`) sẽ đè lên đây, nên phải khai
   lại có !important — NHƯNG CHỈ cho các thành phần của mẫu mới.
   🔴 Trước đây dùng `.qirp *` (mọi thứ trong vùng nội dung) ⇒ ép luôn cả các KHỐI HTML DỰNG SẴN của hệ cũ
   (Tin mới nhất, Thông báo/Thư mời, Văn bản, khối chức năng…) ⇒ chúng mất bộ chữ và độ đậm gốc, trông
   khác bản desktop (đo được: desktop `.listitem a` = Cuprum 700, bản rp ra Inter 400 — user phát hiện
   trên iPad Mini 2026-08-04). Nay khối cũ giữ nguyên kiểu của bộ vỏ đơn vị. */
.qirp-tin, .qirp-tin *,
.qirp-tieude, .qirp-tieude *,
.qirp-tit, .qirp-sapo, .qirp-ngay,
.qirp-tieudiem-ben { font-family: var(--qirp-font) !important; }

.qirp-luoi {
    display: grid;
    grid-template-columns: var(--qirp-cot-trai) minmax(0, 1fr) var(--qirp-cot-phai);
    gap: var(--qirp-khe);
    align-items: start;
}

/* Đơn vị KHÔNG có menu dọc và không có chuyên mục/khối chức năng cột trái (vd Sở TP.HCM): trang
   không render <aside class="qirp-trai"> nữa và lưới chỉ còn HAI cột. Trước đây cột trái rỗng vẫn
   chiếm 240 px ⇒ để lại dải TRẮNG cạnh cột tin (user phát hiện). Dùng `fit-content` thì hết dải
   trắng nhưng vẫn dư đúng một khoảng cách 20 px, nên quyết định ở máy chủ là gọn nhất. */
.qirp-luoi--khong-trai {
    grid-template-columns: minmax(0, 1fr) var(--qirp-cot-phai);
}

.qirp-luoi--khong-trai .qirp-giua { grid-column: 1; grid-row: 1; border-left: 0; padding-left: 0; }
.qirp-luoi--khong-trai .qirp-phai { grid-column: 2; grid-row: 1; }

/* 🔑 Thứ tự trong DOM là GIỮA → PHẢI → TRÁI: cột nội dung chính đứng đầu mã nguồn (tốt cho SEO và
   khi xuống một cột thì tin chính lên trên, không phải nhảy bằng `order`). Vì vậy trên màn hình rộng
   phải chỉ ĐÍCH DANH ô lưới cho từng cột, nếu không grid sẽ xếp theo DOM và cột giữa rơi vào
   track 240 px của cột trái (đã gặp: cột giữa co còn 240 px). */
/* 🔴 PHẢI khai CẢ `grid-row`, không chỉ `grid-column`: thứ tự trong DOM là GIỮA → PHẢI → TRÁI, nên khi
   chỉ ghim cột, con trỏ tự động của grid đã đi qua hết dòng 1 lúc tới lượt cột TRÁI ⇒ nó rơi xuống
   DÒNG 2, nằm dưới cột giữa. Hậu quả đo được: cột trái bắt đầu ở top 20.285 px — trên trang chỉ thấy
   một dải trắng khổng lồ rồi khối DANH MỤC nằm tít dưới cùng (user phát hiện 2026-08-04). */
.qirp-trai { grid-column: 1; grid-row: 1; }
.qirp-giua { grid-column: 2; grid-row: 1; }
.qirp-phai { grid-column: 3; grid-row: 1; }

/* Cột giữa: KHÔNG đệm, KHÔNG vạch phân cách.
   Bản đầu có `padding: 0 var(--qirp-khe)` + hai vạch dọc như trang chủ Dân trí; nhưng khối tin nay dùng
   đúng HTML bản desktop (mỗi khối đã có khung viền riêng) nên vạch dọc thành dư, còn phần đệm cộng thêm
   với khe lưới làm khoảng trắng giữa các cột **gấp đôi** bản cũ (20+20 = 40px so với 10px — chính chỗ
   user khoanh đỏ 2026-08-04). */
.qirp-giua { min-width: 0; }

.qirp-trai, .qirp-phai { min-width: 0; }

/* mỗi khối trong cột dọc */
.qirp-khoi + .qirp-khoi { margin-top: var(--qirp-khoi-cach, var(--qirp-khe-doc)); }

/* ---------- tiêu đề khối ---------- */
.qirp-tieude {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mau-md, #0071a6);
}

.qirp-tieude > a, .qirp-tieude > span {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--qirp-giancach);
    text-transform: uppercase;
    color: var(--mau-md, #0071a6);
    text-decoration: none;
}

.qirp-tieude > a:hover { text-decoration: underline; }

.qirp-tieude .qirp-xemtiep {
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    color: var(--qirp-chu-mo);
    white-space: nowrap;
}

/* ---------- thẻ tin ---------- */
.qirp-tin { display: block; }

.qirp-tin a { color: inherit; text-decoration: none; transition: color .15s ease; }
.qirp-tin a:hover { color: var(--mau-md, #0071a6); }

/* mục "Trang chủ" (biểu tượng nhà) đứng đầu thanh mục, như thanh mục của Dân trí */
/* biểu tượng trang chủ trong thanh mục: quy tắc nằm ở qi-menu-mb.css (dùng chung) */

.qirp-anh {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--qirp-bo);
    background: var(--qirp-nen-nhat);
}

.qirp-anh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.qirp-tin:hover .qirp-anh img { transform: scale(1.03); }

.qirp-tit {
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: var(--qirp-giancach);
    color: var(--qirp-chu);
    text-wrap: pretty;
    /* cắt 3 dòng cho đều khối, không cần tính số ký tự ở máy chủ */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qirp-tit a { color: inherit; }

.qirp-sapo {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 19.6px;
    color: var(--qirp-chu-thuong);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qirp-ngay {
    margin-top: 6px;
    font-size: 13px;
    line-height: 14px;
    letter-spacing: .01em;
    color: var(--qirp-chu-mo);
}

/* tin lớn (đầu khối nổi bật) */
.qirp-tin--lon .qirp-tit { font-size: 24px; line-height: 33px; -webkit-line-clamp: 3; text-wrap: balance; }
.qirp-tin--lon .qirp-sapo { -webkit-line-clamp: 3; }

/* tin dạng hàng ngang: ảnh bên phải như cột phải của Dân trí */
.qirp-tin--ngang { display: flex; gap: 12px; align-items: flex-start; }
.qirp-tin--ngang .qirp-anh { width: 120px; flex: 0 0 120px; }
.qirp-tin--ngang .qirp-tit { margin-top: 0; font-size: 15px; line-height: 20px; -webkit-line-clamp: 3; }
.qirp-tin--ngang .qirp-noidung { min-width: 0; flex: 1 1 auto; }

/* Tin chỉ có chữ.
   TRƯỚC ĐÂY có thêm dấu tròn 5px ở đầu dòng cho giống danh sách của Dân trí, nhưng bản desktop gốc
   KHÔNG có dấu nào (li của .qiContainer_border đặt list-style:none, chỉ có tiêu đề + ngày) ⇒ bỏ đi
   theo yêu cầu user 2026-08-04 ("còn thừa dấu . của thẻ li"). */
.qirp-tin--chu .qirp-tit {
    font-size: 15px;
    line-height: 21px;
}

/* danh sách tin trong một khối */
.qirp-ds { display: flex; flex-direction: column; gap: 14px; }
/* Lưới ô có ảnh: 3 cột khi cột giữa rộng, tự rút về 2 rồi 1 khi hẹp.
   Trước đây ghim cứng 3 cột nên ở bố cục hai cột (cột giữa ~500px) mỗi ô chỉ còn ~160px — ảnh bé, tiêu
   đề gãy dòng liên tục, trông chật (user 2026-08-04: "giao diện nhìn xấu"). */
.qirp-ds--chia { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.qirp-ds--doi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* đường kẻ mảnh giữa các tin dạng hàng ngang */
.qirp-ds > .qirp-tin--ngang + .qirp-tin--ngang,
.qirp-ds > .qirp-tin--chu + .qirp-tin--chu { border-top: 1px solid var(--qirp-vien); padding-top: 14px; }

/* ---------- SLIDESHOW TIÊU ĐIỂM (Swiper 8) ----------
   Dựng theo ĐÚNG bản desktop gốc — số đo lấy từ Js/home/slidehome/initslider.js (amazingslider skin
   "Events"), xem giải thích đầy đủ trong Pages/Shared/Partials/_TieuDiemRp.cshtml:
     ảnh 669×345 (≈1,94:1) phủ kín · dải chú thích #333 mờ 60% dính đáy ảnh · dải ảnh nhỏ 185×100 viền
     trắng 2px mờ 0.8 cách nhau 8px · mũi tên hiện khi trỏ chuột · thanh thời gian 2px trắng ở đáy.
   Khác bản gốc có chủ ý: chữ to hơn (17/13 px thay 14/12 px) và dưới 576px dùng tỉ lệ 3:2. */
.qirp-tieudiem { display: block; }

.qirp-slide { width: 100%; overflow: hidden; border-radius: var(--qirp-bo); background: #000; }

.qirp-slide-anh {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 669 / 345;   /* initslider.js: width 669 · height 345 */
    overflow: hidden;
}

.qirp-slide-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dải chú thích dính đáy ảnh — bản gốc: textbgcss `background-color:#333333; opacity:0.6`,
   textcss `padding:12px`, textpositionstatic "bottom". Ở đây dùng rgba (cùng kết quả nhìn) để chữ
   không bị mờ theo nền như khi đặt opacity cho cả khối. */
.qirp-slide-chu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
    background: rgba(51, 51, 51, .6);
    color: #fff;
    font-family: var(--qirp-font);
    text-align: left;
}

.qirp-slide-tit {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: var(--qirp-giancach);
    color: #fff;
}

/* bản gốc: descriptioncss `margin-top:4px; font:12px …; color:#fff` */
.qirp-slide-mota {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: rgba(255, 255, 255, .92);
}

/* Nút trái/phải: dùng khung của Swiper nhưng vẽ LẠI mũi tên.
   Lý do: Swiper.css trong repo đặt `content:'next'/'prev'` với bộ chữ biểu tượng `swiper-icons`, mà
   tệp này KHÔNG kèm @font-face của bộ đó ⇒ để nguyên sẽ hiện đúng chữ "next"/"prev". Vẽ mũi tên bằng
   viền CSS nên không phụ thuộc bộ chữ nào (Font Awesome ở đây có nhiều phiên bản, không chắc chắn). */
.qirp-slide .qirp-slide-nut {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    padding: 0;
    /* bản gốc arrowstyle "mouseover": chỉ hiện khi trỏ chuột vào khung ảnh */
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease;
}

.qirp-slide:hover .qirp-slide-nut, .qirp-slide-nut:focus-visible { opacity: 1; }
/* thiết bị chạm không có trạng thái hover ⇒ luôn hiện, nếu không sẽ không có cách lùi tin */
@media (hover: none) {
    .qirp-slide .qirp-slide-nut { opacity: 1; }
}

.qirp-slide .qirp-slide-nut:after {
    content: "" !important;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.qirp-slide .swiper-button-next:after { transform: rotate(45deg); margin-left: -3px; }
.qirp-slide .swiper-button-prev:after { transform: rotate(-135deg); margin-right: -3px; }
.qirp-slide .qirp-slide-nut:hover { background: var(--mau-md, #0071a6); }

/* Thanh thời gian 2px ở đáy ảnh (bản gốc showtimer/timerheight:2/timercolor #fff/timeropacity .6).
   Swiper 8 không có đồng hồ đếm ngược nên dùng pagination kiểu "progressbar" — cùng vị trí, cùng độ
   dày, chạy theo tin đang xem thay vì theo thời gian còn lại. */
.qirp-slide .qirp-slide-timer {
    top: auto;
    bottom: 0;
    height: 2px;
    background: rgba(255, 255, 255, .25);
}

.qirp-slide .qirp-slide-timer .swiper-pagination-progressbar-fill { background: rgba(255, 255, 255, .85); }

/* ---------- dải ảnh nhỏ (bản gốc: navstyle "thumbnails" ở đáy, kèm TIÊU ĐỀ) ----------
   Đo thật trên /homegd147: mỗi ô 181×186 = ảnh 181×96 + chữ 181×90; chữ theo navthumbtitlecss
   `bold 12px/16 #004175, padding 10px 4px, căn trái`. */
.qirp-slide-thumb { width: 100%; margin-top: 8px; }              /* navspacing 8 */
.qirp-slide-thumb .swiper-slide {
    width: 185px;                                                 /* navwidth 185 */
    height: auto;
    opacity: .8;                                                  /* navopacity 0.8 */
    border: 2px solid #fff;                                       /* navborder 2 · navbordercolor #fff */
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}

.qirp-slide-thumb .swiper-slide img { width: 100%; height: 96px; object-fit: cover; display: block; }

/*  🔴 CHIỀU CAO PHẢI LÀ BỘI SỐ CỦA `line-height`, KÈM `-webkit-line-clamp`.
    Trước đây: cao 90px − đệm 20px = 70px chỗ chữ, mà mỗi dòng 16px ⇒ 4,375 dòng ⇒ dòng thứ 5 bị
    CẮT NGANG THÂN CHỮ, còn lại mấy vạch xám mảnh dưới ô ảnh nhỏ — đúng thứ user gọi là
    "thừa gạch" (báo 2026-08-06 trên /homehcmrp; bản điện thoại còn rõ hơn: 50px chỗ chữ / 15px
    = 3,33 dòng). Nay 4 dòng × 16 + đệm = 84px và clamp đúng 4 dòng ⇒ không còn dòng cụt. */
.qirp-slide-thumb .qirp-thumb-tit {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    /*  KHÔNG có đệm DƯỚI: `overflow:hidden` cắt ở mép PADDING, nên còn đệm dưới là dòng kế tiếp
        vẫn ló vào đúng vùng đệm đó thành vạch mảnh. Cao = đệm trên 10 + 4 dòng × 16 = 74px.
        (`-webkit-line-clamp` KHÔNG dùng được ở đây: `.swiper-slide` là flex container nên thẻ con bị
        blockify, `display:-webkit-box` biến thành `flow-root` ⇒ clamp mất tác dụng.) */
    height: 74px;
    overflow: hidden;
    padding: 10px 4px 0;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    /*  MÀU CHỮ = ĐÚNG BẢN CŨ (user 2026-08-07: "chỉnh màu chữ slide tin tức giống trang homehcm").
        `initslider.js` khai navthumbtitlecss màu #004175, NHƯNG bộ skin dùng chung của amazingslider
        (`/js/home/slidehome/style.css` dòng 2851) đè lại bằng
        `.amazingslider-nav-thumbnail-tite-0 > a { color:#1c1c1c !important }` — mà tệp skin đó do MỌI
        mẫu có slideshow nạp ⇒ #1c1c1c mới là màu người dùng thật sự nhìn thấy ở bản cũ.
        (Giữ nguyên 12px/16px của bản rp: chiều cao ô 74px = đệm 10 + 4 dòng × 16 đã tính theo số này.) */
    color: #1c1c1c;
}

/*  Ô ảnh nhỏ ĐANG CHỌN: chỉ sáng lên, KHÔNG viền màu (user chốt 2026-08-11 — Sở GD&ĐT TP.HCM nhắn
    "bỏ viền đỏ đi anh").
    Trước đây tô `border-color: var(--mau-md)` = màu thương hiệu của đơn vị, theo tham số
    `navselectedbordercolor` của amazingslider bản cũ. Đơn vị dùng tông ĐỎ (hcmedu #da251c) thì ô đang
    chọn viền đỏ chói giữa dải ảnh trắng, nhìn như đang báo lỗi.
    🔑 VẪN GIỮ `border: 2px solid #fff` của quy tắc gốc — bỏ hẳn đường viền thì ô hụt 4px bề ngang và
    cả dải ảnh nhỏ xô đi mỗi lần đổi ảnh. Nay viền luôn trắng, trùng nền, coi như không có.
    Dấu hiệu "đang chọn" còn lại là độ mờ: ô khác 0.8, ô đang chọn 1. */
.qirp-slide-thumb .swiper-slide-thumb-active { opacity: 1; }

@media (max-width: 575.98px) {
    /* 1,94:1 trên máy 390px chỉ cao 201px, quá dẹt ⇒ dùng 3:2 cho điện thoại */
    .qirp-slide-anh { aspect-ratio: 3 / 2; }
    .qirp-slide-tit { font-size: 15px; line-height: 21px; }
    .qirp-slide-mota { display: none; }        /* chỗ hẹp: giữ tiêu đề cho rõ, như bản mobile cũ */
    .qirp-slide .qirp-slide-nut { width: 28px; height: 28px; margin-top: -14px; }
    /* điện thoại: thu ô ảnh nhỏ nhưng VẪN giữ tiêu đề (3 dòng) như bản desktop */
    .qirp-slide-thumb .swiper-slide { width: 140px; }
    .qirp-slide-thumb .swiper-slide img { height: 76px; }
    /* 3 dòng × 15px + đệm 12px = 57px (xem ghi chú ở rule gốc: cao phải là bội số của line-height,
       nếu không dòng cuối bị cắt ngang thành vạch xám). */
    .qirp-slide-thumb .qirp-thumb-tit {
        height: 51px;              /* đệm trên 6 + 3 dòng × 15 = 51, KHÔNG đệm dưới */
        padding: 6px 4px 0;
        line-height: 15px;
        font-size: 11.5px;
        -webkit-line-clamp: 3;
    }
}

/* ---------- khi đang dùng VỎ MOBILE (thanh công cụ cố định của /homemb) ----------
   .snap-content của bản mobile được đẩy xuống dưới thanh công cụ; trang chủ mobile cũ đặt 115 px vì
   có banner + menu cuộn + chữ chạy — bản responsive dùng đúng bộ đó nên giữ cùng số đo. */
.qirp-snap { top: 46px; }
.qirp-mb { padding: 10px; }
.qirp-mb .qirp-luoi { grid-template-columns: minmax(0, 1fr); }

/* ================================================================================
   TRÁO VỎ THEO BỀ RỘNG (chỉ áp cho trang chủ responsive)
   > 991 px : vỏ desktop của đơn vị          ≤ 991 px : vỏ gọn kiểu /homemb
   ================================================================================ */
/* Vỏ gọn gồm bốn khối: thanh công cụ + banner (.qirp-vo-mb), THANH MỤC (.qirp-menu-wrap), hàng chữ
   chạy (.qirp-hang-chuchay) và chân trang mobile (.qirp-vo-mb-chan). Hai khối giữa nằm TRỰC TIẾP trong
   body để thanh mục dính được đỉnh trang, nên phải tự ẩn/hiện chứ không nhờ thẻ bọc. */
.qirp-vo-mb, .qirp-vo-mb-chan, .qirp-menu-wrap, .qirp-hang-chuchay { display: none; }

/* ---------- chân trang bản mobile ----------
   Nhánh vỏ máy tính KHÔNG nạp bộ CSS mobile (bootstrap3.3.4 + qiStyleAllMobile + qicolordefaultmobile),
   nên `MobileFooter` render ra trơ trụi: chữ sát mép, logo quá to, dòng địa chỉ bị cắt (user so với
   bản thật 2026-08-04). Bù lại ĐÚNG các rule của bản thật:
     · qiStyleAllMobile.css:1544  → .qifootermobile { margin:0; margin-top:-10px; padding:10px }
     · qicolordefaultmobile.css:226 → nền theo màu đơn vị + `.qifootermobile *{color:#fff}`
     · `img-responsive` là lớp Bootstrap 3 (BS5 không có) → tự khai max-width/height.
   Bản mobile thật lấy màu qua qiColorSiteMobile.css theo --mau-md, ở đây dùng thẳng biến đó. */
.qirp-vo-mb-chan { padding-bottom: 8px; }

/* 🔑 Markup của chân trang có sẵn class Bootstrap `m-0 p-0` (= margin/padding 0 **!important**) nên
   padding khai thường bị vô hiệu; cộng thêm margin âm của `.row` (BS5: -12 px mỗi bên) ⇒ chữ tràn ra
   ngoài khối đỏ rồi bị `overflow-x: clip` cắt mất mấy ký tự đầu dòng (user phát hiện qua ảnh).
   Vì vậy phải khai !important cho padding và triệt margin âm của .row. */
.qirp-vo-mb-chan .qifootermobile {
    margin: 0 !important;
    margin-top: -10px !important;
    padding: 16px 14px 20px !important;
    background: var(--mau-md, #1565c0);
}

.qirp-vo-mb-chan .qifootermobile .container { width: 100%; max-width: 100%; padding: 0 !important; margin: 0; }
.qirp-vo-mb-chan .qifootermobile .row { margin: 0 !important; --bs-gutter-x: 0; }

.qirp-vo-mb-chan .qifootermobile * { color: #fff !important; }

.qirp-vo-mb-chan .qifootermobile p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; }
.qirp-vo-mb-chan .qifootermobile strong { display: inline-block; margin-bottom: 4px; font-size: 15px; line-height: 1.45; }

/* Bản thật căn TRÁI phần thông tin (col-sm-10 có class text-left) — giữ đúng, chỉ căn giữa logo. */
.qirp-vo-mb-chan .qifootermobile .infoFooter { text-align: left; }
.qirp-vo-mb-chan .qifootermobile .LogoBotoom { text-align: center; }

/* các cột Bootstrap trong markup cũ: xếp dọc, bỏ đệm cột */
.qirp-vo-mb-chan .qifootermobile [class*="col-"] { width: 100%; max-width: 100%; padding: 0; }

/* logo: bản cũ dùng lớp img-responsive của Bootstrap 3 */
.qirp-vo-mb-chan .LogoBotoom { margin-bottom: 10px; }
.qirp-vo-mb-chan .LogoBotoom img, .qirp-vo-mb-chan .qifootermobile img { max-width: 72px; height: auto; }

/* địa chỉ/email dài không được tràn ngang */
.qirp-vo-mb-chan .infoFooter { overflow-wrap: anywhere; }

/* thanh công cụ gọn: dựng lại đúng thanh của /homemb */
.qirp-vo-mb #toolbar {
    align-items: center;
    background: var(--mau-md, #0071a6);
    color: #fff;
    min-height: 46px;
}

.qirp-vo-mb #toolbar a, .qirp-vo-mb #toolbar i { color: #fff; }
.qirp-vo-mb .logomobile { max-width: 30px; }

.qirp-vo-mb .qirp-ten-donvi {
    display: block;
    font-size: clamp(12px, calc(1.017vw + 1.19px), 16px);
    font-weight: 500;
    line-height: 17px;
    text-transform: uppercase;
}

.qirp-vo-mb .qirp-ten-donvi a { text-decoration: none; }

/* ---------- THANH MỤC CHUYÊN MỤC (mobile) — ĐÃ CHUYỂN SANG qi-menu-mb.css ----------
   Bộ quy tắc thanh mục kiểu Dân trí (icon nhà · hai nút điều hướng · thanh chỉ báo mảnh · dính đỉnh)
   trước đây nằm ở đây nên chỉ trang "rp" được hưởng. User chốt 2026-08-04 dùng CHUNG cho các trang
   chủ mobile và mọi trang mobile khác ⇒ đã tách ra App_Themes/all/allcss/qi-menu-mb.css.
   Layout nào cần thanh mục thì nạp tệp đó (đã nạp ở _MasterResponsive, _MasterAllMobile,
   _MasterAllMobileViewState, _MasterMobile2). */

@media (max-width: 991.98px) {
    /* ẩn CẢ đầu trang và chân trang desktop (chân trang desktop có dải menu ngang dưới cùng, trên điện
       thoại xếp dồn rất dài) — thay bằng thanh gọn + chân trang bản mobile. */
    .qirp-vo-pc { display: none !important; }
    .qirp-vo-mb, .qirp-vo-mb-chan, .qirp-menu-wrap { display: block; }
    .qirp-hang-chuchay { display: flex; }
}

/* ---------- ÉP PHẦN VỎ CŨ CO GIÃN ----------
   Đầu trang / menu / chân trang là bộ vỏ DÙNG CHUNG với bản desktop, dựng từ thời chỉ có màn hình
   máy tính nên vài chỗ đặt bề rộng cứng (đo được trên điện thoại 390 px: .NameChannelTitle 550 px,
   ô tìm kiếm min-width 120 px + input-group 165 px ⇒ trang bị kéo ngang 575 px).
   Các rule dưới đây CHỈ có hiệu lực ở trang responsive (tệp này chỉ được layout _MasterResponsive
   nạp) nên KHÔNG ảnh hưởng các trang desktop cũ. */
@media (max-width: 991.98px) {
    /* Không để bất cứ thứ gì kéo ngang trang.
       🔑 Phải dùng `clip`, KHÔNG dùng `hidden`: `overflow-x: hidden` biến html/body thành vùng cuộn
       ⇒ `position: sticky` của thanh mục mất tác dụng (đo được: thanh trôi lên -508 px khi cuộn 600 px).
       `clip` cắt phần tràn mà không tạo vùng cuộn nên thanh mục vẫn dính đỉnh. */
    html, body { overflow-x: clip; }

    .NameChannelTitle { width: auto !important; max-width: 100%; }

    /* ô tìm kiếm trên thanh menu: cho co lại thay vì giữ 120 px */
    #qitxtSearch { min-width: 0 !important; width: 100% !important; }
    .qiMenuTime_flex .input-group, .qiMenuTime .input-group { max-width: 100%; }

    /* banner, logo, ảnh trong vỏ */
    #banner img, .qibanner img, .qilogo img { max-width: 100%; height: auto; }
    div#banner { min-height: 0 !important; }

    /* menu ngang: cho xuống dòng thay vì tràn */
    .qimenu, .qimenu22, .menungang, .navbar-nav { flex-wrap: wrap; }
}

/* ---------- khối HTML dựng sẵn của hệ cũ (khối chức năng, thư viện ảnh, bản đồ) ----------
   Các khối này do KhoiChucNangBuilder sinh ra với markup Bootstrap cũ. Bọc trong .qirp để
   ép chúng vừa cột và không tràn ngang trên điện thoại. */
/*  🔴🔴 CHỈ ÁP CHO KHỐI HTML CŨ (`.qirp-cu`, do trang rp DÙNG CHUNG bọc), TUYỆT ĐỐI KHÔNG đổi thành
    `.qirp`: `.qirp` là cả vùng nội dung, mà `max-width: 100%` ở đây sẽ ĐÈ `max-width: 1128px` khai ở
    đầu tệp ⇒ bản MÁY TÍNH mất khung, nội dung tràn ra sát mép màn hình; còn `.row { margin: 0 }` thì
    xoá margin âm của Bootstrap ⇒ vỡ lưới cột. (Đã dính đúng lỗi này khi đổi hàng loạt selector
    2026-08-05 — user báo "sao giao diện desktop lại bị vỡ khung".) */
.qirp-cu { max-width: 100%; }
.qirp-cu img, .qirp-cu iframe, .qirp-cu table { max-width: 100%; }
.qirp-cu iframe { width: 100%; }
.qirp-cu .row { margin-left: 0; margin-right: 0; }

/* =====================================================================================================
   LÀM GỌN CÁC KHỐI HTML CŨ TRÊN ĐIỆN THOẠI / MÁY TÍNH BẢNG (≤991px)
   Markup giữ NGUYÊN của bản desktop (user chốt 2026-08-04), phần dưới chỉ là CSS bù cho khổ hẹp.
   Số đo lấy trên /homegd147rp @414px trước khi sửa.
   ===================================================================================================== */
@media (max-width: 991.98px) {

    /* ---------- 1. CĂN ĐỀU HAI MÉP (user 2026-08-05: "các khối trên giao diện mobile căn 2 mép có vẻ
       chưa đều") ----------
       Markup khối chuyên mục bọc nội dung trong `.row > .col-sm-12.ml-0.pr-2.pl-1` — đệm LỆCH
       (trái 4px, phải 8px) ⇒ đo được khung khối cách mép trái 10px nhưng mép phải 14px, trong khi các
       khối khác (slideshow, Thông báo/Thư mời) đứng đúng 5px/5px ⇒ nhìn so le.
       Chỉ nhắm `col-sm-12` (ô CHIẾM TRỌN hàng) nên không phá khoảng cách của các cặp cột đứng cạnh nhau
       (vd `col-sm-6` của khối Thông báo | Thư mời ở mốc 576–991px). */
    .qirp .row > .col-sm-12 { padding-left: 0 !important; padding-right: 0 !important; }

    /* ---------- 2. MENU DỌC: ẨN Ở KHỔ HẸP ----------
       Menu dọc "DANH MỤC" là bản đầy đủ của cây chuyên mục: đo được **1.512px** (36 mục × ~41px) nằm ở
       cuối trang điện thoại — dài hơn cả phần tin, mà nội dung TRÙNG với menu trong nút ☰ (/mobilemenupage)
       của chính bộ vỏ mobile. Ẩn đi; thẻ bọc còn 0px sẽ được `an0px()` trong qi-home-rp.js dọn luôn. */
    .qirp #sidebar, .qirp > .wrapper { display: none !important; }

    /* ---------- 3. MÃ QRCODE: ẢNH BỊ KÉO GIÃN ----------
       Ảnh QR gốc 205×205 nhưng markup gắn `w-100` ⇒ ở cột 404px nó phóng lên **374px**, chiếm gần nửa
       màn hình mà không thêm thông tin gì. Trả về đúng cỡ gốc (tối đa 180px) và căn giữa. */
    .qirp img[src^="data:image/png"] { width: auto !important; max-width: 180px !important; height: auto; display: block; margin: 0 auto; }

    /* ---------- 4. THỐNG KÊ TRUY CẬP: rút chiều cao ----------
       Bảng 8 dòng × 35px = 345px. Chiều cao KHÔNG nằm ở ô `td` mà ở `span.online` bên trong: đệm
       `10px 22px` + `margin-bottom: 10px` (đo được) ⇒ phải hạ cả hai, nếu chỉ sửa `td` thì y nguyên. */
    .qirp table.thongke td { padding: 2px 6px !important; font-size: 13px; line-height: 20px; }
    .qirp table.thongke .item-tongtruycap { font-size: 15px; }
    /*  ⚠️ Biểu tượng của mỗi dòng là ẢNH NỀN của `span.online` (background-position trái), chỗ trống cho
        nó chính là `padding-left` ⇒ rút đệm xuống 8px thì CHỮ ĐÈ LÊN ICON (user 2026-08-05). Giữ đệm
        trái 24px, chỉ rút đệm dọc. */
    .qirp table.thongke span { padding: 2px 8px 2px 24px !important; margin-bottom: 0 !important; }

    /*  🔴 DẢI Ô SỐ TỔNG LƯỢT TRUY CẬP BỊ CẮT MẤT CHỮ SỐ CUỐI (user 2026-08-12: "thống kê truy cập
        chỉnh lại cho đẹp").
        Quy tắc `span { padding-left: 24px }` ngay trên kia vốn chỉ để chừa chỗ cho ICON NỀN của nhãn
        dòng, nhưng nó trúng LUÔN từng chữ số (`span.item-tongtruycap`) ⇒ mỗi ô số phình lên **40px**,
        10 ô = **416px** trong thẻ chỉ rộng **355px** ⇒ tràn và bị cắt (đo ở khổ 375px).
        Nay xếp dải số thành hàng co giãn: mỗi ô chia đều phần rộng còn lại, tối đa 30px
        ⇒ 10 ô + 9 khe = 318px, vừa khung ở cả máy hẹp nhất.  */
    .qirp table.thongke td.tongtruycap {
        display: flex;
        gap: 2px;
        justify-content: center;   /* tổng lượt truy cập CĂN GIỮA khối (user chốt 2026-08-12) */
        width: 100% !important;
        margin-top: 0;
        padding: 8px 4px !important;
    }

    .qirp table.thongke span.item-tongtruycap {
        flex: 1 1 0;
        min-width: 0;
        max-width: 30px;
        padding: 3px 0 !important;
        font-size: 15px;
        background-size: cover;
        border-radius: 2px;
    }

    /*  Căn lề theo yêu cầu user 2026-08-12: "phần thống kê truy cập tổng nên căn giữa, còn các
        thống kê nhỏ chữ nên căn trái sát vào tiêu đề".
        Markup gốc chia cứng 55% / 45% bằng style nội tuyến nên con số trôi ra tận mép phải, cách nhãn
        cả nửa khối. Ép ô NHÃN co đúng bề ngang chữ (`width: 1%` + `nowrap` — mẹo chuẩn của bảng) thì ô
        giá trị nhận hết phần còn lại và con số nằm NGAY SAU nhãn. */
    .qirp table.thongke tr:not(:first-child) td:first-child {
        width: 1% !important;
        white-space: nowrap;
    }

    .qirp table.thongke tr:not(:first-child) td:last-child {
        width: auto !important;
        text-align: left;
        padding-left: 8px !important;
        font-weight: 600;
    }
}

/* =====================================================================================================
   CHUẨN GIAO DIỆN MOBILE CỦA BẢN RP — LẤY TỪ `/homegdhn2rp` (user chốt 2026-08-05:
   "lấy bản rp của Hà Nội làm chuẩn áp dụng cho các bản rp khác … rp của mobile").
   Bản Hà Nội có bộ quy tắc riêng ở `qi-hanoi-rp.css`; phần dưới là ĐÚNG NHỮNG QUY TẮC ĐÓ, ánh xạ sang
   markup của họ giao diện chung (gd1…gd15, HCM): khối = `.qiContainer`, đầu khối = `.qihome_tieudebg`
   + `.qihome_tieude`, tin chữ = `.listitem`, tin ảnh = `.col-sm-4.qiimgrelate` (đã xử lý ở mục 5).
   Năm điểm của "chuẩn Hà Nội": ① lề 10px · ② khối KHÔNG nền/viền · ③ tiêu đề khối một kiểu (vạch đứng
   4px + gạch chân 2px + chữ hoa 19/700) · ④ dải xám 8px TRÀN HẾT bề ngang giữa hai khối · ⑤ vạch ngăn
   giữa hai tin với 10px đều hai bên.
   ===================================================================================================== */
/* Nút "Xem thêm" là phần THÊM của bản mobile — khổ máy tính giữ nguyên bản desktop nên ẩn đi. */
.qirp-xem-them { display: none; }

/*  Trình chiếu đầu trang trên địa chỉ …rp: máy tính dùng bản GỐC (amazingslider) để giống hệt trang
    gốc, khổ hẹp mới đổi sang bản Swiper (xem mục tương ứng trong khối `@media (max-width: 991.98px)`). */
.qirp-slide-moi { display: none; }

/*  Thiết bị di động: máy chủ CHỈ dựng bản Swiper (không có markup amazingslider, cũng không nạp bộ
    script của nó) ⇒ bản Swiper phải hiện ở MỌI bề rộng, kể cả khi người đọc bấm "Xem bản máy tính"
    (ép viewport 1300px nên vượt mốc 991px). */
.qirp-slide-moi--luon { display: block; }

@media (max-width: 991.98px) {
    /* ① lề hai bên đúng 10px (bản chung đang để 5px) */
    .qirp { padding-left: 10px !important; padding-right: 10px !important; }

    /*  🔴 KHỔ HẸP DÙNG BẢN SWIPER, KHÔNG DÙNG `amazingslider` (user chốt 2026-08-05, hướng (b)).
        Bộ amazingslider ghim bề rộng bằng STYLE NỘI TUYẾN (đo /homegd2rp @430px: 735px trong khung
        430px ⇒ kéo ngang trang 343px) và tính lại bằng JS nên ép width bằng CSS không ăn thua.
        ViewComponent `SlideHomeTop` dựng CẢ HAI bản khi đường dẫn là trang rp; ở đây chỉ đổi bản hiện. */
    .qirp .qirp-slide-cu { display: none !important; }
    .qirp .qirp-slide-moi { display: block; }

    /*  Khung cuộn của vỏ mobile (`.snap-content.qirp-snap`) có `overflow: auto`; trên trình duyệt máy
        tính và chế độ giả lập điện thoại, thanh cuộn dọc chiếm 10px bề rộng nội dung ⇒ đo được lề trái
        10px mà lề phải 20px. Ẩn thanh cuộn để hai mép đều nhau (điện thoại thật dùng thanh cuộn phủ nên
        không đổi gì) — đúng cách đã làm ở bản Hà Nội. */
    .qirp-snap { scrollbar-width: none; }
    .qirp-snap::-webkit-scrollbar { width: 0; height: 0; }

    /*  Chân trang bản mobile: `.qifootermobile > .container > .row` giữ margin âm ±15px của Bootstrap ⇒
        rộng 440px trong khung 430px, kéo ngang cả trang 5px. (Bộ rule chỉnh chân trang sẵn có chỉ bọc
        trong `.qirp-vo-mb-chan` — thẻ đó CHỈ có ở nhánh vỏ MÁY TÍNH, nên nhánh vỏ mobile bị sót.) */
    .qirp-snap .qifootermobile .container { padding-left: 0 !important; padding-right: 0 !important; }
    .qirp-snap .qifootermobile .row { margin-left: 0 !important; margin-right: 0 !important; }

    /*  ⓪ THÂN TRANG GỐC (từ 2026-08-05 địa chỉ …rp render chính trang gốc của mẫu) — ĐƯA VỀ ĐÚNG
        KHOẢNG CÁCH CHUẨN CỦA BẢN HÀ NỘI (user chốt: "lấy bản rp của Hà Nội… tuân thủ khoảng cách tiêu
        chuẩn"). Ba việc:
        · LỀ 10px: cột Bootstrap của markup cũ còn đệm riêng (`.col-sm-8` padding-left 15px ⇒ khối trong
          cột giữa thụt 25px thay vì 10px) và `.row` còn margin âm ⇒ về 0 hết, lề do `.qirp` lo;
        · KHE KHỐI 10px — CHỈ khe trắng, KHÔNG vẽ dải ngăn cách;
        · KHE TIÊU ĐỀ → TIN ĐẦU 10px: bỏ đệm trên của `.qiContainer_border` (6px) và margin của hàng đầu. */
    .qirp .row { margin-left: 0 !important; margin-right: 0 !important; }

    .qirp .row > [class*="col-"],
    .qirp .row > .col { padding-left: 0 !important; padding-right: 0 !important; }

    .qirp .qiContainer {
        margin: 10px 0 0 !important;
    }

    /*  🔴 ĐÃ BỎ `.qirp .qiContainer::before` — dải xám 8px tràn hết bề ngang (`background:#eef0f3`,
        `margin: 0 -10px 10px`) vẽ trước MỖI khối để ngăn cách kiểu báo điện tử. User tự tìm ra trong
        DevTools 2026-08-06 rằng chính nó là mấy "gạch thừa" đã báo mấy lần, và đã tắt thuộc tính này
        để kiểm chứng. Bỏ hẳn: giữa hai khối nay CHỈ còn khe trắng 10px đúng chuẩn (trước là
        10 + dải 8 + 10 = 28px). ĐỪNG DỰNG LẠI. */

    /*  Thẻ bọc nội dung khối `.qiContainer_border` có `padding: 6px 10px 12px` ⇒ ảnh/chữ cách mép màn
        hình 20px thay vì 10px (user 2026-08-05: "khoảng cách chưa đúng 10px căn 2 bên lề"). Lề đã do
        `.qirp` lo nên bỏ đệm NGANG lẫn đệm TRÊN; một số hàng tin còn `padding-left: 6px` riêng
        (`.qigd3right`) làm ảnh lệch thêm 9px — bỏ nốt. */
    /*  🔑 PHẢI dùng `#MainContent.qirp` (có id ⇒ specificity 1,2,0): `qistyleall-modern.css` có
        `.qiContainer_border:has(> .row.my-2):has(.qigd3right){padding-left:10px !important}` — `:has()`
        tính specificity theo đối số nên rule đó là (0,3,0), THẮNG `.qirp .qiContainer_border` (0,2,0)
        dù cả hai đều `!important`. Đây là lý do lề ảnh vẫn 20px sau khi đã khai `padding: 0`. */
    #MainContent.qirp .qiContainer_border {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #MainContent.qirp .qigd3right { padding-left: 0 !important; padding-right: 0 !important; }

    /*  Ảnh phải PHỦ KÍN khung 16:9, nếu để `height:auto` thì ô cao 117px trong khi khung 73px ⇒ vẫn so le
        (đo: 25 ảnh 130×73 nhưng còn 8 ảnh 130×117). */
    #MainContent.qirp .qiContainer_border .embed-responsive img,
    #MainContent.qirp .qiContainer_border a.ratio-16x9_pd img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /*  Cột CON bên trong khối còn mang lớp tiện ích đệm của Bootstrap (`pl-4` = 24px, `px-2`…) ⇒ ảnh và
        chữ thụt thêm 10–19px so với mép khối (đo /homegd8rp: ảnh ở x=20·23·29 thay vì 10 — user báo
        "khoảng cách lớn chưa theo chuẩn 10px"). Bỏ hết đệm ngang; khoảng cách trong cặp "ảnh | chữ" đã
        do `column-gap` lo. */
    .qirp .qiContainer [class*="col-"],
    .qirp .qiContainer .col { padding-left: 0 !important; padding-right: 0 !important; }

    /*  TIÊU ĐỀ TIN: TỐI ĐA 3 DÒNG, CẮT THEO TỪ + dấu "…".
        🔑 `-webkit-line-clamp` CHỈ có tác dụng khi `display: -webkit-box` — markup cũ để `flow-root`
        nên tuy có khai clamp vẫn không cắt, chỉ `overflow: hidden` xén cụt KHÔNG có dấu "…"
        (user 2026-08-05). Khai đủ bộ ba; phần cắt theo TỪ do `catTieuDeTheoTu()` trong qi-home-rp.js lo. */
    #MainContent.qirp .qitieudechinh,
    #MainContent.qirp .tieudechinh,
    #MainContent.qirp .qitieude,
    #MainContent.qirp .txt-snipt,
    #MainContent.qirp .qiheightItem > a {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: normal;
        /*  Cỡ chữ tiêu đề tin thống nhất với bản Hà Nội (15px/21px). Để `line-height: 24px` cho chữ 16px
            thì mỗi dòng dư ~4px đệm trên ⇒ DÒNG ĐẦU nhìn thấp hơn mép ảnh dù hộp đã khớp 0px
            (user 2026-08-05: "phần chữ tiêu đề tin vẫn chưa cao bằng mép ảnh"). */
        font-size: 15px !important;
        line-height: 21px !important;
    }

    /*  🖼️ MỌI Ô ẢNH TIN CÙNG MỘT CỠ (user chốt 2026-08-05: "cho các khối ảnh hiển thị đồng bộ giống
        nhau"): markup gốc để mỗi kiểu tin một bề rộng (`col-sm-6` 42% · `col-sm-4.qiimgrelate` 140px ·
        `col-sm-5` …) nên trong cùng một khối ảnh to nhỏ so le. Chốt **130×73 (16:9)** như bản Hà Nội. */
    #MainContent.qirp .qiContainer_border .row > [class*="col"] > .embed-responsive,
    #MainContent.qirp .qiContainer_border .row > [class*="col"].embed-responsive,
    #MainContent.qirp .qiContainer_border .row > [class*="col"] > a.ratio-16x9_pd {
        flex: 0 0 130px !important;
        width: 130px !important;
        max-width: 130px !important;
        /*  Bề rộng đã CỐ ĐỊNH 130px nên chốt luôn chiều cao 73px (=130×9/16) thay vì `aspect-ratio`:
            khung này là thẻ thường, nội dung bên trong (thẻ a + img theo dòng) sẽ ĐẨY CAO khung nếu chỉ
            khai tỉ lệ (đo được 8 ảnh cao 117px lẫn giữa 25 ảnh cao 73px). */
        height: 73px !important;
        padding-bottom: 0 !important;
        overflow: hidden;
    }

    #MainContent.qirp .qiContainer_border .row > [class*="col"] > .embed-responsive > *,
    #MainContent.qirp .qiContainer_border .row > [class*="col"].embed-responsive > *,
    #MainContent.qirp .qiContainer_border .row > [class*="col"] > a.ratio-16x9_pd > * {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /*  Khe ẢNH → TIÊU ĐỀ trong tin ảnh-trên-chữ-dưới: markup để `.my-2` (5px) nên chữ gần như dính đáy
        ảnh (user báo "chữ vẫn bị dính vào ảnh"). Về đúng 10px. */
    /*  ⚠️ CHỈ áp cho kiểu ẢNH TRÊN – CHỮ DƯỚI. Nếu áp cả cho kiểu ẢNH TRÁI | CHỮ PHẢI thì cột chữ bị đẩy
        xuống 10px ⇒ **chữ không thẳng mép trên với ảnh** (user 2026-08-05). Ở kiểu nằm ngang, thẻ đứng
        sau `.embed-responsive` chính là CỘT chữ (`col-*`) nên loại nó ra. */
    .qirp .tieudechinh,
    .qirp .qitieudechinh,
    .qirp .embed-responsive + *:not([class*="col"]) { margin-top: 10px !important; }

    /*  🔴 CHỮ PHẢI TRÀN QUANH ẢNH, KHÔNG ĐỂ Ô TRỐNG (user chốt 2026-08-05: "không được để khoảng trống
        nhiều như này, chữ luôn tràn sang phần trống nếu có").
        Trước đây hàng tin là FLEX hai cột cố định ⇒ phần dưới ô ảnh bỏ trống, và những tin mà markup đặt
        tiêu đề ở hàng riêng thì chữ nằm HẲN dưới ảnh, chừa nguyên mảng trắng bên phải.
        Cách làm: hàng tin về `display: block`, CỘT ẢNH `float: left` (130px) ⇒ tiêu đề + ngày + tóm tắt
        chảy quanh ảnh, lấp kín chỗ trống — đúng nhịp đọc của báo điện tử. */
    #MainContent.qirp .qiContainer_border .row:has(> [class*="col"] .embed-responsive),
    #MainContent.qirp .qiContainer_border .row:has(> [class*="col"].embed-responsive) {
        display: block !important;
    }

    /*  🔑 PHÂN BIỆT HAI LOẠI CỘT (nếu không, cả THẺ TIN bị co còn 130px ⇒ ba tin nằm cạnh nhau như lưới
        thẻ, không phải danh sách dọc — user gửi ảnh /homegd2rp 2026-08-05):
        · cột CHỈ CÓ ẢNH  → là ô ảnh của hàng "ảnh | chữ" ⇒ float trái 130px;
        · cột có CẢ ảnh LẪN tiêu đề → là MỘT TIN trọn vẹn ⇒ chiếm trọn dòng, ảnh BÊN TRONG mới float. */
    #MainContent.qirp .qiContainer_border .row > [class*="col"]:has(> .embed-responsive):not(:has(.qitieudechinh)):not(:has(.tieudechinh)):not(:has(h5)),
    #MainContent.qirp .qiContainer_border .row > [class*="col"].embed-responsive,
    #MainContent.qirp .qiContainer_border .row > [class*="col"]:has(> a.ratio-16x9_pd):not(:has(.qitieudechinh)):not(:has(.tieudechinh)):not(:has(h5)) {
        float: left !important;
        width: 130px !important;
        max-width: 130px !important;
        margin: 0 10px 4px 0 !important;
    }

    /* cột là MỘT TIN (ảnh + tiêu đề) → một tin một dòng, ảnh bên trong float trái */
    #MainContent.qirp .qiContainer_border .row > [class*="col"]:has(.embed-responsive):is(:has(.qitieudechinh), :has(.tieudechinh), :has(h5)),
    #MainContent.qirp .qiContainer_border .row > [class*="col"]:has(a.ratio-16x9_pd):is(:has(.qitieudechinh), :has(.tieudechinh), :has(h5)) {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #MainContent.qirp .qiContainer_border .row > [class*="col"]:has(.qitieudechinh) > .embed-responsive,
    #MainContent.qirp .qiContainer_border .row > [class*="col"]:has(.tieudechinh) > .embed-responsive,
    #MainContent.qirp .qiContainer_border .row > [class*="col"]:has(h5) > .embed-responsive {
        float: left !important;
        width: 130px !important;
        max-width: 130px !important;
        height: 73px !important;
        margin: 0 10px 4px 0 !important;
    }

    /* mỗi tin dạng thẻ cũng cần vạch ngăn 10px · vạch · 10px */
    #MainContent.qirp .qiContainer_border .row > [class*="col"]:has(.embed-responsive):is(:has(.qitieudechinh), :has(.tieudechinh), :has(h5)) + [class*="col"] {
        padding-top: 10px !important;
        margin-top: 10px !important;
        border-top: 1px solid #d7dbe0 !important;
    }

    #MainContent.qirp .qiContainer_border .row > [class*="col"]::after { content: ""; display: block; clear: both; }

    /* cột chữ: bỏ bề rộng cột, để chữ chảy quanh ảnh */
    #MainContent.qirp .qiContainer_border .row > [class*="col"]:not(.embed-responsive):not(:has(.embed-responsive)):not(:has(a.ratio-16x9_pd)) {
        width: auto !important;
        max-width: none !important;
        float: none !important;
    }

    /* dọn float trước khi sang tin kế tiếp */
    #MainContent.qirp .qiContainer_border .row::after { content: ""; display: block; clear: both; }

    /*  VẠCH NGĂN GIỮA CÁC TIN dạng hàng (mỗi `.row` con của `.qiContainer_border` là MỘT tin) — cùng
        chuẩn 10px · vạch · 10px như /homegdhn2rp. */
    #MainContent.qirp .qiContainer_border > .row + .row {
        padding-top: 10px !important;
        margin-top: 10px !important;
        border-top: 1px solid #d7dbe0 !important;
    }

    /*  🖼️ TIN ĐẦU KHỐI GIỮ ẢNH LỚN (user gửi mẫu 2026-08-05): ảnh to chiếm trọn bề ngang, tiêu đề + ngày
        + tóm tắt nằm DƯỚI; các tin sau mới là ảnh nhỏ 130px bên trái. */
    #MainContent.qirp .qiContainer_border > .row:first-child > [class*="col"]:has(> .embed-responsive),
    #MainContent.qirp .qiContainer_border > .row:first-child > [class*="col"].embed-responsive,
    #MainContent.qirp .qiContainer_border > .row:first-child > [class*="col"]:has(> a.ratio-16x9_pd) {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 0 10px !important;
    }

    #MainContent.qirp .qiContainer_border > .row:first-child > [class*="col"] > .embed-responsive,
    #MainContent.qirp .qiContainer_border > .row:first-child > [class*="col"].embed-responsive,
    #MainContent.qirp .qiContainer_border > .row:first-child > [class*="col"] > a.ratio-16x9_pd {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        float: none !important;
    }

    /*  Bỏ VIỀN DỌC của các cột trong khối (skin gắn `border-left: 3px` làm thanh bar trái cho tin bài):
        khi các cột về 100% và chữ chảy quanh ảnh, những vạch này thành đường mờ chạy dọc trang
        (user 2026-08-05: "còn thừa 1 thanh vạch mờ"). Vạch NGANG ngăn tin vẫn giữ. */
    #MainContent.qirp .qiContainer_border [class*="col"],
    #MainContent.qirp .qiContainer_border .row > div {
        border-left: 0 !important;
        border-right: 0 !important;
    }

    /* hàng "ảnh | chữ" luôn canh mép TRÊN */
    #MainContent.qirp .qiContainer_border .row { align-items: flex-start !important; }

    #MainContent.qirp .qiContainer_border .row > [class*="col"] > .tieudechinh:first-child,
    #MainContent.qirp .qiContainer_border .row > [class*="col"] > *:first-child { margin-top: 0 !important; }

    /*  🔴 KHE 10px GIỮA ẢNH CHÍNH VÀ TIÊU ĐỀ khi hàng XUỐNG DÒNG (user 2026-08-07: "tiêu đề và ảnh tin
        chính còn dính vào nhau, chưa giữ khoảng cách tiêu chuẩn 10px").
        Tin chính của khối dựng hai cột `ảnh | chữ`; trên điện thoại hai cột về 100% nên xếp CHỒNG, mà
        tiêu đề là con ĐẦU của cột chữ nên bị luật `*:first-child { margin-top: 0 }` ngay trên (đặt để
        hàng ảnh|chữ canh mép trên) ⇒ chữ dính đáy ảnh.
        Dùng `row-gap` chứ KHÔNG dùng `margin-top` cho cột: row-gap chỉ có tác dụng giữa các DÒNG của
        flex-wrap ⇒ hàng nào còn nằm ngang (ảnh trái | chữ phải) vẫn canh mép trên như cũ. */
    #MainContent.qirp .qiContainer_border .row { row-gap: 10px; }

    /*  🔴 KHE GIỮA HAI TIN PHẢI LÀ 10px TÍNH CẢ VẠCH NGĂN (user 2026-08-07: "khoảng cách giữa 2 tin chưa
        đúng chuẩn 10px đến thanh ngăn cách"). Markup cũ xếp mỗi nhóm tin trong một `.row.mt-2` riêng,
        mỗi hàng lại có lề trên 10px + đệm trên 10px + đệm dưới của hàng trước ⇒ đo được **51px** trắng
        giữa tin chính và tin kế tiếp. Gỡ hết đệm/lề của HÀNG và chỉ để đúng 10px giữa hai hàng; khe
        trong danh sách vẫn do `.listitem` lo (đệm dưới 10 + vạch + lề dưới 10). */
    #MainContent.qirp .qiContainer_border > .row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    #MainContent.qirp .qiContainer_border > .row + .row { margin-top: 10px !important; }

    /*  Hàng CON TRỰC TIẾP của khối: dùng lề của từng ô thay cho `row-gap` — `row-gap` cộng thêm một khe
        nữa ở cuối hàng khi hàng có ô rỗng/ô ảnh chưa tải (đo: 51px giữa tin chính và tin kế tiếp).
        Hàng "ảnh trái | chữ phải" của TỪNG TIN nằm sâu bên trong `.listitem` nên không dính luật này. */
    #MainContent.qirp .qiContainer_border > .row { row-gap: 0 !important; }
    #MainContent.qirp .qiContainer_border > .row > [class*="col"] + [class*="col"] { margin-top: 10px; }

    /*  Hàng BỌC KHỐI của markup cũ mang sẵn `.my-2` (margin 5px trên/dưới) ⇒ cộng vào khe khối thành
        15px thay vì 10px. Chỉ nhắm hàng bọc (con trực tiếp của thẻ cột chứa `.qiContainer`), KHÔNG đụng
        các hàng bên trong khối (chúng lo khoảng cách giữa tin chính và danh sách tin). */
    .qirp .row.my-2:has(> [class*="col"] > .qiContainer),
    .qirp .row:has(> [class*="col"] > .qiContainer) { margin-top: 0 !important; margin-bottom: 0 !important; }

    /* phần tử đầu trong khối không cộng thêm margin (markup cũ hay có `.my-2` / `.mt-2`) */
    .qirp .qiContainer_border > *:first-child { margin-top: 0 !important; }

    /*  ⓪b HỌ VỎ THỦ ĐỨC / HÓC MÔN (gd13* · gd14* · gd1413) — BA HỌ NÀY TỰ DỰNG VỎ NGAY TRONG THÂN TRANG
        (bản cũ dùng thẳng `MasterAll`), nên trang rp có tới HAI đầu trang: toolbar của vỏ mobile + đầu
        trang/menu ngang desktop nằm trong `#MainContent`. Menu đó còn ghim `w-1300` ⇒ đo /homegd1413rp
        @430px: **tràn ngang 888px**, các khối nằm cạnh nhau (x = 10 · 147 · 283).
        Xử lý y như bản Hà Nội: khổ hẹp ẨN đầu trang desktop (menu đã có trong nút ☰) và gỡ mọi bề rộng
        ghim cứng của bộ CSS hai họ. */
    .qirp > header,
    .qirp > .qimenu,
    .qirp > .container-fluid.qimenu { display: none !important; }

    .qirp .w-1300,
    .qirp .container,
    .qirp .container-fluid,
    .qirp .header-second,
    .qirp .navbar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* hàng tin của hai họ này để `nowrap` + tiêu đề `inline-block` co theo chữ ⇒ ép xuống dòng */
    .qirp .row { flex-wrap: wrap !important; }

    /*  🔴 CỘT BOOTSTRAP KHÔNG CÓ MỐC NGẮT (`col-4`, `col-6`…) GIỮ NGUYÊN % Ở MỌI BỀ RỘNG — khác
        `col-sm-*` (tự về 100% dưới 576px). Thân trang họ Thủ Đức/Hóc Môn xếp khối chức năng bằng
        `.row > .col-4` ⇒ trên điện thoại vẫn BA CỘT: khối "Thống kê truy cập" chỉ rộng 137px, bảng bị
        ép còn 147px và tiêu đề lệch hẳn ra ngoài khối (user gửi ảnh 2026-08-05).
        Cho về một cột theo đúng chuẩn "mỗi khối một dòng"; KHÔNG đụng `col-sm-*`/`col-md-*` để giữ
        các cặp "ảnh | chữ" của những họ khác. */
    .qirp .row > .col-1, .qirp .row > .col-2, .qirp .row > .col-3,
    .qirp .row > .col-4, .qirp .row > .col-5, .qirp .row > .col-6,
    .qirp .row > .col-7, .qirp .row > .col-8, .qirp .row > .col-9,
    .qirp .row > .col-10, .qirp .row > .col-11, .qirp .row > .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .qirp .a-simple {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    /*  ⓪c ĐẦU KHỐI CHỈ MỘT DÒNG, CHUYÊN MỤC CON GOM VÀO NÚT ☰ (user chốt 2026-08-05).
        Markup gốc đã có sẵn nút ba gạch `.nav-item.dropdown > .dropdown-toggle` kèm `.dropdown-menu`
        liệt kê ĐỦ chuyên mục con, nhưng một số mẫu còn in thêm vài chuyên mục con thẳng ra thanh tiêu đề
        ⇒ đầu khối cao 2–3 dòng, chữ tràn (user gửi ảnh khối "PHÒNG BAN SỞ"). Ở khổ hẹp: giữ đúng mục
        ĐẦU TIÊN (tên khối) + nút ☰, ẩn các mục còn lại — bấm ☰ vẫn xem được đầy đủ. */
    .qirp .qihome_tieudebg { flex-wrap: nowrap !important; align-items: center; }

    /*  Muốn cắt "…" được thì MỌI thẻ bọc flex trên đường đi phải `min-width: 0` (mặc định `auto` =
        không nhỏ hơn nội dung): thiếu nó thì tiêu đề dài hoặc XUỐNG 2 DÒNG (đo 46px) hoặc kéo dài ra
        482px làm tràn ngang. */
    .qirp .qihome_tieudebg > *,
    .qirp .qihome_tieudebg .nav,
    .qirp .qihome_tieudebg .nav-item {
        min-width: 0 !important;
        max-width: 100%;
    }

    /*  ⚠️ KHÔNG đặt `overflow: hidden` lên `.nav`: ở nhiều mẫu nút ☰ nằm NGAY TRONG `.nav`, khay
        `.dropdown-menu` xổ ra sẽ bị CẮT ⇒ bấm ☰ không thấy menu con (user 2026-08-05).
        Chỉ cần cắt ở ô chứa CHỮ (mục đầu) là đủ để có dấu "…". */
    .qirp .qihome_tieudebg .nav { flex-wrap: nowrap !important; }

    .qirp .qihome_tieudebg .nav-item:first-child { flex: 1 1 auto; overflow: hidden; }

    /*  Đầu khối dạng TAB (`ul.nav > li.nav-item > a.qihome_tieude`) có sẵn `padding: 10px 15px 10px 13px`
        ⇒ cao 46px trong khi đầu khối dạng tiêu đề trần chỉ 26px ⇒ hai kiểu ra 59px ↔ 39px (user
        2026-08-05: "làm nốt cho chuẩn"). Bỏ luôn đệm DỌC.
        Đệm TRÁI cũng bỏ (user 2026-08-06: "đẩy phần tiêu đề khối tin và gạch đầu khối thẳng hàng với
        đường viền border phía dưới") — đệm 13/15px này vốn chừa chỗ cho vạch ABSOLUTE của bộ skin, mà
        vạch đó nay đã bỏ, chỉ còn vạch INLINE nằm ngay trong dòng chữ. */
    .qirp .qihome_tieudebg .nav-item > a.qihome_tieude {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .qirp .qihome_tieudebg .nav-item:not(:first-child):not(.dropdown) { display: none !important; }

    .qirp .qihome_tieudebg .qihome_tieude {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*  🔴 NÚT ☰ PHẢI ĐỦ TO ĐỂ CHẠM (user 2026-08-06: "vẫn chưa click được vào dấu 3 gạch").
        Thẻ <a> gốc chỉ **45 × 14 px** (vừa đúng cái icon) — thấp hơn nhiều so với mức 44px mà cả iOS
        lẫn Android khuyến nghị cho vùng chạm ⇒ ngón tay chạm hụt vài pixel là "bấm không lên gì".
        Nới bằng `padding` rồi TRỪ LẠI bằng `margin` âm: hộp chạm cao 38px nhưng phần chiếm chỗ trong
        hàng vẫn y như cũ ⇒ đầu khối giữ đúng 39px. `z-index` để vùng nới nằm trên các thẻ kề bên. */
    .qirp .qihome_tieudebg .dropdown-toggle {
        position: relative;
        z-index: 2;
        padding: 12px 10px !important;
        margin: -12px -10px !important;
    }

    /* khay xổ ra của nút ☰ phải vừa màn hình và xuống dòng được */
    .qirp .qihome_tieudebg .dropdown-menu {
        max-width: calc(100vw - 20px);
        white-space: normal;
    }

    /*  ⓪e KHỐI TRÌNH CHIẾU PHẢI LÊN ĐẦU KHI DỒN MỘT CỘT (user báo /homegd6rp 2026-08-05: "khối tin
        slide lại bị nhảy xuống giữa, gần cuối" — đo được nó nằm ở 2.782px trên tổng 10.276px, tức sau
        7 khối khác).
        Vì sao: thân trang gốc xếp slide trong CỘT GIỮA, mà DOM đặt cột trái TRƯỚC ⇒ khi các cột xuống
        một hàng thì cột trái lên trên. Bản rp dùng chung trước đây giải bằng thuộc tính `order` do máy
        chủ tính; thân trang gốc không có, nên dùng `:has()` đẩy CỘT CHỨA SLIDE lên đầu hàng của nó
        (khớp mọi cấp cột vì `:has` xét cả con cháu). */
    .qirp .row > [class*="col"]:has(.qirp-slide-moi),
    .qirp .row > [class*="col"]:has(.demo-slider-3) { order: -1 !important; }

    /*  ⓪d KHỐI TRÌNH CHIẾU KHÔNG ĐƯỢC DÍNH KHỐI DƯỚI (user gửi ảnh /homegd4rp: dải ảnh nhỏ của slide
        đè lên thanh "TIN NỔI BẬT / TIN MỚI NHẤT / TIN XEM NHIỀU"). */
    .qirp .qirp-slide-moi,
    .qirp .qirp-tieudiem,
    .qirp .demo-slider-3 { margin-bottom: 10px; }

    /* ② khối phẳng: bỏ nền và khung viền — ranh giới khối do tiêu đề + dải xám lo */
    .qirp .qiContainer,
    .qirp .qiContainer_border,
    .qirp .qihome_tieudebg,
    .qirp .listitem,
    .qirp li,
    .qirp tr { background: transparent !important; }

    .qirp .qiContainer,
    .qirp .qiContainer_border {
        border: 0 !important;
        box-shadow: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ③ ĐẦU KHỐI MỘT KIỂU: vạch đứng 4px màu đơn vị + gạch chân 2px, chữ hoa 19/700, khe 10px xuống tin đầu */
    .qirp .qihome_tieudebg,
    .qirp .qihome_tieudebg2 {
        padding: 2px 0 9px !important;
        margin: 0 0 10px !important;
        border-bottom: 2px solid #e6ebf1 !important;
        min-height: 0 !important;
        height: auto !important;
        background: none !important;
    }

    /*  🔑 `padding-left: 0` — VẠCH ĐẦU KHỐI PHẢI THẲNG HÀNG VỚI GẠCH CHÂN 2px BÊN DƯỚI và với mép
        trái của thân khối (user 2026-08-06: "đẩy phần tiêu đề khối tin và gạch đầu khối thẳng hàng
        với đường viền border phía dưới"). Trước đó thẻ chữ mang sẵn đệm trái 10–15px của bộ skin
        (chừa chỗ cho vạch absolute nay đã bỏ) ⇒ đo được vạch ở x=25 trong khi khối và gạch chân ở
        x=10, nhìn như tiêu đề thụt vào. */
    .qirp .qihome_tieude,
    .qirp .big-title,
    .qirp .s_CategoryHome_Title_Parent {
        font-size: 19px !important;
        font-weight: 700 !important;
        line-height: 26px !important;
        text-transform: uppercase;
        padding-left: 0 !important;
    }

    /*  🔴 ĐẦU KHỐI LUÔN CĂN TRÁI (user chốt 2026-08-06: "cả giao diện 15 nữa" — đưa mọi mẫu về chuẩn
        Hà Nội trên điện thoại). Một số mẫu tự căn GIỮA đầu khối bằng bộ CSS riêng — đo /homegd15rp
        @440px: tiêu đề "Lịch công tác" ở x=143 trong khi khung khối và gạch chân ở x=10 ⇒ vạch đứng
        cũng trôi theo vào giữa. Ở khổ hẹp thì tiêu đề - vạch - gạch chân phải thẳng một mép. */
    .qirp .qihome_tieudebg,
    .qirp .qihome_tieudebg2 {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .qirp .qihome_tieudebg .nav,
    .qirp .qihome_tieudebg > .row,
    .qirp .qihome_tieudebg > div { justify-content: flex-start !important; }

    .qirp .qihome_tieudebg .qihome_tieude,
    .qirp .qihome_tieudebg .big-title,
    .qirp .qihome_tieudebg .s_CategoryHome_Title_Parent {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        /*  CHỈ MỘT GẠCH CHÂN: gạch chân 2px #e6ebf1 nằm ở THẺ ĐẦU KHỐI (chạy hết bề ngang). Vài mẫu
            (gd15) còn kẻ thêm gạch xám 2px ngay trên THẺ CHỮ — chỉ dài bằng chữ nên nhìn thành hai
            vạch so le, lệch chuẩn Hà Nội (user 2026-08-06: "tiêu đề giao diện 15 vẫn chưa đúng chuẩn"). */
        border-bottom: 0 !important;
    }

    /*  Vạch đứng vẽ bằng pseudo INLINE của thẻ CHỮ — KHÔNG dùng absolute trên thẻ đầu khối
        (bài học ở bản Hà Nội: đặt `position: relative` lên đầu khối làm các thẻ absolute khác bám nhầm). */
    .qirp .qihome_tieude::before,
    .qirp .big-title::before,
    .qirp .s_CategoryHome_Title_Parent::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 18px;
        margin-right: 9px;
        /* `middle` = canh đúng giữa dòng chữ (dùng số px như `-2px` thì lệch theo cỡ chữ từng mẫu) */
        vertical-align: middle;
        border-radius: 2px;
        background: var(--mau-md, #004ccb);
    }

    /*  🔴 CHỈ MỘT VẠCH MỖI ĐẦU KHỐI: đầu khối của nhiều mẫu là một `.nav` gồm tên khối + CÁC TAB
        chuyên mục con ("Hợp tác quốc tế", "Thi THPT quốc gia"…), mà tab cũng mang class
        `.qihome_tieude` ⇒ mỗi tab lại vẽ thêm một vạch, nhìn thành hai thanh chồng nhau
        (user gửi ảnh /homegd12rp 2026-08-05: "một số tiêu đề bị lỗi lặp thanh đầu"). */
    .qirp .nav-item:not(:first-child) .qihome_tieude::before,
    .qirp .qihome_tieude .qihome_tieude::before { display: none !important; }

    /*  🔴 Nguồn lặp thứ hai (user báo lần 2 trên /homegd2rp): đầu khối họ chung ĐÃ CÓ SẴN vạch dọc riêng
        — `.qihome_tieudebg::before`, 4×33px, `linear-gradient(#1565c0,#003561)`, `position:absolute;
        left:10px` — nên vạch của mình thành cái THỨ HAI. Giữ vạch GỐC (đúng phong cách bộ skin), bỏ vạch
        của mình ở những đầu khối có sẵn; kéo vạch gốc về sát lề vì đầu khối nay `padding-left: 0`. */
    /*  🔴 DÙNG MỘT KIỂU VẠCH DUY NHẤT — vạch INLINE của thẻ chữ, KHÔNG dùng vạch absolute của bộ skin.
        Lý do: vạch absolute căn giữa theo HỘP đầu khối (hộp còn `padding-bottom: 9px`) nên nhìn cao hơn
        dòng chữ (user 2026-08-05: "gạch đầu mỗi tiêu đề khối chưa căn giữa với chữ bên phải"), lại còn
        khác cỡ với vạch inline (4×33 ↔ 4×18) nên "cái dài cái ngắn".
        Vạch inline + `vertical-align: middle` thì luôn nằm đúng giữa dòng chữ, mọi kiểu markup như nhau. */
    .qirp .qihome_tieudebg::before { display: none !important; }

    /*  🔴 ẢNH TIN PHẢI ĐÚNG KHUNG 16:9: khung tỉ lệ của Bootstrap 4 (`.embed-responsive-16by9`) tính
        `padding-bottom: 56.25%` theo bề rộng thẻ CHA — khi thân trang dồn một cột, bề rộng đổi mà chiều
        cao đã tính không theo kịp ⇒ ảnh cao 217px trong khung 140px (tỉ lệ 0,65 thay vì 1,78 — user gửi
        ảnh 2026-08-05: "ảnh bị kéo dài không đúng khổ 16:9"). Dùng `aspect-ratio` cho chắc. */
    .qirp .embed-responsive.embed-responsive-16by9,
    .qirp .embed-responsive.embed-responsive-4by3 {
        height: auto !important;
        padding-bottom: 0 !important;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .qirp .embed-responsive > .embed-responsive-item,
    .qirp .embed-responsive > a,
    .qirp .embed-responsive > img {
        position: absolute !important;
        top: 0; left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    .qirp .embed-responsive img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

    /* ④ dải xám ngăn cách hai khối, TRÀN HẾT bề ngang màn hình (margin âm bằng đúng lề 10px của .qirp) */
    .qirp-o + .qirp-o::before,
    .qirp-phai > .qirp-o:first-child::before,
    .qirp-trai > .qirp-o:first-child::before {
        content: "";
        display: block;
        height: 8px;
        margin: 0 -10px 10px;
        background: #eef0f3;
    }

    /*  🔴 Ba cột dùng `display: contents` khi dồn một cột: các khối TRÔNG như liền nhau nhưng trong DOM
        vẫn thuộc BA THẺ CHA khác nhau ⇒ `.qirp-o + .qirp-o` KHÔNG khớp ở khối ĐẦU của cột phải/cột trái
        (vd "TIN MỚI NHẤT" là khối đầu cột phải) nên khối đó vừa mất dải xám vừa mất khe 10px, dính luôn
        vào khối trước (user báo /homegd2rp 2026-08-05). Bù bằng hai chọn tử `:first-child` ở trên. */
    .qirp-phai > .qirp-o:first-child,
    .qirp-trai > .qirp-o:first-child { margin-top: var(--qirp-khe-doc); }

    /*  ④b HAI KHỐI NẰM TRONG CÙNG MỘT `.qirp-o` cũng phải có dải ngăn (user 2026-08-07: "không có thanh
        ngăn giữa 2 khối thông báo, thư mời"). `ThongBaoThuMoiHome` dựng MỘT hàng gồm hai cột
        `.col-sm-6` (Thông báo | Thư mời) — ở khổ máy tính chúng đứng cạnh nhau nên không cần vạch, còn
        khi dồn một cột thì hai khối dính liền nhau, khác hẳn các khối khác.
        Chỉ kẻ khi CẢ HAI cột liền kề đều tự mở đầu bằng thanh tiêu đề khối (`.qihome_tieudebg`) — nếu
        không sẽ kẻ nhầm vào hàng ảnh|chữ của một tin. */
    .qirp .qirp-cu > .row > [class*="col"]:has(.qihome_tieudebg)
        + [class*="col"]:has(.qihome_tieudebg)::before {
        content: "";
        display: block;
        height: 8px;
        margin: 10px -10px;
        background: #eef0f3;
    }

    /*  ⑥ NÚT "XEM THÊM" CUỐI KHỐI — kiểu `.xem-tiep` của bản mobile cũ /homemb: viền 1px màu đơn vị,
        bo tròn 999px, chữ 14.5px/700, cao 45px, chiếm trọn bề ngang. Thẻ `<a class="qirp-xem-them">` do
        `HomeRp.cshtml` render (markup họ chung không có sẵn link "Xem thêm" như bản Hà Nội). */
    .qirp-xem-them {
        display: block;
        margin-top: 10px;
        padding: 11px 18px;
        border: 1px solid var(--mau-md, #004ccb);
        border-radius: 999px;
        background: #fff;
        color: var(--mau-md, #004ccb);
        text-align: center;
        font-size: 14.5px;
        font-weight: 700;
        line-height: 21px;
        text-decoration: none;
    }

    /* ⑤ vạch ngăn giữa hai tin: TRÊN 10px — vạch — DƯỚI 10px (giữ vạch màu 3px bên trái của bản gốc) */
    .qirp .listitem {
        padding: 0 0 10px 10px !important;
        margin: 0 0 10px !important;
        border-bottom: 1px solid #d7dbe0 !important;
    }

    .qirp .listitem:last-child {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    /* =================================================================================================
       ⑥ HỌ THỦ ĐỨC (gd13*) / HÓC MÔN (gd14*, gd1413) — ĐƯA VỀ CHUẨN HÀ NỘI TRÊN ĐIỆN THOẠI
       (user chốt 2026-08-06: "các họ giao diện 13, 14 khi rp trên mobile đưa về giống với homegdhn2").

       Ba mẫu này KHÔNG đi qua `_MasterAllDesktop` mà **tự dựng cả bộ vỏ ngay trong thân trang**
       (dải logo + menu ngang + dải chữ chạy/tìm kiếm + chân trang + hotline) và dùng bộ markup riêng
       của tpthuduc/hocmon (`article.itemhome*` · `aside.block*` · `h1.text-center > a.big-title`),
       nên các luật chuẩn ở trên — vốn bám `.qiContainer` / `.qihome_tieudebg` — không chạm tới.

       Chọn tử bám ĐÚNG markup riêng của hai họ (`.container23`, `article[class*="itemhome"]`,
       `.big-title`, `.landing-2`) nên không đụng mẫu nào khác.
       ================================================================================================= */

    /*  ⑥a BỎ PHẦN VỎ MÀ TRANG TỰ DỰNG — vỏ mobile của `_MasterResponsive` đã lo hết.
        Đo trên /homegd13rp @440px: vỏ mobile có #toolbar 440×48 · thanh mục 440×37 · chân trang
        440×184; NGOÀI RA trang còn tự vẽ dải logo 420×80, dải chữ chạy 420×35, khối tìm kiếm
        `.landing-2` (cao **4.296px** vì `.item.flex-grow-1` chứa marquee bị kéo giãn) và một chân
        trang thứ hai 420×281 + dải hotline 430×111 ⇒ trang lặp hai bộ vỏ. */
    .qirp > header,
    .qirp:has(article[class*="itemhome"]) > section:first-of-type,   /* dải logo + tên đơn vị (TĐ và HM cấu trúc khác nhau) */
    .qirp > section[class*="landing-"],
    .qirp > .container-fluid:has(.qiChuChay),
    .qirp > .container-fluid:has(marquee),
    .qirp .landing-2,
    .qirp > footer,
    .qirp .hotline-footer,
    .qirp > .container-fluid:has(.menu-option) { display: none !important; }

    /*  ⑥b LỀ 10px: bỏ đệm của các thẻ bọc để khối bám đúng lề chung (đo trước: khối ở x=20). */
    .qirp .container23,
    .qirp .container23 > section,
    .qirp article[class*="itemhome"] > aside {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /*  ⑥c KHỐI PHẲNG + DẢI XÁM 8px TRÀN HẾT BỀ NGANG giữa hai khối (đúng chuẩn Hà Nội).
        Bản gốc tô nền xen kẽ #f6f6f6 cho từng khối — trên điện thoại nhìn thành các mảng xám lớn. */
    .qirp article[class*="itemhome"] {
        display: block !important;   /* thẻ gốc là `d-flex` ⇒ pseudo dải xám sẽ thành flex item */
        width: 100% !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .qirp article[class*="itemhome"] > aside { width: 100% !important; }

    /*  Dải xám vẽ bằng pseudo với `margin: 0 -10px` để TRÀN HẾT bề ngang (đúng cách đã chốt ở bản
        Hà Nội: dùng `border-top` thì dải bị thụt đúng bằng lề 10px của thân trang). */
    .qirp article[class*="itemhome"] + article[class*="itemhome"]::before {
        content: "";
        display: block;
        height: 8px;
        margin: 10px -10px;
        background: #eef0f3;
    }

    /*  ⑥d ĐẦU KHỐI MỘT KIỂU: chữ 19/700 hoa CĂN TRÁI + vạch đứng 4px + gạch chân 2px, chiếm trọn bề
        ngang (bản gốc căn GIỮA, không gạch chân). Vạch đứng do luật chung ở trên vẽ sẵn cho
        `.big-title`. */
    .qirp article[class*="itemhome"] h1:has(> .big-title),
    .qirp article[class*="itemhome"] h2:has(> .big-title),
    .qirp article[class*="itemhome"] h3:has(> .big-title) {
        width: 100% !important;
        text-align: left !important;
        margin: 0 0 10px !important;
        padding: 2px 0 9px !important;
        border-bottom: 2px solid #e6ebf1;
        /* thẻ h1 gốc cỡ 36px ⇒ hộp dòng cao 39,6px dù chữ bên trong chỉ 19/26 (đo: đầu khối 53px) */
        font-size: 19px !important;
        line-height: 26px !important;
    }

    .qirp .big-title {
        display: inline-block;
        line-height: 26px !important;
        text-decoration: none !important;
    }

    /*  Bộ TĐ/HM tự trang trí tiêu đề: `padding-bottom: 20px` + `margin-bottom: 40px` + gạch
        `::after` 62×3px ⇒ hộp tiêu đề cao **112px** và có HAI vạch nhấn (vạch 4px của mình + gạch
        62px của họ). Chuẩn Hà Nội chỉ có vạch đứng 4px + gạch chân 2px ⇒ bỏ phần trang trí kia. */
    .qirp article[class*="itemhome"] .big-title {
        padding: 0 !important;
        margin: 0 !important;
    }

    .qirp article[class*="itemhome"] .big-title::after { display: none !important; }

    /*  🔴 BANNER LẶP HAI LẦN (user gửi ảnh /homegd14rp và /homegd1413rp 2026-08-06): vỏ mobile đã có
        banner riêng, nhưng thân trang của hai họ này còn dựng banner của bản máy tính ngay đầu trang
        (`.container-fluid > .container-fluid > .d-inline > a > img`) ⇒ hai dải banner giống nhau chồng
        nhau. Ẩn dải của thân trang, giữ dải của vỏ mobile. */
    .qirp:has(article[class*="itemhome"]) .container-fluid:has(> .container-fluid > div.d-inline) { display: none !important; }

    /*  ⑥e NÚT "XEM THÊM" GIỐNG /homemb: pill chiếm trọn bề ngang, cao 45px, đặt cuối khối. */
    .qirp article[class*="itemhome"] .btn.button-simple,
    .qirp article[class*="itemhome"] .button_a {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 11px 18px !important;
        border: 1px solid var(--mau-md, #004ccb) !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: var(--mau-md, #004ccb) !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        line-height: 21px !important;
        text-align: center;
    }

    /*  ⑥f ẢNH TRONG KHỐI: giữ khuôn, không kéo cao ô; và không cho thẻ nào ghim bề rộng máy tính. */
    .qirp .container23 .w-1300,
    .qirp .container23 [class*="w-13"],
    .qirp .container23 [style*="width: 1300"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .qirp article[class*="itemhome"] img { max-width: 100%; }
}

@media (max-width: 575.98px) {
    /* ---------- 5. KHỐI CHUYÊN MỤC: MỖI TIN MỘT DÒNG, ẢNH TRÁI – CHỮ PHẢI ----------
       Ở mốc <576px mọi `col-sm-*` của Bootstrap về 100% ⇒ khối chuyên mục thành 4 ảnh 16:9 rộng 370px xếp
       dọc, mỗi khối cao ~1.250px (đo trên khối "Tin tức").
       Bản đầu tôi cho 2 ô một hàng nhưng user chốt 2026-08-05: **"khối tin nên dàn lại theo chiều từ trên
       xuống dưới"** (2 ô một hàng cao thấp lệch nhau, nhìn so le — đúng như ảnh user gửi).
       Nay: MỖI TIN MỘT DÒNG, ảnh nhỏ bên trái + tiêu đề bên phải (đúng nhịp danh sách tin của bản mobile
       cũ). Khối "Tin tức" từ 1.245px → ~380px mà vẫn thấy ảnh và đọc theo chiều dọc tự nhiên. */
    /* tin chính: ảnh 42% bên trái, tiêu đề + ngày bên phải */
    .qirp .row > .col-sm-6.embed-responsive { flex: 0 0 42%; max-width: 42%; }
    .qirp .row > .col-sm-6.qiheightmain { flex: 0 0 58%; max-width: 58%; padding-left: 10px !important; }

    /* các tin sau: một dòng một tin, ảnh 140px bên trái */
    .qirp .row > .col-sm-4.qiimgrelate {
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .qirp .col-sm-4.qiimgrelate > .embed-responsive { flex: 0 0 140px; width: 140px; }
    .qirp .col-sm-4.qiimgrelate > h5,
    .qirp .col-sm-4.qiimgrelate > .qiheightItem { flex: 1 1 auto; min-width: 0; margin-top: 0 !important; }

    /* tiêu đề tin phụ: bản desktop ghim chiều cao cho đều hàng, ở khổ hẹp chữ dài hơn nên bỏ ghim */
    .qirp .qiheightItem { height: auto !important; }

    /*  VẠCH NGĂN GIỮA CÁC TIN CÓ ẢNH — cùng chuẩn với bản Hà Nội: trên 10px — vạch — dưới 10px
        (mỗi tin một dòng nên vạch chạy hết bề ngang khối, tin cuối không kẻ). */
    .qirp .row > .col-sm-4.qiimgrelate {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #d7dbe0;
    }

    .qirp .row > .col-sm-4.qiimgrelate:last-child {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 0;
    }
}

/* 🔴 VỎ DESKTOP GHIM BỀ RỘNG 1300px ⇒ KÉO NGANG TRANG TRÊN MÁY TÍNH BẢNG.
   Bộ vỏ Hóc Môn đặt `.header-second { width: 1300px }` (không phải max-width) và `.navbar-nav` để
   `flex-wrap: nowrap`, nên ở cửa sổ 1024px thanh menu ngang rộng 1300px ⇒ trang kéo ngang 314px (đo được;
   bản desktop cũ cũng bị, nhưng trang rp phải chịu được vì iPad hiện đại không phát hiện được qua
   User-Agent nên VẪN nhận vỏ máy tính). Chỉ sửa trong `.qirp-vo-pc` ⇒ không ảnh hưởng trang cũ.
   ⚠️ CHỈ áp dưới 1200px: từ 1200px trở lên cửa sổ vẫn chứa hết 1300px nên giữ NGUYÊN bản cũ — nếu cho
   `flex-wrap: wrap` ở mọi bề rộng thì menu tự xuống 2 hàng ngay ở 1366px (đo được), khác bản cũ. */
@media (max-width: 1199.98px) {
    .qirp-vo-pc .container.header-second { width: 100% !important; max-width: 100%; }
    .qirp-vo-pc .navbar-nav { flex-wrap: wrap; }
}

/* Chế độ "xem bản máy tính" trên điện thoại (viewport bị ghim 1300px): vỏ nào có khung rộng HƠN 1300px
   thì vẫn tràn ⇒ ép về 100% cho chắc, không phụ thuộc mốc ngắt.
   Bỏ luôn đệm 15px của `.container-fluid` bọc ngoài: khung `.container` đã đúng 1300px = cả viewport, cộng
   thêm đệm hai bên là thừa ra 28px ⇒ vẫn kéo ngang (đã đo). */
.qi-xem-pc .qirp-vo-pc .container { width: 100% !important; max-width: 100%; }
.qi-xem-pc .qirp-vo-pc .container-fluid { padding-left: 0; padding-right: 0; }

/* 🔴 KHUNG CHẶN CHO CÁC THẺ `position: absolute` CỦA HTML CŨ.
   Nhiều khối cũ dùng mẫu "khung tỉ lệ": con đặt `position:absolute; inset:0; width/height:100%` và dựa
   vào thẻ cha ĐANG `position: relative` — ở bản desktop cái cha đó là `.col-*` của Bootstrap (mặc định
   `position: relative`). Trong bản rp, khối chức năng KHÔNG nằm trong `col-*` nào ⇒ không có cha định vị,
   thẻ con neo vào cả TRANG: đo được `<video>` rộng 1014px, cao **15.764px**, đè lên mọi khối khác
   (user báo 2026-08-04: "tinvideo bị tràn"). Cho `.qiContainer` làm mốc định vị để mọi thứ nằm trong khối. */
.qirp .qiContainer { position: relative; }

/* Video "TRUYỀN HÌNH GIÁO DỤC" (ul.videohome): thay vì absolute phủ khung, cho nó chảy theo dòng với
   khung tỉ lệ 16:9 — vừa đúng bề rộng cột, cao hợp lý, tiêu đề nằm dưới như bản cũ. */
.qirp ul.videohome > li { position: relative; }

.qirp video.video-fluid {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    display: block;
}
/* ⚠️ KHÔNG xoá đệm ngang của các `col-*` bên trong khối cũ.
   Trước đây có `.qirp [class*="col-"] { padding-left:0; padding-right:0 }` để chống tràn, nhưng chính
   nó làm hai khối cạnh nhau DÍNH VÀO NHAU — rõ nhất ở khối "Thông báo / Thư mời": bản cũ đo được cột thứ
   hai có đệm 12px (khe 12px giữa hai khối), bản rp thành **0px** (user 2026-08-04: "khối thông báo thư mời
   lại sít vào nhau"). Việc chống tràn đã do `.qirp .row { margin: 0 }` ở trên lo (thủ phạm tràn là
   margin ÂM của `.row`, không phải đệm của cột), nên để Bootstrap giữ đệm y bản desktop. */

/* ---------- NÚT "XEM BẢN MÁY TÍNH ↔ BẢN ĐIỆN THOẠI" ----------
   Chỉ hiện khi màn hình hẹp (bản máy tính rộng thì nút vô nghĩa) HOẶC khi đang xem bản máy tính — lúc đó
   viewport đã bị ghim 1200px nên mốc ≤991 không còn khớp, phải dựa vào class `qi-xem-pc` mà script trong
   <head> gắn lên <html>, nếu không người đọc sẽ KHÔNG có đường quay lại (đúng lỗi của bản cũ). */
.qirp-doi-vo { display: none; justify-content: center; padding: 12px 10px 18px; }

@media (max-width: 991.98px) {
    .qirp-doi-vo { display: flex; }
}

.qi-xem-pc .qirp-doi-vo { display: flex; }

.qirp-doi-vo-nut {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--qirp-vien);
    border-radius: 999px;
    background: #fff;
    color: var(--qirp-chu);
    font-family: var(--qirp-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.qirp-doi-vo-nut:hover { border-color: var(--mau-md, #0071a6); color: var(--mau-md, #0071a6); }
.qirp-doi-vo-nut i { font-size: 15px; }
.qirp-doi-vo-nut i:before { color: inherit !important; }   /* vỏ desktop tô trắng icon fa — xem chú thích ở nút thanh mục */

/* đổi nhãn theo trạng thái: mặc định mời sang bản máy tính, đang ở bản máy tính thì mời về điện thoại */
.qirp-nhan-mb { display: none; }
.qi-xem-pc .qirp-nhan-pc { display: none; }
.qi-xem-pc .qirp-nhan-mb { display: inline; }
.qi-xem-pc i.qirp-nhan-mb { display: inline-block; }

/* ---------- quảng cáo bay hai bên mép ----------
   Chỉ hiện khi còn chỗ hai bên vùng nội dung (1128 + 2×160). Dưới ngưỡng đó dải quảng cáo sẽ đè
   lên nội dung nên ẩn hẳn — bản trang chủ desktop cũ giữ nguyên hành vi cũ, chỉ bản "rp" ẩn. */
@media (max-width: 1449.98px) {
    .qirp-qc-mep { display: none; }
}

/* ================================================================================
   CÁC MỐC NGẮT
   ≥1200: 3 cột · 992–1199: 2 cột (cột trái xuống dưới) · 768–991: 1 cột
   <768: 1 cột, tin ảnh chuyển hàng ngang cho đỡ chiếm chiều cao
   ================================================================================ */

@media (max-width: 1199.98px) {
    .qirp-luoi, .qirp-luoi--khong-trai { grid-template-columns: minmax(0, 1fr) var(--qirp-cot-phai); }
    /* hai cột: giữa | phải; cột trái (menu + chuyên mục trái) xuống dưới, chiếm hết bề rộng */
    /* hai cột: giữa | phải cùng DÒNG 1, cột trái xuống DÒNG 2 chiếm cả hàng */
    .qirp-giua { grid-column: 1; grid-row: 1; border-left: 0; padding-left: 0; }
    .qirp-phai { grid-column: 2; grid-row: 1; }
    .qirp-trai { grid-column: 1 / -1; grid-row: 2; order: 3; }
    .qirp-trai .qirp-ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 991.98px) {
    .qirp-luoi, .qirp-luoi--khong-trai { grid-template-columns: minmax(0, 1fr); }
    /* một cột: thứ tự hiển thị = giữa → phải → trái (đúng thứ tự DOM) */
    /* MỘT CỘT — thứ tự khối đọc như bản desktop: TỪ TRÁI SANG PHẢI, TỪ TRÊN XUỐNG DƯỚI
       (user chốt 2026-08-04: vd tiêu điểm rồi tới tin mới nhất, KHÔNG phải hết cột giữa rồi mới sang
       cột phải).
       Cách làm: ba thẻ cột đặt `display: contents` ⇒ chúng biến mất khỏi lưới, các khối con
       (`.qirp-o`, đã được máy chủ gán `order` = hàng×10 + số cột) trở thành ô của lưới một cột nên
       `order` quyết định thứ tự xen kẽ giữa ba cột. */
    .qirp-trai, .qirp-giua, .qirp-phai { display: contents; }

    /* Khoảng cách dọc giữa các khối khi đã dồn một cột (thẻ cột không còn hộp riêng).
       ⚠️ PHẢI tắt row-gap của lưới: `display: contents` làm mỗi `.qirp-o` thành một Ô của lưới, nên khe
       hàng (10px) CỘNG THÊM vào margin ⇒ đo được 24px thay vì 10px (user 2026-08-04: "khoảng cách giữa
       các khối trên mobile và tab đang khá lớn, tôi muốn chỉ 10px"). */
    .qirp-luoi { row-gap: 0; }
    .qirp-o + .qirp-o { margin-top: var(--qirp-khe-doc); }

    /* Khối KHÔNG có nội dung (quảng cáo tắt, khối không có dữ liệu) phải biến mất hẳn, không để lại khe.
       `:empty` KHÔNG đủ: Razor để lại ký tự trắng/dòng mới bên trong thẻ bọc nên thẻ không còn "rỗng"
       theo CSS ⇒ thêm `:not(:has(*))` (không có thẻ con nào). Trường hợp thẻ con tồn tại mà vẫn cao 0px
       thì do JS xử lý — xem `an0px` trong wwwroot/js/qi-home-rp.js. */
    .qirp-o:empty, .qirp-o:not(:has(*)) { display: none; }
    .qirp-ds--chia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* hai cột phụ khi đã xuống một cột: bày ngang cho đỡ dài */
    .qirp-phai .qirp-ds, .qirp-trai .qirp-ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 767.98px) {
    /* Giữ đúng 10px như bản desktop (user chốt 2026-08-04: "tôi muốn chỉ 10px theo tiêu chuẩn"). */

    .qirp { padding: 0 10px; }
    .qirp-ds--chia, .qirp-ds--doi,
    .qirp-phai .qirp-ds, .qirp-trai .qirp-ds { grid-template-columns: minmax(0, 1fr); }

    /* trên điện thoại: tin ảnh thành hàng ngang (ảnh 120 px) — trừ tin lớn đầu khối */
    .qirp-tin--anh { display: flex; gap: 12px; align-items: flex-start; }
    .qirp-tin--anh .qirp-anh { width: 120px; flex: 0 0 120px; }
    .qirp-tin--anh .qirp-noidung { min-width: 0; flex: 1 1 auto; }
    .qirp-tin--anh .qirp-tit { margin-top: 0; font-size: 15px; line-height: 20px; }
    .qirp-tin--anh .qirp-sapo { display: none; }

    .qirp-tin--lon .qirp-tit { font-size: 20px; line-height: 28px; }
    .qirp-tieude > a, .qirp-tieude > span { font-size: 16px; }

}

@media (max-width: 479.98px) {
    .qirp-tin--anh .qirp-anh, .qirp-tin--ngang .qirp-anh { width: 104px; flex: 0 0 104px; }
    .qirp-tin--lon .qirp-tit { font-size: 18px; line-height: 25px; }
}

/* =====================================================================================================
   DẢI TIỆN ÍCH TRÊN CÙNG CỦA VỎ MÁY TÍNH (ngày giờ · RSS · đổi ngôn ngữ · ô tìm kiếm)
   User 2026-08-06: "icon rss và eng chưa căn giữa và bị lệch, chưa có cùng kích thước".
   Đo trên /homegdhn2rp @1600px: ảnh RSS **57×20** tâm y=298, cờ EN **50×24** tâm y=294, ô tìm kiếm tâm
   y=293 ⇒ ba thứ trên cùng một dải mà lệch nhau tới 5px và cao thấp khác nhau.
   Chốt: mọi biểu tượng trên dải này cao **24px** và căn giữa theo trục dọc.
   Chỉ áp cho VỎ MÁY TÍNH của trang rp (`.qirp-vo-pc`) nên không đụng trang cũ.
   ===================================================================================================== */
@media (min-width: 992px) {
    .qirp-vo-pc .qiMenuTime_flex > .container > .d-flex,
    .qirp-vo-pc .qiMenuTime > .container > .d-flex {
        align-items: center;
    }

    .qirp-vo-pc .qiMenuTime_flex .d-flex > div,
    .qirp-vo-pc .qiMenuTime .d-flex > div {
        display: flex;
        align-items: center;
    }

    .qirp-vo-pc .qiMenuTime_flex a,
    .qirp-vo-pc .qiMenuTime a {
        display: inline-flex;
        align-items: center;
    }

    /*  `max-height: none` là bắt buộc: vỏ Hóc Môn có `.landing-2 img { max-height: 20px !important }`
        mà max-height THẮNG height (bài học đã trả giá ở đợt nút đổi ngôn ngữ). */
    .qirp-vo-pc .qiMenuTime_flex img,
    .qirp-vo-pc .qiMenuTime img {
        height: 24px !important;
        width: auto !important;
        max-height: none !important;
        vertical-align: middle;
    }

    /* nút đổi ngôn ngữ đã chốt cỡ 50×24 từ đợt trước — giữ nguyên, không để rule chung ở trên nới ra */
    .qirp-vo-pc #tienganh img,
    .qirp-vo-pc #tiengviet img {
        width: 50px !important;
        height: 24px !important;
    }
}

/*  DẢI CHỮ CHẠY CỦA VỎ MOBILE KHÔNG ĐƯỢC HIỆN Ở KHỔ MÁY TÍNH — vỏ máy tính đã có chữ chạy riêng trong
    dải tiện ích (ngày giờ · RSS · EN · tìm kiếm) ⇒ hiện cả hai là TRÙNG (user 2026-08-06: "bỏ dòng chữ
    chạy trên cùng nhé, bị trùng với chữ chạy ở dưới"). Các khối khác của vỏ mobile (#toolbar,
    .qirp-menu-wrap, .qirp-vo-mb, chân trang mobile) đã ẩn đúng, riêng dải này còn sót. */
/*  🔴 PHẢI KÈM `.d-flex` (sửa 2026-08-12 — user: "/homegdhprp đang thừa thanh chữ chạy trên đầu so với
    bản chính"). Thẻ này mang CẢ hai lớp: `class="qirp-hang-chuchay d-flex"`, mà `.d-flex` của Bootstrap
    cũng là `display: flex !important`. Hai bên **cùng độ ưu tiên (0,1,0) và cùng có !important** ⇒ ai
    nạp SAU thì thắng — trên trang này Bootstrap nạp sau nên dải chữ chạy của vỏ mobile vẫn hiện ở khổ
    máy tính, thành hai dải trùng nhau. Viết `.qirp-hang-chuchay.d-flex` (0,2,0) để thắng chắc chắn,
    không phụ thuộc thứ tự tệp. */
@media (min-width: 992px) {
    .qirp-hang-chuchay,
    .qirp-hang-chuchay.d-flex { display: none !important; }
}

/*  Ô tìm kiếm trên dải tiện ích nằm trong thẻ bọc có đệm dọc 8px nên tâm của nó CAO HƠN các mục còn
    lại 4px (đo: ô tìm kiếm tâm y=269 · RSS/EN/khay ngôn ngữ tâm y=273). Cho thẻ bọc tự căn giữa để
    cả dải thẳng một hàng. */
@media (min-width: 992px) {
    .qirp-vo-pc .qiMenuTime_flex .d-flex > .ml-auto,
    .qirp-vo-pc .qiMenuTime .d-flex > .ml-auto {
        align-self: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* =====================================================================================================
   KHỐI SLIDE (họ giao diện chung) — KHE TỚI CÁC KHỐI BÊN CẠNH ĐÚNG 10px TRÊN BẢN MÁY TÍNH
   (user chốt 2026-08-06: "các giao diện có khối slide chỉnh lại khoảng cách đến các khối khác là 10px").
   Đo trước khi sửa trên /homegd1rp @1620px: cột chứa slide có đệm `0 4px 0 12px` và hàng lùi lề -12px
   ⇒ khe từ menu dọc tới slide chỉ **5px**, từ slide sang cột phải **4px**.
   Cách sửa giống hệt bản Hà Nội: hàng bỏ lề âm, mỗi cột đệm 5px ⇒ hai cột cạnh nhau cách nhau 10px và
   mép ngoài cách khung 5px (cộng đệm 5px của #MainContent thành 10px).
   Chỉ nhắm HÀNG CÓ SLIDE nên không đụng bố cục các khối khác.
   ===================================================================================================== */
@media (min-width: 992px) {
    .qirp .row:has(.demo-slider-3),
    .qirp .row:has(.qirp-slide-cu),
    .qirp .row:has(.qirp-slide-moi) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .qirp .row:has(.demo-slider-3) > [class*="col"],
    .qirp .row:has(.qirp-slide-cu) > [class*="col"],
    .qirp .row:has(.qirp-slide-moi) > [class*="col"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

@media (min-width: 992px) {
    /*  Cột chứa slide thường nằm trong MỘT hàng con nữa ⇒ mép trái của slide bị cộng thêm 5px của
        hàng con (đo: menu dọc kết thúc 642 · slide bắt đầu 658 = 16px, trong khi bên phải đúng 10px).
        Bỏ đệm trái của chính cột chứa slide để hai bên bằng nhau. */
    .qirp .row > [class*="col"]:has(> .demo-slider-3),
    .qirp .row > [class*="col"]:has(> .qirp-slide-cu),
    .qirp .row > [class*="col"]:has(> .qirp-slide-moi),
    .qirp .row > [class*="col"]:has(> div > .demo-slider-3) {
        padding-left: 0 !important;
    }
}

/* =====================================================================================================
   ĐIỆN THOẠI — CHỮ TRONG KHỐI CŨ PHẢI CÁCH HAI MÉP 10px VÀ CÁCH ẢNH CHÍNH 10px
   (user 2026-08-06 trên /homehcmrp: "chữ còn dính vào ảnh chính, chưa đúng quy tắc phân cách so với
   2 mép 10px").
   Khối "phòng ban" của Sở HCM (và các khối cũ cùng kiểu) dựng: ảnh tràn viền → `a.qitieudechinh` →
   `p.time` → danh sách `.listitem`. Ở khổ máy tính chúng nằm trong `col-*` có đệm nên trông ổn; khi
   dồn MỘT CỘT trên điện thoại thì các cột hết đệm ⇒ đo được tiêu đề và ngày **lệch 0px** khỏi mép
   khối và **dính sát đáy ảnh (khe 0px)**, còn `.listitem` chỉ có đệm TRÁI 10px (phải 0).
   Ảnh chính CỐ Ý để tràn hết bề ngang (đúng kiểu trang tin trên điện thoại), chỉ chữ mới lùi 10px.
   ===================================================================================================== */
/*  🔴 SỬA LẠI 2026-08-07 (user: "trên phiên bản mobile responsive chưa căn lề 2 bên chuẩn 10px"):
    lượt trước đặt đệm 10px cho CHÍNH thẻ chữ, nhưng `#MainContent` của bản rp ĐÃ có đệm 10px ⇒ đo được
    tiêu đề khối · vạch · ảnh đứng ở **10px** còn tiêu đề tin / ngày / danh sách ở **20px** (khối
    "Bản tin cải cách hành chính" trong ảnh user gửi), tức lệch nhau 10px chứ không phải "cách mép 10px".
    Nay MỌI thứ trong khối cũ căn cùng một mốc 10px: thẻ chữ bỏ đệm ngang, và bỏ luôn hai nguồn thụt
    khác — `.qilinoimage` (đệm 4px) và thụt đầu dòng mặc định 40px của `<ul>` (khối "Văn bản" đo được
    chữ ở 50px). Khe DỌC giữa ảnh chính và tiêu đề (10px) giữ nguyên. */
@media (max-width: 991.98px) {
    .qirp .qirp-cu .qitieudechinh,
    .qirp .qirp-cu p.time,
    .qirp .qirp-cu p.qisummaryhome,
    .qirp .qirp-cu .listitem,
    .qirp .qirp-cu .qilinoimage {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .qirp .qirp-cu .qitieudechinh {
        display: block;
        margin-top: 10px !important;   /* khe giữa ảnh chính và tiêu đề */
    }
    /*  Thụt đầu dòng mặc định của trình duyệt (40px) — markup cũ để <ul> trần trong khối "Văn bản",
        ở khổ máy tính nằm trong cột có đệm nên không lộ. */
    .qirp .qirp-cu ul {
        padding-left: 0 !important;
    }

    /*  NGUỒN THỤT CUỐI CÙNG: THANH BAR HOVER 3px. `qistyleall-modern.css` cho mỗi mục tin
        `border-left: 3px solid transparent` (+ đệm 6px 10px) để tô màu khi rê chuột ⇒ chữ luôn lệch
        thêm 3px (đo: 13px thay vì 10px ở các khối chuyên mục, 14px ở khối "Văn bản" vì thẻ bọc còn
        viền 1px). Trên ĐIỆN THOẠI không có thao tác rê chuột nên bỏ hẳn thanh bar + đệm ngang của
        mục tin để mọi thứ thẳng một mốc 10px; bản máy tính (≥992px) giữ nguyên thanh bar. */
    .qirp .qirp-cu .qiContainer_border li,
    .qirp .qirp-cu .qiContainer_border .qilinoimage,
    .qirp .qirp-cu .qiContainer_border .qigd3right,
    .qirp .qirp-cu .qiContainer_border > .row.mx-0:not(.qiheight4) > :has(a.qitieudechinh),
    .qirp .qirp-cu .itemthongbao,
    .qirp .qirp-cu .mq13 li,
    .qirp .qirp-cu .heightvanban li,
    .qirp .qirp-cu .van-ban li,
    .qirp .qirp-cu .qiheightTop li,
    .qirp .qirp-cu .tieudiemmtop li,
    .qirp .qirp-cu .itemHomeTop {
        border-left-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =====================================================================================================
   MENU DỌC "DANH MỤC" — CỠ CHỮ + ĐỆM Y HỆT BẢN /homehcm
   (user 2026-08-07: "cập nhật lại font chữ Danh mục giống với bản homehcm").
   Đo trước khi sửa @1440px: bản rp 14.5px / đệm 10px 16px · /homehcm 12.5px / đệm 10px — chữ menu là
   IN HOA nên ở cột 240–270px cỡ 14.5px trông quá lớn (user đã chốt giảm cho /homehcm ngày 06/08 trong
   `qi-modern.css`, nay áp cùng số đo cho bản responsive).
   🔑 BẮT BUỘC có `#sidebar` (ID) trong bộ chọn: `qistyleall-modern.css` khai
   `body #sidebar .qimenudoc a { font-size: 14.5px !important }` — có ID nên thắng mọi bộ chọn chỉ-toàn-lớp
   dù mình để !important và đứng sau.
   Phạm vi ≥992px = đúng phạm vi của rule bên /homehcm (khổ hẹp menu dọc nằm cuối trang, giữ như cũ).
   ===================================================================================================== */
@media (min-width: 992px) {
    .qirp #sidebar .qimenudoc li > a,
    .qirp #sidebar .qimenudoc a,
    .qirp #sidebar .qimenudoc .qitonggle {
        padding: 10px !important;
        font-size: 12.5px !important;
    }
}

/* =====================================================================================================
   BẢN MÁY TÍNH — KHE DỌC GIỮA HAI KHỐI TRONG CÙNG MỘT CỘT LUÔN LÀ 10px
   (user 2026-08-07: "các khối đang bị dính vào nhau", ảnh chụp cột trái /homehcmrp @1920px).
   Trước khi sửa, khổ ≥992px KHÔNG có luật khe nào cho `.qirp-o` — khoảng cách phó mặc cho lề của
   chính khối HTML cũ nên mỗi chỗ một kiểu: đo được cột trái **-14px (chồng lên nhau)**, cột giữa
   **0 và 8px**, cột phải **24 và 8px**.
   🔑 THỦ PHẠM CHỒNG KHỐI KHÔNG NẰM TRONG CSS DỰ ÁN: phần "Thông tin chân trang" của đơn vị (SiteConfig
   FooterInfo, LƯU TRONG CSDL) có kèm nguyên một khối <style> vá riêng cho bố cục trang chủ cũ —
   `.pb-2 { margin-top: -24px !important }` (đè lớp tiện ích pb-2 của Bootstrap trên TOÀN TRANG) và
   `.rightitem.van-ban { margin-top: 24px !important; height: 640px }`. Vì là DỮ LIỆU nên không sửa,
   phải trung hoà ngay trong phạm vi `.qirp` (bộ chọn 3 lớp + !important nên thắng `.pb-2` một lớp).
   Bản mobile giữ nguyên luật cũ trong khối @media ≤991.98px (khe 10px + dải xám ngăn cách).
   ===================================================================================================== */
@media (min-width: 992px) {
    .qirp .qirp-o + .qirp-o { margin-top: 10px; }

    /*  Khối HTML cũ mang lề ngoài riêng (10px, -24px, 24px…) ⇒ cộng/trừ vào khe trên. Khe do thẻ bọc
        `.qirp-o` lo, nên con trực tiếp của khối bỏ hết lề dọc. */
    .qirp .qirp-o > .qirp-khoi > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* =====================================================================================================
   BẢN MÁY TÍNH — DANH SÁCH TIN TRONG KHỐI CŨ: NỀN TRÀN HẾT Ô, CHỮ LÙI ĐÚNG 10px
   (user 2026-08-07 trên /homehcmrp: "khối văn bản bị lỗi khoảng cách lớn chưa đáp ứng 10px tiêu chuẩn,
   những ô tin nào có background thì background dàn full ô luôn").
   Đo trước khi sửa ở khối "VĂN BẢN" (rộng 300px): `<ul>` trần mang **đệm trái 32px** (mặc định
   `ul` của Bootstrap = 2rem) ⇒ mỗi `li` bắt đầu ở x=33 rộng 256 và chữ ở x=36; các dòng chẵn có
   nền #f7f7f7 nên nhìn rõ một dải trắng thừa bên trái (đúng chỗ user khoanh đỏ).
   Sửa: bỏ thụt của `<ul>` ⇒ ô tin chiếm trọn bề ngang khối (nền/viền tràn hết), rồi trả lại 10px
   bằng ĐỆM CỦA CHÍNH Ô nên chữ vẫn cách mép 10px mà nền không hụt.
   (Khổ ≤991px đã xử lý ở mục "ĐIỆN THOẠI — CHỮ TRONG KHỐI CŨ…" bên trên.)
   ===================================================================================================== */
@media (min-width: 992px) {
    .qirp .qirp-cu ul { padding-left: 0 !important; }

    /*  Ô tin: đệm TRÁI 7px + thanh bar hover 3px = ĐÚNG 10px (cùng cách tính đã chốt cho /homehcm
        trong `qi-modern.css`), đệm phải 10px. */
    .qirp .qirp-cu .mq13 li,
    .qirp .qirp-cu .van-ban li,
    .qirp .qirp-cu .heightvanban li,
    .qirp .qirp-cu .qiheightTop li,
    .qirp .qirp-cu .tieudiemmtop li,
    .qirp .qirp-cu .qiContainer_border > ul > li,
    .qirp .qirp-cu .itemthongbao,
    .qirp .qirp-cu .listitem,
    .qirp .qirp-cu .itemHomeTop {
        padding-left: 7px !important;
        padding-right: 10px !important;
    }

    /*  🔴 TIÊU ĐỀ TIN VÀ NGÀY THÁNG PHẢI THẲNG HÀNG (user 2026-08-07): `p.time` của markup cũ mang thêm
        `padding-left: 3px` riêng ⇒ đo được tiêu đề tin ở 15px còn ngày ở 18px trong mọi khối. Bỏ đệm
        riêng đó để cả hai ăn theo đúng đệm của Ô TIN. */
    .qirp .qirp-cu p.time,
    .qirp .qirp-cu .time,
    .qirp .qirp-cu .qitieudechinh,
    .qirp .qirp-cu p.qisummaryhome {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /*  Thanh TIÊU ĐỀ khối: markup cũ đệm trái 22px ⇒ tên khối lệch hẳn so với ô tin (đo: tiêu đề 23px,
        ô tin 14px). Đưa về 10px và kéo vạch màu `::before` về sát mép — y bản /homehcm. */
    .qirp .qirp-cu .qihome_tieudebg {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .qirp .qirp-cu .qihome_tieudebg::before { left: 0 !important; }
}

/* =====================================================================================================
   ĐIỆN THOẠI — KHỐI "VĂN BẢN / THÔNG BÁO / THƯ MỜI" PHẲNG NHƯ CÁC KHỐI KHÁC
   (user 2026-08-07: "khi hiển thị trên mobile thì bỏ phần border ngoài và bổ sung thanh phân tách khối
   như các khối khác").
   Ba khối này là thẻ CARD của bản desktop: `.rightitem.van-ban` và `.noidungthongbao` có viền 1px, nền
   trắng và **chiều cao ghim cứng 640px / 600px** (số ghim nằm trong CSS của FooterInfo lấy từ CSDL) nên
   trên điện thoại thành một khung có thanh cuộn riêng, khác hẳn các khối còn lại (đã phẳng, chỉ ngăn
   nhau bằng dải xám 8px của `.qirp-o`).
   ===================================================================================================== */
@media (max-width: 991.98px) {
    /*  `.mq13` là KHUNG CUỘN bên trong khối Văn bản: chiều cao 600px đặt NỘI TUYẾN trong HTML do BO
        dựng (nên phải !important mới đè được) + `overflow-y:auto !important` của qistyleall-modern
        ⇒ trên điện thoại vẫn còn một khung cuộn riêng với thanh cuộn, nhìn như "thanh thừa" và nền
        khác các khối khác (user 2026-08-07). */
    .qirp .qirp-cu .mq13,
    .qirp .qirp-cu .rightitem,
    .qirp .qirp-cu .noidungthongbao,
    .qirp .qirp-cu .heightvanban,
    .qirp .qirp-cu .qiContainer.thongbao,
    .qirp .qirp-cu .qiContainer.thumoi {
        border: 0 !important;
        background: transparent !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        /*  🔴 BỎ CẢ BÓNG ĐỔ: `.rightitem` còn `box-shadow: rgba(16,32,52,.04) 0 1px 2px…` của kiểu THẺ
            CARD ⇒ nhìn vẫn như có một đường viền mảnh bao quanh khối (user 2026-08-07: "khối văn bản
            hình như vẫn có 1 đường bo viền bên ngoài"). Các khối khác trên ĐT đều phẳng, không bóng. */
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

/* =====================================================================================================
   BA MẪU TỰ DỰNG VỎ (gd13x Thủ Đức · gd14x va gd1413 Hóc Môn) — KHỔ MÁY TÍNH GIỮ ĐÚNG BẢN GỐC
   (user 2026-08-07: "/homegd13rp, /homegd14rp, /homegd1413rp chưa giống bản desktop gốc").
   Thân trang của ba mẫu này CHỨA LUÔN bộ vỏ (thanh menu `.container.w-1300` rộng 1300px). Khung nội
   dung của bản rp lại giới hạn 1128px + đệm 12px ⇒ đo ở 1430px: menu bắt đầu x=168 (bản gốc canh giữa
   x=65) và trang tràn ngang 38px. Ở ≥992px gỡ giới hạn cho riêng ba mẫu này; ≤991px vẫn dùng thân
   trang chung của bản rp (đã chốt 2026-08-06) nên giữ nguyên khung.
   ===================================================================================================== */
@media (min-width: 992px) {
    #MainContent.qirp-tuvo {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}

/* =====================================================================================================
   ĐIỆN THOẠI — Ô TIN CỦA KHỐI "VĂN BẢN" (và các khối dùng <ul><li>) THEO ĐÚNG NHỊP CỦA CÁC KHỐI KHÁC
   (user 2026-08-07: "khối văn bản trên mobile rp vẫn chưa đúng so với các khối khác").
   Đo trước khi sửa @440px: `.listitem` của các khối khác = `padding: 0 0 10px` + `margin: 0 0 10px`
   + `border-bottom: 1px #d7dbe0` (chữ cách vạch 10px trên/dưới), còn `li` của khối Văn bản =
   `padding: 12px 0` + `border-TOP: 1px #dddddd` ⇒ vạch nằm TRÊN, khe 12px và màu vạch khác.
   ===================================================================================================== */
@media (max-width: 991.98px) {
    .qirp .qirp-cu .mq13 li,
    .qirp .qirp-cu .van-ban li,
    .qirp .qirp-cu .heightvanban li,
    .qirp .qirp-cu .qiheightTop li,
    .qirp .qirp-cu .tieudiemmtop li {
        padding-top: 0 !important;
        padding-bottom: 10px !important;
        margin: 0 0 10px !important;
        border-top: 0 !important;
        border-bottom: 1px solid #d7dbe0 !important;
    }
    /*  Màu vạch: phải khai với ID (`#MainContent`) mới thắng rule khác đang đặt màu tối #4d4d4d,
        cho trùng #d7dbe0 của `.listitem` các khối khác. */
    #MainContent.qirp .qirp-cu .mq13 li,
    #MainContent.qirp .qirp-cu .van-ban li,
    #MainContent.qirp .qirp-cu .heightvanban li,
    #MainContent.qirp .qirp-cu .qiheightTop li,
    #MainContent.qirp .qirp-cu .tieudiemmtop li { border-bottom-color: #d7dbe0 !important; }

    /* mục CUỐI không kẻ vạch, không đệm dưới — y hệt `.listitem:last-child` của các khối khác */
    .qirp .qirp-cu .mq13 li:last-child,
    .qirp .qirp-cu .van-ban li:last-child,
    .qirp .qirp-cu .heightvanban li:last-child,
    .qirp .qirp-cu .qiheightTop li:last-child,
    .qirp .qirp-cu .tieudiemmtop li:last-child {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 0 !important;
    }
}

/* =====================================================================================================
   ĐIỆN THOẠI — NÚT "XEM THÊM" XUỐNG ĐÁY KHỐI, KIỂU PILL NHƯ BẢN /homemb
   (user 2026-08-07: "chuyển nút xem thêm xuống dưới cùng của các khối như các bản mobile khác").
   Markup cũ đặt `a.xem-them` trong THANH TIÊU ĐỀ (góc phải, 89×22). Giữ nguyên thẻ + href, chỉ đổi chỗ
   bằng CSS: thanh tiêu đề về `position: static` để nút bám THẺ KHỐI, khối chừa 55px ở đáy.
   🔑 Vạch màu đầu khối vẽ bằng `.qihome_tieude::before` **inline-block** (không định vị) nên đổi
   positioning của thanh tiêu đề KHÔNG làm lệch vạch — đã kiểm.
   ===================================================================================================== */
@media (max-width: 991.98px) {
    .qirp .qirp-cu .qihome_tieudebg { position: static !important; }

    /*  Gốc định vị là THẺ KHỐI CHỨA NÚT chứ không phải cả `.qirp-o`: khối "Thông báo | Thư mời" là MỘT
        `.qirp-o` gồm HAI thẻ card, mỗi thẻ một nút ⇒ neo vào `.qirp-o` thì hai nút chồng lên nhau ở
        đáy (đo: nút của Thông báo cách đáy 1194px). */
    .qirp .qirp-cu .qiContainer:has(> .qihome_tieudebg .xem-them),
    .qirp .qirp-cu .rightitem:has(> .qihome_tieudebg .xem-them),
    .qirp .qirp-cu .qiContainer_border:has(> .qihome_tieudebg .xem-them) {
        position: relative;
        padding-bottom: 55px !important;
    }
    /* dự phòng: khối không có thẻ card riêng thì neo vào chính `.qirp-o` */
    .qirp .qirp-o:has(.xem-them) { position: relative; }

    .qirp .qirp-cu a.xem-them {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 45px;
        padding: 11px 18px !important;
        border: 1px solid var(--mau-md, #004ccb);
        border-radius: 999px;
        background: transparent !important;
        color: var(--mau-md, #004ccb) !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        text-decoration: none;
    }

    /* mũi tên/ảnh nhỏ sẵn có trong nút — bỏ cho gọn, nhãn giữ nguyên chữ của bản cũ */
    .qirp .qirp-cu a.xem-them img,
    .qirp .qirp-cu a.xem-them i { display: none !important; }
}

/* =============================================================================
   DẢI TAB "TIN NỔI BẬT / TIN MỚI NHẤT / TIN XEM NHIỀU" — PHẢI NẰM TRỌN MỘT DÒNG
   (user báo 2026-08-12 trên sgddt.dongnai.gov.vn/homegd6rp: "lỗi bản rp đang không đúng bản thật")

   Đo tại khổ 1720px, cùng đơn vị, cùng cỡ chữ 12px và cùng đệm:
     · bản thật `/homegd6`   → cột phải rộng **292px**, ba mục tổng **281px** ⇒ vừa MỘT dòng;
     · bản rp   `/homegd6rp` → cột phải chỉ **266px**                        ⇒ mục thứ 3 RỚT xuống dòng 2.
   Cột rp hẹp hơn 26px vì khung rp dùng `max-width:1128px` và thay lề âm của Bootstrap bằng đệm 5px ở
   BA cấp lồng nhau (xem phần "khung trang" ở đầu tệp) — nới lại là đụng cả lưới ba cột.

   Nên xử lý ngay ở dải tab, hai lớp bảo đảm:
     ① bóp đệm ngang của mục tab 7px → 2px (bớt 20px, còn 261px ⇒ vừa 266px);
     ② nếu tenant nào dùng bộ chữ rộng hơn mà vẫn quá khổ thì CHO TRƯỢT NGANG chứ không xuống dòng —
        `flex-wrap: nowrap` + `overflow-x:auto` (ẩn thanh trượt) vẫn giữ đúng một dòng như bản thật.
   ========================================================================== */
.qirp .qitabtop {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.qirp .qitabtop::-webkit-scrollbar { display: none; }

.qirp .qitabtop > li { min-width: 0; }

.qirp .qitabtop > li > a {
    padding-left: 2px !important;
    padding-right: 2px !important;
    white-space: nowrap;
}

/* =============================================================================
   NÚT "XEM THÊM" CỦA KHỐI TIN LIÊN THÔNG (Tin từ Sở GD&ĐT) — user báo 2026-08-12:
   "chữ xem thêm khối tin từ sở bị dính vào chữ và viền của tin".

   Đo trên `/homegd2rp` khổ 375px: thẻ bọc `.rssxemthem` có `margin: 0 0 10px` và `padding: 0`, nút bên
   trong chỉ có `margin-left: 10px` ⇒ **khe phía trên = −6px**, tức nút ĐÈ LÊN dòng tin cuối, đồng thời
   nằm sát viền trái của khối.
   ========================================================================== */
.qirp .rssxemthem {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    padding: 0 10px;
}

.qirp .rssxemthem > * {
    margin-left: 0 !important;   /* đã có padding của thẻ bọc, bỏ lề trái để nút thẳng mép chữ tin */
}

/* =============================================================================
   DẢI TAB "CHÍNH PHỦ ĐIỆN TỬ / LỊCH CÔNG TÁC" (khối cột phải) — user báo 2026-08-12:
   "chữ bị tràn so với bản chính".

   Đo trên `/homegdhprp` khổ 1720px: `ul.tab_items_head` rộng **347px**, hai mục chia đôi (173px mỗi
   mục) nên "CHÍNH PHỦ ĐIỆN TỬ" bị bẻ thành **3 dòng** (cao 58px). Bản chính cột rộng hơn nên vừa một
   dòng. Cùng một loại với dải `.qitabtop` đã sửa ở trên: cột của bản rp hẹp hơn do khung 1128px + đệm
   5px ba cấp.

   Cách xử lý cũng như vậy: cấm bẻ dòng, bóp đệm ngang, và nếu vẫn quá khổ thì CHO TRƯỢT NGANG chứ
   không xuống dòng.
   ========================================================================== */
.qirp .tab_items_head {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.qirp .tab_items_head::-webkit-scrollbar { display: none; }

.qirp .tab_items_head .nav-item { flex: 0 1 auto; min-width: 0; }

.qirp .tab_items_head .nav-link {
    white-space: nowrap;
    padding-left: 10px !important;
    padding-right: 10px !important;
}