/* ============================================================================
   Brand-first sections on the one-way route pages (inc/brand-sections.php):
   intro hero, "why Hải Vân", offices, reviews, repeat CTA, plus the small
   heading that now sits above the search form.

   Mobile-first. Reuses route-booking.css tokens; nothing here touches the
   search form, trip cards or seat map.
   ========================================================================== */

.hvr-bs-icon { display: block; }

/* Standalone template: the parent theme's utility class may not be loaded. */
.hvr-page .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 1. Intro hero (no form) ---------------------------------------------- */
.hvr-intro {
  position: relative;
  padding: 24px 0 40px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 20%, rgba(255, 194, 14, 0.2), transparent 26%),
    linear-gradient(135deg, #3a3b3d 0%, #26272a 74%);
}
.hvr-intro .hvr-kicker { color: var(--hvr-yellow); }
.hvr-intro .hvr-breadcrumb { margin-bottom: 20px; }

.hvr-intro-grid { display: grid; gap: 28px; }

.hvr-intro h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.08;
}
.hvr-intro h1 em { color: var(--hvr-yellow); font-style: normal; }

.hvr-intro-lead {
  margin: 16px 0 0;
  max-width: 60ch;
  color: #d7d8da;
  font-size: 16px;
  line-height: 1.6;
}

.hvr-intro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hvr-intro-actions .hvr-button,
.hvr-cta-actions .hvr-button { min-height: 48px; padding: 12px 24px; font-size: 15px; }

.hvr-page .hvr-button-ghost {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.hvr-page .hvr-button-ghost:hover,
.hvr-page .hvr-button-ghost:focus-visible { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.hvr-intro .hvr-button:focus-visible,
.hvr-cta .hvr-button:focus-visible,
.hvr-rating-card .hvr-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hvr-intro-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.hvr-intro-stats li {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.hvr-intro-stats strong {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--hvr-yellow);
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.hvr-intro-stats span { display: block; margin-top: 2px; color: #d7d8da; font-size: 13px; line-height: 1.4; }
.hvr-bs-star { display: inline-flex; }
.hvr-bs-star svg { width: 20px; height: 20px; }

.hvr-intro-media { margin: 0; }
.hvr-intro-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--hvr-shadow);
}
.hvr-intro-media figcaption { margin-top: 8px; color: #c7c8ca; font-size: 12px; }

/* --- 3. Heading above the search form (inside .hvr-hero#tim-ve) ----------- */
.hvr-form-head { margin-bottom: 20px; }
.hvr-form-head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.hvr-form-head p { margin: 8px 0 0; max-width: 60ch; color: #d7d8da; font-size: 15px; }

.hvr-search-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  color: #d7d8da;
  font-size: 13px;
}
.hvr-search-steps li { counter-increment: step; display: inline-flex; align-items: center; gap: 8px; }
.hvr-search-steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hvr-yellow);
  color: var(--hvr-ink);
  font-size: 11px;
  font-weight: 800;
}

/* --- 2. Why Hải Vân -------------------------------------------------------- */
.hvr-why { padding: 56px 0 64px; background: var(--hvr-soft); }
.hvr-why-layout { display: grid; gap: 24px; }
.hvr-why-media { margin: 0; }
.hvr-why-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.hvr-why-media figcaption { margin-top: 8px; color: var(--hvr-gray); font-size: 13px; }

.hvr-why-grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hvr-why-card { padding: 20px; border: 1px solid var(--hvr-line); border-radius: 14px; background: #fff; }
.hvr-why-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--hvr-cream);
  color: #8a6800;
}
.hvr-why-card h3 { margin: 14px 0 6px; color: var(--hvr-ink); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.hvr-why-card p { margin: 0; color: #3f4144; font-size: 14px; line-height: 1.6; }

/* --- 5. Offices & lounge --------------------------------------------------- */
.hvr-offices { padding: 56px 0 64px; }
.hvr-offices-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
/* Ảnh nguồn có cả ngang lẫn dọc; cắt cùng một tỉ lệ để dải ảnh không so le. */
.hvr-offices-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }

.hvr-offices-grid { display: grid; gap: 16px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.hvr-office-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--hvr-line); border-radius: 16px; background: #fff; }
.hvr-office-card .hvr-kicker { margin-bottom: 6px; }
.hvr-office-card h3 { margin: 0; color: var(--hvr-ink); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.hvr-office-card address { margin: 4px 0 0; color: var(--hvr-gray); font-size: 15px; font-style: normal; }

.hvr-office-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.hvr-office-hours div { padding: 10px 12px; border-radius: 10px; background: var(--hvr-soft); }
.hvr-office-hours dt { color: var(--hvr-gray); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hvr-office-hours dd { margin: 2px 0 0; color: var(--hvr-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hvr-office-extra { margin: 14px 0 0; color: #3f4144; font-size: 14px; line-height: 1.6; }

.hvr-office-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: auto;
  padding-top: 14px;
  color: var(--hvr-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hvr-office-map svg { width: 18px; height: 18px; }
.hvr-office-map:hover,
.hvr-office-map:focus-visible { color: #8a6800; }

/* --- 7. Reviews ------------------------------------------------------------ */
.hvr-reviews { padding: 56px 0 64px; background: var(--hvr-soft); }
.hvr-reviews-layout { display: grid; gap: 20px; }
.hvr-rating-card { padding: 24px; border-radius: 16px; background: var(--hvr-ink); color: #fff; }
.hvr-rating-score { display: flex; align-items: center; gap: 12px; margin: 0; }
.hvr-rating-score strong { color: var(--hvr-yellow); font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.hvr-rating-stars { display: inline-flex; gap: 2px; color: var(--hvr-yellow); }
.hvr-rating-stars svg { width: 22px; height: 22px; }
.hvr-rating-label { margin: 12px 0 0; font-size: 16px; font-weight: 700; }
.hvr-rating-sub { margin: 6px 0 0; color: #d7d8da; font-size: 14px; line-height: 1.55; }
.hvr-page .hvr-rating-card .hvr-button { margin-top: 20px; min-height: 48px; border-color: #fff; background: transparent; color: #fff !important; }
.hvr-page .hvr-rating-card .hvr-button:hover,
.hvr-page .hvr-rating-card .hvr-button:focus-visible { background: #fff; color: var(--hvr-ink) !important; }
.hvr-reviews-media { margin: 0; }
.hvr-reviews-media img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }

.hvr-quote-grid { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.hvr-quote a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--hvr-line);
  border-radius: 14px;
  background: #fff;
  color: var(--hvr-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.hvr-quote a:hover,
.hvr-quote a:focus-visible { border-color: var(--hvr-yellow); box-shadow: 0 8px 24px rgba(30, 31, 34, 0.08); }
.hvr-quote a:focus-visible { outline: 2px solid var(--hvr-ink); outline-offset: 2px; }
.hvr-quote blockquote { margin: 0; color: #3f4144; font-size: 15px; line-height: 1.6; }
.hvr-quote cite { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--hvr-gray); font-size: 13px; font-style: normal; font-weight: 700; }
.hvr-quote cite svg { width: 16px; height: 16px; }
/* Three quotes on phones and tablets; the remaining two appear on desktop. */
.hvr-quote:nth-child(n + 4) { display: none; }

/* --- 8. Repeat CTA band ---------------------------------------------------- */
.hvr-cta { padding: 56px 0 0; }
.hvr-cta-band {
  display: grid;
  gap: 20px;
  padding: 28px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #3a3b3d 0%, #26272a 100%);
  color: #fff;
}
.hvr-cta-band h2 { margin: 0; color: #fff; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; }
.hvr-cta-band p { margin: 8px 0 0; color: #d7d8da; font-size: 15px; }
.hvr-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hvr-cta-actions small { flex-basis: 100%; color: #c7c8ca; font-size: 13px; }
.hvr-cta-actions small a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* --- Breakpoints ----------------------------------------------------------- */
@media (min-width: 768px) {
  .hvr-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .hvr-offices-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .hvr-offices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  /* Văn phòng chính Vũng Tàu trải hết hàng. */
  .hvr-office-card--rong { grid-column: 1 / -1; }
  .hvr-reviews-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .hvr-quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 900px) {
  .hvr-intro { padding: 32px 0 56px; }
  .hvr-intro-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 44px; align-items: center; }
  .hvr-intro-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .hvr-cta-band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 40px 44px; }
  .hvr-cta-actions { justify-content: flex-end; }
  .hvr-cta-actions small { text-align: right; }
}

@media (min-width: 1024px) {
  .hvr-why-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
  .hvr-why-media { position: sticky; top: 120px; }
}

@media (min-width: 1200px) {
  .hvr-quote-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hvr-quote blockquote { font-size: 14px; }
  .hvr-quote:nth-child(n + 4) { display: block; }
}

/* Ảnh riêng của từng phòng chờ, cắt ngang cho đều thẻ; ảnh dọc lấy phần giữa-trên. */

/* Khẩu hiệu thương hiệu ngay dưới đoạn giới thiệu */
.hvr-intro-motto { margin: 12px 0 0; color: var(--hvr-yellow, #ffc20e); font-size: 17px; font-weight: 800; font-style: italic; letter-spacing: -0.01em; }

/* Khối gửi hàng và đồng hành cộng đồng dùng lại lưới của "vì sao chọn";
   dải liên hệ nằm trong khối nên cần khoảng cách trên. */
.hvr-shipping .hvr-why-grid,
.hvr-community .hvr-why-grid {
  margin-top: 22px;
}

.hvr-shipping-cta {
  margin-top: 26px;
}

.hvr-community .hvr-why-card .hvr-office-map {
  margin-top: 12px;
}

/* Dải ba ảnh (phòng chờ tuyến Bắc, gửi hàng): một ảnh lớn bên trái, hai ảnh nhỏ
   xếp dọc bên phải, lấp kín khung — lưới 4 cột mặc định để trống một ô. */
.hvr-offices-photos--bo-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hvr-offices-photos--bo-ba img { aspect-ratio: 4 / 3; }
.hvr-offices-photos--bo-ba img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

@media (min-width: 720px) {
  .hvr-offices-photos--bo-ba {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 16 / 8;
    gap: 12px;
  }
  .hvr-offices-photos--bo-ba img { height: 100%; aspect-ratio: auto; }
  .hvr-offices-photos--bo-ba img:first-child { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
}

/* Ảnh ấn phẩm có chữ: hiện trọn khung, cắt kiểu "cover" là mất chữ và số tổng đài. */
.hvr-offices-photos .hvr-photo-nguyen-khung { object-fit: contain; background: #fff; }

/* Thẻ chương trình cộng đồng: ảnh trải hết bề ngang thẻ. Ảnh là ấn phẩm có chữ
   nên để cao tự do thay vì cắt theo tỉ lệ; ba ảnh nguồn xấp xỉ cùng khổ ngang.
   Selector phải cụ thể hơn quy tắc ảnh chung của thẻ, nếu không ảnh giữ nguyên
   chiều cao gốc và thẻ cao vọt lên gần 1000px. */
.hvr-community .hvr-why-card.hvr-community-card { padding-top: 0; overflow: hidden; }
.hvr-community .hvr-why-card img.hvr-community-photo {
  display: block;
  width: calc(100% + 2px);
  height: auto;
  margin: -1px -1px 16px;
  border-radius: 14px 14px 0 0;
}

/* Ba chương trình cộng đồng: lưới chung là 2 cột nên thẻ thứ ba nằm lẻ một mình.
   Từ 1024px trở lên cho đủ ba cột; hẹp hơn thì một cột cho dễ đọc. */
@media (min-width: 1024px) {
  .hvr-community .hvr-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Lưới hai cột gặp số thẻ lẻ thì thẻ cuối trơ nửa hàng, cạnh một khoảng trống
   bằng cả một thẻ. Cho thẻ cuối trải hết hàng, đúng cách các lưới xe đang làm. */
@media (min-width: 720px) {
  .hvr-offices-grid > .hvr-office-card:last-child:nth-child(odd),
  .hvr-why-grid > .hvr-why-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  /* Khối cộng đồng đã có ba cột riêng, không cần kéo dài thẻ cuối. */
  .hvr-community .hvr-why-grid > .hvr-why-card:last-child:nth-child(odd) { grid-column: auto; }
}