/* =====================================================================
   responsive.css — bù đắp responsive cho header + hero (Bootstrap lo phần grid)
   ===================================================================== */

/* ---- Thu gọn số cột menu ở màn trung bình để tránh tràn ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-nav-tree > .menu-item > a { padding: 8px 11px; font-size: .82rem; letter-spacing: .2px; }
    .header-brand .navbar-brand img { height: 50px; }
    .brand-name { font-size: .86rem; max-width: 260px; }
}

/* ---- Dưới 992px: menu chuyển sang offcanvas (Bootstrap offcanvas-lg) ---- */
@media (max-width: 991.98px) {
    .header-inner {min-height: 66px;padding-left: 15px !IMPORTANT;padding-right: 15px !IMPORTANT;}
    .header-right {flex-direction: row;align-items: center;gap: 14px;justify-content: space-between;}
    .header-utility { gap: 14px; }
    .utility-link { display: none; }                 /* ẩn Tuyển dụng / Liên hệ, chừa hotline */
    .mobile-menu-btn { display: inline-flex; }

    body:not(.has-hero) main { padding-top: 66px; }

    /* Header mobile ~66px -> giảm top padding của page-hero cho khớp */
    .page-hero { padding-top: 96px; }

    /* Khung offcanvas menu (nền trắng, chữ tối) */
    .site-nav-shell { background: #fff; width: 300px; max-width: 82vw; }
    .site-nav-shell .offcanvas-header { background: var(--c-header); color: #fff; }
    .site-nav-shell .offcanvas-header .btn-close { filter: brightness(0) invert(1); }
    .site-nav-shell .offcanvas-title img {height: 40px;width: auto;filter: brightness(0) invert(1);}

    /* Menu dạng dọc, chữ tối trên nền trắng */
    .main-nav-tree { flex-direction: column; align-items: stretch; justify-content: flex-start; }
    .main-nav-tree > .menu-item > a {
        color: var(--c-text);
        text-transform: none;
        letter-spacing: 0;
        text-shadow: none;
        padding: 12px 16px;
        border-bottom: 1px solid var(--c-border);
        font-weight: 600;
    }
    .main-nav-tree > .menu-item > a:hover,
    .main-nav-tree > .menu-item.is-active > a { background: var(--c-bg-soft); color: var(--c-primary-dark); }
    .main-nav-tree > .home-item > a { color: var(--c-primary-dark); }
    .main-nav-tree .has-children > a::after { margin-left: auto; transition: transform .3s ease; }
    /* Chevron xoay khi submenu đang mở */
    .main-nav-tree .has-children.is-open > a::after { transform: rotate(180deg); }

    /* Submenu dạng dropdown: ẩn mặc định, mở khi cha .is-open (JS toggle) */
    .submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border-top: 0; border-radius: 0; padding: 0;
        background: var(--c-bg-soft); min-width: 0;
        max-height: 0; overflow: hidden; transition: max-height .35s ease;
    }
    .main-nav-tree .menu-item.has-children.is-open > .submenu { max-height: 1200px; }
    .submenu .menu-item > a { padding-left: 34px; border-bottom: 1px solid var(--c-border); }
}

/* ---- Dưới 768px: gọn header + hero ---- */
@media (max-width: 767.98px) {
    .header-brand .navbar-brand img { height: 44px; }
    .brand-name { font-size: .78rem; max-width: 190px; }
    .utility-hotline { padding: 6px 14px; }

    .hero-caption::before {
        background: linear-gradient(90deg, rgba(6,40,26,.85) 0%, rgba(6,40,26,.6) 60%, rgba(6,40,26,.35) 100%);
    }
    .hero-caption-inner { max-width: 100%; }
}

/* ---- Menu tròn: dưới 992px bỏ toả tròn -> lưới icon + nhãn ---- */
@media (max-width: 991.98px) {
    .orbit-menu {padding: 44px 0 52px;display: none;}
    .orbit { width: 100%; height: auto; }
    .orbit-ring { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 10px; }
    .orbit-ring::before { display: none; }
    .orbit-center {
        position: static; transform: none; width: 180px; height: 180px; margin: 0 auto 34px;
    }
    .orbit-item { position: static; transform: none; }
    .orbit-item > a { width: 100%; }
}

/* ---- Dưới 576px: rất hẹp ---- */
@media (max-width: 575.98px) {
    .brand-name { display: none; }                   /* chỉ còn logo + hotline + hamburger */
    .utility-hotline small { display: none; }
    .hero-slide-img {height: 450px;}
    .hero-swiper .swiper-button-prev,
    .hero-swiper .swiper-button-next { display: none; }

    .orbit-ring { grid-template-columns: repeat(2, 1fr); gap: 22px 8px; }
    .orbit-ic { width: 72px; height: 72px; }
    .orbit-ic img { width: 40px; height: 40px; }
    .orbit-label { font-size: .82rem; }
}

/* ---- Công trình tiêu biểu ---- */
@media (max-width: 991.98px) {
    .proj-grid { grid-template-columns: 1fr; }
    .proj-card-featured { min-height: 280px; }
}
@media (max-width: 575.98px) {
    .proj-small-grid { grid-template-columns: 1fr; }
    .proj-card { min-height: 200px; }
}

/* ---- Concept nổi bật ---- */
@media (max-width: 991.98px) {
    .concept-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .concepts-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 575.98px) {
    .concept-grid { grid-template-columns: 1fr; }
}

/* ---- Cam kết + Tin tức ---- */
@media (max-width: 767.98px) {
    .commit-grid { grid-template-columns: repeat(2, 1fr); }
    .commit-item:nth-child(2)::before { display: none; }   /* bỏ vạch giữa 2 cột */
    .news-grid { grid-template-columns: 1fr; }
}

/* ---- Liên hệ ---- */
@media (max-width: 991.98px) {
    .contact { background-attachment: scroll; }      /* fixed gây giật trên mobile */
    .contact-intro { margin-bottom: 6px; }
}

/* ---- PostList: news-grid 2 cột ở tablet ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .post-list-section .news-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---- PostList: post-grid (công trình/concept) 3 -> 2 -> 1 ---- */
@media (max-width: 991.98px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .post-grid { grid-template-columns: 1fr; }
}

/* ---- Trang giới thiệu: lưới 4 -> 2 -> 1 ---- */
@media (max-width: 991.98px) {
    .values-grid, .workshop-grid, .machine-grid, .profile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .values-grid, .machine-grid, .profile-grid { grid-template-columns: 1fr; }
    .workshop-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Trang đối tác: story-grid 3 -> 2 -> 1 ---- */
@media (max-width: 991.98px) {
    .story-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .story-grid { grid-template-columns: 1fr; }
}

/* ---- Trang Thư viện số PF: liên kết 4->2->1, ảnh 4->3->2, video 3->2->1 ---- */
@media (max-width: 991.98px) {
    .lib-links-grid { grid-template-columns: repeat(2, 1fr); }
    .lib-photo-grid { grid-template-columns: repeat(3, 1fr); }
    .lib-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .lib-links-grid { grid-template-columns: 1fr; }
    .lib-photo-grid { grid-template-columns: repeat(2, 1fr); }
    .lib-video-grid { grid-template-columns: 1fr; }
}

/* ---- Trang quy trình: process-grid 5 -> 3 -> 2 -> 1 ; cam kết 5 -> 3 -> 2 -> 1 ---- */
@media (max-width: 1199.98px) {
    .process-grid { grid-template-columns: repeat(4, 1fr); }
    /* Cam kết 3 cột: reset viền rồi bỏ viền phải cột cuối, thêm viền dưới hàng đầu */
    .commit-box-grid { grid-template-columns: repeat(3, 1fr); }
    .commit-box-item { border-right: 1px solid var(--c-border); border-bottom: 0; }
    .commit-box-item:nth-child(3n) { border-right: 0; }
    .commit-box-item:nth-child(-n+3) { border-bottom: 1px solid var(--c-border); }
}
@media (max-width: 991.98px) {
    .process-grid { grid-template-columns: repeat(3, 1fr); }
    /* Cam kết 2 cột */
    .commit-box-grid { grid-template-columns: repeat(2, 1fr); }
    .commit-box-item { border-right: 1px solid var(--c-border); border-bottom: 0; }
    .commit-box-item:nth-child(2n) { border-right: 0; }
    .commit-box-item:nth-child(-n+2) { border-bottom: 1px solid var(--c-border); }
}
@media (max-width: 575.98px) {
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .commit-box-grid { grid-template-columns: 1fr; }
    .commit-box-item { border-right: 0; border-bottom: 1px solid var(--c-border); }
    .commit-box-item:last-child { border-bottom: 0; }
}
@media (max-width: 575.98px) {
    .contact-form { padding: 20px; }
    .about-btn{
        padding: 10px 15px;
        font-size: 15px;
    }
    .about-hotline .ah-meta strong{
    font-size: 18px;
    }
    .home-cat-band{
    padding-bottom: 20px;
    }
    .home-cat-icon img{
    height: 80px;
    width: 80px;
    }
    .proj-tabs{
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-bottom: 20px;
    }
    .about-slogan{
    font-size: 20px;
    }
}
@media (max-width: 575.98px) {
    .commit-grid { grid-template-columns: 1fr; }
    .commit-item + .commit-item::before { display: none; }
    .commit-item { border-top: 1px solid rgba(255,255,255,.28); }
    .commit-item:first-child { border-top: 0; }
}