/* responsive-fixes.css — các sửa responsive sau đợt kiểm tra 2026-10-22 (docs/module-news/58, Phase 53/54).
   Chỉ ghi đè bằng CSS skin (không sửa Portals/0/portal.css, không sửa nội dung DB). Mỗi khối ghi rõ lỗi đã đo. */

/* ---- 1. Iframe Google Maps chân trang có width="600" cố định (module HTML 760, nội dung trong DB): làm trang chủ rộng 600px, cuộn ngang
        trên điện thoại và popup (position: fixed) bị cắt. Cho co theo khung. ---- */
iframe[src*="google.com/maps"],
iframe[src*="maps.google"] {
    max-width: 100% !important;
}
@media (max-width: 767px) {
    iframe[src*="google.com/maps"],
    iframe[src*="maps.google"] { width: 100% !important; }
}

/* ---- 2. Popup trang chủ (module PopUpModal, Bootstrap modal): nội dung HTML của module đặt cứng height:350px nên poster dọc/PDF chỉ thấy nửa trên;
        nút đóng × chỉ 28px. Trên điện thoại: chiều cao theo màn hình, nút × to hơn, nằm trong màn hình. ---- */
@media (max-width: 767px) {
    #popUp .modal-dialog { margin: 12px 10px; }
    #popUp .modal-body > div[style*="height"] {
        height: 70vh !important;
        height: min(72vh, 520px) !important;
        min-height: 260px;
    }
    #popUp .close {
        width: 38px !important;
        height: 38px !important;
        top: -12px !important;
        right: -6px !important;
        font-size: 24px;
    }
}
@media (max-width: 767px) and (orientation: landscape) {
    #popUp .modal-body > div[style*="height"] { height: 76vh !important; height: min(76vh, 520px) !important; }
}

/* ---- 3. Menu ngang 992-1199px: 7 mục chữ 17px (~794px) + ô ngày giờ (257px) rộng hơn khung 960px -> ô ngày giờ đè lên mục cuối.
        Thu cỡ chữ/đệm của mục cấp 1 trong dải này (từ 1200px trở lên giữ nguyên). ---- */
@media (min-width: 992px) and (max-width: 1099px) {
    #megamenu > li.level0 > a { font-size: 13.5px; padding-left: 7px; padding-right: 7px; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
    #megamenu > li.level0 > a { font-size: 14px; padding-left: 8px; padding-right: 8px; }
}

/* ---- 4a. Ảnh banner đầu trang trong (module HTML 549, ảnh có style inline height:470px; width:1400px) bị bóp méo và chiếm ~470px
         chiều cao điện thoại: giữ tỉ lệ (cắt giữa) và thấp hơn. ---- */
@media (max-width: 991px) {
    section.header #dnn_headerPane img {
        width: 100% !important;
        object-fit: cover;
        object-position: center;
        display: block;
    }
}
@media (max-width: 575px) { section.header #dnn_headerPane img { height: 190px !important; } }
@media (min-width: 576px) and (max-width: 767px) { section.header #dnn_headerPane img { height: 260px !important; } }
@media (min-width: 768px) and (max-width: 991px) { section.header #dnn_headerPane img { height: 340px !important; } }

/* ---- 4b. Khối nền xanh "Một số kỹ thuật nổi bật / Hướng đến người bệnh" trên điện thoại: lề/đệm chồng nhau làm thẻ chỉ rộng 272/350px,
         ảnh thẻ cao cố định 300px + object-fit:cover cắt mất chữ trên poster (luật gốc ở Portals/0/portal.css, ghi đè bằng ID + !important). ---- */
@media (max-width: 767px) {
    html body section.green_bg { margin: 0 10px 24px !important; padding: 22px 6px !important; border-radius: 16px !important; }
    html body #dnn_DVnoibatPane,
    html body #dnn_HDPane { padding-left: 0 !important; padding-right: 0 !important; }
    html body #dnn_HDPane { margin-top: 28px; }
    html body :is(#dnn_DVnoibatPane, #dnn_HDPane) ul { margin-left: 0 !important; padding-left: 0 !important; }   /* <ul> có lề trái 18px làm thẻ lệch phải */
    html body :is(#dnn_DVnoibatPane, #dnn_HDPane) .cate_list_news_green { height: auto !important; }
    html body :is(#dnn_DVnoibatPane, #dnn_HDPane) .cate_list_news_green > a:first-child { height: auto !important; background: #eef7fb !important; }
    html body :is(#dnn_DVnoibatPane, #dnn_HDPane) .cate_list_news_green > a:first-child img {
        height: auto !important;
        max-height: 340px;
        object-fit: contain !important;
    }
}