/* ====================================================================
   AGENDA STUDIO LITE - TRAVEL TOUR CLOUD THEME (PREMIUM AESTHETICS v2)
   Curated Luxury Palette, Gemini Glow Animation, Senior-friendly, Line-art SVGs
   ==================================================================== */

:root {
  --font-main: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --bg-dark: #080d1a;
  --bg-card: rgba(14, 22, 42, 0.78);
  --bg-card-hover: rgba(22, 34, 64, 0.9);
  --bg-card-active: rgba(26, 40, 78, 0.95);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-glass-bright: rgba(255, 255, 255, 0.18);
  
  /* Brand Accents - Vieteam & Events (Purple & Silver) - Phần 5 & 6 */
  --accent-primary: #8b5cf6;
  --accent-secondary: #7c3aed;
  --accent-glow: rgba(139, 92, 246, 0.45);
  --accent-silver: #cbd5e1;
  --accent-silver-glow: rgba(203, 213, 225, 0.25);
  --accent-gradient: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  --silver-gradient: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);

  /* Fallback & Compatibility */
  --gold-primary: var(--accent-primary);
  --gold-glow: var(--accent-glow);
  --cyan-neon: #06d6a0;
  --cyan-glow: rgba(6, 214, 160, 0.35);
  --ruby: #e63946;
  --ruby-glow: rgba(230, 57, 70, 0.4);
  
  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
  --text-dim: #94a3b8;
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 9999px;
  
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.65);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ---------------- 6. HÌNH NỀN TOUR — KEN BURNS NHẸ + SÁNG HƠN ---------------- */
.tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 30%;
  /* Phần 1: sáng hơn đáng kể (brightness 0.45 vs 0.24 cũ) */
  filter: blur(40px) brightness(0.45) saturate(1.6);
  transform: scale(1.12);
  transition: background-image 1.2s ease-in-out;
  pointer-events: none;
  /* Phần 2: Ken Burns loop nhẹ 24s */
  animation: kb-zoom 24s ease-in-out infinite alternate;
}

@keyframes kb-zoom {
  0%   { transform: scale(1.12) translateX(0)    translateY(0); }
  100% { transform: scale(1.20) translateX(-1.5%) translateY(-1%); }
}

/* prefers-reduced-motion: tắt animation */
@media (prefers-reduced-motion: reduce) {
  .tour-backdrop { animation: none; }
  .hero-canvas, .hero-fx-canvas { display: none; }
}

/* ---------------- MASTER TOGGLE: TẮT MỌI HIỆU ỨNG (BODY.NO-EFFECTS) ---------------- */
body.no-effects .hero-canvas,
body.no-effects .hero-fx-canvas,
body.no-effects .tour-grain-overlay {
  display: none !important;
}

body.no-effects .tour-backdrop {
  animation: none !important;
  transform: none !important;
}

body.no-effects .tour-hero::after {
  display: none !important;
  animation: none !important;
}

body.no-effects *,
body.no-effects *::before,
body.no-effects *::after {
  animation: none !important;
}

.tour-backdrop-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Phần 1: vùng trên thoáng hơn, chỉ tối ở dưới */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(14, 22, 42, 0.15) 0%, transparent 55%),
    linear-gradient(180deg, rgba(8,13,26,0.35) 0%, rgba(8,13,26,0.72) 60%, rgba(8,13,26,0.92) 100%);
  pointer-events: none;
}

/* ---------------- 9. FILM GRAIN OVERLAY & NGHỆ THUẬT NỀN ---------------- */
.tour-grain-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

.tour-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 16px 80px;
}

/* ---------------- 4 & 7. CHẾ ĐỘ CHỮ LỚN GẤP ĐÔI CHO NGƯỜI LỚN TUỔI (SENIOR MODE x2) ---------------- */
body.senior-mode {
  font-size: 21px;
  line-height: 1.8;
}

/* Header & Top Bar */
body.senior-mode .operator-badge {
  font-size: 15px;
  padding: 8px 18px;
}
body.senior-mode .senior-toggle-btn {
  font-size: 15px;
  padding: 8px 18px;
}
body.senior-mode .theme-picker-btn,
body.senior-mode .fx-picker-btn,
body.senior-mode .effects-toggle-btn {
  font-size: 15px;
  padding: 8px 16px;
}

/* TTS Buttons in Senior Mode: Phóng to nút tròn và icon để dễ chạm */
body.senior-mode .btn-tts-speak,
body.senior-mode .btn-tts-day,
body.senior-mode .btn-tts-section,
body.senior-mode .btn-tts-urgent {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

body.senior-mode .btn-tts-speak .stroke-icon,
body.senior-mode .btn-tts-day .stroke-icon,
body.senior-mode .btn-tts-section .stroke-icon,
body.senior-mode .btn-tts-urgent .stroke-icon {
  width: 22px;
  height: 22px;
}

/* Hero Section */
body.senior-mode .badge-tour-code,
body.senior-mode .badge-duration {
  font-size: 16px;
  padding: 8px 18px;
}
body.senior-mode .hero-title {
  font-size: clamp(38px, 8vw, 68px);
  line-height: 1.25;
}
body.senior-mode .hero-tagline {
  font-size: 24px;
  line-height: 1.6;
}

/* Dual Clock Bar */
body.senior-mode .clock-label {
  font-size: 15px;
  letter-spacing: 0.05em;
}
body.senior-mode .clock-dest .clock-time {
  font-size: 36px;
}
body.senior-mode .clock-home .clock-time {
  font-size: 32px;
}

/* Quick Hub Cards */
body.senior-mode .hub-card {
  padding: 16px 20px;
}
body.senior-mode .hub-title {
  font-size: 16px;
}
body.senior-mode .hub-content {
  font-size: 20px;
  line-height: 1.6;
}

/* Urgent Banner */
body.senior-mode .urgent-banner {
  padding: 18px 22px;
}
body.senior-mode .urgent-text strong {
  font-size: 20px;
}
body.senior-mode .urgent-text p {
  font-size: 19px;
  line-height: 1.6;
}

/* Nav Tabs */
body.senior-mode .nav-tab-btn {
  font-size: 18px;
  padding: 14px 20px;
  gap: 10px;
}
body.senior-mode .nav-tab-btn .stroke-icon {
  width: 22px;
  height: 22px;
}

/* Progress Stepper */
body.senior-mode .step-node .step-circle {
  width: 42px;
  height: 42px;
  font-size: 18px;
}
body.senior-mode .step-node .step-label {
  font-size: 16px;
}
body.senior-mode .tour-progress-stat {
  font-size: 17px;
}

/* Schedule Accordion Header */
body.senior-mode .day-accordion-header {
  padding: 18px 22px;
}
body.senior-mode .day-badge-num {
  font-size: 32px;
  padding: 6px 16px;
}
body.senior-mode .accordion-title {
  font-size: 26px;
  line-height: 1.35;
}
body.senior-mode .accordion-date {
  font-size: 18px;
}
body.senior-mode .day-accordion-header .accordion-chevron {
  width: 26px;
  height: 26px;
}

/* Day Mini Hub */
body.senior-mode .mini-hub-item {
  font-size: 18px;
  padding: 12px 16px;
}

/* Activity Cards */
body.senior-mode .activity-card {
  padding: 20px;
  gap: 16px;
}
body.senior-mode .activity-time {
  font-size: 20px;
  padding: 6px 14px;
}
body.senior-mode .activity-tag {
  font-size: 15px;
  padding: 5px 12px;
}
body.senior-mode .activity-title {
  font-size: 28px;
  line-height: 1.35;
}
body.senior-mode .activity-desc {
  font-size: 21px;
  line-height: 1.85;
  color: #ffffff;
}
body.senior-mode .activity-location {
  font-size: 18px;
}

/* Notes & Bullet Lists */
body.senior-mode .note-box-title {
  font-size: 20px;
}
body.senior-mode .note-box-body {
  font-size: 20px;
  line-height: 1.8;
}
body.senior-mode .bullet-list li {
  font-size: 20px;
  line-height: 1.8;
}

/* Tab Thông Tin Cần Thiết */
body.senior-mode .ei-hero-title {
  font-size: 26px;
}
body.senior-mode .ei-hero-sub {
  font-size: 18px;
}
body.senior-mode .ei-card-title {
  font-size: 22px;
  padding: 16px 20px;
}
body.senior-mode .ei-row {
  font-size: 19px;
  line-height: 1.7;
}
body.senior-mode .ei-label {
  font-size: 18px;
  min-width: 150px;
}
body.senior-mode .ei-val {
  font-size: 20px;
}
body.senior-mode .ei-flight-row {
  font-size: 18px;
  padding: 10px 12px;
}
body.senior-mode .ei-badge {
  font-size: 16px;
  padding: 4px 12px;
}
body.senior-mode .ei-baggage-item p {
  font-size: 19px;
  line-height: 1.7;
}
body.senior-mode .ei-list li {
  font-size: 19px;
  line-height: 1.75;
}
body.senior-mode .ei-note-footer {
  font-size: 19px;
  line-height: 1.7;
}

/* Contact Buttons */
body.senior-mode .contact-card-btn {
  font-size: 18px;
  padding: 16px 20px;
}

/* TOP ACCESS BAR — Frosted Glass sáng hơn & Luôn nổi trên Hero */
.top-access-bar {
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 16px rgba(0,0,0,0.25);
}

.top-brand-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.operator-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--accent-gradient);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 12px var(--accent-glow);
}

.version-badge-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  font-family: monospace;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.38);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  user-select: none;
}

/* TOP ACTIONS: Theme Picker & Senior Toggle */
.top-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Nút Mã QR Chuyến Đi */
.tour-qr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fef08a;
  font-family: var(--font-main);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.tour-qr-btn:hover {
  background: rgba(245, 158, 11, 0.26);
  border-color: #fbbf24;
  color: #ffffff;
  transform: translateY(-1px);
}

.tour-qr-btn .stroke-icon {
  width: 15px;
  height: 15px;
}

/* Master Toggle Button: Tắt/Bật mọi hiệu ứng */
.effects-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass-bright);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.effects-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent-primary);
  color: #fff;
}

.effects-toggle-btn.effects-off {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.effects-toggle-btn.effects-off:hover {
  background: rgba(239, 68, 68, 0.28);
  border-color: #ef4444;
  color: #fff;
}

/* Theme Picker Dropdown */
.theme-picker-wrap {
  position: relative;
  z-index: 110;
}

.theme-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass-bright);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-picker-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent-primary);
}

.theme-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-glow);
  display: inline-block;
  transition: background 0.3s ease;
}

.arrow-mini {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}

.theme-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 250;
  min-width: 220px;
  background: rgba(14, 22, 42, 0.95);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--border-glass-bright);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: dropdown-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdown-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.theme-dropdown[hidden],
.fx-dropdown[hidden] {
  display: none !important;
}

/* FX Picker Dropdown */
.fx-picker-wrap {
  position: relative;
  z-index: 110;
}

.fx-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass-bright);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.fx-picker-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent-primary);
}

.fx-icon {
  font-size: 13px;
  display: inline-block;
}

.fx-badge-icon {
  font-size: 14px;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 250;
  min-width: 250px;
  max-height: 380px;
  overflow-y: auto;
  background: rgba(14, 22, 42, 0.95);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--border-glass-bright);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: dropdown-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-dropdown-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 6px 10px 4px;
}

.theme-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all 0.15s ease;
}

.theme-opt:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.theme-opt.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent-primary);
  font-weight: 700;
  color: #fff;
}

.theme-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.senior-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass-bright);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.senior-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent-primary);
}

.senior-toggle-btn.active {
  background: var(--accent-gradient);
  color: #fff;
  border-color: var(--accent-primary);
  box-shadow: 0 0 16px var(--accent-glow);
}

/* ---------------- 3. ICON NÉT MẢNH TỐI GIẢN (STROKE SVG) ---------------- */
.stroke-icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.stroke-icon.lg {
  width: 22px;
  height: 22px;
}

/* ---------------- HERO SECTION — Phần 1: Sáng + Phần 2: Canvas container ---------------- */
.tour-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Phần 1: viền sáng hơn để nổi bật với nền nhẹ hơn */
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-size: cover;
  background-position: center 30%;
  box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.06);
  margin-bottom: 22px;
}

/* Ambient light sheen qua hero card */
.tour-hero::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 42%,
    rgba(255, 255, 255, 0.04) 49%,
    rgba(255, 255, 255, 0.10) 51%,
    transparent 58%
  );
  transform: rotate(25deg) translateY(-100%);
  pointer-events: none;
  z-index: 2;
  animation: hero-sheen 16s ease-in-out infinite;
}

@keyframes hero-sheen {
  0%, 82% { transform: rotate(25deg) translateY(-100%); opacity: 0; }
  86%     { opacity: 1; }
  94%     { transform: rotate(25deg) translateY(100%); opacity: 0.8; }
  100%    { transform: rotate(25deg) translateY(100%); opacity: 0; }
}

/* Phần 2: Canvas animation overlay */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* Phần 9: Lớp hiệu ứng tự nhiên FX Library phân tầng */
.hero-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}

.hero-overlay {
  position: relative;
  z-index: 2;
  /* Phần 1: overlay sáng hơn nhiều so với cũ */
  background: linear-gradient(
    180deg,
    rgba(8, 13, 26, 0.18) 0%,
    rgba(8, 13, 26, 0.55) 45%,
    rgba(8, 13, 26, 0.82) 75%,
    rgba(8, 13, 26, 0.94) 100%
  );
  padding: 24px 22px 20px;
  backdrop-filter: blur(1px);
}

.hero-meta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

.badge-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge-tour-code {
  color: #fbbf24;
  background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(245,158,11,0.10));
  border: 1px solid rgba(245, 158, 11, 0.50);
  font-family: monospace;
  font-weight: 700;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

.badge-duration {
  color: #06d6a0;
  background: linear-gradient(135deg, rgba(6,214,160,0.20), rgba(6,214,160,0.08));
  border: 1px solid rgba(6, 214, 160, 0.45);
  font-weight: 700;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 8px rgba(0,0,0,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

.hero-title {
  font-size: clamp(23px, 4.2vw, 36px);
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  /* Phần 1: text-shadow mạnh hơn để nổi rõ trên nền sáng hơn */
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 4px 24px rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.8);
}

.hero-tagline {
  font-size: clamp(13.5px, 2.2vw, 16px);
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  margin-bottom: 20px;
}

/* ---------------- 5. ĐỒNG HỒ KÉP — PHẦN 3: LIQUID GLASS ---------------- */
.dual-clock-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  /* Liquid Glass: nền trắng sữa mờ + blur mạnh */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 18px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  /* Inset highlight — phản quang trên */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.35);
}

.clock-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clock-info {
  display: flex;
  flex-direction: column;
}

.clock-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Giờ Việt Nam (Quê nhà) - Màu bạc thanh lịch */
.clock-home .clock-label {
  color: var(--text-dim);
}
.clock-home .clock-time {
  font-size: 17px;
  font-weight: 700;
  font-family: monospace;
  color: #cbd5e1;
}

/* Giờ Nước Sở Tại (Điểm đến Trùng Khánh) - Màu Vàng Kim nổi bật tương phản cao */
.clock-dest {
  /* Phần 3: divider kính nhẹ */
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: 14px;
}
.clock-dest .clock-label {
  color: #fbbf24;
  font-weight: 700;
}
.clock-dest .clock-time {
  font-size: 19px;
  font-weight: 800;
  font-family: monospace;
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.5);
}

/* QUICK HUB TRỌNG TÂM: Ở - ĂN - ĐI */
.quick-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hub-card {
  /* Phần 3: Liquid Glass — trắng sữa mờ + kính xuyên thấu */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hub-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 8px 28px rgba(0, 0, 0, 0.35);
}

.hub-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 6px;
}

.hub-content {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------- 8. HIỆU ỨNG ÁNH SÁNG CHẠY VÒNG QUANH VIỀN KIỂU AI GEMINI (BLUR DỊU NHẸ & TỐC ĐỘ ÊM ÁI 12S) ---------------- */
.day-accordion-card.active-today {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 1.5px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
}

/* Vệt sáng Gemini xoay tròn 360 độ: tốc độ 12s chậm rãi thư thái, blur 3.5px mềm dịu, không gây chói mắt hay phân tâm khi đọc */
.day-accordion-card.active-today::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 180deg,
    rgba(56, 189, 248, 0.55) 230deg,
    rgba(129, 140, 248, 0.75) 270deg,
    rgba(192, 132, 252, 0.8) 305deg,
    rgba(244, 63, 94, 0.75) 330deg,
    rgba(251, 191, 36, 0.85) 350deg,
    transparent 360deg
  );
  animation: gemini-border-spin 12s linear infinite;
  z-index: 0;
  pointer-events: none;
  filter: blur(3.5px);
}

@keyframes gemini-border-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Lòng thẻ bên trong đặc sẫm 100%, đè lên lớp xoay, chỉ để lộ duy nhất đường chạy viền 1.5px */
.day-accordion-card.active-today .day-accordion-header {
  position: relative;
  z-index: 1;
  background: #0d1527 !important;
  border-radius: calc(var(--radius-md) - 1.5px) calc(var(--radius-md) - 1.5px) 0 0;
}

.day-accordion-card.active-today:not(.open) .day-accordion-header {
  border-radius: calc(var(--radius-md) - 1.5px);
}

.day-accordion-card.active-today .day-accordion-body {
  position: relative;
  z-index: 1;
  background: #0d1527 !important;
  border-radius: 0 0 calc(var(--radius-md) - 1.5px) calc(var(--radius-md) - 1.5px);
}

/* ---------------- KHUNG TRẠNG THÁI THỜI GIAN THỰC & ĐẾM NGƯỢC (LIVE REAL-TIME ENGINE) ---------------- */
.tour-countdown-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(14, 22, 42, 0.92) 100%);
  border: 1px solid rgba(245, 158, 11, 0.40);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.countdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.countdown-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.countdown-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 10px #fbbf24;
  animation: cd-pulse 1.4s infinite alternate;
  display: inline-block;
}

@keyframes cd-pulse {
  from { opacity: 0.5; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1.2); }
}

.countdown-title {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fbbf24;
}

.countdown-badge-flight {
  font-size: 11px;
  font-weight: 700;
  font-family: monospace;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.countdown-clock-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 14px;
}

.countdown-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-width: 64px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.countdown-num {
  font-size: 28px;
  font-weight: 800;
  font-family: monospace;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}

.cd-seconds {
  color: #fbbf24;
}

.countdown-unit {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-top: 4px;
  text-transform: uppercase;
}

.countdown-colon {
  font-size: 22px;
  font-weight: 800;
  color: rgba(251, 191, 36, 0.65);
  margin-bottom: 12px;
}

.countdown-footer-note {
  font-size: 12.5px;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  text-align: center;
}

.countdown-footer-note strong {
  color: #ffffff;
}

/* Trạng thái khi tour đang diễn ra */
.tour-countdown-banner.in-tour {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(14, 22, 42, 0.92) 100%);
  border-color: rgba(16, 185, 129, 0.45);
}

.tour-countdown-banner.in-tour .countdown-title {
  color: #34d399;
}

.tour-countdown-banner.in-tour .countdown-pulse-dot {
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}

/* Trạng thái khi tour hoàn thành */
.tour-countdown-banner.completed {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(14, 22, 42, 0.92) 100%);
  border-color: rgba(56, 189, 248, 0.4);
}

/* Badge Hôm Nay và Đã Qua trên Accordion */
.badge-live-today-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.18);
  border: 1px solid rgba(244, 63, 94, 0.45);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.35);
  animation: today-pulse 1.6s infinite alternate;
}

@keyframes today-pulse {
  from { opacity: 0.8; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1.04); }
}

.badge-passed-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.live-dot-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  margin-right: 4px;
  animation: cd-pulse 1.2s infinite alternate;
}

/* Senior mode cho countdown */
body.senior-mode .countdown-title { font-size: 16px; }
body.senior-mode .countdown-num { font-size: 34px; }
body.senior-mode .countdown-unit { font-size: 12px; }
body.senior-mode .countdown-footer-note { font-size: 16px; }

/* ---------------- TAB RỜI NGANG: TIẾN TRÌNH TOUR (5 CHẤM TRÒN PHÍA TRÊN + THANH PROGRESS PHÍA DƯỚI) ---------------- */
.tour-progress-card {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.85) 0%, rgba(13, 21, 39, 0.92) 100%);
  border: 1px solid var(--border-glass-bright);
  border-radius: var(--radius-md);
  padding: 16px 20px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
}

.progress-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.progress-title {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-badges-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.badge-active-day {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-primary);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.badge-percent-ratio {
  font-size: 12px;
  font-weight: 700;
  font-family: monospace;
  color: var(--cyan-neon);
  background: rgba(6, 214, 160, 0.12);
  border: 1px solid rgba(6, 214, 160, 0.3);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

/* PHÍA TRÊN: 5 CHẤM TRÒN NGÀY VÀ THÔNG TIN */
.stepper-dots-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 0 4px;
}

.step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: inherit;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  flex: 1;
  max-width: 72px;
}

.step-node:hover {
  transform: translateY(-2px);
}

.step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0d1527;
  border: 2px solid var(--border-glass-bright);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.step-label-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.step-day-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  transition: color 0.2s ease;
}

.step-date-sub {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.7);
  font-family: monospace;
}

/* Trạng thái ngày đang chọn (Active) */
.step-node.active .step-circle {
  background: linear-gradient(135deg, var(--gold-primary), #fbbf24);
  border-color: #ffffff;
  color: #0d1527;
  box-shadow: 0 0 16px var(--gold-glow);
  transform: scale(1.12);
}

.step-node.active .step-day-title {
  color: var(--gold-primary);
  font-weight: 800;
}

.step-node.active .step-date-sub {
  color: var(--text-main);
}

/* Trạng thái ngày đã đi qua (Done) */
.step-node.done .step-circle {
  background: rgba(6, 214, 160, 0.15);
  border-color: var(--cyan-neon);
  color: var(--cyan-neon);
}

.step-node.done .step-day-title {
  color: var(--cyan-neon);
}

/* PHÍA DƯỚI: THANH PROGRESS TỈ LỆ % */
.stepper-progress-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}

.progress-bar-track {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #06d6a0 0%, #38bdf8 55%, #f59e0b 100%);
  border-radius: var(--radius-pill);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px var(--gold-glow);
  position: relative;
}

.progress-bar-glow-pin {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 8px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 0 6px #ffffff;
}

.progress-ticks-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.progress-tick-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(13, 21, 39, 0.75);
}

.progress-meta-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  line-height: 1.4;
}

.meta-pass {
  color: var(--cyan-neon);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.meta-pass::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-neon);
}

.meta-remain {
  color: var(--gold-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.meta-remain::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-primary);
}

/* KHUNG THÔNG BÁO KHẨN CẤP — PHẦN 3: LIQUID GLASS AMBER */
.urgent-banner {
  margin-top: 18px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Liquid glass với tông amber ấm */
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.14) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 4px solid var(--gold-primary);
  border-radius: var(--radius-md);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 24px rgba(245, 158, 11, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(245, 158, 11, 0.08);
}

.urgent-icon-wrap {
  color: #ffbe0b;
  margin-top: 2px;
}

.urgent-text strong {
  color: #fff;
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.urgent-text p {
  font-size: 14px;
  color: #f8fafc;
  line-height: 1.5;
}

/* ---------------- 7. NAV TABS & BADGE ĐỔI MÀU LỜI DẶN HDV ---------------- */
.nav-tabs-wrapper {
  margin: 22px 0 20px;
  border-bottom: 1px solid var(--border-glass-bright);
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-tabs-wrapper::-webkit-scrollbar { display: none; }

.nav-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 18px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-tab-btn:hover { color: #fff; }
.nav-tab-btn.active { color: #fff; }

.nav-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-gradient);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -2px 12px var(--accent-glow);
}

/* BADGE LỜI DẶN CỦA HDV KHI CÓ TIN MỚI */
.notice-indicator-badge {
  display: none;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  background: var(--ruby);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ruby);
  animation: badge-pulse 1.8s infinite;
}

.nav-tab-btn.has-unread-notice {
  color: #ff6b6b !important;
}

.nav-tab-btn.has-unread-notice .notice-indicator-badge {
  display: inline-block;
}

.nav-tab-btn.has-unread-notice .tab-icon {
  animation: bell-wiggle 2s ease infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

@keyframes bell-wiggle {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(12deg); }
  20%, 40% { transform: rotate(-12deg); }
  50% { transform: rotate(0); }
}

/* ---------------- 2. PHƯƠNG ÁN A: VERTICAL ACCORDION CHO CÁC NGÀY ---------------- */
.days-accordion-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.day-accordion-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.day-accordion-card:hover {
  border-color: var(--border-glass-bright);
}


/* HEADER CỦA NGÀY (CÓ THỂ BẤM ĐỂ BUNG/GẬP) */
.day-accordion-header {
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  font-family: var(--font-main);
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: 12px;
}

.day-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.day-badge-num {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #000;
  background: var(--gold-primary);
  padding: 2px 8px;
  border-radius: 4px;
}

.day-date-text {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}

.accordion-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}

.day-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.accordion-chevron {
  transition: transform 0.3s ease;
  color: var(--text-dim);
}

.day-accordion-card.open .accordion-chevron {
  transform: rotate(180deg);
  color: var(--gold-primary);
}

/* NỘI DUNG CHI TIẾT BÊN TRONG KHI GẬP MỞ */
.day-accordion-body {
  display: none;
  padding: 0 20px 22px;
  border-top: 1px solid var(--border-glass);
}

.day-accordion-card.open .day-accordion-body {
  display: block;
  animation: accordion-slide-down 0.28s ease;
}

@keyframes accordion-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* MINI QUICK HUB TRONG TỪNG NGÀY */
.day-mini-hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 18px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border: 1px solid var(--border-glass);
}

.mini-hub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.mini-hub-item .stroke-icon {
  color: var(--gold-primary);
}

/* LỜI NHẮN HÔM NAY */
.day-note-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: #fef08a;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* TIMELINE HOẠT ĐỘNG */
.activities-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
  transition: all 0.2s ease;
}

.activity-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-glass-bright);
}

.activity-time-badge {
  background: rgba(6, 214, 160, 0.12);
  border: 1px solid rgba(6, 214, 160, 0.3);
  color: var(--cyan-neon);
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.activity-time-flexible {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--border-glass);
  color: var(--text-dim);
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.activity-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}

.activity-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.activity-prep {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--gold-primary);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

/* ---------------- VOICE TTS STYLING ---------------- */
/* ---------------- VOICE TTS STYLING: ICON ĐƠN NÉT 1 MÀU (CIRCULAR ICON ONLY) ---------------- */
.activity-time-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.btn-tts-speak,
.btn-tts-day,
.btn-tts-urgent,
.btn-tts-section {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--border-glass-bright);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  touch-action: manipulation;
  flex-shrink: 0;
}

.btn-tts-speak .stroke-icon,
.btn-tts-day .stroke-icon,
.btn-tts-urgent .stroke-icon,
.btn-tts-section .stroke-icon {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.15s ease;
}

.btn-tts-speak:hover,
.btn-tts-day:hover,
.btn-tts-urgent:hover,
.btn-tts-section:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  transform: scale(1.08);
}

.btn-tts-speak:hover .stroke-icon,
.btn-tts-day:hover .stroke-icon,
.btn-tts-urgent:hover .stroke-icon,
.btn-tts-section:hover .stroke-icon {
  transform: scale(1.1);
}

.btn-tts-speak.speaking,
.btn-tts-day.speaking,
.btn-tts-urgent.speaking,
.btn-tts-section.speaking {
  background: #10b981;
  border-color: #34d399;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.55);
  animation: tts-pulse 1.2s infinite alternate;
}

@keyframes tts-pulse {
  from { box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); transform: scale(1); }
  to   { box-shadow: 0 0 20px rgba(16, 185, 129, 0.75), 0 0 6px #fff; transform: scale(1.06); }
}

.day-tts-row {
  margin: 8px 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.btn-tts-day {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fef08a;
}

.btn-tts-day:hover {
  background: rgba(245, 158, 11, 0.28);
  border-color: #fbbf24;
  color: #ffffff;
}

.notes-header-action {
  margin-bottom: 14px;
  display: flex;
  justify-content: flex-end;
}

.btn-tts-section {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.btn-tts-urgent {
  flex-shrink: 0;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

/* ---------------- TAB LỜI DẶN HDV ---------------- */
.notes-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.note-box {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 20px;
}

.note-box-title {
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.note-box-body {
  font-size: 14.5px;
  color: var(--text-main);
  line-height: 1.6;
}

/* ---------------- TAB DỊCH VỤ & GIÁ ---------------- */
.info-section {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 22px;
  margin-bottom: 16px;
}

.info-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bullet-list li {
  font-size: 14px;
  color: var(--text-muted);
  position: relative;
  padding-left: 20px;
}

.bullet-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cyan-neon);
  font-weight: 700;
}

.bullet-list.exclusions li::before {
  content: '✕';
  color: var(--ruby);
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.pricing-table th, .pricing-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-glass);
}

.pricing-table th {
  color: var(--gold-primary);
  font-size: 12px;
  text-transform: uppercase;
}

.pricing-table td strong {
  color: #fff;
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.contact-card-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s ease;
}

.contact-card-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--cyan-neon);
  transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 640px) {
  .tour-container { padding: 8px 12px 60px; }
  .quick-hub-grid { grid-template-columns: 1fr; gap: 8px; }
  .dual-clock-bar { grid-template-columns: 1fr 1fr; padding: 10px 12px; gap: 8px; }
  .clock-dest { padding-left: 10px; }
  .clock-home .clock-time { font-size: 15px; }
  .clock-dest .clock-time { font-size: 16px; }
  .day-mini-hub { grid-template-columns: 1fr; gap: 6px; }
  .activity-card { grid-template-columns: 1fr; gap: 8px; }
  .activity-time-col {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .day-accordion-header { padding: 14px 16px; }
  .day-accordion-body { padding: 0 16px 18px; }
  /* Mobile: 4 tabs hiển thị đầy đủ 2 hàng (2x2 grid) rõ nét, không bị che khuất (Phần 4) */
  .nav-tabs-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 16px 0 20px;
    border-bottom: none;
    overflow: visible;
  }
  .nav-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    min-height: 48px;
    color: var(--text-muted);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  .nav-tab-btn.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.28) 0%, rgba(203, 213, 225, 0.12) 100%);
    border-color: var(--accent-primary);
    color: #ffffff;
    box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  .nav-tab-btn.active::after {
    display: none;
  }
  .nav-tab-btn .tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .nav-tab-btn .tab-icon .stroke-icon {
    width: 17px;
    height: 17px;
  }
  .nav-tab-btn .tab-text {
    line-height: 1.25;
  }
}

/* ========== TAB THÔNG TIN CẦN THIẾT ========== */
.ei-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 24px;
}

/* Banner giới thiệu */
.ei-hero-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(6,214,160,0.08) 100%);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-top: 4px;
}

.ei-hero-icon { font-size: 28px; }
.ei-hero-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--gold-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ei-hero-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Card block */
.ei-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.ei-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 12px;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-primary);
  border-bottom: 1px solid var(--border-glass);
  background: rgba(255,255,255,0.02);
}

.ei-card-body {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Row label:value */
.ei-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 3px 0;
}
.ei-label {
  color: var(--text-dim);
  flex-shrink: 0;
  min-width: 120px;
  font-size: 12.5px;
}
.ei-val {
  color: var(--text-main);
  flex: 1;
}
.ei-val a { text-decoration: none; }
.ei-val a:hover { text-decoration: underline; }
.mono { font-family: monospace; }

/* Separator */
.ei-sep {
  height: 1px;
  background: var(--border-glass);
  margin: 6px 0;
}

/* Bảng chuyến bay */
.ei-flight-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 4px;
}
.ei-flight-row {
  display: grid;
  grid-template-columns: 46px 80px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.ei-flight-row.header {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.ei-flight-row span:last-child { font-family: monospace; color: var(--cyan-neon); }

/* Badge */
.ei-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}
.ei-badge.go {
  background: rgba(6,214,160,0.15);
  color: var(--cyan-neon);
  border: 1px solid rgba(6,214,160,0.3);
}
.ei-badge.return {
  background: rgba(245,158,11,0.15);
  color: var(--gold-primary);
  border: 1px solid rgba(245,158,11,0.3);
}
.ei-badge.bag {
  background: rgba(56,189,248,0.12);
  color: #38bdf8;
  border: 1px solid rgba(56,189,248,0.25);
  font-size: 11.5px;
  margin-bottom: 4px;
}

/* Baggage item */
.ei-baggage-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
}
.ei-baggage-item p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* List items */
.ei-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ei-list li {
  font-size: 13.5px;
  color: var(--text-muted);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.ei-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cyan-neon);
  font-weight: 700;
}
.ei-list.exclusion li::before {
  content: '✕';
  color: var(--ruby);
}

/* Note footer */
.ei-note-footer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.18);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: #fef08a;
  line-height: 1.5;
}
.ei-note-footer .stroke-icon { color: var(--gold-primary); flex-shrink: 0; margin-top: 1px; }

/* Mobile adjustments for essential tab */
@media (max-width: 640px) {
  .ei-row { flex-direction: column; gap: 2px; }
  .ei-label { min-width: auto; }
  .ei-flight-row { grid-template-columns: 44px 70px 1fr; font-size: 12px; }
  .ei-flight-row span:last-child { display: none; }
  .ei-flight-table::after {
    content: '* Giờ hiển thị khi xem ngang';
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 4px;
  }
}

/* ---------------- MÃ QR CHUYẾN ĐI (CLOUDFLARE PAGES MODAL & INLINE QR) ---------------- */
.qr-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4, 7, 18, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease-out;
}

.qr-modal-backdrop[hidden] {
  display: none !important;
}

.qr-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(135deg, rgba(20, 30, 55, 0.96) 0%, rgba(10, 16, 32, 0.98) 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(245, 158, 11, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.qr-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass-bright);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qr-modal-close:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fff;
}

.qr-modal-header {
  margin-bottom: 18px;
}

.qr-modal-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
}

.qr-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.qr-modal-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.qr-modal-code-box {
  background: #ffffff;
  padding: 16px;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.qr-modal-code-box svg {
  display: block;
  width: 200px;
  height: 200px;
  max-width: 100%;
}

.qr-modal-url-box {
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-glass-bright);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.qr-live-url {
  font-family: monospace;
  font-size: 11.5px;
  color: #38bdf8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  flex: 1;
}

.qr-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-family: var(--font-main);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.qr-copy-btn:hover {
  background: rgba(56, 189, 248, 0.32);
  color: #fff;
  border-color: #38bdf8;
}

.qr-copy-btn .stroke-icon {
  width: 13px;
  height: 13px;
}

.qr-modal-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: left;
  border-top: 1px solid var(--border-glass);
  padding-top: 12px;
}

.qr-tip-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Inline QR trong Tab Thông Tin Cần Thiết */
.ei-qr-card {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, rgba(20, 28, 48, 0.9) 0%, rgba(14, 22, 42, 0.95) 100%);
}

.ei-qr-body {
  align-items: center;
  text-align: center;
  padding: 20px 16px;
}

.ei-qr-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.ei-qr-render {
  background: #ffffff;
  padding: 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  margin-bottom: 12px;
}

.ei-qr-render svg {
  display: block;
  width: 160px;
  height: 160px;
}

.ei-qr-link-row {
  margin-top: 4px;
}

.ei-live-link {
  font-family: monospace;
  font-size: 12.5px;
  color: var(--gold-primary);
  text-decoration: underline;
  word-break: break-all;
}

/* ---------------- TOUR FOOTER & VERSION INFO ---------------- */
.tour-footer {
  margin-top: 40px;
  padding: 24px 16px 32px;
  border-top: 1px solid var(--border-glass);
  text-align: center;
  position: relative;
  z-index: 10;
}

.tour-footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tour-footer-brand {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.tour-footer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  flex-wrap: wrap;
}

.tour-footer-meta strong {
  color: var(--gold-primary);
  font-weight: 700;
}

.footer-dot {
  opacity: 0.5;
}

.qr-version-tip strong {
  color: #38bdf8;
  font-family: monospace;
}