/* ==========================================================================
   Connext Travel — "Golden Hour" design system
   Deep ink · warm paper · sunrise orange / amber · sky blue
   ========================================================================== */
:root {
  --ink: #0b2545;
  --ink-2: #132238;
  --ink-3: #1d3150;
  --paper: #ffffff;
  --cream: #fff6e3;
  --white: #fff;
  --text: #1b2a3c;
  --muted: #6a7686;
  --line: rgba(11, 21, 36, .1);
  --line-light: rgba(255, 255, 255, .14);
  --orange: #ff7a1a;
  --orange-d: #e85d00;
  --amber: #ffb000;
  --sky: #38b6f2;
  --sky-d: #0a7fc0;
  --green: #18a058;
  --red: #e5383b;
  --sun: linear-gradient(105deg, #ff6a00 0%, #ff9a1f 45%, #ffc23d 100%);
  --ff-serif: "Kanit", system-ui, sans-serif;
  --ff-sans: "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --r-m: 20px;
  --r-l: 30px;
  --sh-s: 0 2px 10px rgba(11, 21, 36, .06);
  --sh-m: 0 18px 40px -18px rgba(11, 21, 36, .28);
  --sh-l: 0 40px 80px -30px rgba(11, 21, 36, .45);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font-family: var(--ff-sans); font-size: 16px; line-height: 1.7; color: var(--text); background: var(--paper); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink); line-height: 1.22; font-weight: 600; }
h1, h2, .display { font-family: var(--ff-serif); letter-spacing: -.015em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 500; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.accent { font-style: italic; background: var(--sun); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.container { width: min(1280px, 100% - 40px); margin-inline: auto; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--amber); color: var(--ink); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: .76rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--orange-d); }
.eyebrow::before { content: ""; width: 34px; height: 1.5px; background: currentColor; }
.dark .eyebrow, .eyebrow.light { color: var(--amber); }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.12rem); color: var(--muted); max-width: 620px; }
.dark .lead { color: rgba(255, 255, 255, .65); }

/* ------------------------------------------------ Grain */
.grain { position: fixed; inset: -50%; z-index: 999; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* ------------------------------------------------ Preloader */
.preloader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--ink); color: #fff; transition: clip-path 1.1s var(--ease-io); clip-path: inset(0 0 0 0); }
.is-loaded .preloader { clip-path: inset(0 0 100% 0); }
.preloader-inner { display: grid; justify-items: center; gap: 18px; }
.preloader img { width: 130px; filter: brightness(0) invert(1); }
.preloader-bar { width: 180px; height: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.preloader-bar span { display: block; height: 100%; width: 100%; background: var(--sun); transform-origin: left; animation: pl 1.2s var(--ease) forwards; }
.preloader small { font-size: .68rem; letter-spacing: .4em; text-transform: uppercase; opacity: .6; }
@keyframes pl { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------ Cursor */
.cursor { position: fixed; left: 0; top: 0; z-index: 998; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--amber); transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .3s, opacity .3s; }
.cursor.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(255, 176, 0, .92); }
.cursor-label { position: fixed; left: 0; top: 0; z-index: 998; pointer-events: none; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s; }
.cursor-label.show { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-label { display: none; } }

/* ------------------------------------------------ Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1em 1.7em; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; isolation: isolate; font-weight: 600; font-size: .95rem; line-height: 1.1; white-space: nowrap; background: var(--ink); color: #fff; transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .4s; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--orange); transform: translateY(101%); transition: transform .55s var(--ease); }
.btn:hover::after { transform: translateY(0); }
.btn .ic { transition: transform .45s var(--ease); }
.btn:hover .ic { transform: translateX(4px); }
.btn-primary { background: var(--sun); color: #fff; box-shadow: 0 14px 30px -12px rgba(255, 106, 0, .7); }
.btn-primary::after { background: var(--ink); }
.btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost::after { background: #fff; }
.btn-ghost:hover { color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline::after { background: var(--ink); }
.btn-outline:hover { color: #fff; }
.btn-sky { background: linear-gradient(105deg, #0a7fc0, #38b6f2); }
.btn-dark { background: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { color: #fff; }
.btn-line { background: #06c755; }
.btn-sm { padding: .7em 1.2em; font-size: .86rem; }
.btn-lg { padding: 1.15em 2em; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: .92rem; }
.link-arrow .circ { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid currentColor; transition: background .4s, color .4s, border-color .4s, transform .5s var(--ease); }
.link-arrow:hover .circ { background: var(--orange); border-color: var(--orange); color: #fff; transform: rotate(-45deg); }

/* ------------------------------------------------ Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--header-h); display: flex; align-items: center; color: #fff; transition: background .5s, color .5s, height .5s var(--ease), transform .6s var(--ease), box-shadow .5s; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 12, 22, .55), transparent); transition: opacity .5s; pointer-events: none; }
.site-header.scrolled { --header-h: 70px; color: var(--ink); background: rgba(251, 248, 242, .88); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); box-shadow: 0 1px 0 var(--line); }
.site-header.scrolled::before { opacity: 0; }
.site-header.hide { transform: translateY(-100%); }
.nav-wrap { display: flex; align-items: center; gap: 28px; }
.brand { display: block; height: 54px; transition: height .5s var(--ease); }
.brand img { height: 100%; width: auto; transition: filter .5s; filter: brightness(0) invert(1); }
.scrolled .brand { height: 46px; }
.scrolled .brand img { filter: none; }
.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-nav > ul > li > a { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-weight: 500; font-size: .95rem; }
.main-nav > ul > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li > a.is-active::after { transform: scaleX(1); transform-origin: left; }
.main-nav .caret { width: 10px; transition: transform .4s var(--ease); }
.has-drop { position: relative; }
.has-drop:hover .caret, .has-drop:focus-within .caret { transform: rotate(180deg); }
.drop { position: absolute; top: calc(100% + 14px); left: 50%; width: 580px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 22px; background: rgba(11, 21, 36, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line-light); box-shadow: var(--sh-l); color: #fff; opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .4s var(--ease), transform .5s var(--ease), visibility .4s; }
.drop::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 130px; padding: 14px 16px; border-radius: 16px; overflow: hidden; isolation: isolate; }
.drop-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.drop-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 12, 22, .9), rgba(5, 12, 22, .1)); }
.drop-card:hover img { transform: scale(1.1); }
.drop-card b { font-family: var(--ff-serif); font-size: 1.08rem; font-weight: 600; }
.drop-card small { font-size: .76rem; color: rgba(255, 255, 255, .72); line-height: 1.4; }
.drop-laos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 4px 2px; }
.drop-laos > span { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); padding: 0 8px 0 4px; }
.drop-laos a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-light); font-size: .82rem; transition: background .3s, border-color .3s; }
.drop-laos a:hover { background: var(--orange); border-color: var(--orange); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.lang-switch { position: relative; display: flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); transition: border-color .5s; }
.scrolled .lang-switch { border-color: var(--line); }
.lang-switch a { position: relative; z-index: 1; padding: 4px 10px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; border-radius: 999px; opacity: .7; transition: opacity .3s, color .3s; }
.lang-switch a.on { opacity: 1; color: var(--ink); }
.lang-pill { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--amber); transition: transform .5s var(--ease); }
.lang-switch a:nth-child(2).on ~ .lang-pill { transform: translateX(100%); }
.nav-login { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .92rem; padding: 8px 2px; }
.nav-user { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--sun); color: #fff; font-weight: 700; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.nav-user img { width: 100%; height: 100%; object-fit: cover; }
.burger { display: none; position: relative; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: transparent; cursor: pointer; color: inherit; }
.scrolled .burger { border-color: var(--line); }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), opacity .3s, top .5s var(--ease), right .5s var(--ease); }
.burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 23px; } .burger span:nth-child(3) { top: 28px; right: 21px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 23px; right: 14px; transform: rotate(-45deg); }
.menu-open .site-header { color: #fff; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-open .site-header .brand img { filter: brightness(0) invert(1); }

.mobile-menu { position: fixed; inset: 0; z-index: 190; color: #fff; }
.mobile-menu-bg { position: absolute; inset: 0; background: var(--ink); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io); }
.mobile-menu-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 100% 100%, rgba(255, 122, 26, .35), transparent), radial-gradient(50% 40% at 0% 0%, rgba(56, 182, 242, .2), transparent); }
.mobile-menu.open .mobile-menu-bg { clip-path: inset(0 0 0 0); }
.mobile-menu-inner { position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; overflow-y: auto; padding: calc(var(--header-h) + 30px) 24px 40px; }
.mobile-menu-inner > a:not(.btn) { font-family: var(--ff-serif); font-size: 2.1rem; line-height: 1.35; padding: 4px 0; }
.mobile-menu-inner > * { opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.mobile-menu.open .mobile-menu-inner > * { opacity: 1; transform: none; }
.mobile-menu.open .mobile-menu-inner > *:nth-child(2) { transition-delay: .06s; } .mobile-menu.open .mobile-menu-inner > *:nth-child(3) { transition-delay: .12s; } .mobile-menu.open .mobile-menu-inner > *:nth-child(4) { transition-delay: .18s; } .mobile-menu.open .mobile-menu-inner > *:nth-child(5) { transition-delay: .24s; } .mobile-menu.open .mobile-menu-inner > *:nth-child(6) { transition-delay: .3s; } .mobile-menu.open .mobile-menu-inner > *:nth-child(7) { transition-delay: .36s; } .mobile-menu.open .mobile-menu-inner > *:nth-child(8) { transition-delay: .42s; }
.mm-sub { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.mm-sub a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-light); font-size: .9rem; }
.mobile-menu-inner .btn { margin-top: 18px; }
.mm-phone { display: flex !important; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--ff-sans) !important; font-size: 1.15rem !important; color: var(--amber); }

/* ------------------------------------------------ Reveal / split */
.reveal { opacity: 0; transform: translateY(50px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.split-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.split-line > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s var(--ease); transition-delay: var(--d, 0ms); }
.in .split-line > span, .split-line.in > span, .no-js .split-line > span { transform: none; }
.img-reveal { position: relative; overflow: hidden; }
.img-reveal::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform-origin: top; transition: transform 1.4s var(--ease-io); transition-delay: var(--d, 0ms); z-index: 2; }
.cream .img-reveal::after { background: var(--cream); }
.img-reveal.in::after { transform: scaleY(0); }
.img-reveal > img { transform: scale(1.25); transition: transform 2s var(--ease); transition-delay: var(--d, 0ms); }
.img-reveal.in > img { transform: scale(1); }

/* ------------------------------------------------ Sections */
.section { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.section-tight { padding: clamp(50px, 7vw, 90px) 0; }
.dark { background: var(--ink); color: rgba(255, 255, 255, .72); }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.cream { background: var(--cream); }
.sec-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 70px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow::after { content: ""; width: 34px; height: 1.5px; background: currentColor; }
.split-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; max-width: none; }
.split-head > div { max-width: 720px; }
.sec-head h2 { margin-bottom: .3em; }

/* ------------------------------------------------ HERO */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 700px; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.hero-slides { position: absolute; inset: 0; z-index: -2; }
.hero-slide { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path 1.6s var(--ease-io); overflow: hidden; }
.hero-slide.is-active { clip-path: inset(0 0 0 0); z-index: 2; }
.hero-slide.is-prev { clip-path: inset(0 0 0 0); z-index: 1; }
.hero-slide img { position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; object-fit: cover; transform: scale(1.2); transition: transform 9s cubic-bezier(.25, .46, .45, .94); }
.hero-slide.is-active img, .hero-slide.is-prev img { transform: scale(1.02); }
.hero-parallax { position: absolute; inset: 0; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform 1.2s var(--ease); }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 12, 22, .8) 0%, rgba(5, 12, 22, .42) 48%, rgba(5, 12, 22, .08) 78%), linear-gradient(0deg, rgba(5, 12, 22, .88) 0%, transparent 42%); }
.hero-inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: var(--header-h); padding-bottom: 190px; }
.hero-title { font-family: var(--ff-serif); font-weight: 500; font-size: clamp(2.9rem, 7.2vw, 7rem); line-height: 1.06; letter-spacing: -.025em; color: #fff; margin: 0 0 26px; }
.hero-title .split-line > span { transition-duration: 1.6s; }
.is-loaded .hero-title .split-line > span { transform: none; }
.hero-sub { max-width: 540px; font-size: clamp(1rem, 1.3vw, 1.12rem); color: rgba(255, 255, 255, .8); margin-bottom: 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.is-loaded .hero .fade-up { opacity: 1; transform: none; }
.hero-meta { position: absolute; right: max(20px, (100vw - 1280px) / 2); top: 50%; transform: translateY(-50%); display: grid; gap: 22px; z-index: 3; }
.hero-dot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; background: none; border: 0; padding: 0; color: rgba(255, 255, 255, .55); cursor: pointer; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; transition: color .4s; }
.hero-dot span { opacity: 0; transform: translateX(10px); transition: opacity .4s, transform .5s var(--ease); white-space: nowrap; }
.hero-dot i { display: block; width: 26px; height: 1.5px; background: currentColor; transition: width .6s var(--ease), background .4s; }
.hero-dot.on { color: #fff; }
.hero-dot.on i { width: 56px; background: var(--amber); }
.hero-dot.on span, .hero-dot:hover span { opacity: 1; transform: none; }
.hero-counter { position: absolute; left: 0; right: 0; bottom: 156px; z-index: 3; }
.hero-counter .container { display: flex; align-items: center; gap: 18px; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.hero-counter b { font-family: var(--ff-serif); font-size: 1.3rem; color: #fff; letter-spacing: 0; font-weight: 500; }
.hero-progress { flex: 0 0 120px; height: 1.5px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.hero-progress span { display: block; height: 100%; background: var(--amber); transform-origin: left; transform: scaleX(0); }
.hero-progress span.run { animation: prog var(--dur, 7s) linear forwards; }
@keyframes prog { to { transform: scaleX(1); } }
.hero-place { display: inline-flex; align-items: center; gap: 8px; transition: opacity .4s; }
.hero-place .ic { color: var(--amber); }

/* Booking bar */
.book-bar { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 4; }
.book-bar form { display: grid; grid-template-columns: 1fr 1.5fr 1fr auto; align-items: stretch; border-radius: 22px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); overflow: hidden; }
.bb-field { padding: 16px 24px; border-right: 1px solid rgba(255, 255, 255, .16); display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.bb-field label, .bb-field small { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.bb-value { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-value .ic { color: var(--amber); }
.bb-field select { appearance: none; width: 100%; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right center / 11px; padding: 0 22px 0 0; color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer; text-overflow: ellipsis; }
.bb-field select:focus { outline: none; }
.bb-field select option { color: var(--ink); }
.bb-price strong { font-family: var(--ff-serif); font-size: 1.7rem; font-weight: 600; color: #fff; line-height: 1.1; display: inline-block; }
.bb-price strong .cur { color: var(--amber); font-size: .65em; margin-right: 2px; }
.bb-price.bump strong { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: translateY(-4px); color: var(--amber); } }
.book-bar .btn { border-radius: 0; padding-inline: 36px; font-size: 1rem; box-shadow: none; }

/* ------------------------------------------------ Intro */
.intro { padding: clamp(100px, 12vw, 170px) 0 clamp(60px, 8vw, 110px); }
.intro-grid { display: grid; grid-template-columns: 240px 1fr; gap: 40px; }
.intro-text { font-family: var(--ff-serif); font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.42; color: var(--ink); letter-spacing: -.01em; margin: 0; }
.intro-text .w { opacity: .13; transition: opacity .5s; }
.intro-text .w.on { opacity: 1; }
.intro-text .hl { font-style: italic; color: var(--orange-d); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(50px, 7vw, 90px); border-top: 1px solid var(--line); }
.stat-cell { padding: 30px 26px 0 0; }
.stat-cell b { display: block; font-family: var(--ff-serif); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 500; line-height: 1; color: var(--ink); }
.stat-cell b sup { font-size: .42em; color: var(--orange); vertical-align: super; margin-left: 2px; }
.stat-cell > span { display: block; margin-top: 10px; color: var(--muted); font-size: .9rem; }

/* ------------------------------------------------ Marquee */
.marquee { overflow: hidden; padding: 28px 0; border-block: 1px solid var(--line); }
.marquee-track { display: flex; width: max-content; animation: slide-x 70s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 44px; padding-right: 44px; font-family: var(--ff-serif); font-size: clamp(1.4rem, 2.6vw, 2.2rem); color: var(--ink); white-space: nowrap; }
.marquee span::after { content: "✦"; font-size: .55em; color: var(--orange); }
.marquee span:nth-child(3n+2) { font-style: italic; color: var(--muted); }
@keyframes slide-x { to { transform: translateX(-50%); } }

/* ------------------------------------------------ Services panels */
.svc-row { display: flex; gap: 14px; height: clamp(520px, 72vh, 660px); }
.svc-panel { position: relative; flex: 1; min-width: 0; border-radius: var(--r-l); overflow: hidden; isolation: isolate; color: #fff; transition: flex 1s var(--ease); }
.svc-panel:hover, .svc-panel:focus-within { flex: 2.3; }
.svc-panel > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 1.8s var(--ease); }
.svc-panel:hover > img { transform: scale(1.02); }
.svc-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 12, 22, .92) 0%, rgba(5, 12, 22, .3) 55%, rgba(5, 12, 22, .1) 100%); }
.svc-panel > .cover-link { position: absolute; inset: 0; z-index: 1; }
.svc-num { position: absolute; top: 24px; left: 26px; font-size: .76rem; letter-spacing: .2em; color: rgba(255, 255, 255, .8); }
.svc-go { position: absolute; top: 18px; right: 18px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); transition: background .4s, transform .6s var(--ease); pointer-events: none; }
.svc-panel:hover .svc-go { background: var(--orange); transform: rotate(-45deg); }
.svc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; z-index: 2; pointer-events: none; }
.svc-body h3 { font-family: var(--ff-serif); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 500; color: #fff; margin-bottom: 8px; }
.svc-body p { max-width: 380px; font-size: .94rem; color: rgba(255, 255, 255, .8); margin: 0; opacity: 0; max-height: 0; transform: translateY(14px); transition: opacity .6s, transform .8s var(--ease), max-height .8s var(--ease); }
.svc-panel:hover .svc-body p, .svc-panel:focus-within .svc-body p { opacity: 1; max-height: 160px; transform: none; transition-delay: .25s; }
.svc-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; pointer-events: auto; opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .8s var(--ease); }
.svc-panel:hover .svc-subs, .svc-panel:focus-within .svc-subs { opacity: 1; transform: none; transition-delay: .35s; }
.svc-subs a { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px); font-size: .82rem; white-space: nowrap; transition: background .3s, border-color .3s; }
.svc-subs a:hover { background: var(--orange); border-color: var(--orange); }

/* ------------------------------------------------ 3D ring */
.ring-section { overflow: hidden; }
.ring-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 45% at 50% 65%, rgba(255, 122, 26, .22), transparent 70%); pointer-events: none; }
.ring-stage { position: relative; height: clamp(480px, 52vw, 680px); perspective: 1800px; perspective-origin: 50% 25%; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ring-stage:active { cursor: grabbing; }
.ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.ring-card { --cw: clamp(240px, 23vw, 330px); --ch: clamp(330px, 32vw, 450px); position: absolute; left: calc(var(--cw) / -2); top: calc(var(--ch) / -2); width: var(--cw); height: var(--ch); margin: 0; border-radius: 22px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9); }
.ring-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ring-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 12, 22, .85), transparent 55%); }
.ring-card figcaption { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: #fff; }
.ring-card small { display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.ring-card b { font-family: var(--ff-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.25; }
.ring-card a { position: absolute; inset: 0; z-index: 3; }
.ring-hint { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 6px; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.ring-hint i { width: 44px; height: 1px; background: currentColor; }

/* ------------------------------------------------ Rates */
.rates-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.rates-visual { position: sticky; top: calc(var(--header-h) + 30px); height: min(76vh, 700px); border-radius: var(--r-l); overflow: hidden; color: #fff; }
.rates-visual > img { width: 100%; height: 100%; object-fit: cover; }
.rates-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 12, 22, .9), rgba(5, 12, 22, 0) 60%); z-index: 1; }
.rv-text { position: absolute; left: 30px; right: 30px; bottom: 30px; z-index: 3; }
.rv-text b { display: block; font-family: var(--ff-serif); font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 500; line-height: 1.25; margin-bottom: 8px; }
.rv-text span { color: rgba(255, 255, 255, .75); font-size: .95rem; }
.rate-list { list-style: none; margin: 0; padding: 0; }
.rate-row { --zc: #e8a100; position: relative; display: grid; grid-template-columns: 64px 1fr auto 46px; align-items: center; gap: 16px; padding: 18px 6px; border-bottom: 1px solid var(--line); isolation: isolate; transition: padding .5s var(--ease); }
.rate-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--zc) 14%, transparent), transparent); transition: width .7s var(--ease); z-index: -1; }
.rate-row:hover { padding-left: 18px; }
.rate-row:hover::before { width: 100%; }
.rate-code { font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: var(--zc); white-space: nowrap; }
.rate-code::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--zc); margin-right: 8px; vertical-align: 1px; }
.rate-name { min-width: 0; }
.rate-name b { display: block; font-family: var(--ff-serif); font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink); line-height: 1.4; }
.rate-name small { display: block; font-size: .8rem; color: var(--muted); }
.rate-price { font-family: var(--ff-serif); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; color: var(--ink); white-space: nowrap; }
.rate-price .cur { font-size: .6em; color: var(--orange); margin-right: 2px; vertical-align: .35em; }
.rate-go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); transition: background .4s, color .4s, border-color .4s, transform .5s var(--ease); }
.rate-row:hover .rate-go { background: var(--orange); color: #fff; border-color: var(--orange); transform: rotate(-45deg); }
.rate-row .cover-link { position: absolute; inset: 0; z-index: 2; }
.zone-1 { --zc: #e8a100; } .zone-2 { --zc: #e5486b; } .zone-3 { --zc: #12a26b; } .zone-4 { --zc: #8b5cf6; } .zone-5 { --zc: #0a92d6; } .zone-6 { --zc: #ff7a1a; }
.rates-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 34px; }
.rates-foot p { margin: 0; color: var(--muted); font-size: .9rem; }
.rates-cols { columns: 2; column-gap: 56px; }
.rates-cols .rate-row { break-inside: avoid; }
.hire-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.hire-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 32px; border-radius: var(--r-m); background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; transition: transform .6s var(--ease); }
.hire-card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 176, 0, .45), transparent 70%); z-index: -1; transition: transform .8s var(--ease); }
.hire-card:hover { transform: translateY(-6px); }
.hire-card:hover::before { transform: scale(1.6); }
.hire-card small { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.hire-card b { display: block; font-family: var(--ff-serif); font-size: 1.45rem; font-weight: 500; }
.hire-card .note { font-size: .86rem; color: rgba(255, 255, 255, .6); }
.hire-card .price { font-family: var(--ff-serif); font-size: 2.3rem; font-weight: 600; white-space: nowrap; }
.hire-card .price .cur { color: var(--amber); font-size: .6em; }
.search-line { position: relative; max-width: 460px; margin-bottom: 30px; }
.search-line .ic { position: absolute; left: 0; top: 50%; translate: 0 -50%; color: var(--muted); }
.search-line input { width: 100%; padding: 14px 0 14px 34px; border: 0; border-bottom: 1.5px solid rgba(11, 21, 36, .18); background: transparent; font-size: 1.05rem; transition: border-color .3s; }
.search-line input:focus { outline: none; border-color: var(--orange); }

/* ------------------------------------------------ Horizontal tours */
.hscroll { position: relative; overflow: hidden; }
.hs-track { display: flex; gap: 26px; padding-left: max(20px, (100vw - 1280px) / 2); padding-right: max(20px, (100vw - 1280px) / 2); will-change: transform; }
.hs-track .tour-card { flex: 0 0 clamp(290px, 29vw, 410px); }
.hs-progress { width: min(1280px, 100% - 40px); margin: 50px auto 0; height: 1.5px; background: var(--line); }
.hs-progress span { display: block; height: 100%; width: 100%; background: var(--sun); transform-origin: left; transform: scaleX(0); }
.dark .hs-progress { background: var(--line-light); }

/* Tour card */
.tour-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; isolation: isolate; color: #fff; background: var(--ink-2); box-shadow: var(--sh-m); }
.tour-card .cover { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.8s var(--ease); }
.tour-card:hover .cover { transform: scale(1.14); }
.tour-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 12, 22, .94) 0%, rgba(5, 12, 22, .35) 48%, rgba(5, 12, 22, .05) 72%); }
.tour-card-link { position: absolute; inset: 0; z-index: 3; }
.tc-top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; }
.chip .ic { width: 14px; height: 14px; }
.tc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; }
.tc-body h3 { font-family: var(--ff-serif); font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 500; line-height: 1.3; color: #fff; margin-bottom: 10px; }
.tc-body p { font-size: .88rem; color: rgba(255, 255, 255, .74); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; max-height: 0; opacity: 0; transition: max-height .8s var(--ease), opacity .6s, margin .6s var(--ease); }
.tour-card:hover .tc-body p { max-height: 4em; opacity: 1; margin-bottom: 16px; }
.tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); }
.tc-price small { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.tc-price b { font-family: var(--ff-serif); font-size: 1.35rem; font-weight: 600; }
.tc-price b.ask { font-family: var(--ff-sans); font-size: 1rem; color: var(--amber); }
.tc-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .16); transition: background .4s, transform .6s var(--ease); }
.tour-card:hover .tc-arrow { background: var(--orange); transform: rotate(-45deg); }
.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }

/* ------------------------------------------------ Car cards */
.car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 26px; }
.car-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); background: #fff; overflow: hidden; box-shadow: var(--sh-s); border: 1px solid var(--line); transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.car-card:hover { transform: translateY(-8px); box-shadow: var(--sh-l); }
.car-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.car-media .cover { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.car-card:hover .cover { transform: scale(1.08); }
.car-media .chip { position: absolute; left: 16px; top: 16px; background: rgba(11, 21, 36, .55); }
.car-body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.car-body h3 { font-family: var(--ff-serif); font-size: 1.5rem; font-weight: 500; margin-bottom: 10px; }
.car-specs { display: flex; gap: 18px; margin-bottom: 12px; font-size: .86rem; color: var(--muted); }
.car-specs span { display: inline-flex; align-items: center; gap: 6px; }
.car-specs .ic { color: var(--orange); }
.car-body > p { font-size: .92rem; color: var(--muted); }
.checks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; font-size: .9rem; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .ic { width: 18px; height: 18px; color: var(--green); margin-top: 3px; }
.car-prices { display: flex; margin: auto 0 18px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.car-prices > div { flex: 1; padding: 12px 16px; }
.car-prices > div + div { border-left: 1px solid var(--line); }
.car-prices small { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.car-prices b { font-family: var(--ff-serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); }

/* ------------------------------------------------ Feature split */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.feat-wrap { position: relative; }
.parallax-frame { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 5; }
.parallax-frame > img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.frame-badge { position: absolute; right: 0; bottom: 0; z-index: 3; padding: 22px 28px; border-top-left-radius: 28px; background: var(--paper); }
.frame-badge b { display: block; font-family: var(--ff-serif); font-size: 2.6rem; font-weight: 500; line-height: 1; color: var(--ink); }
.frame-badge span { font-size: .82rem; color: var(--muted); }
.float-photo { position: absolute; left: -44px; bottom: 70px; width: 40%; aspect-ratio: 1; border-radius: 22px; overflow: hidden; border: 6px solid var(--paper); box-shadow: var(--sh-l); z-index: 3; }
.float-photo img { width: 100%; height: 100%; object-fit: cover; }
.why-list { list-style: none; padding: 0; margin: 34px 0 0; }
.why-item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.why-item:last-child { border-bottom: 1px solid var(--line); }
.why-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cream); color: var(--orange-d); transition: background .4s, color .4s, transform .6s var(--ease); }
.why-item:hover .why-ic { background: var(--orange); color: #fff; transform: rotate(-12deg) scale(1.06); }
.why-ic .ic { width: 24px; height: 24px; }
.why-item h3 { font-family: var(--ff-serif); font-weight: 500; font-size: 1.25rem; margin: 2px 0 4px; }
.why-item p { margin: 0; font-size: .92rem; color: var(--muted); }

/* Steps */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); }
.step { padding: 44px 36px 10px 0; }
.step + .step { padding-left: 36px; border-left: 1px solid var(--line-light); }
.step-n { display: block; font-family: var(--ff-serif); font-size: 4.6rem; font-weight: 500; line-height: 1; background: var(--sun); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; }
.step h3 { font-family: var(--ff-serif); font-weight: 500; font-size: 1.45rem; }
.step p { margin: 0; font-size: .95rem; }

/* Reviews */
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.review-card { margin: 0; padding: 36px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); transition: transform .6s var(--ease), box-shadow .6s; }
.review-card:hover { transform: translateY(-6px); box-shadow: var(--sh-m); }
.review-card blockquote { margin: 16px 0 26px; font-family: var(--ff-serif); font-size: 1.12rem; line-height: 1.65; color: var(--ink); }
.review-card figcaption { display: flex; align-items: center; gap: 12px; }
.review-card figcaption small { display: block; color: var(--muted); font-size: .8rem; }
.avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--sun); color: #fff; font-weight: 700; }
.stars { display: inline-flex; gap: 3px; }
.stars span { color: #dfe2e7; } .stars span.on { color: var(--amber); }
.stars .ic { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 24px; border: 1px dashed rgba(11, 21, 36, .2); border-radius: var(--r-l); text-align: center; color: var(--muted); }
.empty-state .ic { width: 34px; height: 34px; color: var(--amber); }
.empty-state p { margin: 0; max-width: 440px; }
.dark .empty-state { border-color: var(--line-light); color: rgba(255, 255, 255, .6); }

/* CTA */
.cta-photo { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; color: #fff; isolation: isolate; text-align: center; }
.cta-photo > img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; z-index: -2; will-change: transform; }
.cta-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 50%, rgba(5, 12, 22, .35), rgba(5, 12, 22, .82)); }
.cta-photo h2 { color: #fff; font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1.1; max-width: 15ch; margin: 0 auto 22px; }
.cta-phone { display: inline-block; font-family: var(--ff-serif); font-size: clamp(1.8rem, 4vw, 3rem); color: var(--amber); margin-bottom: 34px; letter-spacing: .02em; transition: color .3s; }
.cta-phone:hover { color: #fff; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-band { padding: 0 0 clamp(70px, 9vw, 120px); }
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding: clamp(40px, 5vw, 70px); border-radius: var(--r-l); overflow: hidden; isolation: isolate; color: #fff; background: var(--ink); }
.cta-inner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .6; transition: transform 2.4s var(--ease); }
.cta-inner:hover > img { transform: scale(1.06); }
.cta-inner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 12, 22, .94), rgba(5, 12, 22, .35)); }
.cta-inner h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 4px; }
.cta-inner .cta-phone { margin: 0; }
.cta-inner .cta-btns { justify-content: flex-end; }

/* Page hero */
.page-hero { position: relative; min-height: 66vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; isolation: isolate; padding: calc(var(--header-h) + 70px) 0 clamp(54px, 7vw, 96px); background: var(--ink); }
.page-hero > img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; z-index: -2; animation: ph-zoom 2.6s var(--ease) both; will-change: transform; }
@keyframes ph-zoom { from { transform: scale(1.15); } to { transform: scale(1); } }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 12, 22, .9) 0%, rgba(5, 12, 22, .35) 55%, rgba(5, 12, 22, .5) 100%); }
.page-hero h1 { color: #fff; font-weight: 500; max-width: 20ch; margin-bottom: 16px; }
.page-hero p { max-width: 640px; color: rgba(255, 255, 255, .8); font-size: 1.08rem; margin: 0; }
.page-hero.short { min-height: 48vh; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: .78rem; letter-spacing: .08em; color: rgba(255, 255, 255, .65); }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb span::before { content: "/"; margin-right: 8px; opacity: .5; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(11, 21, 36, .16); font-weight: 500; font-size: .92rem; color: var(--ink); transition: background .4s, color .4s, border-color .4s; }
.tab .ic { width: 17px; height: 17px; color: var(--orange); }
.tab:hover { border-color: var(--ink); }
.tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tab.on .ic { color: var(--amber); }
.subtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 46px; font-size: .9rem; }
.subtabs > span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.subtabs a { padding: 6px 14px; border-radius: 999px; background: var(--cream); font-weight: 500; transition: background .3s, color .3s; }
.subtabs a:hover { background: var(--orange); color: #fff; }
.notes-card { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: start; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-l); background: var(--cream); }
.notes-card .big-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--amber); }
.notes-card .big-ic .ic { width: 28px; height: 28px; }
.notes-card h2 { font-size: 1.7rem; }
.notes-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.notes-card li { display: flex; gap: 12px; }
.notes-card li .ic { color: var(--green); margin-top: 5px; }

/* Tour detail */
.detail-grid { display: grid; grid-template-columns: 1fr 390px; gap: clamp(30px, 6vw, 80px); align-items: start; }
.detail-main .lead { font-family: var(--ff-serif); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.6; color: var(--ink); max-width: none; margin-bottom: 50px; }
.content-card { margin-bottom: 56px; }
.content-card h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 24px; }
.content-card h2 .ic { color: var(--orange); }
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: tl; }
.timeline li { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); counter-increment: tl; }
.timeline li::before { content: counter(tl, decimal-leading-zero); font-family: var(--ff-serif); font-size: 1.8rem; line-height: 1; color: var(--orange); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.book-box { position: sticky; top: calc(var(--header-h) + 24px); padding: 34px; border-radius: var(--r-l); background: var(--ink); color: rgba(255, 255, 255, .78); overflow: hidden; isolation: isolate; }
.book-box::before { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 122, 26, .45), transparent 70%); z-index: -1; }
.book-box h2 { color: #fff; font-size: .78rem; font-family: var(--ff-sans); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.book-box .bb-price { font-family: var(--ff-serif); font-size: 2.6rem; font-weight: 600; color: #fff; line-height: 1.1; }
.book-box .bb-price small { font-family: var(--ff-sans); font-size: .9rem; font-weight: 400; color: rgba(255, 255, 255, .6); }
.book-box .bb-price .ask { font-size: 1.7rem; color: var(--amber); }
.book-box .bb-meta { display: grid; gap: 12px; margin: 22px 0 26px; padding: 20px 0; border-block: 1px solid var(--line-light); font-size: .93rem; }
.book-box .bb-meta div { display: flex; align-items: center; gap: 10px; }
.book-box .bb-meta b { color: #fff; font-weight: 600; }
.book-box .bb-meta .ic { color: var(--amber); }
.book-box .bb-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.book-box .bb-contact .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .35); }
.book-box .bb-contact .btn-outline::after { background: #fff; }
.book-box .bb-contact .btn-outline:hover { color: var(--ink); }
.book-box .bb-note { font-size: .82rem; text-align: center; margin: 16px 0 0; color: rgba(255, 255, 255, .55); }

/* Forms */
.form-card { padding: clamp(24px, 4vw, 48px); border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); }
.form-card h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.form-card h2 .ic { color: var(--orange); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 7px; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field label .req { color: var(--orange-d); }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(11, 21, 36, .14); background: var(--paper); font-size: 1rem; transition: border-color .3s, box-shadow .3s, background .3s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(255, 122, 26, .12); }
.field select { appearance: none; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230b1524' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center / 11px; padding-right: 40px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--orange); flex: none; }
.type-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.type-pills label { position: relative; cursor: pointer; }
.type-pills input { position: absolute; opacity: 0; }
.type-pills span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px; border-radius: 18px; border: 1px solid rgba(11, 21, 36, .14); text-align: center; font-weight: 600; font-size: .9rem; transition: all .45s var(--ease); }
.type-pills .ic { width: 28px; height: 28px; color: var(--muted); transition: color .3s; }
.type-pills input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; transform: translateY(-3px); box-shadow: var(--sh-m); }
.type-pills input:checked + span .ic { color: var(--amber); }
.type-pills input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.fieldset-title { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; margin: 18px 0 0 !important; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--ff-serif); font-weight: 500; font-size: 1.4rem !important; }
.fieldset-title:first-child { border-top: 0; padding-top: 0; margin-top: 0 !important; }
.booking-grid, .pay-grid { display: grid; grid-template-columns: 1fr 380px; gap: 34px; align-items: start; }
.summary-card { position: sticky; top: calc(var(--header-h) + 24px); padding: 32px; border-radius: var(--r-l); background: var(--ink); color: rgba(255, 255, 255, .72); overflow: hidden; isolation: isolate; }
.summary-card::before { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 176, 0, .35), transparent 70%); z-index: -1; }
.summary-card h2 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.45rem; }
.summary-card h2 .ic { color: var(--amber); }
.sum-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-light); font-size: .92rem; }
.sum-row span:last-child { color: #fff; font-weight: 600; text-align: right; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0; }
.sum-total b { font-family: var(--ff-serif); font-size: 2.3rem; font-weight: 600; color: var(--amber); }
.muted-note { font-size: .8rem; text-align: center; margin: 14px 0 0; color: rgba(255, 255, 255, .5); display: flex; justify-content: center; gap: 6px; align-items: center; }
.alert { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 15px 20px; border-radius: 14px; margin-bottom: 20px; font-weight: 500; border: 1px solid; }
.alert .ic { flex: none; }
.alert-success { background: #e8f7ee; border-color: #a6e2bf; color: #0f6b3a; }
.alert-error { background: #fdecec; border-color: #f5b5b5; color: #9b1c1c; }
.alert-info { background: #fff6e8; border-color: #ffd699; color: #8a4b00; }
.alert-info a { text-decoration: underline; font-weight: 700; }

/* Payment */
.pay-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 24px; }
.pay-tab { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(11, 21, 36, .14); background: #fff; cursor: pointer; font-weight: 600; transition: all .4s var(--ease); }
.pay-tab .ic { width: 24px; height: 24px; color: var(--muted); }
.pay-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.pay-tab[aria-selected="true"] .ic { color: var(--amber); }
.qr-box { display: grid; place-items: center; gap: 12px; padding: 30px; border-radius: 22px; background: var(--cream); text-align: center; }
.qr-box .qr { padding: 16px; background: #fff; border-radius: 18px; box-shadow: var(--sh-m); }
.qr-box .qr img, .qr-box .qr canvas { width: 220px; height: 220px; }
.bank-card { position: relative; padding: 28px; border-radius: 22px; color: #fff; background: linear-gradient(130deg, #0b1524, #1d3150 60%, #0a7fc0); box-shadow: var(--sh-l); overflow: hidden; margin-bottom: 20px; }
.bank-card::after { content: ""; position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 176, 0, .5), transparent 70%); }
.bank-card small { display: block; opacity: .65; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.bank-card b { font-family: var(--ff-serif); font-weight: 500; font-size: 1.2rem; display: block; margin-bottom: 12px; }
.bank-card .acc { font-size: 1.7rem; letter-spacing: .08em; }
.status-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--cream); color: var(--ink); }
.st-pending, .st-unpaid { background: #fff1d6; color: #8a4b00; }
.st-verifying { background: #dff2fc; color: #075985; }
.st-confirmed, .st-paid, .st-completed { background: #dcf5e6; color: #0f6b3a; }
.st-cancelled, .st-failed, .st-refunded { background: #fde2e2; color: #9b1c1c; }
.success-burst { display: grid; place-items: center; width: 100px; height: 100px; margin: 0 auto 22px; border-radius: 50%; background: var(--sun); color: #fff; box-shadow: 0 0 0 14px rgba(255, 176, 0, .15); animation: pop .8s var(--ease); }
.success-burst .ic { width: 48px; height: 48px; stroke-width: 2.4; }
@keyframes pop { 0% { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.12); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 400; }

/* Auth */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.auth-photo { position: relative; overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: clamp(40px, 5vw, 70px); isolation: isolate; }
.auth-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: ph-zoom 3s var(--ease) both; }
.auth-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 12, 22, .88), rgba(5, 12, 22, .15) 60%); }
.auth-photo b { display: block; font-family: var(--ff-serif); font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; line-height: 1.2; max-width: 14ch; }
.auth-side { display: grid; place-items: center; padding: calc(var(--header-h) + 30px) 24px 50px; }
.auth-card { width: min(440px, 100%); }
.auth-card h1 { font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 500; }
.auth-card > p { color: var(--muted); }
.btn-google { width: 100%; background: #fff; color: var(--ink); border: 1px solid rgba(11, 21, 36, .16); }
.btn-google:hover { color: #fff; }
.btn-google .ic { width: 22px; height: 22px; }
.divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-card .field { margin-bottom: 16px; }
.auth-alt { margin-top: 22px; font-size: .92rem; color: var(--muted); }
.auth-alt a { color: var(--orange-d); font-weight: 600; }
.account-grid { display: grid; grid-template-columns: 320px 1fr; gap: 30px; align-items: start; }
.profile-card { text-align: center; }
.big-avatar { width: 100px; height: 100px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sun); color: #fff; font-size: 2.4rem; font-family: var(--ff-serif); box-shadow: 0 0 0 6px var(--cream); }
.big-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bk-list { display: grid; gap: 14px; }
.bk-item { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 22px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s; }
.bk-item:hover { transform: translateY(-3px); box-shadow: var(--sh-m); }
.bk-item h3 { font-family: var(--ff-serif); font-weight: 500; font-size: 1.25rem; margin: 4px 0; }
.bk-item small { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.bk-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.contact-list { list-style: none; margin: 0 0 30px; padding: 0; }
.cc { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease); }
.cc:first-child { border-top: 1px solid var(--line); }
a.cc:hover { padding-left: 12px; }
.cc-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--cream); color: var(--orange-d); }
.cc-ic.line { background: #06c755; color: #fff; } .cc-ic.wa { background: #25d366; color: #fff; }
.cc small { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cc b { font-family: var(--ff-serif); font-weight: 500; font-size: 1.2rem; color: var(--ink); word-break: break-word; }
.map-frame { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 10; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.rating-summary { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 44px; }
.rating-summary .big { font-family: var(--ff-serif); font-size: 5rem; font-weight: 500; line-height: 1; color: var(--ink); }
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { cursor: pointer; color: #dfe2e7; transition: transform .25s, color .25s; margin: 0 !important; }
.star-input label .ic { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--amber); }
.star-input label:hover { transform: scale(1.2) rotate(-10deg); }
.star-input input:focus-visible + label { outline: 2px solid var(--orange); border-radius: 6px; }

/* 404 */
.nf { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 40px) 20px 60px; color: rgba(255, 255, 255, .8); overflow: hidden; isolation: isolate; }
.nf > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.nf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(5, 12, 22, .75); }
.nf h1 { color: #fff; }
.nf .code { font-family: var(--ff-serif); font-size: clamp(7rem, 24vw, 15rem); line-height: 1; background: var(--sun); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Footer */
.site-footer { position: relative; background: var(--ink); color: rgba(255, 255, 255, .62); overflow: hidden; }
.footer-cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; padding: clamp(80px, 10vw, 130px) 0 64px; border-bottom: 1px solid var(--line-light); }
.footer-cta h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.12; margin: 0; max-width: 15ch; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 40px; padding: 64px 0; }
.f-logo { width: 150px; height: auto; filter: brightness(0) invert(1); margin-bottom: 20px; }
.f-about p { max-width: 340px; font-size: .93rem; }
.site-footer h3 { color: #fff; font-family: var(--ff-sans); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 22px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .95rem; }
.site-footer a { transition: color .3s; }
.site-footer a:hover { color: var(--amber); }
.f-contact li { display: flex; gap: 12px; align-items: flex-start; }
.f-contact .ic { color: var(--amber); margin-top: 5px; }
.f-social { display: flex; gap: 10px; margin-top: 22px; }
.f-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-light); color: #fff; transition: background .4s, border-color .4s, transform .5s var(--ease); }
.f-social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-4px); }
.footer-giant { display: flex; width: max-content; font-family: var(--ff-serif); font-weight: 600; font-size: clamp(4rem, 14vw, 14rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap; user-select: none; animation: slide-x 50s linear infinite; padding-bottom: 14px; }
.footer-giant span { padding-right: .4em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .16); }
.footer-giant span:nth-child(even) { -webkit-text-stroke: 0; background: var(--sun); -webkit-background-clip: text; background-clip: text; font-style: italic; }
.footer-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 26px 0 30px; border-top: 1px solid var(--line-light); font-size: .82rem; }

/* Floating contact */
.float-contact { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: flex; flex-direction: column; gap: 10px; }
.fc { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .45); transition: transform .5s var(--ease), opacity .4s; }
.fc:hover { transform: scale(1.1); }
.fc .ic { width: 24px; height: 24px; }
.fc-line { background: #06c755; } .fc-wa { background: #25d366; } .fc-tel { background: var(--sun); }
.fc-top { background: var(--ink); border: 1px solid var(--line-light); opacity: 0; pointer-events: none; transform: translateY(10px); }
.fc-top.show { opacity: 1; pointer-events: auto; transform: none; }

/* Responsive */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .rates-cols { columns: 1; }
  .hero-meta { display: none; }
}
@media (max-width: 980px) {
  .main-nav, .nav-login, .nav-actions > .btn { display: none; }
  .burger { display: block; }
  .nav-actions { margin-left: auto; }
  .hero-inner { justify-content: flex-end; padding-bottom: 290px; }
  .hero-counter { bottom: 250px; }
  .book-bar form { grid-template-columns: 1fr 1fr; }
  .bb-field:first-child { display: none; }
  .bb-field { border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .book-bar .btn { grid-column: 1 / -1; padding: 18px; }
  .svc-row { flex-direction: column; height: auto; }
  .svc-panel, .svc-panel:hover, .svc-panel:focus-within { flex: none; height: 340px; }
  .svc-body p, .svc-subs { opacity: 1; transform: none; max-height: none; }
  .intro-grid, .rates-split, .feature-split, .detail-grid, .booking-grid, .pay-grid, .contact-grid, .account-grid, .auth-wrap { grid-template-columns: 1fr; }
  .rates-visual { position: relative; top: 0; height: 360px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .book-box, .summary-card { position: relative; top: 0; }
  .auth-photo { display: none; }
  .float-photo { left: auto; right: 16px; bottom: -30px; width: 36%; }
  .steps-grid { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 30px 0; border-left: 0; }
  .step + .step { border-top: 1px solid var(--line-light); }
  .cta-inner .cta-btns { justify-content: flex-start; }
}
@media (max-width: 640px) {
  :root { --header-h: 70px; }
  .container { width: calc(100% - 32px); }
  .brand { height: 44px; }
  .hero { min-height: 760px; }
  .hero-title { font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
  .hero-sub { font-size: .98rem; margin-bottom: 24px; }
  .book-bar { bottom: 16px; }
  .bb-field { padding: 12px 16px; }
  .bb-price strong { font-size: 1.35rem; }
  .rate-row { grid-template-columns: 1fr auto; gap: 2px 14px; }
  .rate-code { grid-column: 1 / -1; }
  .rate-go { display: none; }
  .tour-grid, .car-grid, .review-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .type-pills { grid-template-columns: 1fr; }
  .type-pills span { flex-direction: row; padding: 14px 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .notes-card { grid-template-columns: 1fr; }
  .bk-item { grid-template-columns: 1fr; }
  .bk-actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .fc { width: 46px; height: 46px; }
  .float-contact { right: 12px; bottom: 12px; }
  .timeline li { grid-template-columns: 48px 1fr; }
  .stat-cell { padding-right: 12px; }
  .ring-card { --cw: 210px; --ch: 290px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .split-line > span, .hero .fade-up { opacity: 1 !important; transform: none !important; }
  .grain { display: none; }
}


/* Thai script: wide tracking breaks vowel/tone marks — keep it tight */
html[lang="th"] :is(.eyebrow, .bb-field label, .bb-field small, .hero-counter .container, .hero-dot, .field label, .tc-price small, .ring-card small, .hire-card small, .site-footer h3, .car-prices small, .cc small, .divider, .subtabs > span, .drop-laos > span, .preloader small, .ring-hint, .book-box h2, .bank-card small, .stat-cell span, .svc-num, .rate-code, .breadcrumb) { letter-spacing: .02em; }
html[lang="th"] .eyebrow { font-size: .86rem; }

/* Floating contact on small screens: compact, hidden over the hero booking bar */
.float-contact { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.float-contact.away { opacity: 0; transform: translateX(80px); pointer-events: none; }
@media (max-width: 980px) {
  .fc-wa { display: none; }
  .fc { width: 44px; height: 44px; }
  .fc .ic { width: 21px; height: 21px; }
}
/* ==========================================================================
   v3 — "Sunny Kanit" theme: bright sky · orange · yellow
   ========================================================================== */
:root {
  --sky-bg: #eaf7ff;
  --deep: #075985;
  --sun2: linear-gradient(100deg, #ff6a00, #ff9500 45%, #ffc300);
  --skygrad: linear-gradient(135deg, #0369a1 0%, #0ea5e9 55%, #38bdf8 100%);
  --sh-color: 0 30px 60px -28px rgba(3, 105, 161, .45);
}
body { font-weight: 300; color: #24364d; }
b, strong { font-weight: 600; }
h1, h2, h3, h4, .display { font-family: "Kanit", sans-serif; letter-spacing: 0 !important; color: var(--ink); }
h1 { font-weight: 700; }
h2 { font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.2; }
h3 { font-weight: 600; }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.accent { font-style: normal; background: var(--sun2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grain { display: none; }
.lead { color: #5b6b80; }

/* eyebrow as colorful pill */
.eyebrow { padding: 6px 16px 6px 12px; border-radius: 999px; background: #fff1e0; color: var(--orange-d); font-size: .95rem !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none; }
.eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.sec-head.center .eyebrow::after { display: none; }
.dark .eyebrow, .eyebrow.light { background: rgba(255, 255, 255, .2); color: #fff; }
.dark .eyebrow::before, .eyebrow.light::before { background: #ffc300; }

/* buttons */
.btn { font-weight: 500; }
.btn-primary { background: var(--sun2); box-shadow: 0 16px 30px -12px rgba(255, 106, 0, .65); }
.btn-primary::after { background: linear-gradient(100deg, #0369a1, #0ea5e9); }
.btn-soft { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -12px rgba(11, 37, 69, .25); }
.btn-soft::after { background: var(--sky-bg); }
.btn-soft .ic { color: var(--sky-d); }
.btn-dark::after { background: var(--orange); }

/* preloader: bright */
.preloader { background: linear-gradient(180deg, #e0f4ff, #fff); color: var(--ink); }
.preloader img { filter: none; width: 150px; }
.preloader small { color: var(--sky-d); opacity: 1; }
.cursor { background: var(--orange); }
.cursor.big { background: rgba(255, 149, 0, .92); }
.cursor-label { color: #fff; }

/* header on the bright home hero */
.home .site-header:not(.scrolled) { color: var(--ink); }
.home .site-header:not(.scrolled)::before { display: none; }
.home .site-header:not(.scrolled) .brand img { filter: none; }
.home .site-header:not(.scrolled) .lang-switch, .home .site-header:not(.scrolled) .burger { border-color: rgba(11, 37, 69, .18); }
.site-header.scrolled { background: rgba(255, 255, 255, .9); }
.main-nav > ul > li > a { font-weight: 400; }
.main-nav > ul > li > a::after { background: var(--orange); height: 2px; }
.drop { background: #fff; color: var(--ink); border: 0; box-shadow: 0 30px 70px -20px rgba(11, 37, 69, .35); }
.drop-card { color: #fff; }
.drop-laos a { border-color: rgba(11, 37, 69, .14); }
.drop-laos > span { color: var(--orange-d); }
.drop-laos a:hover { color: #fff; }
.mobile-menu-bg { background: linear-gradient(160deg, #0369a1, #0ea5e9 60%, #38bdf8); }
.mobile-menu-bg::after { background: radial-gradient(60% 40% at 100% 100%, rgba(255, 195, 0, .45), transparent); }
.mobile-menu-inner > a:not(.btn) { font-weight: 600; }
.mm-phone { color: #ffe08a; }

/* ---------- HERO ---------- */
.hero { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 30px) 0 70px; background: linear-gradient(180deg, #cfeeff 0%, #e9f7ff 40%, #fffaf0 85%, #fff 100%); color: var(--ink); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hb-sun { position: absolute; right: 6%; top: 8%; width: min(46vw, 640px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff3c4 0%, #ffd34d 35%, #ffad33 62%, rgba(255, 160, 51, 0) 72%); opacity: .85; animation: sunpulse 8s ease-in-out infinite alternate; }
@keyframes sunpulse { to { transform: scale(1.06) translateY(-10px); } }
.hb-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.hb-blob.b1 { width: 420px; height: 420px; left: -140px; top: 20%; background: #7dd3fc; animation: orb2 14s ease-in-out infinite alternate; }
.hb-blob.b2 { width: 360px; height: 360px; left: 35%; bottom: -160px; background: #ffd27a; animation: orb2 12s ease-in-out infinite alternate-reverse; }
@keyframes orb2 { to { transform: translate(60px, -40px) scale(1.15); } }
.hb-route { position: absolute; left: 0; bottom: 0; width: 100%; height: 70%; }
.hb-route path { fill: none; stroke: #ff9500; stroke-width: 2.5; stroke-dasharray: 2 14; stroke-linecap: round; opacity: .55; animation: dash 30s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -600; } }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.hero-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 12px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -14px rgba(3, 105, 161, .45); font-weight: 500; font-size: .95rem; color: var(--sky-d); }
.hero-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); animation: ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 26, .6); } 70% { box-shadow: 0 0 0 10px rgba(255, 122, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0); } }
.hero-title { font-family: "Kanit", sans-serif; font-weight: 800; font-size: clamp(3rem, 6.4vw, 6rem); line-height: 1.08; color: var(--ink); margin: 22px 0; }
.hero-title .split-line { padding-bottom: .16em; margin-bottom: -.16em; }
.hero-sub { color: #4a5d75; font-size: clamp(1.02rem, 1.35vw, 1.2rem); max-width: 560px; margin-bottom: 32px; }
.hero-ctas { gap: 14px; }
.hero-trust { display: flex; gap: clamp(20px, 4vw, 46px); margin-top: 42px; }
.hero-trust > div { display: flex; flex-direction: column; }
.hero-trust b { font-size: 2.1rem; font-weight: 700; line-height: 1.1; background: var(--skygrad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-trust > div > span { font-size: .9rem; color: #5b6b80; }

.hero-visual { perspective: 1400px; }
.hv-scene { position: relative; width: 100%; aspect-ratio: 1 / 1.02; transform-style: preserve-3d; transform: rotateY(var(--ry, -8deg)) rotateX(var(--rx, 4deg)); transition: transform 1s var(--ease); }
.hv-card { position: absolute; border-radius: 30px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 40px 70px -30px rgba(3, 60, 110, .55); background: #dbeefc; }
.hv-card img { width: 100%; height: 100%; object-fit: cover; }
.hv-main { left: 15%; top: 6%; width: 68%; height: 80%; transform: translateZ(40px); }
.hv-side1 { left: 0; bottom: 4%; width: 40%; aspect-ratio: 4 / 3; transform: translateZ(110px); animation: hvfloat 6s ease-in-out infinite; }
.hv-side2 { right: 0; top: 0; width: 30%; aspect-ratio: 3 / 4; transform: translateZ(-40px); animation: hvfloat 7s ease-in-out infinite reverse; }
@keyframes hvfloat { 50% { translate: 0 -16px; } }
.hv-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hv-slide img { transform: scale(1.12); transition: transform 6s ease-out; }
.hv-slide.is-active { opacity: 1; }
.hv-slide.is-active img { transform: scale(1); }
.hv-slide figcaption { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .88rem; font-weight: 500; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .3); }
.hv-slide figcaption .ic { color: var(--orange); }
.hv-dots { position: absolute; right: 16px; bottom: 24px; display: flex; gap: 6px; z-index: 2; }
.hv-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .6); cursor: pointer; transition: width .5s var(--ease), background .3s; }
.hv-dots button.on { width: 26px; background: #fff; }
.hv-chip { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 20px; background: #fff; box-shadow: 0 24px 50px -20px rgba(3, 60, 110, .5); }
.hv-price { right: -2%; bottom: 12%; transform: translateZ(150px); animation: hvfloat 5s ease-in-out infinite .5s; }
.hv-price .ic-wrap { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--sun2); color: #fff; }
.hv-price .ic-wrap .ic { width: 24px; height: 24px; }
.hv-price small { display: block; font-size: .78rem; color: #5b6b80; }
.hv-price b { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.hv-flags { left: 3%; top: 14%; padding: 10px 16px 10px 10px; transform: translateZ(130px); animation: hvfloat 6.5s ease-in-out infinite 1s; }
.hv-flags i { display: grid; place-items: center; width: 34px; height: 34px; margin-right: -18px; border-radius: 50%; border: 3px solid #fff; font-style: normal; font-size: .64rem; font-weight: 700; color: #fff; }
.hv-flags span { margin-left: 18px; font-weight: 500; font-size: .9rem; }
.f-th { background: linear-gradient(180deg, #e2001a 0 20%, #fff 20% 34%, #24357a 34% 66%, #fff 66% 80%, #e2001a 80%); text-shadow: 0 0 3px #000; }
.f-la { background: linear-gradient(180deg, #ce1126 0 25%, #002868 25% 75%, #ce1126 75%); }
.f-cn { background: #de2910; color: #ffde00 !important; }
.hv-badge { position: absolute; left: 0; top: 42%; width: 118px; height: 118px; transform: translateZ(90px); animation: spin-b 18s linear infinite; }
.hv-badge circle { fill: var(--sky-d); }
.hv-badge text { fill: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: 2.2px; font-family: "Kanit", sans-serif; }
@keyframes spin-b { to { rotate: 360deg; } }

.book-widget { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1.35fr 1fr auto; align-items: center; gap: 8px; margin-top: clamp(36px, 5vw, 60px); padding: 10px; border-radius: 28px; background: #fff; box-shadow: 0 30px 70px -30px rgba(3, 60, 110, .45); }
.bw-field { display: flex; align-items: center; gap: 14px; padding: 12px 18px; min-width: 0; border-radius: 20px; transition: background .3s; }
.bw-field + .bw-field { border-left: 1px solid rgba(11, 37, 69, .08); }
.bw-select:hover { background: var(--sky-bg); }
.bw-field > span:last-child { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bw-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: #fff1e0; color: var(--orange-d); }
.bw-ic.sky { background: var(--sky-bg); color: var(--sky-d); }
.bw-ic.yellow { background: #fff6cc; color: #c98a00; }
.bw-field small, .bw-field label { font-size: .82rem; color: #6b7a8d; }
.bw-field b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-field select { appearance: none; width: 100%; border: 0; padding: 0 22px 0 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230b2545' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right center / 11px; font-weight: 600; font-size: 1rem; color: var(--ink); cursor: pointer; text-overflow: ellipsis; }
.bw-field select:focus { outline: none; }
.bw-field strong { font-size: 1.7rem; font-weight: 700; line-height: 1.1; background: var(--sun2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.book-widget .btn { height: 100%; min-height: 64px; border-radius: 20px; padding-inline: 34px; }

/* ---------- Sections ---------- */
.dark { background: var(--skygrad); color: rgba(255, 255, 255, .88); }
.ring-section::before { background: radial-gradient(45% 50% at 50% 60%, rgba(255, 255, 255, .28), transparent 70%); }
.ring-hint { color: rgba(255, 255, 255, .85); }
.ring-card { border: 5px solid #fff; }
.cream { background: #fff7e6; }
.intro-text { font-weight: 400; color: var(--ink); line-height: 1.5; }
.intro-text .hl { font-style: normal; color: var(--orange-d); font-weight: 500; }
.stat-cell b { font-weight: 700; color: var(--sky-d); }
.marquee { background: #fff; }
.marquee span { font-weight: 600; color: var(--ink); }
.marquee span:nth-child(3n+2) { font-style: normal; color: var(--sky); }
.svc-body h3, .tc-body h3 { font-weight: 600; }
.ring-card b, .hire-card b, .car-body h3, .why-item h3, .step h3, .bk-item h3, .rv-text b { font-weight: 600; }
.rate-name b { font-weight: 500; }
.rate-price { font-weight: 700; color: var(--ink); }
.step-n { font-weight: 800; background: linear-gradient(180deg, #fff, #ffe08a); -webkit-background-clip: text; background-clip: text; }
.steps-grid, .step + .step { border-color: rgba(255, 255, 255, .3); }
.step p { color: rgba(255, 255, 255, .88); }
.tour-card::before { background: linear-gradient(0deg, rgba(4, 47, 82, .92) 0%, rgba(4, 47, 82, .3) 48%, rgba(4, 47, 82, 0) 72%); }
.tour-card, .car-card, .svc-panel { box-shadow: var(--sh-color); }
.why-ic { background: var(--sky-bg); color: var(--sky-d); }
.why-item:nth-child(even) .why-ic { background: #fff1e0; color: var(--orange-d); }
.frame-badge b { color: var(--orange-d); font-weight: 700; }
.review-card blockquote { font-weight: 300; font-size: 1.05rem; }
.empty-state { background: #fff; border-color: #bfe6fb; }
.hire-card { background: var(--skygrad); }
.hire-card .note { color: rgba(255, 255, 255, .88); }
.hire-card small { color: #ffe08a; }
.timeline li::before { font-weight: 700; }

/* overlays: blue-tinted instead of black */
.page-hero::before { background: linear-gradient(0deg, rgba(3, 55, 95, .88) 0%, rgba(3, 80, 130, .35) 55%, rgba(3, 80, 130, .25) 100%); }
.cta-photo::before { background: linear-gradient(0deg, rgba(3, 60, 105, .85), rgba(3, 105, 161, .45)); }
.cta-phone { color: #ffd34d; font-weight: 700; }
.cta-inner { background: var(--orange); }
.cta-inner::before { background: linear-gradient(90deg, rgba(255, 106, 0, .95), rgba(255, 149, 0, .55)); }
.cta-inner .cta-phone { color: #fff; }
.cta-inner .btn-primary { background: #fff; color: var(--orange-d); }
.cta-inner .btn-primary:hover { color: #fff; }
.book-box, .summary-card { background: var(--skygrad); }
.book-box::before, .summary-card::before { background: radial-gradient(circle, rgba(255, 195, 0, .55), transparent 70%); }
.sum-total b, .book-box .bb-price .ask { color: #ffe08a; }
.notes-card { background: var(--sky-bg); }
.notes-card .big-ic { background: var(--sky-d); color: #fff; }
.type-pills input:checked + span { background: var(--skygrad); border-color: transparent; }
.tab.on, .pay-tab[aria-selected="true"] { background: var(--sky-d); border-color: var(--sky-d); }
.auth-photo::before { background: linear-gradient(0deg, rgba(3, 55, 95, .88), rgba(3, 80, 130, .1) 60%); }
.nf::before { background: rgba(3, 60, 105, .72); }

/* footer: deep sky */
.site-footer { background: linear-gradient(160deg, #053a5e 0%, #075985 55%, #0a6fa8 100%); color: rgba(255, 255, 255, .8); }
.site-footer h3 { color: #ffd34d; }
.footer-giant { font-weight: 800; }
.footer-giant span { -webkit-text-stroke: 1px rgba(255, 255, 255, .25); }
.footer-giant span:nth-child(even) { font-style: normal; }
.fc-top { background: var(--sky-d); }

@media (max-width: 980px) {
  .hero { padding-top: calc(var(--header-h) + 20px); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; width: 100%; margin: 10px auto 0; }
  .book-widget { grid-template-columns: 1fr; padding: 8px; }
  .bw-field + .bw-field { border-left: 0; border-top: 1px solid rgba(11, 37, 69, .08); }
  .hb-sun { width: 90vw; right: -20%; top: 30%; }
}
@media (max-width: 640px) {
  .hero-title { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .hero-trust b { font-size: 1.6rem; }
  .hv-badge { width: 86px; height: 86px; }
  .hv-price { right: 0; padding: 8px 12px 8px 8px; }
  .hv-price b { font-size: 1.15rem; }
  .hv-price .ic-wrap { width: 38px; height: 38px; }
  .hv-flags span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero .fade-up { opacity: 1 !important; transform: none !important; } }
.stat-cell > span, .hero-trust > div > span { font-size: .98rem; }

/* ==========================================================================
   v4 — futuristic polish: glass, bento, gradient borders, vivid photos
   ========================================================================== */
@property --ga { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.tour-card .cover, .bn-card > img, .hv-arch img, .wb-photo > img, .page-hero > img, .car-media .cover, .ring-card img, .drop-card img, .cta-photo > img, .auth-photo > img {  }

.glass { background: rgba(255, 255, 255, .66); backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 28px 50px -22px rgba(3, 60, 110, .45); }
.glass-dark { background: rgba(6, 40, 70, .38); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .28); color: #fff; }

/* decorative gradient mesh for light sections */
.mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.mesh i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; animation: orb2 16s ease-in-out infinite alternate; }
.mesh i:nth-child(1) { width: 520px; height: 520px; left: -160px; top: 10%; background: #9fdcff; }
.mesh i:nth-child(2) { width: 460px; height: 460px; right: -140px; bottom: 0; background: #ffd7a1; animation-direction: alternate-reverse; }
.svc-section, .fares-section, .why-section { isolation: isolate; overflow: hidden; }
.fares-section { background: linear-gradient(180deg, #f2faff 0%, #fff 100%); }

/* ---------- HERO visual ---------- */
.hv-scene { aspect-ratio: 1 / 1.04; }
.hv-glow { position: absolute; left: 12%; right: 8%; top: 6%; bottom: 10%; border-radius: 50%; background: conic-gradient(from 0deg, #ff6a00, #ffc300, #38bdf8, #0ea5e9, #a855f7, #ff6a00); filter: blur(55px); opacity: .55; animation: spin-b 14s linear infinite; transform: translateZ(-60px); }
.hv-orbit { position: absolute; left: 3%; top: 4%; width: 94%; aspect-ratio: 1; border: 1.5px dashed rgba(3, 105, 161, .35); border-radius: 50%; animation: spin-b 22s linear infinite; transform: translateZ(10px); }
.hv-plane { position: absolute; top: -20px; left: calc(50% - 20px); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun2); color: #fff; box-shadow: 0 10px 20px -6px rgba(255, 106, 0, .7); }
.hv-plane .ic { width: 20px; height: 20px; transform: rotate(45deg); }
.hv-arch { position: absolute; left: 17%; right: 13%; top: 3%; bottom: 7%; border-radius: 999px 999px 44px 44px; overflow: hidden; border: 8px solid rgba(255, 255, 255, .9); box-shadow: 0 60px 90px -40px rgba(3, 80, 140, .7); transform: translateZ(40px); background: #cfeeff; }
.hv-arch .hv-slide figcaption { left: 50%; bottom: 22px; translate: -50% 0; white-space: nowrap; background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); }
.hv-arch .hv-dots { left: 50%; right: auto; translate: -50% 0; bottom: 74px; }
.hv-pass { position: absolute; right: -6%; bottom: 13%; width: min(280px, 52%); padding: 16px 18px; border-radius: 22px; transform: translateZ(150px); animation: hvfloat 5.5s ease-in-out infinite .4s; }
.hp-top { display: flex; justify-content: space-between; font-size: .66rem; font-weight: 600; letter-spacing: .16em !important; color: #6b7a8d; }
.hp-class { color: var(--orange-d); }
.hp-route { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; }
.hp-route b { display: block; font-size: 1.55rem; font-weight: 700; color: var(--ink); line-height: 1; }
.hp-route small { font-size: .74rem; color: #6b7a8d; }
.hp-route .r { text-align: right; }
.hp-line { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--sky) 0 6px, transparent 6px 11px); }
.hp-line i { position: absolute; top: 50%; left: 0; translate: 0 -50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--skygrad); color: #fff; animation: drive 3.2s var(--ease-io) infinite alternate; }
.hp-line i .ic { width: 15px; height: 15px; }
@keyframes drive { to { left: calc(100% - 28px); } }
.hp-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1.5px dashed rgba(11, 37, 69, .15); }
.hp-price { font-size: 1.7rem; font-weight: 700; line-height: 1; background: var(--sun2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-price small { font-size: .6em; }
.hp-bar { width: 90px; height: 30px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity: .8; border-radius: 2px; }
.hv-trips { position: absolute; left: -5%; top: 15%; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 20px; transform: translateZ(130px); animation: hvfloat 6.5s ease-in-out infinite 1s; }
.hv-thumbs { display: flex; }
.hv-thumbs img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin-right: -12px; }
.hv-trips > span:last-child { margin-left: 10px; display: flex; flex-direction: column; line-height: 1.25; }
.hv-trips b { font-weight: 700; color: var(--ink); }
.hv-trips small { font-size: .76rem; color: #6b7a8d; }
.hv-tag { position: absolute; left: 4%; bottom: 8%; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; font-weight: 500; font-size: .9rem; color: var(--ink); transform: translateZ(100px); animation: hvfloat 7s ease-in-out infinite 2s; }
.live { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: ping-g 1.8s infinite; }
@keyframes ping-g { 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* ---------- Services bento ---------- */
.bento { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 310px 310px; gap: 20px; }
.bn-laos { grid-row: 1 / 3; }
.bn-panna { grid-column: 2 / 4; }
.bn-card { --tint: rgba(255, 106, 0, .9); --tint2: rgba(255, 160, 0, .2); position: relative; border-radius: 32px; overflow: hidden; isolation: isolate; color: #fff; box-shadow: 0 30px 60px -32px var(--tint); transition: box-shadow .6s var(--ease); }
.bn-card > img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.8s var(--ease); }
.bn-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(200deg, rgba(0, 0, 0, 0) 25%, var(--tint2) 55%, var(--tint) 100%); }
.bn-card::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-120%); transition: transform 1.1s var(--ease); }
.bn-card:hover::after { transform: translateX(120%); }
.bn-card:hover > img { transform: scale(1.16); }
.bn-card:hover { box-shadow: 0 46px 80px -30px var(--tint); }
.c-orange { --tint: rgba(234, 88, 12, .92); --tint2: rgba(255, 149, 0, .25); }
.c-amber { --tint: rgba(3, 105, 161, .9); --tint2: rgba(14, 165, 233, .2); }
.c-sky { --tint: rgba(2, 84, 140, .92); --tint2: rgba(56, 189, 248, .25); }
.c-violet { --tint: rgba(126, 34, 206, .9); --tint2: rgba(236, 72, 153, .3); }
.bn-card .cover-link { position: absolute; inset: 0; z-index: 1; }
.bn-icon { position: absolute; top: 20px; left: 20px; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none; }
.bn-icon .ic { width: 28px; height: 28px; }
.bn-num { position: absolute; top: 22px; right: 26px; z-index: 2; font-size: 2.6rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .7); pointer-events: none; }
.bn-info { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; align-items: flex-end; gap: 14px; padding: 18px 18px 18px 22px; border-radius: 24px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); pointer-events: none; transition: background .5s; }
.bn-card:hover .bn-info { background: rgba(255, 255, 255, .2); }
.bn-text { flex: 1; min-width: 0; }
.bn-info h3 { color: #fff; font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 600; margin: 0 0 4px; }
.bn-info p { margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .88); line-height: 1.5; }
.bn-go { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .6s var(--ease), background .4s, color .4s; }
.bn-card:hover .bn-go { transform: rotate(-45deg); background: var(--orange); color: #fff; }
.bn-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; pointer-events: auto; position: relative; z-index: 3; }
.bn-subs a { padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--sky-d); font-size: .82rem; font-weight: 500; transition: background .3s, color .3s, transform .3s var(--ease); }
.bn-subs a:hover { background: var(--orange); color: #fff; transform: translateY(-2px); }

/* ---------- Fare board ---------- */
.fare-filters { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.sec-head.center + .fare-filters { justify-content: center; }
.ff-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 14px 30px -18px rgba(3, 60, 110, .4); border: 1px solid rgba(3, 105, 161, .08); }
.ff-chips button { padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; font-weight: 500; font-size: .92rem; color: #4a5d75; cursor: pointer; transition: background .4s, color .4s; }
.ff-chips button:hover { color: var(--sky-d); }
.ff-chips button.on { background: var(--skygrad); color: #fff; box-shadow: 0 8px 18px -8px rgba(3, 105, 161, .7); }
.ff-search { display: flex; align-items: center; gap: 10px; min-width: 280px; padding: 12px 18px; border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -18px rgba(3, 60, 110, .4); color: #6b7a8d; }
.ff-search input { border: 0; outline: 0; background: transparent; flex: 1; font-size: 1rem; color: var(--ink); }
.fare-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.fare { --zc: #f59e0b; position: relative; display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 26px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 24px 44px -26px rgba(3, 60, 110, .45); isolation: isolate; overflow: hidden; transition: box-shadow .5s var(--ease); }
.fare::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ga), var(--zc), #ffc300, #38bdf8, var(--zc)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .5s; animation: ga 4s linear infinite; z-index: 1; pointer-events: none; }
@keyframes ga { to { --ga: 360deg; } }
.fare::after { content: ""; position: absolute; right: -50px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--zc), transparent 70%); opacity: .14; z-index: -1; transition: transform .8s var(--ease), opacity .5s; }
.fare:hover::before { opacity: 1; }
.fare:hover::after { transform: scale(1.8); opacity: .22; }
.fare:hover { box-shadow: 0 34px 60px -26px color-mix(in srgb, var(--zc) 70%, transparent); }
.fare-top { display: flex; justify-content: space-between; align-items: center; }
.fare-code { padding: 4px 12px; border-radius: 999px; background: var(--zc); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .08em !important; }
.fare-class { font-size: .66rem; font-weight: 600; letter-spacing: .16em !important; color: #8a97a8; }
.fare-route { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; font-size: .78rem; color: #8a97a8; }
.fare-route b { font-weight: 600; color: #8a97a8; }
.fr-line { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--zc) 60%, transparent) 0 5px, transparent 5px 9px); }
.fr-line i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--zc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--zc) 25%, transparent); transition: left 1.2s var(--ease); }
.fare:hover .fr-line i { left: calc(100% - 10px); }
.fare-name { font-size: 1.18rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.fare-sub { color: #8a97a8; font-size: .82rem; }
.fare-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.fare-price { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--ink); }
.fare-price small { font-size: .55em; color: var(--orange); margin-right: 2px; vertical-align: .45em; }
.fare-go { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: color-mix(in srgb, var(--zc) 14%, #fff); color: color-mix(in srgb, var(--zc) 75%, #000); font-size: .84rem; font-weight: 600; transition: background .4s, color .4s; }
.fare-go .ic { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.fare:hover .fare-go { background: var(--zc); color: #fff; }
.fare:hover .fare-go .ic { transform: translateX(3px); }
.fares-foot { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 40px; }
.fares-foot p { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #5b6b80; font-size: .92rem; }
.fares-foot p .ic { color: var(--green); }

/* ---------- Why bento ---------- */
.why-section { background: linear-gradient(180deg, #fff 0%, #f3faff 100%); }
.why-bento { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.wb-photo { position: relative; min-height: 600px; border-radius: 36px; overflow: hidden; isolation: isolate; box-shadow: 0 50px 80px -40px rgba(3, 80, 140, .6); }
.wb-photo > img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; z-index: -2; }
.wb-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3, 60, 105, .7), rgba(3, 105, 161, 0) 55%); }
.wb-stats { position: absolute; left: 22px; bottom: 22px; display: grid; gap: 10px; }
.wb-stats > div { display: flex; align-items: baseline; gap: 12px; padding: 12px 20px; border-radius: 18px; }
.wb-stats b { font-size: 1.9rem; font-weight: 700; line-height: 1; background: linear-gradient(180deg, #fff, #ffe08a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wb-stats span { font-size: .92rem; color: rgba(255, 255, 255, .92); }
.wb-van { position: absolute; right: 22px; top: 22px; width: 38%; aspect-ratio: 1; border-radius: 26px; overflow: hidden; border: 5px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .5); animation: hvfloat 6s ease-in-out infinite; }
.wb-van img { width: 100%; height: 100%; object-fit: cover; }
.wb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.wb-card { position: relative; padding: 28px 24px 24px; border-radius: 28px; background: #fff; border: 1px solid rgba(3, 105, 161, .08); box-shadow: 0 24px 50px -30px rgba(3, 60, 110, .4); overflow: hidden; isolation: isolate; transition: box-shadow .5s var(--ease); }
.wb-card::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, .18), transparent 70%); z-index: -1; transition: transform .8s var(--ease); }
.wb-card:hover::after { transform: scale(1.7); }
.wb-card:hover { box-shadow: 0 34px 60px -28px rgba(3, 60, 110, .5); }
.wb-card h3 { font-size: 1.2rem; font-weight: 600; margin: 18px 0 6px; }
.wb-card p { margin: 0; font-size: .92rem; color: #5b6b80; }
.wb-n { position: absolute; right: 22px; top: 18px; font-size: 2.4rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(3, 105, 161, .15); }
.orb { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; color: #fff; transform: rotate(-8deg); transition: transform .6s var(--ease); box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .18), inset 0 8px 14px rgba(255, 255, 255, .45), 0 16px 26px -12px var(--oc, #ff6a00); }
.orb .ic { width: 28px; height: 28px; transform: rotate(8deg); }
.wb-card:hover .orb { transform: rotate(0) scale(1.08) translateY(-4px); }
.o-orange { background: linear-gradient(140deg, #ffb347, #ff6a00); --oc: #ff6a00; }
.o-sky { background: linear-gradient(140deg, #7dd3fc, #0284c7); --oc: #0284c7; }
.o-green { background: linear-gradient(140deg, #6ee7b7, #059669); --oc: #059669; }
.o-violet { background: linear-gradient(140deg, #f0abfc, #9333ea); --oc: #9333ea; }

@media (max-width: 1100px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 380px 300px 300px; }
  .bn-laos { grid-row: 1; grid-column: 1 / 3; }
  .bn-panna { grid-column: 1 / 3; }
}
@media (max-width: 980px) {
  .why-bento { grid-template-columns: 1fr; }
  .wb-photo { min-height: 460px; }
  .hv-pass { right: 0; }
  .hv-trips { left: 0; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 340px; }
  .bn-laos, .bn-panna { grid-column: auto; }
  .bn-laos { grid-row: auto; height: 440px; }
  .wb-cards { grid-template-columns: 1fr; }
  .ff-chips { border-radius: 22px; justify-content: center; }
  .ff-search { min-width: 0; width: 100%; }
  .hv-pass { width: 62%; padding: 12px 14px; }
  .hp-route b { font-size: 1.2rem; }
  .hp-price { font-size: 1.3rem; }
  .hp-bar { width: 60px; }
  .hv-trips small { display: none; }
  .hv-tag { display: none; }
}
.hv-arch img { width: 100%; height: 100%; object-fit: cover; }
.hv-arch .hv-slide figcaption { left: 24px; translate: none; bottom: 24px; }
.hv-arch .hv-dots { left: 28px; translate: none; bottom: 76px; }
.fare.zone-1 { --zc: #f59e0b; } .fare.zone-2 { --zc: #ec4899; } .fare.zone-3 { --zc: #10b981; } .fare.zone-4 { --zc: #8b5cf6; } .fare.zone-5 { --zc: #0ea5e9; } .fare.zone-6 { --zc: #ff7a1a; }

/* ==========================================================================
   v5 — detail pass
   ========================================================================== */
section { position: relative; }

/* ---------- Intro bento ---------- */
.intro { isolation: isolate; overflow: hidden; padding: clamp(90px, 10vw, 140px) 0; }
.intro-bento { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.intro-text { font-size: clamp(1.45rem, 2.6vw, 2.25rem); margin: 6px 0 30px; }
.intro-sign { display: inline-flex; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; border-radius: 999px; background: #fff; box-shadow: 0 18px 40px -22px rgba(3, 60, 110, .45); }
.intro-sign img { width: 54px; height: 54px; border-radius: 50%; background: var(--sky-bg); padding: 4px; object-fit: contain; }
.intro-sign b { display: block; font-weight: 600; color: var(--ink); line-height: 1.3; }
.intro-sign small { display: block; font-size: .82rem; color: #6b7a8d; }
.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: 28px; background: rgba(255, 255, 255, .85); border: 1px solid #fff; backdrop-filter: blur(14px); box-shadow: 0 24px 50px -30px rgba(3, 60, 110, .45); overflow: hidden; isolation: isolate; }
.stat-tile:nth-child(2), .stat-tile:nth-child(3) { transform: translateY(26px); }
.stat-tile .orb { width: 50px; height: 50px; border-radius: 16px; margin-bottom: 14px; }
.stat-tile .orb .ic { width: 24px; height: 24px; }
.stat-tile b { font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; color: var(--ink); }
.stat-tile b sup { font-size: .45em; color: var(--orange); margin-left: 2px; }
.st-label { font-size: .95rem; color: #5b6b80; }
.st-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44px; z-index: -1; }
.st-spark path { fill: none; stroke-width: 2.5; stroke: var(--oc, #0ea5e9); opacity: .25; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
.stat-tile.in .st-spark path { stroke-dashoffset: 0; }
.stat-tile:nth-child(1) { --oc: #ff6a00; } .stat-tile:nth-child(2) { --oc: #0284c7; } .stat-tile:nth-child(3) { --oc: #059669; } .stat-tile:nth-child(4) { --oc: #9333ea; }

/* ---------- Marquee 2 rows ---------- */
.marquee2 { position: relative; padding: 34px 0; background: #fff; border-block: 1px solid rgba(3, 105, 161, .08); overflow: hidden; }
.marquee2::before, .marquee2::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.marquee2::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.marquee2::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
.mq-row { overflow: hidden; }
.mq-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: slide-x 55s linear infinite; }
.mq-rev .mq-track { animation-direction: reverse; animation-duration: 70s; }
.mq-row + .mq-row { margin-top: 18px; }
.mq-item { display: inline-flex; align-items: center; gap: 14px; padding: 8px 26px 8px 8px; border-radius: 999px; background: var(--sky-bg); font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 600; color: var(--ink); white-space: nowrap; }
.mq-item img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .3); }
.mq-item:nth-child(3n+2) { background: #fff1e0; }
.mq-item:nth-child(3n) { background: #fff8d6; }
.mq-out { font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 800; line-height: 1.1; color: transparent; -webkit-text-stroke: 1.5px rgba(3, 105, 161, .3); white-space: nowrap; }
.mq-out:nth-child(4n+1) { -webkit-text-stroke: 0; background: var(--sun2); -webkit-background-clip: text; background-clip: text; }
.mq-star { font-size: 1.4rem; color: var(--orange); }

/* ---------- Ring deco ---------- */
.ring-section { overflow: hidden; isolation: isolate; }
.ring-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; perspective: 600px; }
.rd-grid { position: absolute; left: -50%; right: -50%; bottom: -20px; height: 46%; transform: rotateX(68deg); transform-origin: bottom; background-image: linear-gradient(rgba(255, 255, 255, .28) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 255, 255, .28) 1.5px, transparent 1.5px); background-size: 70px 70px; animation: grid-move 3.5s linear infinite; -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%); }
@keyframes grid-move { to { background-position: 0 70px; } }
.rd-orb { position: absolute; border-radius: 50%; filter: blur(50px); }
.rd-orb.o1 { width: 340px; height: 340px; left: 6%; top: 12%; background: rgba(255, 195, 0, .45); animation: orb2 10s ease-in-out infinite alternate; }
.rd-orb.o2 { width: 300px; height: 300px; right: 6%; bottom: 20%; background: rgba(168, 85, 247, .35); animation: orb2 12s ease-in-out infinite alternate-reverse; }
.ring-card { border: 5px solid rgba(255, 255, 255, .95); }
.ring-cta { display: flex; justify-content: center; margin-top: 26px; }

/* ---------- Tour card enrich ---------- */
.tour-card { --cc: #ff7a1a; border: 5px solid #fff; }
.tour-card.cat-laos { --cc: #0ea5e9; }
.tour-card.cat-sipsongpanna { --cc: #a855f7; }
.tour-card.cat-thailand { --cc: #ff7a1a; }
.chip-cat { background: rgba(255, 255, 255, .92); color: var(--ink); border: 0; }
.chip-cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 25%, transparent); }
.tc-body { left: 12px; right: 12px; bottom: 12px; padding: 18px 20px; border-radius: 22px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.tc-from { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .78rem; color: rgba(255, 255, 255, .85); }
.tc-from .ic { width: 14px; height: 14px; color: #ffd34d; }
.tc-foot { border-top-color: rgba(255, 255, 255, .25); }
.tc-arrow { background: #fff; color: var(--ink); }
.tour-card:hover .tc-arrow { background: var(--cc); color: #fff; }
.tc-price b.ask { color: #ffe08a; }
.tour-card::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%); transform: translateX(-120%); transition: transform 1.1s var(--ease); }
.tour-card:hover::after { transform: translateX(120%); }

/* ---------- Steps ---------- */
.steps-section { overflow: hidden; isolation: isolate; }
.clouds i { position: absolute; z-index: -1; height: 60px; border-radius: 60px; background: rgba(255, 255, 255, .22); filter: blur(2px); animation: cloud 50s linear infinite; }
.clouds i::before { content: ""; position: absolute; left: 22%; bottom: 30%; width: 46%; height: 150%; border-radius: 50%; background: inherit; }
.clouds i:nth-child(1) { width: 220px; top: 14%; left: -260px; }
.clouds i:nth-child(2) { width: 160px; top: 60%; left: -260px; animation-duration: 38s; animation-delay: -18s; }
.clouds i:nth-child(3) { width: 260px; top: 30%; left: -300px; animation-duration: 64s; animation-delay: -40s; opacity: .7; }
@keyframes cloud { to { transform: translateX(calc(100vw + 600px)); } }
.steps-flow { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-top: 30px; }
.sf-line { position: absolute; left: 0; right: 0; top: 64px; width: 100%; height: 40px; z-index: 0; }
.sf-line path { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; animation: dash 20s linear infinite; }
.sf-van { position: absolute; top: 62px; left: 6%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--sun2); color: #fff; box-shadow: 0 12px 24px -8px rgba(255, 106, 0, .7); animation: van-go 9s var(--ease-io) infinite; }
@keyframes van-go { 0% { left: 6%; } 45%, 55% { left: calc(94% - 44px); } 100% { left: 6%; } }
.step-card { position: relative; z-index: 2; padding: 30px 28px; margin-top: 60px; border-radius: 30px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; box-shadow: 0 30px 60px -30px rgba(2, 40, 80, .6); }
.step-card .orb { margin-top: -62px; width: 66px; height: 66px; border-radius: 22px; border: 4px solid rgba(255, 255, 255, .9); }
.step-card h3 { color: #fff; font-size: 1.35rem; margin: 18px 0 6px; }
.step-card p { margin: 0; color: rgba(255, 255, 255, .88); font-size: .95rem; }
.sc-n { position: absolute; right: 24px; top: 18px; font-size: 3.4rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .45); }

/* ---------- Reviews ---------- */
.reviews-section { isolation: isolate; overflow: hidden; }
.review-invite { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; padding: clamp(28px, 4vw, 46px); border-radius: 34px; background: linear-gradient(120deg, #fff 0%, #fff8ea 60%, #eaf7ff 100%); border: 1px solid #fff; box-shadow: 0 30px 70px -36px rgba(3, 60, 110, .5); }
.ri-stars { display: flex; gap: 4px; }
.ri-stars span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--sun2); color: #fff; box-shadow: 0 12px 22px -10px rgba(255, 106, 0, .7); transform: rotate(calc(-8deg + var(--i) * 4deg)) translateY(calc(var(--i) * -2px)); animation: star-bob 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
.ri-stars .ic { width: 26px; height: 26px; fill: currentColor; stroke: none; }
@keyframes star-bob { 50% { translate: 0 -8px; } }
.ri-text h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 4px; }
.ri-text p { margin: 0; color: #5b6b80; }
.ri-actions { display: flex; flex-direction: column; gap: 10px; }
.ri-actions .btn-soft .ic { color: #06c755; }
.review-card { position: relative; border: 1px solid #fff; box-shadow: 0 24px 50px -30px rgba(3, 60, 110, .45); overflow: hidden; }
.review-card::before { content: "\201C"; position: absolute; right: 22px; top: -14px; font-size: 7rem; font-weight: 800; line-height: 1; background: var(--sun2); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .25; }

/* ---------- CTA glass ---------- */
.cta-photo { min-height: 0; padding: clamp(90px, 12vw, 160px) 0; }
.cta-glass { max-width: 860px; margin: 0 auto; padding: clamp(30px, 5vw, 56px); border-radius: 40px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 50px 90px -40px rgba(0, 30, 60, .7); }
.cta-glass h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); margin: 6px auto 14px; }
.cta-glass .cta-phone { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.cta-glass .cta-phone .ic { width: .9em; height: .9em; }
.cta-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ct { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 14px; border-radius: 24px; background: #fff; color: var(--ink); transition: transform .5s var(--ease), box-shadow .5s; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5); }
.ct:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6); }
.ct > span { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 18px; color: #fff; }
.ct > span .ic { width: 28px; height: 28px; }
.ct-line > span { background: #06c755; } .ct-wa > span { background: #25d366; } .ct-book > span { background: var(--sun2); }
.ct b { font-weight: 600; font-size: 1.05rem; }
.ct small { font-size: .82rem; color: #6b7a8d; }

/* ---------- Footer ---------- */
.site-footer { overflow: hidden; isolation: isolate; }
.footer-wave { position: absolute; left: 0; top: -1px; width: 100%; height: 70px; z-index: 1; }
.fw-a { fill: #fff; }
.fw-b { fill: rgba(255, 255, 255, .25); }
.f-glow { position: absolute; right: -10%; top: 10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 195, 0, .3), transparent 65%); z-index: -1; }
.footer-cta { padding-top: clamp(110px, 12vw, 160px); }
.f-pay { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.f-pay i { padding: 4px 12px; border-radius: 8px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); font-style: normal; font-size: .76rem; font-weight: 600; color: #fff; }
.footer-bottom { align-items: center; }

/* ---------- Page hero detail ---------- */
.page-hero { min-height: 70vh; border-radius: 0 0 48px 48px; overflow: hidden; }
.page-hero .breadcrumb { display: inline-flex; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(12px); color: rgba(255, 255, 255, .9); font-size: .86rem; }
.page-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); text-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.page-hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 195, 0, .35), transparent 65%); z-index: -1; pointer-events: none; }

@media (max-width: 980px) {
  .intro-bento { grid-template-columns: 1fr; }
  .steps-flow { grid-template-columns: 1fr; }
  .sf-line, .sf-van { display: none; }
  .review-invite { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ri-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .cta-tiles { grid-template-columns: 1fr; }
  .page-hero { border-radius: 0 0 30px 30px; }
}
@media (max-width: 640px) {
  .stat-tile { padding: 18px; }
  .stat-tile:nth-child(2), .stat-tile:nth-child(3) { transform: none; }
  .ri-stars span { width: 42px; height: 42px; }
  .mq-out { font-size: 2rem; }
}
.steps-flow { padding-top: 70px; }
.sf-line { top: 0; }
.sf-van { top: -2px; }
.step-card { margin-top: 40px; padding: 34px 30px; }
.step-card h3 { font-size: 1.45rem; }

/* ---------- v6: inner page details ---------- */
.reviews-section.section-tight { padding-top: clamp(60px, 8vw, 100px); }
.write-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: stretch; }
.write-aside { position: relative; min-height: 460px; border-radius: 32px; overflow: hidden; isolation: isolate; box-shadow: 0 40px 70px -36px rgba(3, 80, 140, .6); }
.write-aside > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;  }
.wa-glass { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 24px; border-radius: 24px; }
.wa-glass h3 { color: #fff; font-size: 1.35rem; margin: 10px 0 12px; line-height: 1.4; }
.wa-stars .stars span { color: #ffd34d; }
.wa-stars .ic { width: 22px; height: 22px; }
.form-card { border: 1px solid #fff; box-shadow: 0 30px 60px -36px rgba(3, 60, 110, .45); border-radius: 32px; }
.form-card h2 .ic { color: var(--orange); }

.contact-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ctile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 22px; border-radius: 26px; background: #fff; border: 1px solid #fff; box-shadow: 0 24px 50px -30px rgba(3, 60, 110, .45); overflow: hidden; isolation: isolate; transition: box-shadow .5s var(--ease); }
.ctile::after { content: ""; position: absolute; right: -50px; top: -50px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, var(--tc, rgba(255, 122, 26, .2)), transparent 70%); z-index: -1; transition: transform .8s var(--ease); }
.ctile:hover::after { transform: scale(1.8); }
.ct-orange { --tc: rgba(255, 122, 26, .22); } .ct-green, .ct-wa { --tc: rgba(16, 185, 129, .22); } .ct-sky { --tc: rgba(14, 165, 233, .22); }
.ctile .orb { width: 50px; height: 50px; border-radius: 16px; margin-bottom: 14px; }
.ctile .orb .ic { width: 24px; height: 24px; }
.ctile small { font-size: .82rem; color: #6b7a8d; }
.ctile b { font-weight: 600; font-size: 1.12rem; color: var(--ink); word-break: break-word; }
.ct-go { position: absolute; right: 18px; top: 22px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sky-bg); color: var(--sky-d); transition: transform .5s var(--ease), background .4s, color .4s; }
.ct-go .ic { width: 18px; height: 18px; }
.ctile:hover .ct-go { background: var(--orange); color: #fff; transform: rotate(-45deg); }
.ct-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
.ct-wide .orb { margin: 0; flex: none; }
.ct-wide b { font-size: 1rem; }
.map-frame { border-radius: 28px; border: 5px solid #fff; box-shadow: 0 30px 60px -36px rgba(3, 60, 110, .5); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: -20px 0 50px; }
.fact { display: flex; flex-direction: column; gap: 2px; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid rgba(3, 105, 161, .08); box-shadow: 0 20px 44px -28px rgba(3, 60, 110, .45); }
.fact .orb { width: 46px; height: 46px; border-radius: 15px; margin-bottom: 12px; }
.fact .orb .ic { width: 22px; height: 22px; }
.fact small { font-size: .8rem; color: #6b7a8d; }
.fact b { font-weight: 600; color: var(--ink); line-height: 1.35; }
.content-card { padding: clamp(24px, 3vw, 36px); border-radius: 30px; background: #fff; border: 1px solid rgba(3, 105, 161, .08); box-shadow: 0 24px 50px -32px rgba(3, 60, 110, .4); }
.timeline li { border-top-color: rgba(3, 105, 161, .1); }
.timeline li:last-child { border-bottom-color: rgba(3, 105, 161, .1); }
.timeline li::before { background: var(--sun2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.checks li { padding: 10px 14px; border-radius: 14px; background: var(--sky-bg); }

.bk-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 30px; padding: 6px; border-radius: 999px; background: var(--sky-bg); counter-reset: none; }
.bk-steps li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; border-radius: 999px; font-size: .92rem; font-weight: 500; color: #6b7a8d; transition: background .5s var(--ease), color .4s, box-shadow .5s; }
.bk-steps li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; font-size: .82rem; font-weight: 700; color: var(--sky-d); transition: background .4s, color .4s; }
.bk-steps li.on { background: #fff; color: var(--ink); box-shadow: 0 10px 20px -12px rgba(3, 60, 110, .5); }
.bk-steps li.on span { background: var(--sun2); color: #fff; }
.field input, .field select, .field textarea { background: #f7fbff; border-color: rgba(3, 105, 161, .14); }
.summary-card { border-radius: 32px; box-shadow: 0 40px 70px -36px rgba(3, 80, 140, .7); }
.summary-card .sum-row { border-bottom-style: dashed; border-color: rgba(255, 255, 255, .28); }
.summary-card .sum-row span:first-child { color: rgba(255, 255, 255, .78); }

@media (max-width: 980px) {
  .write-grid { grid-template-columns: 1fr; }
  .write-aside { min-height: 320px; }
  .facts { grid-template-columns: 1fr 1fr; margin-top: 0; }
}
@media (max-width: 640px) {
  .contact-tiles { grid-template-columns: 1fr; }
  .bk-steps li { font-size: 0; gap: 0; }
  .bk-steps li span { font-size: .82rem; }
}
@media (max-width: 640px) { .bento { grid-auto-rows: auto; } .bn-card { min-height: 340px; } .bn-laos { height: auto; min-height: 560px; } }

/* ---------- v7: hero composition (clean, layered parallax) ---------- */
.hb-sun { right: 2%; top: 12%; width: min(42vw, 600px); background: radial-gradient(circle at 45% 45%, rgba(255, 236, 170, .95) 0%, rgba(255, 205, 80, .7) 30%, rgba(255, 170, 60, .35) 50%, rgba(255, 170, 60, 0) 66%); opacity: 1; }
.hx { perspective: none; }
.hx-stage { position: relative; width: 100%; max-width: 600px; margin-left: auto; aspect-ratio: 1 / 1.06; }
.hx-stage > * { transition: translate 1.2s var(--ease); }
.hx-shape { position: absolute; border-radius: 46px; }
.hx-shape.s1 { left: 6%; bottom: 2%; width: 56%; height: 56%; background: linear-gradient(140deg, #ffc046 0%, #ff7a1a 100%); rotate: -7deg; box-shadow: 0 40px 60px -30px rgba(255, 106, 0, .6); }
.hx-shape.s2 { right: -3%; top: 0; width: 48%; height: 46%; background: linear-gradient(140deg, #7dd3fc 0%, #0284c7 100%); rotate: 9deg; box-shadow: 0 40px 60px -30px rgba(2, 132, 199, .55); }
.hx-dotgrid { position: absolute; right: -6%; bottom: 14%; width: 120px; height: 120px; background-image: radial-gradient(rgba(3, 105, 161, .35) 2px, transparent 2.5px); background-size: 16px 16px; }

.hx-main { position: absolute; right: 4%; top: 5%; width: 72%; height: 82%; border-radius: 40px; overflow: hidden; background: #cfeeff; box-shadow: 0 60px 90px -40px rgba(3, 70, 130, .7), 0 0 0 1px rgba(255, 255, 255, .6) inset; isolation: isolate; }
.hx-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .35) 100%); z-index: 1; pointer-events: none; }
.hx-main .hv-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hx-main .hv-slide.is-active { opacity: 1; }
.hx-main .hv-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 7s cubic-bezier(.25, .46, .45, .94);  }
.hx-main .hv-slide.is-active img { transform: scale(1); }
.hx-cap { position: absolute; left: 18px; right: 18px; top: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; font-weight: 500; font-size: .95rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.hx-cap .ic { color: #ffd34d; flex: none; }
.hx-cap span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s; }
.hx-cap em { font-style: normal; font-size: .82rem; opacity: .9; white-space: nowrap; }
.hx-cap em b { font-weight: 700; }
.hx-main .hv-dots { position: absolute; left: 50%; right: auto; bottom: 22px; translate: -50% 0; z-index: 2; display: flex; gap: 6px; }
.hx-main .hv-dots button { position: relative; width: 26px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .45); overflow: hidden; border: 0; padding: 0; cursor: pointer; }
.hx-main .hv-dots button.on { width: 46px; background: rgba(255, 255, 255, .45); }
.hx-main .hv-dots button.on::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: dotfill 4.5s linear forwards; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hx-round { position: absolute; left: 0; bottom: 4%; width: 34%; aspect-ratio: 1; z-index: 3; }
.hx-round img { position: absolute; inset: 9%; width: 82%; height: 82%; border-radius: 50%; object-fit: cover; border: 6px solid #fff; box-shadow: 0 30px 50px -20px rgba(3, 60, 110, .55);  }
.hx-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin-b 24s linear infinite; }
.hx-ring circle { fill: none; stroke: #ff7a1a; stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.hx-plane { position: absolute; right: 2%; top: 6%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--orange); box-shadow: 0 12px 24px -10px rgba(3, 60, 110, .5); }
.hx-plane .ic { width: 20px; height: 20px; }

.hx-ticket { position: absolute; left: -4%; top: 16%; z-index: 4; width: 230px; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -26px rgba(3, 60, 110, .55); }
.hxt-row { display: flex; justify-content: space-between; font-size: .62rem; font-weight: 600; letter-spacing: .16em !important; color: #8a97a8; }
.hxt-vip { color: var(--orange-d); }
.hxt-route { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
.hxt-route b { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--ink); }
.hxt-route small { font-size: .72rem; color: #8a97a8; }
.hxt-route .r { text-align: right; }
.hxt-line { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #38bdf8 0 5px, transparent 5px 9px); }
.hxt-line i { position: absolute; top: 50%; left: 0; translate: 0 -50%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--skygrad); color: #fff; animation: drive 3s var(--ease-io) infinite alternate; }
.hxt-line i .ic { width: 13px; height: 13px; }
.hxt-foot { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1.5px dashed rgba(11, 37, 69, .14); }
.hxt-foot::before, .hxt-foot::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: #e9f7ff; }
.hxt-foot::before { left: -24px; } .hxt-foot::after { right: -24px; }
.hxt-price { font-size: 1.35rem; font-weight: 700; background: var(--sun2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hxt-bar { width: 70px; height: 24px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity: .8; }

.hx-trips { position: absolute; right: 0; bottom: 3%; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 20px; background: #fff; box-shadow: 0 26px 50px -24px rgba(3, 60, 110, .5); }
.hx-thumbs { display: flex; }
.hx-thumbs img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin-right: -12px; }
.hx-trips > span:last-child { margin-left: 10px; display: flex; flex-direction: column; line-height: 1.25; }
.hx-trips b { font-weight: 700; color: var(--ink); }
.hx-trips small { font-size: .74rem; color: #8a97a8; }

@media (max-width: 980px) { .hx-stage { margin: 0 auto; max-width: 520px; } .hx-ticket { left: 0; } }
@media (max-width: 640px) {
  .hx-ticket { width: 190px; padding: 10px 12px; top: 10%; }
  .hxt-route b { font-size: 1.1rem; }
  .hxt-bar { width: 46px; }
  .hx-trips small { display: none; }
  .hx-cap em { display: none; }
}
@media (max-width: 640px) { .hx-round { display: none; } .hx-ticket { top: auto; bottom: 9%; left: 0; } .hx-trips { bottom: 0; } }

/* ==========================================================================
   v8 — "Travel app" style (Klook / Traveloka-like): clean, colorful, organised
   ========================================================================== */
:root { --app-bg: #f4f7fb; --card: #fff; --radius: 22px; --sh-card: 0 6px 24px -10px rgba(16, 40, 80, .18); --sh-hover: 0 18px 40px -16px rgba(16, 40, 80, .3); }

/* Solid white header on every page (app feel) */
.site-header, .site-header.scrolled, .home .site-header:not(.scrolled) { color: var(--ink); background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(16, 40, 80, .08); --header-h: 72px; }
.site-header::before { display: none !important; }
.site-header .brand img, .home .site-header:not(.scrolled) .brand img { filter: none !important; }
.site-header .brand { height: 48px; }
.site-header .lang-switch, .site-header .burger { border-color: rgba(16, 40, 80, .15) !important; }
.main-nav > ul > li > a { font-weight: 500; }
.main-nav > ul > li > a.is-active { color: var(--orange-d); }
.cursor, .cursor-label { display: none !important; }

/* page body */
body.app { background: var(--app-bg); }
.app main { padding-top: 72px; }
.ax-sec { padding: 28px 0; }
.ax-sec:last-of-type { padding-bottom: 70px; }

/* ---------- Hero banner ---------- */
.ax-hero { padding: 22px 0 10px; }
.ax-banner { position: relative; min-height: 470px; border-radius: 30px; overflow: hidden; isolation: isolate; color: #fff; display: flex; align-items: center; box-shadow: 0 30px 60px -36px rgba(16, 40, 80, .6); }
.ax-slides { position: absolute; inset: 0; z-index: -2; }
.ax-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.ax-slide.is-active { opacity: 1; }
.ax-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 7s ease-out;  }
.ax-slide.is-active img { transform: scale(1); }
.ax-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 98, 0, .95) 0%, rgba(255, 128, 0, .82) 30%, rgba(255, 150, 20, .35) 58%, rgba(255, 160, 40, 0) 78%); }
.ax-banner-in { position: relative; padding: 48px 54px 110px; max-width: 640px; }
.ax-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--orange-d); font-weight: 500; font-size: .92rem; }
.ax-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.ax-pill.light { background: rgba(255, 255, 255, .2); color: #fff; }
.ax-pill.light .dot { background: #ffd34d; }
.ax-banner h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; line-height: 1.12; margin: 18px 0 14px; text-shadow: 0 4px 20px rgba(150, 50, 0, .25); }
.ax-banner h1 .hl { color: #fff7c2; }
.ax-banner p { font-size: 1.08rem; color: rgba(255, 255, 255, .95); max-width: 520px; margin-bottom: 18px; }
.ax-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-hero-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: .88rem; font-weight: 500; backdrop-filter: blur(6px); }
.ax-hero-tags .ic { width: 16px; height: 16px; }
.ax-loc { position: absolute; right: 22px; top: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(8px); font-size: .88rem; font-weight: 500; }
.ax-loc .ic { color: #ffd34d; width: 16px; height: 16px; }
.ax-loc span { transition: opacity .35s; }
.ax-dots { position: absolute; right: 26px; bottom: 96px; display: flex; gap: 6px; }
.ax-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .4s var(--ease), background .3s; }
.ax-dots button.on { width: 24px; background: #fff; }

/* ---------- Search box ---------- */
.ax-search { position: relative; z-index: 3; margin: -70px 26px 0; padding: 8px 16px 16px; border-radius: 24px; background: #fff; box-shadow: 0 24px 50px -24px rgba(16, 40, 80, .4); }
.ax-tabs { display: flex; gap: 4px; padding: 6px 0 12px; border-bottom: 1px solid #edf1f6; margin-bottom: 14px; overflow-x: auto; }
.ax-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 12px; background: transparent; font-weight: 500; font-size: .98rem; color: #5b6b80; cursor: pointer; white-space: nowrap; transition: background .3s, color .3s; }
.ax-tabs button .ic { width: 20px; height: 20px; }
.ax-tabs button:hover { background: #f4f7fb; }
.ax-tabs button.on { background: #fff1e6; color: var(--orange-d); }
.ax-pane { display: none; grid-template-columns: 1fr 1.5fr 1fr auto; gap: 10px; align-items: stretch; }
.ax-pane.on { display: grid; }
#p-car.on, #p-tour.on { grid-template-columns: 1.8fr 1fr auto; }
.ax-f { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; border: 1.5px solid #e8edf4; min-width: 0; transition: border-color .3s, background .3s; }
label.ax-f { cursor: pointer; }
label.ax-f:hover, label.ax-f:focus-within { border-color: var(--sky); background: #f7fcff; }
.ax-f > span:last-child { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ax-f small { font-size: .8rem; color: #8090a3; }
.ax-f b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-f select { appearance: none; width: 100%; border: 0; padding: 0 20px 0 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230b2545' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right center / 10px; font-weight: 600; font-size: 1rem; color: var(--ink); cursor: pointer; text-overflow: ellipsis; }
.ax-f select:focus { outline: none; }
.ax-f strong { font-size: 1.45rem; font-weight: 700; color: var(--orange-d); line-height: 1.15; }
.ax-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; }
.ax-ic .ic { width: 21px; height: 21px; }
.ax-ic.o { background: #fff1e6; color: var(--orange-d); } .ax-ic.s { background: #e6f6ff; color: var(--sky-d); } .ax-ic.y { background: #fff7d6; color: #c98a00; }
.ax-pane .btn { border-radius: 16px; padding-inline: 30px; }

/* ---------- Category icons ---------- */
.ax-cats-sec { padding-top: 34px; }
.ax-cats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; padding: 18px; border-radius: var(--radius); background: #fff; box-shadow: var(--sh-card); }
.ax-cat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 6px; border-radius: 16px; text-align: center; font-size: .9rem; font-weight: 500; color: var(--ink); line-height: 1.3; transition: background .3s, transform .4s var(--ease); }
.ax-cat:hover { background: #f4f7fb; transform: translateY(-3px); }
.ax-cat-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: #fff; box-shadow: 0 10px 18px -10px var(--cc, #ff6a00); }
.ax-cat-ic .ic { width: 28px; height: 28px; }
.ax-cat-ic.c1 { background: linear-gradient(140deg, #ffad42, #ff6a00); --cc: #ff6a00; }
.ax-cat-ic.c2 { background: linear-gradient(140deg, #5cc8ff, #0284c7); --cc: #0284c7; }
.ax-cat-ic.c3 { background: linear-gradient(140deg, #ffd84d, #f5a300); --cc: #f5a300; }
.ax-cat-ic.c4 { background: linear-gradient(140deg, #5ee0a0, #0e9f6e); --cc: #0e9f6e; }
.ax-cat-ic.c5 { background: linear-gradient(140deg, #7aa8ff, #3b5bdb); --cc: #3b5bdb; }
.ax-cat-ic.c6 { background: linear-gradient(140deg, #ff8fc8, #e0287f); --cc: #e0287f; }
.ax-cat-ic.c7 { background: linear-gradient(140deg, #c49bff, #7c3aed); --cc: #7c3aed; }
.ax-cat-ic.c8 { background: linear-gradient(140deg, #4be08a, #06c755); --cc: #06c755; }

/* ---------- Promo banners ---------- */
.ax-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ax-promo { position: relative; display: flex; align-items: flex-end; min-height: 200px; padding: 20px; border-radius: var(--radius); overflow: hidden; isolation: isolate; color: #fff; box-shadow: var(--sh-card); transition: box-shadow .4s; }
.ax-promo:hover { box-shadow: var(--sh-hover); }
.ax-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease);  }
.ax-promo:hover img { transform: scale(1.08); }
.ax-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.pr-orange::before { background: linear-gradient(100deg, rgba(255, 98, 0, .95) 10%, rgba(255, 130, 0, .5) 60%, rgba(255, 130, 0, .1)); }
.pr-sky::before { background: linear-gradient(100deg, rgba(2, 110, 180, .95) 10%, rgba(14, 165, 233, .5) 60%, rgba(14, 165, 233, .1)); }
.pr-violet::before { background: linear-gradient(100deg, rgba(110, 40, 210, .95) 10%, rgba(168, 85, 247, .5) 60%, rgba(168, 85, 247, .1)); }
.pr-tag { position: absolute; top: 16px; left: 16px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-size: .8rem; font-weight: 600; }
.pr-txt small { display: block; font-size: .85rem; opacity: .9; }
.pr-txt b { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.pr-txt em { display: inline-block; margin-top: 8px; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-style: normal; font-weight: 700; font-size: 1.05rem; backdrop-filter: blur(6px); }
.pr-txt em small { display: inline; font-weight: 400; font-size: .8rem; }

/* ---------- Section heads ---------- */
.ax-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ax-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; }
.ax-head h2 .ic { width: 28px; height: 28px; color: var(--orange); }
.ax-head p { margin: 4px 0 0; color: #6b7a8d; font-size: .95rem; }
.ax-head.center { justify-content: center; text-align: center; }
.ax-head-r { display: flex; align-items: center; gap: 8px; }
.ax-more { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--orange-d); font-weight: 600; font-size: .92rem; box-shadow: var(--sh-card); transition: background .3s, color .3s; }
.ax-more .ic { width: 16px; height: 16px; }
.ax-more:hover { background: var(--orange); color: #fff; }
.ax-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); cursor: pointer; box-shadow: var(--sh-card); transition: background .3s, color .3s; }
.ax-arrow:hover { background: var(--ink); color: #fff; }
.ax-arrow .ic { width: 18px; height: 18px; }

/* fare row (horizontal scroller) */
.ax-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; scrollbar-width: thin; }
.ax-row > * { scroll-snap-align: start; }
.ax-row .fare { background: #fff; border-color: #fff; box-shadow: var(--sh-card); backdrop-filter: none; }
@media (min-width: 1100px) { .ax-row { grid-auto-columns: calc((100% - 42px) / 4); } }

/* tour chips + grid */
.ax-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ax-chips button { padding: 8px 18px; border-radius: 999px; border: 1.5px solid #e2e8f0; background: #fff; font-weight: 500; font-size: .92rem; color: #4a5d75; cursor: pointer; transition: all .3s; }
.ax-chips button:hover { border-color: var(--orange); color: var(--orange-d); }
.ax-chips button.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.ax-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tcard { --cc: #ff6a00; display: flex; flex-direction: column; border-radius: var(--radius); background: #fff; overflow: hidden; box-shadow: var(--sh-card); transition: transform .45s var(--ease), box-shadow .45s; }
.tcard.cat-laos { --cc: #3b5bdb; } .tcard.cat-sipsongpanna { --cc: #e0287f; } .tcard.cat-thailand { --cc: #ff6a00; }
.tcard:hover { transform: translateY(-6px); box-shadow: var(--sh-hover); }
.tcard-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.tcard-img .cover { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease);  }
.tcard:hover .tcard-img .cover { transform: scale(1.08); }
.tcard-badge { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 8px; background: var(--cc); color: #fff; font-size: .78rem; font-weight: 600; }
.tcard-dur { position: absolute; bottom: 10px; left: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .78rem; backdrop-filter: blur(4px); }
.tcard-dur .ic { width: 14px; height: 14px; }
.tcard-info { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.tcard-from { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: #8090a3; }
.tcard-from .ic { width: 13px; height: 13px; }
.tcard-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.tcard-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tcard-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; background: #f1f5f9; font-size: .74rem; color: #5b6b80; }
.tcard-tags .ic { width: 13px; height: 13px; }
.tcard-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px dashed #e8edf4; }
.tcard-price { font-size: 1.25rem; font-weight: 700; color: var(--orange-d); }
.tcard-price small { font-size: .74rem; font-weight: 400; color: #8090a3; }
.tcard-price.ask { font-size: .98rem; color: var(--sky-d); }
.tcard-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff1e6; color: var(--orange-d); transition: background .3s, color .3s; }
.tcard-go .ic { width: 16px; height: 16px; }
.tcard:hover .tcard-go { background: var(--orange); color: #fff; }

/* Laos destinations band */
.ax-laos { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; padding: 28px; border-radius: 28px; background: linear-gradient(120deg, #2f4fd1 0%, #3b82f6 55%, #38bdf8 100%); color: #fff; box-shadow: 0 24px 50px -28px rgba(47, 79, 209, .7); overflow: hidden; }
.ax-laos-head h2 { color: #fff; font-size: 1.7rem; margin: 14px 0 8px; }
.ax-laos-head p { color: rgba(255, 255, 255, .88); font-size: .95rem; }
.ax-laos-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ax-dest { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 12px; border-radius: 20px; background: rgba(255, 255, 255, .14); text-align: center; transition: background .3s, transform .4s var(--ease); }
.ax-dest:hover { background: rgba(255, 255, 255, .26); transform: translateY(-4px); }
.ax-dest-img { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; margin-bottom: 6px; }
.ax-dest-img .cover { width: 100%; height: 100%; object-fit: cover;  }
.ax-dest-img em { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #2f4fd1; font-style: normal; font-weight: 700; font-size: .82rem; }
.ax-dest b { font-weight: 600; font-size: .98rem; }
.ax-dest small { font-size: .8rem; opacity: .85; }

/* why / steps */
.ax-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ax-why-card { padding: 24px 20px; border-radius: var(--radius); background: #fff; box-shadow: var(--sh-card); text-align: center; }
.ax-why-card .ax-cat-ic { margin: 0 auto 14px; }
.ax-why-card h3 { font-size: 1.12rem; margin-bottom: 6px; }
.ax-why-card p { margin: 0; font-size: .9rem; color: #6b7a8d; }
.ax-steps { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 14px; align-items: stretch; }
.ax-steps-head { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 24px; border-radius: var(--radius); background: linear-gradient(140deg, #ff8a1f, #ff5e00); color: #fff; }
.ax-steps-head h2 { color: #fff; font-size: 1.5rem; margin: 0; }
.ax-steps-head .btn { background: #fff; color: var(--orange-d); box-shadow: none; }
.ax-steps-head .btn:hover { color: #fff; }
.ax-step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; border-radius: var(--radius); background: #fff; box-shadow: var(--sh-card); }
.ax-step .ax-cat-ic { width: 50px; height: 50px; border-radius: 15px; }
.ax-step .ax-cat-ic .ic { width: 24px; height: 24px; }
.ax-step-n { position: absolute; right: 18px; top: 14px; font-size: 2.6rem; font-weight: 800; color: #eef2f7; line-height: 1; }
.ax-step h3 { font-size: 1.08rem; margin: 0 0 4px; }
.ax-step p { margin: 0; font-size: .88rem; color: #6b7a8d; }

/* LINE CTA */
.ax-cta { display: grid; grid-template-columns: 1.3fr 1fr; border-radius: 28px; overflow: hidden; background: linear-gradient(120deg, #0ea5e9, #0369a1); color: #fff; box-shadow: 0 24px 50px -28px rgba(3, 105, 161, .7); }
.ax-cta-txt { padding: clamp(28px, 4vw, 48px); }
.ax-cta-txt h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 8px; }
.ax-cta-txt p { color: rgba(255, 255, 255, .9); margin-bottom: 22px; }
.ax-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ax-cta-img img { width: 100%; height: 100%; object-fit: cover; min-height: 240px;  }
.app .review-invite { background: #fff; box-shadow: var(--sh-card); border-radius: var(--radius); }

/* footer: app clean */
.app .site-footer .footer-wave .fw-a { fill: var(--app-bg); }

/* responsive */
@media (max-width: 1100px) {
  .ax-cats { grid-template-columns: repeat(4, 1fr); }
  .ax-grid { grid-template-columns: repeat(3, 1fr); }
  .ax-laos { grid-template-columns: 1fr; }
  .ax-steps { grid-template-columns: 1fr 1fr; }
  .ax-why { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ax-pane.on, #p-car.on, #p-tour.on { grid-template-columns: 1fr; }
  .ax-search { margin: -60px 10px 0; }
  .ax-promos { grid-template-columns: 1fr; }
  .ax-grid { grid-template-columns: 1fr 1fr; }
  .ax-laos-list { grid-template-columns: repeat(5, 150px); overflow-x: auto; padding-bottom: 6px; }
  .ax-cta { grid-template-columns: 1fr; }
  .ax-cta-img { display: none; }
  .ax-banner-in { padding: 32px 26px 100px; }
  .ax-banner::before { background: linear-gradient(180deg, rgba(255, 98, 0, .92) 0%, rgba(255, 128, 0, .75) 55%, rgba(255, 150, 20, .35) 100%); }
}
@media (max-width: 560px) {
  .ax-cats { grid-template-columns: repeat(4, 1fr); padding: 10px; gap: 4px; }
  .ax-cat { font-size: .78rem; padding: 8px 2px; }
  .ax-cat-ic { width: 48px; height: 48px; border-radius: 15px; }
  .ax-cat-ic .ic { width: 24px; height: 24px; }
  .ax-grid { grid-template-columns: 1fr; }
  .ax-steps, .ax-why { grid-template-columns: 1fr; }
  .ax-loc { display: none; }
  .ax-banner h1 { font-size: 2.3rem; }
}

/* ---------- v8 inner pages: app-style contained banner ---------- */
body { background: var(--app-bg); }
.page-hero { width: min(1280px, 100% - 40px); margin: calc(72px + 22px) auto 0; min-height: 340px !important; padding: 56px 0 50px; border-radius: 30px; box-shadow: 0 30px 60px -36px rgba(16, 40, 80, .6); }
.page-hero > .container { width: 100%; padding: 0 clamp(24px, 4vw, 54px); }
.page-hero::before { background: linear-gradient(90deg, rgba(255, 98, 0, .92) 0%, rgba(255, 128, 0, .75) 35%, rgba(255, 150, 20, .25) 70%, rgba(255, 160, 40, 0) 100%); }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 800; }
.page-hero .eyebrow.light { background: #fff; color: var(--orange-d); }
.page-hero .eyebrow.light::before { background: var(--orange); }
.page-hero > img { top: 0; height: 100%; }
.page-hero::after { display: none; }
.section { padding: clamp(40px, 6vw, 70px) 0; }
.section-tight { padding: 34px 0; }
.svc-section, .fares-section, .why-section, .reviews-section { background: transparent; }
.mesh { display: none; }
.fare { background: #fff; backdrop-filter: none; box-shadow: var(--sh-card); }
.form-card, .content-card, .fact, .ctile, .stat-tile, .wb-card, .car-card { box-shadow: var(--sh-card); }
.cta-band .cta-inner { border-radius: 28px; }
.auth-wrap { padding-top: 72px; }
@media (max-width: 860px) { .page-hero::before { background: linear-gradient(180deg, rgba(255, 98, 0, .9), rgba(255, 128, 0, .6)); } }

/* ---------- v9: mega-menu cards — photo on top, text on white (no dark overlay) ---------- */
.drop { padding: 14px; gap: 10px; }
.drop-card { justify-content: flex-start; min-height: 0; padding: 0; border-radius: 16px; background: #f6f8fb; color: var(--ink); transition: background .3s, transform .4s var(--ease), box-shadow .4s; }
.drop-card::before { display: none; }
.drop-card img { position: relative; inset: auto; z-index: auto; display: block; width: 100%; height: 108px; object-fit: cover; border-radius: 16px 16px 0 0; }
.drop-card b { padding: 10px 14px 0; font-family: "Kanit", sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.drop-card small { padding: 2px 14px 12px; font-size: .8rem; color: #6b7a8d; }
.drop-card:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(16, 40, 80, .35); }
.drop-card:hover img { transform: none; }
.drop-card:hover b { color: var(--orange-d); }
.drop-laos { padding: 8px 2px 0; border-top: 1px solid #eef2f7; }
.drop-laos a { background: #fff; color: var(--ink); border-color: #e2e8f0; }

/* ---------- Preloader safety: first visit only, never blocks the page ---------- */
.no-preload .preloader { display: none !important; }
.preloader { animation: pl-auto-hide .6s ease 2.5s forwards; }
@keyframes pl-auto-hide { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.is-loaded .preloader { pointer-events: none; }

/* ---------- v10: contact list (app style) ---------- */
.clist { display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: var(--sh-card); overflow: hidden; }
.crow { display: flex; align-items: center; gap: 16px; padding: 18px 20px; transition: background .25s; }
.crow + .crow { border-top: 1px solid #eef2f7; }
.crow:hover { background: #f8fafc; }
.crow-ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; color: #fff; }
.crow-ic .ic { width: 24px; height: 24px; }
.ci-phone .crow-ic { background: #ff7a1a; }
.ci-line .crow-ic { background: #06c755; }
.ci-wa .crow-ic { background: #25d366; }
.ci-mail .crow-ic { background: #0ea5e9; }
.ci-pin { background: #7c3aed; }
.crow-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.crow-txt small { font-size: .82rem; color: #8090a3; }
.crow-txt b { font-size: 1.08rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.crow-btn { flex: none; padding: 8px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; transition: background .25s, color .25s; }
.ci-phone .crow-btn { background: #fff1e6; color: #e85d00; }
.ci-line .crow-btn { background: #e6f9ee; color: #04a346; }
.ci-wa .crow-btn { background: #e6f9ee; color: #12a150; }
.ci-mail .crow-btn { background: #e6f6ff; color: #0369a1; }
.ci-phone:hover .crow-btn { background: #ff7a1a; color: #fff; }
.ci-line:hover .crow-btn { background: #06c755; color: #fff; }
.ci-wa:hover .crow-btn { background: #25d366; color: #fff; }
.ci-mail:hover .crow-btn { background: #0ea5e9; color: #fff; }
.cmap { margin-top: 16px; border-radius: 22px; background: #fff; box-shadow: var(--sh-card); overflow: hidden; }
.cmap-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.cmap-frame { aspect-ratio: 16 / 9; border-top: 1px solid #eef2f7; }
.cmap-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 480px) { .crow { gap: 12px; padding: 14px 16px; } .crow-btn { padding: 7px 12px; font-size: .8rem; } }

/* ---------- v11: contact section ---------- */
.cx-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 24px; align-items: start; }
.cx-left { display: flex; flex-direction: column; gap: 16px; }
.cx-left .cmap { margin-top: 0; }

.cx-hero { position: relative; display: grid; grid-template-columns: 1fr 170px; align-items: center; gap: 18px; padding: 26px; border-radius: 26px; overflow: hidden; isolation: isolate; color: #fff; background: linear-gradient(135deg, #ff9a2e 0%, #ff6a00 55%, #f25500 100%); box-shadow: 0 24px 46px -24px rgba(255, 106, 0, .7); }
.cx-blob { position: absolute; border-radius: 50%; z-index: -1; background: rgba(255, 255, 255, .14); }
.cx-blob.b1 { width: 220px; height: 220px; right: -60px; top: -80px; }
.cx-blob.b2 { width: 120px; height: 120px; left: 40%; bottom: -60px; background: rgba(255, 214, 77, .3); }
.cx-online { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: .82rem; font-weight: 500; }
.cx-online i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); animation: ping-g 1.8s infinite; }
.cx-hero h3 { color: #fff; font-size: 1.55rem; font-weight: 700; margin: 12px 0 6px; line-height: 1.3; }
.cx-hero p { margin: 0 0 18px; font-size: .93rem; color: rgba(255, 255, 255, .92); }
.cx-hero-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; font-weight: 600; font-size: .95rem; transition: transform .3s var(--ease), box-shadow .3s; }
.cx-btn span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.cx-btn .ic { width: 18px; height: 18px; }
.cx-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .4); }
.cx-line { background: #fff; color: #04a346; }
.cx-line span { background: #06c755; color: #fff; }
.cx-call { background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.cx-call span { background: #fff; color: var(--orange-d); }
.cx-hero-img { align-self: stretch; border-radius: 18px; overflow: hidden; border: 4px solid rgba(255, 255, 255, .85); transform: rotate(3deg); box-shadow: 0 16px 30px -14px rgba(120, 40, 0, .6); }
.cx-hero-img img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.ci-fb .crow-ic { background: #1877f2; }
.ci-fb .crow-btn { background: #e8f0fe; color: #1259c3; }
.ci-fb:hover .crow-btn { background: #1877f2; color: #fff; }

.cx-form { padding: 28px; border-radius: 26px; background: #fff; box-shadow: var(--sh-card); }
.cx-form-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eef2f7; }
.cx-avatar { position: relative; flex: none; width: 56px; height: 56px; border-radius: 18px; background: #f1f8ff; display: grid; place-items: center; }
.cx-avatar img { width: 44px; height: 44px; object-fit: contain; }
.cx-avatar i { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; border: 3px solid #fff; }
.cx-form-head h3 { font-size: 1.35rem; margin: 0; }
.cx-form-head p { margin: 2px 0 0; font-size: .9rem; color: #6b7a8d; }
.cx-label { font-size: .9rem; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.cx-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.cx-topic { position: relative; cursor: pointer; }
.cx-topic input { position: absolute; opacity: 0; }
.cx-topic span { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 14px; border: 1.5px solid #e6ebf2; background: #fafcff; font-size: .9rem; font-weight: 500; color: #4a5d75; transition: all .25s; }
.cx-topic .ic { width: 18px; height: 18px; color: #8090a3; transition: color .25s; }
.cx-topic:hover span { border-color: #ffc89a; }
.cx-topic input:checked + span { border-color: var(--orange); background: #fff4ea; color: var(--orange-d); box-shadow: 0 6px 14px -8px rgba(255, 106, 0, .6); }
.cx-topic input:checked + span .ic { color: var(--orange); }
.cx-topic input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }
.cx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.cx-fields .full { grid-column: 1 / -1; }
.cx-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; border: 1.5px solid #e6ebf2; background: #fafcff; transition: border-color .25s, background .25s, box-shadow .25s; }
.cx-input .ic { width: 19px; height: 19px; flex: none; color: #9aa7b8; transition: color .25s; }
.cx-input input, .cx-input textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 14px 0; font-size: 1rem; color: var(--ink); }
.cx-input input::placeholder, .cx-input textarea::placeholder { color: #9aa7b8; }
.cx-area { align-items: flex-start; }
.cx-area .ic { margin-top: 15px; }
.cx-area textarea { min-height: 130px; resize: vertical; }
.cx-input:focus-within { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(255, 122, 26, .12); }
.cx-input:focus-within .ic { color: var(--orange); }
.cx-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: .82rem; color: #8090a3; }
.cx-safe .ic { width: 15px; height: 15px; color: var(--green); }

@media (max-width: 980px) { .cx-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .cx-hero { grid-template-columns: 1fr; }
  .cx-hero-img { display: none; }
  .cx-topics { grid-template-columns: 1fr 1fr; }
  .cx-fields { grid-template-columns: 1fr; }
  .cx-form { padding: 20px; }
}
.cx-form { position: sticky; top: 96px; }
.cx-hero { grid-template-columns: 1fr; }

/* ---------- v12: inner page banner — natural photo, soft dark scrim instead of heavy orange ---------- */
.page-hero::before { background: linear-gradient(90deg, rgba(8, 22, 40, .74) 0%, rgba(8, 22, 40, .5) 38%, rgba(8, 22, 40, .12) 72%, rgba(8, 22, 40, 0) 100%), linear-gradient(0deg, rgba(8, 22, 40, .35) 0%, rgba(8, 22, 40, 0) 45%); }
.page-hero .chip { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }
.page-hero .breadcrumb { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); }
.page-hero h1 { text-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
@media (max-width: 860px) { .page-hero::before { background: linear-gradient(0deg, rgba(8, 22, 40, .8) 0%, rgba(8, 22, 40, .45) 55%, rgba(8, 22, 40, .2) 100%); } }

/* ---------- v13: booking side cards — clean white app style ---------- */
.book-box, .summary-card { background: #fff; color: #4a5d75; border: 1px solid #edf1f6; box-shadow: 0 20px 44px -26px rgba(16, 40, 80, .35); border-radius: 26px; }
.book-box::before, .summary-card::before { display: none; }
.book-box h2 { color: #8090a3; font-size: .82rem; letter-spacing: .06em; margin-bottom: 4px; }
.book-box .bb-price { color: var(--orange-d); font-size: 2.3rem; }
.book-box .bb-price small { color: #8090a3; }
.book-box .bb-price .ask { color: var(--orange-d); font-size: 1.7rem; }
.book-box .bb-meta { gap: 10px; border-color: #eef2f7; }
.book-box .bb-meta div { color: #5b6b80; }
.book-box .bb-meta b { color: var(--ink); }
.book-box .bb-meta .ic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: #fff3e8; color: var(--orange-d); }
.book-box .bb-meta div:nth-child(2) .ic { background: #e8f6ff; color: var(--sky-d); }
.book-box .bb-meta div:nth-child(3) .ic { background: #e9f9f0; color: #0e9f6e; }
.book-box .bb-contact .btn-outline { color: var(--ink); border-color: #dfe5ee; }
.book-box .bb-contact .btn-outline::after { background: var(--ink); }
.book-box .bb-contact .btn-outline:hover { color: #fff; }
.book-box .bb-note { color: #8090a3; }
.summary-card h2 { color: var(--ink); }
.summary-card h2 .ic { color: var(--orange); }
.summary-card .sum-row { border-color: #eef2f7; }
.summary-card .sum-row span:first-child { color: #8090a3; }
.summary-card .sum-row span:last-child { color: var(--ink); }
.summary-card .sum-total { padding: 14px 16px; border-radius: 16px; background: #fff6ee; }
.summary-card .sum-total span { color: #5b6b80; font-weight: 500; }
.sum-total b { color: var(--orange-d); }
.summary-card .muted-note { color: #8090a3; }

/* ---------- v14: fare cards — clean, single accent ---------- */
.fare2 { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: 20px; background: #fff; border: 1px solid #edf1f6; box-shadow: 0 8px 22px -14px rgba(16, 40, 80, .25); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.fare2:hover { transform: translateY(-4px); border-color: #ffd3ad; box-shadow: 0 18px 34px -18px rgba(255, 106, 0, .45); }
.f2-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.f2-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff3e8; color: var(--orange-d); }
.f2-ic .ic { width: 19px; height: 19px; }
.f2-code { padding: 3px 10px; border-radius: 8px; background: #f2f5f9; color: #6b7a8d; font-size: .76rem; font-weight: 600; letter-spacing: .06em; }
.f2-name { font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.f2-route { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: #8090a3; }
.f2-route .ic { width: 13px; height: 13px; }
.f2-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px dashed #e8edf4; }
.f2-price { font-size: 1.5rem; font-weight: 700; color: var(--orange-d); line-height: 1; }
.f2-price small { margin-left: 4px; font-size: .78rem; font-weight: 400; color: #8090a3; }
.f2-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff3e8; color: var(--orange-d); transition: background .3s, color .3s, transform .4s var(--ease); }
.f2-go .ic { width: 17px; height: 17px; }
.fare2:hover .f2-go { background: var(--orange); color: #fff; transform: translateX(3px); }
.fare-grid { gap: 14px; }
.ff-chips button.on { background: var(--orange); box-shadow: 0 8px 18px -10px rgba(255, 106, 0, .7); }
.ff-chips, .ff-search { box-shadow: 0 8px 22px -14px rgba(16, 40, 80, .25); border: 1px solid #edf1f6; }
.ax-row .fare2 { height: 100%; }

/* ---------- v15: home banner — natural photo, soft dark scrim ---------- */
.ax-banner::before { background: linear-gradient(90deg, rgba(8, 22, 40, .72) 0%, rgba(8, 22, 40, .48) 40%, rgba(8, 22, 40, .1) 72%, rgba(8, 22, 40, 0) 100%), linear-gradient(0deg, rgba(8, 22, 40, .35) 0%, rgba(8, 22, 40, 0) 40%); }
.ax-banner h1 { text-shadow: 0 6px 26px rgba(0, 0, 0, .35); }
.ax-banner h1 .hl { color: transparent; background: linear-gradient(100deg, #ffb347, #ffd34d); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.ax-hero-tags span { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); }
.ax-hero-tags .ic { color: #ffd34d; }
@media (max-width: 860px) { .ax-banner::before { background: linear-gradient(180deg, rgba(8, 22, 40, .78) 0%, rgba(8, 22, 40, .5) 60%, rgba(8, 22, 40, .3) 100%); } }

/* ---------- v16: promo cards — natural photo + white body ---------- */
.ax-promos2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pc { display: flex; flex-direction: column; border-radius: 22px; background: #fff; overflow: hidden; border: 1px solid #edf1f6; box-shadow: 0 8px 22px -14px rgba(16, 40, 80, .25); transition: transform .4s var(--ease), box-shadow .4s; }
.pc:hover { transform: translateY(-5px); box-shadow: 0 20px 38px -20px rgba(16, 40, 80, .4); }
.pc-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pc:hover .pc-img img { transform: scale(1.06); }
.pc-tag { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
.t-hot { background: #ff6a00; } .t-sky { background: #0a84c6; } .t-violet { background: #6d3fd8; }
.pc-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 16px; flex: 1; }
.pc-body > small { font-size: .82rem; color: #8090a3; }
.pc-body > b { font-size: 1.2rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.pc-price { font-size: 1.35rem; font-weight: 700; color: var(--orange-d); }
.pc-price small { font-size: .78rem; font-weight: 400; color: #8090a3; }
.pc-note { font-size: .86rem; color: #5b6b80; }
.pc-go { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #fff3e8; color: var(--orange-d); transition: background .3s, color .3s, transform .4s var(--ease); }
.pc-go .ic { width: 17px; height: 17px; }
.pc:hover .pc-go { background: var(--orange); color: #fff; transform: translateX(3px); }
@media (max-width: 860px) { .ax-promos2 { grid-template-columns: 1fr; } }

/* ---------- v17: promo posters (pastel, photo framed on the right) ---------- */
.pp { --bg1: #fff1e3; --bg2: #ffe0c2; --ac: #ff6a00; --ac2: #e85d00; position: relative; display: grid; grid-template-columns: 1fr 44%; align-items: center; gap: 10px; min-height: 230px; padding: 22px 18px 22px 24px; border-radius: 26px; overflow: hidden; isolation: isolate; background: linear-gradient(140deg, var(--bg1), var(--bg2)); transition: transform .4s var(--ease), box-shadow .4s; box-shadow: 0 10px 26px -18px rgba(16, 40, 80, .35); }
.pp:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--ac) 60%, transparent); }
.pp-sky { --bg1: #e6f6ff; --bg2: #c9ebff; --ac: #0a84c6; --ac2: #0369a1; }
.pp-violet { --bg1: #f1eaff; --bg2: #e0d2ff; --ac: #6d3fd8; --ac2: #5a2fc0; }
.pp-deco i { position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.pp-deco i:nth-child(1) { width: 190px; height: 190px; right: -40px; top: -60px; }
.pp-deco i:nth-child(2) { width: 90px; height: 90px; left: 38%; bottom: -40px; background: color-mix(in srgb, var(--ac) 14%, transparent); }
.pp-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.pp-tag { margin-bottom: 8px; padding: 4px 11px; border-radius: 999px; background: var(--ac); color: #fff; font-size: .76rem; font-weight: 600; }
.pp-txt small { font-size: .82rem; color: color-mix(in srgb, var(--ac2) 70%, #4a5d75); }
.pp-txt b { font-size: 1.3rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pp-price { margin-top: 6px; font-size: 1.9rem; font-weight: 800; color: var(--ac2); line-height: 1.05; }
.pp-price small { font-size: .82rem; font-weight: 500; color: #5b6b80; }
.pp-note { margin-top: 6px; font-size: .86rem; font-weight: 500; color: #4a5d75; line-height: 1.4; }
.pp-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 16px; border-radius: 999px; background: var(--ac); color: #fff; font-size: .88rem; font-weight: 600; transition: gap .3s, background .3s; }
.pp-btn .ic { width: 15px; height: 15px; }
.pp:hover .pp-btn { gap: 10px; background: var(--ac2); }
.pp-img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 16px 30px -14px rgba(16, 40, 80, .45); transform: rotate(4deg); transition: transform .5s var(--ease); }
.pp:hover .pp-img { transform: rotate(0deg) scale(1.03); }
.pp-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) and (min-width: 861px) { .pp { grid-template-columns: 1fr 38%; } .pp-txt b { font-size: 1.1rem; } .pp-price { font-size: 1.5rem; } }
.pp-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .pp-img { aspect-ratio: 1 / 1.05; }

/* ---------- v18: why + steps (pastel poster style) ---------- */
.wy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wy-card { --bg1: #fff1e3; --bg2: #ffe3c8; --ac: #ff6a00; position: relative; padding: 24px 22px; border-radius: 24px; background: linear-gradient(150deg, var(--bg1), var(--bg2)); overflow: hidden; isolation: isolate; transition: transform .4s var(--ease); }
.wy-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .5); z-index: -1; }
.wy-card:hover { transform: translateY(-5px); }
.wy-lemon { --bg1: #fff9df; --bg2: #ffefb0; --ac: #e09a00; }
.wy-sky { --bg1: #e8f7ff; --bg2: #cdeeff; --ac: #0a84c6; }
.wy-pink { --bg1: #ffeef6; --bg2: #ffd6ea; --ac: #db2777; }
.wy-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ac); color: #fff; box-shadow: 0 10px 20px -10px var(--ac); margin-bottom: 16px; }
.wy-ic .ic { width: 25px; height: 25px; }
.wy-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 6px; }
.wy-card p { margin: 0; font-size: .92rem; color: #4a5d75; line-height: 1.55; }

.st { --ac: #ff6a00; display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 28px; padding: 30px 34px; border-radius: 28px; background: linear-gradient(120deg, #fff4e8 0%, #fff9f0 50%, #eaf7ff 100%); border: 1px solid #fff; box-shadow: 0 10px 26px -18px rgba(16, 40, 80, .35); }
.st-head h2 { font-size: 1.55rem; margin: 10px 0 0; line-height: 1.3; }
.st-head .pp-tag { display: inline-block; margin: 0; }
.st-list { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.st-list::before { content: ""; position: absolute; left: 30px; right: 30px; top: 27px; border-top: 2px dashed #ffc896; z-index: 0; }
.st-item { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.st-n { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50%; background: #fff; color: var(--ac); border: 2px solid #ffd2a8; box-shadow: 0 8px 18px -10px rgba(255, 106, 0, .6); }
.st-n .ic { width: 25px; height: 25px; }
.st-n em { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ac); color: #fff; font-style: normal; font-size: .78rem; font-weight: 700; border: 2px solid #fff; }
.st-item b { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.st-item small { font-size: .86rem; color: #5b6b80; line-height: 1.5; }
.st-btn { --ac: #ff6a00; --ac2: #e85d00; margin: 0; padding: 12px 22px; font-size: .95rem; white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(255, 106, 0, .7); }
.st-btn:hover { gap: 10px; background: #e85d00; }
@media (max-width: 1100px) { .wy { grid-template-columns: 1fr 1fr; } .st { grid-template-columns: 1fr; } .st-btn { justify-self: start; } }
@media (max-width: 640px) { .wy { grid-template-columns: 1fr; } .st { padding: 24px 20px; } .st-list { grid-template-columns: 1fr; } .st-list::before { left: 27px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 2px dashed #ffc896; } .st-item { padding-left: 74px; min-height: 56px; } .st-n { position: absolute; left: 0; top: 0; } }
.st { grid-template-columns: 270px 1fr auto; } @media (min-width: 641px) { .st-list::before { right: calc(33.33% - 10px); } }

/* ---------- v19: steps — playful wiggle animation ---------- */
@media (min-width: 641px) {
  .st-list::before { border-top: 0; height: 2px; background: repeating-linear-gradient(90deg, #ffb877 0 8px, transparent 8px 16px); background-size: 32px 2px; animation: st-flow 1s linear infinite; }
}
@media (max-width: 640px) {
  .st-list::before { border-left: 0; width: 2px; background: repeating-linear-gradient(180deg, #ffb877 0 8px, transparent 8px 16px); background-size: 2px 32px; animation: st-flow-v 1s linear infinite; }
}
@keyframes st-flow { to { background-position: 32px 0; } }
@keyframes st-flow-v { to { background-position: 0 32px; } }
/* icons wiggle one after another */
.st-n .ic { animation: st-wiggle 3.6s ease-in-out infinite; transform-origin: 50% 60%; }
.st-item:nth-child(2) .st-n .ic { animation-delay: 1.2s; }
.st-item:nth-child(3) .st-n .ic { animation-delay: 2.4s; }
@keyframes st-wiggle { 0%, 18%, 100% { transform: rotate(0) scale(1); } 3% { transform: rotate(-16deg) scale(1.12); } 6% { transform: rotate(14deg) scale(1.12); } 9% { transform: rotate(-10deg) scale(1.08); } 12% { transform: rotate(6deg); } 15% { transform: rotate(-2deg); } }
/* circle glows in sync */
.st-n { animation: st-ring 3.6s ease-in-out infinite; }
.st-item:nth-child(2) .st-n { animation-delay: 1.2s; }
.st-item:nth-child(3) .st-n { animation-delay: 2.4s; }
@keyframes st-ring { 0%, 18%, 100% { box-shadow: 0 8px 18px -10px rgba(255, 106, 0, .6), 0 0 0 0 rgba(255, 140, 50, 0); border-color: #ffd2a8; } 6% { box-shadow: 0 8px 18px -10px rgba(255, 106, 0, .6), 0 0 0 8px rgba(255, 140, 50, .18); border-color: #ff8a2b; } }
/* number badge bounces */
.st-n em { animation: st-pop 3.6s ease-in-out infinite; }
.st-item:nth-child(2) .st-n em { animation-delay: 1.2s; }
.st-item:nth-child(3) .st-n em { animation-delay: 2.4s; }
@keyframes st-pop { 0%, 14%, 100% { transform: translateY(0) scale(1); } 4% { transform: translateY(-7px) scale(1.18); } 8% { transform: translateY(0) scale(.95); } 11% { transform: translateY(-3px) scale(1.05); } }
/* hover: jump */
.st-item { cursor: default; }
.st-item:hover .st-n { animation: st-jump .6s cubic-bezier(.3, 1.6, .5, 1); background: #ff6a00; color: #fff; border-color: #ff6a00; }
.st-item:hover .st-n .ic { animation: none; }
@keyframes st-jump { 0% { transform: translateY(0); } 40% { transform: translateY(-10px) rotate(-6deg); } 100% { transform: translateY(0); } }
.st-n { transition: background .3s, color .3s; }
/* CTA wobble every few seconds */
.st-btn { animation: st-nudge 4s ease-in-out infinite 1s; }
@keyframes st-nudge { 0%, 85%, 100% { transform: rotate(0); } 88% { transform: rotate(-4deg) scale(1.05); } 91% { transform: rotate(4deg) scale(1.05); } 94% { transform: rotate(-2deg); } 97% { transform: rotate(1deg); } }
.st-btn:hover { animation: none; }

/* ---------- v20: LINE CTA with animated chat ---------- */
.lc { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 30px; padding: 40px 44px; border-radius: 30px; overflow: hidden; isolation: isolate; background: linear-gradient(130deg, #e9fbf0 0%, #d4f6e2 55%, #e6f6ff 100%); box-shadow: 0 12px 30px -20px rgba(16, 80, 40, .35); }
.lc-deco i { position: absolute; z-index: -1; border-radius: 50%; }
.lc-deco i:nth-child(1) { width: 260px; height: 260px; right: -70px; top: -90px; background: rgba(255, 255, 255, .6); }
.lc-deco i:nth-child(2) { width: 120px; height: 120px; left: 42%; bottom: -60px; background: rgba(6, 199, 85, .14); }
.lc-deco i:nth-child(3) { width: 60px; height: 60px; left: -20px; top: 30px; background: rgba(255, 255, 255, .7); }
.lc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #04a346; font-size: .85rem; font-weight: 600; box-shadow: 0 6px 14px -10px rgba(4, 120, 60, .5); }
.lc-badge i { width: 8px; height: 8px; border-radius: 50%; background: #06c755; animation: ping-g 1.8s infinite; }
.lc-txt h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; color: var(--ink); margin: 14px 0 8px; line-height: 1.25; }
.lc-txt p { color: #4a5d75; font-size: 1rem; margin: 0 0 24px; max-width: 460px; }
.lc-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.lc-line { display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px 8px 8px; border-radius: 999px; background: #06c755; color: #fff; font-weight: 700; font-size: 1.05rem; box-shadow: 0 14px 26px -12px rgba(6, 199, 85, .8); animation: st-nudge 4s ease-in-out infinite 1.5s; transition: background .3s; }
.lc-line span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #06c755; }
.lc-line .ic { width: 22px; height: 22px; }
.lc-line:hover { background: #04a346; animation: none; }
.lc-call { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; min-height: 56px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; border: 1px solid #dfeee6; transition: border-color .3s, color .3s; }
.lc-call .ic { width: 19px; height: 19px; color: #04a346; }
.lc-call:hover { border-color: #06c755; color: #04a346; }

.lc-chat { justify-self: end; width: 100%; max-width: 380px; border-radius: 24px; background: #fff; box-shadow: 0 30px 50px -26px rgba(16, 60, 40, .45); overflow: hidden; transform: rotate(2deg); }
.lc-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #06c755; color: #fff; }
.lc-chat-head img { width: 36px; height: 36px; border-radius: 50%; background: #fff; padding: 3px; object-fit: contain; }
.lc-chat-head b { display: block; font-size: .95rem; line-height: 1.2; }
.lc-chat-head small { display: flex; align-items: center; gap: 5px; font-size: .75rem; opacity: .9; }
.lc-chat-head small i { width: 7px; height: 7px; border-radius: 50%; background: #c6ffd9; }
.lc-msgs { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-height: 230px; background: #f2f7f4; }
.m { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: .88rem; line-height: 1.45; opacity: 0; transform: translateY(10px) scale(.95); animation: msg-in 12s ease infinite; animation-delay: calc(var(--i) * 1.2s); }
.m.me { align-self: flex-end; background: #8de08a; color: #0b2a14; border-bottom-right-radius: 5px; }
.m.them { align-self: flex-start; background: #fff; color: var(--ink); border-bottom-left-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .05); }
.m.typing { display: inline-flex; gap: 4px; align-self: flex-start; background: #fff; padding: 12px 14px; }
.m.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa7b8; animation: dot 1s infinite; }
.m.typing i:nth-child(2) { animation-delay: .15s; } .m.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes msg-in { 0% { opacity: 0; transform: translateY(10px) scale(.95); } 4%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 860px) { .lc { grid-template-columns: 1fr; padding: 30px 22px; } .lc-chat { justify-self: stretch; max-width: none; transform: none; } }
.lc-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- v21: Chill vs Adventure ---------- */
.vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vs-side { --ac: #0a9396; --ac2: #067a7c; --bg: linear-gradient(170deg, #e7fbf8 0%, #d3f4ef 100%); display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--bg); box-shadow: 0 14px 34px -22px rgba(16, 60, 70, .45); }
.vs-active { --ac: #ff6a00; --ac2: #e85d00; --bg: linear-gradient(170deg, #fff4e8 0%, #ffe5cc 100%); }
.vs-photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.vs-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.vs-side:hover .vs-photo img { transform: scale(1.07); }
.vs-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 20, 30, .7) 0%, rgba(5, 20, 30, 0) 55%); }
.vs-badge { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 7px 16px; border-radius: 999px; background: var(--ac); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: 0 8px 18px -8px var(--ac); animation: vs-bob 3s ease-in-out infinite; }
.vs-active .vs-badge { animation-delay: 1.5s; }
@keyframes vs-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.vs-title { position: absolute; left: 22px; bottom: 18px; z-index: 2; color: #fff; }
.vs-title b { display: block; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.1; text-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.vs-title small { font-size: .95rem; opacity: .92; }
.vs-list { list-style: none; margin: 0; padding: 18px; display: grid; gap: 10px; }
.vs-list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .75); opacity: 0; transform: translateX(-16px); transition: opacity .6s var(--ease), transform .6s var(--ease), background .3s; transition-delay: calc(var(--i) * 90ms + 200ms); }
.vs-active .vs-list li { transform: translateX(16px); }
.vs-side.in .vs-list li { opacity: 1; transform: none; }
.vs-list li:hover { background: #fff; }
.vs-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--ac); color: #fff; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.vs-ic .ic { width: 21px; height: 21px; }
.vs-list li:hover .vs-ic { transform: rotate(-10deg) scale(1.12); }
.vs-list b { display: block; font-weight: 700; color: var(--ink); font-size: 1rem; }
.vs-list small { color: #4a5d75; font-size: .87rem; }
.vs-mid { position: absolute; left: 50%; top: calc((100% - 0px) * .28); z-index: 3; transform: translate(-50%, -50%); }
.vs-mid span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, #0a9396 0%, #0a9396 48%, #ff6a00 52%, #ff6a00 100%); color: #fff; font-weight: 900; font-size: 1.6rem; font-style: italic; border: 5px solid #fff; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .4); animation: vs-pulse 2s ease-in-out infinite; }
@keyframes vs-pulse { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.1) rotate(6deg); box-shadow: 0 0 0 10px rgba(255, 255, 255, .5), 0 14px 30px -10px rgba(0, 0, 0, .4); } }
.vs-foot { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding: 16px 20px; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px -14px rgba(16, 40, 80, .25); }
.vs-foot > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.vs-foot > span .ic { color: var(--orange); }
.vs-foot .st-btn { animation: none; }
@media (max-width: 860px) { .vs { grid-template-columns: 1fr; } .vs-mid { top: 50%; } }
.ax-laos-list { grid-template-columns: repeat(3, 1fr); }
.ax-dest { flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 8px; }
.ax-dest-img { width: 84px; flex: none; margin: 0; aspect-ratio: 1; }
.ax-dest b { display: block; font-size: 1rem; line-height: 1.3; }
.ax-dest > span:not(.ax-dest-img) { display: flex; flex-direction: column; }
@media (max-width: 860px) { .ax-laos-list { grid-template-columns: 1fr 1fr; overflow: visible; } }
@media (max-width: 560px) { .ax-laos-list { grid-template-columns: 1fr; } }

/* ==========================================================================
   v22 — Tour detail page
   ========================================================================== */
.td-page main { padding-top: 72px; }
.td-hero { padding: 26px 0 6px; }
.td-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .88rem; color: #8090a3; margin-bottom: 14px; }
.td-crumb a:hover { color: var(--orange-d); }
.td-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.td-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.td-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid #e6ebf2; font-size: .85rem; font-weight: 500; color: #4a5d75; }
.td-chip .ic { width: 15px; height: 15px; color: var(--orange); }
.td-chip.c-laos { background: #3b5bdb; border-color: #3b5bdb; color: #fff; }
.td-chip.c-sipsongpanna { background: #e0287f; border-color: #e0287f; color: #fff; }
.td-chip.c-thailand { background: #ff6a00; border-color: #ff6a00; color: #fff; }
.td-title { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 800; line-height: 1.15; margin: 0 0 8px; color: var(--ink); }
.td-from { display: flex; align-items: center; gap: 6px; margin: 0; color: #5b6b80; }
.td-from .ic { color: var(--orange); width: 18px; height: 18px; }
.td-head-price { padding: 14px 22px; border-radius: 20px; background: #fff; box-shadow: 0 10px 26px -16px rgba(16, 40, 80, .35); text-align: right; }
.td-head-price small { display: block; font-size: .8rem; color: #8090a3; }
.td-head-price b { display: block; font-size: 1.8rem; font-weight: 800; color: var(--orange-d); line-height: 1.15; }

/* gallery */
.td-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 10px; border-radius: 28px; overflow: hidden; }
.td-gallery button { position: relative; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: #dbeefc; }
.td-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .5s; }
.td-gallery button:hover img { transform: scale(1.07); }
.td-gallery button::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0); transition: background .4s; }
.td-gallery button:hover::after { background: rgba(255, 255, 255, .08); }
.tg-main { grid-row: 1 / 3; }
.tg-1 { grid-column: 2 / 4; }
.tg-count { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-weight: 600; font-size: .88rem; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); }
.tg-count .ic { width: 16px; height: 16px; color: var(--orange); }
.td-gallery button img { opacity: 0; transform: scale(1.1); animation: tg-in 1s var(--ease) forwards; }
.tg-1 img { animation-delay: .12s; } .tg-2 img { animation-delay: .24s; } .tg-3 img { animation-delay: .36s; }
@keyframes tg-in { to { opacity: 1; transform: scale(1); } }

/* lightbox */
.td-lightbox { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(5, 15, 30, .9); backdrop-filter: blur(6px); animation: lb-in .3s ease; }
@keyframes lb-in { from { opacity: 0; } }
.td-lightbox img { max-width: min(1200px, 92vw); max-height: 84vh; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: lb-zoom .45s var(--ease); }
@keyframes lb-zoom { from { transform: scale(.92); opacity: 0; } }
.lb-x, .lb-nav { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background .3s; }
.lb-x:hover, .lb-nav:hover { background: var(--orange); }
.lb-x { top: 20px; right: 20px; }
.lb-nav.prev { left: 20px; } .lb-nav.next { right: 20px; }
.lb-x .ic, .lb-nav .ic { width: 22px; height: 22px; }

/* layout */
.td-body { padding-top: 22px; }
.td-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.td-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.td-card { padding: clamp(20px, 3vw, 30px); border-radius: 24px; background: #fff; box-shadow: 0 8px 24px -16px rgba(16, 40, 80, .3); border: 1px solid #edf1f6; }
.td-lead { font-size: 1.12rem; line-height: 1.75; color: #33465e; margin: 0 0 20px; }
.td-h { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; margin: 0 0 20px; }
.td-h-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #fff1e6; color: var(--orange-d); }
.td-h-ic .ic { width: 21px; height: 21px; }
.td-h-ic.g { background: #e6f9ee; color: #0e9f6e; } .td-h-ic.r { background: #fdecec; color: #dc3545; }

.td-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.td-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: #f6f9fc; transition: transform .35s var(--ease), background .3s; }
.td-facts > div:hover { transform: translateY(-3px); background: #fff4ea; }
.td-facts small { font-size: .78rem; color: #8090a3; }
.td-facts b { font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.tf-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; color: #fff; }
.tf-ic .ic { width: 19px; height: 19px; }
.tf-ic.f1 { background: #ff7a1a; } .tf-ic.f2 { background: #0a84c6; } .tf-ic.f3 { background: #0e9f6e; } .tf-ic.f4 { background: #7c3aed; }

/* route map */
.td-route { position: relative; padding: 10px 0 0; }
.tr-svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.tr-bg { fill: none; stroke: #eef2f7; stroke-width: 6; stroke-linecap: round; }
.tr-line { fill: none; stroke: #ff8a2b; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease) .2s; }
.td-route.in .tr-line, .td-card.in .tr-line { stroke-dashoffset: 0; }
.tr-stops { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; list-style: none; margin: 0; padding: 30px 0 0; }
.tr-stops li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(.4s + var(--i) * .3s); }
.td-card.in .tr-stops li { opacity: 1; transform: none; }
.tr-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 3px solid #ff8a2b; color: var(--orange-d); font-weight: 800; box-shadow: 0 6px 14px -6px rgba(255, 106, 0, .6); animation: tr-ping 3s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes tr-ping { 0%, 70%, 100% { box-shadow: 0 6px 14px -6px rgba(255, 106, 0, .6), 0 0 0 0 rgba(255, 138, 43, .35); } 80% { box-shadow: 0 6px 14px -6px rgba(255, 106, 0, .6), 0 0 0 10px rgba(255, 138, 43, 0); } }
.tr-stops li:first-child .tr-dot { background: #ff6a00; color: #fff; }
.tr-stops li:last-child .tr-dot { background: #0a84c6; border-color: #0a84c6; color: #fff; }
.tr-name { font-size: .86rem; font-weight: 500; color: #33465e; line-height: 1.35; }

/* itinerary days */
.td-days { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 0; }
.td-rail { position: absolute; left: 33px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: #eef2f7; }
.td-rail i { position: absolute; left: 0; top: 0; width: 100%; height: var(--fill, 0%); border-radius: 3px; background: linear-gradient(180deg, #ff6a00, #ffb000, #0a84c6); transition: height .2s linear; }
.td-day { position: relative; display: grid; grid-template-columns: 68px 1fr; gap: 16px; align-items: start; }
.td-day-n { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(140deg, #ff9a2e, #ff6a00); color: #fff; box-shadow: 0 10px 22px -10px rgba(255, 106, 0, .7); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.td-day:hover .td-day-n { transform: rotate(-6deg) scale(1.06); }
.td-day:nth-child(3n+1) .td-day-n { background: linear-gradient(140deg, #5cc8ff, #0284c7); box-shadow: 0 10px 22px -10px rgba(2, 132, 199, .7); }
.td-day:nth-child(3n+2) .td-day-n { background: linear-gradient(140deg, #6ee7b7, #059669); box-shadow: 0 10px 22px -10px rgba(5, 150, 105, .7); }
.td-day-n small { font-size: .68rem; opacity: .9; line-height: 1; }
.td-day-n b { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.td-day-body { padding: 16px 18px; border-radius: 18px; background: #f7f9fc; border: 1px solid #eef2f7; transition: background .3s, border-color .3s, box-shadow .3s; }
.td-day:hover .td-day-body { background: #fff; border-color: #ffd7b3; box-shadow: 0 12px 26px -18px rgba(255, 106, 0, .5); }
.td-day-body h3 { font-size: 1.08rem; font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.td-stops { display: flex; flex-wrap: wrap; gap: 6px; }
.td-stops span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #e6ebf2; font-size: .86rem; color: #33465e; opacity: 0; transform: scale(.8); transition: opacity .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.25s + var(--j) * 90ms); }
.td-day.in .td-stops span { opacity: 1; transform: none; }
.td-stops .ic { width: 14px; height: 14px; color: var(--orange); }
.td-times { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.td-times li { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .5s var(--ease); transition-delay: calc(.2s + var(--j) * 80ms); }
.td-day.in .td-times li { opacity: 1; transform: none; }
.td-times time { flex: none; min-width: 58px; padding: 4px 10px; border-radius: 8px; background: #fff1e6; color: var(--orange-d); font-weight: 700; font-size: .85rem; text-align: center; }
.td-times span { color: #33465e; }

/* includes / excludes */
.td-incl { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.td-incl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.td-incl li { display: flex; align-items: flex-start; gap: 10px; color: #33465e; }
.td-incl li .ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; margin-top: 2px; }
.ti-yes li .ic { background: #e6f9ee; color: #0e9f6e; }
.ti-no li .ic { background: #fdecec; color: #dc3545; }

/* FAQ */
.td-faq { display: grid; gap: 10px; }
.td-faq details { border-radius: 16px; background: #f7f9fc; border: 1px solid #eef2f7; transition: background .3s, border-color .3s; }
.td-faq details[open] { background: #fff; border-color: #ffd7b3; }
.td-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.td-faq summary::-webkit-details-marker { display: none; }
.fq-ic { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff1e6; transition: transform .4s var(--ease), background .3s; }
.fq-ic::before, .fq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--orange-d); transition: transform .4s var(--ease); }
.fq-ic::after { transform: rotate(90deg); }
details[open] .fq-ic { transform: rotate(180deg); background: var(--orange); }
details[open] .fq-ic::before { background: #fff; }
details[open] .fq-ic::after { transform: rotate(0); background: #fff; }
.td-faq p { margin: 0; padding: 0 18px 16px; color: #4a5d75; line-height: 1.7; animation: fq-in .4s var(--ease); }
@keyframes fq-in { from { opacity: 0; transform: translateY(-6px); } }

/* booking side card */
.td-side { position: sticky; top: 96px; }
.td-book { padding: 26px; border-radius: 26px; background: #fff; border: 1px solid #edf1f6; box-shadow: 0 20px 44px -26px rgba(16, 40, 80, .4); overflow: hidden; position: relative; isolation: isolate; }
.td-book::before { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 176, 0, .22), transparent 70%); z-index: -1; animation: sunpulse 6s ease-in-out infinite alternate; }
.tb-top small { display: block; font-size: .82rem; color: #8090a3; }
.tb-top b { display: block; font-size: 2.1rem; font-weight: 800; color: var(--orange-d); line-height: 1.15; margin: 2px 0; }
.tb-list { list-style: none; margin: 18px 0; padding: 16px 0; border-block: 1px dashed #e6ebf2; display: grid; gap: 10px; }
.tb-list li { display: flex; align-items: center; gap: 10px; font-size: .93rem; color: #33465e; }
.tb-list .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #e6f9ee; color: #0e9f6e; flex: none; }
.tb-cta { animation: st-nudge 4.5s ease-in-out infinite 2s; }
.tb-cta:hover { animation: none; }
.tb-alt { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 10px; }
.tb-alt a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border-radius: 14px; font-weight: 600; font-size: .9rem; transition: background .3s, color .3s; }
.tb-alt .ic { width: 18px; height: 18px; }
.tb-line { background: #e6f9ee; color: #04a346; }
.tb-line:hover { background: #06c755; color: #fff; }
.tb-tel { background: #f2f5f9; color: var(--ink); }
.tb-tel:hover { background: var(--ink); color: #fff; }
.tb-note { display: flex; gap: 6px; align-items: flex-start; margin: 14px 0 0; font-size: .82rem; color: #8090a3; }
.tb-note .ic { width: 15px; height: 15px; color: var(--green); flex: none; margin-top: 3px; }

/* mobile sticky booking bar */
.td-sticky { display: none; }
@media (max-width: 980px) {
  .td-grid { grid-template-columns: 1fr; }
  .td-side { position: static; }
  .td-sticky { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 160; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 20px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); box-shadow: 0 14px 34px -12px rgba(16, 40, 80, .45); transform: translateY(140%); transition: transform .5s var(--ease); }
  .td-sticky.show { transform: none; }
  .td-sticky small { display: block; font-size: .75rem; color: #8090a3; }
  .td-sticky b { font-size: 1.2rem; font-weight: 800; color: var(--orange-d); }
  .td-page .float-contact { bottom: 90px; }
  .td-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .td-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 120px; }
  .tg-main { grid-row: auto; grid-column: 1 / 3; }
  .tg-1 { grid-column: auto; }
  .tg-3 { display: none; }
  .td-head-price { text-align: left; width: 100%; }
  .td-incl { grid-template-columns: 1fr; }
  .tr-stops { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .tr-svg { display: none; }
  .tr-stops { padding-top: 0; }
  .td-day { grid-template-columns: 56px 1fr; gap: 12px; }
  .td-day-n { width: 56px; height: 56px; border-radius: 16px; }
  .td-rail { left: 27px; }
}

/* ==========================================================================
   v23 — Reviews page
   ========================================================================== */
.rv-hero { padding: 26px 0 0; }
.rv-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: stretch; }
.rv-intro { padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: linear-gradient(130deg, #fff4e8 0%, #fff9ef 55%, #eaf7ff 100%); position: relative; overflow: hidden; isolation: isolate; }
.rv-intro::after { content: "\201C"; position: absolute; right: 20px; top: -40px; font-size: 16rem; font-weight: 800; line-height: 1; color: rgba(255, 122, 26, .1); z-index: -1; }
.rv-intro .pp-tag { display: inline-block; --ac: #ff6a00; }
.rv-intro h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin: 14px 0 10px; }
.rv-intro p { color: #4a5d75; max-width: 520px; margin-bottom: 22px; }
.rv-score { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: #fff; box-shadow: 0 10px 28px -18px rgba(16, 40, 80, .35); }
.rs-big { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-right: 26px; border-right: 1px dashed #e6ebf2; }
.rs-big > b { font-size: 4rem; font-weight: 800; line-height: 1; background: var(--sun2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rs-big small { color: #8090a3; font-size: .88rem; }
.rs-stars { position: relative; display: inline-flex; gap: 2px; color: #e5e9ef; }
.rs-stars .ic { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.rs-stars i { position: absolute; left: 0; top: 0; display: inline-flex; gap: 2px; color: #ffb000; overflow: hidden; width: 0; white-space: nowrap; transition: width 1.4s var(--ease) .3s; }
.go .rs-stars i { width: var(--pct); }
.rs-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rs-bars li { display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 10px; font-size: .88rem; color: #4a5d75; }
.rs-bars li > span { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.rs-bars li > span .ic { width: 14px; height: 14px; fill: #ffb000; stroke: none; }
.rs-bars i { height: 10px; border-radius: 10px; background: #eef2f7; overflow: hidden; }
.rs-bars em { display: block; height: 100%; width: 0; border-radius: 10px; background: linear-gradient(90deg, #ff8a2b, #ffc300); transition: width 1.2s var(--ease); }
.go .rs-bars em { width: var(--w); }
.rs-bars li:nth-child(2) em { transition-delay: .1s; } .rs-bars li:nth-child(3) em { transition-delay: .2s; } .rs-bars li:nth-child(4) em { transition-delay: .3s; } .rs-bars li:nth-child(5) em { transition-delay: .4s; }
.rs-bars b { text-align: right; font-weight: 600; color: var(--ink); }

.rv-filter { justify-content: flex-start; }
.rv-grid { columns: 3 300px; column-gap: 18px; }
.rv-card { position: relative; break-inside: avoid; margin: 0 0 18px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid #edf1f6; box-shadow: 0 8px 24px -16px rgba(16, 40, 80, .3); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s; }
.rv-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 22px 40px -22px rgba(255, 106, 0, .4); }
.rv-card::before { content: "\201C"; position: absolute; right: 16px; top: -18px; font-size: 6.5rem; font-weight: 800; line-height: 1; color: #fff1e3; transition: transform .6s var(--ease), color .4s; }
.rv-card:hover::before { transform: rotate(-10deg) scale(1.1); color: #ffe0c2; }
.rvc-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rvc-top small { color: #8090a3; font-size: .8rem; }
.rv-card .stars span.on { color: #ffb000; }
.rv-card .stars .ic { width: 18px; height: 18px; }
.rv-card.in .stars span { animation: star-in .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.rv-card.in .stars span:nth-child(2) { animation-delay: .08s; } .rv-card.in .stars span:nth-child(3) { animation-delay: .16s; } .rv-card.in .stars span:nth-child(4) { animation-delay: .24s; } .rv-card.in .stars span:nth-child(5) { animation-delay: .32s; }
@keyframes star-in { from { transform: scale(0) rotate(-60deg); opacity: 0; } }
.rv-card blockquote { position: relative; margin: 14px 0 18px; font-size: 1rem; line-height: 1.7; color: #33465e; }
.rv-card figcaption { display: flex; align-items: center; gap: 12px; }
.rvc-av { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--c); color: #fff; font-weight: 700; font-size: 1.1rem; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.rvc-who b { display: block; font-weight: 700; color: var(--ink); line-height: 1.3; }
.rvc-ver { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: #0e9f6e; font-weight: 500; }
.rvc-ver .ic { width: 13px; height: 13px; }
.rvc-trip { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: #f2f7fd; color: #0a6fa8; font-size: .82rem; font-weight: 500; }
.rvc-trip .ic { width: 14px; height: 14px; }

.rv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(34px, 5vw, 60px) 20px; border-radius: 28px; background: #fff; box-shadow: 0 10px 28px -18px rgba(16, 40, 80, .3); }
.rv-empty h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 18px 0 8px; }
.rv-empty p { color: #5b6b80; max-width: 520px; margin: 0 0 22px; }
.rv-empty-art { position: relative; width: 240px; height: 150px; }
.rv-ghost { position: absolute; left: 30px; right: 30px; top: 30px; bottom: 10px; padding: 18px; border-radius: 20px; background: #f6f9fc; border: 1px dashed #d9e2ec; display: grid; gap: 10px; align-content: center; }
.rv-ghost i { display: block; height: 10px; border-radius: 10px; background: linear-gradient(90deg, #eef2f7, #e2e8f0, #eef2f7); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.rv-ghost i:nth-child(2) { width: 80%; } .rv-ghost i:nth-child(3) { width: 55%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.rv-empty-art > span { position: absolute; z-index: 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--sun2); color: #fff; box-shadow: 0 12px 22px -10px rgba(255, 106, 0, .7); animation: star-bob 2.6s ease-in-out infinite; }
.rv-empty-art > span .ic { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.rv-empty-art .b1 { left: 0; top: 4px; }
.rv-empty-art .b2 { left: 50%; top: -14px; margin-left: -25px; animation-delay: .3s; }
.rv-empty-art .b3 { right: 0; top: 10px; animation-delay: .6s; }

.rv-write { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: stretch; }
.rv-write-side { position: relative; min-height: 420px; border-radius: 28px; overflow: hidden; isolation: isolate; }
.rv-write-side > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rv-write-side::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 22, 40, .85) 0%, rgba(8, 22, 40, .2) 60%); }
.rws-txt { position: absolute; left: 22px; right: 22px; bottom: 22px; color: #fff; }
.rws-txt h3 { color: #fff; font-size: 1.35rem; margin-bottom: 14px; }
.rws-txt ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rws-txt li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); font-size: .93rem; }
.rws-txt li span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #ffb000; color: var(--ink); font-weight: 800; font-size: .85rem; }
.rv-form { position: static; }
.rv-rate { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.rv-rate .star-input label .ic { width: 38px; height: 38px; }
.rv-rate-label { padding: 6px 14px; border-radius: 999px; background: #fff4ea; color: var(--orange-d); font-weight: 700; font-size: .92rem; }
.rv-rate-label.pop { animation: bump .5s var(--ease); }
.cx-area { position: relative; }
.rv-counter { position: absolute; right: 14px; bottom: 10px; font-size: .75rem; color: #9aa7b8; }

@media (max-width: 980px) { .rv-top, .rv-write { grid-template-columns: 1fr; } .rv-write-side { min-height: 320px; } }
@media (max-width: 560px) { .rv-score { grid-template-columns: 1fr; } .rs-big { border-right: 0; padding-right: 0; border-bottom: 1px dashed #e6ebf2; padding-bottom: 16px; } }
.rcs { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 26px 30px; border-radius: 26px; background: linear-gradient(120deg, #fff 0%, #fff8ee 60%, #eaf7ff 100%); box-shadow: 0 10px 28px -18px rgba(16, 40, 80, .35); }
.rcs-score { display: flex; align-items: center; gap: 14px; padding-right: 28px; border-right: 1px dashed #e6ebf2; }
.rcs-score > b { font-size: 3.2rem; font-weight: 800; line-height: 1; background: var(--sun2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rcs-score > span { display: flex; flex-direction: column; gap: 2px; }
.rcs-score .stars span.on { color: #ffb000; }
.rcs-score small { color: #8090a3; font-size: .85rem; }
.rcs-txt h2 { font-size: 1.5rem; margin: 0 0 4px; }
.rcs-txt p { margin: 0; color: #5b6b80; }
.rcs-btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) { .rcs { grid-template-columns: 1fr; } .rcs-score { border-right: 0; padding-right: 0; } }

/* ==========================================================================
   v24 — Policy pages
   ========================================================================== */
.pol-progress { position: fixed; top: 72px; left: 0; right: 0; height: 3px; z-index: 199; pointer-events: none; }
.pol-progress i { display: block; height: 100%; background: var(--sun2); transform-origin: left; transform: scaleX(0); }
.pol-hero { padding: 26px 0 10px; }
.pol-head { display: flex; align-items: center; gap: 20px; padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: linear-gradient(120deg, #fff4e8 0%, #fff9ef 55%, #eaf7ff 100%); position: relative; overflow: hidden; isolation: isolate; }
.pol-head::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .6); z-index: -1; }
.pol-ic { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 22px; background: var(--sun2); color: #fff; box-shadow: 0 16px 30px -14px rgba(255, 106, 0, .7); animation: vs-bob 4s ease-in-out infinite; }
.pol-ic .ic { width: 34px; height: 34px; }
.pol-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; margin: 0 0 6px; }
.pol-head p { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #5b6b80; font-size: .92rem; }
.pol-head p .ic { width: 16px; height: 16px; color: var(--orange); }
.pol-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pol-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: #fff; border: 1px solid #e6ebf2; font-weight: 500; font-size: .92rem; color: #4a5d75; transition: all .3s; }
.pol-tabs a .ic { width: 17px; height: 17px; color: #9aa7b8; transition: color .3s; }
.pol-tabs a:hover { border-color: #ffc89a; color: var(--orange-d); }
.pol-tabs a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pol-tabs a.on .ic { color: #ffc300; }

.pol-grid { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.pol-toc { position: sticky; top: 96px; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px -16px rgba(16, 40, 80, .3); }
.pol-toc > b { display: block; font-size: .85rem; color: #8090a3; font-weight: 600; margin-bottom: 10px; }
.pol-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.pol-toc li { counter-increment: toc; }
.pol-toc ol a { position: relative; display: flex; gap: 10px; padding: 9px 10px; border-radius: 12px; font-size: .9rem; color: #4a5d75; line-height: 1.4; transition: background .3s, color .3s, padding .3s; }
.pol-toc ol a::before { content: counter(toc); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f2f5f9; font-size: .75rem; font-weight: 700; color: #8090a3; transition: background .3s, color .3s; }
.pol-toc ol a:hover { background: #f7f9fc; }
.pol-toc ol a.on { background: #fff4ea; color: var(--orange-d); font-weight: 600; padding-left: 14px; }
.pol-toc ol a.on::before { background: var(--orange); color: #fff; }
.pol-help { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed #e6ebf2; }
.pol-help small { color: #8090a3; }
.pol-help a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 12px; font-weight: 600; font-size: .9rem; transition: background .3s, color .3s; }
.pol-help .ic { width: 18px; height: 18px; }

.pol-body { display: grid; gap: 14px; min-width: 0; }
.pol-sec { padding: clamp(20px, 3vw, 30px); border-radius: 22px; background: #fff; border: 1px solid #edf1f6; box-shadow: 0 8px 22px -18px rgba(16, 40, 80, .3); scroll-margin-top: 100px; transition: border-color .4s, box-shadow .4s; }
.pol-sec:target { border-color: #ffc89a; box-shadow: 0 0 0 4px rgba(255, 138, 43, .12); }
.pol-sec h2 { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; margin: 0 0 14px; }
.pol-sec h2 span { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: #fff1e6; color: var(--orange-d); font-size: .95rem; font-weight: 800; }
.pol-sec p { color: #33465e; line-height: 1.85; margin: 0 0 10px; }
.pol-sec p:last-child { margin-bottom: 0; }
.pol-sec ul { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 8px; }
.pol-sec li { position: relative; padding: 10px 14px 10px 40px; border-radius: 12px; background: #f7f9fc; color: #33465e; line-height: 1.7; }
.pol-sec li::before { content: ""; position: absolute; left: 15px; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 122, 26, .15); }
.pol-sec b { color: var(--ink); }
.pol-sec a { color: var(--sky-d); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.pol-sec:first-child p:first-child { font-size: 1.05rem; }

/* refund summary */
.rf { padding: clamp(22px, 3vw, 32px); border-radius: 26px; background: #fff; box-shadow: 0 10px 28px -18px rgba(16, 40, 80, .35); }
.rf h2 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; margin: 0 0 18px; }
.rf h2 .ic { color: var(--orange); }
.rf-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.rf-step { --c: #0e9f6e; --bg: #e9faf1; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px; background: var(--bg); opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * .15s); }
.rf.go .rf-step { opacity: 1; transform: none; }
.rf-y { --c: #e09a00; --bg: #fff8e1; }
.rf-r { --c: #dc3545; --bg: #fdeeee; }
.rf-pct { font-size: 1.4rem; font-weight: 800; color: var(--c); line-height: 1; }
.rf-pct b { font-size: 2.6rem; }
.rf-bar { height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .8); overflow: hidden; }
.rf-bar i { display: block; height: 100%; width: 0; border-radius: 10px; background: var(--c); transition: width 1.2s var(--ease); transition-delay: calc(.2s + var(--i) * .15s); }
.rf.go .rf-bar i { width: var(--w); }
.rf-lbl { font-weight: 700; color: var(--ink); }
.rf-step small { color: #5b6b80; }
.rf-note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: #eaf7ff; color: #075985; font-weight: 500; }
.rf-note .ic { width: 18px; height: 18px; flex: none; }

@media (max-width: 980px) { .pol-grid { grid-template-columns: 1fr; } .pol-toc { position: static; } }
@media (max-width: 560px) { .pol-head { flex-direction: column; align-items: flex-start; } .pol-ic { width: 58px; height: 58px; } .pol-progress { top: 70px; } }
.f-legal { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; }
.f-legal a { color: rgba(255, 255, 255, .78); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.f-legal a:hover { color: #ffd34d; }
.check a, .auth-consent a { color: var(--orange-d); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin: 0 2px; }
.auth-consent { font-size: .85rem; color: #6b7a8d; margin: 4px 0 14px; line-height: 1.6; }

/* ---------- v25: connected data bits ---------- */
.tcard-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rate-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: #fff6dd; color: #a86c00; font-size: .78rem; font-weight: 700; }
.rate-pill .ic { width: 13px; height: 13px; fill: #ffb000; stroke: none; }
.rate-pill small { font-weight: 400; color: #8090a3; }
.td-rating { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #ffe0b8; }
.td-rating .stars span.on { color: #ffb000; }
.td-rating b { color: var(--ink); }
.td-rating small { color: #8090a3; }
.td-rv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.td-rv-grid { columns: 2 260px; }
.td-rv-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 18px; border-radius: 16px; background: #fffaf2; color: #6b5a3a; }
.td-rv-empty .ic { width: 20px; height: 20px; color: #ffb000; fill: #ffb000; stroke: none; flex: none; }
.rvc-ver.mem { color: #0a6fa8; }
a.rvc-trip:hover { background: #e3f1fc; }
.rvc-reply { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #f7f9fc; border-left: 3px solid var(--orange); }
.rvc-reply b { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--orange-d); margin-bottom: 4px; }
.rvc-reply img { width: 20px; height: 20px; object-fit: contain; }
.rvc-reply p { margin: 0; font-size: .9rem; color: #4a5d75; line-height: 1.6; }
.rv-select select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 14px 0; font-size: 1rem; color: var(--ink); cursor: pointer; }
.rv-booked { grid-column: 1 / -1; align-items: center; padding: 10px 14px; background: #f0fbf5; border-color: #b7ebcd; }
.rv-booked > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rv-booked small { font-size: .78rem; color: #6b7a8d; }
.rv-booked b { color: var(--ink); }
.rv-booked em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: .8rem; font-weight: 600; color: #0e9f6e; }
.rv-booked em .ic { width: 14px; height: 14px; }
.my-rv .stars span.on { color: #ffb000; }
.bk-review .ic { color: #ffb000; }

/* ==========================================================================
   v26 — Bank & payment logos
   ========================================================================== */
.bank-logo { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 15px; background: var(--bc, #64748b); box-shadow: 0 8px 16px -10px var(--bc, #000); }
.bank-logo img { width: 66%; height: 66%; object-fit: contain; }
.bank-logo .ic { width: 26px; height: 26px; color: #fff; }
.bank-logo.sm { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; }
.pay-logos { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl { display: inline-grid; place-items: center; height: 30px; min-width: 46px; padding: 0 8px; border-radius: 8px; background: #fff; border: 1px solid #e6ebf2; }
.pl img { height: 18px; width: auto; }
.pl-pp { padding: 0; border: 0; background: transparent; }
.pl-pp svg { height: 30px; width: auto; display: block; }
.pay-accept { margin: 4px 0 12px; }
.pay-secure { display: flex; align-items: center; gap: 6px; color: #6b7a8d; font-size: .88rem; margin: 0 0 16px; }
.pay-secure .ic { width: 16px; height: 16px; color: var(--green); }

/* Thai QR card */
.tqr { max-width: 340px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 20px 44px -22px rgba(0, 40, 80, .45); border: 1px solid #e6ebf2; }
.tqr-head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: #0e3d6b; color: #fff; letter-spacing: .06em !important; }
.tqr-head span { font-weight: 800; }
.tqr-head b { font-weight: 400; opacity: .9; }
.tqr-body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 20px 20px; }
.tqr-body .qr { padding: 10px; border-radius: 14px; border: 1px solid #eef2f7; }
.tqr-body .qr img, .tqr-body .qr canvas { width: 220px !important; height: 220px !important; }
.tqr-name, .tqr-amt { display: flex; justify-content: space-between; align-items: baseline; width: 100%; gap: 10px; }
.tqr-name { padding-top: 12px; border-top: 1px dashed #e6ebf2; }
.tqr-name small, .tqr-amt small { color: #8090a3; font-size: .82rem; }
.tqr-name b { color: var(--ink); text-align: right; }
.tqr-amt b { font-size: 1.5rem; font-weight: 800; color: #0e3d6b; }
.pay-amt-line { margin-top: 12px; padding: 14px 18px; border-radius: 16px; background: #f4f8fc; }
.pay-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.pay-steps li { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: #33465e; }
.pay-steps li span { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #fff1e6; color: var(--orange-d); font-weight: 700; font-size: .8rem; }
.pay-banks { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #f7f9fc; }
.pay-banks small { color: #6b7a8d; }
.pay-banks > span { display: flex; gap: 6px; flex-wrap: wrap; }

/* bank transfer accounts */
.bank-list { display: grid; gap: 10px; }
.bank-acc { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #e6ebf2; border-left: 5px solid var(--bc); box-shadow: 0 10px 24px -18px rgba(16, 40, 80, .4); }
.ba-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ba-info small { color: #6b7a8d; font-size: .82rem; }
.ba-no { font-size: 1.35rem; font-weight: 800; color: var(--ink); letter-spacing: .04em !important; }
.ba-info span { font-size: .9rem; color: #33465e; }
.ba-copy { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px; border: 1px solid #e6ebf2; background: #f7f9fc; color: var(--ink); font-weight: 600; font-size: .86rem; cursor: pointer; transition: all .3s; }
.ba-copy .ic { width: 16px; height: 16px; display: none; }
.ba-copy:hover { border-color: var(--bc); color: var(--bc); }
.ba-copy.done { background: #e6f9ee; border-color: #0e9f6e; color: #0e9f6e; }
.ba-copy.done .ic { display: block; }

/* footer */
.f-pay { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.f-pay .pl { height: 28px; }
.f-pay .bank-logo.sm { width: 28px; height: 28px; border-radius: 8px; }
@media (max-width: 560px) { .bank-acc { flex-wrap: wrap; } .ba-copy { width: 100%; justify-content: center; } }
/* slip upload input */
.pay-panel input[type=file] { width: 100%; padding: 14px; border-radius: 16px; border: 2px dashed #c9d6e4; background: #f7fbff; cursor: pointer; transition: border-color .3s, background .3s; }
.pay-panel input[type=file]:hover { border-color: var(--orange); background: #fff8f1; }
.pay-panel input[type=file]::file-selector-button { margin-right: 12px; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font-family: inherit; font-weight: 600; cursor: pointer; }
.pay-panel .field label .ic { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; color: var(--orange); }

/* ---------- login gate ---------- */
.login-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: clamp(28px, 4vw, 48px); border-radius: 26px; background: linear-gradient(140deg, #fff 0%, #fff6ec 60%, #eef8ff 100%); border: 1px solid #fff; box-shadow: 0 10px 28px -18px rgba(16, 40, 80, .35); }
.lg-ic { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; background: var(--sun2); color: #fff; box-shadow: 0 14px 26px -12px rgba(255, 106, 0, .7); animation: vs-bob 3.5s ease-in-out infinite; }
.lg-ic .ic { width: 32px; height: 32px; }
.login-gate h3 { font-size: 1.45rem; margin: 8px 0 0; }
.login-gate p { margin: 0 0 8px; color: #5b6b80; max-width: 380px; }
.lg-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cx-gate { min-height: 100%; }

/* ==========================================================================
   v27 — Custom select (cselect.js)
   ========================================================================== */
.cs-host { position: relative; }
.cs-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.cs-trigger { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.cs-t-label { flex: 1; min-width: 0; font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-trigger.is-placeholder .cs-t-label { color: #8090a3; font-weight: 500; }
.cs-t-meta { flex: none; padding: 2px 9px; border-radius: 999px; background: #fff1e6; color: var(--orange-d); font-size: .8rem; font-weight: 700; }
.cs-caret { flex: none; width: 11px; height: 7px; color: #6b7a8d; transition: transform .35s var(--ease); }
.cs-open .cs-caret { transform: rotate(180deg); color: var(--orange); }
.cs-trigger.pop .cs-t-label { animation: cs-pop .45s var(--ease); }
@keyframes cs-pop { 40% { transform: translateY(-3px); color: var(--orange-d); } }
.cs-host.cs-open { border-color: var(--orange) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(255, 122, 26, .12); }
.cs-host.cs-invalid { animation: cs-shake .45s; border-color: #e5383b !important; }
@keyframes cs-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
/* booking-page field: make the trigger look like the other inputs */
.field.cs-host .cs-trigger, .cx-input.cs-host .cs-trigger { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(3, 105, 161, .14); background: #f7fbff; }
.cx-input.cs-host .cs-trigger { border: 0; background: none; padding: 14px 0; }
.field.cs-host.cs-open .cs-trigger { border-color: var(--orange); background: #fff; }
.field.cs-host.cs-open { box-shadow: none; }

.cs-panel { position: fixed; z-index: 600; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid #edf1f6; box-shadow: 0 30px 70px -20px rgba(11, 37, 69, .35), 0 6px 18px -8px rgba(11, 37, 69, .18); opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top center; transition: opacity .22s ease, transform .3s var(--ease); }
.cs-panel.is-up { transform-origin: bottom center; transform: translateY(8px) scale(.97); }
.cs-panel.is-open { opacity: 1; transform: none; }
.cs-head { padding: 10px 10px 4px; }
.cs-head:empty { display: none; }
.cs-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #f4f7fb; border: 1px solid transparent; transition: border-color .25s, background .25s; }
.cs-search:focus-within { border-color: var(--orange); background: #fff; }
.cs-search svg { width: 18px; height: 18px; color: #8090a3; flex: none; }
.cs-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .95rem; color: var(--ink); }
.cs-list { overflow-y: auto; padding: 4px 8px 10px; overscroll-behavior: contain; scrollbar-width: thin; }
.cs-group { position: sticky; top: 0; z-index: 1; padding: 10px 10px 6px; background: linear-gradient(#fff 80%, rgba(255, 255, 255, 0)); font-size: .74rem; font-weight: 700; letter-spacing: .04em !important; color: var(--orange-d); }
.cs-opt { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 14px; cursor: pointer; transition: background .2s, transform .25s var(--ease); opacity: 0; transform: translateX(-6px); animation: cs-in .32s var(--ease) forwards; animation-delay: calc(var(--i) * 18ms); }
.no-anim .cs-opt { animation: none; opacity: 1; transform: none; }
@keyframes cs-in { to { opacity: 1; transform: none; } }
.cs-opt:hover, .cs-opt.is-active { background: #fff5ec; }
.cs-opt:hover { transform: translateX(3px); }
.cs-code { flex: none; min-width: 46px; padding: 4px 6px; border-radius: 9px; background: #f2f5f9; color: #5b6b80; font-size: .72rem; font-weight: 700; text-align: center; letter-spacing: .04em !important; transition: background .2s, color .2s; }
.cs-dot { flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: #d4dce6; }
.cs-opt:hover .cs-code, .cs-opt.is-active .cs-code { background: #ffe3cc; color: var(--orange-d); }
.cs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cs-txt b { font-weight: 600; color: var(--ink); font-size: .95rem; }
.cs-txt small { font-size: .78rem; color: #8090a3; }
.cs-meta { flex: none; font-weight: 700; font-size: .92rem; color: var(--orange-d); white-space: nowrap; }
.cs-check { flex: none; width: 18px; height: 18px; color: #fff; padding: 3px; border-radius: 50%; background: var(--orange); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.cs-opt.is-selected { background: #fff1e6; }
.cs-opt.is-selected .cs-check { opacity: 1; transform: none; }
.cs-opt.is-selected .cs-code { background: var(--orange); color: #fff; }
.cs-opt.is-disabled { opacity: .4; cursor: not-allowed; }
.cs-empty { padding: 26px 10px; text-align: center; color: #8090a3; }

/* mobile: bottom sheet */
.cs-panel.is-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 78vh; border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform .4s var(--ease), opacity .2s; }
.cs-panel.is-sheet.is-open { transform: none; }
.cs-grab { display: block; width: 44px; height: 5px; margin: 2px auto 10px; border-radius: 5px; background: #dbe2ea; }
.cs-panel.is-sheet .cs-list { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.cs-panel.is-sheet .cs-opt { padding: 13px 10px; }
body.cs-lock { overflow: hidden; }
body.cs-lock::after { content: ""; position: fixed; inset: 0; z-index: 590; background: rgba(11, 37, 69, .4); animation: lb-in .25s ease; }

/* ==========================================================================
   v28 — Floating contact dock (white capsule, no phantom gap)
   ========================================================================== */
.float-contact { right: 20px; bottom: 22px; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid #edf1f6; box-shadow: 0 18px 40px -16px rgba(11, 37, 69, .35); }
.float-contact .fc { width: 46px; height: 46px; box-shadow: none; transition: transform .35s var(--ease), max-height .4s var(--ease), opacity .3s, margin .4s var(--ease); }
.float-contact .fc .ic { width: 22px; height: 22px; }
.float-contact .fc:hover { transform: scale(1.08); }
.fc-tel { background: linear-gradient(135deg, #ff7a1a, #ffb020); }
.float-contact .fc-top { max-height: 0; margin-top: -6px; overflow: hidden; background: #eef3f8; color: var(--ink); border: 0; transform: none; }
.float-contact .fc-top.show { max-height: 46px; margin-top: 0; }
.float-contact .fc[aria-label]::after { content: attr(aria-label); position: absolute; right: calc(100% + 14px); padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
.float-contact .fc { position: relative; }
.float-contact .fc:hover::after { opacity: 1; transform: none; }
.float-contact .fc-top::after { display: none; }
@media (max-width: 980px) {
  .float-contact { right: 12px; bottom: 14px; padding: 5px; gap: 5px; }
  .float-contact .fc { width: 42px; height: 42px; }
  .float-contact .fc .ic { width: 20px; height: 20px; }
  .float-contact .fc-top.show { max-height: 42px; }
  .float-contact .fc::after { display: none; }
}
/* v28b — no capsule background, buttons float on their own */
.float-contact { padding: 0; gap: 10px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; }
.float-contact .fc { box-shadow: 0 10px 22px -8px rgba(11, 37, 69, .35); }
.float-contact .fc-line { box-shadow: 0 10px 22px -8px rgba(6, 199, 85, .55); }
.float-contact .fc-wa { box-shadow: 0 10px 22px -8px rgba(37, 211, 102, .55); }
.float-contact .fc-tel { box-shadow: 0 10px 22px -8px rgba(255, 122, 26, .6); }
.float-contact .fc-top { margin-top: -10px; background: #fff; color: var(--ink); border: 1px solid #e3e9f0; }
.float-contact .fc-top.show { margin-top: 0; }
@media (max-width: 980px) { .float-contact { padding: 0; gap: 8px; } .float-contact .fc-top { margin-top: -8px; } }
/* v28c — button hover layer: fully hidden at rest (no blue sliver at the bottom edge) */
.btn::after { transform: translateY(110%); opacity: 0; transition: transform .55s var(--ease), opacity .3s; }
.btn:hover::after { transform: translateY(0); opacity: 1; }
.btn-primary::after { background: linear-gradient(100deg, #e85d00, #ff8a00 55%, #ffad00); }

/* ==========================================================================
   v29 — Standalone login / register (one screen, no scrolling)
   ========================================================================== */
html:has(body.auth-page), body.auth-page { height: 100%; overflow: hidden; }
body.auth-page { background: #f4f7fb; }
.ap { display: grid; grid-template-columns: 1.05fr 1fr; height: 100vh; height: 100dvh; padding: 14px; gap: 14px; }
.ap-photo { position: relative; overflow: hidden; border-radius: 28px; display: flex; align-items: flex-end; padding: clamp(28px, 4vw, 56px); color: #fff; isolation: isolate; }
.ap-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: ap-zoom 14s ease-out both; }
@keyframes ap-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.ap-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 18, 34, .85), rgba(5, 18, 34, .1) 55%); }
.ap-chip { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .25); font-size: .82rem; font-weight: 600; }
.ap-photo-txt b { display: block; margin: 14px 0 8px; font-size: clamp(2rem, 3.4vw, 3.3rem); font-weight: 700; line-height: 1.15; max-width: 13ch; }
.ap-photo-txt b em { font-style: normal; color: #ffb020; }
.ap-photo-txt p { margin: 0; opacity: .85; font-size: .95rem; }
.ap-photo-txt { animation: ap-up .9s var(--ease) .2s both; }
@keyframes ap-up { from { opacity: 0; transform: translateY(24px); } }

.ap-side { display: flex; flex-direction: column; min-height: 0; padding: 6px clamp(16px, 4vw, 56px); }
.ap-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.ap-logo img { height: 46px; width: auto; }
.ap-lang { display: flex; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid #e3e9f0; }
.ap-lang a { padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #6b7a8d; }
.ap-lang a.on { background: linear-gradient(135deg, #ff9f1a, #ffc21a); color: #10233d; }
.ap-card { width: min(460px, 100%); margin: auto; animation: ap-up .7s var(--ease) both; }
.ap-card h1 { margin: 0 0 4px; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; color: var(--ink); }
.ap-card > p { margin: 0 0 18px; color: #6b7a8d; }
.ap-card .field { margin-bottom: 12px; }
.ap-card .field label { margin-bottom: 5px; }
.ap-card .btn-block { margin-top: 6px; }
.ap-card .auth-alt { margin-top: 14px; text-align: center; }
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.ap-grid .full { grid-column: 1 / -1; }
.ap-grid .auth-consent { margin: 2px 0 8px; }
.ap-back { align-self: center; padding: 8px 0 4px; font-size: .88rem; color: #6b7a8d; }
.ap-back:hover { color: var(--orange-d); }
.ap .alert { margin-bottom: 12px; }

/* short screens: compact spacing so everything still fits */
@media (max-height: 820px) {
  .ap-card h1 { font-size: 1.8rem; }
  .ap-card > p { margin-bottom: 12px; font-size: .9rem; }
  .ap-card .field { margin-bottom: 8px; }
  .ap-card .field input { padding-top: 11px; padding-bottom: 11px; }
  .ap-logo img { height: 38px; }
}
/* phones / narrow: photo hidden; if the screen is really tiny the form area scrolls by itself */
@media (max-width: 900px) {
  .ap { grid-template-columns: 1fr; padding: 0; }
  .ap-photo { display: none; }
  .ap-side { overflow-y: auto; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) { .ap-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   v30 — Login / register: slideshow, flying route, glass chips, blobs, glass card
   ========================================================================== */
.ap-photo { background: #0b1524; }
.ap-slides, .ap-slides figure { position: absolute; inset: 0; margin: 0; z-index: -2; }
.ap-slides figure { opacity: 0; animation: ap-fade 24s linear infinite; animation-delay: var(--d); }
.ap-slides img { width: 100%; height: 100%; object-fit: cover; animation: ap-kb 24s linear infinite; animation-delay: var(--d); }
@keyframes ap-fade { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ap-kb { 0% { transform: scale(1.16) translateX(1.5%); } 30% { transform: scale(1.02) translateX(-1%); } 100% { transform: scale(1.02); } }
.ap-slides figcaption { position: absolute; top: 26px; left: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(8, 20, 36, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: .85rem; font-weight: 600; }
.ap-slides figcaption .ic { width: 16px; height: 16px; color: #ffb020; }
.ap-photo::before { background: linear-gradient(0deg, rgba(5, 18, 34, .9) 0%, rgba(5, 18, 34, .25) 45%, rgba(5, 18, 34, 0) 70%); }

.ap-route { position: absolute; left: 0; top: 9%; width: 100%; height: 34%; z-index: -1; overflow: visible; }
.ap-route path { animation: ap-dash 2.4s linear infinite; }
@keyframes ap-dash { to { stroke-dashoffset: -48; } }
.ap-plane { position: absolute; left: 0; top: 0; z-index: -1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #ff7a1a; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); animation: ap-fly 16s ease-in-out infinite; }
.ap-plane .ic { width: 20px; height: 20px; }
@keyframes ap-fly {
  0% { left: -6%; top: 36%; transform: rotate(-30deg) scale(.8); opacity: 0; }
  6% { opacity: 1; }
  30% { left: 28%; top: 16%; transform: rotate(10deg) scale(1); }
  55% { left: 55%; top: 30%; transform: rotate(-25deg); }
  80% { left: 82%; top: 12%; transform: rotate(-5deg) scale(.95); opacity: 1; }
  92%, 100% { left: 104%; top: 9%; transform: rotate(0) scale(.8); opacity: 0; }
}

.ap-chips { position: absolute; right: clamp(18px, 3vw, 40px); top: 50%; display: grid; gap: 12px; justify-items: end; transform: translateY(-50%); }
.ap-glass { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 16px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); color: #fff; font-size: .88rem; font-weight: 600; animation: ap-chip-in .8s var(--ease) both, ap-bob 5s ease-in-out infinite; animation-delay: calc(.5s + var(--i) * .18s), calc(var(--i) * -1.4s); }
.ap-glass i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: linear-gradient(135deg, #ff7a1a, #ffb020); }
.ap-glass i .ic { width: 17px; height: 17px; }
.ap-glass:nth-child(2) { margin-right: 26px; }
@keyframes ap-chip-in { from { opacity: 0; translate: 40px 0; } }
@keyframes ap-bob { 50% { transform: translateY(-8px); } }

.ap-chip { display: inline-flex; align-items: center; gap: 8px; }
.ap-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: ap-ping 2s infinite; }
@keyframes ap-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } }
.ap-bars { display: flex; gap: 6px; margin-top: 22px; }
.ap-bars i { position: relative; width: 44px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.ap-bars i::after { content: ""; position: absolute; inset: 0; background: #ffb020; transform-origin: left; transform: scaleX(0); animation: ap-bar 24s linear infinite; animation-delay: var(--d); }
@keyframes ap-bar { 0% { transform: scaleX(0); opacity: 1; } 25% { transform: scaleX(1); opacity: 1; } 26%, 100% { transform: scaleX(1); opacity: 0; } }

/* right side */
.ap-side { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; }
.ap-blobs i { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; animation: ap-drift 14s ease-in-out infinite alternate; }
.ap-blobs i:nth-child(1) { width: 380px; height: 380px; top: -120px; right: -100px; background: #ffb36b; }
.ap-blobs i:nth-child(2) { width: 320px; height: 320px; bottom: -110px; left: -90px; background: #7cc8ff; animation-delay: -5s; }
.ap-blobs i:nth-child(3) { width: 220px; height: 220px; top: 45%; left: 55%; background: #ffe08a; animation-delay: -9s; opacity: .45; }
@keyframes ap-drift { 50% { transform: translate(-40px, 30px) scale(1.12); } 100% { transform: translate(30px, -20px) scale(.95); } }
.ap-side::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(16, 35, 61, .09) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask: radial-gradient(circle at 50% 50%, #000, transparent 75%); mask: radial-gradient(circle at 50% 50%, #000, transparent 75%); }

.ap-card { position: relative; padding: 36px 36px 24px; border-radius: 28px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 40px 80px -36px rgba(11, 37, 69, .35), 0 2px 0 rgba(255, 255, 255, .8) inset; transition: transform .25s ease-out; }
.ap-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 159, 26, .12), transparent 60%); }
.ap-badge { position: absolute; top: -26px; left: 36px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(135deg, #ff7a1a, #ffb020); color: #fff; box-shadow: 0 14px 26px -10px rgba(255, 122, 26, .8); animation: ap-wiggle 4s ease-in-out infinite; }
.ap-badge .ic { width: 26px; height: 26px; }
@keyframes ap-wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-10deg) scale(1.06); } 82% { transform: rotate(8deg); } 88% { transform: rotate(-4deg); } }
.ap-card h1 { margin-top: 8px; }
.ap-card > h1, .ap-card > p, .ap-card > form, .ap-card > .auth-alt, .ap-card > .alert { animation: ap-up .7s var(--ease) both; }
.ap-card > h1 { animation-delay: .1s; } .ap-card > p { animation-delay: .18s; } .ap-card > form { animation-delay: .26s; } .ap-card > .auth-alt { animation-delay: .34s; }

.ap-in { position: relative; }
.ap-in > .ic { position: absolute; left: 15px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: #93a3b8; transition: color .25s, transform .3s var(--ease); pointer-events: none; z-index: 1; }
.ap-card .ap-in input { width: 100%; padding-left: 44px; background: #fff; border: 1.5px solid #e5ebf2; border-radius: 14px; transition: border-color .25s, box-shadow .25s; }
.ap-card .ap-in input:hover { border-color: #d3dce7; }
.ap-card .ap-in input:focus { outline: 0; border-color: #ff8a1a; box-shadow: 0 0 0 4px rgba(255, 138, 26, .14); }
.ap-in:focus-within > .ic { color: #ff7a1a; transform: translateY(-50%) scale(1.12); }
.ap-in:has(.ap-eye) input { padding-right: 46px; }
.ap-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; color: #93a3b8; cursor: pointer; transition: background .2s, color .2s; }
.ap-eye:hover { background: #f2f5f9; color: var(--ink); }
.ap-eye svg { width: 19px; height: 19px; }
.ap-eye .ap-slash { stroke-dasharray: 23; stroke-dashoffset: 0; transition: stroke-dashoffset .3s; }
.ap-eye.on { color: #ff7a1a; }
.ap-eye.on .ap-slash { stroke-dashoffset: 23; }

.ap-card .btn-primary { position: relative; overflow: hidden; }
.ap-card .btn-primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: 1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: ap-shine 3.6s ease-in-out infinite 1.2s; pointer-events: none; }
@keyframes ap-shine { 0% { left: -40%; } 35%, 100% { left: 130%; } }
.ap-card .btn-primary .ic { transition: transform .3s var(--ease); }
.ap-card .btn-primary:hover .ic { transform: translateX(5px); }
.ap-card .auth-alt { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #e1e7ef; }
.ap-card .auth-alt a { position: relative; }
.ap-card .auth-alt a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.ap-card .auth-alt a:hover::after { transform: scaleX(1); transform-origin: left; }
.ap-logo img { height: 52px; transition: transform .4s var(--ease); }
.ap-logo:hover img { transform: scale(1.06) rotate(-2deg); }

@media (max-height: 820px) {
  .ap-card { padding: 30px 28px 16px; }
  .ap-badge { width: 46px; height: 46px; top: -22px; border-radius: 15px; }
  .ap-badge .ic { width: 22px; height: 22px; }
  .ap-card .auth-alt { margin-top: 10px; padding-top: 10px; }
  .ap-logo img { height: 40px; }
  .ap-glass { padding: 7px 14px 7px 7px; font-size: .82rem; }
}
@media (max-height: 680px) { .ap-card > p:not(.auth-alt) { display: none; } .ap-card h1 { margin-bottom: 12px; } }
@media (max-width: 1200px) { .ap-chips { display: none; } }
@media (max-width: 900px) {
  .ap-side { border-radius: 0; }
  .ap-card { padding: 30px 20px 16px; margin-top: 34px; }
  .ap-badge { left: 20px; }
}
.ap-blobs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ap-blobs i { z-index: 0; }
@media (max-width: 900px) { .ap-card > p:not(.auth-alt) { display: none; } .ap-card h1 { margin-bottom: 14px; font-size: 1.7rem; } .ap-card .field { margin-bottom: 9px; } .ap-top { padding: 2px 0; } .ap-logo img { height: 40px; } .ap-back { padding: 6px 0 2px; } }
.ap-slides figure, .ap-slides img, .ap-bars i::after { animation-delay: calc(var(--d) - 1s); }
@media (max-height: 680px) { .ap-card .field { margin-bottom: 6px; } .ap-card .ap-in input { padding-top: 9px; padding-bottom: 9px; } .ap-card .auth-alt { margin-top: 8px; padding-top: 8px; } }
@media (max-width: 900px) { .ap-card { margin-top: 26px; padding: 28px 18px 12px; } .ap-card .field { margin-bottom: 6px; } .ap-card .field label { margin-bottom: 3px; } .ap-card .ap-in input { padding-top: 11px; padding-bottom: 11px; } .ap-card .auth-alt { margin-top: 8px; padding-top: 8px; } .ap-grid .auth-consent { margin: 0 0 6px; font-size: .8rem; } }
@media (max-width: 900px) { .ap-side { overflow-x: hidden; overflow-y: auto; } }

/* ==========================================================================
   v31 — Booking: pick-up point, vehicle class cards, live fare box, sightseeing spots
   ========================================================================== */
.field .lbl { display: block; margin-bottom: 8px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.bk-origins, .bk-cars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bk-origins input, .bk-cars input, .bk-spots input { position: absolute; opacity: 0; pointer-events: none; }
.bk-origins label, .bk-cars label { position: relative; cursor: pointer; }
.bk-origins span, .bk-cars label > span { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; height: 100%; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1.5px solid #e3e9f0; transition: border-color .25s, background .25s, box-shadow .25s, transform .3s var(--ease); }
.bk-origins span:hover, .bk-cars label > span:hover { border-color: #ffc38a; transform: translateY(-2px); }
.bk-origins i, .bk-cars i { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f1f5f9; color: #64748b; transition: background .25s, color .25s, transform .4s var(--ease); }
.bk-origins i .ic, .bk-cars i .ic { width: 22px; height: 22px; }
.bk-origins b, .bk-cars b { font-size: .98rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.bk-origins small, .bk-cars small { font-size: .76rem; color: #7b8aa0; line-height: 1.3; }
.bk-origins input:checked + span, .bk-cars input:checked + span { border-color: #ff8a1a; background: #fff8f1; box-shadow: 0 10px 24px -14px rgba(255, 122, 26, .7); }
.bk-origins input:checked + span i, .bk-cars input:checked + span i { background: linear-gradient(135deg, #ff7a1a, #ffb020); color: #fff; transform: rotate(-6deg) scale(1.05); }
.bk-origins input:focus-visible + span, .bk-cars input:focus-visible + span { outline: 3px solid rgba(255, 138, 26, .35); outline-offset: 2px; }
.bk-origins input:checked + span::after, .bk-cars input:checked + span::after { content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: #ff7a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; animation: bk-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bk-pop { from { transform: scale(0); } }
.bk-cars label > span { grid-template-columns: auto 1fr; padding-bottom: 12px; }
.bk-cars em { grid-column: 1 / -1; margin-top: 10px; padding-top: 9px; border-top: 1px dashed #e3e9f0; font-style: normal; font-weight: 700; font-size: 1.05rem; color: var(--orange-d); }
.bk-cars input:checked + span em { border-top-color: #ffd7b0; }

.bk-fare { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 4px; padding: 22px 18px 20px; border-radius: 20px; text-align: center; color: #fff; background: linear-gradient(135deg, #0c4a8a 0%, #1565c0 55%, #1e88e5 100%); box-shadow: 0 20px 40px -22px rgba(13, 71, 161, .8); isolation: isolate; }
.bk-fare::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 0, .35), transparent 65%); z-index: -1; animation: ap-drift 9s ease-in-out infinite alternate; }
.bk-fare-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; opacity: .9; }
.bk-fare-lbl .ic { width: 17px; height: 17px; color: #ffc400; }
.bk-fare b { font-size: clamp(1.4rem, 3.2vw, 1.9rem); font-weight: 700; color: #ffc400; line-height: 1.25; }
.bk-fare b.is-price { font-size: clamp(2rem, 4.6vw, 2.8rem); }
.bk-fare small { font-size: .8rem; opacity: .85; }

.bk-spots { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-spots label { cursor: pointer; }
.bk-spots span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1.5px solid #e3e9f0; font-size: .88rem; font-weight: 500; transition: all .25s; }
.bk-spots span .ic { width: 0; height: 15px; opacity: 0; transition: width .25s, opacity .25s; }
.bk-spots span:hover { border-color: #ffc38a; }
.bk-spots input:checked + span { background: #fff1e6; border-color: #ff8a1a; color: var(--orange-d); font-weight: 600; }
.bk-spots input:checked + span .ic { width: 15px; opacity: 1; }

@media (max-width: 720px) {
  .bk-origins { grid-template-columns: 1fr; }
  .bk-cars { grid-template-columns: 1fr; }
  .bk-cars label > span { grid-template-columns: auto 1fr auto; }
  .bk-cars i { grid-row: span 2; }
  .bk-cars em { grid-column: 3; grid-row: 1 / span 2; margin: 0 26px 0 0; padding: 0; border: 0; align-self: center; }
}
/* v31b — fare cards: pick-up tabs + price per vehicle class */
.org-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 auto 18px; }
.org-tabs button { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 18px; border: 1.5px solid #e3e9f0; background: #fff; cursor: pointer; text-align: left; font: inherit; transition: all .25s var(--ease); }
.org-tabs button .ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: #f1f5f9; color: #64748b; transition: all .25s; }
.org-tabs button small { display: block; font-size: .72rem; color: #8090a3; } .org-tabs button b { font-size: .98rem; color: var(--ink); }
.org-tabs button:hover { border-color: #ffc38a; transform: translateY(-2px); }
.org-tabs button.on { border-color: #ff8a1a; background: #fff8f1; box-shadow: 0 12px 24px -16px rgba(255, 122, 26, .8); }
.org-tabs button.on .ic { background: linear-gradient(135deg, #ff7a1a, #ffb020); color: #fff; }
.fare2 .f2-cls { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.fare2 .f2-cls span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 8px; background: #f4f7fb; font-size: .74rem; font-weight: 600; color: #42526b; }
.fare2 .f2-cls span .ic { width: 15px; height: 15px; color: var(--orange-d); }
.fare2 .f2-cls span.ask { color: #9aa7b8; font-weight: 500; } .fare2 .f2-cls span.ask .ic { color: #b6c1cf; }
.fare2 .f2-from { font-size: .72rem; font-weight: 600; margin-right: 3px; opacity: .75; }
.fare2 .f2-ask { font-size: .95rem; font-weight: 700; color: var(--orange-d); }
/* white-background studio car shots: show the whole car */
img.is-studio { object-fit: contain !important; background: #fff; padding: 4% 5%; filter: none !important; }
/* booking: 4 service types — transfer opens its own quick page */
.type-pills { grid-template-columns: repeat(4, 1fr); }
.type-pills .type-link { position: relative; color: inherit; }
.type-pills .type-link span { position: relative; }
.type-pills .type-link span::after { content: "↗"; position: absolute; top: 8px; right: 10px; font-size: .8rem; color: var(--orange-d); }
.type-pills .type-link:hover span { border-color: #ffc38a; transform: translateY(-3px); }
@media (max-width: 900px) { .type-pills { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .type-pills { grid-template-columns: 1fr; } }

/* ==========================================================================
   v32 — /transfer/ quick booking (taxi-style: from / to / vehicle / fare / contact)
   ========================================================================== */
.tf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
.tf-card { position: relative; padding: 0 28px 26px; border-radius: 26px; background: #fff; border: 1px solid #edf1f6; box-shadow: 0 30px 60px -36px rgba(11, 37, 69, .35); overflow: hidden; }
.tf-card .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tf-head { display: flex; align-items: center; gap: 14px; margin: 0 -28px 18px; padding: 22px 28px; color: #fff; background: linear-gradient(120deg, #0c4a8a 0%, #1565c0 60%, #1e88e5 100%); position: relative; isolation: isolate; overflow: hidden; }
.tf-head::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 0, .35), transparent 65%); z-index: -1; animation: ap-drift 10s ease-in-out infinite alternate; }
.tf-head-ic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(135deg, #ff7a1a, #ffb020); box-shadow: 0 10px 22px -10px rgba(255, 122, 26, .9); animation: ap-wiggle 4.5s ease-in-out infinite; }
.tf-head-ic .ic { width: 26px; height: 26px; }
.tf-head h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 700; color: #fff; }
.tf-head p { margin: 2px 0 0; font-size: .86rem; opacity: .85; }
.tf-title { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.tf-title::before { content: ""; width: 4px; height: 20px; border-radius: 4px; background: linear-gradient(#ffb020, #ff7a1a); }
.tf-card .field { margin-bottom: 14px; }
.tf-card .field label, .tf-card .field .lbl { text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--ink); }
.tf-route { position: relative; display: grid; grid-template-columns: 1fr 44px 1fr; gap: 10px; align-items: end; }
.tf-swap { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 50%; border: 1.5px solid #e3e9f0; background: #fff; color: var(--orange-d); cursor: pointer; transition: border-color .25s, background .25s, transform .3s var(--ease); }
.tf-swap svg { width: 20px; height: 20px; transform: rotate(90deg); }
.tf-swap:hover { border-color: #ff8a1a; background: #fff8f1; }
.tf-swap.spin { animation: tf-spin .5s var(--ease); }
@keyframes tf-spin { to { transform: rotate(180deg); } }
.tf-card .bk-fare { margin: 4px 0 18px; }
.tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-submit { margin-top: 8px; position: relative; overflow: hidden; }
.tf-submit::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: 1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: ap-shine 3.8s ease-in-out infinite 1.5s; pointer-events: none; }
.tf-submit[disabled] { opacity: .75; cursor: wait; }
.tf-fine { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: .8rem; color: #6b7a8d; line-height: 1.6; }
.tf-fine .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; color: #16a34a; }
.tf-fine a { color: var(--orange-d); font-weight: 600; }
.tf-bad { animation: cs-shake .45s; }
.tf-bad input, .tf-bad .cs-trigger { border-color: #e5383b !important; }
.tf-bad.cs-host, .tf-bad .cs-host { border-color: #e5383b !important; }

.tf-side { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h, 72px) + 16px); }
.tf-box { padding: 20px; border-radius: 22px; background: #fff; border: 1px solid #edf1f6; box-shadow: 0 20px 40px -30px rgba(11, 37, 69, .3); }
.tf-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.tf-box h3 .ic { width: 20px; height: 20px; color: var(--orange-d); }
.tf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tf-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: #42526b; line-height: 1.5; }
.tf-steps b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: #fff1e6; color: var(--orange-d); font-size: .85rem; }
.tf-pop { display: grid; gap: 8px; }
.tf-pop button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid #edf1f6; background: #f8fafc; font: inherit; text-align: left; cursor: pointer; transition: all .25s var(--ease); }
.tf-pop button span { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: .85rem; font-weight: 600; color: var(--ink); }
.tf-pop button span .ic { width: 13px; height: 13px; color: #94a3b8; }
.tf-pop button b { flex: none; font-size: .85rem; color: var(--orange-d); }
.tf-pop button:hover { border-color: #ffc38a; background: #fff8f1; transform: translateX(3px); }
.tf-notes ul { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 8px; font-size: .86rem; color: #42526b; line-height: 1.55; }
.tf-call { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-call .btn { flex: 1 1 auto; justify-content: center; }

/* thank-you */
.tf-done { padding: 34px 28px 28px; text-align: center; }
.tf-done-ic { width: 84px; height: 84px; margin: 0 auto 14px; }
.tf-done-ic svg { width: 100%; height: 100%; }
.tf-done-ic circle { stroke: #22c55e; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: tf-draw .7s ease-out forwards; }
.tf-done-ic path { stroke: #22c55e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: tf-draw .45s .55s ease-out forwards; }
@keyframes tf-draw { to { stroke-dashoffset: 0; } }
.tf-done h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--ink); }
.tf-done-sub { margin: 0 0 18px; color: #6b7a8d; }
.tf-ref { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 26px; border-radius: 16px; background: #fff8f1; border: 1px dashed #ffb36b; margin-bottom: 18px; }
.tf-ref span { font-size: .78rem; color: #8090a3; } .tf-ref b { font-size: 1.3rem; letter-spacing: .06em !important; color: var(--orange-d); }
.tf-sum { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; max-width: 460px; margin: 0 auto 22px; text-align: left; font-size: .92rem; }
.tf-sum dt { color: #8090a3; } .tf-sum dd { margin: 0; font-weight: 600; color: var(--ink); }
.tf-done-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (max-width: 980px) {
  .tf-grid { grid-template-columns: 1fr; }
  .tf-side { position: static; }
}
@media (max-width: 640px) {
  .tf-card { padding: 0 16px 20px; border-radius: 20px; }
  .tf-head { margin: 0 -16px 16px; padding: 18px 16px; }
  .tf-route { grid-template-columns: 1fr; gap: 0; }
  .tf-swap { position: absolute; right: 14px; top: 50%; margin: 0; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; box-shadow: 0 6px 16px -8px rgba(11, 37, 69, .4); }
  .tf-row { grid-template-columns: 1fr; gap: 0; }
  .tf-done { padding: 26px 16px 22px; }
}

/* ==========================================================================
   v33 — vehicle picker with real car photos (sedan / van / Alphard)
   ========================================================================== */
.car-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.car-pick .cp { position: relative; cursor: pointer; }
.car-pick input { position: absolute; opacity: 0; pointer-events: none; }
.cp-card { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 18px; background: #fff; border: 1.5px solid #e3e9f0; overflow: hidden; transition: border-color .25s, box-shadow .3s, transform .35s var(--ease); }
.cp-card:hover { border-color: #ffc38a; transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(11, 37, 69, .45); }
.cp-img { display: block; aspect-ratio: 16 / 9; background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%); overflow: hidden; }
.cp-img img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.04); transition: transform .5s var(--ease); }
.cp-card:hover .cp-img img { transform: scale(1.1) translateX(-2%); }
.cp-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 14px; }
.cp-body b { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.cp-model { font-size: .76rem; color: #8090a3; }
.cp-spec { display: flex; gap: 12px; margin-top: 4px; font-size: .78rem; font-weight: 600; color: #475569; }
.cp-spec span { display: inline-flex; align-items: center; gap: 4px; }
.cp-spec .ic { width: 14px; height: 14px; color: #94a3b8; }
.cp-body em { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e3e9f0; font-style: normal; font-weight: 700; font-size: 1.05rem; color: var(--orange-d); }
.car-pick input:checked + .cp-card { border-color: #ff8a1a; background: #fffaf5; box-shadow: 0 14px 30px -18px rgba(255, 122, 26, .75); }
.car-pick input:checked + .cp-card .cp-img { background: linear-gradient(180deg, #fff7ef 0%, #ffe9d6 100%); }
.car-pick input:checked + .cp-card .cp-img img { animation: cp-drive .6s var(--ease); }
@keyframes cp-drive { 0% { transform: translateX(-14%) scale(1.04); opacity: .2; } 100% { transform: scale(1.04); opacity: 1; } }
.car-pick input:checked + .cp-card::after { content: ""; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: #ff7a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: 0 4px 10px -3px rgba(255, 122, 26, .8); animation: bk-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.car-pick input:focus-visible + .cp-card { outline: 3px solid rgba(255, 138, 26, .35); outline-offset: 2px; }
@media (max-width: 640px) {
  .car-pick { gap: 8px; }
  .cp-card { border-radius: 14px; }
  .cp-body { padding: 6px 8px 10px; }
  .cp-body b { font-size: .86rem; }
  .cp-model { display: none; }
  .cp-spec { gap: 6px; font-size: .7rem; }
  .cp-spec .ic { width: 12px; height: 12px; }
  .cp-body em { font-size: .84rem; margin-top: 6px; padding-top: 6px; }
  .car-pick input:checked + .cp-card::after { top: 6px; right: 6px; width: 18px; height: 18px; background-size: 11px; }
}

/* ==========================================================================
   v34 — Transfer booking wizard (route → vehicle → add-ons → passenger & payment)
   ========================================================================== */
/* price block moved out of .cp-body */
.cp-price { display: block; padding: 0 14px 14px; }
.cp-price em { display: block; padding-top: 8px; border-top: 1px dashed #e3e9f0; font-style: normal; font-weight: 700; font-size: 1.05rem; color: var(--orange-d); }
.cp-price small, .cp-btn { display: none; }
@media (max-width: 640px) { .cp-price { padding: 0 8px 10px; } .cp-price em { font-size: .84rem; padding-top: 6px; } }

/* step bar */
.tf-bar { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 20px; padding: 0; counter-reset: s; }
.tf-bar li { position: relative; }
.tf-bar li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 3px; border-radius: 3px; background: #e5ebf2; transition: background .4s; }
.tf-bar li.done:not(:last-child)::after { background: linear-gradient(90deg, #ff7a1a, #ffb020); }
.tf-bar button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: #94a3b8; cursor: pointer; }
.tf-bar i { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #f1f5f9; transition: background .3s, color .3s, transform .4s var(--ease), box-shadow .3s; }
.tf-bar i .ic { width: 21px; height: 21px; }
.tf-bar i .n { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #cbd5e1; color: #fff; font-size: .66rem; font-weight: 700; font-style: normal; }
.tf-bar span:not(.n) { font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.25; }
.tf-bar li.seen button { color: #475569; }
.tf-bar li.done i { background: #fff1e6; color: var(--orange-d); }
.tf-bar li.done i .n { background: #22c55e; }
.tf-bar li.on i { background: linear-gradient(135deg, #ff7a1a, #ffb020); color: #fff; transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 22px -12px rgba(255, 122, 26, .9); }
.tf-bar li.on i .n { background: var(--ink); }
.tf-bar li.on button { color: var(--ink); }

/* steps */
.tf-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.tf-wiz.is-wizard .tf-step { display: none; }
.tf-wiz.is-wizard .tf-step.on { display: block; }
.tf-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef2f7; }
.tf-nav .btn { min-width: 150px; justify-content: center; }
.tf-sub { margin: -6px 0 14px; color: #6b7a8d; font-size: .9rem; }
.tf-hint { display: flex; gap: 8px; align-items: center; margin: -4px 0 12px; padding: 10px 14px; border-radius: 12px; background: #fff7ed; color: #9a3412; font-size: .86rem; font-weight: 500; }
.tf-hint .ic { width: 18px; height: 18px; flex: none; }
.tf-row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }

/* quantity stepper */
.qty { display: inline-flex; align-items: center; height: 52px; border-radius: 14px; border: 1px solid rgba(3, 105, 161, .14); background: #f7fbff; overflow: hidden; width: 100%; }
.qty button { flex: none; width: 46px; height: 100%; border: 0; background: none; font-size: 1.3rem; font-weight: 600; color: var(--orange-d); cursor: pointer; transition: background .2s; }
.qty button:hover { background: #fff1e6; }
.field .qty input, .qty input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: center; font-weight: 700; font-size: 1.05rem; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty.bump input { animation: q-bump .3s var(--ease); }
@keyframes q-bump { 50% { transform: scale(1.25); color: var(--orange-d); } }
.qty.sm { width: 128px; height: 42px; border-radius: 12px; background: #fff; }
.qty.sm button { width: 38px; }

/* vehicle list (VR style rows) */
.car-pick--list { grid-template-columns: 1fr; gap: 12px; }
.car-pick--list .cp-card { flex-direction: row; align-items: stretch; }
.car-pick--list .cp-img { flex: 0 0 240px; aspect-ratio: auto; display: grid; place-items: center; padding: 10px; }
.car-pick--list .cp-img img { height: auto; max-height: 130px; }
.car-pick--list .cp-body { flex: 1; justify-content: center; padding: 16px 18px; gap: 4px; }
.car-pick--list .cp-body b { font-size: 1.15rem; }
.car-pick--list .cp-model { display: block; font-size: .82rem; }
.car-pick--list .cp-spec { gap: 14px; margin-top: 6px; font-size: .84rem; }
.cp-feat { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .78rem; color: #64748b; }
.cp-feat span { display: inline-flex; align-items: center; gap: 4px; }
.cp-feat .ic { width: 13px; height: 13px; color: #22c55e; }
.car-pick--list .cp-price { flex: 0 0 190px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 2px; padding: 16px 18px; border-left: 1px dashed #e3e9f0; text-align: right; }
.car-pick--list .cp-price em { padding: 0; border: 0; font-size: 1.45rem; }
.car-pick--list .cp-price small { display: block; font-size: .74rem; color: #8090a3; }
.car-pick--list .cp-btn { display: inline-flex; margin-top: 10px; padding: 8px 18px; border-radius: 999px; background: #f1f5f9; color: var(--ink); font-size: .84rem; font-weight: 700; transition: background .25s, color .25s; }
.car-pick--list .cp-btn .ic { width: 15px; height: 15px; }
.cp-btn-on { display: none; align-items: center; gap: 5px; }
.car-pick--list input:checked + .cp-card .cp-btn { background: linear-gradient(135deg, #ff7a1a, #ffb020); color: #fff; }
.car-pick--list input:checked + .cp-card .cp-btn-off { display: none; }
.car-pick--list input:checked + .cp-card .cp-btn-on { display: inline-flex; }
.car-pick--list input:checked + .cp-card::after { top: 12px; left: 12px; right: auto; }
.car-pick .cp.too-small .cp-card { opacity: .55; }

@media (max-width: 760px) {
  .car-pick--list .cp-card { flex-wrap: wrap; }
  .car-pick--list .cp-img { flex: 0 0 38%; padding: 8px; }
  .car-pick--list .cp-body { flex: 1 1 55%; padding: 12px 12px 8px 4px; }
  .car-pick--list .cp-feat { display: none; }
  .car-pick--list .cp-price { flex: 1 0 100%; flex-direction: row; align-items: center; justify-content: space-between; border-left: 0; border-top: 1px dashed #e3e9f0; padding: 10px 12px; text-align: left; }
  .car-pick--list .cp-price em { font-size: 1.15rem; }
  .car-pick--list .cp-price small { flex: 1; margin-left: 8px; }
  .car-pick--list .cp-btn { margin: 0; padding: 7px 14px; }
}

/* add-ons */
.tf-extras { display: grid; gap: 10px; }
.tx { display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid #e3e9f0; background: #fff; transition: border-color .25s, background .25s; }
.tx.on { border-color: #ff8a1a; background: #fffaf5; }
.tx-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff1e6; color: var(--orange-d); }
.tx-ic .ic { width: 22px; height: 22px; }
.tx-txt b { display: block; font-weight: 700; color: var(--ink); }
.tx-txt small { font-size: .8rem; color: #8090a3; }
.tx-price { font-weight: 700; color: var(--orange-d); white-space: nowrap; }
.tx-price small { font-weight: 500; font-size: .74rem; color: #8090a3; margin-left: 2px; }
.tx-price em { font-style: normal; padding: 3px 10px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: .8rem; }
@media (max-width: 640px) {
  .tx { grid-template-columns: 40px 1fr; gap: 8px 12px; padding: 12px; }
  .tx-ic { width: 40px; height: 40px; }
  .tx-price { grid-column: 2; }
  .tx .qty { grid-column: 1 / -1; width: 100%; }
}

/* payment choice */
.tf-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 6px; }
.tf-pay label { position: relative; cursor: pointer; }
.tf-pay input { position: absolute; opacity: 0; pointer-events: none; }
.tf-pay label > span { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; height: 100%; padding: 14px 16px; border-radius: 16px; border: 1.5px solid #e3e9f0; background: #fff; transition: all .25s var(--ease); }
.tf-pay i { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #f1f5f9; color: #64748b; transition: all .25s; }
.tf-pay i .ic { width: 22px; height: 22px; }
.tf-pay b { font-weight: 700; color: var(--ink); line-height: 1.3; }
.tf-pay small { font-size: .78rem; color: #8090a3; }
.tf-pay-logos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.tf-pay-logos img, .tf-pay-logos svg { height: 18px; width: auto; }
.tf-pay input:checked + span { border-color: #ff8a1a; background: #fffaf5; box-shadow: 0 12px 26px -18px rgba(255, 122, 26, .8); }
.tf-pay input:checked + span i { background: linear-gradient(135deg, #ff7a1a, #ffb020); color: #fff; }
.tf-pay input:checked + span::after { content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: #ff7a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
@media (max-width: 640px) { .tf-pay { grid-template-columns: 1fr; } .tf-row3 { grid-template-columns: 1fr 1fr; } .tf-row3 .field:first-child { grid-column: 1 / -1; } .tf-bar span:not(.n) { font-size: .68rem; } .tf-bar i { width: 38px; height: 38px; border-radius: 12px; } .tf-bar li:not(:last-child)::after { top: 18px; } .tf-nav .btn { min-width: 0; flex: 1; } }

/* summary sidebar */
.tf-summary h3 { margin-bottom: 16px; }
.ts-route { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.ts-route + .ts-route { padding-bottom: 6px; }
.ts-route:first-of-type::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; border-left: 2px dashed #e2e8f0; }
.ts-dot { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 3px solid #ff7a1a; background: #fff; }
.ts-dot.b { border-color: #0ea5e9; background: #0ea5e9; }
.ts-route small { display: block; font-size: .74rem; color: #8090a3; }
.ts-route b { font-size: .95rem; color: var(--ink); }
.ts-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 12px 0; padding: 12px 0; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; font-size: .88rem; }
.ts-list dt { display: inline-flex; align-items: center; gap: 6px; color: #8090a3; }
.ts-list dt .ic { width: 15px; height: 15px; }
.ts-list dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); }
.ts-lines { display: grid; gap: 6px; font-size: .88rem; }
.ts-line { display: flex; justify-content: space-between; gap: 10px; }
.ts-line span { color: #64748b; }
.ts-line.sm { font-size: .82rem; }
.ts-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #0c4a8a, #1e88e5); color: #fff; }
.ts-total span { font-weight: 600; opacity: .9; }
.ts-total b { font-size: 1.5rem; font-weight: 700; color: #ffc400; }
.ts-note { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: .76rem; color: #8090a3; }
.ts-note .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; color: #22c55e; }
@media (max-width: 980px) { .tf-summary { order: -1; } }
/* wizard: phone helpers */
.tf-step > .lbl { display: block; margin: 16px 0 8px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.tf-mbar { display: none; }
@media (max-width: 980px) {
  .tf-mbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 120; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-radius: 18px; background: linear-gradient(135deg, #0c4a8a, #1e88e5); color: #fff; box-shadow: 0 18px 36px -14px rgba(12, 74, 138, .7); }
  .tf-mbar small { display: block; font-size: .72rem; opacity: .85; }
  .tf-mbar b { font-size: 1.25rem; color: #ffc400; }
  .tf-mbar-car { font-size: .82rem; font-weight: 600; opacity: .9; text-align: right; }
  .tf-section.has-mbar { padding-bottom: 90px; }
  .tf-section.has-mbar ~ * .float-contact, body:has(.tf-mbar) .float-contact { bottom: 86px; }
}
@media (max-width: 640px) { .hide-sm { display: none; } }
/* Simplified Chinese: Kanit for Latin/numbers, Noto Sans SC for Chinese glyphs */
html[lang="zh-CN"] { --ff-sans: "Kanit", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --ff-serif: "Kanit", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
html[lang="zh-CN"] body, html[lang="zh-CN"] input, html[lang="zh-CN"] textarea, html[lang="zh-CN"] select, html[lang="zh-CN"] button { font-family: var(--ff-sans); }
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2 { letter-spacing: 0; }
/* language switch with 3 options (TH · EN · 中文): highlight the active item itself */
.lang-pill { display: none; }
.lang-switch a { transition: opacity .3s, color .3s, background .35s var(--ease); }
.lang-switch a.on { background: var(--amber); }
.lang-switch a:not(.on):hover { opacity: 1; background: rgba(255, 176, 32, .15); }
/* online payment not set up yet */
.tf-pay label.is-off { cursor: not-allowed; }
.tf-pay label.is-off > span { opacity: .55; filter: grayscale(.6); background: #f8fafc; }
.tf-pay-soon { grid-column: 1 / -1; margin-top: 8px; font-style: normal; font-size: .76rem; font-weight: 600; color: #b45309; }

/* ==========================================================================
   v35 — Payment page: choose how to pay (PromptPay QR · bank transfer · card)
   ========================================================================== */
.pm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 18px; padding: 16px 20px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #0c4a8a, #1e88e5); }
.pm-head small { display: block; font-size: .8rem; opacity: .85; }
.pm-head b { font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 700; color: #ffc400; line-height: 1.2; }
.pm-ref { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .82rem; font-weight: 600; }
.pm-ref .ic { width: 15px; height: 15px; }
.pm-title { margin: 0 0 12px; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.pm-list { display: grid; gap: 10px; margin-bottom: 20px; }
.pm { position: relative; display: grid; grid-template-columns: 48px 1fr auto 22px; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; border: 1.5px solid #e3e9f0; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .25s, background .25s, box-shadow .3s, transform .3s var(--ease); }
.pm:hover { border-color: #ffc38a; transform: translateY(-2px); }
.pm i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #f1f5f9; color: #64748b; transition: all .25s; }
.pm i .ic { width: 24px; height: 24px; }
.pm-txt b { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
.pm-txt small { font-size: .8rem; color: #8090a3; }
.pm-logos .pay-logos { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pm-logos .bank-logo.sm { width: 26px; height: 26px; }
.pm-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cbd5e1; transition: all .25s; }
.pm[aria-selected="true"] { border-color: #ff8a1a; background: #fffaf5; box-shadow: 0 14px 28px -20px rgba(255, 122, 26, .8); }
.pm[aria-selected="true"] i { background: linear-gradient(135deg, #ff7a1a, #ffb020); color: #fff; }
.pm[aria-selected="true"] .pm-radio { border-color: #ff7a1a; background: #ff7a1a; box-shadow: inset 0 0 0 4px #fff; }
.pm-soon { position: absolute; top: -9px; right: 46px; padding: 2px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .7rem; font-style: normal; font-weight: 700; }
.pm.is-soon .pm-logos { opacity: .55; }
.pm-off { display: grid; justify-items: center; gap: 8px; padding: 26px 18px; border-radius: 18px; border: 1.5px dashed #fcd34d; background: #fffbeb; text-align: center; }
.pm-off-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fef3c7; color: #b45309; }
.pm-off-ic .ic { width: 26px; height: 26px; }
.pm-off b { font-size: 1.05rem; color: var(--ink); }
.pm-off p { margin: 0; max-width: 46ch; color: #6b7a8d; font-size: .9rem; }
.pm-off-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.pm-cash { margin-top: 6px; }
.pm-cash-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: var(--orange-d); font: inherit; font-weight: 600; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pm-cash-btn .ic { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .pm { grid-template-columns: 42px 1fr 22px; gap: 10px; padding: 12px; }
  .pm i { width: 42px; height: 42px; }
  .pm-logos { grid-column: 2 / 3; grid-row: 2; }
  .pm-logos .pay-logos { justify-content: flex-start; }
  .pm-radio { grid-column: 3; grid-row: 1; }
  .pm-head { flex-direction: column; align-items: flex-start; }
}
.pm-logos { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
@media (max-width: 640px) { .pm-logos { justify-content: flex-start; } }
.pm-head b.pm-await { font-size: 1.15rem; color: #fff; }
.pm-wait { border-color: #93c5fd; background: #eff6ff; }
.pm-wait .pm-off-ic { background: #dbeafe; color: #1d4ed8; }

/* centered status cards (booking received / verifying / paid): the flex h2 must centre too */
.form-card[style*="text-align:center"] h2, .form-card.is-center h2 { justify-content: center; text-align: center; flex-wrap: wrap; }
/* summary total with no price yet ("ทีมงานจะแจ้งราคา") — text, not a big number */
.sum-total span { white-space: nowrap; }
.sum-total { gap: 12px; }
.sum-total.is-text { align-items: center; }
.sum-total.is-text b { font-family: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.4; text-align: right; }

/* contact: company name + address + open-in-maps button */
.cmap-head .crow-txt { flex: 1; min-width: 0; }
.cmap-addr { display: block; margin-top: 2px; color: #5b6b80; font-size: .9rem; }
.cmap-go { flex: none; text-decoration: none; background: #f1ebff; color: #6d28d9; }
.cmap-go:hover { background: #7c3aed; color: #fff; }
@media (max-width: 640px) { .cmap-head { flex-wrap: wrap; } .cmap-go { width: 100%; text-align: center; } }

/* ==========================================================================
   v36 — Car rental: 3-car hero line-up, ✗ "not included" list, 3 price cells,
         half / full day picker on the booking form
   ========================================================================== */
.page-hero.cars-hero { min-height: 0 !important; padding-bottom: 30px; }
.ch-cars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; max-width: 920px; }
.ch-car { display: grid; grid-template-rows: 132px auto; gap: 10px; padding: 14px 16px 14px; border-radius: 22px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; text-decoration: none; transition: transform .35s var(--ease), background .3s, border-color .3s; }
.ch-car:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.ch-img { display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.ch-img picture { display: contents; }
.ch-img img { display: block; max-width: 100%; max-height: 132px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .38)); transition: transform .45s var(--ease); }
.ch-car:hover .ch-img img { transform: scale(1.05) translateY(-2px); }
.ch-txt small { display: block; font-size: .82rem; color: rgba(255, 255, 255, .85); }
.ch-txt b { font-size: 1.02rem; font-weight: 700; color: #ffd166; }
@media (max-width: 640px) {
  .ch-cars { gap: 8px; margin-top: 20px; }
  .ch-car { grid-template-rows: 64px auto; gap: 6px; padding: 10px 8px; border-radius: 16px; text-align: center; }
  .ch-img img { max-height: 64px; }
  .ch-txt small { font-size: .72rem; }
  .ch-txt b { font-size: .8rem; }
}
.car-card { scroll-margin-top: 110px; }
.checks.car-ex { margin-top: -12px; }
.checks.car-ex li { background: #fff4f2; color: #9a3412; }
.checks.car-ex .ic { color: #e11d48; }
.car-prices b em { font-style: normal; font-family: inherit; font-size: .78rem; font-weight: 500; color: var(--muted); }
.bk-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-plan label { position: relative; cursor: pointer; }
.bk-plan input { position: absolute; opacity: 0; }
.bk-plan span { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid #e3e9f0; background: #fff; transition: border-color .25s, background .25s, box-shadow .3s; }
.bk-plan b { font-weight: 700; color: var(--ink); }
.bk-plan small { font-size: .8rem; color: var(--muted); }
.bk-plan input:checked + span { border-color: #ff8a1a; background: #fffaf5; box-shadow: 0 10px 22px -16px rgba(255, 122, 26, .8); }
.bk-plan input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.type-pills.n3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .type-pills.n3 { grid-template-columns: 1fr; } }.page-hero .hero-cta { margin-top: 22px; }

/* contact form: caption above each field — a pre-filled value is the customer's own detail */
.cx-in { flex: 1; min-width: 0; display: grid; }
.cx-in small { padding-top: 9px; font-size: .74rem; font-weight: 600; color: #8090a3; line-height: 1.2; }
.cx-in input { padding: 3px 0 10px !important; }
.cx-input:focus-within .cx-in small { color: var(--orange-d); }

/* tour gallery: author credits for Creative Commons photos */
.td-credits { margin: 10px 4px 0; font-size: .74rem; color: #8090a3; line-height: 1.5; }
.td-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.td-credits a:hover { color: var(--orange-d); }

/* booking form on phones: no "transfer" shortcut (customer came to rent a car / book a tour) — the two choices side by side */
@media (max-width: 720px) {
  .type-pills .type-link { display: none; }
  .type-pills.n3 { grid-template-columns: 1fr 1fr; }
  .type-pills.n3 span { flex-direction: column; padding: 14px 8px; }
}

/* ==========================================================================
   v37 — phones: steps card, grids that grew with their content,
         readable small labels, bigger tap areas
   ========================================================================== */
@media (max-width: 1100px) { .st { grid-template-columns: minmax(0, 1fr); } }   /* a later desktop rule (270px 1fr auto) was winning on phones */
.booking-grid > *, .pay-grid > *, .detail-grid > *, .contact-grid > *, .account-grid > * { min-width: 0; }   /* wide content scrolls inside instead of widening the page */
@media (max-width: 720px) {
  .tf-bar button > span:not(.n) { font-size: .78rem; }
  .tf-bar i .n { font-size: .72rem; }
  .car-prices small, .td-day-n small { font-size: .74rem; }
  .ax-dots button { position: relative; }
  .ax-dots button::after { content: ""; position: absolute; inset: -14px -4px; }   /* finger-sized hit area, same look */
  .site-footer a[lang] { display: inline-block; padding: 10px 6px; }
}
/* ==========================================================================
   v38 — all screen sizes: 320px phones, tablets with touch, desktops
   ========================================================================== */
.form-grid > *, .field { min-width: 0; }   /* a long option text in a hidden <select> was stretching the booking form past a 320px screen */
select { max-width: 100%; }
.car-prices small, .td-day-n small { font-size: .72rem; }   /* labels stay readable (≥ 11.5px) on every screen */
.tf-bar i .n { font-size: .7rem; }
.site-footer a[lang] { display: inline-block; padding: 10px 6px; }   /* language links: finger-sized on tablets too */
@media (pointer: coarse) { .td-crumb a { display: inline-block; padding: 8px 2px; } }.rv-write > *, .rv-top > *, .cx-form > *, .cx-fields > * { min-width: 0; }   /* review form: a long trip name in its <select> was widening the page at 561–640px */

/* phones held sideways (short screens): smaller menu words and a slimmer price bar leave room for the page */
@media (max-height: 520px) {
  .mobile-menu-inner { padding-top: calc(var(--header-h) + 12px); padding-bottom: 24px; }
  .mobile-menu-inner > a:not(.btn) { font-size: 1.5rem; line-height: 1.25; }
  .tf-mbar { bottom: 8px; padding-top: 6px; padding-bottom: 6px; }
}

/* transfer booking (phone / tablet): the price bar waits until pick-up and drop-off are chosen */
@media (max-width: 980px) {
  .tf-mbar { transition: transform .35s var(--ease), opacity .3s; }
  .tf-mbar:not(.is-ready) { transform: translateY(160%); opacity: 0; pointer-events: none; }
}

/* floating contact buttons: Facebook */
.fc-fb { background: #1877f2; }
.float-contact .fc-fb { box-shadow: 0 10px 22px -8px rgba(24, 119, 242, .55); }
/* phones held sideways: the stack must stay below the header */
@media (max-height: 520px) {
  .float-contact { gap: 6px; }
  .float-contact .fc { width: 38px; height: 38px; }
  .float-contact .fc .ic { width: 18px; height: 18px; }
  .float-contact .fc-wa { display: none; }
  .float-contact .fc-top.show { max-height: 38px; }
}
/* refund terms on the booking / payment pages */
.refund-note { margin: 14px 0; padding: 14px 16px; border-radius: 16px; border: 1px solid #dbe7f5; background: #f7fbff; font-size: .88rem; }
.refund-note .rn-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ink); font-weight: 700; }
.refund-note .rn-title .ic { flex: none; width: 18px; height: 18px; color: var(--orange-d); }
.refund-note ul { display: grid; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.refund-note li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed #dbe7f5; color: #475569; }
.refund-note li b { flex: none; font-weight: 700; text-align: right; }
.rn-g { color: #15803d; } .rn-y { color: #b45309; } .rn-r { color: #b91c1c; }
.refund-note a { color: var(--orange-d); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* a forgotten required field: the browser scrolls to it, keep it clear of the fixed header and bottom bars */
input, select, textarea { scroll-margin-top: calc(var(--header-h, 72px) + 24px); scroll-margin-bottom: 110px; }
/* the agreement line is partly links: give fingers a bigger box to hit */
@media (pointer: coarse) { .check input { width: 26px; height: 26px; margin-top: 0; } }