/* Suối Mơ Ba Vì - compact homepage banner (2026-10-28)
   Original 575px desktop Hero -> 384px (approximately 1/3 less).
   Scope to the homepage to keep subpage headers/admin untouched.
   The banner grows if CMS content needs more space. */
.hero,
.hero .hero-inner {
  min-height: 440px;
}
.hero .hero-content {
  padding: 16px 0 72px;
}
.hero .hero-kicker {
  font-size: 11px;
  letter-spacing: .15em;
}
.hero h1,
.hero h1.hero-title-two-lines {
  font-size: clamp(28px, 3.55vw, 51px);
  line-height: 1.12;
  letter-spacing: -.045em;
  margin: 12px 0 10px;
}
.hero .hero-content p {
  max-width: 540px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 0;
}
.hero .hero-actions {
  margin-top: 14px;
  gap: 10px;
}
.hero .hero-actions .btn {
  padding: 12px 18px;
  font-size: 12px;
}
.hero .hero-bottom-note {
  margin-top: 16px;
  font-size: 11px;
}
.hero .hero-stamp {
  top: 35px;
  font-size: 22px;
}
.hero .hero-stamp i { font-size: 18px; }
/* Keep the booking panel floating on the edge without covering the note. */
@media (max-width: 980px) {
  .hero,
  .hero .hero-inner { min-height: 360px; }
  .hero .hero-content { padding: 19px 0 70px; }
  .hero h1,
  .hero h1.hero-title-two-lines { font-size: clamp(27px, 4.2vw, 41px); }
}
@media (max-width: 640px) {
  /* The single-column buttons need room on narrow displays.
     Allow natural expansion to avoid cropping content or overlap. */
  .hero,
  .hero .hero-inner { min-height: 410px; }
  .hero .hero-content { padding: 25px 0 76px; }
  .hero h1,
  .hero h1.hero-title-two-lines {
    font-size: clamp(19px, 6.2vw, 34px);
    line-height: 1.17;
    margin: 13px 0 12px;
  }
  .hero .hero-content p { font-size: 12px; line-height: 1.6; }
  .hero .hero-actions { margin-top: 15px; gap: 8px; }
  .hero .hero-actions .btn { padding: 11px 15px; font-size: 11px; }
  .hero .hero-bottom-note { margin-top: 14px; }
}
/* ===== HERO POSITION ADJUSTMENTS ===== */
/* Chỉ áp dụng trên desktop */
@media (min-width: 981px) {

    /* 1. Dòng ĐIỂM HẸN - nâng lên 15px */
    .hero .hero-kicker {
        position: relative;
        top: -15px;
    }

    /* 2. Hai nút bấm - hạ xuống 12px */
    .hero .hero-actions {
        margin-top: 36px;
    }

    /* 3. Dòng MỘT CHUYẾN ĐI - tăng khoảng cách 12px */
    .hero .hero-bottom-note {
        margin-top: 0px;
    }

}