@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; }
}

@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: end;}
    .header-utility { gap: 14px; }
    .utility-link { display: none; }                
    .mobile-menu-btn { display: inline-flex; }

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

    .page-hero { padding-top: 96px; }

    .site-nav-shell { background: #fff; width: 300px; max-width: 82vw; }
    .site-nav-shell .offcanvas-header {background: #fff;color: #fff;text-align: center;}
    .site-nav-shell .offcanvas-header .btn-close {/* filter: brightness(0) invert(1); */background-color: #fff;opacity: 1;color: #fff;position: absolute;top: 10px;right: 10px;border-radius: 50%;padding: 7px;background-size: 15px;}
    .site-nav-shell .offcanvas-title img {height: 100px;width: auto;margin: 0px auto;}

    .main-nav-tree { flex-direction: column; align-items: stretch; justify-content: flex-start; }
    .main-nav-tree > .menu-item > a {
        color: #fff;
        text-transform: none;
        letter-spacing: 0;
        text-shadow: none;
        padding: 12px 16px;
        border-bottom: 1px solid #011912;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 14px;
        border-top: 1px solid #03513c;
    }
    .main-nav-tree > .menu-item > a:hover,
    .main-nav-tree > .menu-item.is-active > a {background: var(--c-accent);color: #fff;}
    .main-nav-tree > .home-item > a {/* background: var(--c-accent); */}
}

@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%; }
}

@media (max-width: 991.98px) {
    .orbit-center:before{
        display:none;
    }
    .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 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .orbit-item { position: static; transform: none; }
    .orbit-item > a { width: 100%; }
}

@media (max-width: 575.98px) {
    .brand-name { display: none; }                   
    .utility-hotline small {/* display: none; */}
    .hero-slide-img {height: 500px;}
    .hero-swiper .swiper-button-prev,
    .hero-swiper .swiper-button-next { display: none; }

    .orbit-ring {grid-template-columns: repeat(3, 1fr);gap: 25px 8px;}
    .orbit-ic { width: 72px; height: 72px; }
    .orbit-ic img { width: 40px; height: 40px; }
    .orbit-label {font-size: 12px;white-space: inherit;}
}

@media (max-width: 991.98px) {
    .proj-grid {grid-template-columns: 1fr;gap: 10px;}
    .proj-card-featured { min-height: 280px; }
}
@media (max-width: 575.98px) {
    /* 4 the nho -> Swiper (JS boc .swiper + gan .swiper-wrapper/.swiper-slide, khong tu chay).
       site.css nap SAU swiper-bundle.css, ma .proj-small-grid va .swiper-wrapper cung specificity
       -> display:grid se thang. Phai override bang selector 2 class. */
    .proj-small-grid.swiper-wrapper {
        display: flex;
        grid-template-columns: none;
        gap: 0;                                   /* khoang cach do Swiper spaceBetween lo */
        align-items: stretch;
    }
    .proj-small-swiper {
        overflow: hidden;
        padding-bottom: 24px;                     /* chua cho cham phan trang */
        width: 100%;
    }
    .proj-small-swiper .swiper-pagination { bottom: 0; }
    .proj-small-swiper .swiper-pagination-bullet { background: var(--c-primary-dark); opacity: .3; }
    .proj-small-swiper .swiper-pagination-bullet-active { background: var(--c-accent); opacity: 1; width: 20px; border-radius: 5px; }
    .proj-card { min-height: 200px; }
    .proj-card.proj-card-featured{
    height: 270px;
    }
    .news-card-media img{
    height: 200px;
    border-radius: 10px;
    }
    .news-card-media{
    border-radius: 10px;
    }
}

/* ---- 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: repeat(2, 1fr);gap: 10px;}
}

/* ---- 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: repeat(1, 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: repeat(2, 1fr);gap: 10px;}
}

/* ---- 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: repeat(2, 1fr);gap: 10px;display: flex;grid-template-columns: none;flex-wrap: nowrap;gap: 10px;overflow-x: auto;overflow-y: hidden;padding: 6px 0 14px;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none;}
    .workshop-grid {grid-template-columns: repeat(2, 1fr);gap: 10px;}
}

/* ---- Trang đối tác: story-grid 3 -> 2 -> 1 ---- */
@media (max-width: 991.98px) {
    .story-grid {grid-template-columns: repeat(2, 1fr);display: flex;grid-template-columns: none;flex-wrap: nowrap;gap: 10px;overflow-x: auto;overflow-y: hidden;padding: 6px 0 14px;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none;}
}
@media (max-width: 575.98px) {
    .story-grid { grid-template-columns: 1fr; }
    .story-card{
    flex: 0 0 70vw;
    scroll-snap-align: start;
    }
}

@media (max-width: 991.98px) {
    .lib-links-grid,
    .lib-links-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
    /* Masonry ảnh: 2 cột (2*48.5% + 3% = 100%). Video do Swiper breakpoints tự xử lý. */
    .masonry-sizer { width: 48.5%; }
    .masonry-gutter-sizer { width: 3%; }
    .lib-photo-masonry .lib-photo { width: 48.5%; margin-bottom: 12px; }
}
@media (max-width: 575.98px) {
    .lib-links-grid,
    .lib-links-grid.cols-3,
    .lib-links-grid.cols-2 {grid-template-columns: 1fr;gap: 10px;}
    .lib-photo-masonry .lib-photo { margin-bottom: 10px; }

    /* Slider video 2 cột: thẻ chỉ rộng ~nửa màn hình -> thu gọn ảnh, nút play và caption */
    .lib-video img { height: 130px; }
    .lib-video-play {width: 35px;height: 35px;font-size: 1rem;}
    .lib-video-cap {font-size: 13px;padding: 20px 10px 8px;text-align: center;font-weight: 400;}
}

/* ---- Trang quy trình: timeline so le -> 1 cột ; cam kết 5 -> 3 -> 2 -> 1 ---- */
@media (max-width: 1199.98px) {
    /* 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-right: 1px solid var(--c-border);}
}
@media (max-width: 991.98px) {
    /* 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;padding: 10px;}
    .commit-box-item:nth-child(2n) {/* border-right: 0; */}
    .commit-box-item:nth-child(-n+2) {border-right: 1px solid var(--c-border);}
}

@media (max-width: 767.98px) {
    .offcanvas-body{
    background-color: #072d20;
    padding: 0;
    }
    .process-timeline::before { left: 22px; transform: none; }
    .process-step,
    .process-step:nth-child(odd),
    .process-step:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding-left: 50px;
        padding-right: 0;
        text-align: left;
    }
    .process-step:nth-child(odd) .process-body { flex-direction: row; }
    .process-step:nth-child(odd) .process-num,
    .process-step:nth-child(even) .process-num { left: 0; right: auto; }
}

@media (max-width: 575.98px) {
    .offcanvas-lg.offcanvas-start{
    border: none;
    width: 250px;
    }
    .lib-photo img{
    height: 180px;
    }
    .page-hero-title{
    font-size: 24px;
    }
    .commit-box-grid {display: flex;grid-template-columns: none;flex-wrap: nowrap;gap: 10px;overflow-x: auto;overflow-y: hidden;padding: 6px 0 14px;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none;}
    .commit-box-item {/* border-right: 0; */flex: 0 0 60vw;scroll-snap-align: start;}
    .commit-box-item:last-child { border-bottom: 0; }
    .process-body {/* flex-direction: column; */align-items: flex-start;gap: 10px;padding: 15px;}
    .process-step:nth-child(odd) .process-body {/* flex-direction: column; */padding: 15px;}
    .process-media {width: 70px;height: 70px;}
    .process-title{
    font-size: 14px;
    }
}
@media (max-width: 575.98px) {
    .machine-card, .profile-item{
    flex: 0 0 60vw;
    scroll-snap-align: start;
    }
    .hero-caption-desc p{
    line-height: 24px;
    }
    .hero-caption-desc h2{
    font-size: 24px;
    }
    .hero-caption-btn{
    font-size: 14px;
    font-weight: 400;
    padding: 8px 15px;
    }
    .map-box{
    height: 200px;
    }
    .news-card{
        /* border: 1px solid #ccc; */
        padding: 10px;
        box-shadow: 1px 1px 18px 1px #72727254;
        /* background: linear-gradient(
321deg, #fff7ed, #ffffff 48%, var(--c-primary)); */
    }
    .news-card:hover{
        background: linear-gradient(
321deg, #fff7ed, #ffffff 48%, #00a7626e);
    }
    .news-more{
    padding: 6px 15px;
    }
    .concept-card-label, .concept-cta-text{
    font-size: 14px;
    }
    .section-title{
    font-size: 20px;
    }
    .contact-form { padding: 20px; }
    .about-btn{
        padding: 10px 15px;
        font-size: 15px;
    }
    .about-hotline .ah-meta strong{
    font-size: 18px;
    }
    .home-cat-band{
    padding: 10px;
    height: 60%;
    }
    .home-cat-icon img{
    height: 40px;
    width: 40px;
    }
    .home-cat-label{
    font-size: 12px;
    }
    .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) {
    .btn-more-projects{
    font-weight: 400;
    font-size: 14px;
    padding: 10px 15px;
    }
    .commit-grid {grid-template-columns: repeat(2, 1fr);}
    .commit-item + .commit-item::before { display: none; }
    .commit-item {border-top: 1px solid rgba(255,255,255,.28);display: block;text-align: center;padding: 20px 10px;}
    .commit-item:first-child, .commit-item:nth-child(2) { border-top: 0; }
    .commit-item:first-child, .commit-item:nth-child(3){
        border-right: 1px solid rgba(255,255,255,.28);
    }
    .commit-body h3{
    font-size: 16px;
    }
    .commit-ic{
    margin-bottom: 10px;
    display: block;
    text-align: center;
    }
    .commit-ic img{
    margin: 0px auto;
    }
    .vision-card{
        padding: 15px;
    }
    .vision-ic{
        width: 80px;
        height: 80px;
        font-size: 32px;
    }
    .vision-card p{
        font-size: 15px;
    }
    .vision-card h3{
    font-size: 18px;
    }
    .value-card{
    padding: 15px;
    flex: 0 0 70vw;
    scroll-snap-align: start;
    }
    .profile-item img{
    height: auto;
    }
    .showcase-title{
    font-size: 13px;
    text-align: center;
    }
    .showcase-more{
    font-size: 14px;
    text-align: center;
    width: 100%;
    justify-content: center;
    font-weight: 400;
    }
    .showcase-reveal p{
    font-size: 13px;
    line-height: 18px;
    }
    .footer-tiktok{
        overflow: hidden;
        border-radius: 6px;
    }
    .copyright span{
        display: block;
    }
    .main-nav-tree li:last-child{
        display: block !important;
    }
    .contact-info-title{
    font-size: 24px !important;
    }
    .contact-info-list a, .contact-info-list strong{
    font-size: 14px;
    font-weight: 500;
    }
    .contact-form-card{
    padding: 15px;
    }
}