/* =============================================================
   Trang chủ DanGroup
   - Menu (header) -> Logo lớn ở giữa -> Slider banner
   - Desktop: gói gọn trong 1 màn hình (không cuộn)
   - Mobile: bố cục lại + menu hamburger
   ============================================================= */

/* Ẩn logo nhỏ góc trái ở trang chủ (đã có logo lớn ở giữa) */
body.homeTop .siteLogo {
    display: none !important;
}

/* Trang chủ DESKTOP: ẩn các menu, chỉ giữ nút chuyển ngôn ngữ.
   Chỉ áp cho desktop — mobile cần đầy đủ mục trong menu hamburger,
   nếu ẩn luôn thì bấm Menu ra trống trơn */
@media print, screen and (min-width: 769px) {
    body.homeTop #globalNav > ul > li:not(.language-menu) {
        display: none !important;
    }
}

/* --- Logo lớn, canh giữa, ngay dưới menu --- */
body.homeTop .homeLogo {
    width: 100%;
    text-align: center;
    padding: clamp(8px, 1.6vh, 22px) 16px clamp(4px, 1vh, 14px);
    box-sizing: border-box;
}

body.homeTop .homeLogo img {
    height: clamp(35px, 5.3vh, 67px);
    width: auto;
    max-width: 90%;
    display: inline-block;
}

/* Bỏ chiều cao do JS gán để khối co theo ảnh, tránh khoảng trống thừa */
body.homeTop .jumbotronArea.pcElm {
    height: auto !important;
    margin: 0 auto;
}

/* --- Desktop: không cho cuộn, cả trang vừa 1 màn hình --- */
@media print, screen and (min-width: 769px) {
    body.homeTop {
        overflow: hidden;
    }

    /* Sticky footer: footer luôn nằm sát mép dưới màn hình
       khi nội dung trang thấp hơn viewport */
    body.homeTop #allContainer {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        box-sizing: border-box;
    }

    body.homeTop #contentsContainer {
        min-height: 0;
        flex: 1 0 auto;
    }

    body.homeTop #footerContainer {
        margin-top: auto;
    }

    /* Header: bỏ khối logo cũ (đã ẩn logo), menu canh giữa theo chiều dọc
       — khoảng cách từ mép trên màn hình tới chữ = từ chữ tới border-bottom */
    body.homeTop #globalHeader {
        display: none;
    }

    body.homeTop #globalNav {
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* clearfix vì ul bên trong float */
    body.homeTop #globalNav::after {
        content: "";
        display: block;
        clear: both;
    }

    body.homeTop #globalNav > ul > li > a {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* Banner xích xuống một chút so với logo (màn càng cao xích càng nhiều) */
    body.homeTop .jumbotronArea.pcElm {
        margin-top: clamp(14px, 8vh, 110px);
    }

    /* Dải 3 banner CỐ ĐỊNH (không bxSlider): 3 cột bằng nhau, chiều cao tự co
       theo chiều rộng bằng aspect-ratio thuần CSS — không lệch/hở mép khi
       trình duyệt zoom in/out (bxSlider tính bằng px cố định nên hay bị lỗi này) */
    body.homeTop .jumbotronArea.pcElm.fixedRow .top_slider > ul {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.homeTop .jumbotronArea.pcElm.fixedRow .top_slider > ul > li {
        position: relative;
        float: none;
        width: 33.3334%;
        flex: 0 0 33.3334%;
        margin: 0;
    }

    body.homeTop .jumbotronArea.pcElm.fixedRow .top_slider li a {
        display: block;
    }

    body.homeTop .jumbotronArea.pcElm.fixedRow .top_slider li figure.img {
        margin: 0;
        overflow: hidden;
        aspect-ratio: 865.5 / 484.5;
    }

    body.homeTop .jumbotronArea.pcElm.fixedRow .top_slider li figure.img span {
        display: block;
        width: 100%;
        height: 100%;
    }

    body.homeTop .jumbotronArea.pcElm.fixedRow .top_slider li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* =========================== MOBILE ===========================
   Dùng header + nút Menu (menuSwitch) có sẵn của template.
   Chỉ tùy biến: logo lớn giữa trang + banner co theo màn hình.
   Menu hamburger hiển thị đầy đủ các mục điều hướng */
@media only screen and (max-width: 768px) {
    body.homeTop {
        overflow-x: hidden;
    }

    /* Đẩy nội dung xuống dưới header fixed 62px của template */
    body.homeTop #contentsContainer {
        padding-top: 76px !important;
    }

    /* Footer dính đáy màn hình cả trên mobile */
    body.homeTop #allContainer {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    body.homeTop #contentsContainer {
        flex: 1 0 auto;
    }

    body.homeTop #footerContainer {
        margin-top: auto;
    }

    /* Logo trên mobile */
    body.homeTop .homeLogo {
        padding: 12px 16px 10px;
    }

    body.homeTop .homeLogo img {
        height: auto;
        width: 41%;
        max-width: 160px;
    }

    /* Banner: khung ngoài cắt phần thừa, các tầng trong co theo màn hình
       (KHÔNG overflow hidden trên ul/li vì li của slider là absolute) */
    body.homeTop .jumbotronArea {
        overflow: hidden;
    }

    body.homeTop .top_slider,
    body.homeTop .jumbotronArea .bx-wrapper,
    body.homeTop .jumbotronArea .bx-viewport,
    body.homeTop .top_slider ul,
    body.homeTop .top_slider li {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.homeTop .jumbotronArea li img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Chữ trên banner bám theo khung slide thực */
    body.homeTop .top_slider li .slide-text {
        left: 0;
        right: 0;
        padding: 0 5%;
    }

    body.homeTop .top_slider li .slide-text h2 {
        font-size: 1.5rem;
    }
}