/* ===================================================================
   BNE Lawyers — Responsive
   Nạp SAU cùng. Ưu tiên dùng class grid của Bootstrap; file này chỉ bù
   những chỗ Bootstrap không xử lý được.
   =================================================================== */

/* ---------------------------------------------- <= 1199px --------- */
@media (max-width: 1199.98px) {
    .main-nav .menu-item > a { padding: 8px 10px; font-size: .875rem; }
    .navbar-brand img { height: 52px; }
    .service-swiper .swiper-button-prev,
    .service-swiper .swiper-button-next { display: none; }
}

/* ---------------------------------------------- <= 991px ---------- */
@media (max-width: 991.98px) {
    :root { --header-h: var(--header-h-sm); }

    .header-inner { min-height: var(--header-h-sm); gap: 12px; }
    .header-right { flex-direction: row; align-items: center; gap: 12px; }
    .header-nav-row { padding-bottom: 0; }
    .navbar-brand img { height: 44px; }
    .site-header.is-stuck .navbar-brand img { height: 40px; }

    /* Offcanvas mở toàn chiều cao, menu dọc */
    .site-nav-shell { width: min(320px, 86vw); }

    .hero { min-height: clamp(460px, 72vh, 640px); }
    .hero-inner { padding-top: calc(var(--header-h-sm) + 20px); }

    .tour-card { grid-template-columns: 1fr; }
    .tour-media { min-height: 200px; aspect-ratio: 16 / 9; }

    .booking-card { padding: 26px; }
    .contact-form-card { padding: 26px; }

    .sticky-sidebar { position: static; }

    .contact-map iframe { height: 340px; }
}

/* ---------------------------------------------- <= 767px ---------- */
@media (max-width: 767.98px) {
    .section, .about, .tours, .testimonials, .gallery, .news, .booking,
    .destinations, .serve-section, .inner-section, .related-posts { padding: 56px 0; }

    .section-heading { flex-direction: column; align-items: flex-start; }
    .section-heading-center { align-items: center; }

    .about-image::after { width: 60px; height: 60px; }

    /* .serve-grid duoi 768px chuyen sang cuon ngang (display:flex trong home.css)
       nen grid-template-columns khong con tac dung — da go de khoi gay hieu nham. */

    /* bottom phai chua cho thanh .mobile-cta dinh day (~58px) — file nay nap SAU
       layout.css nen gia tri o day moi la gia tri cuoi cung. */
    .float-cta { right: 12px; bottom: 70px; gap: 8px; }
    .float-cta-btn { width: 44px; height: 44px; }

    .copyright { flex-direction: column; gap: 6px; text-align: center; justify-content: center; }

    .search-box { flex-wrap: wrap; padding-left: 42px; }
    .search-submit { width: 100%; }

    .post-article-meta { gap: 8px 16px; }

    .home-banner { padding-bottom: 56px; }
}

/* ---------------------------------------------- <= 575px ---------- */
@media (max-width: 575.98px) {
    .container { padding: 0 16px; }

    .hero { min-height: 520px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn-book, .hero-actions .btn-outline { width: 100%; }

    .feature-card { flex-direction: column; gap: 12px; }

    .booking-card, .contact-form-card, .sidebar-box { padding: 22px; }

    .media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

    .lang-switch-item { padding: 3px 8px; }
}

/* ---------------------------------------------- In ấn ------------- */
@media print {
    .site-header, .site-footer, .float-cta, .sticky-sidebar,
    .booking, .home-popup, .swiper-button-prev, .swiper-button-next { display: none !important; }
    body { color: #000; }
    .page-body-offset { padding-top: 0; }
}