/*
 * Vé combo đặt trước trong hero trang tuyến Vũng Tàu (inc/combo-early-vt.php).
 * Hình dáng lấy từ chính tấm vé xe: thân vé vàng Hải Vân, đường xé răng cưa có
 * hai lỗ khuyết, cuống vé là dải ngày. Điểm nhấn duy nhất là con số giá combo.
 */
.hvt {
  /* Màu: vàng thương hiệu làm nền vé, mực tối của hero làm chữ. */
  --hvt-yellow: oklch(84.5% 0.17 86);      /* ≈ #ffc20e */
  --hvt-yellow-deep: oklch(76% 0.16 80);
  --hvt-ink: oklch(29% 0.006 265);         /* ≈ #2e2f31 */
  --hvt-ink-soft: oklch(40% 0.008 265);
  --hvt-paper: oklch(96.5% 0.035 90);      /* cuống vé: vàng rất nhạt */
  --hvt-hole: oklch(27.5% 0.005 265);      /* trùng nền hero để lỗ khuyết "thủng" */
  --hvt-red: oklch(50% 0.19 27);
  --hvt-focus: oklch(55% 0.2 262);
  /* Khoảng cách 4pt, bo góc một hệ 12px. */
  --hvt-s1: 4px; --hvt-s2: 8px; --hvt-s3: 12px; --hvt-s4: 16px; --hvt-s6: 24px; --hvt-s8: 32px;
  --hvt-radius: 12px;
  --hvt-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hvt-shadow:
    0 1px 2px oklch(20% 0.02 80 / 0.25),
    0 8px 16px oklch(20% 0.02 80 / 0.22),
    0 24px 48px oklch(15% 0.01 265 / 0.35);

  position: relative;
  color: var(--hvt-ink);
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 18px 28px oklch(12% 0.01 265 / 0.45));
  animation: hvt-in 700ms var(--hvt-ease) backwards;
}
@keyframes hvt-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* ---- Thân vé ------------------------------------------------------------ */
.hvt-main {
  position: relative;
  padding: var(--hvt-s8) var(--hvt-s6);
  border-radius: var(--hvt-radius) var(--hvt-radius) 0 0;
  background: var(--hvt-yellow);
}
/* Đường xé: răng cưa chấm + hai lỗ khuyết hai mép. */
.hvt-main::after {
  content: "";
  position: absolute;
  left: var(--hvt-s6);
  right: var(--hvt-s6);
  bottom: 0;
  border-bottom: 2px dashed oklch(29% 0.006 265 / 0.45);
}
.hvt-main::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: -12px;
  height: 24px;
  background:
    radial-gradient(circle at 12px 12px, var(--hvt-hole) 11.5px, transparent 12px) left / 24px 24px no-repeat,
    radial-gradient(circle at 12px 12px, var(--hvt-hole) 11.5px, transparent 12px) right / 24px 24px no-repeat;
  z-index: 1;
  pointer-events: none;
}
.hvt:not(.is-open) .hvt-main { border-radius: var(--hvt-radius); }
.hvt:not(.is-open) .hvt-main::after,
.hvt:not(.is-open) .hvt-main::before { display: none; }

.hvt-title {
  margin: 0;
  color: var(--hvt-ink);
  font-size: clamp(22px, 1.4vw + 16px, 28px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Giá: yếu tố được đẩy lên cực đại. */
.hvt-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--hvt-s2) var(--hvt-s4);
  margin: var(--hvt-s4) 0 0;
}
.hvt-amount strong {
  display: inline-block;
  font-size: clamp(72px, 7vw + 40px, 112px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.04em;
}
.hvt-was { display: grid; gap: var(--hvt-s1); padding-bottom: var(--hvt-s1); }
.hvt-was s { color: var(--hvt-ink-soft); font-size: 20px; font-weight: 700; text-decoration-thickness: 2px; }
.hvt-save {
  display: inline-block;
  padding: var(--hvt-s1) var(--hvt-s2);
  border-radius: 8px;
  background: var(--hvt-red);
  color: oklch(98% 0.01 90);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.hvt-for { margin: var(--hvt-s3) 0 0; color: var(--hvt-ink-soft); font-size: 15px; font-weight: 700; line-height: 1.5; }

.hvt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hvt-s2) var(--hvt-s4); margin-top: var(--hvt-s6); }
.hvt-yes, .hvt-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hvt-s2);
  min-height: 52px;
  padding: 0 var(--hvt-s6);
  border: 0;
  border-radius: var(--hvt-radius);
  background: var(--hvt-ink);
  color: var(--hvt-yellow);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 oklch(15% 0.005 265);
  transition: transform 120ms var(--hvt-ease), box-shadow 120ms var(--hvt-ease);
}
.hvt-yes::after { content: "→"; transition: transform 200ms var(--hvt-ease); }
@media (hover: hover) { .hvt-yes:hover::after { transform: translateX(4px); } }
.hvt-yes[aria-expanded="true"]::after { transform: rotate(90deg); }
@media (hover: hover) { .hvt-yes:hover, .hvt-go:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 6px 0 oklch(15% 0.005 265); } }
.hvt-yes:active, .hvt-go:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 0 0 oklch(15% 0.005 265); }
.hvt-no {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hvt-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
@media (hover: hover) { .hvt-no:hover { text-decoration-thickness: 3px; } }

/* ---- Cuống vé: dải ngày ------------------------------------------------- */
.hvt-stub {
  display: grid;
  grid-template-rows: 0fr;
  border-radius: 0 0 var(--hvt-radius) var(--hvt-radius);
  background: var(--hvt-paper);
  transition: grid-template-rows 420ms var(--hvt-ease);
}
.hvt.is-open .hvt-stub { grid-template-rows: 1fr; }
.hvt-stub-inner { min-height: 0; overflow: hidden; }
.hvt:not(.is-open) .hvt-stub-inner { visibility: hidden; }
.hvt.is-open .hvt-stub-inner { padding: var(--hvt-s6); }
.hvt-stub-title { margin: 0 0 var(--hvt-s4); font-size: 17px; font-weight: 800; }

.hvt-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 60px;
  gap: var(--hvt-s2);
  overflow-x: auto;
  padding: var(--hvt-s1) var(--hvt-s1) var(--hvt-s3);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.hvt-day {
  display: grid;
  justify-items: center;
  gap: 0;
  min-height: 80px;
  padding: var(--hvt-s2) 0;
  border: 2px solid oklch(29% 0.006 265 / 0.14);
  border-radius: var(--hvt-radius);
  background: oklch(99% 0.01 90);
  color: var(--hvt-ink-soft);
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  touch-action: manipulation;
  transition: transform 150ms var(--hvt-ease), border-color 200ms var(--hvt-ease), background-color 200ms var(--hvt-ease);
}
.hvt-dow { font-size: 12px; font-weight: 800; }
.hvt-dm { color: var(--hvt-ink); font-size: 26px; font-weight: 900; line-height: 1.1; }
.hvt-mo { font-size: 12px; font-weight: 700; }
.hvt-day.is-weekend .hvt-dow { color: var(--hvt-red); }
/* Ngày có combo: chấm vàng dưới số ngày. */
.hvt-day.is-open .hvt-mo::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: var(--hvt-s1) auto 0;
  border-radius: 50%;
  background: var(--hvt-yellow-deep);
}
.hvt-day:not(.is-open) { opacity: 0.72; }
@media (hover: hover) { .hvt-day:hover { transform: translateY(-2px); border-color: var(--hvt-ink-soft); } }
.hvt-day:active { transform: scale(0.96); }
.hvt-day[aria-checked="true"] {
  border-color: var(--hvt-ink);
  background: var(--hvt-ink);
  color: var(--hvt-yellow);
  opacity: 1;
}
.hvt-day[aria-checked="true"] .hvt-dm { color: var(--hvt-yellow); }
.hvt-day[aria-checked="true"] .hvt-mo::after { background: var(--hvt-yellow); }

.hvt-detail { min-height: 48px; margin: var(--hvt-s3) 0 var(--hvt-s4); font-size: 15px; line-height: 1.6; }
.hvt-detail strong { font-weight: 900; }
.hvt-detail.is-closed { color: var(--hvt-ink-soft); }
.hvt-go { width: 100%; background: var(--hvt-yellow); color: var(--hvt-ink); box-shadow: 0 4px 0 var(--hvt-yellow-deep); }
@media (hover: hover) { .hvt-go:hover:not([disabled]) { box-shadow: 0 6px 0 var(--hvt-yellow-deep); } }
.hvt-go[disabled] { background: oklch(90% 0.02 90); color: var(--hvt-ink-soft); box-shadow: none; cursor: not-allowed; }
.hvt-terms { margin: var(--hvt-s4) 0 0; color: var(--hvt-ink-soft); font-size: 13px; line-height: 1.5; }
.hvt-terms a { color: var(--hvt-ink); font-weight: 800; }

.hvt :focus-visible { outline: 3px solid var(--hvt-focus); outline-offset: 2px; }

/* Chuyến combo mà vé vừa đưa khách tới: một vòng sáng ngắn. */
.hvce-flash { animation: hvce-flash 1.1s var(--hvt-ease, ease-out) 2; }
@keyframes hvce-flash {
  from { box-shadow: 0 0 0 0 oklch(84.5% 0.17 86 / 0.9); }
  to { box-shadow: 0 0 0 12px oklch(84.5% 0.17 86 / 0); }
}

/* ---- Vị trí trong hero -------------------------------------------------- */
/* Điện thoại: tiêu đề → vé → phần giới thiệu. Khách thấy giá combo ngay màn đầu. */
@media (max-width: 899px) {
  .hvr-intro-grid.has-offer { row-gap: 0; }
  .hvr-intro-grid.has-offer .hvr-intro-copy { display: contents; }
  .hvr-intro-grid.has-offer .hvr-kicker { order: 1; margin: 0 0 var(--hvt-s2); }
  .hvr-intro-grid.has-offer h1 { order: 2; margin: 0; }
  .hvr-intro-grid.has-offer .hvt { order: 3; margin: var(--hvt-s8) 0 var(--hvt-s8); }
  .hvr-intro-grid.has-offer .hvr-intro-lead { order: 4; margin: 0; }
  .hvr-intro-grid.has-offer .hvr-intro-motto { order: 5; margin: var(--hvt-s3) 0 0; }
  .hvr-intro-grid.has-offer .hvr-intro-actions { order: 6; margin: var(--hvt-s6) 0 0; }
  .hvr-intro-grid.has-offer .hvr-intro-stats { order: 7; margin: var(--hvt-s6) 0 0; }
  .hvr-intro-grid.has-offer .hvr-intro-media { order: 8; margin: var(--hvt-s8) 0 0; }
  .hvt-main { padding: var(--hvt-s6) var(--hvt-s6) var(--hvt-s6); }
  .hvt.is-open .hvt-stub-inner { padding: var(--hvt-s6); }
  .hvt-yes { flex: 1 1 100%; }
  .hvt-no { margin: 0 auto; }
  .hvt-days { margin: 0 calc(-1 * var(--hvt-s6)); padding-inline: var(--hvt-s6); scroll-padding-inline: var(--hvt-s6); }
}
/* Bong bóng liên hệ tạm ẩn khi cuống vé đang mở trên màn hình. */
.hvr-bubbles.is-an-ve { opacity: 0; pointer-events: none; transform: translateX(12px); }
/* Máy tính: cột phải là ảnh đội xe thu thành dải thấp, vé đứng thẳng ngay dưới,
   cùng chiều rộng. Không đè, không nghiêng: giá là thứ duy nhất cần nổi bật. */
@media (min-width: 900px) {
  .hvr-intro-grid.has-offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; row-gap: 0; }
  .hvr-intro-grid.has-offer .hvr-intro-copy { grid-column: 1; grid-row: 1 / span 2; }
  .hvr-intro-grid.has-offer .hvr-intro-media { grid-column: 2; grid-row: 1; }
  .hvr-intro-grid.has-offer .hvr-intro-media img { aspect-ratio: 16 / 7; border-radius: var(--hvt-radius); }
  .hvr-intro-grid.has-offer .hvr-intro-media figcaption { display: none; }
  .hvr-intro-grid.has-offer .hvt { grid-column: 2; grid-row: 2; margin-top: var(--hvt-s4); }
  .hvr-intro-grid.has-offer .hvt-main { padding: var(--hvt-s6) var(--hvt-s8); }
  .hvr-intro-grid.has-offer .hvt-amount strong { font-size: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .hvt, .hvt-amount strong.is-changing { animation: none; }
  .hvt-stub, .hvt-seg button, .hvt-day, .hvt-yes, .hvt-go { transition: none; }
  .hvce-flash { animation: none; outline: 3px solid var(--hvt-yellow, #ffc20e); }
}

/* Trang đã có vé combo trong hero: bỏ khối combo cũ phía trên danh sách chuyến. */
html.has-hvt .hvc-banner { display: none; }

/* Đang chờ nhãn Combo sau khi bấm xem chuyến: làm mờ chuyến chưa có nhãn và báo
   đang tìm, để khách không đọc danh sách chưa đánh dấu như kết quả cuối. */
html.hvt-finding-on .hvr-trip-card:not(.is-combo),
html.hvt-finding-on .hvrt-trip:not(.is-combo) { opacity: 0.35; transition: opacity 200ms ease; }
.hvt-toast {
  position: fixed;
  top: 84px;
  left: 50%;
  /* Dưới đầu trang dính (60) và menu; không chặn chạm vào bộ lọc bên dưới. */
  z-index: 59;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border-radius: 12px;
  background: oklch(29% 0.006 265);
  color: oklch(84.5% 0.17 86);
  box-shadow: 0 8px 24px oklch(15% 0.01 265 / 0.35);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  transform: translateX(-50%);
}
.hvt-toast[hidden] { display: none; }
.hvt-toast.is-busy::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hvt-spin 800ms linear infinite;
}
@keyframes hvt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hvt-toast.is-busy::before { animation: none; border-right-color: currentColor; }
  html.hvt-finding-on .hvr-trip-card:not(.is-combo), html.hvt-finding-on .hvrt-trip:not(.is-combo) { transition: none; }
}

/* Đơn vị ngay cạnh giá lớn: "419k/2 vé", không để khách đọc thành giá mỗi người. */
.hvt-unit { margin-left: 4px; font-size: 20px; font-weight: 800; letter-spacing: 0; }
/* Nút chính trên, "Đi gấp?" dưới và căn trái: góc phải là chỗ bong bóng liên hệ.
   Chỉ vé Vũng Tàu ([data-hvce]); vé Điện Biên dùng chung lớp .hvt-* giữ bố cục riêng. */
.hvt[data-hvce] .hvt-actions { flex-direction: column; align-items: flex-start; }
.hvt[data-hvce] .hvt-yes { align-self: stretch; }
@media (min-width: 900px) { .hvt[data-hvce] .hvt-yes { align-self: flex-start; } }
.hvt[data-hvce] .hvt-no { margin: 0; }
/* Điều kiện combo mở ngay trong cuống vé. */
details.hvt-terms { margin: 16px 0 0; }
details.hvt-terms summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hvt-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
details.hvt-terms ul { margin: 4px 0 0; padding-left: 20px; color: var(--hvt-ink-soft); font-size: 14px; line-height: 1.55; }
details.hvt-terms li + li { margin-top: 6px; }

/* ---- Trang Vũng Tàu trên điện thoại: đặt vé thường đứng trước ----------- */
/* 27/09/2026: vé combo chiếm trọn màn đầu, đặt vé thường chỉ còn một dòng chữ
   nhỏ, khách quảng cáo không thấy đường đặt vé đi ngay. Thứ tự mới: tiêu đề →
   nút đặt vé → dải ưu đãi nhóm (bấm mới mở vé) → số liệu. Chỉ áp cho hero VT
   (.is-vt-offer); hero Điện Biên dùng chung .has-offer nên không đổi.
   Khoảng cách ghi bằng px: biến --hvt-s* chỉ có bên trong .hvt, dùng cho nút
   hay ô số liệu của hero thì rỗng và margin về 0 (chữ dính nhau). */
.hvt-strip { display: none; }
@media (max-width: 899px) {
  .hvr-intro-grid.has-offer.is-vt-offer .hvr-intro-actions { order: 3; margin: 24px 0 0; }
  .hvr-intro-grid.has-offer.is-vt-offer .hvr-intro-actions .hvr-button { flex: 1 1 0; justify-content: center; text-align: center; }
  .hvr-intro-grid.has-offer.is-vt-offer .hvt { order: 4; margin: 20px 0 0; }
  .hvr-intro-grid.has-offer.is-vt-offer .hvr-kicker { margin: 0 0 8px; }
  .hvr-intro-grid.has-offer.is-vt-offer .hvr-intro-stats { order: 5; margin: 20px 0 0; }
  /* Đoạn giới thiệu và ảnh đội xe đã có ở khối "Vì sao chọn Hải Vân" bên dưới. */
  .hvr-intro-grid.has-offer.is-vt-offer .hvr-intro-lead,
  .hvr-intro-grid.has-offer.is-vt-offer .hvr-intro-motto,
  .hvr-intro-grid.has-offer.is-vt-offer .hvr-intro-media { display: none; }

  .hvt[data-hvce]:not(.is-expanded) { filter: none; animation: none; }
  .hvt[data-hvce]:not(.is-expanded) > .hvt-main,
  .hvt[data-hvce]:not(.is-expanded) > .hvt-stub { display: none; }
  .hvt[data-hvce]:not(.is-expanded) > .hvt-strip {
    display: flex;
    align-items: center;
    gap: var(--hvt-s3);
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: var(--hvt-s3) var(--hvt-s4);
    color: #fff;
    text-align: left;
    font: inherit;
    background: oklch(84.5% 0.17 86 / 0.1);
    border: 1.5px solid var(--hvt-yellow);
    border-radius: var(--hvt-radius);
    cursor: pointer;
    touch-action: manipulation;
  }
  .hvt-strip-copy { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
  .hvt-strip-tag { color: var(--hvt-yellow); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .hvt-strip-price { font-size: 16px; font-weight: 600; line-height: 1.35; }
  .hvt-strip-price strong { color: var(--hvt-yellow); font-size: 20px; font-weight: 800; }
  .hvt-strip-price s { color: #b9babd; font-size: 14px; font-weight: 500; }
  .hvt-strip-when { color: #d7d8da; font-size: 13px; line-height: 1.4; }
  .hvt-strip-more {
    flex: none;
    padding: 8px 14px;
    color: var(--hvt-ink);
    font-size: 14px;
    font-weight: 700;
    background: var(--hvt-yellow);
    border-radius: 999px;
  }
  .hvt-strip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
}