/* ===================================================================
   responsive.css — NẠP SAU CÙNG.
   Chỉ chứa media query BÙ: những chỗ mà file gốc không tiện đặt
   media query ngay tại chỗ.

   Phần lớn responsive đã nằm ngay cạnh rule của nó trong
   layout/components/home/pages — đó là chủ ý: sửa một thành phần
   thì thấy luôn cách nó co giãn, không phải nhảy file.

   ⚠️ Rule cho trạng thái mobile của MENU nằm ở layout.css, bên trong
   @media (max-width: 1199.98px). Đừng chép sang đây — hai nơi cùng
   quản một thứ là chắc chắn lệch nhau.
   =================================================================== */

/* ---- Laptop hẹp (container 1140px): menu 8 mục vừa đủ chỗ nếu bóp bớt
       padding và cỡ chữ. Rộng hơn 1400px container là 1320px nên không cần. ---- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header-main > .container { gap: var(--sp-4); }
    .main-nav .menu-item > a { padding-inline: .45rem; font-size: .95rem; }
}

/* ---- Tablet ngang ---- */
@media (max-width: 1199.98px) {
    :root { --container: 960px; }
    /* Từ đây menu đã là offcanvas (layout.css) — không bóp padding ở đây nữa,
       nếu không các mục trong ngăn kéo dính sát mép trái. */
}

/* ---- Tablet dọc ---- */
@media (max-width: 991.98px) {
    :root { --header-h: 62px; }

    /* Dải trên chỉ có ích khi có chỗ; dưới 992px nó đẩy header cao vô ích. */
    .header-topbar { display: none; }

    .article-cta { flex-direction: column; align-items: flex-start; }
    .footer-cta-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---- Điện thoại ---- */
@media (max-width: 767.98px) {
    :root {
        --section-y: 2.6rem;
        --sp-8: 2.75rem;
        --sp-9: 3.5rem;
    }

    .footer-main { padding-block: var(--sp-6) var(--sp-5); }
    .footer-bottom .copyright { justify-content: center; text-align: center; }

    .article-foot { flex-direction: column; align-items: flex-start; }
    .related-posts { margin-top: var(--sp-6); }

    /* Nút trong khối CTA: xếp dọc, full width — dễ bấm bằng ngón cái. */
    .article-cta-actions,
    .footer-cta-actions,
    .notfound-actions,
    .price-actions { width: 100%; flex-direction: column; }
    .article-cta-actions > *,
    .footer-cta-actions > *,
    .notfound-actions > *,
    .price-actions > * { width: 100%; }
}

@media (max-width: 575.98px) {
    :root { --gutter: 1rem; }

    .page-hero { padding-block: 2rem; }
    .breadcrumb-nav { font-size: var(--fs-xs); }

    .sidebar-box { padding: var(--sp-4); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
}

/* ---- In ấn: khách hay in bảng giá ra để đối chiếu ---- */
@media print {
    .site-header,
    .site-footer,
    .float-cta,
    .mobile-cta,
    .hero-booking,
    .article-cta,
    .footer-cta { display: none !important; }

    body { padding-bottom: 0; color: #000; }
    .price-table { min-width: 0; }
    .price-table thead th { color: #000; background: #eee; }
    .price-table .p { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}