/* ==========================================================================
   AURA ASIA TRAVEL — home-2026.css
   Trang chủ 2026: Section 01 HERO (banner slide + search) và Section 02 BENEFITS.
   Nguồn thiết kế: html/assets/css/style.css (.hero, .search-panel, .btn, .owl-nav, .benefits, .benefit-card)
   Scope: .h26-hero / .h26-benefits — không ảnh hưởng CSS cũ của theme.
   ========================================================================== */

/* ---------- Khung hero ---------- */
.h26-hero {
  position: relative;
  z-index: 3;
  isolation: isolate;
  color: var(--color-white);
  background: var(--hero-media-bg);
  line-height: 1.65;
}

/* ---------- Slides: xếp lớp bằng grid → chiều cao = slide cao nhất ---------- */
.h26-hero__slides { display: grid; }

/* Không có slide nào trong DB → vẫn giữ khung để panel search không đè lên header */
.h26-hero__slides:empty { min-height: var(--hero-min-height); }

.h26-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-min-height);
  padding: calc(var(--header-height) + var(--hero-pad-top)) 0 var(--hero-pad-bottom);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-smooth),
              visibility 0s var(--duration-slow);
}

.h26-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.h26-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--hero-media-bg);
}

.h26-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

.h26-hero__img {
  position: absolute;
  left: 0;
  top: calc(var(--hero-parallax-headroom) * -1);
  width: 100%;
  height: calc(100% + var(--hero-parallax-headroom) * 2);
  object-fit: cover;
  will-change: transform;
}

/* ---------- Nội dung ---------- */
.h26-hero__container {
  width: calc(100% - var(--container-padding) * 2);
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

.h26-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--hero-content-width);
}

.h26-hero__eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.h26-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-hero);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--color-white);
  text-shadow: var(--hero-title-shadow);
}

.h26-hero__lead {
  max-width: var(--hero-lead-width);
  margin: var(--space-5) auto 0;
  font-size: var(--font-size-md);
  color: var(--hero-lead-color);
  text-shadow: var(--hero-lead-shadow);
}

.h26-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* ---------- Sprite icon riêng của hero ---------- */
.h26-hero__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Button (copy .btn của design, đổi tiền tố) ---------- */
.h26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-12);
  padding: 0 var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  -webkit-text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast),
              box-shadow var(--duration-fast),
              translate var(--duration-fast) var(--ease-smooth);
}

/* Bootstrap (iso.core.css) đặt `a:hover, a:focus { color; text-decoration: underline }`
   với specificity 0-1-1 → phải khai báo lại ở mức 0-2-0 để nút giữ đúng style của design. */
.h26-btn:hover,
.h26-btn:focus,
.h26-btn:active,
.h26-btn:visited {
  text-decoration: none;
  -webkit-text-decoration: none;
}

.h26-btn:hover { translate: 0 -2px; }

.h26-btn--accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--accent-shadow);
}

.h26-btn--accent:hover,
.h26-btn--accent:focus {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--accent-shadow-hover);
}

.h26-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--btn-primary-shadow);
}

.h26-btn--primary:hover,
.h26-btn--primary:focus {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.h26-btn--ghost {
  background: var(--btn-ghost-bg);
  color: var(--color-white);
  border-color: var(--btn-ghost-border);
  -webkit-backdrop-filter: blur(var(--btn-ghost-blur));
  backdrop-filter: blur(var(--btn-ghost-blur));
}

.h26-btn--ghost:hover,
.h26-btn--ghost:focus {
  background: var(--color-white);
  color: var(--color-heading);
}

/* ---------- Icon (copy .icon của design) ---------- */
.h26-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* Copy .icon--fill của design */
.h26-icon--fill { fill: currentColor; stroke: none; }

/* ---------- Mũi tên chuyển slide (style .owl-nav của design) ---------- */
.h26-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: var(--hero-arrow-size);
  height: var(--hero-arrow-size);
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-white);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-card);
  translate: 0 -50%;
  transition: background-color var(--duration-fast),
              color var(--duration-fast),
              scale var(--duration-fast) var(--ease-smooth);
}

.h26-hero__arrow--prev { left: var(--space-6); }
.h26-hero__arrow--next { right: var(--space-6); }

.h26-hero__arrow:hover {
  background: var(--color-primary);
  color: var(--color-white);
  scale: 1.08;
}

.h26-hero__arrow .h26-icon { width: var(--space-5); height: var(--space-5); }

/* ---------- Search panel (đè lên mép dưới hero, đúng design) ---------- */
.h26-hero__search {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  translate: 0 50%;
}

.h26-search {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  gap: var(--search-panel-gap);
  max-width: var(--search-panel-max-width);
  margin: 0 auto;
  padding: var(--search-panel-pad);
  background: var(--color-white);
  border-radius: var(--search-panel-radius);
  box-shadow: var(--search-panel-shadow);
  text-align: left;
}

.h26-search__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2);
  background: var(--search-field-bg);
  border-radius: var(--search-field-radius);
}

.h26-search__icon {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--search-icon-bg);
  color: var(--color-primary);
}

.h26-search__icon .h26-icon { width: var(--search-icon-glyph); height: var(--search-icon-glyph); }

.h26-search__control {
  flex: 1;
  min-width: 0;
}

.h26-search__control label {
  display: block;
  margin: 0 0 var(--search-label-gap);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  letter-spacing: var(--search-label-tracking);
  color: var(--color-text-light);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.h26-hero .h26-search__control select {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: var(--search-select-min-height);
  margin: 0;
  padding: var(--search-select-pad-y) 0 var(--search-select-pad-y);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--search-select-line-height);
  color: var(--color-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.h26-hero .h26-search__control select:hover { color: var(--color-primary-dark); }

.h26-hero .h26-search__control select option {
  font-weight: 400;
  color: var(--color-heading);
  background: var(--color-white);
}

.h26-search__submit {
  min-height: 54px;
  padding: 0 var(--space-6);
  border-radius: var(--search-button-radius);
}

/* ---------- Animation A1: hero intro ---------- */
@keyframes h26-hero-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.h26-hero [data-hero-step] {
  animation: h26-hero-in var(--hero-anim-duration) var(--ease-smooth) both;
}

.h26-hero [data-hero-step]:nth-child(2) { animation-delay: .24s; }
.h26-hero [data-hero-step]:nth-child(3) { animation-delay: .36s; }
.h26-hero [data-hero-step]:nth-child(4) { animation-delay: .48s; }

.h26-hero__search {
  animation: h26-hero-in var(--hero-search-duration) var(--ease-smooth) var(--hero-search-delay) both;
}

/* ---------- Khoảng bù cho panel search nhô ra khỏi hero ---------- */
/* JS đo lại chiều cao panel và ghi đè; giá trị dưới đây là fallback khi không có JS.
   Dùng `~` vì giữa hero và #content còn thẻ <script> của block. */
html.h26-is-home .h26-hero ~ #content { padding-top: var(--space-12); }

/* ==========================================================================
   SECTION 02 — BENEFITS ("What makes us different?")
   Nguồn thiết kế: html/assets/css/style.css (.benefits, .benefit-card).
   Nội dung card do admin nhập (TinyMCE): <p>, <ul class="ticks"><li>✓ …</li></ul>.
   ========================================================================== */
.h26-benefits {
  padding-top: var(--benefits-pad-top);
  padding-bottom: var(--benefits-pad-bottom);
}

/* Sprite icon của section — ẩn khỏi layout */
.h26-benefits__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.h26-benefits__grid {
  width: calc(100% - var(--container-padding) * 2);
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--benefits-grid-gap);
}

.h26-benefit {
  display: flex;
  flex-direction: column;
  padding: var(--benefit-card-pad);
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: translate var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.h26-benefit:hover {
  translate: 0 var(--benefit-hover-lift);
  box-shadow: var(--shadow-card-hover);
}

.h26-benefit__icon {
  width: var(--benefit-icon-size);
  height: var(--benefit-icon-size);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-4);
  transition: background-color var(--duration-normal),
              color var(--duration-normal),
              rotate var(--duration-normal) var(--ease-smooth);
}

.h26-benefit__icon img {
  display: block;
  width: auto;
  height: auto;
}

.h26-benefit:hover .h26-benefit__icon {
  background: var(--color-accent-dark);
  color: var(--color-white);
  rotate: var(--benefit-icon-rotate);
}

/* SVG riêng của design có stroke cam cố định → đổi sang trắng khi hover */
.h26-benefit:hover .h26-benefit__icon img {
  filter: brightness(0) invert(1);
}

.h26-benefits .h26-benefit__title {
  margin: 0 0 var(--benefit-title-gap);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading);
}

.h26-benefit__subtitle {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-heading);
}

.h26-benefit__body {
  font-size: var(--font-size-sm);
  line-height: 1.65;
  color: var(--color-text);
}

.h26-benefit__body p { margin: 0; }
.h26-benefit__body p + p { margin-top: var(--space-3); }

.h26-benefit__body ul,
.h26-benefit__body .ticks {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.h26-benefit__body li { line-height: 1.5; }

/* Khối điểm /10 + sao của card 1 — dữ liệu thật, design không có */
.h26-benefit__rating {
  margin-top: auto;
  padding-top: var(--benefit-rating-gap);
}

.h26-benefit__rating strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--benefit-rating-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--color-heading);
}

.h26-benefit__rating strong small {
  font-size: .45em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-light);
}

.h26-benefit__rating-label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.h26-benefit__stars {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--color-accent);
}

.h26-benefit__stars .h26-icon {
  width: var(--benefit-star-size);
  height: var(--benefit-star-size);
}

/* ---------- Animation A2: reveal-stagger (IntersectionObserver trong home-2026.js) ---------- */
/* Ẩn trước khi có JS (html.h26-js do home-2026.js thêm) → không JS vẫn thấy nội dung. */
html.h26-js .h26-reveal-stagger > * {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition: opacity var(--duration-slow) var(--ease-smooth) calc(var(--i, 0) * var(--reveal-step)),
              transform var(--duration-slow) var(--ease-smooth) calc(var(--i, 0) * var(--reveal-step)),
              translate var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-fast) var(--ease-smooth),
              rotate var(--duration-normal) var(--ease-smooth);
}

html.h26-js .h26-reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   SECTION 03 — BEST VIETNAM TOURS
   Nguồn thiết kế: html/assets/css/style.css (.section, .section-head, .tour-card,
   .price, .btn, .owl-nav) — giữ nguyên tên class bằng tiền tố h26-.
   ========================================================================== */
.h26-tours {
  padding-block: var(--tours-pad-block);
  background: var(--tours-bg);
  font-family: var(--font-body);
}

/* Sprite icon của section — ẩn khỏi layout */
.h26-tours__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.h26-tours__container {
  width: calc(100% - var(--container-padding) * 2);
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Section head (design .section-head) ---------- */
.h26-tours .h26-tours__head {
  max-width: var(--tours-head-width);
  margin: 0 auto var(--tours-head-gap);
  text-align: center;
}

.h26-tours__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--tours-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-primary);
}

.h26-tours .h26-tours__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--tours-title-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tours-title-tracking);
  color: var(--color-heading);
}

.h26-tours__lead {
  margin: var(--tours-lead-gap) 0 0;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* ---------- Carousel (Owl bundled trong iso.core.js) ---------- */
.h26-tours__carousel-wrap { position: relative; }
.h26-tours__carousel { position: relative; }

.h26-tours__carousel .owl-stage { display: flex; }
.h26-tours__carousel .owl-item { display: flex; }
.h26-tours__carousel .owl-item > * { width: 100%; }

.h26-tours__carousel .owl-stage-outer {
  padding: var(--tours-stage-pad);
  margin: var(--tours-stage-margin);
}

.h26-tours .owl-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.h26-tours .owl-nav button.owl-prev,
.h26-tours .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  pointer-events: auto;
  width: var(--tours-nav-size);
  height: var(--tours-nav-size);
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-white);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-card);
  transition: background-color var(--duration-fast),
              color var(--duration-fast),
              scale var(--duration-fast) var(--ease-smooth),
              opacity var(--duration-fast);
}

.h26-tours .owl-nav button.owl-prev { left: var(--tours-nav-offset); }
.h26-tours .owl-nav button.owl-next { right: var(--tours-nav-offset); }

.h26-tours .owl-nav button:hover:not(.disabled) {
  background: var(--color-primary);
  color: var(--color-white);
  scale: var(--tours-nav-hover-scale);
}

.h26-tours .owl-nav button.disabled {
  opacity: var(--tours-nav-disabled-opacity);
  cursor: default;
}

.h26-tours .owl-nav .h26-icon {
  width: var(--tours-nav-icon-size);
  height: var(--tours-nav-icon-size);
}

.h26-tours .owl-dots.disabled,
.h26-tours .owl-nav.disabled { display: none; }

/* Không JS: vẫn xem được danh sách tour (design html:not(.js)) */
html:not(.h26-js) .h26-tours__carousel {
  display: flex;
  gap: var(--tours-nav-icon-size);
  overflow-x: auto;
}
html:not(.h26-js) .h26-tours__carousel > * {
  flex: 0 0 var(--tours-fallback-card-width);
}

/* ---------- Tour card (design .tour-card) ---------- */
.h26-tour-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: translate var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.h26-tour-card:hover {
  translate: 0 var(--tour-card-hover-lift);
  box-shadow: var(--shadow-card-hover);
}

.h26-tour-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-primary-light);
  aspect-ratio: var(--tour-card-media-ratio);
}

.h26-tour-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration-slow) var(--ease-smooth);
}

.h26-tour-card:hover .h26-tour-card__media img {
  scale: var(--tour-card-img-hover-scale);
}

.h26-tour-card__badge {
  position: absolute;
  top: var(--tour-card-badge-offset);
  left: var(--tour-card-badge-offset);
  z-index: var(--z-base);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--accent-shadow);
}

.h26-tour-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--tour-card-body-pad);
}

.h26-tour-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tour-card-meta-gap);
  margin-bottom: var(--tour-card-meta-gap-bottom);
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.h26-tour-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--tour-card-icon-gap);
  font-weight: 600;
}

.h26-tour-card__tag .h26-icon {
  width: var(--tour-card-tag-icon);
  height: var(--tour-card-tag-icon);
  color: var(--color-accent);
}

.h26-tour-card__dur {
  display: inline-flex;
  align-items: center;
  gap: var(--tour-card-icon-gap);
  color: var(--color-primary-dark);
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}

.h26-tour-card__dur .h26-icon {
  width: var(--tour-card-dur-icon);
  height: var(--tour-card-dur-icon);
}

.h26-tours .h26-tour-card__title {
  margin: 0 0 var(--tour-card-title-gap);
  font-family: var(--font-heading);
  font-size: var(--tour-card-title-size);
  font-weight: 700;
  line-height: var(--tour-card-title-line);
  color: var(--color-heading);
  min-height: var(--tour-card-title-min);
}

.h26-tour-card__title a {
  color: inherit;
  text-decoration: none;
  -webkit-text-decoration: none;
  transition: color var(--duration-fast);
}

.h26-tour-card__title a:hover,
.h26-tour-card__title a:focus {
  color: var(--color-primary-dark);
  text-decoration: none;
  -webkit-text-decoration: none;
}

.h26-tour-card__route {
  display: flex;
  gap: var(--tour-card-route-gap);
  align-items: flex-start;
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text);
  line-height: var(--tour-card-route-line);
}

.h26-tour-card__route span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--tour-card-route-lines);
  overflow: hidden;
  min-height: calc(var(--tour-card-route-lines) * var(--tour-card-route-line) * var(--font-size-xs));
}

.h26-tour-card__route .h26-icon {
  width: var(--tour-card-route-icon);
  height: var(--tour-card-route-icon);
  margin-top: var(--tour-card-route-icon-offset);
  color: var(--color-primary);
}

.h26-tour-card__quote {
  margin: var(--tour-card-info-gap) 0 0;
  padding: var(--tour-card-info-pad) 0 0;
  border-top: var(--tour-card-info-border);
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.h26-tour-card__quote .h26-icon {
  display: block;
  width: var(--tour-card-quote-icon-w);
  height: var(--tour-card-quote-icon-h);
  margin-bottom: var(--space-1);
  color: var(--color-accent);
}

.h26-tour-card__quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  color: inherit;
}

.h26-tour-card__quote p {
  margin: 0;
  font-size: inherit;
  font-style: italic;
  line-height: var(--tour-card-quote-line);
  display: -webkit-box;
  -webkit-line-clamp: var(--tour-card-quote-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.h26-tour-card__quote cite {
  display: block;
  margin-top: var(--tour-card-quote-cite-gap);
  font-style: normal;
  color: var(--color-text-light);
}

.h26-tour-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tour-card-foot-gap);
  margin-top: auto;
  padding-top: var(--tour-card-foot-pad);
}

/* Tour không có giá: không render khối giá nên nút CTA dồn về cuối hàng */
.h26-tour-card__foot--solo {
  justify-content: flex-end;
}

.h26-tour-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--tour-card-price-gap);
  line-height: 1.15;
}

.h26-tour-card__price small {
  flex-basis: 100%;
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.h26-tour-card__price strong {
  font-family: var(--font-body);
  font-size: var(--tour-card-price-size);
  font-weight: 700;
  line-height: var(--tour-card-price-line);
  color: var(--color-primary);
}

.h26-tour-card__price span {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

/* ---------- Nút + CTA (design .btn--soft / .btn--sm / .center-cta) ---------- */
.h26-btn--soft {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.h26-btn--soft:hover,
.h26-btn--soft:focus {
  background: var(--color-primary);
  color: var(--color-white);
}

.h26-btn--sm {
  min-height: var(--tour-btn-sm-height);
  padding: 0 var(--tour-btn-sm-pad-x);
  font-size: var(--font-size-xs);   /* mock 2026-10-28: chữ nút "View details" 14px */
}

.h26-tour-card .h26-icon--arrow,
.h26-tours__cta .h26-icon--arrow {
  transition: translate var(--duration-fast) var(--ease-smooth);
}

.h26-tour-card .h26-btn:hover .h26-icon--arrow,
.h26-tours__cta .h26-btn:hover .h26-icon--arrow {
  translate: var(--tour-card-arrow-shift) 0;
}

.h26-tours__cta {
  margin-top: var(--tour-cta-gap);
  text-align: center;
}

/* ---------- Focus ring (design :focus-visible) ---------- */
.h26-tours a:focus-visible,
.h26-tours button:focus-visible {
  outline: var(--tour-focus-width) solid var(--color-accent);
  outline-offset: var(--tour-focus-offset);
  border-radius: var(--radius-sm);
}

/* ---------- Animation A2 — reveal-up ---------- */
html.h26-js .h26-reveal-up {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition: opacity var(--duration-slow) var(--ease-smooth),
              transform var(--duration-slow) var(--ease-smooth);
}

html.h26-js .h26-reveal-up.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   SECTION 04 — EXPERIENCE VIETNAM YOUR WAY (travel styles)
   Nguồn thiết kế: html/assets/css/style.css (.section, .section-head, .styles-grid,
   .style-card) — giữ nguyên tên class bằng tiền tố h26-.
   ========================================================================== */
.h26-styles {
  padding-block: var(--styles-pad-block);
  background: var(--styles-bg);
  font-family: var(--font-body);
}

.h26-styles__container {
  width: calc(100% - var(--container-padding) * 2);
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Section head (design .section-head) ---------- */
.h26-styles .h26-styles__head {
  max-width: var(--styles-head-width);
  margin: 0 auto var(--styles-head-gap);
  text-align: center;
}

.h26-styles__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--styles-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-primary);
}

.h26-styles .h26-styles__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--styles-title-size);
  font-weight: 700;
  line-height: var(--styles-title-line);
  letter-spacing: var(--styles-title-tracking);
  color: var(--color-heading);
}

.h26-styles__lead {
  margin: var(--styles-lead-gap) 0 0;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* ---------- Mosaic (design .styles-grid) ---------- */
.h26-styles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--styles-grid-gap);
  height: var(--styles-grid-height);
}

/* ---------- Card (design .style-card) ---------- */
.h26-style-card {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--styles-card-radius);
  background: var(--styles-card-bg);
  box-shadow: var(--shadow-card);
  transition: rotate var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal);
}

.h26-style-card:hover { box-shadow: var(--shadow-card-hover); }

.h26-style-card--big {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.h26-style-card--wide { grid-column: 3 / 5; }

.h26-style-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration-slow) var(--ease-smooth),
              translate var(--duration-slow) var(--ease-smooth);
}

.h26-style-card:hover img {
  scale: var(--styles-card-img-scale);
  translate: 0 var(--styles-card-img-lift);
}

.h26-style-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--styles-card-overlay);
  transition: opacity var(--duration-normal);
}

.h26-style-card__label {
  position: absolute;
  z-index: 2;
  left: var(--styles-card-label-inset-x);
  right: var(--styles-card-label-inset-x);
  bottom: var(--styles-card-label-inset-bottom);
  font-family: var(--font-heading);
  font-size: var(--styles-card-label-size);
  font-weight: 700;
  line-height: var(--styles-card-label-line);
  color: var(--color-white);
  text-shadow: var(--styles-card-label-shadow);
  transition: translate var(--duration-normal) var(--ease-smooth);
}

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

.h26-style-card:hover .h26-style-card__label {
  translate: 0 var(--styles-card-label-lift);
}

/* ---------- Focus ring (design :focus-visible) ---------- */
.h26-styles a:focus-visible {
  outline: var(--styles-focus-width) solid var(--color-accent);
  outline-offset: var(--styles-focus-offset);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   SECTION 05 — BEST MULTICOUNTRIES TOURS
   Kế thừa nguyên section 03: section dùng lại class .h26-tours (nền, head, carousel,
   .h26-tour-card) — chỉ thêm hàng tab lọc và trạng thái rỗng.
   Nguồn thiết kế: html/assets/css/style.css (.filters, .pill, .swap-target, .sr-only).
   ========================================================================== */
.h26-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--multi-filter-gap);
  margin-bottom: var(--multi-filters-gap-bottom);
}

.h26-pill {
  min-height: var(--multi-pill-min-height);
  padding: 0 var(--multi-pill-pad-x);
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--multi-pill-bg);
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: var(--multi-pill-font-size);
  font-weight: var(--multi-pill-font-weight);
  cursor: pointer;
  transition: background-color var(--duration-fast),
              color var(--duration-fast),
              border-color var(--duration-fast),
              box-shadow var(--duration-fast),
              translate var(--duration-fast);
}

.h26-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  translate: 0 var(--multi-pill-hover-lift);
}

.h26-pill.is-active,
.h26-pill[aria-pressed="true"] {
  background: var(--multi-pill-active-bg);
  border-color: var(--multi-pill-active-bg);
  color: var(--multi-pill-active-color);
  box-shadow: var(--multi-pill-active-shadow);
}

/* ---------- Animation A13 — filter swap (design .swap-target / .is-swapping) ---------- */
.h26-swap-target {
  transition: opacity var(--duration-normal) var(--ease-smooth),
              translate var(--duration-normal) var(--ease-smooth);
}

.h26-swap-target.is-swapping {
  opacity: 0;
  translate: 0 var(--multi-swap-offset);
}

/* ---------- Trạng thái tab không có tour nào trong danh sách nổi bật ---------- */
.h26-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.h26-multi__empty {
  margin-top: var(--multi-empty-gap);
  text-align: center;
}

.h26-multi__empty p {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

/* ==========================================================================
   SECTION 07 — BEST SELLING CRUISES (tab Halong Bay / Mekong River)
   Kế thừa nguyên section 03 + 05: dùng lại .h26-tours (nền, head, carousel, .h26-btn),
   .h26-filters / .h26-pill (tab). Chỉ thêm tab-panel (A12 tab-in) và .cruise-card.
   Nguồn thiết kế: html/assets/css/style.css (.cruise-card, .stars, .tab-panel, .tab-enter).
   ========================================================================== */
.h26-cruise-panel[hidden] { display: none; }

/* ---------- Animation A12 — tab in (design .tab-enter / @keyframes tab-in) ---------- */
.h26-cruise-panel.is-entering {
  animation: h26-cruise-tab-in var(--duration-slow) var(--ease-smooth);
}

@keyframes h26-cruise-tab-in {
  from { opacity: 0; transform: translateY(var(--cruise-tab-in-offset)); }
  to { opacity: 1; transform: none; }
}

/* ---------- Cruise card (design .cruise-card) ---------- */
.h26-cruise-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: translate var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.h26-cruise-card:hover {
  translate: 0 var(--cruise-card-hover-lift);
  box-shadow: var(--shadow-card-hover);
}

.h26-cruise-card__media {
  display: block;
  overflow: hidden;
  background: var(--color-primary-light);
  aspect-ratio: var(--cruise-card-media-ratio);
}

.h26-cruise-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration-slow) var(--ease-smooth);
}

.h26-cruise-card:hover .h26-cruise-card__media img {
  scale: var(--tour-card-img-hover-scale);
}

.h26-cruise-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--cruise-card-body-pad);
}

.h26-cruise-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cruise-card-top-gap);
  margin-bottom: var(--cruise-card-top-gap-bottom);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text);
}

.h26-cruise-card__stars {
  display: inline-flex;
  gap: var(--cruise-card-star-gap);
  color: var(--color-accent);
}

.h26-cruise-card__stars .h26-icon {
  width: var(--cruise-card-star-size);
  height: var(--cruise-card-star-size);
}

/* Sao chưa đạt (star_number < 5) — cùng kích thước, màu viền */
.h26-cruise-card__stars .h26-icon--off { color: var(--color-border); }

.h26-tours .h26-cruise-card__title {
  margin: 0 0 var(--cruise-card-title-gap);
  font-family: var(--font-heading);
  font-size: var(--cruise-card-title-size);
  font-weight: 700;
  line-height: var(--cruise-card-title-line);
  color: var(--color-heading);
}

.h26-cruise-card__title a {
  color: inherit;
  text-decoration: none;
  -webkit-text-decoration: none;
  transition: color var(--duration-fast);
}

.h26-cruise-card__title a:hover,
.h26-cruise-card__title a:focus {
  color: var(--color-primary-dark);
  text-decoration: none;
  -webkit-text-decoration: none;
}

.h26-cruise-card__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--cruise-card-text-line);
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: var(--cruise-card-text-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.h26-cruise-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tour-card-foot-gap);
  margin-top: auto;
  padding-top: var(--cruise-card-foot-pad);
}

/* Cruise không có giá: ẩn khối giá nên nút CTA dồn về cuối hàng */
.h26-cruise-card__foot--solo {
  justify-content: flex-end;
}

.h26-cruise-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--tour-card-price-gap);
  line-height: 1.15;
}

.h26-cruise-card__price small {
  flex-basis: 100%;
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.h26-cruise-card__price strong {
  font-family: var(--font-body);
  font-size: var(--cruise-card-price-size);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-primary);
}

.h26-cruise-card__price span {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.h26-cruise-card .h26-icon--arrow {
  transition: translate var(--duration-fast) var(--ease-smooth);
}

.h26-cruise-card .h26-btn:hover .h26-icon--arrow {
  translate: var(--tour-card-arrow-shift) 0;
}

/* ==========================================================================
   SECTION 06 — PROMO + INQUIRY ("Plan my trip & Unlock my exclusive offer")
   Nguồn thiết kế: html/assets/css/style.css (.promo, .promo-panel, .inquiry, .field).
   Ảnh nền: default_home_image; form post về mod=contacthome.
   ========================================================================== */
.h26-promo {
  font-family: var(--font-body);
  padding-block: var(--planner-pad-block);
}

/* Sprite icon của section — ẩn khỏi layout */
.h26-promo__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.h26-promo__grid {
  width: calc(100% - var(--container-padding) * 2);
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: var(--planner-grid-columns);
  gap: var(--planner-grid-gap);
  align-items: stretch;
}

/* Grid item mặc định min-width:auto = min-content → panel/form không co theo track,
   tràn ra ngoài container ở màn hình hẹp (< ~410px). */
.h26-promo__grid > * {
  min-width: 0;
}

/* ---------- Panel trái ---------- */
.h26-promo-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--planner-panel-min-height);
  padding: var(--planner-panel-pad);
  border-radius: var(--planner-panel-radius);
  color: var(--color-white);
  background: var(--planner-panel-bg);
}

.h26-promo-panel__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--planner-panel-bg);
}

.h26-promo-panel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--planner-panel-overlay);
}

.h26-promo-panel__img {
  position: absolute;
  left: 0;
  top: calc(var(--hero-parallax-headroom) * -1);
  width: 100%;
  height: calc(100% + var(--hero-parallax-headroom) * 2);
  object-fit: cover;
  object-position: 72% 50%;   /* mock 2026-10-28: giữ boong tàu bên phải như Home-destop */
  will-change: transform;
}

.h26-promo-panel__eyebrow {
  display: block;
  margin-bottom: var(--planner-eyebrow-gap);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--planner-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-accent);
}

.h26-promo-panel__title {
  margin: 0 0 var(--planner-panel-title-gap);
  font-family: var(--font-heading);
  font-size: var(--planner-panel-title-size);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
}

.h26-promo-panel__title em {
  position: relative;
  font-style: italic;
  white-space: nowrap;   /* mock 2026-10-28: giữ "Your Journey" trên 1 dòng để gạch chân liền mạch */
  color: var(--color-accent);
}

/* Mock 2026-10-28: nét gạch tay màu cam dưới chữ "Your Journey" */
.h26-promo-panel__title em::after {
  content: "";
  position: absolute;
  left: var(--planner-title-underline-left);
  right: var(--planner-title-underline-right);
  bottom: var(--planner-title-underline-bottom);
  height: var(--planner-title-underline-height);
  border-radius: var(--planner-title-underline-radius);
  background: var(--color-accent);
  rotate: var(--planner-title-underline-rotate);
}

/* Mock 2026-10-28: tim vẽ tay (skin/images/home/Vector.svg) sau chữ "Your Journey" */
.h26-promo-panel__heart {
  display: inline-block;
  width: var(--planner-heart-width);
  height: auto;
  margin-left: var(--planner-heart-gap);
  vertical-align: middle;
}

/* Mock 2026-10-28: chữ "Your journey, our priority" góc phải trên panel */
.h26-promo-panel__note {
  position: absolute;
  z-index: 1;
  top: var(--planner-note-top);
  right: var(--planner-note-right);
  width: var(--planner-note-width);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--planner-note-size);
  line-height: var(--planner-note-line);
  color: var(--color-white);
  text-align: right;
  pointer-events: none;
}

/* Mock 2026-10-28: mũi tên nét đứt (skin/images/home/fly.svg) */
.h26-promo-panel__fly {
  position: absolute;
  z-index: 1;
  top: var(--planner-fly-top);
  right: var(--planner-fly-right);
  width: var(--planner-fly-width);
  height: auto;
  pointer-events: none;
}

.h26-promo-list {
  display: grid;
  gap: var(--planner-list-gap);
  margin: 0 0 var(--planner-list-gap-bottom);
  padding: 0;
  list-style: none;
}

.h26-promo-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--planner-list-item-gap);
  font-size: var(--font-size-base);
  line-height: var(--planner-list-line);
  color: var(--planner-list-color);
}

/* Cho phép chữ co lại trong cột hẹp (mobile 2 cột) thay vì đẩy tràn panel */
.h26-promo-list li > span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
}

.h26-promo-list__ico {
  width: var(--planner-ico-size);
  height: var(--planner-ico-size);
  flex: none;
  display: grid;
  place-items: center;
  border: var(--planner-ico-border);
  border-radius: var(--radius-pill);
  background: var(--planner-ico-bg);
  color: var(--color-white);
  transition: background-color var(--duration-normal) var(--ease-smooth),
              rotate var(--duration-normal) var(--ease-smooth);
}

.h26-promo-list li:hover .h26-promo-list__ico {
  background: var(--color-accent-dark);
  rotate: var(--planner-ico-rotate);
}

.h26-promo-panel .h26-btn {
  align-self: flex-start;
}

/* ---------- Form phải ---------- */
.h26-inquiry {
  padding: var(--inquiry-pad);
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--inquiry-radius);
  box-shadow: var(--shadow-card);
}

.h26-inquiry__title {
  margin: 0 0 var(--inquiry-title-gap);
  font-family: var(--font-heading);
  font-size: var(--inquiry-title-size);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
}

.h26-inquiry__lead {
  margin: 0 0 var(--inquiry-lead-gap);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.h26-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--inquiry-grid-gap);
}

.h26-field--full {
  grid-column: 1 / -1;
}

.h26-field input,
.h26-field textarea {
  width: 100%;
  min-height: var(--inquiry-input-min-height);
  padding: var(--inquiry-input-pad);
  border: var(--inquiry-input-border);
  border-radius: var(--inquiry-input-radius);
  background: var(--inquiry-input-bg);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-heading);
  transition: border-color var(--duration-fast),
              box-shadow var(--duration-fast),
              background-color var(--duration-fast);
}

.h26-field textarea {
  min-height: var(--inquiry-textarea-min-height);
  resize: vertical;
}

.h26-field input:focus,
.h26-field textarea:focus {
  outline: none;
  background: var(--inquiry-input-bg-focus);
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.h26-field.has-error input,
.h26-field.has-error textarea {
  border-color: var(--inquiry-error-border);
  background: var(--inquiry-error-bg);
}

.h26-field__error {
  display: block;
  min-height: var(--inquiry-error-min-height);
  padding-top: var(--inquiry-error-pad-top);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

/* Chỉ giữ chỗ thông báo lỗi khi field thực sự lỗi — không đẩy các input xa nhau. */
.h26-field:not(.has-error) .h26-field__error {
  min-height: 0;
  padding-top: 0;
}

.h26-inquiry__captcha {
  margin-bottom: var(--space-4);
  overflow: hidden;   /* reCAPTCHA bị scale nhỏ (home-2026.js) — cắt phần dư của transform */
}

.h26-inquiry__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--inquiry-actions-gap);
  margin-top: var(--inquiry-actions-top);
}

.h26-btn--whatsapp {
  background: var(--color-primary);
  color: var(--color-white);
}

.h26-btn--whatsapp:hover,
.h26-btn--whatsapp:focus {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.h26-inquiry__spam {
  position: absolute;
  left: var(--inquiry-spam-offset);
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}

.h26-inquiry__status {
  min-height: var(--inquiry-status-min-height);
  margin: var(--inquiry-status-top) 0 0;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.h26-inquiry__status.is-success {
  color: var(--color-success);
}

.h26-inquiry__status.is-error {
  color: var(--color-danger);
}

/* ---------- Trạng thái đang gửi form (submit → loading → alert) ----------
   Spinner là chỉ báo chức năng của nút submit, không thuộc bộ animation A1–A17. */
.h26-inquiry__actions .h26-btn.is-loading {
  cursor: progress;
  opacity: var(--inquiry-loading-opacity);
}

.h26-inquiry__actions .h26-btn.is-loading .h26-icon--arrow {
  display: none;
}

.h26-inquiry__actions .h26-btn.is-loading::after {
  content: "";
  width: var(--inquiry-spinner-size);
  height: var(--inquiry-spinner-size);
  border: var(--inquiry-spinner-ring) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: h26-inquiry-spin var(--inquiry-spinner-duration) linear infinite;
}

@keyframes h26-inquiry-spin {
  to { transform: rotate(360deg); }
}

/* Lịch chọn ngày (jQuery UI datepicker đã bundle trong iso.core.js) — jQuery UI gán z-index
   inline rất thấp nên phải ép bằng !important để lịch nổi trên header (giống bookinghotel.css) */
#ui-datepicker-div {
  z-index: var(--z-dropdown) !important;
}

.h26-inquiry__note {
  margin: var(--inquiry-note-top) 0 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

/* ---------- Reveal A2 — biến thể trái/phải (design .reveal-left/.reveal-right) ---------- */
html.h26-js .h26-reveal-left,
html.h26-js .h26-reveal-right {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-smooth),
              translate var(--duration-slow) var(--ease-smooth);
}

html.h26-js .h26-reveal-left {
  translate: var(--reveal-offset-left) 0;
}

html.h26-js .h26-reveal-right {
  translate: var(--reveal-offset-right) 0;
}

html.h26-js .h26-reveal-left.is-visible,
html.h26-js .h26-reveal-right.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ==========================================================================
   SECTION 09 — DESTINATIONS ("Asia, One Journey at a Time")
   Nguồn thiết kế: html/assets/css/style.css (#asia, .dest-card) — kế thừa
   .h26-tours (container/head/carousel), card riêng .h26-dest-card.
   ========================================================================== */
.h26-countries {
  padding-top: 0;                 /* design #asia padding-top:0 */
  background: var(--dest-bg);
}

/* Ít hơn 5 quốc gia (số card/view của design ở desktop): stage hẹp hơn
   .owl-stage-outer → căn giữa. Khi stage rộng hơn (mobile 2–3 card/view)
   auto margin resolve về 0 nên carousel vẫn trượt bình thường. */
.h26-countries .h26-dest-carousel--centered .owl-stage {
  margin-left: auto;
  margin-right: auto;
}

.h26-dest-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--dest-card-aspect);
  border-radius: var(--dest-card-radius);
  background: var(--dest-card-bg);
  isolation: isolate;
  box-shadow: var(--dest-card-shadow);
  transition: box-shadow var(--duration-normal);
}

.h26-dest-card:hover {
  box-shadow: var(--dest-card-shadow-hover);
}

.h26-dest-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration-slow) var(--ease-smooth),
              translate var(--duration-slow) var(--ease-smooth);
}

.h26-dest-card:hover img {
  scale: var(--dest-card-img-scale);
  translate: 0 var(--dest-card-img-lift);
}

.h26-dest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--dest-card-overlay);
  transition: background-color var(--duration-normal);
}

.h26-dest-card:hover::after {
  background-color: var(--dest-card-overlay-hover);
}

.h26-dest-card__name {
  position: absolute;
  z-index: 2;
  left: var(--dest-card-name-inset-x);
  right: var(--dest-card-name-inset-x);
  bottom: var(--dest-card-name-inset-bottom);
  font-family: var(--font-heading);
  font-size: var(--dest-card-name-size);
  font-weight: 700;
  line-height: var(--dest-card-name-line);
  color: var(--color-white);
  text-shadow: var(--dest-card-name-shadow);
  transition: translate var(--duration-normal) var(--ease-smooth);
}

.h26-dest-card:hover .h26-dest-card__name {
  translate: 0 var(--dest-card-name-lift);
}

/* ==========================================================================
   SECTION 08 — TESTIMONIALS ("Words from Those Who’ve Traveled")
   Nguồn thiết kế: html/assets/css/style.css (#reviews, .chip, .reviews,
   .review-card, .avatar, .reviews-note, .center-cta) — kế thừa .h26-tours
   (container/head/title/lead), phần còn lại dùng tiền tố h26-.
   ========================================================================== */
.h26-testimonials {
  padding-block: var(--review-pad-block);
  background: var(--review-bg);
}

/* ---------- Chip nhãn section (design .chip) ---------- */
.h26-chip {
  display: inline-block;
  margin-bottom: var(--review-chip-gap);
  padding: var(--review-chip-pad);
  border-radius: var(--radius-pill);
  background: var(--review-chip-bg);
  color: var(--review-chip-color);
  font-family: var(--font-body);
  font-size: var(--review-chip-size);
  font-weight: 700;
}

/* ---------- Lưới review (design .reviews) ---------- */
.h26-reviews {
  display: grid;
  grid-template-columns: var(--review-grid-columns);
  gap: var(--review-grid-gap);
}

/* ---------- Review card (design .review-card) ---------- */
.h26-review-card {
  display: flex;
  flex-direction: column;
  padding: var(--review-card-pad);
  border: var(--review-card-border);
  border-radius: var(--review-card-radius);
  background: var(--review-card-bg);
  box-shadow: var(--review-card-shadow);
  transition: translate var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.h26-review-card:hover {
  translate: 0 var(--review-card-hover-lift);
  box-shadow: var(--review-card-shadow-hover);
}

.h26-review-card__stars {
  display: inline-flex;
  gap: var(--review-star-gap);
  margin-bottom: var(--review-stars-gap);
  color: var(--color-accent);
}

.h26-review-card__stars .h26-icon {
  width: var(--review-star-size);
  height: var(--review-star-size);
}

.h26-review-card__quote {
  flex: 1;
  margin: 0;
  font-size: var(--review-quote-size);
  font-style: italic;
  line-height: var(--review-quote-line);
  color: var(--color-heading);
}

.h26-review-card__who {
  display: flex;
  align-items: center;
  gap: var(--review-who-gap);
  margin-top: var(--review-who-top);
}

/* Avatar: ảnh thật từ DB, fallback chữ cái đầu (design .avatar) */
.h26-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--review-avatar-size);
  height: var(--review-avatar-size);
  border-radius: 50%;
  background: var(--review-avatar-bg);
  color: var(--review-avatar-color);
  font-weight: 700;
  object-fit: cover;
}

.h26-review-card__who strong {
  display: block;
  font-size: var(--review-name-size);
  line-height: var(--review-name-line);
  color: var(--color-heading);
}

.h26-review-card__who span {
  font-size: var(--review-meta-size);
  color: var(--review-meta-color);
}

/* ---------- Note + CTA (mock 2026-10-28: note và nút outline cam nằm cùng hàng, canh giữa) ---------- */
.h26-reviews__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--review-foot-gap);
  margin-top: var(--review-note-top);
}

.h26-reviews__note {
  margin: 0;
  font-size: var(--review-note-size);
  color: var(--review-note-color);
  text-align: left;
}

.h26-reviews__cta {
  margin: 0;
  text-align: center;
}

.h26-reviews__cta .h26-btn {
  min-height: var(--review-cta-height);
  padding: 0 var(--review-cta-pad-x);
  font-size: var(--review-cta-size);
}

/* ---------- Nút outline cam (mock .btn--outline — CTA section 08) ---------- */
.h26-btn--outline {
  background: var(--btn-outline-bg);
  color: var(--btn-outline-color);
  border-color: var(--btn-outline-border);
  border-width: var(--review-cta-border);
}

.h26-btn--outline:hover,
.h26-btn--outline:focus {
  background: var(--btn-outline-hover-bg);
  color: var(--btn-outline-hover-color);
}

/* ==========================================================================
   SECTION 10 — ARTICLES ("Travel Articles & Insider Guides")
   Nguồn thiết kế: html/assets/css/style.css (#articles, .articles__head,
   .articles__lead, .articles-grid, .article-card, .link-arrow) — kế thừa
   .h26-tours (container/eyebrow/title/lead), phần còn lại dùng tiền tố h26-.
   ========================================================================== */
.h26-articles {
  padding-top: 0;                 /* design #articles style="padding-top:0" */
  background: var(--articles-bg);
}

/* ---------- Section head (design .articles__head + .section-head--left) ----------
   Wrapper 2 cột: tiêu đề (cột 1) + link "View all articles" (cột 2, đáy hàng 1),
   lead nằm hàng 2 với khoảng cách --articles-head-gap (giữ đúng khoảng cách cũ
   giữa tiêu đề và lead). Ở ≤768/≤576 wrapper đổi cách xếp — xem file responsive. */
.h26-articles__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  row-gap: var(--articles-head-gap);
  margin: 0 0 var(--articles-lead-gap);
}

.h26-articles .h26-articles__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--articles-head-gap-x);
  max-width: none;                /* design .section-head--left (design không giới hạn 720px) */
  margin: 0;
  text-align: left;
  grid-column: 1 / -1;
  grid-row: 1;
}

.h26-articles__top > .h26-link-arrow {
  justify-self: end;
  grid-column: 2;
  grid-row: 1;
}

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

/* ---------- Link mũi tên (design .link-arrow) ---------- */
.h26-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--articles-link-gap);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-primary-dark);
  white-space: nowrap;
  text-decoration: none;
  -webkit-text-decoration: none;
  transition: color var(--duration-fast);
}

/* Bootstrap (iso.core.css) đặt `a:hover, a:focus { text-decoration: underline }`
   với specificity 0-1-1 → khai báo lại ở mức 0-2-0 để link giữ đúng design. */
.h26-link-arrow:hover,
.h26-link-arrow:focus,
.h26-link-arrow:active,
.h26-link-arrow:visited {
  text-decoration: none;
  -webkit-text-decoration: none;
}

.h26-link-arrow .h26-icon {
  width: var(--articles-link-icon);
  height: var(--articles-link-icon);
  transition: translate var(--duration-fast) var(--ease-smooth);
}

.h26-link-arrow:hover {
  color: var(--color-accent-dark);
}

.h26-link-arrow:hover .h26-icon {
  translate: var(--articles-link-shift) 0;
}

/* ---------- Lưới card (design .articles-grid) ---------- */
.h26-articles__grid {
  display: grid;
  grid-template-columns: var(--articles-grid-columns);
  gap: var(--articles-grid-gap);
}

/* ---------- Card (design .article-card + .media) ----------
   Mock 2026-10-28: card dùng border/shadow/hover giống .h26-tour-card. */
.h26-article-card {
  display: flex;
  flex-direction: column;
  background: var(--articles-card-bg);
  border: var(--border);
  border-radius: var(--articles-card-radius);
  box-shadow: var(--articles-card-shadow);
  overflow: hidden;
  transition: translate var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.h26-article-card:hover {
  translate: 0 var(--articles-card-hover-lift);
  box-shadow: var(--articles-card-shadow-hover);
}

/* Bọc phần chữ để mobile xếp card nằm ngang (ảnh trái – chữ phải);
   desktop giữ nguyên: body chiếm hết chiều cao còn lại, link dính đáy card. */
.h26-article-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--articles-card-body-pad);
}

.h26-article-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--articles-card-media-ratio);
  background: var(--articles-card-media-bg);
}

.h26-article-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration-slow) var(--ease-smooth);
}

.h26-article-card:hover .h26-article-card__media img {
  scale: var(--articles-card-img-scale);
}

.h26-article-card__cat {
  margin-bottom: var(--articles-card-cat-gap);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-light);
}

.h26-article-card__title {
  margin: 0 0 var(--articles-card-title-gap);
  font-family: var(--font-heading);
  font-size: var(--articles-card-title-size);
  font-weight: 700;
  line-height: var(--articles-card-title-line);
  color: var(--color-heading);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--articles-card-title-lines);
  overflow: hidden;
  min-height: calc(var(--articles-card-title-lines) * var(--articles-card-title-line) * var(--articles-card-title-size));
}

.h26-article-card__title a {
  color: inherit;
  text-decoration: none;
  -webkit-text-decoration: none;
}

.h26-article-card__title a:hover,
.h26-article-card__title a:focus {
  color: var(--color-primary-dark);
  text-decoration: none;
  -webkit-text-decoration: none;
}

.h26-article-card__text {
  margin: 0 0 var(--articles-card-text-gap);
  font-size: var(--font-size-sm);
  line-height: var(--articles-card-text-line);
  color: var(--color-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--articles-card-text-lines);
  overflow: hidden;
  min-height: calc(var(--articles-card-text-lines) * var(--articles-card-text-line) * var(--font-size-sm));
}

.h26-article-card .h26-link-arrow {
  margin-top: auto;
  font-size: var(--font-size-sm);
}