/* ══════════════════════════════════════════════════════════════════════════
   pyvietnamcta — CSS thuần.

   Giao diện dựng bằng Tailwind (Play CDN, cấu hình trong base.html). File này
   CHỈ giữ những thứ Tailwind không diễn đạt được:
     · thẻ lên máy bay (sọc gradient + lỗ xé vé + mã vạch)
     · cuống vé của nhãn số hiệu section
     · đường bay SVG dựng động ở cột phải
     · dải ticker mã sân bay
     · ngăn kéo điều hướng trên điện thoại

   Mọi chuyển động do GSAP điều khiển, KHÔNG dùng transition/keyframes CSS cho
   phần reveal — để ScrollTrigger giữ độc quyền và không giật.
   ══════════════════════════════════════════════════════════════════════════ */

body { overflow-x: hidden; }
::selection { background: #fdc300; color: #000835; }

/* ── THẺ LÊN MÁY BAY ─────────────────────────────────────────────────────── */
.pass { position: relative; overflow: hidden; }
.pass::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #005495, #38b6ff);
}
.pass::after {   /* lỗ xé vé, tô trùng màu nền section qua biến --notch */
  content: ''; position: absolute; left: -7px; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--notch, #005495); transform: translateY(-50%);
}
.barcode {
  height: 10px; transition: background .35s;
  background: repeating-linear-gradient(90deg, #ccd8e6 0 1.5px, transparent 1.5px 4px);
}
.pass:hover .barcode {
  background: repeating-linear-gradient(90deg, #38b6ff 0 1.5px, transparent 1.5px 4px);
}

/* ── cuống vé của nhãn số hiệu ───────────────────────────────────────────── */
.stub { background: repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 4px); }

/* ── ĐƯỜNG BAY: SVG dựng động theo đúng vị trí từng chặng ─────────────────── */
.route-col { position: relative; padding-left: 3rem; }
.route-svg {
  position: absolute; left: 0; top: 0; width: 3rem; height: 100%;
  overflow: visible; pointer-events: none; z-index: 1;
}
.route-svg .trail {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 7 12; opacity: .35;
}
.route-svg .live {
  fill: none; stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(56, 182, 255, .85));
}
.route-svg .wp { fill: var(--dot-bg, #fff); stroke: currentColor; stroke-width: 2; }
.route-svg .plane path { fill: #fdc300; filter: drop-shadow(0 0 7px rgba(253, 195, 0, .95)); }
.leg { position: relative; z-index: 2; }

@media (max-width: 480px) {
  .route-col { padding-left: 2.1rem; }
  .route-svg { width: 2.1rem; }
}

/* ── ticker mã sân bay ───────────────────────────────────────────────────── */
.ticker { display: flex; white-space: nowrap; will-change: transform; }
.ticker > span { padding-right: 2rem; }

/* ── hoạ tiết nền ────────────────────────────────────────────────────────── */
.waves { position: absolute; pointer-events: none; }

/* ── ngăn kéo điều hướng trên điện thoại ─────────────────────────────────── */
#drawer { transform: translateX(100%); }

/* ── SplitText: mỗi TỪ là một khối inline-block, ký tự bên trong không ngắt ─
   Nếu chỉ tách theo ký tự, trình duyệt được phép xuống dòng giữa hai ký tự và
   "MANAGEMENT" sẽ vỡ thành "MAN / AGEMENT".                                  */
.wd-h { display: inline-block; white-space: nowrap; }

/* ── tôn trọng tuỳ chọn giảm chuyển động của người dùng ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}