/* ==========================================================================
   AURA ASIA TRAVEL — site-2026-responsive.css
   Responsive cho header + footer (bản 2026).
   Copy đúng hệ breakpoint của design: html/assets/css/responsive.css
   ========================================================================== */

/* ---------- ≤ 1180px: compact desktop ---------- */
@media (max-width: 1180px) {
  .site-header .nav__link { padding: 0 var(--space-2); }
  .site-header .nav__link::after { left: var(--space-2); right: var(--space-2); }
  .site-header .header-cta { padding: 0 var(--space-3); }

  /* Giữ đủ 6 cột — chỉ siết khoảng cách, không để cột cuối rớt xuống dòng */
  .site-footer .footer__grid { gap: var(--space-4); }
}

/* ---------- ≤ 1100px: burger menu, tablet landscape ---------- */
@media (max-width: 1100px) {
  :root {
    --header-height: 72px;
    --logo-height: 60px;          /* header 72px; ≤1024 còn calc(-8px) = 52px (giữ nguyên như cũ) */
  }

  .site-header .burger { display: block; }
  .site-header .site-header__right { display: none; }
  .site-header__inner { gap: var(--space-3); }

  .site-header .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    width: min(88vw, 380px);
    height: 100dvh;
    padding: calc(var(--header-height) + var(--space-2)) var(--space-4) var(--space-6);
    background: var(--color-white);
    box-shadow: -20px 0 50px var(--header-shadow-color);
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    translate: 100% 0;
    opacity: 0;
    visibility: hidden;
    transition: translate var(--duration-normal) var(--ease-smooth),
                opacity var(--duration-fast),
                visibility 0s var(--duration-normal);
  }
  .site-header .nav.is-open {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  /* Burger luôn nằm trên panel */
  .site-header .burger {
    position: relative;
    z-index: calc(var(--z-overlay) + 1);
  }

  .site-header .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
  }
  .site-header .nav__item { border-bottom: var(--border); }
  .site-header .nav__link {
    width: 100%;
    justify-content: space-between;
    height: 52px;
    padding: 0 6px;
    font-size: var(--font-size-md);
  }
  .site-header .nav__link::after { display: none; }
  .site-header .nav__link .icon { width: 18px; height: 18px; }

  .site-header .dropdown,
  .site-header .dropdown--wide,
  .site-header .nav__item:last-child .dropdown,
  .site-header .nav__item:nth-last-child(2) .dropdown {
    position: static;
    display: none;
    min-width: 0;
    translate: none;
    opacity: 1;
    visibility: visible;
    padding: 0 0 var(--space-3) var(--space-2);
    border: 0;
    box-shadow: none;
    background: transparent;
    grid-template-columns: 1fr;
  }
  .site-header .nav__item.is-open > .dropdown {
    display: block;
    translate: none;
  }
  .site-header .dropdown a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .site-header .nav__cta-mobile {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
    width: 100%;
  }
  .site-header .nav__cta-mobile .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding-block: var(--space-3);
    height: auto;
  }
  .site-header .nav__cta-mobile .header-mail {
    justify-content: center;
    font-size: var(--font-size-sm);
    min-height: 44px;
  }

  .site-footer .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer .footer__brand { grid-column: 1 / -1; }
  .site-footer .footer__news {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-10);
    align-items: start;
  }
  .site-footer .footer__news .footer__title { grid-column: auto; }

  /* Logo luôn sát trái, burger luôn sát phải (không phụ thuộc justify-content) */
  .site-header .logo { margin-right: auto; }
}

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
  .site-header .logo img { height: calc(var(--logo-height) - var(--space-2)); }
}

/* ---------- ≤ 768px: tablet portrait ---------- */
@media (max-width: 768px) {
  /* Footer mobile (mock 2026-10-28): nền teal như ảnh, newsletter trên cùng, link 2 cột */
  .site-footer {
    position: relative;
    padding-top: calc(var(--space-12) + var(--footer-accent-height));
    background: var(--color-footer-mobile);
    border-top: 0;
    color: var(--footer-mobile-text);
  }
  .site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--footer-accent-height);
    background: var(--color-accent);
  }

  .site-footer .footer__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    row-gap: 0;
  }
  .site-footer .footer__brand {
    grid-column: 1 / -1;
    order: 1;
    margin-bottom: var(--space-8);
  }
  .site-footer .footer__news { display: contents; }
  .site-footer .footer__news > .footer__title:not(.footer__social-title) {
    grid-column: 1 / -1;
    order: 2;
    margin-bottom: var(--space-2);
  }
  .site-footer .footer__news > p {
    grid-column: 1 / -1;
    order: 3;
    margin-bottom: var(--space-3);
  }
  .site-footer .footer__news > .footer-news {
    grid-column: 1 / -1;
    order: 4;
    margin-bottom: var(--space-8);
  }
  .site-footer .footer__grid > nav {
    order: 5;
    margin-bottom: var(--space-8);
  }
  .site-footer .footer__social-title { display: none; }
  .site-footer .social {
    grid-column: 1 / -1;
    order: 6;
    margin-bottom: var(--space-8);
  }
  .site-footer .footer__links li { margin-bottom: var(--space-1); }

  /* Logo trắng, bỏ card trắng của bản desktop */
  .site-footer .footer__logo {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .site-footer .footer__logo img { filter: brightness(0) invert(1); }

  /* Chữ trắng như ảnh */
  .site-footer .footer__company,
  .site-footer .footer__title,
  .site-footer .footer__contact li,
  .site-footer .footer__news > p { color: var(--footer-mobile-text); }
  .site-footer .footer__contact .icon { color: var(--color-white); }
  .site-footer .footer__links a { color: var(--footer-mobile-link); }
  .site-footer .footer__contact a:hover,
  .site-footer .footer__links a:hover { color: var(--color-white); }

  /* Newsletter: input + nút cùng hàng */
  .site-footer .news-form {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-2);
  }
  .site-footer .news-form input {
    grid-area: 1 / 1;
    min-height: var(--space-10);
    border: 0;
    border-radius: var(--radius-sm);
  }
  .site-footer .news-form .btn {
    grid-area: 1 / 2;
    border-radius: var(--radius-sm);
  }
  .site-footer .news-form .field__error { grid-area: 2 / 1 / 3 / -1; }
  .site-footer .news-status { grid-area: 3 / 1 / 4 / -1; }
  .site-footer .news-form .field__error:empty,
  .site-footer .news-status:empty { display: none; }

  /* Icon mạng xã hội giữ màu thương hiệu như ảnh */
  .site-footer .social a {
    background: var(--social-bg, var(--color-white));
    color: var(--social-fg, var(--color-primary-dark));
  }
  .site-footer .social a:hover {
    background: var(--social-bg, var(--color-white));
    color: var(--social-fg, var(--color-primary-dark));
  }
  .site-footer .social a[aria-label="Facebook"] { --social-bg: var(--social-facebook); --social-fg: var(--color-white); }
  .site-footer .social a[aria-label="YouTube"] { --social-bg: var(--social-youtube); --social-fg: var(--color-white); }
  .site-footer .social a[aria-label="Instagram"] { --social-bg: var(--social-instagram); --social-fg: var(--color-white); }

  /* Đáy footer: canh giữa copyright, ẩn badge thanh toán như ảnh */
  .site-footer .pay { display: none; }
  .site-footer .footer__bottom { border-top-color: var(--footer-mobile-divider); }
  .site-footer .footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .site-footer .footer__copy { color: var(--footer-mobile-link); }

  .to-top {
    right: var(--space-4);
    bottom: calc(var(--actionbar-height) + var(--actionbar-safe-bottom) + var(--space-4));
  }

  /* ACTION BAR: hiển thị ở mobile + bù khoảng để không che nội dung cuối trang */
  .h26-actionbar { display: block; }
  html.h26-header-on body {
    padding-bottom: calc(var(--actionbar-height) + var(--actionbar-safe-bottom));
  }

  /* FINAL CTA: padding + overlay dọc, tắt parallax (design responsive.css @768) */
  .h26-final-cta { padding-block: var(--cta-pad-block-768); }
  .h26-final-cta__bg::after { background: var(--cta-overlay-768); }
  .h26-final-cta__img {
    top: 0;
    height: 100%;
    transform: none !important;
  }

  /* Mock mobile: căn giữa, chip trên tiêu đề, nút xếp dọc */
  .h26-final-cta__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--cta-inner-gap-768);
    text-align: center;
  }

  .h26-final-cta__chip { display: block; }

  .h26-final-cta__lead { margin-inline: auto; }

  .h26-final-cta__actions {
    justify-content: center;
    width: 100%;
    margin-top: 0;
  }
}

/* ---------- ≤ 576px: large mobile ---------- */
@media (max-width: 576px) {
  :root { --container-padding: 16px; }

  /* FINAL CTA: nút full-width (design @576 .final-cta__actions .btn) */
  .h26-final-cta__actions .h26-cta-btn { flex: 1 1 100%; }
}

/* ---------- ≤ 430px ---------- */
@media (max-width: 430px) {
  :root { --logo-height: 44px; }
  .site-header .burger { width: 42px; height: 42px; }
  .site-header .burger span { left: 11px; right: 11px; }
}

/* ---------- ≤ 375px ---------- */
@media (max-width: 375px) {
  .site-footer .footer__copy { font-size: var(--font-size-xs); }

  /* FINAL CTA: nút padding hẹp lại (design @375 .btn) */
  .h26-final-cta__actions .h26-cta-btn { padding-inline: var(--cta-btn-pad-x-375); }
}

/* ---------- Overflow safety ---------- */
@media (max-width: 1100px) {
  .site-footer .footer__contact li,
  .site-footer .footer__links a,
  .site-footer .subscribe_email { overflow-wrap: anywhere; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header::before,
  .site-header .nav,
  .site-header .dropdown,
  .site-header .burger span,
  .nav-backdrop,
  .to-top,
  .news-form input {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .site-header .btn:hover,
  .site-footer .btn:hover,
  .social a:hover { translate: none; }

  /* FINAL CTA: tắt reveal/parallax/hover lift */
  html.h26-cta-js .h26-final-cta__inner {
    opacity: 1;
    translate: none;
    transition-duration: .01ms;
  }
  .h26-final-cta__img { transform: none !important; }
  .h26-cta-btn,
  .h26-cta-icon { transition-duration: .01ms; }
  .h26-cta-btn:hover { translate: none; }
  .h26-cta-btn--accent:hover .h26-cta-icon--arrow { translate: none; }
}