/* ==========================================================================
   AURA ASIA TRAVEL — home-2026-responsive.css
   Responsive cho các section trang chủ (HERO + BENEFITS + TOURS).
   Copy đúng hệ breakpoint của design: html/assets/css/responsive.css
   ========================================================================== */

/* ---------- ≥ 1920px ---------- */
@media (min-width: 1920px) {
  .h26-hero__slide { min-height: var(--hero-min-height-lg); }
}

/* ---------- ≥ 1341px: mũi tên nằm ngoài container ---------- */
@media (min-width: 1341px) {
  .h26-hero__arrow--prev {
    left: max(var(--space-6), calc((100% - var(--container-width)) / 2 - 68px));
  }
  .h26-hero__arrow--next {
    right: max(var(--space-6), calc((100% - var(--container-width)) / 2 - 68px));
  }

  /* ---------- 2026-10-28: khoảng cách giữa các box (section) ở desktop = 50px ----------
     Mỗi dải trống giữa 2 box (nền trắng đệm của box trên + nền màu của box dưới) = 50px.
     Benefits giữ padding-top 112px để panel search của hero không đè nội dung. */
  .h26-benefits { padding-bottom: var(--section-gap); }

  .h26-tours,
  .h26-styles,
  .h26-promo { padding-block: var(--section-gap); }

  /* Articles: design để padding-top: 0 (nối liền Reviews cùng nền trắng) */
  .h26-articles { padding-top: 0; padding-bottom: var(--section-gap); }
}

/* ---------- ≥ 1025px: panel search 1 hàng — nâng lên theo mock (2026-10-27) ----------
   Ở 769–1024px panel cao 214px (2 hàng) và chỉ cách benefits 5px → không nâng. */
@media (min-width: 1025px) {
  .h26-hero__search { translate: 0 calc(50% - var(--search-panel-lift)); }
}

/* ---------- ≤ 1340px: mũi tên carousel tour vào trong container ---------- */
@media (max-width: 1340px) {
  .h26-tours .owl-nav button.owl-prev { left: var(--tours-nav-offset-1340); }
  .h26-tours .owl-nav button.owl-next { right: var(--tours-nav-offset-1340); }
}

/* ---------- ≤ 1100px ---------- */
@media (max-width: 1100px) {
  /* Section 02 BENEFITS: 4 → 2 cột (design responsive.css) */
  .h26-benefits__grid { grid-template-columns: repeat(2, 1fr); }

  /* Section 06 PROMO + INQUIRY: 2 cột → 1 cột (design @1100 .promo__grid) */
  .h26-promo__grid { grid-template-columns: 1fr; }
  .h26-promo-panel { min-height: 0; }

  /* Mock 2026-10-28: panel 1 cột → mũi tên trang trí chồng lên cuối dòng tiêu đề → ẩn */
  .h26-promo-panel__fly { display: none; }

  /* ≤1100: Section 10 ARTICLES 4 → 2 cột (design @1100 .articles-grid) */
  .h26-articles__grid { grid-template-columns: var(--articles-grid-columns-1100); }

  /* Section 03 TOURS: mũi tên carousel sát mép trong */
  .h26-tours .owl-nav button.owl-prev { left: var(--tours-nav-offset-1100); }
  .h26-tours .owl-nav button.owl-next { right: var(--tours-nav-offset-1100); }
}

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
  .h26-hero__slide {
    min-height: 600px;
    padding-bottom: 150px;
  }

  .h26-search {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-2);
    padding: var(--space-4);
  }

  .h26-search__field {
    padding: calc(var(--space-2) - 2px) var(--space-2);
  }

  .h26-search__submit {
    grid-column: 1 / -1;
  }

  /* Section 04 STYLES: chiều cao mosaic thấp lại (design @1024) */
  .h26-styles__grid { height: var(--styles-grid-height-1024); }

  /* Section 08 TESTIMONIALS: 3 → 2 cột (design @1024 .reviews) */
  .h26-reviews { grid-template-columns: var(--review-grid-columns-1024); }
}

/* ---------- ≤ 768px: tablet portrait ---------- */
@media (max-width: 768px) {
  .h26-hero__slide {
    min-height: 0;
    padding: calc(var(--header-height) + 56px) 0 250px;
  }

  .h26-hero__lead { font-size: var(--font-size-base); }

  /* Panel search mobile 2 hàng (Destination + Travel style/Duration) cao ~222px
     → nửa dưới ~111px; 180px giữ khoảng hở ~69px tới benefits như mock mobile. */
  :root { --benefits-pad-top: 180px; }

  /* Search panel (mock html/Home-mobile.png): Destination 1 hàng,
     Travel style + Duration 1 hàng, nút submit 1 hàng.
     Giữ row-gap 4px để chiều cao panel không đổi (benefits-pad-top 180px đã chốt). */
  .h26-search {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-1);
    column-gap: var(--space-2);
    padding: var(--space-4);
  }

  .h26-search__field:first-of-type { grid-column: 1 / -1; }

  .h26-search__field { padding: var(--space-2); }

  /* Tab lọc (Multi-country + Cruises): 1 hàng ngang, dài thì cuộn ngang, không xuống dòng.
     Tràn phải tới mép màn hình như mock mobile (bỏ gutter phải của container). */
  .h26-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-right: calc(var(--container-padding) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .h26-filters::-webkit-scrollbar { display: none; }

  .h26-filters .h26-pill { flex: 0 0 auto; }

  /* Parallax tắt ở kích thước cảm ứng (đồng bộ với home-2026.js) */
  .h26-hero__img {
    top: 0;
    height: 100%;
    transform: none !important;
  }

  /* Mobile + tablet dọc: ẩn 2 nút nav của slider banner — chuyển slide bằng vuốt
     (home-2026.js §5, hỗ trợ mọi bề rộng trên thiết bị cảm ứng) */
  .h26-hero__arrow { display: none; }

  /* Section 03 TOURS: thu khoảng dưới header section (design .section-head) */
  .h26-tours .h26-tours__head { margin-bottom: var(--space-8); }

  /* Section 04 STYLES: mosaic 4 → 2 cột, card theo tỉ lệ (design @768) */
  .h26-styles .h26-styles__head { margin-bottom: var(--space-8); }

  .h26-styles__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: var(--styles-grid-gap-768);
    height: auto;
  }

  .h26-style-card { aspect-ratio: var(--styles-card-ratio-768); }

  .h26-style-card--big {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: var(--styles-card-ratio-big-768);
  }

  .h26-style-card--wide {
    grid-column: 1 / -1;
    aspect-ratio: var(--styles-card-ratio-wide-768);
  }

  /* Section 08 TESTIMONIALS: 2 → 1 cột (design @768 .reviews) */
  .h26-reviews { grid-template-columns: var(--review-grid-columns-768); }

  /* Section 10 ARTICLES: head dọc (design @768 .articles__head) — wrapper 1 cột,
     giữ đúng thứ tự cũ: tiêu đề → "View all articles" → lead. */
  .h26-articles__top {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .h26-articles .h26-articles__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--articles-head-gap-768);
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 var(--articles-head-gap-768);
  }

  .h26-articles__top > .h26-link-arrow {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin: 0 0 var(--articles-head-gap);
  }

  .h26-articles .h26-articles__lead {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
  }

  /* Section 06 PROMO + INQUIRY: thu padding (design @768) + tắt parallax nền */
  .h26-promo-panel { padding: var(--planner-panel-pad-768); }

  /* Mock 2026-10-28: note + mũi tên trang trí đè lên tiêu đề ở panel hẹp → ẩn */
  .h26-promo-panel__note,
  .h26-promo-panel__fly { display: none; }

  .h26-inquiry { padding: var(--inquiry-pad-768); }

  .h26-promo-panel__img {
    top: 0;
    height: 100%;
    transform: none !important;
  }
}

/* ---------- ≤ 576px: large mobile ---------- */
@media (max-width: 576px) {
  .h26-hero__actions .h26-btn { flex: 1 1 100%; }

  /* Section 02 BENEFITS: giữ 2 cột, thu khoảng đệm (design responsive.css) */
  :root {
    --benefits-grid-gap: var(--space-3);
    --benefit-card-pad: 18px var(--space-4);
  }

  .h26-benefits .h26-benefit__title { font-size: var(--font-size-base); }

  /* Mock mobile: các slide ẩn nút nav prev/next — chuyển slide bằng vuốt */
  .h26-tours .owl-nav { display: none; }

  /* Section 03 TOURS: nút CTA full-width + title nhỏ lại (design @576) */
  .h26-tours__cta .h26-btn {
    width: 100%;
    white-space: normal;
  }

  .h26-tours .h26-tour-card__title { font-size: var(--tour-card-title-size-576); }

  /* Section 05 MULTI-COUNTRY: pill nhỏ lại (design @576) */
  .h26-filters { gap: var(--multi-filter-gap-576); }

  .h26-pill { padding: 0 var(--multi-pill-pad-x-576); }

  /* Section 07 CRUISES: title card nhỏ lại (design @576) */
  .h26-tours .h26-cruise-card__title { font-size: var(--cruise-card-title-size-576); }

  /* Section 06 PROMO + INQUIRY — mock mobile: 1 card nền sáng (kem) chứa giới thiệu
     + feature 2 cột, form là card trắng lồng bên trong. */
  .h26-promo__grid {
    gap: 0;
    background: var(--planner-panel-bg-light);
    border-radius: var(--planner-panel-radius);
  }

  .h26-promo-panel {
    min-height: 0;
    padding: var(--planner-panel-pad-576);
    background: transparent;
    color: var(--planner-panel-title-color-light);
  }

  .h26-promo-panel__bg { display: none; }

  .h26-promo-panel__eyebrow { color: var(--planner-panel-eyebrow-color-light); }

  .h26-promo-panel__title { color: var(--planner-panel-title-color-light); }

  .h26-promo-panel__title em { color: var(--color-primary-dark); }

  .h26-promo-list {
    grid-template-columns: var(--planner-list-columns-576);
    gap: var(--planner-list-gap-576);
  }

  .h26-promo-list li {
    font-size: var(--font-size-sm);
    color: var(--planner-list-color-light);
  }

  .h26-promo-list__ico,
  .h26-promo-list li:hover .h26-promo-list__ico {
    background: var(--planner-ico-bg-light);
    border: var(--planner-ico-border-light);
    color: var(--planner-ico-color-light);
    rotate: none;
  }

  .h26-inquiry { margin: 0 var(--planner-panel-pad-576) var(--planner-panel-pad-576); }

  /* Nút CTA trong panel "About": nhãn dài, không xuống dòng được → cắt ở màn hình hẹp */
  .h26-promo-panel .h26-btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Form: Your name + Phone full-width, Email + Travel dates chung 1 hàng (mock mobile) */
  .h26-form-grid { grid-template-columns: 1fr 1fr; }

  .h26-form-grid .h26-field:nth-child(1),
  .h26-form-grid .h26-field:nth-child(4) { grid-column: 1 / -1; }

  .h26-inquiry__actions { grid-template-columns: 1fr; }

  /* Section 08 TESTIMONIALS — mock mobile: slider 1 card + ~0.3 card,
     cuộn ngang + snap, tràn phải tới mép màn hình. */
  .h26-reviews {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--review-slide-width-576);
    gap: var(--review-slide-gap-576);
    margin-right: calc(var(--container-padding) * -1);
    padding: var(--review-slide-pad-576);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .h26-reviews::-webkit-scrollbar { display: none; }

  .h26-review-card { scroll-snap-align: start; }

  /* Section 08 TESTIMONIALS: CTA full-width (design @576 .center-cta .btn) */
  .h26-reviews__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .h26-reviews__note { text-align: center; }

  .h26-reviews__cta .h26-btn {
    width: 100%;
    white-space: normal;
  }

  /* Section 10 ARTICLES — mock mobile: head căn giữa, card nằm ngang
     (ảnh vuông bên trái, chữ bên phải), ẩn link "Read article". */
  .h26-articles__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--articles-mobile-head-gap);
    margin: 0 0 var(--articles-mobile-grid-gap);
    text-align: center;
  }

  .h26-articles .h26-articles__head {
    display: block;
    margin: 0;
    text-align: center;
  }

  .h26-articles .h26-articles__lead,
  .h26-articles__top > .h26-link-arrow {
    margin: 0;
  }

  .h26-articles__top > .h26-link-arrow { justify-self: center; }

  .h26-articles__grid {
    grid-template-columns: var(--articles-grid-columns-576);
    gap: var(--articles-mobile-grid-gap);
  }

  .h26-article-card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--articles-mobile-card-gap);
    padding: var(--articles-mobile-card-pad);
    border: var(--border);
    border-radius: var(--articles-mobile-card-radius);
    background: var(--articles-mobile-card-bg);
  }

  .h26-article-card__body { padding: 0; }

  .h26-article-card__media {
    flex: 0 0 var(--articles-mobile-media-size);
    width: var(--articles-mobile-media-size);
    margin: 0;
    aspect-ratio: 1;
    border-radius: var(--articles-mobile-media-radius);
    box-shadow: var(--articles-mobile-media-shadow);
  }

  .h26-article-card__cat {
    margin-bottom: var(--articles-mobile-cat-gap);
    font-size: var(--articles-mobile-cat-size);
    letter-spacing: var(--articles-mobile-cat-tracking);
    text-transform: uppercase;
    color: var(--articles-mobile-cat-color);
  }

  .h26-article-card__title {
    font-size: var(--articles-mobile-title-size);
    -webkit-line-clamp: var(--articles-mobile-title-lines);
    min-height: 0;
  }

  .h26-article-card__text {
    margin-bottom: 0;
    font-size: var(--articles-mobile-text-size);
    line-height: var(--articles-mobile-text-line);
    -webkit-line-clamp: var(--articles-mobile-text-lines);
    min-height: 0;
  }

  .h26-article-card .h26-link-arrow { display: none; }

  /* ---------- Carousel 1 + 1/3 card/view (yêu cầu 2026-10-27) ----------
     Card rộng ~70% màn hình nên giữ meta/quote/mô tả, title kẹp 2 dòng,
     giá + nút CTA xếp dọc và nút full-width. */
  .h26-tour-card__body,
  .h26-cruise-card__body { padding: var(--tour-card-body-pad-576); }

  .h26-tour-card__price span,
  .h26-cruise-card__price span { display: none; }

  .h26-tours .h26-tour-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--tour-card-title-lines-576);
    overflow: hidden;
    line-height: var(--tour-card-title-line-576);
    min-height: var(--tour-card-title-min-576);
  }

  .h26-tours .h26-cruise-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--tour-card-title-lines-576);
    overflow: hidden;
  }

  .h26-tour-card__route { font-size: var(--tour-card-text-size-576); }

  .h26-tour-card__route .h26-icon {
    width: var(--space-3);
    height: var(--space-3);
  }

  .h26-tour-card__route span {
    min-height: calc(var(--tour-card-route-lines) * var(--tour-card-route-line) * var(--tour-card-text-size-576));
  }

  .h26-tour-card__foot,
  .h26-cruise-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--tour-card-foot-gap-576);
    padding-top: var(--tour-card-foot-pad-576);
  }

  .h26-tour-card__foot .h26-btn,
  .h26-cruise-card__foot .h26-btn {
    width: 100%;
    min-height: var(--tour-card-btn-height-576);
  }

  .h26-tour-card__price small,
  .h26-cruise-card__price small { font-size: var(--tour-card-text-size-576); }

  .h26-tour-card__price strong,
  .h26-cruise-card__price strong {
    font-size: var(--tour-card-price-size-576);
    line-height: var(--tour-card-price-line-576);
  }

  /* Card kế tiếp (1/3 card) lộ ra ngay mép phải màn hình (bỏ gutter phải của container).
     Trừ --tours-stage-inset-x vì .owl-stage-outer đã tràn ra ngoài wrap đúng 4px. */
  .h26-tours__carousel-wrap {
    margin-right: calc(var(--container-padding) * -1 + var(--tours-stage-inset-x));
  }

  .h26-dest-card__name {
    left: var(--dest-card-name-inset-576);
    right: var(--dest-card-name-inset-576);
    bottom: var(--dest-card-name-inset-576);
    font-size: var(--dest-card-name-size-576);
  }
}

/* ---------- ≤ 430px ---------- */
@media (max-width: 430px) {
  .h26-hero__title { font-size: clamp(34px, 10vw, 40px); }

  /* Section 02 BENEFITS: giữ 2 cột như mock mobile (html/Home-mobile.png) */
  .h26-benefits__grid { grid-template-columns: repeat(2, 1fr); }

  /* Section 03/07 card: padding + giá ở ≤430 đã do token compact 1 + 1/3 card/view
     trong @media (max-width: 576px) quyết định (--tour-card-*-576). */

  .h26-tours .owl-nav button.owl-prev,
  .h26-tours .owl-nav button.owl-next {
    width: var(--tours-nav-size-430);
    height: var(--tours-nav-size-430);
  }
}

/* ---------- ≤ 375px ---------- */
@media (max-width: 375px) {
  .h26-btn { padding: 0 var(--space-5); }

  /* Section 06 PROMO: feature 2 → 1 cột (2 cột chỉ còn ~112px, chữ gãy từ) */
  .h26-promo-list { grid-template-columns: var(--planner-list-columns-375); }

  /* Section 03 TOURS: title + foot (design @375) */
  .h26-tours .h26-tours__title { font-size: var(--tours-title-size-375); }

  .h26-tour-card__foot { flex-wrap: wrap; }

  /* Section 07 CRUISES: foot xuống dòng (design @375) */
  .h26-cruise-card__foot { flex-wrap: wrap; }

  /* Section 04 STYLES: title + label card nhỏ lại (design @375) */
  .h26-styles .h26-styles__title { font-size: var(--styles-title-size-375); }

  .h26-style-card__label,
  .h26-style-card--big .h26-style-card__label { font-size: var(--styles-card-label-size-375); }
}

/* ---------- ≤ 320px ---------- */
@media (max-width: 320px) {
  .h26-hero__title { font-size: 32px; }

  .h26-search__icon {
    width: 36px;
    height: 36px;
  }

  /* Section 06 PROMO + INQUIRY: padding-inline nhỏ nhất (design @320) */
  .h26-promo-panel { padding-inline: var(--planner-panel-pad-320); }

  .h26-inquiry { padding-inline: var(--inquiry-pad-320); }
}

/* ---------- Overflow safety ---------- */
@media (max-width: 1100px) {
  .h26-hero,
  .h26-hero ~ #content { max-width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .h26-hero__slide,
  .h26-hero [data-hero-step],
  .h26-hero__search,
  .h26-hero__arrow,
  .h26-btn {
    animation: none;
    transition-duration: .01ms;
    transition-delay: 0s;
  }

  .h26-hero__img { transform: none !important; }
  .h26-btn:hover { translate: none; }
  .h26-hero__arrow:hover { scale: none; }

  /* Animation A2: reveal hiện ngay, bỏ transform + thời lượng */
  html.h26-js .h26-reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition-duration: .01ms;
    transition-delay: 0s;
  }

  .h26-benefit,
  .h26-benefit__icon,
  .h26-benefit__stars {
    transition-duration: .01ms;
  }

  .h26-benefit:hover { translate: none; }
  .h26-benefit:hover .h26-benefit__icon { rotate: none; }

  /* Section 03 TOURS: tắt reveal + hover lift/zoom */
  html.h26-js .h26-reveal-up {
    opacity: 1;
    transform: none;
    transition-duration: .01ms;
  }

  /* Section 06 PROMO + INQUIRY: reveal ngay + tắt parallax/hover rotate */
  html.h26-js .h26-reveal-left,
  html.h26-js .h26-reveal-right {
    opacity: 1;
    translate: none;
    transition-duration: .01ms;
  }

  .h26-promo-panel__img { transform: none !important; }

  .h26-promo-list__ico { transition-duration: .01ms; }
  .h26-promo-list li:hover .h26-promo-list__ico { rotate: none; }

  .h26-tour-card,
  .h26-tour-card__media img,
  .h26-tours .owl-nav button.owl-prev,
  .h26-tours .owl-nav button.owl-next,
  .h26-tour-card .h26-icon--arrow,
  .h26-tours__cta .h26-icon--arrow {
    transition-duration: .01ms;
  }

  .h26-tour-card:hover { translate: none; }
  .h26-tour-card:hover .h26-tour-card__media img { scale: none; }
  .h26-tours .owl-nav button:hover:not(.disabled) { scale: none; }
  .h26-tour-card .h26-btn:hover .h26-icon--arrow,
  .h26-tours__cta .h26-btn:hover .h26-icon--arrow { translate: none; }

  /* Section 04 STYLES: tắt hover zoom/lift */
  .h26-style-card,
  .h26-style-card img,
  .h26-style-card::after,
  .h26-style-card__label {
    transition-duration: .01ms;
  }

  .h26-style-card:hover img { scale: none; translate: none; }
  .h26-style-card:hover .h26-style-card__label { translate: none; }

  /* Section 09 DESTINATIONS: tắt hover zoom/lift */
  .h26-dest-card,
  .h26-dest-card img,
  .h26-dest-card::after,
  .h26-dest-card__name {
    transition-duration: .01ms;
  }

  .h26-dest-card:hover img { scale: none; translate: none; }
  .h26-dest-card:hover .h26-dest-card__name { translate: none; }

  /* Section 05 MULTI-COUNTRY: tắt hover lift + filter swap */
  .h26-pill { transition-duration: .01ms; }
  .h26-pill:hover { translate: none; }
  .h26-swap-target { transition-duration: .01ms; }

  /* Section 07 CRUISES: tắt hover lift/zoom + animation tab in */
  .h26-cruise-card,
  .h26-cruise-card__media img,
  .h26-cruise-card .h26-icon--arrow,
  .h26-cruise-panel.is-entering {
    transition-duration: .01ms;
    animation: none;
  }

  .h26-cruise-card:hover { translate: none; }
  .h26-cruise-card:hover .h26-cruise-card__media img { scale: none; }
  .h26-cruise-card .h26-btn:hover .h26-icon--arrow { translate: none; }

  /* Section 08 TESTIMONIALS: tắt hover lift */
  .h26-review-card { transition-duration: .01ms; }
  .h26-review-card:hover { translate: none; }

  /* Section 10 ARTICLES: tắt hover zoom/lift + mũi tên link */
  .h26-article-card,
  .h26-article-card__media img,
  .h26-link-arrow,
  .h26-link-arrow .h26-icon {
    transition-duration: .01ms;
  }

  .h26-article-card:hover { translate: none; }
  .h26-article-card:hover .h26-article-card__media img { scale: none; }
  .h26-link-arrow:hover .h26-icon { translate: none; }
}