/* ===================================================================
   Responsive — bù đắp cho các class Bootstrap 5.
   Mobile-first: site.css là mặc định, các @media dưới đây ghi đè.
   =================================================================== */

/* ------------------------- < 992px (mobile / tablet) ------------------------- */
@media (max-width: 991.98px) {
    :root { --header-h: 64px; }

    /* Topbar: chỉ giữ hotline + hỗ trợ, bỏ giờ hoạt động & ghi chú cho gọn */
    .topbar-inner {justify-content: center;gap: 4px 18px;font-size: .75rem;}
    .topbar-item:not(.topbar-phone) { display: none; }

    .header-brand img {height: 51px;}

    /* Menu nằm dọc trong offcanvas */
    .main-nav-tree { flex-direction: column; align-items: stretch; gap: 0; }

    .main-nav-tree > .menu-item > a {
        padding: 12px 4px;
        border-bottom: 1px solid var(--c-border);
        border-radius: 0;
        white-space: normal;
    }

    /* Dưới 992px các cột xếp dọc -> bỏ bám dính, sidebar chạy bình thường theo nội dung */
    .sticky-sidebar { position: static; }

    /* Footer: nút CTA xếp dọc cho dễ bấm, copyright canh giữa */
    .footer-cta-actions {/* flex-direction: column; */align-items: stretch;}
    .footer-cta-actions .btn-book,
    .footer-cta-actions .btn-zalo,
    .footer-cta-actions .btn-outline { justify-content: center; }

    .copyright { justify-content: center; text-align: center; }
}

/* ------------------------- < 992px: trang chủ ------------------------- */
@media (max-width: 991.98px) {
    /* Form đặt xe không đè lên hero nữa */
    .booking { margin-top: 0; padding-top: var(--section-pad); }
    .booking-card {padding: 14px;}
}

/* ------------------------- < 576px ------------------------- */
@media (max-width: 575.98px) {
    /* Sơ đồ chặng xếp dọc cho dễ đọc */
    .route-stops { flex-direction: column; align-items: flex-start; gap: 0; }
    .route-stop { display: flex; align-items: center; gap: 10px; width: 100%; padding-bottom: 12px; text-align: left; }
    .route-stop:not(:last-child)::after { top: auto; left: 15px; bottom: -4px; width: 2px; height: 12px; }
    .route-stop-name {margin-top: 0;font-size: 14px;}

    /* CTA nổi thu nhỏ để không che nội dung */
    .float-cta { right: 12px; bottom: 12px; gap: 10px; }
    .float-cta-btn { width: 46px; height: 46px; font-size: 1rem; }
    .float-cta-zalo-img { width: 26px; height: 26px; }
    .section-title{
        font-size: 20px;
    }
    .route-title{
        font-size: 16px;
    }
    .route-card{
        padding: 15px;
    }
    .route-meta{
        padding: 0;
        background-color: transparent;
    }
    .route-meta .col-4{
        padding-left: 5px;
        padding-right: 5px;
    }
    .route-meta p{
        font-size: 13px;
    }
    .reason-card{
        padding: 10px;
    }
    .reason-title{
    font-size: 15px;
    }
    .reason-desc p{
    font-size: 13px;
    line-height: 18px;
    }
    .help-image{
    height: 191px;
    z-index: 0;
    right: -13px;
    }
    .btn-book, .btn-zalo{
    padding-left: 15px;
    padding-right: 15px;
    }
    .help-card{
    padding-right: 25%;
    }
    .help-title{
    margin-top: 15px;
    }
    .topbar-item span{
    font-size: 0;
    }
    .topbar-item span strong{
    font-size: 14px;
    }
    .offcanvas-lg.offcanvas-start{
    width: 300px;
    max-width: 100%;
    }
    .footer-cta-title{
    font-size: 25px;
    }
}

/* ------------------------- ≥ 992px (desktop) ------------------------- */
@media (min-width: 992px) {
    /* Offcanvas-lg trả về dạng thanh ngang, bỏ phần header của panel */
    .site-nav-shell .offcanvas-header { display: none; }
}

/* ------------------------- 992px – 1199px ------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .header-inner { gap: 12px; }
    .main-nav-tree { gap: 0; }
    .main-nav-tree > .menu-item > a { padding: 10px 8px; font-size: .875rem; }

    .btn-book,
    .btn-zalo { padding: 9px 14px; font-size: .8125rem; }
}