/* ============================================================
   StayGo Design System — Inspired by Van Phat Riverside
   Font: Inter (body + headings)
   Brand color: #004391 (navy) + #001f43 (dark navy)
   Surface: #f1f6fa
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* ---- Design Tokens ---- */
:root {
  --sg-navy:        #004391;
  --sg-navy-deep:   #001f43;
  --sg-navy-dark:   #001020;
  --sg-navy-pale:   #f1f6fa;
  --sg-navy-light:  rgba(0, 67, 145, 0.08);
  --sg-navy-border: rgba(0, 67, 145, 0.25);

  --sg-white:       #ffffff;
  --sg-surface:     #f1f6fa;
  --sg-border:      rgba(0, 67, 145, 0.2);
  --sg-border-sub:  rgba(0, 67, 145, 0.15);

  --sg-text:        #001f43;
  --sg-text-2:      #004391;
  --sg-text-muted:  #6b8db5;

  --sg-font-body:    'Playfair Display', serif;
  --sg-font-heading: 'Playfair Display', serif;

  --sg-edge: 8px;

  /* Gradient nút chính */
  --sg-btn-gradient:       linear-gradient(135deg, #fff7ad, #ffa9f9);
  --sg-btn-gradient-hover: linear-gradient(135deg, #ffe44a, #ff6df6);
  --sg-btn-text:           #4a0d6b;
}

/* ============================================================
   GLOBAL
   ============================================================ */

body {
  font-family: var(--sg-font-heading) !important;
  color: var(--sg-text) !important;
  background: var(--sg-white) !important;
}

/* ============================================================
   1. HEADER
   ============================================================ */
.header {
  background: var(--sg-white) !important;
  border-bottom: 1px solid var(--sg-border-sub) !important;
  box-shadow: none !important;
  height: 72px !important;
  padding: 0 !important;
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
.header .container,
.header-inner,
.header-flex {
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative !important;
}

/* Logo nằm bên trái, trước nav */
.logo-left {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  margin-right: 24px !important;
}
.logo-img {
  height: 46px !important;
  width: auto !important;
  object-fit: contain !important;
  transition: filter 0.3s ease, opacity 0.3s ease !important;
}
/* Header trong suốt (over dark hero) → logo trắng */
.header-transparent .logo-link .logo-img {
  filter: brightness(0) invert(1) !important;
}
/* Header đã scroll (nền trắng) → logo màu gốc */
.header-transparent.scrolled .logo-link .logo-img,
.header:not(.header-transparent) .logo-link .logo-img {
  filter: none !important;
}

/* Footer logo — footer bg is light (#f8f9fa), show original colors */
.footer-logo-img {
  height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}
.footer-logo-img:hover { opacity: 1 !important; }

/* Mobile drawer logo */
.mobile-drawer-logo-link { display: flex; align-items: center; text-decoration: none; }
.mobile-drawer-logo-img {
  height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

/* Nav trái — flex:1 để chiếm giữa, justify-content:center để căn giữa links */
.nav-left {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  flex: 1 !important;
}

/* Header right — đẩy sang phải bằng margin-left: auto */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
}

/* Nav phải (Tiện ích · Tin tức · Điểm đến) */
.nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-shrink: 0 !important;
  margin-right: 14px !important;
}
.nav-right a {
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--sg-text) !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.2s ease !important;
}
.nav-right a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1.5px !important;
  background: #e91e8c !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.nav-right a:hover::after,
.nav-right a.active::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}
.nav-right a:hover,
.nav-right a.active {
  color: #e91e8c !important;
}
/* Transparent header: nav-right links màu trắng */
.header-transparent .nav-right a {
  color: rgba(255,255,255,0.90) !important;
}
.header-transparent .nav-right a::after {
  background: #fff !important;
}
.header-transparent .nav-right a:hover,
.header-transparent .nav-right a.active {
  color: #fff !important;
}
.header-transparent.scrolled .nav-right a {
  color: var(--sg-text) !important;
}
.header-transparent.scrolled .nav-right a::after {
  background: #e91e8c !important;
}
.header-transparent.scrolled .nav-right a:hover,
.header-transparent.scrolled .nav-right a.active {
  color: #e91e8c !important;
}

/* Header transparent — chỉ trang chủ, overlay trên hero */
.header-transparent {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,0.15) !important;
  box-shadow: none !important;
  z-index: 100 !important;
}
.header-transparent #mainNav a {
  color: rgba(255,255,255,0.90) !important;
}
.header-transparent #mainNav a::after {
  background: #fff !important;
}
.header-transparent #mainNav a:hover,
.header-transparent #mainNav a.active {
  color: #fff !important;
}
.header-transparent .btn-login-nav {
  background: var(--sg-btn-gradient) !important;
  color: var(--sg-btn-text) !important;
}
.header-transparent .btn-login-nav:hover {
  background: var(--sg-btn-gradient-hover) !important;
  color: var(--sg-btn-text) !important;
}
.header-transparent .nav-contact-btn {
  background: rgba(255,255,255,0.15) !important;
}
.header-transparent .nav-contact-btn:hover {
  background: rgba(255,255,255,0.25) !important;
}
/* Khi scroll xuống header transparent chuyển trắng */
.header-transparent.scrolled {
  background: var(--sg-white) !important;
  border-bottom-color: var(--sg-border-sub) !important;
  box-shadow: 0 2px 16px rgba(0,31,67,0.08) !important;
}
.header-transparent.scrolled #mainNav a {
  color: var(--sg-text) !important;
}
.header-transparent.scrolled #mainNav a::after {
  background: #e91e8c !important;
}
.header-transparent.scrolled #mainNav a:hover,
.header-transparent.scrolled #mainNav a.active {
  color: #e91e8c !important;
}
.header-transparent.scrolled .btn-login-nav {
  background: var(--sg-btn-gradient) !important;
  color: var(--sg-btn-text) !important;
}
.header-transparent.scrolled .btn-login-nav:hover {
  background: var(--sg-btn-gradient-hover) !important;
  color: var(--sg-btn-text) !important;
}
.header-transparent.scrolled .nav-contact-btn {
  background: var(--sg-btn-gradient) !important;
  color: var(--sg-btn-text) !important;
}

/* Nav links (normal pages) */
#mainNav a {
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--sg-text) !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.2s ease !important;
}
#mainNav a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1.5px !important;
  background: #e91e8c !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#mainNav a:hover::after,
#mainNav a.active::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}
#mainNav a:hover,
#mainNav a.active {
  color: #e91e8c !important;
}

/* Login button — cùng style với Liên hệ */
.btn-login-nav {
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  padding: 8px 20px !important;
  border: none !important;
  color: var(--sg-btn-text) !important;
  background: var(--sg-btn-gradient) !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  clip-path: polygon(
    5px 0%, calc(100% - 5px) 0%,
    100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%,
    0% calc(100% - 5px), 0% 5px
  ) !important;
}
.btn-login-nav:hover {
  background: var(--sg-btn-gradient-hover) !important;
  color: var(--sg-btn-text) !important;
}

/* ============================================================
   2. HERO — Fullscreen như Empyrean
   ============================================================ */
.hero-search-section {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 600px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--sg-navy-deep) !important;
}

/* Overlay gradient trên slideshow */
.hero-search-section::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(0,10,30,0.55) 0%, rgba(0,20,50,0.72) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Slideshow */
.hero-slides {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}
.hero-slide {
  position: absolute !important;
  inset: 0 !important;
}
.hero-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  /* Không dùng opacity !important ở đây — animation sẽ tự điều khiển opacity */
  animation: heroFade 4s linear infinite both;
  animation-delay: var(--delay, 0s);
}

@keyframes heroFade {
  0%   { opacity: 0; transform: scale(1);    }
  8%   { opacity: 1; }
  42%  { opacity: 1; transform: scale(1.04); }
  50%  { opacity: 0; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1);    }
}

/* Nội dung giữa hero */
.hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 24px !important;
  z-index: 2 !important;
  position: relative !important;
}
.hero-search-title {
  font-family: var(--sg-font-body) !important;
  font-size: 54px !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  text-transform: none !important;
}
.hero-search-sub {
  font-family: var(--sg-font-body) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.78) !important;
  text-align: center !important;
  margin-bottom: 32px !important;
  letter-spacing: 0.3px !important;
}

/* Tab buttons */
.hsb-tabs-wrap {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}
.hsb-tab-btn {
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px) !important;
  padding: 7px 16px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  clip-path: polygon(
    5px 0%, calc(100% - 5px) 0%,
    100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%,
    0% calc(100% - 5px), 0% 5px
  ) !important;
}
.hsb-tab-btn.active,
.hsb-tab-btn:hover {
  background: rgba(255,255,255,0.95) !important;
  color: var(--sg-navy) !important;
  border-color: transparent !important;
}

/* Booking bar — nổi lên trên đáy hero */
.hero-booking-bar {
  position: absolute !important;
  bottom: 40px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 24px !important;
}

/* Filter row thứ 2 dưới search bar — chỉ trang khách sạn */
.hsb-filter-row {
  width: 100% !important;
  max-width: 1100px !important;
  background: rgba(255,255,255,0.97) !important;
  border: 1px solid rgba(0,67,145,0.12) !important;
  border-top: 1.5px solid #f0f4f8 !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.22) !important;
  border-radius: 0 0 20px 20px !important;
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
}
/* Khi có 2 filter row liên tiếp — row đầu bỏ bo góc dưới, không đổ bóng */
.hsb-filter-row + .hsb-filter-row {
  border-top: none !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.22) !important;
}
.hsb-filter-row:has(+ .hsb-filter-row) {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: none !important;
}
.hsb-fr-group {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 0 !important;
}
.hsb-fr-label {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #a0aec0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}
.hsb-fr-label svg { stroke: #a0aec0 !important; }
.hsb-fr-chips {
  display: flex !important;
  gap: 5px !important;
}
.hsb-fr-chip {
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 11px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  color: #4a5568 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
  background: #fff !important;
}
.hsb-fr-chip:hover { border-color: #e91e8c !important; color: #e91e8c !important; }
.hsb-fr-chip.active { background: #e91e8c !important; color: #fff !important; border-color: #e91e8c !important; }
.hsb-fr-sep {
  width: 1px !important;
  height: 22px !important;
  background: #e2e8f0 !important;
  margin: 0 14px !important;
  flex-shrink: 0 !important;
}
.hsb-fr-select {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #4a5568 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 4px 26px 4px 11px !important;
  background: #fff !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23718096' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  cursor: pointer !important;
  outline: none !important;
}
.hsb-fr-select:focus { border-color: #e91e8c !important; }
.hsb-fr-clear {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
  font-size: 12px !important;
  color: #e91e8c !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.hsb-fr-clear:hover { text-decoration: underline !important; }

/* Search box */
.hero-search-box {
  background: rgba(255,255,255,0.97) !important;
  border: 1px solid rgba(0,67,145,0.12) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.22) !important;
  border-radius: 20px !important;
  padding: 10px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 1100px !important;
  position: relative !important;
}
/* Khi có filter row bên dưới — bỏ bo góc dưới */
.hero-search-box.has-filter-row {
  border-radius: 20px 20px 0 0 !important;
  border-bottom-color: transparent !important;
}
.hsb-field {
  background: #f4f7fb !important;
  border: 1.5px solid #c8d5e8 !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
  flex: 1 !important;
  position: relative !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
}
.hsb-field:hover {
  border-color: #b0c0d8 !important;
  background: #eef2f8 !important;
}
.hsb-field:focus-within {
  border-color: #e91e8c !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(233,30,140,0.1) !important;
}
.hsb-label, .hsb-input {
  position: relative !important;
  z-index: 1 !important;
}
.hsb-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #718096 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.hsb-field input,
.hsb-input {
  font-family: var(--sg-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--sg-text) !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  -webkit-background-clip: unset !important;
  padding: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
input[type="date"].hsb-input {
  color-scheme: light !important;
}
input[type="date"].hsb-input::-webkit-calendar-picker-indicator {
  opacity: 0.5 !important;
  cursor: pointer !important;
  background: transparent !important;
  /* Trên mobile: mở rộng vùng tap cho calendar icon */
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hsb-input::placeholder {
  color: #a0aec0 !important;
  font-weight: 300 !important;
}
.hsb-btn {
  background: var(--sg-btn-gradient) !important;
  color: var(--sg-btn-text) !important;
  border: none !important;
  border-radius: 14px !important;
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 18px 32px !important;
  transition: opacity 0.2s, transform 0.15s !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(255,170,249,0.4) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.hsb-btn:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  background: var(--sg-btn-gradient-hover) !important;
  color: var(--sg-btn-text) !important;
}

/* ---- Guests & Children Popup ---- */
.hsb-guests-display {
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.hsb-guests-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 300px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  z-index: 9999;
  overflow: hidden;
}
.hsb-gp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2196f3;
  color: #fff;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 16px;
}
.hsb-gp-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.hsb-gp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
}
.hsb-gp-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hsb-gp-label {
  font-size: 15px;
  font-weight: 600;
  color: #1a202c;
}
.hsb-gp-sub {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}
.hsb-gp-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 0 18px;
}
.hsb-gp-stepper {
  display: flex;
  align-items: center;
  gap: 0;
}
.hsb-gp-stepper button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #2196f3;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}
.hsb-gp-stepper button:hover { background: #e0f2fe; }
.hsb-gp-stepper span {
  min-width: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #1a202c;
}
.hsb-gp-done {
  display: block;
  width: calc(100% - 36px);
  margin: 12px 18px 16px;
  padding: 14px;
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.hsb-gp-done:hover { background: #ea6c0a; }

/* ---- Mobile touch: eliminate 300ms tap delay on ALL interactive elements ---- */
button,
a,
input,
select,
textarea,
label,
[role="button"],
[onclick],
/* Search bar */
.hsb-btn,
.hsb-tab-btn,
.hsb-fr-chip,
.hsb-fr-select,
.hsb-gp-stepper button,
.hsb-gp-done,
.hsb-gp-close,
.hsb-guests-display,
.hsb-dropdown,
.hsb-loc-item,
.hsb-loc-nearby,
/* Hotel card */
.hotel-card-link,
.hotel-card-actions,
.hca-detail,
.hca-book,
.hc-fav-btn,
/* Hotel detail */
.hd-nav-tab,
.hd-nav-book,
.hd-thumb,
.hd-lb-tn,
.hd-lb-close,
.hd-lb-prev,
.hd-lb-next,
.hd-btn-reserve,
.hd-btn-soldout,
/* Deals */
.deals-ftab,
.deals-code-copy,
.deals-hotel-card,
/* Auth */
.auth-btn,
.auth-social-btn,
/* User profile / bookings */
.up-btn,
.up-btn-sm,
.up-btn-primary,
.up-btn-blue,
.up-btn-red,
.up-btn-outline,
.up-btn-green,
/* Support */
.st-submit-btn,
/* Payment */
.pmt-copy-btn,
.pmt-confirm-btn,
/* Booking */
.bk-pm-option,
/* Chatbot */
.chatbot-toggle-btn,
.chatbot-close-btn,
.chatbot-send-btn,
.chatbot-quick-btn,
.qrp-close,
.qrp-toggle-btn,
.qrp-btn-link,
/* Nav / layout */
.mobile-menu-btn,
.user-trigger,
.dropdown-item,
.nav-contact-btn,
.ncd-item,
.mobile-drawer-overlay,
.mobile-drawer-nav a,
.mobile-drawer-footer a,
.notif-read-all,
.btn-login-nav,
/* Misc interactive */
.loc-arrow,
.sg-testi-arrow,
.sg-svc-tab,
.sg-showcase-btn,
.home-blog-btn,
.deals-card-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Minimum 44×44 tap targets for small buttons */
.up-btn-sm {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hc-fav-btn {
  min-width: 40px !important;
  min-height: 40px !important;
}
.notif-read-all {
  min-height: 36px !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
}
/* cursor: pointer on custom clickable divs */
.user-trigger,
.hsb-guests-display,
.deals-code-copy,
.hd-thumb,
.hd-lb-tn {
  cursor: pointer;
}

/* ---- Guests popup on mobile: compact card, no overlay ---- */
@media (max-width: 600px) {
  .hsb-guests-popup {
    position: fixed !important;
    top: auto !important;
    bottom: 16px !important;
    left: 12px !important;
    right: 12px !important;
    min-width: unset !important;
    width: auto !important;
    border-radius: 16px !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.16) !important;
  }
  .hsb-gp-stepper button {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  .hsb-gp-row {
    padding: 12px 16px !important;
  }
  .hsb-gp-header {
    padding: 12px 16px !important;
    font-size: 15px !important;
  }
  .hsb-gp-done {
    margin: 8px 16px 12px !important;
    padding: 12px !important;
    width: calc(100% - 32px) !important;
  }
}

/* Location dropdown — mở xuống dưới */
.hsb-dropdown {
  display: none;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: -1px !important;
  right: -1px !important;
  background: #fff !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 40px rgba(0,31,67,0.18) !important;
  z-index: 9999 !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}
.hsb-dropdown-title {
  padding: 10px 16px 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--sg-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}
.hsb-loc-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: background 0.15s !important;
}
.hsb-loc-item:hover {
  background: var(--sg-navy-pale) !important;
}
.hsb-loc-icon {
  width: 32px !important;
  height: 32px !important;
  background: var(--sg-navy-pale) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.hsb-loc-name {
  font-weight: 500 !important;
  color: var(--sg-text) !important;
  font-size: 14px !important;
}
.hsb-loc-count {
  font-size: 12px !important;
  color: var(--sg-text-muted) !important;
  margin-top: 2px !important;
}
.hsb-loc-rating {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #d97706 !important;
  background: #fef3c7 !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
}
.hsb-loc-nearby {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  border-radius: 10px 10px 0 0 !important;
}
.hsb-loc-nearby:hover { background: #fdf2f8 !important; }
.hsb-loc-nearby.is-unavailable { opacity: 0.6; cursor: default !important; }
.hsb-loc-nearby.is-unavailable:hover { background: transparent !important; }
.hsb-loc-nearby-icon {
  width: 32px !important;
  height: 32px !important;
  background: #fce7f3 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.hsb-dropdown-divider {
  height: 1px !important;
  background: #f1f5f9 !important;
  margin: 0 12px !important;
}
.hsb-dropdown {
  max-height: 340px !important;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   3. TRUST STRIP
   ============================================================ */
.sg-trust-strip {
  background: var(--sg-white) !important;
  border-top: 1px solid var(--sg-border) !important;
  border-bottom: 1px solid var(--sg-border) !important;
  padding: 28px 0 !important;
}
.sg-trust-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.sg-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.sg-trust-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  background: var(--sg-navy-pale) !important;
  flex-shrink: 0 !important;
  clip-path: polygon(
    8px 0%, calc(100% - 8px) 0%,
    100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%,
    0% calc(100% - 8px), 0% 8px
  ) !important;
}
.sg-trust-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sg-text) !important;
  letter-spacing: 0.2px !important;
}
.sg-trust-sub {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--sg-text-muted) !important;
  margin-top: 2px !important;
}

/* ============================================================
   4. HOME SECTIONS
   ============================================================ */
.home-section {
  padding: 80px 0 !important;
}
.home-section-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 48px !important;
  gap: 16px !important;
}
.home-section-head--center {
  justify-content: center !important;
  text-align: center !important;
}
.home-section-title {
  font-family: var(--sg-font-body) !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  line-height: 1.25 !important;
  color: var(--sg-text) !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 8px !important;
}
.home-section-sub {
  font-family: var(--sg-font-body) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--sg-text-2) !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

/* ============================================================
   5. BUTTONS — Clip-path bát giác (VPR style)
   ============================================================ */
.home-see-all,
.btn-book,
.fh-book-btn,
.hd-btn-reserve,
.dcv2-btn,
.btn-deal,
.btn-primary,
.btn-navy {
  --edge: 8px;
  background: var(--sg-btn-gradient) !important;
  color: var(--sg-btn-text) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  isolation: isolate !important;
  transition: all 0.3s ease !important;
  clip-path: polygon(
    var(--edge) 0%,
    calc(100% - var(--edge)) 0%,
    100% var(--edge),
    100% calc(100% - var(--edge)),
    calc(100% - var(--edge)) 100%,
    var(--edge) 100%,
    0% calc(100% - var(--edge)),
    0% var(--edge)
  ) !important;
  text-decoration: none !important;
}
.home-see-all:hover,
.btn-book:hover,
.fh-book-btn:hover,
.hd-btn-reserve:hover,
.dcv2-btn:hover,
.btn-deal:hover,
.btn-primary:hover,
.btn-navy:hover {
  background: var(--sg-btn-gradient-hover) !important;
  color: var(--sg-btn-text) !important;
}

/* Outline button */
.btn-outline,
.btn-secondary {
  --edge: 8px;
  background: transparent !important;
  color: var(--sg-navy) !important;
  border: 1px solid var(--sg-navy-border) !important;
  border-radius: 0 !important;
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 11px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  clip-path: polygon(
    var(--edge) 0%,
    calc(100% - var(--edge)) 0%,
    100% var(--edge),
    100% calc(100% - var(--edge)),
    calc(100% - var(--edge)) 100%,
    var(--edge) 100%,
    0% calc(100% - var(--edge)),
    0% var(--edge)
  ) !important;
  text-decoration: none !important;
}
.btn-outline:hover,
.btn-secondary:hover {
  background: var(--sg-navy) !important;
  color: #fff !important;
  border-color: var(--sg-navy) !important;
}

/* ============================================================
   6. CARDS
   ============================================================ */
.hotel-card,
.fhr-card,
.home-blog-card,
.deal-card {
  background: var(--sg-white) !important;
  border: 1px solid rgba(0,31,67,0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 16px rgba(0,31,67,0.06) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  overflow: hidden !important;
}
.hotel-card:hover,
.fhr-card:hover,
.home-blog-card:hover,
.deal-card:hover {
  box-shadow: 0 16px 48px rgba(0,31,67,0.13) !important;
  transform: translateY(-6px) !important;
}
.hotel-card h3,
.hotel-card .hotel-name,
.fhr-name {
  font-family: var(--sg-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--sg-text) !important;
}
.fhr-loc {
  font-size: 12px !important;
  color: var(--sg-text-muted) !important;
  margin-bottom: 6px !important;
}
.fhr-body {
  padding: 16px !important;
}

/* Image hover zoom */
.hotel-card .card-img,
.hotel-card img,
.fhr-img img,
.home-blog-card img {
  transition: transform 0.5s ease !important;
}
.hotel-card:hover .card-img,
.hotel-card:hover img,
.fhr-card:hover .fhr-img img,
.home-blog-card:hover img {
  transform: scale(1.05) !important;
}
.fhr-img {
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 4/3 !important;
}
.fhr-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.fhr-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

/* ============================================================
   6B. STORY SECTION
   ============================================================ */
.sg-story-section {
  padding: 72px 0 56px !important;
  background: #fff !important;
  position: relative !important;
  overflow: visible !important;
}
.sg-story-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.6fr !important;
  gap: 60px !important;
  align-items: center !important;
  margin-bottom: 52px !important;
}
.sg-story-cursive {
  font-family: 'Dancing Script', 'Brush Script MT', 'Segoe Script', cursive !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--sg-navy) !important;
  letter-spacing: -0.5px !important;
}
.sg-story-text p {
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  margin-bottom: 18px !important;
}
.sg-story-text p:last-child {
  margin-bottom: 0 !important;
}
.sg-story-decor {
  position: absolute !important;
  left: 0 !important;
  bottom: 40px !important;
  width: 200px !important;
  height: auto !important;
  z-index: 2 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)) !important;
  animation: floatDecor 4s ease-in-out infinite !important;
}
@keyframes floatDecor {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
.sg-story-img-wrap {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 64px rgba(0,31,67,0.12) !important;
  max-height: 480px !important;
  margin-left: 140px !important;
}
.sg-story-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}
.sg-story-img-wrap:hover img {
  transform: scale(1.03) !important;
}
@media (max-width: 767px) {
  .sg-story-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .sg-story-cursive {
    font-size: 34px !important;
  }
}

/* ============================================================
   7. HOTEL SHOWCASE
   ============================================================ */
.sg-hotel-showcase {
  padding: 72px 0 80px !important;
  background: #fff !important;
}
.sg-showcase-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 64px !important;
}
.sg-showcase-card {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
}
.sg-showcase-card--reverse {
  direction: rtl !important;
}
.sg-showcase-card--reverse > * {
  direction: ltr !important;
}
.sg-showcase-img-wrap {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.13) !important;
  aspect-ratio: 4/3 !important;
}
.sg-showcase-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}
.sg-showcase-img-wrap:hover img {
  transform: scale(1.04) !important;
}
.sg-showcase-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.sg-showcase-badge {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #b0479a !important;
  background: rgba(255, 169, 249, 0.15) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  width: fit-content !important;
}
.sg-showcase-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--sg-navy-deep) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.sg-showcase-desc {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #4a5568 !important;
  margin: 0 !important;
}
.sg-showcase-btn {
  display: inline-block !important;
  margin-top: 8px !important;
  padding: 13px 32px !important;
  background: var(--sg-btn-gradient) !important;
  color: var(--sg-btn-text) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  width: fit-content !important;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 16px rgba(255, 169, 249, 0.35) !important;
}
.sg-showcase-btn:hover {
  background: var(--sg-btn-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 109, 246, 0.45) !important;
}
@media (max-width: 900px) {
  .sg-showcase-card {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .sg-showcase-card--reverse {
    direction: ltr !important;
  }
}

/* ============================================================
   8. DỊCH VỤ SECTION
   ============================================================ */
.sg-service-section {
  position: relative !important;
  padding: 80px 0 72px !important;
  background: #f4f7fb !important;
  overflow: hidden !important;
}
/* Rùa biển decoration — góc phải dưới */
.sg-service-decor {
  position: absolute !important;
  right: -30px !important;
  bottom: -20px !important;
  width: 280px !important;
  opacity: 0.92 !important;
  pointer-events: none !important;
  animation: floatDecor 5s ease-in-out infinite !important;
  z-index: 0 !important;
}
/* Tiêu đề 2 cột */
.sg-service-header {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: end !important;
  margin-bottom: 48px !important;
}
.sg-service-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #b0479a !important;
  margin-bottom: 16px !important;
}
.sg-service-cursive {
  font-family: 'Dancing Script', cursive !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  color: var(--sg-navy) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}
.sg-service-header-right p {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #4a5568 !important;
  margin: 0 !important;
  padding-top: 8px !important;
}
/* Ảnh + tab menu */
.sg-service-body {
  display: grid !important;
  grid-template-columns: 1fr 220px !important;
  gap: 40px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;
}
.sg-service-img-wrap {
  border-radius: 20px !important;
  overflow: hidden !important;
  aspect-ratio: 16/9 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.14) !important;
}
.sg-service-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: opacity 0.22s ease !important;
}
/* Tab menu */
.sg-service-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.sg-svc-tab {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(0,31,67,0.12) !important;
  padding: 20px 0 !important;
  text-align: left !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #8a9ab5 !important;
  cursor: pointer !important;
  transition: color 0.2s ease, font-weight 0.2s ease !important;
  position: relative !important;
}
.sg-svc-tab::before {
  content: '' !important;
  position: absolute !important;
  left: -16px !important;
  top: 50% !important;
  transform: translateY(-50%) scaleY(0) !important;
  width: 3px !important;
  height: 24px !important;
  background: var(--sg-btn-gradient) !important;
  border-radius: 2px !important;
  transition: transform 0.25s ease !important;
}
.sg-svc-tab.active {
  color: var(--sg-navy-deep) !important;
  font-weight: 700 !important;
}
.sg-svc-tab.active::before {
  transform: translateY(-50%) scaleY(1) !important;
}
.sg-svc-tab:hover { color: var(--sg-navy-deep) !important; }
@media (max-width: 900px) {
  .sg-service-header { grid-template-columns: 1fr !important; gap: 20px !important; }
  .sg-service-body   { grid-template-columns: 1fr !important; }
  .sg-service-cursive { font-size: 32px !important; }
  .sg-service-tabs { flex-direction: row !important; gap: 8px !important; }
  .sg-svc-tab { border-bottom: none !important; border-bottom: 2px solid transparent !important; padding: 10px 4px !important; }
  .sg-svc-tab.active { border-bottom-color: var(--sg-navy-deep) !important; }
  .sg-svc-tab::before { display: none !important; }
  .sg-service-decor { width: 160px !important; }
}

/* ============================================================
   9. LOCATION CARDS
   ============================================================ */
/* ── Locations Carousel ── */
.locations-carousel-wrap {
  position: relative !important;
  overflow: hidden !important;
}
.locations-grid {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 24px 52px 40px !important;
  cursor: grab !important;
  user-select: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.locations-grid::-webkit-scrollbar { display: none !important; }
.locations-grid.is-dragging { cursor: grabbing !important; scroll-behavior: auto !important; }

.location-card {
  flex: 0 0 320px !important;
  height: 400px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: block !important;
  text-decoration: none !important;
  position: relative !important;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease, filter 0.4s ease !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important;
  will-change: transform, filter !important;
}
/* Dim siblings when any card is hovered */
.locations-grid:hover .location-card {
  filter: brightness(0.72) scale(0.97) !important;
  transform: translateY(4px) !important;
}
.locations-grid:hover .location-card:hover {
  filter: brightness(1) scale(1) !important;
  transform: translateY(-10px) scale(1.03) !important;
  box-shadow: 0 28px 72px rgba(0,0,0,0.32) !important;
  z-index: 10 !important;
}

.location-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.55s ease !important;
  pointer-events: none !important;
}
.location-card:hover img {
  transform: scale(1.07) !important;
}

/* Info overlay */
.location-info {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 28px 22px 22px !important;
  background: linear-gradient(to top, rgba(0,8,32,0.88) 0%, rgba(0,8,32,0.18) 55%, transparent 100%) !important;
  transition: background 0.35s ease !important;
}
.location-card:hover .location-info {
  background: linear-gradient(to top, rgba(0,8,32,0.95) 0%, rgba(0,8,32,0.55) 65%, rgba(0,8,32,0.1) 100%) !important;
}
.location-count-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  display: inline-block !important;
  margin-bottom: 10px !important;
  backdrop-filter: blur(4px) !important;
}
.location-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 6px !important;
  line-height: 1.2 !important;
}
.location-desc {
  font-size: 13px !important;
  color: rgba(255,255,255,0.8) !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  margin-bottom: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height 0.4s ease, opacity 0.35s ease, margin-bottom 0.3s ease !important;
}
.location-card:hover .location-desc {
  max-height: 72px !important;
  opacity: 1 !important;
  margin-bottom: 14px !important;
}
.location-cta {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: 0.04em !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.3s ease 0.07s, transform 0.3s ease 0.07s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.location-cta::after { content: '→' !important; display: inline-block !important; transition: transform 0.2s ease !important; }
.location-card:hover .location-cta { opacity: 1 !important; transform: translateY(0) !important; }
.location-card:hover .location-cta::after { transform: translateX(4px) !important; }

/* Arrow nav buttons */
.loc-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: var(--sg-navy-deep) !important;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s !important;
}
.loc-arrow:hover { background: #fff !important; box-shadow: 0 6px 24px rgba(0,0,0,0.2) !important; transform: translateY(-50%) scale(1.08) !important; }
.loc-arrow--prev { left: 4px !important; }
.loc-arrow--next { right: 4px !important; }

/* ============================================================
   8. RATING BADGE
   ============================================================ */
.fhr-score,
.hotel-score,
.rating-badge {
  background: var(--sg-navy) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  clip-path: polygon(
    4px 0%, calc(100% - 4px) 0%,
    100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%,
    0% calc(100% - 4px), 0% 4px
  ) !important;
}
.fhr-rlabel {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sg-text) !important;
}
.fhr-rcount {
  font-size: 12px !important;
  color: var(--sg-text-muted) !important;
}
.fhr-rating {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}
.fhr-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}
.fhr-price-from {
  font-size: 12px !important;
  color: var(--sg-text-muted) !important;
}
.fhr-price-val {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--sg-navy) !important;
}
.fhr-price-unit {
  font-size: 12px !important;
  color: var(--sg-text-muted) !important;
}
.fhr-badge-deal,
.fhr-badge-hot {
  position: absolute !important;
  top: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  letter-spacing: 0.3px !important;
  z-index: 2 !important;
}
.fhr-badge-deal {
  left: 12px !important;
  background: var(--sg-navy) !important;
  color: #fff !important;
  clip-path: polygon(
    4px 0%, calc(100% - 4px) 0%,
    100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%,
    0% calc(100% - 4px), 0% 4px
  ) !important;
}
.fhr-badge-hot {
  right: 12px !important;
  background: var(--sg-navy-deep) !important;
  color: #fff !important;
}

/* ============================================================
   9. FEATURED HOTELS TABS
   ============================================================ */
.fhr-section {
  background: var(--sg-navy-pale) !important;
}
.fhr-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 32px !important;
}
.fhr-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 32px !important;
  flex-wrap: wrap !important;
}
.fhr-tab {
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  padding: 8px 20px !important;
  border: 1px solid var(--sg-border) !important;
  background: var(--sg-white) !important;
  color: var(--sg-text-2) !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  clip-path: polygon(
    5px 0%, calc(100% - 5px) 0%,
    100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%,
    0% calc(100% - 5px), 0% 5px
  ) !important;
}
.fhr-tab.active,
.fhr-tab:hover {
  background: var(--sg-navy) !important;
  color: #fff !important;
  border-color: var(--sg-navy) !important;
}
.fhr-pane {
  display: none !important;
}
.fhr-pane.active {
  display: block !important;
}

/* ============================================================
   10. BLOG SECTION
   ============================================================ */
.home-blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
}
.home-blog-card {
  background: var(--sg-white) !important;
  border: 1px solid rgba(0,31,67,0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 16px rgba(0,31,67,0.06) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
.home-blog-card:hover {
  box-shadow: 0 16px 48px rgba(0,31,67,0.12) !important;
  transform: translateY(-6px) !important;
}
.home-blog-img-wrap {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  display: block !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.home-blog-img-wrap img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}
.home-blog-card:hover .home-blog-img-wrap img {
  transform: scale(1.05) !important;
}
.home-blog-no-img {
  width: 100% !important;
  height: 100% !important;
  background: var(--sg-navy-pale) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 40px !important;
}
.home-blog-loc-tag {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: var(--sg-navy) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  padding: 3px 10px !important;
  clip-path: polygon(
    4px 0%, calc(100% - 4px) 0%,
    100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%,
    0% calc(100% - 4px), 0% 4px
  ) !important;
}
.home-blog-body {
  padding: 24px !important;
}
.home-blog-meta {
  display: flex !important;
  gap: 16px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--sg-text-muted) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.home-blog-title {
  font-family: var(--sg-font-body) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--sg-text) !important;
  margin-bottom: 10px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.home-blog-excerpt {
  font-size: 14px !important;
  font-weight: 300 !important;
  color: var(--sg-text-2) !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.home-blog-btn {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 22px !important;
  border-radius: 50px !important;
  background: var(--sg-btn-gradient) !important;
  color: var(--sg-btn-text) !important;
  text-decoration: none !important;
  transition: background 0.25s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 3px 12px rgba(255,169,249,0.35) !important;
}
.home-blog-btn:hover {
  background: var(--sg-btn-gradient-hover) !important;
  box-shadow: 0 5px 18px rgba(255,109,246,0.4) !important;
}

/* ============================================================
   10B. TESTIMONIALS
   ============================================================ */
.sg-testimonials-section {
  padding: 80px 0 88px !important;
  background: linear-gradient(160deg, #f8f0ff 0%, #fff7f0 50%, #f0f8ff 100%) !important;
}
.sg-testi-carousel-wrap {
  position: relative !important;
  margin-top: 48px !important;
  padding: 0 52px !important;
}
.sg-testimonials-grid {
  display: flex !important;
  gap: 20px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 8px 2px 20px !important;
  cursor: grab !important;
  user-select: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sg-testimonials-grid::-webkit-scrollbar { display: none !important; }
.sg-testimonials-grid.is-dragging { cursor: grabbing !important; scroll-behavior: auto !important; }
.sg-testi-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-60%) !important;
  z-index: 10 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14) !important;
  cursor: pointer !important;
  font-size: 18px !important;
  color: var(--sg-navy-deep) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.sg-testi-arrow:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,0.2) !important;
  transform: translateY(-60%) scale(1.08) !important;
}
.sg-testi-arrow--prev { left: 0 !important; }
.sg-testi-arrow--next { right: 0 !important; }
.sg-testi-card {
  flex: 0 0 300px !important;
  background: #fff !important;
  border-radius: 20px !important;
  padding: 28px 24px 22px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.sg-testi-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.11) !important;
}
.sg-testi-stars {
  color: #f59e0b !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
}
.sg-testi-comment {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #4a5568 !important;
  flex: 1 !important;
  margin: 0 !important;
  font-style: italic !important;
}
.sg-testi-author {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}
.sg-testi-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}
.sg-testi-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sg-navy-deep) !important;
}
.sg-testi-hotel {
  font-size: 12px !important;
  color: var(--sg-text-muted) !important;
  margin-top: 2px !important;
}
.sg-testi-score {
  margin-left: auto !important;
  background: var(--sg-navy) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}
@media (max-width: 767px) {
  .sg-testi-card { flex: 0 0 260px !important; }
  .sg-testi-arrow { display: none !important; }
}

/* ============================================================
   10B. HOTELS LISTING PAGE
   ============================================================ */

/* Hero */
.hl-hero {
  background: linear-gradient(135deg, #004391 0%, #0a6ebd 50%, #e91e8c 100%) !important;
  padding: 52px 0 44px !important;
  position: relative !important;
  overflow: hidden !important;
}
.hl-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}
.hl-hero-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  position: relative !important;
  z-index: 1 !important;
}
.hl-hero-eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  margin: 0 0 10px !important;
}
.hl-hero-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.hl-hero-title span {
  color: #ffd6f0 !important;
}
.hl-hero-stats {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 16px !important;
  padding: 20px 32px !important;
  flex-shrink: 0 !important;
}
.hl-stat {
  text-align: center !important;
}
.hl-stat-num {
  display: block !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
}
.hl-stat-lbl {
  display: block !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.7) !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.hl-stat-divider {
  width: 1px !important;
  height: 36px !important;
  background: rgba(255,255,255,0.25) !important;
}

/* Filter bar ngang */
.hl-filterbar-wrap {
  background: #fff !important;
  border-bottom: 1px solid #f0f4f8 !important;
  box-shadow: 0 2px 8px rgba(0,31,67,0.06) !important;
  position: sticky !important;
  top: 64px !important;
  z-index: 50 !important;
}
.hl-filterbar {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  min-height: 56px !important;
}
.hl-filterbar::-webkit-scrollbar { display: none !important; }
.hl-fb-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 0 !important;
  flex-shrink: 0 !important;
}
.hl-fb-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #a0aec0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  margin-right: 2px !important;
}
.hl-fb-chips {
  display: flex !important;
  gap: 6px !important;
}
.hl-fb-chip {
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 13px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  color: #4a5568 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
  background: #fff !important;
}
.hl-fb-chip:hover { border-color: #e91e8c !important; color: #e91e8c !important; }
.hl-fb-chip.active { background: #e91e8c !important; color: #fff !important; border-color: #e91e8c !important; }
.hl-fb-sep {
  width: 1px !important;
  height: 28px !important;
  background: #e2e8f0 !important;
  margin: 0 16px !important;
  flex-shrink: 0 !important;
}
.hl-fb-select {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #4a5568 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 5px 28px 5px 12px !important;
  background: #fff !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23718096' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  cursor: pointer !important;
  outline: none !important;
}
.hl-fb-select:focus { border-color: #e91e8c !important; }
.hl-fb-clear {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
  padding-left: 20px !important;
  font-size: 12px !important;
  color: #e91e8c !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
}
.hl-fb-clear:hover { text-decoration: underline !important; }

/* Page wrap */
.hl-page-wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 32px 24px 60px !important;
}

/* Mobile toggle */
.hl-filter-toggle {
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a202c !important;
  cursor: pointer !important;
  margin-bottom: 16px !important;
}

/* Layout */
.hl-layout {
  display: flex !important;
  gap: 28px !important;
  align-items: flex-start !important;
}

/* Sidebar */
.hl-sidebar {
  width: 268px !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 90px !important;
}
.hl-filter-box {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 2px 20px rgba(0,31,67,0.08) !important;
  border: 1px solid #f0f4f8 !important;
}
.hl-filter-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a202c !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid #f0f4f8 !important;
}
.hl-filter-group {
  margin-bottom: 16px !important;
}
.hl-filter-label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #718096 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 7px !important;
}
.hl-filter-label svg { stroke: #a0aec0; flex-shrink: 0; }
.hl-filter-input {
  width: 100% !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  color: #1a202c !important;
  background: #fafbfc !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;
  outline: none !important;
}
.hl-filter-input:focus {
  border-color: #e91e8c !important;
  background: #fff !important;
}
.hl-filter-select {
  width: 100% !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  color: #1a202c !important;
  background: #fafbfc !important;
  box-sizing: border-box !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
  outline: none !important;
}
.hl-filter-select:focus { border-color: #e91e8c !important; background-color: #fff !important; }
.hl-price-range {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.hl-price-range .hl-filter-input { flex: 1 !important; }
.hl-price-sep { color: #aaa; font-size: 14px; flex-shrink: 0; }
.hl-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.hl-chip {
  font-size: 12px !important;
  padding: 4px 11px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  color: #4a5568 !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
}
.hl-chip:hover { border-color: #e91e8c !important; color: #e91e8c !important; }
.hl-chip.active { background: #e91e8c !important; color: #fff !important; border-color: #e91e8c !important; }
.hl-filter-divider {
  border: none !important;
  border-top: 1.5px solid #f0f4f8 !important;
  margin: 16px 0 !important;
}
.hl-btn-search {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  background: linear-gradient(135deg, #e91e8c, #c2185b) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: opacity 0.2s, transform 0.15s !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 14px rgba(233,30,140,0.3) !important;
}
.hl-btn-search:hover { opacity: 0.92 !important; transform: translateY(-1px) !important; }
.hl-btn-clear {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: 10px !important;
  font-size: 13px !important;
  color: #e91e8c !important;
  text-decoration: none !important;
  text-align: center !important;
}
.hl-btn-clear:hover { text-decoration: underline !important; }

/* Main */
.hl-main { flex: 1 !important; min-width: 0 !important; }

/* Result header */
.hl-result-header {
  margin-bottom: 24px !important;
}
.hl-result-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.hl-result-title h2 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a202c !important;
}
.hl-result-title h2 em { font-style: normal !important; color: #e91e8c !important; }
.hl-result-count {
  background: #f1f5f9 !important;
  color: #4a5568 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}

/* Active filter tags */
.hl-active-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.hl-af-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  color: #4a5568 !important;
  font-weight: 500 !important;
}
.hl-af-tag a {
  color: #e91e8c !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Empty state */
.hl-empty {
  text-align: center !important;
  padding: 80px 40px !important;
  background: #fff !important;
  border-radius: 20px !important;
  border: 1.5px dashed #e2e8f0 !important;
}
.hl-empty-icon { font-size: 52px !important; margin-bottom: 16px !important; }
.hl-empty h3 { font-size: 18px !important; font-weight: 700 !important; color: #1a202c !important; margin: 0 0 8px !important; }
.hl-empty p { color: #718096 !important; margin: 0 0 24px !important; }

/* Type filter tabs */
.hl-type-tabs {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
}
.hl-type-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: 50px !important;
  border: 2px solid #e2e8f0 !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.18s !important;
  cursor: pointer !important;
}
.hl-type-tab:hover {
  border-color: #e91e8c !important;
  color: #e91e8c !important;
  background: #fff0f6 !important;
}
.hl-type-tab.active {
  background: #e91e8c !important;
  border-color: #e91e8c !important;
  color: #fff !important;
}

/* Pagination */
.hl-pagination { margin-top: 36px !important; }

/* Responsive */
@media (max-width: 900px) {
  .hl-filter-toggle { display: flex !important; }
  .hl-layout { flex-direction: column !important; gap: 0 !important; }
  .hl-sidebar {
    width: 100% !important;
    position: static !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
    margin-bottom: 0 !important;
  }
  .hl-sidebar.open {
    max-height: 2000px !important;
    margin-bottom: 20px !important;
  }
  .hl-hero-inner { flex-direction: column !important; text-align: center !important; }
  .hl-hero-title { font-size: 26px !important; }
  .hl-hero-stats { width: 100% !important; justify-content: center !important; padding: 16px 24px !important; }
}

/* ============================================================
   11. WEEKEND DEALS — Hotels Grid & Hotel Card
   ============================================================ */
.hotels-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

/* Hotel Card — full redesign */
.hotel-card {
  display: flex !important;
  flex-direction: column !important;
}
.hotel-card-link {
  text-decoration: none !important;
  color: inherit !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Image area */
.hotel-card-img {
  position: relative !important;
  aspect-ratio: 16/10 !important;
  overflow: hidden !important;
}
.hotel-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.55s ease !important;
}
.hotel-card:hover .hotel-card-img img {
  transform: scale(1.06) !important;
}
/* Badges */
.hotel-card-badges {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  display: flex !important;
  gap: 6px !important;
  z-index: 2 !important;
}
.badge-discount {
  background: #e91e8c !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
}
.badge-deal {
  background: #ff7c00 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
}
/* Fav button */
.hc-fav-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.88) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 2 !important;
  transition: background 0.2s !important;
}
.hc-fav-btn svg { width: 16px; height: 16px; color: #e91e8c; }
.hc-fav-btn.is-fav { background: #ffe0f0 !important; }
/* Info area */
.hotel-card-info {
  padding: 16px 18px 12px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.hotel-location {
  font-size: 12px !important;
  color: var(--sg-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.hotel-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--sg-navy-deep) !important;
  line-height: 1.4 !important;
}
.hotel-rating {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
}
.hc-score {
  background: var(--sg-navy) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
}
.hc-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sg-navy-deep) !important;
}
.hc-reviews {
  font-size: 12px !important;
  color: var(--sg-text-muted) !important;
}
.hotel-amenity-pills {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}
.hap {
  font-size: 14px !important;
  background: #f1f6fa !important;
  border-radius: 8px !important;
  padding: 2px 6px !important;
}
.hotel-price {
  margin-top: auto !important;
  padding-top: 10px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.price-old {
  font-size: 13px !important;
  color: #aaa !important;
  text-decoration: line-through !important;
}
.price-new {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #e91e8c !important;
}
.price-unit {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #888 !important;
}
/* Action row */
.hotel-card-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 0 16px 16px !important;
}
.hca-detail {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 10px 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sg-navy) !important;
  text-decoration: none !important;
  border: 1.5px solid rgba(0,67,145,0.25) !important;
  border-radius: 50px !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.hca-detail:hover {
  background: #f1f6fa !important;
  border-color: var(--sg-navy) !important;
}
.hca-book {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: var(--sg-btn-gradient) !important;
  color: var(--sg-btn-text) !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  border: none !important;
  transition: background 0.25s, box-shadow 0.2s !important;
  box-shadow: 0 3px 12px rgba(255,169,249,0.4) !important;
}
.hca-book:hover {
  background: var(--sg-btn-gradient-hover) !important;
  box-shadow: 0 5px 18px rgba(255,109,246,0.45) !important;
}

/* ============================================================
   12. FORMS & INPUTS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  font-family: var(--sg-font-body) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--sg-text) !important;
  background: var(--sg-white) !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
}
/* Override cho inputs trong search bar — phải nằm SAU global rule để thắng */
.hsb-field input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
/* Khôi phục appearance cho date input để calendar picker hoạt động */
.hsb-field input[type="date"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  padding: 2px 0 !important;
  cursor: pointer !important;
  position: relative !important;
  min-height: 32px !important;
  width: 100% !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--sg-navy) !important;
  box-shadow: none !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--sg-text-muted) !important;
  font-weight: 300 !important;
}

/* ============================================================
   13. FOOTER
   ============================================================ */
.site-footer,
footer {
  background-color: #fff !important;
  color: #4a5568 !important;
  border-top: 1px solid rgba(0,31,67,0.08) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.footer-main {
  background-color: #fff !important;
  padding-top: 60px !important;
  padding-bottom: 48px !important;
}
.footer-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr !important;
  gap: 0 40px !important;
}
.footer-heading {
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #1a202c !important;
  margin-bottom: 20px !important;
}
.footer-desc {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1a202c !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}
.footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-links li {
  margin-bottom: 12px !important;
}
/* Underline slide animation like VPR */
.footer-links a,
.site-footer a,
footer a {
  color: #1a202c !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.2s ease !important;
}
.footer-links a::before,
.site-footer a::before,
footer a::before {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: #e91e8c !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.footer-links a:hover::before,
.site-footer a:hover::before,
footer a:hover::before {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}
.footer-links a:hover,
.site-footer a:hover,
footer a:hover {
  color: var(--sg-navy-deep) !important;
}
.footer-socials {
  display: flex !important;
  gap: 12px !important;
  margin-top: 8px !important;
}
.fsocial {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(0,31,67,0.2) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1a202c !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.fsocial:hover {
  border-color: var(--sg-navy) !important;
  color: var(--sg-navy) !important;
  background: rgba(0,67,145,0.07) !important;
}
.footer-contact {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}
.footer-contact li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1a202c !important;
  margin-bottom: 12px !important;
}
.footer-contact svg {
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  stroke: #4a5568 !important;
}
.footer-payment {
  border-top: 1px solid rgba(0,31,67,0.1) !important;
  padding-top: 20px !important;
}
.fp-icons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.fp-badge-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  height: 38px !important;
}
.fp-badge-logo img {
  height: 24px !important;
  width: auto !important;
  object-fit: contain !important;
}
.fp-badge-logo[data-tip="VNPay"] img {
  height: 34px !important;
}
.fp-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #4a5568 !important;
  margin-bottom: 12px !important;
}
.footer-bottom {
  background: #f1f5f9 !important;
  border-top: 1px solid rgba(0,31,67,0.08) !important;
  padding: 16px 24px !important;
  margin-top: 0 !important;
}

/* ============================================================
   14. PRICE
   ============================================================ */
.price,
.room-price,
.hd-price,
.fhr-price-val {
  font-family: var(--sg-font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--sg-navy) !important;
}

/* ============================================================
   14B. AUTH PAGES (Login / Register)
   ============================================================ */
.auth-fullscreen {
  position: relative !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 100px 16px 60px !important;
}
/* Đường kẻ phân cách auth page và footer */
.auth-fullscreen + footer,
.auth-fullscreen ~ footer,
body:has(.auth-fullscreen) .site-footer,
body:has(.auth-fullscreen) footer {
  border-top: 2px solid #9ca3af !important;
  box-shadow: none !important;
}
.auth-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
}
.auth-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.auth-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(0,20,60,0.55) 0%, rgba(0,60,120,0.35) 100%) !important;
}

/* Glassmorphism card */
.auth-card {
  width: 100% !important;
  max-width: 420px !important;
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 24px !important;
  padding: 40px 36px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3) !important;
  position: relative !important;
  z-index: 1 !important;
}
.auth-card-logo {
  text-align: center !important;
  margin-bottom: 20px !important;
}
.auth-card-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-align: center !important;
  margin: 0 0 6px !important;
  letter-spacing: 0.5px !important;
}
.auth-card-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,0.7) !important;
  text-align: center !important;
  margin: 0 0 28px !important;
}
.auth-alert {
  background: rgba(255,100,100,0.2) !important;
  border: 1px solid rgba(255,100,100,0.4) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
  font-size: 13px !important;
  color: #ffe0e0 !important;
}
.auth-form { display: flex !important; flex-direction: column !important; gap: 8px !important; }

/* Floating label input group */
.auth-input-group {
  position: relative !important;
  margin-bottom: 28px !important;
}
.auth-ig-icon {
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  stroke: rgba(255,255,255,0.6) !important;
  transition: stroke 0.3s !important;
  pointer-events: none !important;
}
.auth-ig-input {
  width: 100% !important;
  padding: 12px 5px 12px 28px !important;
  font-size: 15px !important;
  color: #fff !important;
  caret-color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid rgba(255,255,255,0.4) !important;
  outline: none !important;
  font-family: var(--sg-font-body) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  transition: border-color 0.3s !important;
}
.auth-ig-input:-webkit-autofill,
.auth-ig-input:-webkit-autofill:hover,
.auth-ig-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s, border-color 0.3s !important;
}
.auth-ig-label {
  position: absolute !important;
  top: 14px !important;
  left: 28px !important;
  color: rgba(255,255,255,0.75) !important;
  pointer-events: none !important;
  font-size: 14px !important;
  transition: top 0.3s ease, left 0.3s ease, font-size 0.3s ease, color 0.3s ease !important;
}
.auth-ig-input:focus ~ .auth-ig-label,
.auth-ig-input:valid ~ .auth-ig-label {
  top: -16px !important;
  left: 0 !important;
  font-size: 11px !important;
  color: #38bdf8 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}
.auth-ig-input:focus {
  border-bottom-color: #38bdf8 !important;
}
.auth-input-group:focus-within .auth-ig-icon {
  stroke: #38bdf8 !important;
}
.auth-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: -4px !important;
}
.auth-remember {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.9) !important;
  cursor: pointer !important;
}
.auth-forgot {
  font-size: 13px !important;
  color: #ffd6f0 !important;
  text-decoration: none !important;
}
.auth-forgot:hover { color: #fff !important; text-decoration: underline !important; }
.auth-error { font-size: 12px !important; color: #ffb3b3 !important; margin-top: -8px !important; }
.auth-recaptcha-wrap {
  display: flex !important;
  justify-content: center !important;
  margin: 8px 0 4px !important;
  transform: scale(0.9) !important;
  transform-origin: center !important;
}

.auth-btn {
  width: 100% !important;
  background: linear-gradient(135deg, #e91e8c, #c2185b) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  margin-top: 4px !important;
  transition: opacity 0.2s, transform 0.15s !important;
  box-shadow: 0 6px 20px rgba(233,30,140,0.4) !important;
}
.auth-btn:hover { opacity: 0.92 !important; transform: translateY(-1px) !important; }

.auth-divider {
  text-align: center !important;
  margin: 20px 0 !important;
  position: relative !important;
}
.auth-divider::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(255,255,255,0.2) !important;
}
.auth-divider span {
  position: relative !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.6) !important;
  background: transparent !important;
}

.auth-social-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 11px !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 50px !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-size: 14px !important;
  text-decoration: none !important;
  margin-bottom: 10px !important;
  transition: background 0.2s !important;
}
.auth-social-btn:hover { background: rgba(255,255,255,0.22) !important; color: #fff !important; }

.auth-footer-text {
  text-align: center !important;
  margin-top: 20px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.7) !important;
}
.auth-footer-text a {
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.auth-footer-text a:hover { text-decoration: underline !important; }

/* ============================================================
   15. SCROLL TO TOP
   ============================================================ */
.scroll-top-btn {
  background: var(--sg-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  width: 44px !important;
  height: 44px !important;
  position: fixed !important;
  bottom: 180px !important;
  right: 24px !important;
  z-index: 99 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s ease !important;
  clip-path: polygon(
    6px 0%, calc(100% - 6px) 0%,
    100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%,
    0% calc(100% - 6px), 0% 6px
  ) !important;
}
.scroll-top-btn.visible {
  opacity: 1 !important;
  visibility: visible !important;
}
.scroll-top-btn:hover {
  background: var(--sg-navy-deep) !important;
}

/* ============================================================
   16. HOTEL DETAIL PAGE
   ============================================================ */
.hotel-info h1,
.hotel-detail-title {
  font-family: var(--sg-font-body) !important;
  font-size: 42px !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  color: var(--sg-text) !important;
  letter-spacing: 0.3px !important;
}
.hotel-info h3,
.room-name {
  font-family: var(--sg-font-body) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--sg-text) !important;
}
.room-card {
  background: var(--sg-white) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 0 !important;
  transition: box-shadow 0.3s ease !important;
}
.room-card:hover {
  box-shadow: 0 8px 32px rgba(0,31,67,0.10) !important;
}

/* ============================================================
   17. BADGE / TAG
   ============================================================ */
.badge,
.tag {
  font-family: var(--sg-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 3px 8px !important;
}

/* ============================================================
   18. NAV CONTACT DROPDOWN
   ============================================================ */
.nav-contact-btn {
  background: var(--sg-btn-gradient) !important;
  color: var(--sg-btn-text) !important;
  border: none !important;
  padding: 8px 16px !important;
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background 0.2s ease !important;
  clip-path: polygon(
    5px 0%, calc(100% - 5px) 0%,
    100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%,
    0% calc(100% - 5px), 0% 5px
  ) !important;
}
.nav-contact-btn:hover {
  background: var(--sg-btn-gradient-hover) !important;
  color: var(--sg-btn-text) !important;
}
.nav-contact-dropdown {
  border: 1px solid var(--sg-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 40px rgba(0,31,67,0.12) !important;
}
.ncd-item:hover {
  background: var(--sg-navy-pale) !important;
}
.ncd-label {
  color: var(--sg-text) !important;
  font-weight: 500 !important;
}
.ncd-val {
  color: var(--sg-navy) !important;
  font-weight: 600 !important;
}

/* ============================================================
   19. SUPPORT POPUP
   ============================================================ */
.support-popup {
  border-radius: 0 !important;
}
.sp-submit {
  background: var(--sg-btn-gradient) !important;
  color: var(--sg-btn-text) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  padding: 12px 24px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
.sp-submit:hover {
  background: var(--sg-btn-gradient-hover) !important;
  color: var(--sg-btn-text) !important;
}

/* ============================================================
   20. RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .nav-left,
  .nav-right,
  nav#mainNav.nav-left,
  .d-none-mobile {
    display: none !important;
  }
}
/* Tablet 1025px–1100px: ẩn nav-right, giảm gap nav-left */
@media (max-width: 1100px) and (min-width: 1025px) {
  .nav-right {
    display: none !important;
  }
  .nav-left {
    gap: 16px !important;
  }
}

/* ============================================================
   TABLET / iPAD (768px – 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Ẩn desktop nav, hiện hamburger trên iPad */
  .nav-left,
  nav#mainNav,
  nav#mainNav.nav-left,
  #mainNav,
  .d-none-mobile,
  .nav-contact-wrap { display: none !important; }
  .d-none-desktop { display: flex !important; }
  /* Ngăn header tạo hàng thứ 2 */
  .header-flex { flex-wrap: nowrap !important; }
  .header { overflow: visible !important; }

  /* Search box: 2 hàng thay vì 4 field chen nhau */
  .hero-search-box {
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 6px !important;
  }
  .hsb-field {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    margin: 3px !important;
  }
  .hsb-field.hsb-keyword {
    flex: 1 1 100% !important;
  }
  .hsb-btn {
    flex: 1 1 100% !important;
    margin: 3px !important;
    border-radius: 10px !important;
    min-height: 52px !important;
    font-size: 16px !important;
  }

  /* iOS: ngăn zoom khi tap input */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Touch targets 44px+ */
  .hsb-fr-chip {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .hsb-tab-btn {
    min-height: 44px !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
  }
  .hsb-fr-select {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 8px 10px !important;
  }
  .hsb-guests-display {
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
  }

  /* Filter row: scroll ngang trên iPad portrait */
  .hsb-filter-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
  }
  .hsb-filter-row::-webkit-scrollbar { display: none !important; }
  .hsb-fr-sep { display: none !important; }

  /* Guests popup: compact card, không overlay */
  .hsb-guests-popup {
    position: fixed !important;
    top: auto !important;
    bottom: 24px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    min-width: 320px !important;
    width: auto !important;
    max-width: 420px !important;
    border-radius: 16px !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important;
  }
  .hsb-gp-stepper button {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }

  /* Hotel grid: 2 cột thay vì 3 */
  .hotels-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Location dropdown: full width */
  .hsb-dropdown {
    left: 0 !important;
    right: 0 !important;
    min-width: unset !important;
  }
}

@media (max-width: 1024px) {
  .fhr-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}
@media (max-width: 767px) {
  /* iOS: prevent zoom on focus for all pages */
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Minimum tap targets */
  button, [type="button"], [type="submit"], [type="reset"] {
    min-height: 44px;
  }
  .hero-search-title {
    font-size: 32px !important;
  }
  .hero-search-sub {
    font-size: 14px !important;
    margin-bottom: 28px !important;
  }
  .hero-search-section {
    min-height: 55vh !important;
    padding: 80px 16px 48px !important;
  }
  .hero-search-box {
    flex-direction: column !important;
  }
  .hsb-field {
    border-right: none !important;
    border-bottom: 1px solid var(--sg-border) !important;
  }
  .home-section {
    padding: 56px 0 !important;
  }
  .home-section-title {
    font-size: 26px !important;
  }
  .home-section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 32px !important;
  }
  .locations-grid {
    gap: 14px !important;
    padding: 16px 12px 28px !important;
  }
  .location-card { flex: 0 0 260px !important; height: 320px !important; }
  .loc-arrow { display: none !important; }
  .locations-grid:hover .location-card { filter: none !important; transform: none !important; }
  .locations-grid:hover .location-card:hover { transform: translateY(-6px) scale(1.02) !important; filter: none !important; }
  .location-desc { max-height: 60px !important; opacity: 1 !important; margin-bottom: 10px !important; }
  .location-cta { opacity: 1 !important; transform: none !important; }
  .fhr-grid {
    grid-template-columns: 1fr !important;
  }
  .hotels-grid {
    grid-template-columns: 1fr !important;
  }
  .home-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .sg-trust-inner {
    gap: 16px !important;
    justify-content: flex-start !important;
  }
  .sg-trust-item {
    gap: 10px !important;
    flex: 1 1 calc(50% - 8px) !important;
  }
  .footer-container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .hotel-info h1,
  .hotel-detail-title {
    font-size: 28px !important;
  }
}

/* ============================================================
   PHÒNG NGHỈ EDITORIAL INTRO (thay X divider)
   ============================================================ */
.sg-rooms-editorial {
  text-align: center;
  padding: 72px 24px 64px;
  background: #fff;
  max-width: 820px;
  margin: 0 auto;
}
.sg-rooms-editorial-label {
  display: inline-block;
  font-family: var(--sg-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sg-navy);
  margin-bottom: 28px;
}
.sg-rooms-editorial-title {
  margin: 0 0 32px;
  line-height: 1.15;
}
.sg-rooms-editorial-title .sg-story-cursive {
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--sg-navy) !important;
  display: block;
}
.sg-rooms-editorial-desc {
  font-family: var(--sg-font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: #4a6080;
  max-width: 680px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .sg-rooms-editorial { padding: 48px 20px 40px; }
  .sg-rooms-editorial-title .sg-story-cursive { font-size: 2rem; }
}

/* ============================================================
   PHÒNG NGHỈ SECTION
   ============================================================ */
.sg-rooms-section {
  background: #fff;
  padding: 80px 0 72px;
}
.sg-rooms-header {
  text-align: center;
  margin-bottom: 52px;
}
.sg-rooms-label {
  display: inline-block;
  font-family: var(--sg-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #e91e8c;
  margin-bottom: 16px;
}
.sg-rooms-title {
  font-family: var(--sg-font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--sg-navy-deep);
  line-height: 1.25;
  margin: 0 0 20px;
}
.sg-rooms-title .sg-service-cursive {
  font-size: 2.8rem;
}
.sg-rooms-desc {
  font-family: var(--sg-font-body);
  font-size: 1rem;
  color: var(--sg-text-muted);
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.75;
}
.sg-rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sg-room-card {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sg-room-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.14);
}
.sg-room-card--standard {
  background: linear-gradient(145deg, #eaf0fa 0%, #d6e4f5 100%);
  border: 1px solid rgba(0,67,145,0.12);
}
.sg-room-card--deluxe {
  background: linear-gradient(145deg, #1a2a4a 0%, #002d6e 100%);
  color: #fff;
}
.sg-room-card--suite {
  background: linear-gradient(145deg, #1a0a1f 0%, #3d0a3a 100%);
  color: #fff;
}
.sg-room-card-inner {
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 14px;
}
.sg-room-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.sg-room-icon {
  width: 44px;
  height: 44px;
}
.sg-room-card--standard .sg-room-icon { color: var(--sg-navy); }
.sg-room-card--deluxe  .sg-room-icon { color: #a8c8ff; }
.sg-room-card--suite   .sg-room-icon { color: #e8a0ff; }
.sg-room-badge {
  font-family: var(--sg-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(0,67,145,0.12);
  color: var(--sg-navy);
}
.sg-room-badge--gold { background: rgba(255,193,7,0.2); color: #b8860b; }
.sg-room-badge--pink { background: rgba(233,30,140,0.2); color: #e91e8c; }
.sg-room-card--deluxe .sg-room-badge--gold { color: #ffd700; }
.sg-room-card--suite .sg-room-badge--pink  { color: #ff80d5; }
.sg-room-name {
  font-family: var(--sg-font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.sg-room-card--standard .sg-room-name { color: var(--sg-navy-deep); }
.sg-room-card--deluxe   .sg-room-name { color: #fff; }
.sg-room-card--suite    .sg-room-name { color: #f5e0ff; }
.sg-room-desc {
  font-family: var(--sg-font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  flex: 1;
}
.sg-room-card--standard .sg-room-desc { color: #4a6080; }
.sg-room-card--deluxe   .sg-room-desc { color: rgba(255,255,255,0.75); }
.sg-room-card--suite    .sg-room-desc { color: rgba(245,224,255,0.75); }
.sg-room-features {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sg-room-features span {
  font-family: var(--sg-font-body);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
}
.sg-room-card--standard .sg-room-features span { background: rgba(0,67,145,0.1); color: var(--sg-navy); }
.sg-room-card--deluxe   .sg-room-features span { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
.sg-room-card--suite    .sg-room-features span { background: rgba(255,255,255,0.08); color: rgba(245,224,255,0.85); }
.sg-room-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 11px 26px;
  border-radius: 30px;
  font-family: var(--sg-font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
  align-self: flex-start;
}
.sg-room-card--standard .sg-room-cta { background: var(--sg-navy); color: #fff; }
.sg-room-card--standard .sg-room-cta:hover { background: var(--sg-navy-deep); }
.sg-room-card--deluxe   .sg-room-cta { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.sg-room-card--deluxe   .sg-room-cta:hover { background: rgba(255,255,255,0.28); }
.sg-room-card--suite    .sg-room-cta { background: rgba(233,30,140,0.75); color: #fff; }
.sg-room-card--suite    .sg-room-cta:hover { background: #e91e8c; }

@media (max-width: 900px) {
  .sg-rooms-grid { grid-template-columns: 1fr 1fr; }
  .sg-room-card--suite { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .sg-rooms-section { padding: 48px 0 40px; }
  .sg-rooms-grid { grid-template-columns: 1fr; gap: 18px; }
  .sg-room-card--suite { grid-column: auto; }
  .sg-rooms-title { font-size: 1.7rem; }
  .sg-rooms-title .sg-service-cursive { font-size: 2rem; }
}

/* ============================================================
   SECTION DIVIDER X
   ============================================================ */
.sg-divider-x {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 8px 0 !important;
  background: #fff !important;
}
.sg-divider-line {
  flex: 1 !important;
  max-width: 420px !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, rgba(233,30,140,0.3), transparent) !important;
}
.sg-divider-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(233,30,140,0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */
.mobile-menu-btn {
  display: none;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #fff !important;
  padding: 6px !important;
  margin-left: 8px !important;
}
.header-transparent.scrolled .mobile-menu-btn { color: var(--sg-navy) !important; }
.header:not(.header-transparent) .mobile-menu-btn { color: var(--sg-navy) !important; }

.mobile-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
}
.mobile-drawer-overlay.open { display: block; }

.mobile-drawer {
  position: fixed;
  top: 0; right: -280px;
  width: 280px;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  overflow-y: auto;
}
.mobile-drawer.open { right: 0; }

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f4f8;
}
.mobile-drawer-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  padding: 4px 8px;
}
.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
}
.mobile-drawer-nav a {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sg-navy-deep);
  text-decoration: none;
  border-bottom: 1px solid #f5f7fa;
  transition: background 0.15s;
}
.mobile-drawer-nav a:hover,
.mobile-drawer-nav a.active {
  background: #f5f7fb;
  color: #e91e8c;
}
.mobile-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f4f8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.mobile-drawer-footer a {
  font-size: 14px;
  color: var(--sg-navy);
  text-decoration: none;
  padding: 8px 0;
}
.mobile-drawer-login {
  background: linear-gradient(135deg, #e91e8c, #f472b6) !important;
  color: #fff !important;
  text-align: center;
  padding: 12px !important;
  border-radius: 10px;
  font-weight: 600 !important;
}
body.drawer-open { overflow: hidden; }

/* Desktop: ẩn hamburger, hiện contact */
.d-none-desktop { display: none !important; }

/* ============================================================
   MOBILE RESPONSIVE — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {

  /* ── Header: ẩn nav links + contact, hiện hamburger ── */
  .nav-left,
  .nav-right { display: none !important; }
  .d-none-mobile { display: none !important; }
  .d-none-desktop { display: flex !important; }

  .btn-login-nav {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  .nav-contact-btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
    gap: 5px !important;
  }
  .nav-contact-label { display: none !important; }
  .site-header { padding: 0 12px !important; }

  /* ── Hero search ── */
  .hero-search-section {
    height: auto !important;
    min-height: 100vh !important;
    justify-content: flex-start !important;
    padding-top: 80px !important;
  }
  .hero-content {
    padding: 0 16px !important;
    margin-bottom: 24px !important;
  }
  .hero-search-title { font-size: 28px !important; line-height: 1.2 !important; }
  .hero-search-sub   { font-size: 13px !important; margin-bottom: 16px !important; }
  .hero-booking-bar  {
    position: relative !important;
    bottom: auto !important;
    padding: 0 12px 32px !important;
    width: 100% !important;
  }
  .hero-search-box { border-radius: 14px !important; }

  .hsb-field {
    padding: 14px 14px !important;
    font-size: 14px !important;
    min-height: 52px !important;
  }
  .hsb-label { font-size: 10px !important; }
  .hsb-input { font-size: 14px !important; }

  /* Input/date fields: đủ cao để tap dễ */
  .hsb-field input[type="date"],
  .hsb-field input[type="text"] {
    min-height: 28px !important;
    font-size: 14px !important;
  }
  .hsb-guests-display {
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── iOS: ngăn zoom khi focus input (font-size < 16px) ── */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* ── Filter rows — cuộn ngang, dùng scroll-snap để tap chính xác ── */
  .hsb-filter-row {
    padding: 6px 12px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    border-radius: 0 0 14px 14px !important;
    /* Cho phép tap ngay cả khi cuộn */
    touch-action: pan-x !important;
  }
  .hsb-filter-row::-webkit-scrollbar { display: none !important; }
  .hsb-fr-group  { flex-shrink: 0 !important; align-items: center !important; }
  .hsb-fr-sep    { display: none !important; }
  .hsb-fr-label  { font-size: 11px !important; white-space: nowrap !important; }
  /* Chip: 44px height chuẩn Apple HIG */
  .hsb-fr-chip {
    font-size: 13px !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
  }

  /* Sort select */
  .hsb-fr-select {
    font-size: 16px !important;
    padding: 6px 8px !important;
    min-height: 44px !important;
  }

  /* Tab buttons Qua đêm / 1 ngày */
  .hsb-tab-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }

  /* TÌM PHÒNG button */
  .hsb-btn {
    min-height: 52px !important;
    font-size: 16px !important;
  }

  /* hsb-field: đủ cao, không clip con */
  .hsb-field {
    overflow: visible !important;
  }

  /* Guests display đủ cao để tap */
  .hsb-guests-display {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
  }

  /* ── Chatbot + QR Promo — stack dọc ── */
  .chatbot-toggle-btn {
    bottom: 16px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
  }
  .qrp-wrap {
    bottom: 16px !important;
    right: 72px !important;
  }
  .scroll-top-btn {
    bottom: 80px !important;
    right: 16px !important;
  }

  /* ── Story section: ảnh bên trái không bị to, 1 cột ── */
  .sg-story-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .sg-story-img-wrap {
    margin-left: 0 !important;
    max-height: 240px !important;
  }
  .sg-story-decor {
    width: 100px !important;
    bottom: 10px !important;
  }

  /* ── Con rùa: nhỏ lại, góc phải dưới, không che text ── */
  .sg-service-decor {
    display: block !important;
    width: 100px !important;
    right: -10px !important;
    bottom: -10px !important;
    left: auto !important;
    opacity: 0.7 !important;
  }

  /* ── Cards & grids ── */
  .sg-showcase-card { gap: 20px !important; }
  .sg-showcase-title { font-size: 20px !important; }
  .sg-showcase-desc  { font-size: 13px !important; }
  .sg-showcase-btn   { padding: 10px 22px !important; font-size: 13px !important; }

  .sg-service-cursive { font-size: 28px !important; }
  .sg-service-section { padding: 48px 0 40px !important; }

  /* ── Location cards: cuộn ngang từ trái sang phải ── */
  .locations-grid {
    justify-content: flex-start !important;
    padding-left: 16px !important;
  }
  .location-card { flex: 0 0 220px !important; height: 280px !important; }

  /* ── Blog ── */
  .blog-card-title { font-size: 16px !important; }

  /* ── Footer ── */
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
  .footer-heading { font-size: 14px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   LANDSCAPE PHONE (max-width:767px + landscape): booking bar relative
   Khi cầm điện thoại ngang, hero chỉ ~360px cao → booking bar tuyệt đối
   đè lên tiêu đề. Chuyển sang flow bình thường để tránh overlap.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-search-section {
    height: auto !important;
    min-height: 0 !important;
    padding: 56px 16px 0 !important;
    justify-content: flex-start !important;
  }
  .hero-booking-bar {
    position: relative !important;
    bottom: auto !important;
    padding: 0 16px 20px !important;
    width: 100% !important;
  }
  /* Hero title nhỏ hơn cho landscape */
  .hero-search-title { font-size: 22px !important; margin-bottom: 8px !important; }
  .hero-search-sub   { font-size: 13px !important; margin-bottom: 12px !important; }
  .hsb-tabs-wrap     { margin-bottom: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   AUTH PAGES — RESPONSIVE (mobile & tablet)
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Card: giảm padding, chiều rộng tự co */
  .auth-card {
    padding: 28px 20px !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
  }
  .auth-card-title { font-size: 21px !important; }
  .auth-card-sub   { font-size: 12px !important; }

  /* Căn lại fullscreen để card không bị che bởi header */
  .auth-fullscreen {
    padding-top: 80px !important;
    padding-bottom: 24px !important;
    justify-content: center !important;
  }

  /* Nút: đủ 44px để tap dễ */
  .auth-btn,
  .auth-social-btn {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  /* reCAPTCHA: thu nhỏ để không tràn ngang trên màn nhỏ */
  .auth-recaptcha-wrap {
    transform: scale(0.82) !important;
    transform-origin: left center !important;
    margin-left: 0 !important;
  }

  /* Input group: tăng line-height tappable */
  .auth-input-group { margin-bottom: 20px !important; }
  .auth-ig-input    { font-size: 15px !important; padding-bottom: 10px !important; }

  /* Alert */
  .auth-alert { font-size: 13px !important; padding: 10px 12px !important; }
}

@media (max-width: 380px) {
  .auth-card { padding: 22px 16px !important; }
  .auth-card-title { font-size: 19px !important; }

  /* reCAPTCHA cực nhỏ cho iPhone SE */
  .auth-recaptcha-wrap {
    transform: scale(0.72) !important;
    transform-origin: left center !important;
  }

  /* OTP digit boxes */
  .otp-digit {
    width: 38px !important;
    height: 46px !important;
    font-size: 20px !important;
    border-radius: 8px !important;
  }
  .otp-input-row { gap: 6px !important; }
}