/* Hallmark · redesign (in-place): editorial retype · theme: custom (existing
 * palette, retyped Inter) · accent: cool blue-ochre
 * · italic-header anti-pattern removed (hero-slide accent line, hero-nav
 * counter)
 */

/* ── Variables ──────────────────────────────────── */
:root {
  --ink:    #123642;
  --cream:  #F4FAFD;
  --sand:   #E3EEF5;
  --ochre:  #2B7CB8;  /* primary — light blue */
  --rust:   #1D5D82;  /* primary, darkened for hover */
  --sky:    #2B7CB8;
  --eucalyptus: #3F6B52;
  --muted:  #5C7680;
  --border: rgba(18,54,66,0.12);
  --focus:  #2B7CB8;
  --sun:    #EF7B45;  /* small warm accent — reserved for the departure stamp only */

  /* Typography — Inter ships a Vietnamese subset, so diacritics render
     correctly (see 584ec40 for why this matters: Sora's Google Fonts build
     didn't, and accented headings silently fell back to the OS font). */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-info: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: #fff;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── Focus + form accessibility ─────────────────── */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* keyboard focus only — pointer clicks stay clean */
:focus:not(:focus-visible) { outline: none; }
input, textarea, select, button { font-family: inherit; }
/* ≥16px prevents iOS Safari zoom-on-focus */
input, textarea, select { font-size: max(16px, 1rem); }

/* ── Navigation ─────────────────────────────────── */
/* 1. Thiết lập Nav luôn cố định và có nền sáng */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s;
}
.nav.scrolled {
  box-shadow: 0 2px 20px rgba(20,16,13,0.08);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 68px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Everything right of the logo — links, CTA, language, hamburger — as one
   cluster, so the nav is only ever two flex children and the space between
   the logo and the cluster is the one deliberate gap in the bar. */
.nav-cluster {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

/* Ticket-perforation divider — the same tear-line vocabulary as the dashed
   trip-builder CTA (--sun boarding stub) and the manifesto's dotted flight
   route, reused here to mark where "browse" (links) ends and "act" (CTA +
   utilities) begins. */
.nav-divider {
  position: relative;
  width: 1px; height: 22px;
  background-image: repeating-linear-gradient(to bottom, var(--border) 0 4px, transparent 4px 8px);
}
.nav-divider::before,
.nav-divider::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 1px var(--border);
}
.nav-divider::before { top: -9px; }
.nav-divider::after { bottom: -9px; }

/* 2. Màu chữ Logo cố định màu tối */
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); /* Đổi thành màu tối */
}
.nav-logo em {
  font-weight: 500; letter-spacing: 0.02em;
}

/* 3. Màu chữ Menu cố định màu tối */
.nav-links {
  display: flex; align-items: center; gap: 2rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--muted); /* Chữ màu tối nhạt */
  position: relative;
  transition: color 0.3s;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 1px; background: var(--ochre);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover { 
  color: var(--ink); /* Hover thành màu tối đậm */
}
.nav-links a:hover::after { 
  transform: scaleX(1); 
}

/* 4. Nút Khám phá ngay cố định viền và chữ tối */
.nav-cta {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  border-radius: 2px;
  border: 1px solid var(--ink); /* Viền màu tối */
  color: var(--ink); /* Chữ màu tối */
  transition: background 0.3s, color 0.3s;
}
.nav-cta:hover {
  background: var(--ink);
  color: var(--cream);
}

/* Trip-builder — the one conversion action in the nav, so it breaks the
   monochrome outline language on purpose. Not with a stock gradient pill,
   but with the site's own ticket vocabulary: a dashed boarding-stub border
   in the departure-stamp orange (--sun — the same dashes as the manifesto's
   dotted flight route and the intl departure badge) that "stamps" solid on
   hover. */
.nav-cta--trip {
  border: 1.5px dashed var(--sun);
  border-radius: 6px;
  color: #B85A2E;
  background: rgba(239,123,69,0.08);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.nav-cta--trip:hover {
  background: var(--sun);
  border-style: solid;
  border-color: var(--sun);
  color: #FFF8EE;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(239,123,69,0.35);
}

/* Nav dropdown menu */
.nav-dropdown-item {
  position: relative;
}
.nav-dropdown-trigger {
  background: none; border: none; padding: 0.5rem;
  cursor: pointer; display: flex; align-items: center;
  color: var(--muted); transition: color 0.3s;
}
.nav-dropdown-trigger:hover {
  color: var(--ink);
}
.nav-more-trigger { padding: 0.5rem 0.35rem; }
.nav-dropdown-menu {
  position: absolute; top: 100%; right: 0; z-index: 100;
  background: var(--cream); border-radius: 4px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(20,16,13,0.15);
  min-width: 240px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: opacity 0.3s, max-height 0.3s;
}
.nav-dropdown-menu.open {
  max-height: 300px; opacity: 1;
}
.nav-dropdown-menu a {
  display: block; padding: 0.75rem 1.25rem;
  font-size: 0.85rem; font-weight: 500;
  color: var(--muted); text-decoration: none;
  transition: background 0.2s, color 0.2s;
  border-bottom: 1px solid rgba(20,16,13,0.06);
}
.nav-dropdown-menu a:last-child {
  border-bottom: none;
}
.nav-dropdown-menu a:hover {
  background: rgba(20,16,13,0.04); color: var(--ink);
}

/* "Tour trọn gói" — sits inline with the plain nav links, so the trigger
   is styled to match rather than looking like an icon button, and its
   menu opens left-aligned under the trigger instead of the far-right
   placement the "more options" dropdown uses. */
.nav-tours-trigger {
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: inherit; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--muted); transition: color 0.3s;
}
.nav-tours-trigger:hover { color: var(--ink); }
.nav-tours-trigger svg { transition: transform 0.25s; }
.nav-tours-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-tours-menu { left: 0; right: auto; min-width: 200px; }

.mobile-menu-divider {
  height: 1px; background: rgba(20,16,13,0.1);
  margin: 0.5rem 0;
}

/* Language switch — both flags visible side by side: click the Vietnamese
   flag for Tiếng Việt, the British flag for English. The active language's
   flag shows full-color with an accent ring; the other sits dimmed until
   hovered. Inline SVG flags (not Unicode flag emoji) — Windows' Segoe UI
   Emoji has no flag glyphs, so emoji flags render as blank/tofu there. */
.lang-switch { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 18px; padding: 0;
  border: none; border-radius: 3px;
  background: transparent; cursor: pointer; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20,16,13,0.12);
  filter: grayscale(0.7); opacity: 0.55;
  transition: filter 0.25s, opacity 0.25s, box-shadow 0.25s, transform 0.15s;
}
.lang-btn svg { width: 100%; height: 100%; display: block; }
.lang-btn:hover {
  filter: none; opacity: 1; transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--ochre), 0 3px 8px rgba(227,154,76,0.35);
}
.lang-btn:active { transform: translateY(0) scale(0.94); }
.lang-btn.is-active {
  filter: none; opacity: 1;
  box-shadow: 0 0 0 2px var(--ochre);
}
.lang-switch--mobile { gap: 0.6rem; margin-top: 1rem; }
.lang-switch--mobile .lang-btn {
  width: 32px; height: 22px;
  box-shadow: 0 0 0 1px rgba(248,243,234,0.4);
}
.lang-switch--mobile .lang-btn.is-active { box-shadow: 0 0 0 2px var(--ochre); }

/* i18n language switch — brief fade instead of an abrupt text swap */
[data-i18n], [data-i18n-dynamic], [data-i18n-placeholder] { transition: opacity 0.16s ease; }
body.i18n-transition [data-i18n], body.i18n-transition [data-i18n-dynamic] { opacity: 0; }

/* 5. Nút Hamburger menu (cho mobile) màu tối */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 1.5px; 
  background: var(--ink); /* Gạch ngang màu tối */
}

.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: var(--ink); flex-direction: column;
  justify-content: center; align-items: center; gap: 2rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-display); font-size: 2rem; font-weight: 400;
  color: var(--cream); letter-spacing: -0.01em;
  transition: color 0.3s;
}
.mobile-menu a:hover { color: var(--ochre); }
.mobile-close {
  position: absolute; top: 20px; right: 32px;
  background: none; border: none; color: var(--cream);
  font-size: 2rem; cursor: pointer; font-family: var(--font-body);
  font-weight: 300;
}



/* ── TravelHero ───────────────────────────────────
   Search-first hero: full-bleed crossfading photo backdrop (inspiration
   only), with the value proposition + search card anchored to the bottom.
   Accent: brand blue #2B7CB8. Slides crossfade via .is-active; the
   timer + search context switching live in LandingPage's inline
   script (data-th-* / data-hsearch-*). */
.th-hero {
  position: relative;
  margin-top: 68px; /* .nav is position:fixed at this height — push the hero
                        photo below it so the image is never hidden under the bar */
  padding: 0;
  min-height: 40rem;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  --th-blue: #2B7CB8;
  --th-blue-dark: #1D5D82;
}
/* The carousel IS the hero backdrop — fills the whole section */
.th-carousel {
  position: absolute; inset: 0;
  display: grid;
  overflow: hidden;
}
.th-slides {
  display: grid;
  grid-area: 1 / 1;
}
.th-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s 0.6s;
}
.th-slide.is-active {
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition: visibility 0s 0s;
}
/* Full-bleed background photo — crossfade target */
.th-slide-bg {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.th-slide.is-active .th-slide-bg {
  opacity: 1;
}
.th-slide-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Foreground — bottom-anchored search card */
.th-inner {
  position: relative;
  z-index: 3;
  max-width: 64rem;
  width: 100%;
  margin: 0 auto;
  padding: 4.5rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Search card — white rounded panel: tabs on top, input + CTA below */
.th-search-card {
  width: 100%;
  max-width: 48rem;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
}
/* Service tabs — Tour / Trong nước / Quốc tế / Thủ tục Visa as peers */
.th-nav {
  display: flex; align-items: center; gap: 0.25rem;
  justify-content: flex-start;
  overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
  padding: 0.15rem;
}
.th-nav::-webkit-scrollbar { display: none; }
.th-nav-pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.95rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; white-space: nowrap;
  font-family: inherit; cursor: pointer;
  border: none;
  color: #5C7680; background: transparent;
  transition: color 0.2s, background 0.2s;
}
.th-nav-pill:hover { background: rgba(43, 124, 184, 0.08); color: #1D5D82; }
.th-nav-pill.is-active {
  background: #2B7CB8; color: #fff;
}
/* Search row — big input + primary CTA */
.th-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: #F4FAFD;
  border: 1px solid rgba(43, 124, 184, 0.18);
  border-radius: 0.9rem;
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  margin-top: 0.4rem;
}
.th-search-input {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
}
.th-search-input svg { color: #2B7CB8; flex-shrink: 0; }
.th-search-input input {
  width: 100%; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 1.05rem; color: #123642;
}
.th-search-input input::placeholder { color: rgba(92, 118, 128, 0.6); }
.th-search-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.th-btn {
  padding: 0.72rem 1.5rem; border-radius: 999px;
  font-size: 0.95rem; font-weight: 700; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: none;
  transition: background 0.2s, transform 0.2s;
}
.th-btn--search {
  color: #fff; background: #2B7CB8;
}
.th-btn--search:hover { background: #1D5D82; transform: scale(1.02); }

/* ── Tour sections — unified design system ─────────
   All three tour sections (Sản Phẩm Nổi Bật / Trong nước / Quốc tế) share
   one card (.tour-sale-ticket), one carousel (.tc-carousel) and one
   section header. Tokens below are the single source for radius/spacing;
   the card is photo-led with a fixed 4:3 image, badge overlays, a
   destination + green-rating row, a 2-line clamped title, and a price +
   pill CTA. Desktop uses arrow buttons (no native scrollbar); a peek of
   the next card always signals more content. */
.tour-section {
  background: #fff;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
}
.tour-section-inner {
  max-width: 1280px; width: 100%; margin: 0 auto;
}
.tour-section--intl {
  background: linear-gradient(180deg, #F4FAFD 0%, #fff 100%);
}

/* ── Section header — shared by every section ── */
.section-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; margin-bottom: 2.25rem;
}
.section-header-aside {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  max-width: 42ch;
}
.section-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.6rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink);
}
.section-title em {
  font-style: italic; font-weight: 600; color: var(--sun);
}
.section-sub {
  font-size: 0.95rem; line-height: 1.7; color: var(--muted);
}
.section-action {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; color: var(--ochre);
  transition: gap 0.2s ease;
}
.section-action:hover { gap: 0.65rem; }
.tour-section--intl .section-label { color: #1C6E8C; }
.tour-section--intl .section-title { color: #163B4D; }
.tour-section--intl .section-title em { color: var(--sun); }
.tour-section--intl .section-sub { color: #5C7680; }

/* ── Featured section header (keeps its own title treatment) ── */
.ft-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.25rem;
}
.ft-title {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
}
.ft-subtitle { margin-top: 0.3rem; color: var(--muted); font-size: 0.92rem; }
.ft-tabs { display: inline-flex; gap: 0.25rem; background: #E9F0F6; border-radius: 999px; padding: 0.25rem; }
.ft-tab {
  border: none; background: none; cursor: pointer; font-family: inherit;
  padding: 0.5rem 1.15rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 500; color: var(--muted);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.ft-tab.is-active { background: #fff; color: var(--ochre); box-shadow: 0 1px 3px rgba(15,23,42,0.14); }
.ft-tab:not(.is-active):hover { color: var(--ink); }

/* ── Carousel — shared rail with peek + arrows ── */
.tc-carousel {
  position: relative;
  display: flex; flex-direction: column;
}
.tc-carousel.is-empty .tc-viewport { display: none; }
.tc-viewport {
  overflow: hidden;
  padding: 0.25rem 0 1.5rem;
  margin: 0 2.25rem; /* room for the floating arrows */
}
.tc-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  transform: translateX(0);
  transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
.tc-arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 999px; background: #fff; border: none; cursor: pointer;
  color: var(--ink); box-shadow: 0 4px 12px rgba(15,23,42,0.18);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.tc-arrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); box-shadow: 0 6px 16px rgba(15,23,42,0.24); }
/* Disabled = at the start/end of the list — arrow stays clearly visible
   (just non-interactive) so the carousel affordance reads in every tab. */
.tc-arrow:disabled {
  cursor: default;
  opacity: 1;
  background: #E9F0F6;
  color: #9AA7B2;
  box-shadow: 0 2px 6px rgba(15,23,42,0.08);
}
.tc-arrow--left { left: 0; }
.tc-arrow--right { right: 0; }
.tc-empty { padding: 2rem 0; color: var(--muted); }

/* ── TourCard — the single card for every section ── */
.tour-sale-ticket {
  flex: 0 0 auto;
  width: var(--tc-card-w, clamp(220px, 24vw, 280px));
  display: flex; flex-direction: column;
  background: #fff;
  text-decoration: none; color: inherit;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(18,54,66,0.06), 0 10px 24px rgba(18,54,66,0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tour-sale-ticket:hover {
  box-shadow: 0 4px 10px rgba(18,54,66,0.08), 0 18px 36px rgba(18,54,66,0.16);
  transform: translateY(-4px) rotate(-0.35deg);
}

/* 4:3 photo, fixed ratio (no layout shift), rounded 16px */
.ticket-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sand);
}
.ticket-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-sale-ticket:hover .ticket-media img { transform: scale(1.04); }

/* Badge overlays — region TL, wishlist TR, duration bottom-left.
   They never overlap: each is pinned to its own corner. */
.ticket-wish {
  position: absolute; top: 0.65rem; right: 0.65rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  transition: color 0.2s, transform 0.2s;
}
.ticket-wish:hover { transform: scale(1.08); }
.ticket-wish[aria-pressed="true"] { color: #EF4444; }
.ticket-wish[aria-pressed="true"] svg { fill: currentColor; }
.ticket-badge-featured {
  position: absolute; top: 0.65rem; left: 0.65rem; z-index: 2;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff; background: var(--sun);
  padding: 0.28rem 0.6rem; border-radius: 999px;
}
.ticket-region-tag {
  position: absolute; top: 0.65rem; left: 0.65rem; z-index: 1;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff;
  padding: 0.28rem 0.6rem; border-radius: 999px;
  white-space: nowrap;
}
.ticket-badge-featured + .ticket-region-tag { top: 2.75rem; }
.ticket-region-tag--mien_bac { background: var(--eucalyptus); }
.ticket-region-tag--mien_trung { background: var(--sun); }
.ticket-region-tag--mien_nam { background: var(--ochre); }
.ticket-duration {
  position: absolute; bottom: 0.65rem; left: 0.65rem; z-index: 2;
  font-size: 0.7rem; font-weight: 600;
  color: var(--ink); background: rgba(255, 255, 255, 0.92);
  padding: 0.28rem 0.65rem; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
  white-space: nowrap;
}

/* Body — meta row, clamped title, departure, price + CTA */
.ticket-body {
  position: relative;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.05rem 0.85rem 0.4rem;
  flex-grow: 1;
}
/* Signature device: a punched perforation line where the photo tears away
   from the ticket stub below — the card's one deliberate ornament. */
.ticket-body::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0.85rem; right: 0.85rem;
  height: 5px;
  background-image: radial-gradient(circle, var(--sand) 1.7px, transparent 1.8px);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: center;
}
.ticket-meta {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 1.25rem; /* reserved even when the location is empty/redundant */
}
.ticket-location {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; font-weight: 500; color: var(--muted);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticket-location svg { flex-shrink: 0; color: var(--ochre); }

.ticket-name {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.35; color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2); /* same baseline across cards */
}
/* Departure row — a boarding stub, not a form field. Set in the site's own
   "data" typeface (IBM Plex Mono, the same face .pe-manifest/.pe-stamp use
   for record-of-fact text) and the departure-stamp orange --sun, which the
   token list already reserves for exactly this. A dashed left rule stands
   in for the ticket's tear edge instead of a boxed, tinted pill.
   All schedules sit directly on the card as a scroll-snap strip with round
   arrows either side — the site's own carousel affordance (disabled-at-
   the-end .tc-arrow language), scaled down and self-contained, rather than
   a page-level engine or a click-to-reveal popover: the dates and the way
   to reach more of them are both visible without any interaction at all. */
.ticket-departure {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.15rem 0;
  min-height: 1.9rem; /* reserved even when there are no departure dates */
}
.ticket-departure-carousel {
  display: flex; align-items: center; gap: 0.3rem;
  min-width: 0; flex: 1;
}
.ticket-departure-track {
  display: flex; flex-wrap: nowrap; gap: 0.3rem;
  list-style: none; margin: 0; padding: 0.1rem 0.05rem;
  flex: 1; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ticket-departure-track::-webkit-scrollbar { display: none; }
.ticket-departure-track li {
  scroll-snap-align: start;
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.72rem; font-weight: 600;
  color: var(--ink); background: rgba(239,123,69,0.08);
  border: 1px solid rgba(239,123,69,0.35);
  border-radius: 4px; padding: 0.17rem 0.42rem;
}
.ticket-departure-arrow {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(239,123,69,0.4);
  color: #B85A2E; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(18,54,66,0.1);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.ticket-departure-arrow:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(18,54,66,0.16);
}
.ticket-departure-arrow:focus-visible {
  outline: 2px solid var(--sun); outline-offset: 1px;
}
.ticket-departure-arrow:disabled {
  cursor: default; opacity: 0.35; box-shadow: none;
}

/* Price + CTA — one row, same baseline in every card */
.ticket-footer {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1.5px dashed rgba(43, 124, 184, 0.28);
}
.ticket-price {
  display: flex; align-items: baseline; gap: 0.35rem;
  min-width: 0;
}
.ticket-fare-label {
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  flex-shrink: 0;
}
.ticket-fare-amount {
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--rust);
  display: inline-block; max-width: 100%; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticket-cta {
  display: flex; align-items: center; gap: 0.3rem;
  flex-shrink: 1; min-width: 0;
  font-size: 0.7rem; font-weight: 600;
  color: #fff; background: var(--ochre);
  padding: 0.4rem 0.75rem; border-radius: 999px;
  transition: background 0.25s;
}
.ticket-cta span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-cta svg { transition: transform 0.3s; }
.tour-sale-ticket:hover .ticket-cta { background: var(--rust); }
.tour-sale-ticket:hover .ticket-cta svg { transform: translateX(3px); }

/* English only — "from 12.990.000 đ" + "View details" is ~245px wide, wider
   than the footer of a narrow card. One row, nothing clipped: the CTA keeps its
   natural size and the price font scales to the space left beside it
   (container-query units). Below the width where even the smallest legible
   price can't fit, the CTA drops to its own row rather than overlap the price. */
html[lang="en"] .ticket-footer {
  --cta-reserve: 7.3rem; /* CTA width + gap */
  container-type: inline-size;
  flex-wrap: wrap;
}
html[lang="en"] .ticket-price {
  /* label + gap + longest price ≈ 9.2em wide */
  font-size: clamp(0.65rem, calc((100cqi - var(--cta-reserve)) / 9.3), 0.98rem);
  gap: 0.36em; flex: 1 1 auto; white-space: nowrap;
}
html[lang="en"] .ticket-fare-label { font-size: 0.8em; }
html[lang="en"] .ticket-fare-amount { font-size: 1em; overflow: visible; text-overflow: clip; max-width: none; }
html[lang="en"] .ticket-cta { flex: 0 0 auto; margin-left: auto; }
html[lang="en"] .ticket-cta span { overflow: visible; text-overflow: clip; }
html[lang="en"] .ticket-cta svg { flex-shrink: 0; }
@container (max-width: 13.3rem) {
  html[lang="en"] .ticket-price { flex-basis: 100%; }
}

/* International — same card, section-tinted accents only */
.tour-section--intl .ticket-fare-amount { color: #1C6E8C; }
.tour-section--intl .ticket-cta { background: #1C6E8C; }
.tour-section--intl .tour-sale-ticket:hover .ticket-cta { background: #163B4D; }

/* Grid cards fill their cell — the fixed clamp width belongs to the carousel
   tracks only, where flex: 0 0 auto sizes the slides. Shadow/hover now live
   on the base .tour-sale-ticket rule, so every tour card (landing carousels
   and the /tours grid) shares the exact same framed look. */
.tours-grid .tour-sale-ticket {
  flex: none;
  width: 100%;
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tour-sale-ticket, .ticket-media img, .ticket-cta svg, .tc-track { transition: none; }
  .tour-sale-ticket:hover { transform: none; }
}

/* ── Destination chapters ───────────────────────── */
/* Two full-bleed sections: Trong nước rides the daylight cream page;
   Quốc tế is a night flight — warm ink, cream text, ochre route lights */
.place-section {
  padding: clamp(4.5rem, 8vw, 7.5rem) clamp(1.5rem, 5vw, 4rem);
}
.place-section-inner {
  max-width: 1280px; margin: 0 auto;
}
.place-section--intl {
  background: #0A1E28;
  position: relative;
}
.place-section--intl .place-section-inner { position: relative; z-index: 1; }
.place-section--intl .section-label { color: #5FA8D3; }
.place-section--intl .section-title { color: #EAF6FC; }
.place-section--intl .section-title em { color: #7FA3B8; }
.place-section--intl .section-sub { color: #7FA3B8; }
.place-section--intl .cat-chip {
  color: rgba(244,250,253,0.62);
  border-color: rgba(244,250,253,0.22);
}
.place-section--intl .cat-chip:hover { color: var(--cream); border-color: var(--cream); }
.place-section--intl .cat-chip--active {
  color: #fff; background: var(--ochre); border-color: var(--ochre);
}
.place-section--intl .cat-empty { color: #7FA3B8; }
.place-section--intl .btn-view-all {
  color: var(--cream);
  border-color: rgba(248,243,234,0.35);
}
.place-section--intl .btn-view-all:hover {
  background: var(--cream); color: var(--ink); border-color: var(--cream);
}

.cat-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
}
.cat-chip {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.cat-chip:hover { color: var(--ink); border-color: var(--ink); }
.cat-chip--active {
  color: #fff;
  background: var(--ochre);
  border-color: var(--ochre);
}

/* Filterable destination grid — magazine opener: the first visible
   destination leads at 4×2, the rest follow three-up */
.place-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: 16px;
}
.cat-card {
  position: relative; overflow: hidden; cursor: pointer;
  border-radius: 4px;
  grid-column: span 2;
  aspect-ratio: 3 / 2;
  background: var(--ink);
  text-decoration: none;
  display: block;
  transition: transform 0.5s cubic-bezier(0.19,1,0.22,1), box-shadow 0.5s;
}
a.cat-card:hover, a.cat-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(9,25,33,0.28);
}
.cat-card--lead {
  grid-column: span 4;
  grid-row: span 2;
  aspect-ratio: auto;
  min-height: 320px;
}
.cat-card--wide {
  grid-column: span 3;
  aspect-ratio: 21 / 10;
}
.cat-card[hidden] { display: none; }
.cat-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 6rem 2rem;
  color: var(--muted);
}
.cat-empty p {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.cat-empty span { font-size: 0.85rem; opacity: 0.6; }

.cat-view-all {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.btn-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2.2rem;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn-view-all:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.cat-bg {
  position: absolute; inset: 0;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1), filter 0.6s;
  filter: saturate(0.92);
  object-fit: cover;
}
.cat-card:hover .cat-bg,
.cat-card:focus-visible .cat-bg { transform: scale(1.05); filter: saturate(1.1); }
.cat-img-element {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Hoạt động tương tự như background-size: cover */

}
/* Landscape gradients — cycle across the full filtered set. Cùng một họ
   xanh dương, chỉ khác độ sâu/tông để mỗi thẻ vẫn phân biệt được. */
.cat-card:nth-of-type(6n+1) .cat-bg { background: linear-gradient(160deg, #0B2436 0%, #123642 25%, #1C6E8C 55%, #4FA8D8 80%, #8FD1E8 100%); }
.cat-card:nth-of-type(6n+2) .cat-bg { background: linear-gradient(160deg, #041E2A 0%, #0A4A6E 40%, #1A82B8 70%, #4ECDE6 100%); }
.cat-card:nth-of-type(6n+3) .cat-bg { background: linear-gradient(160deg, #06323A 0%, #0F5C68 35%, #2FB6AE 65%, #6FD7CE 100%); }
.cat-card:nth-of-type(6n+4) .cat-bg { background: linear-gradient(160deg, #38BDF8 0%, #0EA5E9 30%, #7DD3FC 55%, #F0F9FF 100%); }
.cat-card:nth-of-type(6n+5) .cat-bg { background: linear-gradient(135deg, #0A1B26 0%, #123642 30%, #1C6E8C 55%, #6FB3DC 80%, #A8D8F0 100%); }
.cat-card:nth-of-type(6n+6) .cat-bg { background: linear-gradient(160deg, #0A1E3D 0%, #1E3A6E 30%, #3B6FA8 60%, #8FBEDD 100%); }

.cat-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,16,13,0.42) 0%, transparent 26%),
    linear-gradient(to top, rgba(20,16,13,0.88) 0%, rgba(20,16,13,0.28) 42%, transparent 68%);
}

/* Printed-plate hairline frame */
.cat-frame {
  position: absolute; inset: 10px;
  border: 1px solid rgba(248,243,234,0.24);
  border-radius: 2px;
  pointer-events: none;
  transition: border-color 0.5s;
}
.cat-card:hover .cat-frame,
.cat-card:focus-visible .cat-frame { border-color: rgba(248,243,234,0.55); }

.cat-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.4rem, 2vw, 1.8rem);
}
.card-wrapper {
  position: relative;
}
/* Route code — atlas plate header: — 01 · Miền Bắc */
.cat-route {
  display: flex; align-items: baseline; gap: 0.55rem;
  color: rgba(248,243,234,0.92);
}
.cat-route::before {
  content: '';
  align-self: center;
  width: 20px;
  border-top: 1px solid rgba(248,243,234,0.55);
}
.cat-number {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;
  line-height: 1;
}
.cat-route-label {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1;
}
/* Ngày khởi hành sắp tới — con dấu lịch góc trên phải, chỉ thẻ quốc tế.
   Cùng ngôn ngữ với .dst-depart trên trang điểm đến. Mỗi tour trong danh mục
   là một dòng riêng, cùng cỡ chữ như nhau — không tour nào "nổi bật" hơn
   tour khác, tên tour lộ ra qua title khi hover từng dòng. */
.cat-depart {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: flex; flex-direction: column; align-items: stretch;
  min-width: 92px;
  padding: 0.5rem 0.7rem 0.55rem;
  background: rgba(248,243,234,0.95);
  border-radius: 8px;
  box-shadow: 0 10px 24px -12px rgba(20,16,13,0.6);
  color: var(--ink);
}
.cat-depart-label {
  font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sun); text-align: center;
  padding-bottom: 0.32rem; margin-bottom: 0.32rem;
  border-bottom: 2px dotted rgba(239,123,69,0.5);
  white-space: nowrap;
}
.cat-depart-row {
  display: flex; align-items: baseline; justify-content: center;
  gap: 0.36rem; padding: 0.2rem 0; cursor: default;
}
.cat-depart-row + .cat-depart-row {
  border-top: 1px dotted rgba(239,123,69,0.32);
}
.cat-depart-row:hover .cat-depart-day,
.cat-depart-row:hover .cat-depart-my { color: var(--sun); }
.cat-depart-day {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.cat-depart-my {
  font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.cat-depart-more-count {
  display: block; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sun); text-align: center;
  margin-top: 0.28rem; padding-top: 0.28rem;
  border-top: 1px dotted rgba(239,123,69,0.32);
}

.cat-bottom { display: flex; flex-direction: column; }
.cat-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: 0.01em;
  color: var(--cream); line-height: 1.05;
}
/* Flight route that draws itself on hover */
.cat-trail {
  width: min(170px, 55%);
  margin: 0.7rem 0 0;
  border-top: 2px dotted rgba(232,164,92,0.9);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.cat-card:hover .cat-trail,
.cat-card:focus-visible .cat-trail,
.cat-card--lead .cat-trail { transform: scaleX(1); }
/* Blurb rises in beneath the route */
.cat-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.16,1,0.3,1);
}
.cat-reveal > .cat-desc { overflow: hidden; }
.cat-card:hover .cat-reveal,
.cat-card:focus-visible .cat-reveal,
.cat-card--lead .cat-reveal { grid-template-rows: 1fr; }
.cat-desc {
  font-size: 0.8rem; font-weight: 300; color: rgba(248,243,234,0.75);
  line-height: 1.5; max-width: 34ch;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s 0.12s, transform 0.5s 0.12s;
}
.cat-desc:not(:empty) { padding-top: 0.55rem; }
.cat-card:hover .cat-desc,
.cat-card:focus-visible .cat-desc,
.cat-card--lead .cat-desc { opacity: 1; transform: translateY(0); }
.cat-card--lead .cat-content { padding: clamp(1.6rem, 2.6vw, 2.4rem); }
.cat-card--lead .cat-name { font-size: clamp(2.1rem, 3.4vw, 3.1rem); }
.cat-card--lead .cat-desc {
  font-size: 0.9rem; max-width: 48ch;
}
.cat-card--wide .cat-name { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.cat-arrow {
  position: absolute; bottom: 1.4rem; right: 1.4rem;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(248,243,234,0.92);
  display: grid; place-items: center; color: var(--ink);
  opacity: 0; transform: translateX(-8px) rotate(-40deg);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.cat-card:hover .cat-arrow,
.cat-card:focus-visible .cat-arrow { opacity: 1; transform: translateX(0) rotate(0deg); }

/* Touch devices: no hover — show the full plate */
@media (hover: none) {
  .cat-trail { transform: scaleX(1); }
  .cat-reveal { grid-template-rows: 1fr; }
  .cat-desc { opacity: 1; transform: none; }
  .cat-arrow { opacity: 1; transform: none; }
}

/* ── Manifesto strip ────────────────────────────── */
.manifesto {
  margin: 0;
  /* Content-sized — no viewport minimum, so the panel carries zero blank
     space beyond its own padding. */
  height: auto;
  padding: clamp(4.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 3.5vw, 3rem);
  background: #fff;
  border-top: 1px solid rgba(28,110,140,0.18);
  border-bottom: 1px solid rgba(28,110,140,0.18);
  position: relative; overflow: visible;
}
.manifesto-inner {
  max-width: 1200px; width: 100%; margin: 0 auto;
  position: relative; z-index: 1;
}

/* Two-column spread: declaration+CTA left (~58%), differentiators+contact
   right (~42%) — top-aligned so a short right rail doesn't get stretched
   or re-centered against the taller headline. */
.manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.manifesto-main {
  padding-top: 0.35rem; /* optically align the label with the aside's label */
}
.manifesto-aside {
  display: flex; flex-direction: column;
  gap: clamp(2rem, 3vw, 2.5rem);
}
.manifesto-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ochre);
  margin-bottom: 1.75rem;
  position: relative; padding-left: 3.2rem;
}
/* Ruler tick — echoes the lat/long grid overlay */
.manifesto-label::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 2.4rem; height: 1px; background: var(--ochre);
}

/* The declaration is the section's visual — sized to read as one confident
   statement without dominating the panel; balanced by text-wrap so no
   line breaks awkwardly on its own container width. */
.manifesto-statement {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.1vw, 3.75rem);
  font-weight: 340; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 0;
  text-wrap: balance;
}
.mani-line { display: block; }
/* Emphasis stays the same size as the rest of the headline — italic +
   brand blue carry the weight, not scale. */
.mani-em {
  font-style: italic; font-weight: 600; letter-spacing: 0.01em;
  color: var(--rust);
  position: relative; display: inline-block;
  padding-bottom: 0.22em;
}
/* Dotted flight route — a subtle accent under the key phrase, never a
   giant underline; scales with the text and never overlaps it. */
.mani-route {
  position: absolute; left: 0; bottom: 0.02em; width: 100%; height: 0.5em;
  opacity: 0.75;
  clip-path: inset(-20% 100% -20% 0);
  transition: clip-path 1.4s cubic-bezier(0.65,0,0.15,1) 0.6s;
}
.mani-line.visible .mani-route { clip-path: inset(-20% 0 -20% 0); }

@media (prefers-reduced-motion: reduce) {
  .mani-route { transition: none; }
}

/* Primary CTA — the one conversion action in the section, in the site's
   established ticket-cta idiom (solid pill, arrow nudges on hover). */
.mani-cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: var(--ochre); color: #fff;
  font-family: var(--font-body);
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.mani-cta svg { transition: transform 0.3s ease; flex-shrink: 0; }
.mani-cta:hover, .mani-cta:focus-visible {
  background: var(--rust);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(29,93,130,0.25);
}
.mani-cta:hover svg, .mani-cta:focus-visible svg { transform: translateX(3px); }
.mani-cta:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .mani-cta, .mani-cta svg { transition: none; }
}

/* Right rail — live promotions, not a static feature list: this is the
   "what's on offer right now" counterpart to the manifesto's "why us" on
   the left, so the column reads as current business content rather than
   marketing copy. Compact editorial rows, no cards/shadows/badges — each
   row is a real <a> (full keyboard + touch target) with a hairline divider
   between items instead of a border. */
.manifesto-promos-label {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem); font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
  margin-bottom: 0.4rem;
}
.manifesto-promos-sub {
  font-size: 0.85rem; color: var(--muted);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.manifesto-promos-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.manifesto-promo-item { border-top: 1px solid rgba(28,110,140,0.14); }
.manifesto-promo-item:first-child { border-top: none; }
.manifesto-promo-link {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.65rem 0;
  min-height: 3.25rem; /* 52px — dense but comfortable tap target */
  text-decoration: none;
  transition: gap 0.2s ease;
}
.manifesto-promo-num {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 600; color: var(--ochre);
  flex-shrink: 0; min-width: 1.4rem;
}
.manifesto-promo-title {
  flex: 1; min-width: 0;
  font-size: 0.95rem; font-weight: 500; color: var(--ink);
  line-height: 1.4;
  transition: color 0.2s ease;
}
.manifesto-promo-arrow { flex-shrink: 0; color: var(--muted); transition: transform 0.2s ease, color 0.2s ease; }
.manifesto-promo-link:hover, .manifesto-promo-link:focus-visible {
  gap: 1.15rem;
}
.manifesto-promo-link:hover .manifesto-promo-title,
.manifesto-promo-link:focus-visible .manifesto-promo-title {
  color: var(--rust);
}
.manifesto-promo-link:hover .manifesto-promo-arrow,
.manifesto-promo-link:focus-visible .manifesto-promo-arrow {
  color: var(--rust);
  transform: translateX(3px);
}
.manifesto-promo-link:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 2px; }

/* Empty state — a dashed "ticket" outline echoes a voucher slot waiting to be
   filled, with one soft CTA so the rail is never a dead end. */
.manifesto-promos-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  padding: 1.25rem 1.25rem 1.1rem;
  border: 1.5px dashed rgba(28,110,140,0.28); border-radius: 12px;
}
.manifesto-promos-empty-icon { color: var(--ochre); margin-bottom: 0.3rem; }
.manifesto-promos-empty-title { font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.manifesto-promos-empty-sub { font-size: 0.86rem; color: var(--muted); line-height: 1.6; }
.manifesto-promos-empty-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; margin-top: 0.4rem;
  font-size: 0.88rem; font-weight: 600; color: var(--rust); text-decoration: none;
}
.manifesto-promos-empty-link svg { transition: transform 0.2s ease; }
.manifesto-promos-empty-link:hover svg, .manifesto-promos-empty-link:focus-visible svg { transform: translateX(3px); }
.manifesto-promos-empty-link:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .manifesto-promo-link, .manifesto-promo-title, .manifesto-promo-arrow,
  .manifesto-promos-empty-link svg { transition: none; }
}

/* Right-rail base: contact list under a hairline rule, introduced by a
   small eyebrow. */
.manifesto-foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
  padding-top: clamp(1.75rem, 2vw, 2rem);
  border-top: 1px solid rgba(28,110,140,0.25);
}
.manifesto-foot-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rust);
}

/* Stacked contact list in the right rail */
.manifesto-contacts {
  display: flex; flex-direction: column;
  gap: 0.6rem;
}
.manifesto-contact {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.83rem; font-weight: 400; color: var(--muted);
  text-decoration: none; transition: color 0.2s ease;
  min-height: 2rem; /* comfortable tap target on touch */
}
.manifesto-contact:hover, .manifesto-contact:focus-visible { color: var(--ochre); }
.manifesto-contact svg { flex-shrink: 0; color: var(--muted); transition: color 0.2s ease; }
.manifesto-contact:hover svg, .manifesto-contact:focus-visible svg { color: var(--ochre); }
.manifesto-contact-label { font-weight: 600; }
.manifesto-contact:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

/* ── Footer ─────────────────────────────────────── */
footer {
  background: var(--ink); color: rgba(248,243,234,0.55);
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
}
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  align-items: start; gap: 1.5rem 2.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(248,243,234,0.1);
  margin-bottom: 1.25rem;
}
.footer-brand .logo-footer {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700; color: var(--cream);
  letter-spacing: -0.02em; display: block; margin-bottom: 0.5rem;
}
.footer-brand .logo-footer em { font-weight: 500; letter-spacing: 0.02em; }
.footer-brand .brand-company-en {
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(248,243,234,0.35); margin-bottom: 0.5rem;
}
.footer-brand p { font-size: 0.85rem; line-height: 1.6; max-width: 260px; }
.footer-brand .brand-contact { margin-top: 0.25rem; }
.footer-brand .brand-contact p {
  display: flex; align-items: flex-start; gap: 0.5rem;
}
.footer-brand .brand-contact p + p { margin-top: 0.6rem; }
.brand-icon { flex-shrink: 0; margin-top: 0.15rem; color: rgba(248,243,234,0.45); }
.footer-brand .brand-license {
  font-size: 0.78rem; color: rgba(248,243,234,0.4);
  margin: 1rem 0; padding-top: 0.75rem;
  border-top: 1px solid rgba(248,243,234,0.08);
}
.brand-address {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  font-size: 0.78rem; color: rgba(248,243,234,0.4); line-height: 1.5;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(248,243,234,0.08);
}
.brand-address p {
  display: flex; align-items: center; gap: 0.5rem;
  flex: 0 1 auto; white-space: nowrap; margin: 0;
}

.footer-col h4 {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream);
  margin-bottom: 0.75rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a {
  font-size: 0.85rem; color: rgba(248,243,234,0.55);
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--cream); }

.footer-notice {
  display: flex; padding: 1.25rem 0;
  font-size: 0.78rem;
}
.footer-notice a {
  color: rgba(248,243,234,0.4); transition: color 0.3s;
}
.footer-notice a:hover { color: var(--cream); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: 0.78rem; color: rgba(248,243,234,0.3);
}
.footer-socials { display: flex; gap: 0.5rem; }
.social-btn {
  width: 30px; height: 30px; border-radius: 2px;
  border: 1px solid rgba(248,243,234,0.15);
  display: grid; place-items: center; color: rgba(248,243,234,0.5);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.social-btn:hover { border-color: var(--ochre); color: var(--ochre); }
.staff-link {
  color: rgba(248,243,234,0.2); font-size: 0.75rem;
  transition: color 0.3s;
}
.staff-link:hover { color: rgba(248,243,234,0.5); }

/* ── Keyframes ───────────────────────────────────── */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lineUnfoldIn {
  from { transform: translateY(105%) translateX(-6%) rotateX(-55deg) skewY(2deg); opacity: 0; }
  to   { transform: translateY(0) translateX(0) rotateX(0deg) skewY(0deg); opacity: 1; }
}
@keyframes eyebrowIn {
  from { opacity: 0; transform: translateX(-18px); letter-spacing: 0.55em; }
  to   { opacity: 1; transform: translateX(0); letter-spacing: 0.25em; }
}
@keyframes emberPulse {
  0%, 100% { text-shadow: 0 4px 28px rgba(20,16,13,0.45), 0 0 0 rgba(227,154,76,0); }
  50%      { text-shadow: 0 4px 28px rgba(20,16,13,0.45), 0 0 22px rgba(227,154,76,0.4); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); transform-origin: top; }
  50%       { opacity: 1; transform: scaleY(1); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Scroll reveal ───────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.19,1,0.22,1),
              transform 0.8s cubic-bezier(0.19,1,0.22,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.45s; }
.reveal-delay-5 { transition-delay: 0.6s; }
.reveal-delay-6 { transition-delay: 0.75s; }

/* ── Responsive ─────────────────────────────────── */
/* TravelHero breakpoints: sm centers the tabs; below sm the search becomes
   a vertical form and the tabs scroll horizontally. */
@media (min-width: 640px) {
  .th-nav { justify-content: center; }
}
@media (max-width: 639px) {
  .th-hero { min-height: 34rem; min-height: 94svh; }
  .th-inner { padding: 4rem 0.75rem 2.5rem; }
  .th-nav-pill { padding: 0.4rem 0.6rem; font-size: 0.78rem; gap: 0.3rem; }
  /* Two-row wrap on mobile so all four services (incl. Thủ tục Visa) stay
     visible without scrolling — visa must never be hidden behind a swipe. */
  .th-nav {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    row-gap: 0.35rem;
  }
  /* Vertical form — input on top, CTA full-width below (touch-friendly) */
  .th-search {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem;
  }
  .th-search-input { padding: 0.15rem 0.25rem; }
  .th-search-input input { font-size: 1rem; }
  .th-btn--search { justify-content: center; padding: 0.8rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-bg, .cat-trail, .cat-reveal, .cat-desc, .cat-arrow, .cat-frame { transition: none; }
  .th-slide-bg { transition: none; }
}

/* ── Tour sections responsive ──────────────────── */
/* Desktop arrows float beside the viewport; tablet/mobile keep them but
   tighter, and the section header stacks (no 2-column squeeze). */
@media (max-width: 900px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .section-header-aside { max-width: none; }
  .section-sub { text-align: left; }
  .tc-viewport { margin: 0 1.5rem; }
}
@media (max-width: 639px) {
  .tour-section { padding: 3rem 1rem 2rem; }
  .tc-viewport { margin: 0 1.25rem; }
  .tc-arrow { width: 36px; height: 36px; }
  .tc-arrow--left { left: -2px; }
  .tc-arrow--right { right: -2px; }
  .ft-header { align-items: flex-start; flex-direction: column; }
  .ft-tabs { align-self: stretch; justify-content: stretch; }
  .ft-tab { flex: 1 1 0; }
  html[lang="en"] .ticket-footer { --cta-reserve: 7.9rem; }
  .ticket-fare-amount { font-size: 0.95rem; }
  .ticket-cta { padding: 0.45rem 0.75rem; font-size: 0.75rem; }
}

@media (max-width: 900px) {
  .nav-links, .nav-cta, .nav-divider { display: none; }
  .nav-cluster .nav-dropdown-item { display: none; }
  .nav-actions .lang-switch { display: none; }
  .nav-cluster { gap: 0; }
  .nav-hamburger { display: flex; }
  .place-grid { grid-template-columns: 1fr 1fr; }
  .cat-card { grid-column: span 1; }
  .cat-card--lead { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; min-height: 0; }
  .cat-card--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
  /* Mobile doesn't inherit desktop's clamp floor — set explicitly so the
     section grows with content instead of carrying a ~72-88px top pad
     that was sized for a two-column desktop row. */
  .manifesto { padding-top: 3rem; padding-bottom: 2.5rem; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .manifesto-main { padding-top: 0; }
  .manifesto-statement { font-size: clamp(2.1rem, 7vw, 3.2rem); }
  .manifesto-aside { gap: 2rem; }
  .manifesto-foot { gap: 1.25rem 1.5rem; }
  .manifesto-contacts { gap: 0.65rem; width: 100%; }
  .manifesto-partners { margin-top: 2.5rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .place-grid { grid-template-columns: 1fr; }
  .cat-card, .cat-card--lead, .cat-card--wide { grid-column: span 1; aspect-ratio: 4/3; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .brand-address p { white-space: normal; }
}

/* ── Previous Events + Travel News — "the dossier": a white band between
   the tour listings and the manifesto, proving the sales pitch above with
   evidence of trips already delivered. Two-column layout: an events
   carousel on the left (~62%, one card per completed project), a compact
   news list on the right (~38%). The signature device is the rotated
   ink-stamp badge on each event photo — the same tear-perforation
   vocabulary the tour tickets use (.ticket-body::before), taken one step
   further into a passport/boarding-pass "confirmed" stamp, because these
   are literally records of trips the company has already run. IBM Plex
   Mono (loaded only on this page) marks the manifest count and stamp text
   as data, distinct from the display copy set in Inter. */
.prev-events-section {
  --pe-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 5vw, 4.5rem);
  background: #fff;
  border-top: 1px solid var(--border);
  position: relative;
}
.pe-container {
  max-width: 1280px; width: 100%; margin: 0 auto;
}
.pe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.pe-section-title { color: var(--ink); }
.pe-section-title em { color: var(--sun); font-style: italic; }
.pe-news-title { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }

.pe-events-header, .pe-news-header { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pe-news-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
/* Manifest line — real count, set in the "data" face so it reads as a
   record rather than marketing copy. */
.pe-manifest {
  font-family: var(--pe-mono);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 0.6rem;
}
.pe-manifest::before { content: '// '; color: var(--sun); }

.pe-see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ochre);
  text-decoration: none;
  border-bottom: 1px solid rgba(43,124,184,0.35);
  padding-bottom: 0.15rem;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.pe-see-all:hover { border-color: var(--ochre); color: var(--rust); }

/* ── Events carousel — reuses the site's generic .tc-carousel mechanism
   (arrows, track transform) from the tour sections above; only the arrow
   skin changes for a white surface. ── */
.pe-carousel .tc-viewport { padding: 0.35rem 0 0.75rem; }
.pe-carousel .tc-arrow { border: 1px solid var(--border); }

.pe-card {
  flex: 0 0 var(--tc-card-w, clamp(250px, 30vw, 300px));
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.pe-card:hover {
  box-shadow: 0 4px 10px rgba(18,54,66,0.06), 0 18px 32px rgba(18,54,66,0.1);
  transform: translateY(-3px);
}
.pe-card-img {
  position: relative;
  margin: 0.65rem 0.65rem 0;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: visible;
  background: var(--sand);
}
.pe-card-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.pe-card:hover .pe-card-img img { transform: scale(1.04); }

/* Simple horizontal tag overlapping the photo's lower edge. */
.pe-stamp {
  position: absolute; left: 0.85rem; bottom: -0.85rem; z-index: 2;
  font-family: var(--pe-mono);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sun);
  background: #fff;
  border: 1.5px solid var(--sun);
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  box-shadow: 0 2px 6px rgba(18,54,66,0.1);
  white-space: nowrap;
}

.pe-card-body {
  padding: 1.5rem 0.9rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.pe-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pe-card-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Compact news list — vertical stack, dashed dividers borrowed from the
   same perforation vocabulary as the ticket cards. ── */
.tn-mini-list { display: flex; flex-direction: column; }
.tn-mini-card {
  display: flex; gap: 0.9rem; align-items: flex-start;
  color: inherit; text-decoration: none;
  padding: 1rem 0;
  border-top: 1.5px dashed var(--border);
}
.tn-mini-card:first-child { padding-top: 0; border-top: none; }
.tn-mini-img {
  flex: 0 0 68px;
  width: 68px; height: 68px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.tn-mini-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.tn-mini-card:hover .tn-mini-img img { transform: scale(1.05); }
.tn-mini-body { min-width: 0; }
.tn-mini-date {
  display: inline-block;
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sun);
  margin-bottom: 0.35rem;
}
.tn-mini-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.25s;
}
.tn-mini-card:hover .tn-mini-title { color: var(--ochre); }

@media (max-width: 900px) {
  .prev-events-section { padding: clamp(3rem, 7vw, 3.5rem) clamp(1rem, 5vw, 2rem) 2.5rem; }
  .pe-grid { grid-template-columns: 1fr; gap: 3rem; }
  .pe-card { flex-basis: var(--tc-card-w, clamp(220px, 68vw, 270px)); }
}

@media (prefers-reduced-motion: reduce) {
  .pe-card-img img, .tn-mini-img img, .pe-card { transition: none; }
}

/* Short-viewport safety net (landscape phones/tablets, small laptop
   windows) — the panel is content-sized and scrolls normally, so this only
   trims the headline a touch rather than hiding any content. */
@media (max-height: 700px) {
  .manifesto-statement { font-size: clamp(1.7rem, 5vw, 2.8rem); }
}

/* ── Partners ────────────────────────────────────── */
/* --- ĐỐI TÁC TIÊU BIỂU — nested inside .manifesto-inner, directly under
   the stats/contacts row, sharing the manifesto's light-blue panel. --- */
.manifesto-partners {
  margin-top: clamp(3rem, 4vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(28,110,140,0.25); /* same hairline as .manifesto-foot */
  text-align: center;
}

.partners-title {
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

/* Khung chứa slider, bật flex để 2 cụm nối đuôi nhau nằm ngang */
.partners-slider {
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden; 
  position: relative;
  display: flex; 
}

/* Hiệu ứng làm mờ (fade) mượt mà ở 2 cạnh màn hình */
.partners-slider::before,
.partners-slider::after {
  content: '';
  position: absolute;
  top: 0;
  width: 150px; 
  height: 100%;
  z-index: 2;
  pointer-events: none; /* Để không cản trở việc di chuột vào logo ở rìa */
}
.partners-slider::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%); /* manifesto bg */
}
.partners-slider::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%); /* manifesto bg */
}

/* Container bao bọc các logo */
.partners-group {
  display: flex;
  align-items: center;
  gap: 50px; /* Khoảng cách giữa các khung logo */
  padding-right: 50px; /* Phải bằng với gap để vòng lặp nối liền mạch */
  animation: scroll 52s linear infinite; 
}

/* TẠO KHUNG VÀ SCALE HÌNH ẢNH */
.partners-group img {
  width: 160px; /* Cố định chiều rộng của khung */
  height: 80px; /* Cố định chiều cao của khung */
  
  /* ĐIỂM MẤU CHỐT: Ngăn Flexbox bóp méo hoặc ép các khung đè lên nhau */
  flex-shrink: 0; 
  
  /* Scale hình ảnh vừa vặn vào bên trong khung, không bị méo tỉ lệ */
  object-fit: contain; 
  
  /* Grayscale but legible — strong enough to read as real logos (social
     proof), not so faded they look decorative/placeholder. */
  filter: grayscale(100%) opacity(0.85);
  transition: filter 0.3s, opacity 0.3s;
}

.partners-group img:hover {
  filter: grayscale(0%) opacity(1);
}

/* Pause the marquee on hover so a visitor can actually read/click a logo. */
.partners-slider:hover .partners-group {
  animation-play-state: paused;
}


/* Animation dịch chuyển chu kỳ 100% không khựng gãy */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners-group { animation: none; }
  .partners-group[aria-hidden="true"] { display: none; }
}

/* ── Full-screen section content-safety override ─── */
/* The per-section `height: 100vh; overflow: hidden;` above clips anything
   that doesn't fit one screen — real risk once tour counts, translated
   copy, or a smaller viewport push a section past 100vh. This turns the
   height into a *minimum* instead of a hard cap: content that fits still
   reads as one full-screen block; content that doesn't grows the section
   and the page scrolls normally past it, so nothing is ever hidden.
   (.ft-section no longer locks 100vh — it's content-sized — so it's
   intentionally not listed here.) */