/* =====================================================================================================
   TRANG TRONG (chuyên mục · chi tiết tin · văn bản · giới thiệu…) khi đơn vị bật DMDonVi.Is_auto_Responive.

   User chốt 2026-08-04: "đã tích Is_auto_Responive thì không dùng bản mobile hay tab riêng nữa" ⇒ các
   trang trong dùng ĐÚNG markup desktop cũ nhưng phải co giãn được. Tệp này chỉ chứa phần BÙ cho khổ hẹp;
   trên máy tính (>991px) KHÔNG có rule nào chạy nên bản desktop giữ nguyên 100%.

   Phạm vi: bọc trong `.qirp` — lớp mà layout `_MasterResponsive` đặt quanh phần thân trang, nên tệp này
   không thể ảnh hưởng các trang dùng layout desktop cũ.

   Số đo lấy từ hiện trạng (đo trên /gioi-thieu/c/15110 ở 414px): `article.d-flex` để `flex-wrap: nowrap`
   nên cột menu trái 280px + cột nội dung nằm CẠNH nhau trong 388px ⇒ nội dung chỉ còn 256px và bị lệch
   ra ngoài. Vì vậy việc chính ở đây là cho các hàng flex của bố cục cũ xuống dòng.
   ===================================================================================================== */

@media (max-width: 991.98px) {

    /* ---------- 1. Bố cục hai cột của trang trong → một cột ---------- */
    /* `main.center-column` có padding ngang cho khổ máy tính; ở khổ hẹp chừa 10px như thân trang rp */
    .qirp main.center-column { padding-left: 10px !important; padding-right: 10px !important; }

    .qirp main.center-column .pd-15,
    .qirp main.center-column .pd-20 { padding: 0 !important; }

    /* hàng chứa [menu trái | nội dung] và các hàng flex tương tự của markup cũ */
    .qirp main.center-column article.d-flex,
    .qirp main.center-column aside.d-flex,
    .qirp .detail_content_page > .d-flex { flex-wrap: wrap !important; }

    /* NỘI DUNG chiếm hết bề rộng và LÊN TRƯỚC; cột phụ (thống kê/menu/liên kết) xuống dưới */
    .qirp .right_detail_content {
        width: 100% !important;
        max-width: 100% !important;
        order: 1;
    }

    .qirp .left_detail_content {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        order: 2;
        margin-top: 14px;
    }

    /* ---------- 2. Không để nội dung bài viết kéo ngang trang ---------- */
    /* Bài viết cũ hay dán ảnh/bảng/iframe với bề rộng cứng (width="800", style="width:750px"…).
       🔴 PHẢI TRỪ `.item-ratio` (thêm 2026-08-11): đó là ảnh nằm trong HỘP TỈ LỆ, cần bám khít bốn
       cạnh hộp. Quy tắc `height: auto !important` bên dưới kéo nó về chiều cao tự nhiên (đo được
       252px trong hộp 212px) ⇒ thừa 40px tràn xuống ĐÈ LÊN TIÊU ĐỀ tin — đúng lỗi user báo
       "chữ lại chèn lên ảnh". Ảnh trong thân bài viết vẫn được co giãn như cũ. */
    .qirp .right_detail_content img:not(.item-ratio),
    .qirp .detail_news_content img:not(.item-ratio),
    .qirp .qicontentdetail img:not(.item-ratio) { max-width: 100% !important; height: auto !important; }

    .qirp .right_detail_content iframe,
    .qirp .detail_news_content iframe,
    .qirp .qicontentdetail iframe { max-width: 100% !important; }

    /* bảng dài thì cho cuộn ngang TRONG khung của nó, không đẩy cả trang */
    .qirp .right_detail_content table,
    .qirp .detail_news_content table,
    .qirp .qicontentdetail table { max-width: 100% !important; display: block; overflow-x: auto; }

    /* ---------- 3. Thanh công cụ bài viết (chọn phông chữ / cỡ chữ / chia sẻ) ----------
       Hàng này để `flex-row` không xuống dòng nên ở 414px thừa ra ~20px (đo được: rộng 324px trong khung
       384px nhưng bị đẩy lệch phải). Cho xuống dòng và bỏ đệm cứng. */
    .qirp .action_button_change,
    .qirp .action_detail_news,
    .qirp .font-change { flex-wrap: wrap !important; }

    .qirp .font-change.pr-15 { padding-right: 0 !important; }

    /* ---------- 4. Phân trang ----------
       Trang danh sách văn bản có tới 38 nút trang trong một hàng `d-flex … nowrap` (đo trên
       /van-ban/vbplus/44037) ⇒ dãy nút chạy ra ngoài khung. Cho xuống dòng và thu nhỏ nút. */
    .qirp .pagination-ys,
    .qirp .pagination { flex-wrap: wrap !important; row-gap: 6px; }

    .qirp .pagination-ys .btn { margin-left: 2px !important; margin-right: 2px !important; }

    /* ---------- 5. Cỡ chữ dễ đọc trên điện thoại ---------- */
    .qirp .right_detail_content { font-size: 16px; }
    .qirp .fs-21 { font-size: 19px !important; }
    .qirp .breadcrumb_list { flex-wrap: wrap; }
    .qirp .bread { padding: 8px 0 !important; }

    /* ---------- 5b. LỀ TRANG: gộp về đúng 10px ----------
       User báo 2026-08-11 "lề trang hơi rộng so với 10px". Đo trên /tin-tuc-su-kien/c/525 ở 440px:
       lề bị CỘNG DỒN nhiều tầng — `.qirp` 10px + `main.center-column` 10px = 20px cho chữ đường dẫn,
       rồi thẻ tin còn thêm lớp bọc `p-10` nữa thành 31px. Bỏ các tầng đệm bên trong, chỉ giữ 10px
       duy nhất ở `.qirp` — mọi khối khi đó thẳng hàng ở đúng 10px như chuẩn đang dùng. */
    .qirp main.center-column { padding-left: 0 !important; padding-right: 0 !important; }
    .qirp main.center-column > aside.pd-15,
    .qirp .right_detail_content > aside.p-10,
    .qirp .chuyenmuc_cate > aside.p-10 { padding-left: 0 !important; padding-right: 0 !important; }

    /* ---------- 6. ĐƯỜNG DẪN (breadcrumb): chữ chồng nhau ----------
       User báo 2026-08-11 "chữ lộn xộn": mục "Trang chủ" cao 44px trong khi mục sau chỉ 21px, hai mục
       lệch hẳn nhau. Nguyên nhân: mỗi `li` có `::after` làm dấu phân cách, mà `li` là `list-item` với
       `white-space: normal` nên dấu đó rơi xuống DÒNG THỨ HAI ⇒ mục đầu cao gấp đôi, còn `ul` lại
       `align-items: center` nên mục sau bị đẩy lệch xuống giữa. Cho mỗi mục thành một hàng ngang
       không xuống dòng là hết. */
    .qirp .breadcrumb_list > li {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }
    .qirp .breadcrumb_list > li > a { white-space: normal; }

    /* ---------- 7. ẢNH TIN ĐÈ LÊN TIÊU ĐỀ ----------
       User báo 2026-08-11 "chữ lại chèn lên ảnh". Đo trên /tin-tuc-su-kien/c/525 ở 440px:
       khung ảnh `.image_big_item` là hộp tỉ lệ (`padding-top: 56%`) cao 212px, nhưng ảnh
       `.item-ratio` lại cao 252px ⇒ thừa 40px tràn xuống, đè lên tiêu đề bên dưới.
       `height: 100%` của ảnh không cho kết quả đúng ở đây; ghim bốn cạnh (`inset: 0`) thì ảnh luôn
       vừa khít hộp tỉ lệ, không phụ thuộc cách trình duyệt tính phần trăm chiều cao. */
    .qirp .image_big_item,
    .qirp .image_item_news { display: block; overflow: hidden; }

    .qirp .image_big_item > .item-ratio,
    .qirp .image_item_news > .item-ratio,
    .qirp a > img.item-ratio {
        position: absolute;
        inset: 0;                    /* = top/right/bottom/left: 0 — vừa khít hộp tỉ lệ */
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}