/* ==========================================================================
   TRUNG VUONG GARDEN - LANGFARM CENTER STYLE INSPIRATION
   Slogan: Kiến tạo không gian xanh
   Font: Be Vietnam Pro
   ========================================================================== */

:root {
  --primary-color: #2e7d32;
  /* Xanh lá đậm tự nhiên đặc trưng Langfarm */
  --primary-dark: #1b5e20;
  --primary-light: #4caf50;
  --primary-surface: #f1f8f3;
  --primary-border: #d4ebd8;
  --accent-color: #e65100;
  /* Cam trầm ấm sang trọng */
  --accent-light2: #fef08a;
  --accent-light: #fff3e0;
  --accent-hover: #bf360c;
  --dark-color: #1a2e1b;
  --text-main: #2b3b2c;
  --text-muted: #5c705d;
  --bg-page: #fbfdfa;
  --bg-green: #eef5e9;
  --white: #ffffff;
  --border-light: #e6ede6;
  --card-shadow: 0 4px 20px rgba(30, 70, 32, 0.06);
  --card-shadow-hover: 0 14px 30px rgba(30, 70, 32, 0.12);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-page);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.bg-white {
  background-color: var(--bg-page);
}

.bg-green {
  background-color: var(--bg-green);
}

/* ==========================================================================
   HEADER / NAVBAR (LANGFARM FULL-WIDTH GREEN THEME)
   ========================================================================== */
.lf-navbar {
  background-color: #2e7d32;
  padding: 12px 0;
  transition: var(--transition);
  z-index: 1040;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  border: none;
}

.lf-navbar.scrolled {
  padding: 10px 0;
  background-color: #2e7d32;
}

.lf-navbar-container {
  position: relative;
  z-index: 10;
}

.navbar-brand-box {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo-img {
  height: 46px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.navbar-brand-box:hover .brand-logo-img {
  transform: scale(1.05);
}

.brand-title-wrap h1 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.2px;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.brand-title-wrap .brand-sub {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fef08a;
  /* Warm subtle golden highlight */
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0;
  opacity: 0.95;
}

.lf-nav-link {
  font-size: 0.93rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92) !important;
  padding: 7px 13px !important;
  border-radius: var(--radius-pill);
  transition: var(--transition);
  white-space: nowrap;
}

.lf-nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.18);
}

.lf-nav-link.active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.25);
  font-weight: 700;
}

/* Nút Đặt ngay kiểu Langfarm */
.btn-lf-booking {
  background-color: var(--accent-color);
  color: var(--white);
  border: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 8px 22px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(242, 92, 5, 0.35);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.btn-lf-booking:hover {
  background-color: var(--accent-hover);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(217, 78, 0, 0.45);
}

/* Viền lá dưới chân Navbar (Treo dưới chân menu, viền trên phủ màu #2e7d32 kín tuyệt đối) */
.lf-navbar-leaf-bottom {
  position: absolute;
  top: calc(100% - 30px);
  left: 0;
  width: 100%;
  height: clamp(34px, 3.4vw, 48px);
  pointer-events: none;
  overflow: visible;
  z-index: 5;
  /* filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)); */
}

.leaf-svg-border {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

@media (max-width: 1199.98px) {
  .navbar-collapse {
    background-color: #246a28;
    padding: 16px 20px;
    border-radius: 12px;
    margin-top: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }

  .lf-nav-link {
    padding: 10px 14px !important;
    border-radius: 8px;
  }

  .btn-lf-booking {
    width: 100%;
    margin-top: 10px;
  }
}

/* ==========================================================================
   BUTTONS (LANGFARM STYLING)
   ========================================================================== */
.btn-lf-primary {
  background-color: var(--primary-color);
  color: var(--white);
  border: 1px solid var(--primary-dark);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 9px 24px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.25);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-lf-primary:hover {
  background-color: var(--primary-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27, 94, 32, 0.35);
}

.btn-lf-accent {
  background-color: var(--accent-color);
  color: var(--white);
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 26px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(230, 81, 0, 0.28);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-lf-accent:hover {
  background-color: var(--accent-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(191, 54, 12, 0.38);
}

.btn-lf-outline {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  background-color: transparent;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-lf-outline:hover {
  background-color: var(--primary-color);
  color: var(--white);
  transform: translateY(-2px);
}

/* ==========================================================================
   FULL-SCREEN HERO BANNER (KIẾN TẠO KHÔNG GIAN XANH - 100VH)
   ========================================================================== */
.lf-hero-fullscreen {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../img/hero.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: 90px;
  padding-bottom: 60px;
  color: #ffffff;
}

/* Overlay gradient - Sang trọng, tự nhiên với tone xanh ngọc & bóng rừng */
.hero-overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(18, 48, 22, 0.05) 0%, rgba(10, 26, 12, 0.1) 65%, rgba(6, 16, 8, 0.15) 100%),
    linear-gradient(180deg, rgba(22, 60, 28, 0.2) 0%, rgba(16, 42, 19, 0.1) 35%, rgba(10, 26, 12, 0.1) 75%, rgba(6, 16, 8, 0.05) 100%);
  z-index: 1;
}

.hero-content-container {
  position: relative;
  z-index: 2;
  padding-top: 10px;
  padding-bottom: 20px;
  animation: lfHeroFadeUp 0.7s ease-out;
}

/* Slogan Badge (Kiến tạo không gian xanh) */
.hero-slogan-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 7px 22px;
  border-radius: 50px;
  font-size: 0.84rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.hero-slogan-badge .badge-icon {
  color: #a3e635;
  font-size: 1rem;
  filter: drop-shadow(0 0 8px rgba(163, 230, 53, 0.6));
}

.hero-slogan-badge .badge-text {
  color: #fef08a;
  font-weight: 800;
}

.hero-slogan-badge .badge-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
}

.hero-slogan-badge .badge-sub {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.76rem;
}

/* Large Typography Headline */
.hero-title-fullscreen {
  margin-bottom: 16px;
  line-height: 1.15;
}

.hero-title-fullscreen .hero-title-main {
  display: block;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  text-shadow: 0 4px 25px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.85);
}

.hero-title-fullscreen .hero-title-slogan {
  display: block;
  font-size: clamp(1.3rem, 2.5vw, 2.1rem);
  font-weight: 700;
  color: #a3e635;
  letter-spacing: 0.5px;
  margin-top: 6px;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.6);
}

/* Description */
.hero-desc-fullscreen {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.65;
  max-width: 780px;
  margin: 0 auto 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hero-desc-fullscreen strong {
  color: #fef08a;
  font-weight: 700;
}

/* Special Promo Ticker */
.hero-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(27, 94, 32, 0.75);
  border: 1px solid rgba(163, 230, 53, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 18px;
  border-radius: 40px;
  margin-bottom: 26px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.hero-promo-badge .promo-tag {
  background: #ff6b00;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-promo-badge .promo-info {
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffffff;
}

/* Prominent CTA Buttons */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 30px;
}

.btn-hero-cta-primary {
  background: linear-gradient(135deg, #ff6b00 0%, #e65100 100%);
  color: #ffffff !important;
  font-size: 1.02rem;
  font-weight: 800;
  padding: 13px 32px;
  border-radius: 50px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 28px rgba(242, 92, 5, 0.45);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: ctaBreathPulse 2.8s infinite ease-in-out;
  cursor: pointer;
  text-decoration: none;
}

.btn-hero-cta-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 36px rgba(242, 92, 5, 0.65);
  background: linear-gradient(135deg, #ff7a1a 0%, #f25c05 100%);
}

.btn-hero-cta-primary .cta-arrow-icon {
  transition: transform 0.3s ease;
}

.btn-hero-cta-primary:hover .cta-arrow-icon {
  transform: translateX(5px);
}

.btn-hero-cta-secondary {
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff !important;
  font-size: 0.98rem;
  font-weight: 700;
  padding: 11px 28px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-hero-cta-secondary:hover {
  background: #ffffff;
  color: #1b5e20 !important;
  border-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Quick Highlight Pills */
.hero-highlights-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hero-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* background: rgba(16, 42, 20, 0.72); */
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 30px;
  color: #f1f5f9;
  font-size: 0.84rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.hero-highlight-pill:hover {
  background: rgba(46, 125, 50, 0.85);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);
  color: #ffffff;
}

/* Floating Scroll Indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  z-index: 3;
}

.hero-scroll-indicator:hover {
  color: #a3e635;
}

.scroll-mouse-icon {
  width: 20px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  position: relative;
  display: flex;
  justify-content: center;
}

.scroll-wheel-dot {
  width: 4px;
  height: 6px;
  background-color: #a3e635;
  border-radius: 2px;
  position: absolute;
  top: 5px;
  animation: scrollWheelSlide 2s infinite ease-in-out;
}

.scroll-arrow-down {
  font-size: 0.78rem;
  animation: scrollFloatBounce 2s infinite ease-in-out;
}

/* Animation Keyframes */
@keyframes lfHeroFadeUp {
  0% {
    opacity: 0.3;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ctaBreathPulse {

  0%,
  100% {
    box-shadow: 0 8px 28px rgba(242, 92, 5, 0.45);
  }

  50% {
    box-shadow: 0 10px 36px rgba(242, 92, 5, 0.75), 0 0 0 6px rgba(242, 92, 5, 0.2);
  }
}

@keyframes scrollWheelSlide {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes scrollFloatBounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(4px);
  }

  60% {
    transform: translateY(2px);
  }
}

/* ==========================================================================
   SECTION "HÀNH TRÌNH BẮT ĐẦU TỪ TRUNG VUONG GARDEN" (5 CARDS)
   ========================================================================== */
.section-heading-lf {
  margin-bottom: 50px;
}

.sub-header-lf {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.title-header-lf {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: -0.5px;
}

/* Container for 5 About cards */
.about-cards-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

.core-feature-card {
  background-color: var(--white);
  border: 1.5px solid #2e7d32;
  border-radius: 20px;
  padding: 34px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.core-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(46, 125, 50, 0.16);
  border-color: #1b5e20;
}

.core-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 18px auto;
  transition: transform 0.3s ease;
}

.core-feature-card:hover .core-icon-box {
  transform: scale(1.1);
}

.core-icon-box.green {
  background-color: var(--primary-surface);
  color: var(--primary-color);
}

.core-icon-box.orange {
  background-color: var(--accent-light);
  color: var(--accent-color);
}

.core-icon-box.blue {
  background-color: #e3f2fd;
  color: #1976d2;
}

.core-icon-box.purple {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.core-icon-box.teal {
  background-color: #e0f2f1;
  color: #00897b;
}

.core-feature-card h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dark-color);
  margin-bottom: 12px;
  text-align: center;
}

.core-feature-card p {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.62;
  margin: 0;
  text-align: center;
}

/* Bố cục trên màn hình lớn (Desktop, iPad): 3 div dòng 1, 2 div dòng 2 căn giữa */
@media (min-width: 992px) {
  .about-cards-wrap .core-feature-card {
    flex: 0 0 calc((100% - 2 * 28px) / 3);
    max-width: calc((100% - 2 * 28px) / 3);
    padding: 34px 26px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .about-cards-wrap {
    gap: 20px;
  }

  .about-cards-wrap .core-feature-card {
    flex: 0 0 calc((100% - 2 * 20px) / 3);
    max-width: calc((100% - 2 * 20px) / 3);
    padding: 28px 18px;
  }

  .core-feature-card h4 {
    font-size: 1.15rem;
  }

  .core-feature-card p {
    font-size: 0.88rem;
    line-height: 1.55;
  }
}

/* Bố cục trên màn hình nhỏ (Điện thoại di động): 1 div 1 dòng */
@media (max-width: 767.98px) {
  .about-cards-wrap {
    gap: 18px;
  }

  .about-cards-wrap .core-feature-card {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 26px 20px;
  }
}

/* ==========================================================================
   TIMELINE 2 NGÀY 1 ĐÊM (C-SHAPED HORIZONTAL TIMELINE)
   ========================================================================== */
.bg-itinerary-section {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8f4 50%, #ffffff 100%);
}

.itinerary-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e8f5e9;
  color: var(--primary-color);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.itinerary-sub-desc {
  color: var(--text-muted);
  max-width: 760px;
  margin: 0 auto 46px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.timeline-c-wrapper {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
}

/* Day Banners */
.timeline-day-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 22px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-light);
}

.timeline-day-banner.day-1 {
  border-left: 5px solid var(--primary-color);
}

.timeline-day-banner.day-2 {
  border-right: 5px solid var(--accent-color);
  flex-direction: row-reverse;
}

.timeline-day-banner .banner-badge {
  font-size: 0.96rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.day-1 .banner-badge {
  color: var(--primary-color);
}

.day-2 .banner-badge {
  color: var(--accent-color);
}

.badge-icon-day {
  font-size: 1.1rem;
}

.day-1 .badge-icon-day {
  color: #f59e0b;
}

.day-2 .badge-icon-day {
  color: var(--accent-color);
}

.banner-flow {
  font-size: 0.84rem;
  font-weight: 600;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Row Grids */
.timeline-row-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}

.timeline-row-grid.row-day-2 {
  direction: rtl;
  /* Flow from right to left */
}

.timeline-row-grid.row-day-2 .tl-card {
  direction: ltr;
  /* Reset card text direction */
}

/* Timeline Cards */
.tl-card {
  background: var(--white);
  border-radius: 16px;
  padding: 20px 18px;
  border: 1px solid rgba(46, 125, 50, 0.12);
  box-shadow: 0 8px 22px rgba(46, 125, 50, 0.05);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.tl-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(46, 125, 50, 0.14);
  border-color: var(--primary-color);
}

.tl-card-day2:hover {
  border-color: var(--accent-color);
  box-shadow: 0 14px 30px rgba(230, 81, 0, 0.14);
}

.tl-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tl-time-pill {
  font-weight: 800;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pill-day1 {
  background: var(--primary-surface);
  color: var(--primary-dark);
}

.pill-day2 {
  background: var(--accent-light);
  color: var(--accent-color);
}

.pill-night {
  background: rgba(255, 255, 255, 0.2);
  color: #fef08a;
}

.tl-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.icon-day1 {
  background: #e8f5e9;
  color: var(--primary-color);
}

.icon-day2 {
  background: #fff3e0;
  color: var(--accent-color);
}

.icon-night {
  background: rgba(255, 255, 255, 0.15);
  color: #fef08a;
}

.tl-card-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--dark-color);
  margin-bottom: 8px;
  line-height: 1.35;
}

.tl-card-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

.tl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.06);
}

.tl-step-index {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.tl-next-indicator {
  font-size: 0.85rem;
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.2s ease;
}

.tl-card:hover .tl-next-indicator {
  color: var(--primary-color);
  transform: translateX(3px);
}

.tl-card-day2:hover .tl-next-indicator {
  color: var(--accent-color);
  transform: translateX(-3px);
}

.tl-turn-down-indicator {
  font-size: 0.88rem;
  color: var(--primary-color);
  animation: pulseDown 2s infinite ease-in-out;
}

@keyframes pulseDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(3px);
  }
}

/* Transition Row (Middle of C-shape) */
.timeline-middle-row {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 16px;
  margin: 20px 0;
  align-items: stretch;
  position: relative;
}

.timeline-center-callout {
  background: linear-gradient(135deg, rgba(232, 245, 233, 0.75) 0%, rgba(255, 248, 225, 0.65) 100%);
  border: 1px dashed rgba(46, 125, 50, 0.28);
  border-radius: 16px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 4px 18px rgba(46, 125, 50, 0.04);
}

.callout-info {
  display: flex;
  align-items: center;
  gap: 18px;
}

.callout-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--primary-color);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.25);
}

.callout-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark-color);
  margin-bottom: 4px;
}

.callout-text {
  font-size: 0.86rem;
  color: #4a5d4b;
  margin: 0;
  line-height: 1.5;
}

.btn-callout-book {
  background-color: var(--accent-color);
  color: var(--white) !important;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(230, 81, 0, 0.25);
  transition: var(--transition);
}

.btn-callout-book:hover {
  background-color: var(--accent-hover);
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(191, 54, 12, 0.35);
}

.tl-transition-card {
  background: linear-gradient(135deg, #1b5e20 0%, #0d3311 100%);
  border-radius: 16px;
  padding: 20px 18px;
  color: #ffffff;
  border: 2px solid rgba(163, 230, 53, 0.4);
  box-shadow: 0 10px 28px rgba(13, 51, 17, 0.25);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: var(--transition);
}

.tl-transition-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(13, 51, 17, 0.35);
  border-color: #a3e635;
}

.tl-transition-card .tl-card-footer {
  border-top-color: rgba(255, 255, 255, 0.15);
}

/* Responsive Media Queries */
@media (max-width: 1199.98px) {
  .timeline-row-grid {
    gap: 12px;
  }

  .timeline-middle-row {
    gap: 12px;
  }

  .tl-card {
    padding: 16px 14px;
  }

  .tl-card-title {
    font-size: 0.92rem;
  }
}

@media (max-width: 991.98px) {
  .timeline-row-grid {
    grid-template-columns: 1fr;
  }

  .timeline-row-grid.row-day-2 {
    direction: ltr;
    /* Keeps mobile chronological */
  }

  .timeline-middle-row {
    grid-template-columns: 1fr;
  }

  .timeline-center-callout {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .callout-info {
    flex-direction: column;
  }
}

/* ==========================================================================
   SERVICES & AMENITIES - 8 TRÒ CHƠI TRẢI NGHIỆM (SLIDE TRƯỢT NGANG 4 DIV)
   ========================================================================== */
.bg-services-section {
  background: linear-gradient(180deg, #fbfcfb 0%, #f4f8f4 50%, #fbfcfb 100%);
  position: relative;
  overflow: hidden;
}

.services-anchor-point {
  position: relative;
  top: -80px;
}

.services-slider-container {
  position: relative;
  width: 100%;
}

.services-slider-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 12px 4px 24px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.services-slider-track::-webkit-scrollbar {
  display: none;
}

/* Mặc định hiển thị 4 dịch vụ trên màn hình lớn (Desktop >= 1100px) */
.services-slide-item {
  flex: 0 0 calc((100% - 3 * 24px) / 4);
  max-width: calc((100% - 3 * 24px) / 4);
  min-width: 250px;
  scroll-snap-align: start;
  display: flex;
}

/* Tablet & iPad (768px - 1099.98px): hiển thị 2 dịch vụ */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .services-slider-track {
    gap: 20px;
  }

  .services-slide-item {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}

/* Mobile (< 768px): hiển thị 1 dịch vụ trượt ngang */
@media (max-width: 767.98px) {
  .services-slider-track {
    gap: 16px;
    padding-bottom: 16px;
  }

  .services-slide-item {
    flex: 0 0 90%;
    max-width: 90%;
    min-width: unset;
  }
}

@media (max-width: 480px) {
  .services-slide-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Card dịch vụ trò chơi */
.game-service-card {
  background-color: var(--white);
  border: 1.5px solid rgba(46, 125, 50, 0.22);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.game-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(46, 125, 50, 0.16);
  border-color: var(--primary-color);
}

.game-card-img-wrap {
  position: relative;
  width: 100%;
  height: 205px;
  overflow: hidden;
  background-color: #e8f5e9;
}

.game-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.game-service-card:hover .game-card-img-wrap img {
  transform: scale(1.08);
}

.game-badge-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.game-badge-tag.hot {
  background-color: rgba(230, 81, 0, 0.92);
  color: #ffffff;
}

.game-badge-tag.adventure {
  background-color: rgba(46, 125, 50, 0.92);
  color: #ffffff;
}

.game-badge-tag.fun {
  background-color: rgba(142, 36, 170, 0.92);
  color: #ffffff;
}

.game-badge-tag.water {
  background-color: rgba(2, 119, 189, 0.92);
  color: #ffffff;
}

.game-badge-tag.nature {
  background-color: rgba(109, 76, 65, 0.92);
  color: #ffffff;
}

.game-badge-tag.romance {
  background-color: rgba(216, 27, 96, 0.92);
  color: #ffffff;
}

.game-card-body {
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.game-card-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--dark-color);
  margin-bottom: 8px;
  transition: color 0.2s ease;
}

.game-service-card:hover .game-card-title {
  color: var(--primary-color);
}

.game-card-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.1em;
}

/* Khối hiển thị Giá vé */
.game-card-price-box {
  background: linear-gradient(135deg, #f4f9f4 0%, #eef6ee 100%);
  border: 1px solid #d4ebd8;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 16px;
  margin-top: auto;
}

.game-card-price-box .price-header {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary-color);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.game-card-price-box .price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
  margin-bottom: 3px;
}

.game-card-price-box .price-row:last-child {
  margin-bottom: 0;
}

.game-card-price-box .price-type {
  color: #4a5568;
  font-weight: 600;
}

.game-card-price-box .price-value {
  font-weight: 800;
  color: #d94e00;
  font-size: 0.95rem;
}

.game-card-price-box .price-value small {
  font-size: 0.74rem;
  font-weight: 500;
  color: #718096;
}

.game-card-price-box .price-row.main-rate .price-value {
  font-size: 1.05rem;
}

.game-card-price-box .price-note {
  font-size: 0.75rem;
  color: #718096;
  margin-top: 4px;
  font-style: italic;
}

.btn-game-book {
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition: all 0.3s ease;
}

.btn-game-book:hover {
  background-color: #1b5e20;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.3);
}

/* Thanh điều khiển Slide phía dưới 4 dịch vụ (Mũi tên trái phải & Dots) */
.services-slider-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.services-nav-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--white);
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.12);
  transition: all 0.25s ease;
}

.services-nav-arrow:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(46, 125, 50, 0.28);
}

.services-nav-arrow:active {
  transform: scale(0.96);
}

.services-nav-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.services-nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #c8e6c9;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.services-nav-dot.active {
  width: 28px;
  border-radius: 10px;
  background-color: var(--primary-color);
}

/* ==========================================================================
   BẢN ĐỒ / KHÁM PHÁ (INTERACTIVE MAP SECTION)
   ========================================================================== */
.map-full-wrapper {
  position: relative;
  width: 100%;
}

.map-full-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  border: 15px solid var(--border-light);
  position: relative;
  transition: all 0.35s ease;
}

.map-full-card:hover {
  box-shadow: 0 18px 45px rgba(46, 125, 50, 0.16);
  border-color: rgba(46, 125, 50, 0.35);
}

.map-full-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.map-full-card:hover .map-full-img {
  transform: scale(1.012);
}

.map-zoom-overlay {
  position: absolute;
  bottom: 18px;
  right: 18px;
  pointer-events: none;
}

.map-zoom-overlay .badge-zoom {
  background: rgba(27, 94, 32, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

@media (max-width: 767.98px) {
  .map-zoom-overlay {
    bottom: 10px;
    right: 10px;
  }

  .map-zoom-overlay .badge-zoom {
    font-size: 0.76rem;
    padding: 6px 12px;
  }
}

/* ==========================================================================
   6. KHU NGHỈ DƯỠNG & DỊCH VỤ LƯU TRÚ (RESORT ACCOMMODATION - BUNGALOW & CỘNG ĐỒNG)
   ========================================================================== */
.bg-resort-section {
  background: linear-gradient(180deg, #fbfcfb 0%, #f4f8f4 50%, #fbfcfb 100%);
  position: relative;
}

.resort-anchor-policy {
  position: relative;
  top: -90px;
  visibility: hidden;
}

.resort-card {
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
  position: relative;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.resort-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(46, 125, 50, 0.13);
  border-color: rgba(46, 125, 50, 0.35);
}

.resort-card.highlighted {
  border: 2px solid var(--primary-color);
  box-shadow: 0 12px 32px rgba(46, 125, 50, 0.15);
}

.resort-card-thumb {
  height: 225px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
  background-color: #f0f4f0;
}

.resort-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.resort-card:hover .resort-card-thumb img {
  transform: scale(1.06);
}

.resort-thumb-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.resort-card-header .resort-room-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dark-color);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

/* Price Box: Overnight Big, Noon Small */
.resort-price-box {
  background: linear-gradient(135deg, #f3f8f2 0%, #edf5eb 100%);
  border: 1px solid rgba(46, 125, 50, 0.16);
  border-radius: var(--radius-md);
  padding: 13px 12px;
  text-align: center;
}

.resort-price-overnight .price-overnight-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary-color);
  margin-bottom: 2px;
}

.resort-price-overnight .price-overnight-value {
  color: var(--primary-dark);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.resort-price-overnight .price-overnight-value .num {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.resort-price-overnight .price-overnight-value .curr {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.resort-price-overnight .price-overnight-value .unit {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}

.resort-price-divider {
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(46, 125, 50, 0.25) 0, rgba(46, 125, 50, 0.25) 4px, transparent 4px, transparent 8px);
  margin: 9px 0;
}

.resort-price-noon {
  background-color: var(--white);
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(46, 125, 50, 0.08);
}

.resort-price-noon .noon-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5563;
}

.resort-price-noon .noon-amount {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1b5e20;
}

.resort-price-noon .noon-schedule-note {
  font-size: 0.74rem;
  color: #6b7280;
  margin-top: 2px;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.resort-features-list li {
  line-height: 1.45;
  font-size: 0.86rem;
}

/* Pricing legacy / shared classes */
.pricing-lf-card {
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
}

.pricing-lf-card.highlighted {
  border: 2px solid var(--primary-color);
  box-shadow: 0 12px 30px rgba(46, 125, 50, 0.12);
}

.pricing-badge-corner {
  position: absolute;
  top: -12px;
  right: 20px;
  background-color: var(--accent-color);
  color: var(--white);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pricing-plan-header h4 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dark-color);
  margin-bottom: 6px;
}

.pricing-price-wrap {
  background-color: var(--primary-surface);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 18px 0;
}

.pricing-big-num {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--primary-dark);
  line-height: 1;
}

.pricing-sub-rates {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.pricing-policy-box {
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--card-shadow);
}

.pricing-policy-box h5 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark-color);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.policy-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: #37474f;
}

.policy-item i {
  color: var(--primary-color);
  margin-top: 3px;
  flex-shrink: 0;
}

.tour-contact-card {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 1px solid #ffd59e;
  border-radius: var(--radius-lg);
  padding: 28px;
  color: #bf360c;
}

/* ==========================================================================
   FAQS (ACCORDION - LANGFARM STYLE)
   ========================================================================== */
.lf-accordion .accordion-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md) !important;
  margin-bottom: 12px;
  overflow: hidden;
  background-color: var(--white);
}

.lf-accordion .accordion-button {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--dark-color);
  padding: 18px 24px;
  background-color: var(--white);
  box-shadow: none !important;
}

.lf-accordion .accordion-button:not(.collapsed) {
  color: var(--primary-dark);
  background-color: var(--primary-surface);
}

.lf-accordion .accordion-button::after {
  filter: hue-rotate(90deg);
}

.lf-accordion .accordion-body {
  padding: 18px 24px;
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ==========================================================================
   READY TO EXPLORE (CTA BANNER - LANGFARM STYLE)
   ========================================================================== */
.ready-explore-section {
  background: linear-gradient(135deg, rgba(27, 94, 32, 0.88) 0%, rgba(46, 125, 50, 0.85) 100%),
    url('../img/web/tvg-overview.jpg') center/cover no-repeat;
  border-radius: 28px;
  padding: 70px 40px;
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(27, 94, 32, 0.25);
}

.ready-explore-section h2 {
  font-size: 2.6rem;
  font-weight: 900;
  margin-bottom: 16px;
}

.ready-explore-section p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 650px;
  margin: 0 auto 30px;
}

/* ==========================================================================
   FOOTER (LANGFARM CENTER STYLE)
   ========================================================================== */
.lf-footer {
  background-color: #142416;
  color: #a5b9a7;
  padding-top: 70px;
  padding-bottom: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.lf-footer h6 {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 20px;
}

.footer-lf-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-lf-links li {
  margin-bottom: 10px;
}

.footer-lf-links a {
  color: #a5b9a7;
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition);
}

.footer-lf-links a:hover {
  color: var(--white);
  padding-left: 4px;
}

.footer-corp-meta {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 25px;
  margin-top: 50px;
  font-size: 0.85rem;
  color: #7b8e7d;
}

/* ==========================================================================
   FLOATING ACTION BUTTONS
   ========================================================================== */
.floating-contact-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1050;
}

.btn-float-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.35rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: var(--transition);
  text-decoration: none;
}

.btn-float-circle:hover {
  transform: scale(1.1);
  color: var(--white);
}

.btn-float-phone {
  background-color: var(--primary-color);
  animation: lf-pulse 2s infinite;
}

.btn-float-zalo {
  background-color: #0284c7;
}

.btn-float-fb {
  background-color: #1877f2;
}

.btn-float-top {
  background-color: #455a64;
  display: none;
}

@keyframes lf-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(76, 175, 80, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

/* ==========================================================================
   VIDEO SHOWCASE IN GALLERY SECTION (KHUNG VIỀN THIÊN NHIÊN HOANG DÃ)
   ========================================================================== */
.video-showcase-wrapper {
  position: relative;
  width: 100%;
}

.video-frame-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 577;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.1));
}

.video-frame-media {
  position: absolute;
  top: 24.2%;
  left: 13.2%;
  width: 73.2%;
  height: 56.8%;
  background-color: #0b1d12;
  border-radius: 4px;
  overflow: hidden;
  z-index: 1;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5);
}

.video-frame-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-frame-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.video-play-trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.video-play-trigger.playing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-play-pulse-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color) 0%, #e65100 100%);
  color: var(--white);
  font-size: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.7), 0 8px 30px rgba(0, 0, 0, 0.35);
  animation: video-pulse-anim 2s infinite;
  transition: transform 0.3s ease;
}

.video-play-trigger:hover .video-play-pulse-btn {
  transform: scale(1.1);
}

@keyframes video-pulse-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.7);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(230, 81, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(230, 81, 0, 0);
  }
}

.video-frame-toolbar {
  position: relative;
  z-index: 4;
}

@media (max-width: 767.98px) {
  .video-play-pulse-btn {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   PHOTO GALLERY SHOWCASE STYLES
   ========================================================================== */
.gallery-item-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 260px;
  background-color: #0f172a;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}

.gallery-item-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gallery-item-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
}

.gallery-item-card:hover img {
  transform: scale(1.08);
}

.gallery-item-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.88) 100%);
  color: var(--white);
  transition: var(--transition);
}

.gallery-item-caption h6 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 2px;
  color: var(--white);
}

.gallery-item-caption small {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.pricing-room-thumb {
  height: 140px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
}

.pricing-room-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 991.98px) {
  .lf-hero-fullscreen {
    padding-top: 110px;
    padding-bottom: 70px;
    min-height: 100vh;
  }

  .hero-promo-badge {
    flex-direction: column;
    text-align: center;
    border-radius: 20px;
    padding: 10px 16px;
    gap: 8px;
  }

  .title-header-lf {
    font-size: 1.9rem;
  }

  .ready-explore-section {
    padding: 40px 20px;
  }

  .ready-explore-section h2 {
    font-size: 2rem;
  }
}

@media (max-width: 575.98px) {
  .lf-hero-fullscreen {
    padding-top: 100px;
    padding-bottom: 80px;
  }

  .hero-slogan-badge {
    font-size: 0.74rem;
    padding: 6px 14px;
    letter-spacing: 1px;
    gap: 6px;
  }

  .hero-slogan-badge .badge-sub,
  .hero-slogan-badge .badge-dot {
    display: none;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .btn-hero-cta-primary,
  .btn-hero-cta-secondary {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 0.98rem;
  }

  .hero-highlights-row {
    gap: 8px;
  }

  .hero-highlight-pill {
    font-size: 0.78rem;
    padding: 6px 12px;
  }

  .brand-title-wrap h1 {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   HOẠT ĐỘNG & SỰ KIỆN (TEAM BUILDING & GIÁO DỤC TRẢI NGHIỆM)
   ========================================================================== */
.event-section {
  background-color: #ffffff;
  position: relative;
}

.event-lead-desc {
  font-size: 0.94rem;
  line-height: 1.55;
  color: #334155;
  font-weight: 400;
  max-width: 100%;
}

.event-activities-list {
  display: flex;
  flex-direction: column;
}

.event-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1.5px dotted #cbd5e1;
  transition: transform 0.25s ease;
}

.event-activity-item:hover {
  transform: translateX(4px);
}

.event-item-icon {
  font-size: 1.3rem;
  color: #723b8c;
  width: 26px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 3px;
}

.event-item-content {
  flex: 1;
}

.event-item-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
}

.event-item-desc {
  font-size: 0.93rem;
  color: #64748b;
  margin-bottom: 0;
  line-height: 1.45;
}

/* Bento Grid */
.event-bento-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-bento-card {
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  cursor: pointer;
}

.event-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

.event-bento-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.event-bento-card:hover .event-bento-img {
  transform: scale(1.06);
}

.event-bento-card-top {
  height: 240px;
  width: 100%;
}

.event-bento-row {
  display: flex;
  gap: 16px;
}

.event-bento-card-bottom {
  flex: 1;
  height: 200px;
}

@media (max-width: 991.98px) {
  .event-bento-card-top {
    height: 220px;
  }

  .event-bento-card-bottom {
    height: 180px;
  }
}

@media (max-width: 767.98px) {
  .event-lead-desc {
    font-size: 0.98rem;
  }

  .event-bento-card-top {
    height: 180px;
  }

  .event-bento-row {
    flex-direction: column;
    gap: 14px;
  }

  .event-bento-card-bottom {
    height: 150px;
  }

  .event-card-center-icon {
    font-size: 2.3rem;
  }
}

/* ==========================================================================
   INTERACTIVE RESORT MAP (LANGFARM CENTER STYLE)
   ========================================================================== */
.map-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.map-filter-btn {
  background: #ffffff;
  border: 1.5px solid #d4ebd8;
  color: #2b3b2c;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.map-filter-btn:hover {
  background: #f1f8f3;
  border-color: #2e7d32;
  color: #1b5e20;
  transform: translateY(-2px);
}

.map-filter-btn.active {
  background: #2e7d32;
  color: #ffffff;
  border-color: #2e7d32;
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.3);
}

.map-interactive-wrapper {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(27, 94, 32, 0.12);
  background-color: #1a3a1e;
  border: 3px solid #eef5e9;
}

.map-viewport {
  position: relative;
  width: 100%;
  line-height: 0;
  user-select: none;
}

.map-base-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hotspot Pins */
.map-pins-container {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.map-hotspot-pin {
  position: absolute;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #e65100;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.38);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.25s ease, box-shadow 0.25s ease;
  padding: 0;
  outline: none;
}

.map-hotspot-pin i {
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}

/* Category-specific Pin Colors */
.map-hotspot-pin[data-cat="Vui chơi"] { background: #ea580c; }
.map-hotspot-pin[data-cat="Check-in"] { background: #0284c7; }
.map-hotspot-pin[data-cat="Khám phá"] { background: #16a34a; }
.map-hotspot-pin[data-cat="Sự kiện"] { background: #d97706; }
.map-hotspot-pin[data-cat="Ẩm thực"] { background: #dc2626; }
.map-hotspot-pin[data-cat="Nghỉ dưỡng"] { background: #7c3aed; }
.map-hotspot-pin[data-cat="Dịch vụ"] { background: #475569; }
.map-hotspot-pin[data-cat="Trải nghiệm"] { background: #059669; }

.map-hotspot-pin:hover {
  transform: translate(-50%, -50%) scale(1.3);
  background: #2e7d32 !important;
  border-color: #ffffff;
  box-shadow: 0 6px 18px rgba(46, 125, 50, 0.6);
  z-index: 25;
}

.map-hotspot-pin.active {
  transform: translate(-50%, -50%) scale(1.35);
  background: #2e7d32 !important;
  border-color: #fef08a !important;
  box-shadow: 0 0 0 5px rgba(254, 240, 138, 0.7), 0 8px 22px rgba(0, 0, 0, 0.5) !important;
  z-index: 30;
}

.map-hotspot-pin .pin-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  animation: pinPulseRipple 2s infinite ease-out;
  pointer-events: none;
}

.map-hotspot-pin.active .pin-pulse-ring {
  border-color: #fef08a;
  animation-duration: 1.4s;
}

@keyframes pinPulseRipple {
  0% {
    transform: scale(0.9);
    opacity: 0.95;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Langfarm-Style Detail Popup Card */
.map-spot-popup {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 350px;
  max-width: calc(100% - 48px);
  z-index: 40;
  animation: mapPopupSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mapPopupSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.map-popup-inner {
  background: #fdfcf9;
  border: 2px solid #e2ebd8;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  position: relative;
}

.map-popup-inner::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(46, 125, 50, 0.2);
  border-radius: 15px;
  pointer-events: none;
}

.map-popup-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  border: none;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.map-popup-close-btn:hover {
  background: #d32f2f;
  transform: rotate(90deg);
}

.map-popup-media {
  position: relative;
  width: 100%;
  height: 190px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  background-color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.map-popup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.map-popup-media:hover .map-popup-img {
  transform: scale(1.05);
}

.map-popup-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #e65100;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  z-index: 2;
}

.map-popup-body {
  padding: 2px 4px;
  position: relative;
  z-index: 2;
}

.map-popup-num-badge {
  font-size: 0.82rem;
  font-weight: 800;
  color: #e65100;
  background: #fff3e0;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}

.map-popup-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1b5e20;
  margin-bottom: 8px;
  line-height: 1.35;
}

.map-popup-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #475569;
  margin-bottom: 14px;
}

.btn-map-action {
  background-color: #2e7d32;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  border: none;
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-map-action:hover {
  background-color: #1b5e20;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3);
}

/* Mobile responsive popup */
@media (max-width: 991.98px) {
  .map-hotspot-pin {
    width: 26px;
    height: 26px;
    font-size: 10px;
    border-width: 1.5px;
  }

  .map-spot-popup {
    position: fixed;
    top: auto;
    bottom: 20px;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: 440px;
    margin: 0 auto;
    z-index: 1060;
  }

  .map-popup-inner {
    padding: 12px;
  }

  .map-popup-media {
    height: 150px;
    margin-bottom: 10px;
  }

  .map-popup-title {
    font-size: 1.1rem;
    margin-bottom: 6px;
  }

  .map-popup-desc {
    font-size: 0.85rem;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .btn-map-action {
    padding: 6px 14px;
    font-size: 0.85rem;
  }
}