/* ============================================
   UNIVERSAL WARM THEME + LIQUID GLASS
   v2 — Fixes: beige tones, glass visibility,
   transitions, contrast, floating multi-chat
   ============================================ */

/* --- Body: warm beige gradient --- */
body {
  background: linear-gradient(180deg, #F5EDE4 0%, #EDE5DB 100%);
  background-attachment: fixed;
}

/* --- Scroll indicator fix --- */
.scroll-indicator {
  position: relative;
  margin-top: 28px;
  z-index: 1;
}

/* ============ LIQUID GLASS ============ */
.glass {
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  background: var(--glass-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--glass-border, rgba(241,209,169,0.12));
  border-radius: 20px;
  box-shadow: var(--glass-shadow, 0 4px 24px rgba(0,0,0,0.15));
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.glass:hover {
  border-color: var(--glass-hover-border, rgba(241,209,169,0.25));
  box-shadow: var(--glass-hover-shadow, 0 8px 32px rgba(0,0,0,0.2));
  transform: translateY(-2px);
}

/* ============ WARM SECTION VARIABLE OVERRIDES ============ */

.pillars, .values, .pathway, .featured-programs,
.social-proof, .awards-strip, .case-studies,
.prog-filters, .prog-grid-section, .process-section, .packages-section,
.solutions-grid, .ai-teaser,
.dest-filters, .regions, .dest-detail,
.story-section, .make-possible-section, .mvv-section,
.stats-section, .leadership-section, .offices-section, .why-section,
.featured-section, .news-filters, .news-grid-section, .newsletter-section,
.prog-detail-body, .related-section,
.article-body,
.faq-body {
  --charcoal-dark: #F5EDE4;
  --charcoal-base: #EDE5DB;
  --charcoal-light: #DDD5CB;
  --charcoal-lighter: #CEC6BC;
  --white-pure: #1A1A1A;
  --white-soft: #2D2D2D;
  --text-muted: #6B6560;
  --gold-primary: #7A3F1E;
  --gold-light: #934D26;
  --gold-dim: rgba(122, 63, 30, 0.08);

  /* Liquid glass — strong effect */
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 4px 30px rgba(122,63,30,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  --glass-hover-border: rgba(255, 255, 255, 0.8);
  --glass-hover-shadow: 0 8px 40px rgba(122,63,30,0.1), 0 1px 0 rgba(255,255,255,0.9) inset;

  color: #2D2D2D;
}

/* ============ ALTERNATING BACKGROUNDS ============ */

/* Warm cream */
.pillars, .pathway, .featured-programs, .case-studies,
.prog-filters, .prog-grid-section, .packages-section,
.solutions-grid,
.dest-filters, .dest-detail,
.story-section, .mvv-section, .leadership-section,
.featured-section, .news-grid-section,
.prog-detail-body, .article-body, .faq-body {
  background: #F5EDE4;
}

/* Deeper beige */
.values, .social-proof, .awards-strip,
.process-section,
.ai-teaser,
.regions,
.make-possible-section, .stats-section, .offices-section, .why-section,
.news-filters, .newsletter-section,
.related-section {
  background: #EDE5DB;
}

/* Global map: dark island */
.global-map {
  --white-pure: #1A1A1A;
  --text-muted: #6B6560;
  --gold-primary: #7A3F1E;
  background: #EDE5DB;
  color: #2D2D2D;
}
.global-map .map-container {
  background: #1C1F27;
  border-radius: 20px;
  overflow: hidden;
}

/* ============ SECTION TITLES ============ */
.section-title { color: #1A1A1A; }
.section-title em { color: #7A3F1E; }
.section-subtitle { color: #6B6560; }

/* ============ TRANSITIONS — WIDE & SMOOTH ============ */

/* Hero → cream blend (use ::before to avoid conflict with ::after aurora in styles.css) */
.hero::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  top: auto !important;
  height: 80px !important;
  background: linear-gradient(to bottom, rgba(28,31,39,0) 0%, #F5EDE4 100%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
.prog-hero::after,
.solutions-hero::after,
.dest-hero::after,
.about-hero::after,
.news-hero::after,
.faq-hero::after,
.article-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(28,31,39,0) 0%, #F5EDE4 100%);
  z-index: 2;
  pointer-events: none;
}

/* Cream → dark CTA (subtle) */
.vip-cta, .prog-cta, .dest-cta, .about-cta { position: relative; }
.vip-cta::before,
.prog-cta::before,
.dest-cta::before,
.about-cta::before {
  content: '';
  position: absolute;
  top: -60px; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent 0%, rgba(28,31,39,0.8) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Dark CTA → footer (smooth, no gap) */
.footer { margin-top: 0; }

/* ============ MAP FILTERS ============ */
.global-map .map-filter,
.dest-filters .map-filter {
  color: #2D2D2D;
  border-color: rgba(122,63,30,0.2);
  background: rgba(255,255,255,0.5);
}
.global-map .map-filter.active,
.dest-filters .map-filter.active {
  color: #FFF;
  background: #7A3F1E;
  border-color: #7A3F1E;
}

/* ============ BUTTONS ON WARM BG ============ */
.pillars .btn-gold, .pathway .btn-gold, .featured-programs .btn-gold,
.case-studies .btn-gold, .social-proof .btn-gold,
.prog-grid-section .btn-gold, .packages-section .btn-gold,
.solutions-grid .btn-gold, .dest-detail .btn-gold,
.faq-body .btn-gold, .prog-detail-body .btn-gold,
.fp-footer .btn-gold, .fp-footer .btn-ghost {
  background: linear-gradient(135deg, #7A3F1E, #934D26);
  color: #FFFFFF !important;
}
.pillars .btn-ghost, .pathway .btn-ghost, .featured-programs .btn-ghost,
.faq-body .btn-ghost, .prog-detail-body .btn-ghost {
  color: #7A3F1E;
  border-color: rgba(122,63,30,0.25);
  background: transparent;
}

/* ============ COMPONENT OVERRIDES ============ */

/* Awards */
.awards-strip { border-color: rgba(122,63,30,0.08); }
.award-item svg { stroke: #7A3F1E; }
.award-divider { background: rgba(122,63,30,0.12); }

/* Case studies */
.cs-avatar { background: rgba(122,63,30,0.06); border-color: rgba(122,63,30,0.15); color: #7A3F1E; }
.cs-quote { border-left-color: rgba(122,63,30,0.15); }
.cs-outcome svg { stroke: #7A3F1E; }

/* Pillar decorations — subtle */
.pillar-card .card-illus svg { stroke: rgba(122,63,30,0.1); }
.pillar-card .glow-line { background: linear-gradient(90deg, rgba(122,63,30,0.15), transparent); height: 1px; }
.pillars-connections line { stroke: rgba(122,63,30,0.08) !important; }

/* Value card */
.value-card .value-number { color: #7A3F1E; }

/* Pathway options — glass style */
.pathway-option .icon svg { stroke: #7A3F1E; }
.pathway-option {
  background: rgba(255,255,255,0.5) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(122,63,30,0.04), inset 0 1px 0 rgba(255,255,255,0.7);
  color: #2D2D2D !important;
}
.pathway-option:hover {
  border-color: rgba(122,63,30,0.2) !important;
  background: rgba(255,255,255,0.65) !important;
}

/* Featured programs */
.fp-card .fp-badge { background: #7A3F1E; color: #FFF; }
.fp-card.fp-featured { border-color: #934D26; }

/* Stats */
.social-proof .stat-number, .social-proof .stat-number .suffix,
.stats-section .stat-number, .stats-section .stat-number .suffix {
  color: #7A3F1E;
}
.testimonial-author { color: #7A3F1E; }

/* Program detail */
.prog-detail-body .quick-info-card { --glass-bg: rgba(255,255,255,0.6); }

/* FAQ */
.faq-body .faq-item {
  border-color: rgba(122,63,30,0.06);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(16px);
}
.faq-body .faq-q { color: #1A1A1A; }
.faq-body .faq-q-icon, .faq-body .faq-q-num { color: #7A3F1E; }
.faq-body .faq-a { color: #4A4540; }

/* Breadcrumb */
.breadcrumb { background: transparent; }

/* ============ FLOATING MULTI-CHAT ============ */
.zalo-float { display: none !important; }

.float-chat {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}
.float-chat.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Toggle button */
.float-chat-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7A3F1E, #934D26);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(122,63,30,0.4);
  transition: all 0.3s;
  position: relative;
}
.float-chat-btn:hover {
  box-shadow: 0 6px 28px rgba(122,63,30,0.5);
  transform: scale(1.05);
}
.float-chat-btn .close-icon {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg);
  transition: all 0.3s;
}
.float-chat-btn .chat-icon {
  transition: all 0.3s;
}
.float-chat.open .float-chat-btn .chat-icon {
  opacity: 0;
  transform: rotate(90deg);
}
.float-chat.open .float-chat-btn .close-icon {
  opacity: 1;
  transform: rotate(0deg);
}

/* Options panel */
.float-chat-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s;
}
.float-chat.open .float-chat-options {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Individual option buttons */
.chat-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 14px;
  background: linear-gradient(135deg, #7A3F1E, #934D26);
  color: #FFF;
  text-decoration: none;
  border-radius: 28px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(122,63,30,0.3);
  transition: all 0.2s;
}
.chat-option:hover {
  transform: translateX(-4px);
  box-shadow: 0 6px 24px rgba(122,63,30,0.4);
}
.chat-option span { font-family: inherit; }

/* ============ NEWS PAGE FIXES ============ */
/* News cards on warm bg */
.news-grid-section .news-card,
.featured-section .featured-card {
  --glass-bg: rgba(255,255,255,0.5);
  --glass-border: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(122,63,30,0.04);
}
.news-grid-section .news-card h3,
.featured-section .featured-card h3,
.featured-section h3 {
  color: #1A1A1A;
}
.news-grid-section .news-card p,
.featured-section .featured-card p,
.featured-section p {
  color: #4A4540;
}

/* News tags — brand color, not yellow */
.news-grid-section .news-tag,
.featured-section .news-tag,
.news-tag {
  color: #7A3F1E !important;
  border-color: rgba(122,63,30,0.2) !important;
  background: rgba(122,63,30,0.06) !important;
}

/* News card image placeholder — beige instead of empty gray */
.news-grid-section .news-thumb,
.news-grid-section .news-image,
.news-grid-section .news-card img,
.news-card-img {
  background: linear-gradient(135deg, #EDE5DB, #DDD5CB) !important;
  min-height: 180px;
  border-radius: 12px 12px 0 0;
}

/* Featured news */
.featured-section a { color: #7A3F1E; }
.featured-section .featured-card { overflow: hidden; }
.featured-section .featured-meta,
.featured-section .news-meta {
  color: #6B6560;
}
.featured-section .featured-link,
.featured-section a[class*="link"] {
  color: #7A3F1E;
}

/* ============ PROGRAMS PAGE FIXES ============ */
/* Program cards text */
.prog-grid-section .prog-card h3 { color: #1A1A1A; }
.prog-grid-section .prog-card p { color: #4A4540; }
.prog-grid-section .prog-pill {
  color: #7A3F1E;
  border-color: rgba(122,63,30,0.2);
  background: rgba(122,63,30,0.06);
}
.prog-grid-section .prog-card-link { color: #7A3F1E; }

/* Package cards */
.packages-section .package-card h3 { color: #1A1A1A; }
.packages-section .package-tagline { color: #6B6560; }
.packages-section .package-features li { color: #4A4540; }
.packages-section .package-badge { background: #7A3F1E; color: #FFF; }
.packages-section .package-card.featured { border-color: #934D26; }

/* Process steps */
.process-section .step-number {
  background: rgba(122,63,30,0.08);
  border-color: rgba(122,63,30,0.2);
  color: #7A3F1E;
}
.process-section h3 { color: #1A1A1A; }
.process-section p { color: #4A4540; }

/* ============ DESTINATIONS PAGE ============ */
.dest-filters h2 { color: #1A1A1A; }
.regions h2 { color: #1A1A1A; }
.dest-detail h2, .dest-detail h3 { color: #1A1A1A; }
.dest-detail p { color: #4A4540; }

/* Country hero cards — ensure text readable on bg image */
.dest-detail .country-hero,
.dest-detail [class*="country"],
.dest-detail [style*="background"] {
  position: relative;
}
.dest-detail .country-hero h2,
.dest-detail .country-hero h3,
.dest-detail .country-hero span,
.dest-detail .country-hero p {
  color: #FFFFFF !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Region cards on warm bg */
.regions .region-card {
  --glass-bg: rgba(255,255,255,0.5);
  --glass-border: rgba(255,255,255,0.5);
}
.regions .region-card h3 { color: #1A1A1A; }
.regions .region-card p { color: #4A4540; }
.regions .region-link { color: #7A3F1E; }

/* Tab buttons on warm bg */
.dest-tab {
  color: #2D2D2D;
  border-color: rgba(122,63,30,0.15);
  background: rgba(255,255,255,0.5);
}
.dest-tab.active {
  background: #7A3F1E;
  color: #FFF;
  border-color: #7A3F1E;
}

/* ============ ABOUT PAGE ============ */

/* Awards/stats cards — icons more visible */
.stats-section .stat-card svg,
.stats-section .stat-card .stat-icon svg {
  stroke: #7A3F1E !important;
  opacity: 1 !important;
}
.stats-section .stat-card .stat-label {
  color: #4A4540 !important;
}
.stats-section .glass {
  --glass-bg: rgba(255,255,255,0.6);
  --glass-border: rgba(122,63,30,0.08);
  box-shadow: 0 4px 20px rgba(122,63,30,0.06);
}

.story-section h2, .make-possible-section h2,
.mvv-section h2, .leadership-section h2,
.offices-section h2, .why-section h2 {
  color: #1A1A1A;
}
.story-section p, .make-possible-section p,
.mvv-section p, .offices-section p, .why-section p {
  color: #4A4540;
}

/* Leadership cards */
.leadership-section .leader-card {
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.6);
}
.leadership-section .leader-card h3 { color: #1A1A1A; }
.leadership-section .leader-card p { color: #4A4540; }

/* ============ SOLUTIONS PAGE ============ */
.solutions-grid h2, .ai-teaser h2 { color: #1A1A1A; }
.solutions-grid p, .ai-teaser p { color: #4A4540; }

/* ============ NEWSLETTER SECTION ============ */
.newsletter-section h2 { color: #1A1A1A; }
.newsletter-section p { color: #4A4540; }
.newsletter-section input {
  background: rgba(255,255,255,0.6);
  border-color: rgba(122,63,30,0.12);
  color: #2D2D2D;
}