/* ============================================================
   VIETNAM GUIDE

   A warm editorial layer on top of the existing Hangout Buddies tokens.
   It borrows --blue / --orange / --ink from base.html so the section is
   recognisably the same product, and adds a tropical-evening palette of
   its own: jade, terracotta, warm paper and a deep night blue.

   Deliberately NOT red-and-yellow-because-Vietnam. The palette comes from
   Vietnamese coffee, old Saigon shopfronts, jade temple detail and the
   colour the sky actually goes at 6pm.

   Every selector is prefixed .vn- or .bd- so this file cannot affect any
   existing page.
   ============================================================ */

.vn {
    --vn-paper:      #fdfaf4;
    --vn-paper-warm: #f8f0e3;
    --vn-ink:        #1b2438;
    --vn-ink-soft:   #5a6478;
    --vn-jade:       #1f7a63;
    --vn-jade-soft:  #e6f2ee;
    /* Darkened from #c2582f, which read beautifully but sat at 4.26:1 on
       paper — under AA. This carries the same hue and saturation at 5.20:1
       on paper, 4.77:1 on its own soft tint, and 5.42:1 behind white button
       text, so every place it is used clears AA with margin. */
    --vn-terracotta: #ac4e2a;
    --vn-terracotta-soft: #fbeee7;
    --vn-night:      #101a2e;
    --vn-night-2:    #1b2a45;
    --vn-neon:       #ff8a5b;
    --vn-gold:       #e0a340;
    --vn-line:       #e7dccb;
    /* The site navbar is position:fixed at top:0 with a maximal z-index and
       a content-driven height — base.html exposes no token for it. Measured
       at 59px wide and 61px on a phone. The chapter strip has to stick BELOW
       it or it sticks underneath it and becomes invisible exactly when it is
       needed, which is what it did until this was added. */
    --vn-navbar-h:   59px;
    --vn-shadow:     0 10px 34px rgba(27, 36, 56, .09);

    background: var(--vn-paper);
    color: var(--vn-ink);
}

.vn *, .vn *::before, .vn *::after { box-sizing: border-box; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The hidden attribute must actually hide — see the note in explore.css. */
.vn [hidden] { display: none !important; }

/* ---------- shared section rhythm ---------- */
.vn-section {
    max-width: 1120px;
    margin: 0 auto;
    /* Was 72px. A guide is read, not admired — the old rhythm meant three
       swipes between one answer and the next on a phone. */
    padding: 50px 20px;
}
.vn-section-tint { background: var(--vn-paper-warm); max-width: none; }
.vn-section-tint > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.vn-section h2 {
    /* Was clamp(1.7rem, 4.2vw, 2.7rem) — 43px on a desktop, which is
       poster type for a heading you meet ten times down one page. */
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
    line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
    margin: 0 0 9px; color: var(--vn-ink);
}
.vn-section h3 { font-size: 1.01rem; font-weight: 800; margin: 0 0 7px; }
.vn-eyebrow {
    font-size: .65rem; font-weight: 800; letter-spacing: .15em;
    text-transform: uppercase; color: var(--vn-terracotta); margin: 0 0 7px;
}
.vn-section-lede {
    font-size: .93rem; line-height: 1.62; color: var(--vn-ink-soft);
    max-width: 60ch; margin: 0 0 20px;
}
.vn-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--vn-jade); font: inherit; font-weight: 700;
    text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- buttons ---------- */
.vn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
    font-weight: 800; font-size: .95rem; cursor: pointer; text-decoration: none;
    font-family: var(--font-body); transition: transform .16s ease, box-shadow .16s ease;
}
.vn-btn-primary { background: var(--vn-terracotta); color: #fff; }
.vn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(194,88,47,.32); }
.vn-btn-ghost { background: transparent; color: var(--vn-ink); border-color: var(--vn-ink); }
.vn-btn-ghost:hover { background: var(--vn-ink); color: #fff; }

/* ============================================================
   HERO — layered, parallax-light, day → night on scroll
   ============================================================ */
.vn-hero {
    position: relative; overflow: hidden;
    /* Bottom padding must clear the skyline art (about 150px at desktop
       width) or the 'Checked <month>' line renders behind buildings. */
    padding: 104px 20px 140px;
    background: linear-gradient(180deg, #ffd9a8 0%, #ffb98a 38%, var(--vn-paper) 100%);
    transition: background 1.2s ease;
}
.vn-hero.is-night {
    background: linear-gradient(180deg, var(--vn-night) 0%, var(--vn-night-2) 55%, #33405e 100%);
}
.vn-hero.is-night .vn-title,
.vn-hero.is-night .vn-tagline,
.vn-hero.is-night .vn-lede { color: #fff; }
.vn-hero.is-night .vn-checked { color: rgba(255,255,255,.75); }

.vn-hero-sky { position: absolute; inset: 0; pointer-events: none; }
.vn-sun {
    position: absolute; right: 12%; top: 16%;
    width: 96px; height: 96px; border-radius: 50%;
    background: radial-gradient(circle, #fff3d0 0%, var(--vn-gold) 62%, transparent 72%);
    transition: transform 1.2s ease, opacity 1.2s ease;
}
.vn-hero.is-night .vn-sun { transform: translateY(120px) scale(.55); opacity: .5; }

/* Skyline: hand-drawn SVG (templates/vietnam/_skyline.html), inlined so its
   layers can be recoloured for night. It replaced a repeating-linear-gradient
   that tiled identical bars and read on screen as a barcode rather than a
   city. Three depths, each a separate group in the SVG. */
.vn-skyline {
    position: absolute; left: 0; right: 0; bottom: 0;
    line-height: 0;                 /* kill the inline-SVG descender gap */
}
.vn-skyline svg { display: block; width: 100%; height: auto; }

.vn-sky-far  { fill: var(--vn-ink); opacity: .20; }
.vn-sky-near { fill: var(--vn-ink); opacity: .52; }
.vn-sky-fore { fill: var(--vn-ink); opacity: .70; }
/* Lit windows: punched out of the towers in the hero's own sky colour. */
.vn-sky-cut  { fill: #ffd9a8; opacity: .28; }
.vn-sky-wire { stroke: var(--vn-ink); stroke-width: 1.5; fill: none; opacity: .28; }

/* At night the silhouette darkens and the windows come on. */
.vn-hero.is-night .vn-sky-far  { fill: #000; opacity: .34; }
.vn-hero.is-night .vn-sky-near { fill: #000; opacity: .60; }
.vn-hero.is-night .vn-sky-fore { fill: #000; opacity: .78; }
.vn-hero.is-night .vn-sky-cut  { fill: var(--vn-gold); opacity: .85; }
.vn-hero.is-night .vn-sky-wire { stroke: #000; opacity: .5; }
.vn-sky-far, .vn-sky-near, .vn-sky-fore, .vn-sky-cut, .vn-sky-wire {
    transition: fill 1.2s ease, opacity 1.2s ease, stroke 1.2s ease;
}

/* Motorbikes — the one animation that is genuinely about the city. */
.vn-traffic { position: absolute; left: 0; right: 0; bottom: 8px; height: 20px; }
.vn-bike {
    position: absolute; bottom: 0; width: 22px; height: 9px; border-radius: 4px 7px 3px 3px;
    background: var(--vn-ink); opacity: .5;
    animation: vn-ride 9s linear infinite;
    animation-delay: calc(var(--i) * -1.8s);
}
.vn-bike::after {
    content: ''; position: absolute; right: -5px; bottom: 2px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--vn-ink);
}
@keyframes vn-ride { from { left: -8%; } to { left: 108%; } }

.vn-hero-inner { position: relative; max-width: 1120px; margin: 0 auto; }
.vn-kicker {
    font-size: .72rem; font-weight: 800; letter-spacing: .2em;
    text-transform: uppercase; color: var(--vn-terracotta); margin: 0 0 14px;
}
.vn-title {
    font-size: clamp(2rem, 6.2vw, 3.3rem); line-height: 1.02; font-weight: 800;
    letter-spacing: -.03em; margin: 0 0 11px; color: var(--vn-ink);
}
.vn-tagline {
    font-size: clamp(.97rem, 1.9vw, 1.15rem); font-weight: 700;
    color: var(--vn-terracotta); margin: 0 0 12px; max-width: 30ch;
}
.vn-lede {
    font-size: .93rem; line-height: 1.62; color: var(--vn-ink-soft);
    max-width: 58ch; margin: 0 0 20px;
}
.vn-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.vn-checked {
    font-size: .84rem; color: var(--vn-ink-soft);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
}
.vn-checked i { color: var(--vn-jade); }

/* ============================================================
   CHAPTER NAV
   ============================================================ */
/* Anchor jumps must land below BOTH the site navbar and this bar, or the
   heading you jumped to is hidden underneath them. */
.vn { scroll-padding-top: 148px; }
.vn :target { scroll-margin-top: 148px; }

/* ---------- chapter nav ----------
   A sticky strip that has to do three jobs at once: say what the chapters
   are, say which one you are in, and admit that it scrolls sideways.

   The old version did none of them. Ten identical grey words, no icons, no
   position, and a hard cut at the right edge that looked like a rendering
   fault rather than an invitation to swipe. */
.vn-chapters {
    position: sticky;
    /* Two pixels of deliberate overlap. A gap here would show the article
       sliding through between the two bars; an overlap is hidden behind the
       navbar and survives the navbar's height varying by a pixel or two. */
    top: calc(var(--vn-navbar-h) - 2px);
    z-index: 30;
    background: rgba(253, 250, 244, .94); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vn-line);
}

/* The edge fades. Absolutely positioned over the track rather than applied
   as a mask, because a mask would also fade the pills at rest and the point
   is only to soften the cut. pointer-events:none so they never eat a tap. */
.vn-chapters::before,
.vn-chapters::after {
    content: '';
    position: absolute;
    top: 0; bottom: 3px;
    width: 34px;
    pointer-events: none;
    z-index: 2;
}
.vn-chapters::before {
    left: 0;
    background: linear-gradient(90deg, rgba(253, 250, 244, .96), rgba(253, 250, 244, 0));
}
.vn-chapters::after {
    right: 0;
    background: linear-gradient(270deg, rgba(253, 250, 244, .96), rgba(253, 250, 244, 0));
}

.vn-chapters-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding: 0 20px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 9px 16px;
    /* Smooth only when the reader has not asked otherwise — the script
       centres the current chip by setting scrollLeft, and this is what
       makes that glide rather than jump. */
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    .vn-chapters-track { scroll-behavior: auto; }
}
.vn-chapters-track::-webkit-scrollbar { display: none; }

.vn-chapters-track a {
    position: relative;
    flex: none;
    scroll-snap-align: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 15px 8px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(27, 36, 56, .035);
    font-size: .82rem;
    font-weight: 700;
    color: var(--vn-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease,
                transform .2s cubic-bezier(.22, 1, .36, 1);
}

/* The number. Present but quiet — it turns the strip into a contents list
   without competing with the label. It swaps out for a tick on the chapter
   you are actually in, which is the one moment a position marker is worth
   more than a position number. */
.vn-chapter-num {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: var(--vn-ink-soft);
    opacity: .5;
    transition: opacity .2s ease, color .2s ease;
}
.vn-chapters-track a i {
    font-size: .78rem;
    color: var(--vn-terracotta);
    transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), color .2s ease;
}

.vn-chapters-track a:hover {
    background: var(--vn-jade-soft);
    border-color: rgba(31, 122, 99, .3);
    color: var(--vn-jade);
    transform: translateY(-1px);
}
.vn-chapters-track a:hover i { transform: scale(1.16) rotate(-6deg); color: var(--vn-jade); }
.vn-chapters-track a:hover .vn-chapter-num { opacity: .8; color: var(--vn-jade); }
.vn-chapters-track a:focus-visible {
    outline: 3px solid var(--vn-terracotta);
    outline-offset: 2px;
}

/* The current chapter. Filled, lifted, and wearing the gold — the one
   element in the strip that should be findable at a glance while moving. */
.vn-chapters-track a.is-current {
    background: var(--vn-ink);
    border-color: var(--vn-ink);
    color: #fff;
    box-shadow: 0 6px 16px rgba(27, 36, 56, .26);
    transform: translateY(-1px);
}
.vn-chapters-track a.is-current i { color: var(--vn-gold); transform: none; }
.vn-chapters-track a.is-current .vn-chapter-num { opacity: 0; width: 0; margin-right: -8px; }

/* A soft pulse the moment a chapter becomes current, so the change
   registers peripherally while the reader is looking at the article rather
   than at the nav. Gated: no script, no pulse, and the strip still works. */
@keyframes vnChapterPop {
    0%   { box-shadow: 0 6px 16px rgba(27, 36, 56, .26), 0 0 0 0 rgba(224, 163, 64, .55); }
    100% { box-shadow: 0 6px 16px rgba(27, 36, 56, .26), 0 0 0 9px rgba(224, 163, 64, 0); }
}
.vn[data-motion="on"] .vn-chapters-track a.is-current {
    animation: vnChapterPop .7s ease-out;
}

.vn-progress { height: 3px; background: var(--vn-line); }
.vn-progress span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-gold), var(--vn-terracotta));
    transition: width .12s linear;
}

@media (max-width: 768px) {
    .vn { --vn-navbar-h: 61px; }
}
@media (max-width: 560px) {
    .vn-chapters-track { padding: 8px 14px; gap: 5px; }
    .vn-chapters-track a { padding: 7px 13px 7px 10px; font-size: .79rem; gap: 7px; }
    .vn-chapters::before, .vn-chapters::after { width: 26px; }
}

/* ============================================================
   SNAPSHOT
   ============================================================ */
.vn-snapshot {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.vn-snap {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 16px;
    padding: 18px; display: flex; flex-direction: column; gap: 5px;
    box-shadow: var(--vn-shadow);
}
.vn-snap i { font-size: 1.25rem; color: var(--vn-terracotta); margin-bottom: 4px; }
.vn-snap-label {
    font-size: .7rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--vn-ink-soft);
}
.vn-snap-value { font-size: .96rem; font-weight: 700; line-height: 1.45; }
.vn-snap-take {
    margin-top: auto; padding-top: 8px; font-size: .68rem; font-weight: 700;
    color: var(--vn-jade); text-transform: uppercase; letter-spacing: .07em;
}

/* ============================================================
   FACETS
   ============================================================ */
.vn-facets { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vn-facet {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 20px;
    padding: 26px 22px; transition: transform .18s ease, box-shadow .18s ease;
}
.vn-facet:hover { transform: translateY(-3px); box-shadow: var(--vn-shadow); }
.vn-facet i {
    font-size: 1.5rem; color: var(--vn-jade);
    background: var(--vn-jade-soft); width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center; margin-bottom: 14px;
}
.vn-facet p { color: var(--vn-ink-soft); line-height: 1.62; margin: 0; font-size: .94rem; }

/* ============================================================
   STYLE SELECTOR
   ============================================================ */
.vn-styles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.vn-style {
    display: flex; flex-direction: column; gap: 4px; text-align: left;
    min-height: 96px; padding: 16px; border-radius: 16px; cursor: pointer;
    border: 2px solid var(--vn-line); background: #fff;
    font-family: var(--font-body); color: var(--vn-ink);
    transition: border-color .15s ease, transform .15s ease;
}
.vn-style:hover { border-color: var(--vn-jade); transform: translateY(-2px); }
.vn-style[aria-checked="true"] {
    border-color: var(--vn-jade); background: var(--vn-jade-soft);
    box-shadow: inset 0 0 0 1px var(--vn-jade);
}
.vn-style i { font-size: 1.2rem; color: var(--vn-jade); }
.vn-style strong { font-size: .95rem; }
.vn-style small { color: var(--vn-ink-soft); font-size: .81rem; line-height: 1.42; }
.vn-style-status { margin-top: 16px; font-size: .92rem; color: var(--vn-ink-soft); min-height: 1.4em; }

/* ============================================================
   BUDGET

   The whole money block — bands, ledger and trip planner — is defined
   once, near the bottom of this file under "MONEY". An earlier draft of
   it lived here as well and the two disagreed about nearly everything;
   the duplicate has been removed rather than patched, because a rule
   that is overridden 900 lines later is a rule nobody can reason about.
   ============================================================ */

/* ============================================================
   MAP
   ============================================================ */
.vn-map-wrap { display: grid; gap: 24px; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.05fr); }
.vn-map-figure {
    background: linear-gradient(160deg, #fff 0%, var(--vn-jade-soft) 100%);
    border: 1px solid var(--vn-line); border-radius: 22px; padding: 14px;
}
.vn-map { width: 100%; height: auto; display: block; }
.vn-river { fill: none; stroke: #a9d4e8; stroke-width: 7; stroke-linecap: round; opacity: .85; }
.vn-area { cursor: pointer; }
.vn-area circle {
    fill: #fff; stroke: var(--vn-jade); stroke-width: 1.4; opacity: .92;
    transition: fill .16s ease, stroke-width .16s ease;
}
.vn-area text { pointer-events: none; }   /* per-element classes below set size and fill */
.vn-area:hover circle, .vn-area:focus circle { fill: var(--vn-jade-soft); stroke-width: 2.4; }
.vn-area.is-active circle { fill: var(--vn-jade); stroke: var(--vn-ink); stroke-width: 2 }
.vn-area.is-active text { fill: #fff; }
.vn-area:focus { outline: none; }
.vn-area:focus-visible circle { stroke: var(--vn-terracotta); stroke-width: 3; }

.vn-area-card {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 20px;
    padding: 24px; box-shadow: var(--vn-shadow);
}
.vn-area-card header { display: flex; justify-content: space-between; gap: 12px;
    align-items: flex-start; margin-bottom: 10px; }
.vn-area-card h3 { font-size: 1.24rem; margin: 0; }
.vn-price i { font-size: .72rem; color: var(--vn-terracotta); }
.vn-price .vn-price-off { opacity: .22; }
.vn-area-official {
    font-size: .8rem; color: var(--vn-ink-soft); background: var(--vn-paper-warm);
    padding: 8px 12px; border-radius: 10px; margin: 0 0 12px;
}
.vn-area-official i { color: var(--vn-jade); margin-right: 5px; }
.vn-area-personality { font-size: .96rem; line-height: 1.6; margin: 0 0 16px; }
.vn-area-fit { margin: 0 0 14px; display: grid; gap: 12px; }
.vn-area-fit dt { font-size: .76rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--vn-ink-soft); margin-bottom: 3px; }
.vn-area-fit dd { margin: 0; font-size: .92rem; line-height: 1.55; }
.vn-area-fit div:first-child dt i { color: var(--vn-jade); }
.vn-area-fit div:last-child dt i { color: var(--vn-terracotta); }
.vn-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.vn-tags li {
    font-size: .74rem; font-weight: 700; padding: 5px 11px; border-radius: 999px;
    background: var(--vn-jade-soft); color: var(--vn-jade);
}
.vn-area-key { list-style: none; padding: 0; margin: 20px 0 0;
    display: flex; flex-wrap: wrap; gap: 8px; }
.vn-area-key button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 8px 15px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--vn-line); background: #fff;
    font-size: .84rem; font-weight: 700; font-family: var(--font-body); color: var(--vn-ink);
}
.vn-area-key button:hover { border-color: var(--vn-jade); }
.vn-area .vn-area-num {
    width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
    background: var(--vn-jade); color: #fff; font-size: .72rem;
}

/* ============================================================
   A DAY — the dark chapter
   ============================================================ */
.vn-section-dark {
    background: linear-gradient(180deg, #ffcf9e 0%, var(--vn-night-2) 42%, var(--vn-night) 100%);
    color: #fff; max-width: none;
}
.vn-section-dark > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.vn-section-dark h2 { color: #fff; }
.vn-section-dark .vn-eyebrow { color: var(--vn-neon); }

.vn-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.vn-timeline::before {
    content: ''; position: absolute; left: 74px; top: 8px; bottom: 8px; width: 2px;
    background: linear-gradient(180deg, var(--vn-terracotta), var(--vn-line));
}
/* On the night section the line reads as the sun going down. */
.vn-section-dark .vn-timeline::before {
    background: linear-gradient(180deg, var(--vn-gold), var(--vn-neon), #6f7fb0);
}
.vn-beat { display: grid; grid-template-columns: 74px 1fr; gap: 22px;
    padding: 14px 0; position: relative; }
/* The timeline is used on TWO backgrounds: the dark "A day here" section on
   the destination page, and plain paper on the briefing page. Its default
   must therefore be the paper (ink) treatment, with the light-on-dark
   variant scoped to .vn-section-dark. Defaulting to white text is how the
   briefing page ended up rendering white on cream. */
.vn-beat-time {
    font-variant-numeric: tabular-nums; font-weight: 800; font-size: .92rem;
    color: var(--vn-ink-soft); padding-top: 3px; text-align: right;
}
.vn-beat-body { position: relative; padding-left: 22px; }
.vn-beat-body::before {
    content: ''; position: absolute; left: -6px; top: 8px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--vn-terracotta);
    box-shadow: 0 0 0 4px rgba(172,78,42,.16);
}
.vn-beat-body h3 { color: var(--vn-ink); font-size: 1.06rem; display: flex;
    align-items: center; gap: 9px; }
.vn-beat-body h3 i { color: var(--vn-terracotta); }
.vn-beat-body p { color: var(--vn-ink-soft); line-height: 1.62; margin: 0;
    font-size: .94rem; }

/* -- the same timeline, on night -- */
.vn-section-dark .vn-beat-time { color: rgba(255,255,255,.72); }
.vn-section-dark .vn-beat-body::before {
    background: var(--vn-gold); box-shadow: 0 0 0 4px rgba(224,163,64,.22);
}
.vn-section-dark .vn-beat-night .vn-beat-body::before,
.vn-section-dark .vn-beat-late .vn-beat-body::before {
    background: var(--vn-neon); box-shadow: 0 0 0 4px rgba(255,138,91,.22);
}
.vn-section-dark .vn-beat-body h3 { color: #fff; }
.vn-section-dark .vn-beat-body h3 i { color: var(--vn-gold); }
.vn-section-dark .vn-beat-body p { color: rgba(255,255,255,.8); }

/* ============================================================
   FOOD
   ============================================================ */
.vn-dishes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.vn-dish {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 18px; padding: 20px;
    border-left: 4px solid var(--vn-terracotta);
}
.vn-dish h3 { font-size: 1.1rem; margin: 0 0 8px; }
.vn-say { font-size: .82rem; font-weight: 600; color: var(--vn-jade); font-style: italic; }
.vn-dish-what { font-size: .93rem; line-height: 1.58; margin: 0 0 10px; }
.vn-dish-when { font-size: .84rem; color: var(--vn-ink-soft); margin: 0 0 8px; }
.vn-dish-when i { color: var(--vn-terracotta); margin-right: 5px; }
.vn-dish-note {
    font-size: .86rem; line-height: 1.52; margin: 0; padding: 10px 12px;
    background: var(--vn-jade-soft); border-radius: 10px; color: var(--vn-ink);
}
.vn-dietary { margin-top: 34px; }
.vn-dietary-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.vn-diet { background: #fff; border: 1px solid var(--vn-line); border-radius: 16px; padding: 18px; }
.vn-diet strong { display: block; margin-bottom: 8px; }
.vn-diet p { font-size: .88rem; line-height: 1.55; margin: 0 0 8px; color: var(--vn-ink-soft); }
.vn-phrase { background: var(--vn-paper-warm); padding: 9px 12px; border-radius: 9px; }
.vn-phrase span[lang="vi"] { font-weight: 800; color: var(--vn-ink); margin-right: 7px; }

/* ============================================================
   TRANSPORT
   ============================================================ */
.vn-transport { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vn-mode { background: #fff; border: 1px solid var(--vn-line); border-radius: 18px; padding: 20px; }
.vn-mode-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.vn-mode-head i { font-size: 1.15rem; color: var(--vn-jade); }
.vn-mode-head h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.vn-cost-dots { display: flex; gap: 3px; }
.vn-cost-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--vn-line); }
.vn-cost-dots span.on { background: var(--vn-terracotta); }
.vn-mode p { font-size: .91rem; line-height: 1.58; margin: 0 0 9px; }
.vn-mode-best { color: var(--vn-ink-soft); }
.vn-mode-price { background: var(--vn-jade-soft); padding: 9px 12px; border-radius: 9px; font-size: .87rem !important; }
.vn-mode-price i { color: var(--vn-jade); margin-right: 5px; }
.vn-mode-watch { font-size: .86rem !important; color: var(--vn-ink-soft); margin: 0 !important; }
.vn-mode-watch i { color: var(--vn-terracotta); margin-right: 5px; }

/* ============================================================
   KNOW BEFORE YOU GO
   ============================================================ */
.vn-know-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.vn-know-col h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 1.1rem; }
.vn-know-col h3 i { color: var(--vn-jade); }
.vn-note {
    background: #fff; border: 1px solid var(--vn-line); border-left: 4px solid var(--vn-line);
    border-radius: 12px; padding: 15px 17px; margin-bottom: 10px;
}
.vn-note-watch { border-left-color: var(--vn-gold); }
.vn-note-serious { border-left-color: var(--vn-terracotta); }
.vn-note-info { border-left-color: var(--vn-jade); }
.vn-note strong { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .96rem; }
.vn-note p { margin: 0; font-size: .89rem; line-height: 1.58; color: var(--vn-ink-soft); }

.vn-entry {
    margin-top: 30px; background: #fff; border: 2px solid var(--vn-terracotta);
    border-radius: 20px; padding: 24px;
}
.vn-entry h3 { display: flex; align-items: center; gap: 9px; }
.vn-entry h3 i { color: var(--vn-terracotta); }
.vn-entry-warning {
    background: var(--vn-terracotta-soft); padding: 13px 15px; border-radius: 11px;
    font-size: .9rem; line-height: 1.55; margin: 0 0 16px;
}
.vn-entry-item { padding: 13px 0; border-bottom: 1px solid var(--vn-line); }
.vn-entry-item:last-child { border-bottom: 0; }
.vn-entry-item > p:first-child { font-size: .96rem; line-height: 1.6; margin: 0 0 6px; font-weight: 600; }
.vn-entry-note { font-size: .86rem; color: var(--vn-ink-soft); margin: 0 0 6px; }
.vn-entry-source { font-size: .78rem; color: var(--vn-ink-soft); margin: 0; }
.vn-entry-source a { color: var(--vn-jade); font-weight: 700; }

.vn-misconceptions { margin-top: 30px; }
.vn-misc { background: #fff; border: 1px solid var(--vn-line); border-radius: 14px;
    padding: 16px 18px; margin-bottom: 10px; }
.vn-misc p { margin: 0; font-size: .92rem; line-height: 1.56; }
.vn-misc-wrong { color: var(--vn-ink-soft); text-decoration: line-through;
    text-decoration-color: rgba(194,88,47,.5); margin-bottom: 6px !important; }
.vn-misc-wrong i { color: var(--vn-terracotta); margin-right: 7px; text-decoration: none; }
.vn-misc-right { font-weight: 600; }
.vn-misc-right i { color: var(--vn-jade); margin-right: 7px; }

.vn-phrases { margin-top: 30px; }
.vn-phrase-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.vn-phrase-card {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 13px; padding: 14px;
    display: flex; flex-direction: column; gap: 3px;
}
.vn-vi { font-weight: 800; font-size: 1rem; }
.vn-en { font-size: .86rem; color: var(--vn-ink-soft); }

/* ============================================================
   FIT
   ============================================================ */
.vn-fit { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.vn-fit-col { background: #fff; border: 1px solid var(--vn-line); border-radius: 20px; padding: 24px; }
.vn-fit-col h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.vn-fit-yes { border-top: 4px solid var(--vn-jade); }
.vn-fit-yes h3 i { color: var(--vn-jade); }
.vn-fit-no { border-top: 4px solid var(--vn-gold); }
.vn-fit-no h3 i { color: var(--vn-gold); }
.vn-fit-col ul { margin: 0; padding-left: 20px; }
.vn-fit-col li { font-size: .93rem; line-height: 1.62; margin-bottom: 7px; }

/* ============================================================
   PLANS + FAQ
   ============================================================ */
.vn-plans { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.vn-plan { background: #fff; border: 1px solid var(--vn-line); border-radius: 18px; padding: 22px; }
.vn-plan.is-dimmed { opacity: .45; }
.vn-plan h3 { color: var(--vn-terracotta); font-size: 1.15rem; }
.vn-plan ol { margin: 0; padding-left: 19px; }
.vn-plan li { font-size: .91rem; line-height: 1.58; margin-bottom: 6px; }

.vn-faq { display: grid; gap: 8px; }
.vn-faq-item { background: #fff; border: 1px solid var(--vn-line); border-radius: 14px; overflow: hidden; }
.vn-faq-item summary {
    padding: 17px 20px; font-weight: 700; cursor: pointer; font-size: .99rem;
    list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.vn-faq-item summary::-webkit-details-marker { display: none; }
.vn-faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--vn-jade); font-weight: 400; }
.vn-faq-item[open] summary::after { content: '\2212'; }
.vn-faq-item p { padding: 0 20px 19px; margin: 0; line-height: 1.66; color: var(--vn-ink-soft); font-size: .94rem; }

/* ============================================================
   CTA / CONVERSION
   ============================================================ */
.vn-cta {
    margin-top: 30px; padding: 26px; border-radius: 20px;
    background: linear-gradient(135deg, var(--vn-jade) 0%, #17614f 100%); color: #fff;
    display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.vn-cta p { margin: 0; font-size: 1.02rem; line-height: 1.55; max-width: 52ch; }
.vn-cta .vn-btn-primary { background: #fff; color: var(--vn-jade); }

.vn-final { text-align: center; }
.vn-final .vn-section-lede { margin-left: auto; margin-right: auto; }
.vn-buddy-moments { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-top: 26px; text-align: left; }
.vn-moment {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 18px; padding: 22px;
    text-decoration: none; color: var(--vn-ink); display: flex; flex-direction: column;
    justify-content: space-between; gap: 14px; transition: transform .18s ease, box-shadow .18s ease;
}
.vn-moment:hover { transform: translateY(-3px); box-shadow: var(--vn-shadow); border-color: var(--vn-jade); }
.vn-moment p { margin: 0; font-size: .95rem; line-height: 1.58; }
.vn-moment-cta { font-weight: 800; color: var(--vn-jade); font-size: .92rem;
    display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
   SOURCES DRAWER
   ============================================================ */
.vn-sources {
    position: fixed; inset: 0; z-index: 200; background: rgba(16,26,46,.6);
    display: grid; place-items: end center; padding: 0;
}
.vn-sources-panel {
    background: var(--vn-paper); width: 100%; max-width: 720px; max-height: 88vh;
    overflow-y: auto; border-radius: 24px 24px 0 0; padding: 30px 26px 40px; position: relative;
}
.vn-sources-close {
    position: absolute; top: 14px; right: 16px; width: 44px; height: 44px;
    border: 0; background: var(--vn-paper-warm); border-radius: 50%; font-size: 1.5rem;
    cursor: pointer; color: var(--vn-ink);
}
.vn-sources h2 { font-size: 1.4rem; margin-bottom: 10px; }
.vn-sources h3 { margin-top: 22px; }
.vn-sources p { font-size: .93rem; line-height: 1.62; color: var(--vn-ink-soft); }
.vn-basis { background: #fff; border: 1px solid var(--vn-line); border-radius: 12px; padding: 14px 16px; }
.vn-source-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.vn-source-list li {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 12px; padding: 13px 15px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
}
.vn-source-list a { color: var(--vn-jade); font-weight: 700; font-size: .92rem; }
.vn-source-list small { flex-basis: 100%; color: var(--vn-ink-soft); font-size: .82rem; line-height: 1.45; }
.vn-tier { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    padding: 4px 9px; border-radius: 999px; }
.vn-tier-1 { background: var(--vn-jade); color: #fff; }
.vn-tier-2 { background: var(--vn-jade-soft); color: var(--vn-jade); }
.vn-tier-3 { background: var(--vn-paper-warm); color: var(--vn-ink-soft); }
.vn-tier-4 { background: #f2f2f4; color: #767b88; }

/* ============================================================
   MOBILE DOCK
   ============================================================ */
.vn-dock { display: none; }

/* ============================================================
   BUDDY
   ============================================================ */
.bd { display: inline-block; position: relative; width: var(--bd-size, 120px); }
.bd-body { width: 100%; height: auto; display: block; overflow: visible; }
.bd-skin { fill: #f4c9a0; }
.bd-jacket { fill: var(--vn-jade, #1f7a63); }
.bd-jacket-fold { stroke: rgba(255,255,255,.28); stroke-width: 1.6; fill: none; }
.bd-arm { fill: var(--vn-jade, #1f7a63); }
.bd-trouser { fill: #33405e; }
.bd-shoe { fill: #f1f3f7; }
.bd-pack { fill: var(--vn-gold, #e0a340); }
.bd-pack-flap { fill: #c98c2c; }
.bd-hat-brim { fill: #d8b184; }
.bd-hat-crown { fill: #e6c49a; }
.bd-hat-band { stroke: var(--vn-terracotta, #c2582f); stroke-width: 3.4; }
.bd-eye { fill: #1b2438; }
.bd-smile { fill: none; stroke: #1b2438; stroke-width: 2; stroke-linecap: round; }

.bd-prop { position: absolute; width: 34%; height: auto; }
.bd-prop-compass { right: -6%; top: 44%; animation: bd-spin 8s linear infinite; }
.bd-prop-coffee, .bd-prop-bowl { right: -8%; top: 46%; }
.bd-compass-body { fill: var(--vn-gold, #e0a340); }
.bd-compass-face { fill: #fdfaf4; }
.bd-needle { fill: var(--vn-terracotta, #c2582f); }
.bd-glass { fill: rgba(255,255,255,.72); stroke: #b9c2d0; stroke-width: 1.5; }
.bd-coffee-dark { fill: #5b3a22; }
.bd-glass-rim { fill: #e6eaf0; }
.bd-bowl-body { fill: #fdfaf4; stroke: var(--vn-jade, #1f7a63); stroke-width: 2; }
.bd-steam { fill: none; stroke: #b9c2d0; stroke-width: 2; stroke-linecap: round; }
.bd-chopstick { fill: #c98c2c; }
@keyframes bd-spin { to { transform: rotate(360deg); } }

.bd-says {
    display: flex; align-items: center; gap: 18px; margin: 30px 0;
    background: #fff; border: 1px solid var(--vn-line); border-radius: 20px; padding: 20px 24px;
}
.bd-bubble {
    margin: 0; font-size: 1rem; line-height: 1.6; font-weight: 600;
    color: var(--vn-ink); position: relative;
}
.vn-section-dark .bd-says { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.vn-section-dark .bd-bubble { color: #fff; }

.bd-tip {
    background: var(--vn-jade-soft); border-left: 4px solid var(--vn-jade);
    border-radius: 0 14px 14px 0; padding: 16px 20px; margin: 22px 0;
}
.bd-tip-badge {
    display: inline-flex; align-items: center; gap: 7px; font-size: .72rem;
    font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
    color: var(--vn-jade); margin-bottom: 7px;
}
.bd-tip p { margin: 0; font-size: .94rem; line-height: 1.62; }
.bd-tip-warning { background: var(--vn-terracotta-soft); border-left-color: var(--vn-terracotta); }
.bd-tip-warning .bd-tip-badge { color: var(--vn-terracotta); }

.vn-hero .bd {
    position: absolute; right: 6%; bottom: 34px; z-index: 2;
    animation: bd-arrive 1.1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bd-arrive {
    from { opacity: 0; transform: translateX(48px) translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
    .vn-map-wrap { grid-template-columns: 1fr; }
    .vn-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
    .vn-hero { padding: 104px 18px 190px; }
    .vn-hero .bd { right: 50%; transform: translateX(50%); bottom: 22px; --bd-size: 108px !important; }
    @keyframes bd-arrive {
        from { opacity: 0; transform: translateX(50%) translateY(20px); }
        to   { opacity: 1; transform: translateX(50%); }
    }
    .vn-section { padding: 38px 16px; }
    .vn-hero-actions .vn-btn { width: 100%; }
    .vn-beat { grid-template-columns: 56px 1fr; gap: 14px; }
    .vn-timeline::before { left: 56px; }
    /* The money block carries its own responsive rules — see "MONEY". */

    /* Sticky utility dock. Thumb-reachable, never covering content — the
       page reserves space for it. */
    .vn { padding-bottom: 74px; }
    .vn-dock {
        display: grid; grid-template-columns: repeat(4, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        background: rgba(253,250,244,.97); backdrop-filter: blur(12px);
        border-top: 1px solid var(--vn-line);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .vn-dock a {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; min-height: 60px; text-decoration: none;
        color: var(--vn-ink-soft); font-size: .68rem; font-weight: 700;
    }
    .vn-dock a i { font-size: 1.02rem; }
    .vn-dock-primary { color: var(--vn-terracotta) !important; }
    .vn-sources-panel { max-height: 92vh; border-radius: 20px 20px 0 0; }
}

/* ============================================================
   REDUCED MOTION — nothing above is load-bearing for comprehension
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .vn *, .bd * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .vn-bike { display: none; }
    .vn-hero, .vn-sun { transition: none; }
}

/* ============================================================
   PRINT — travellers do print these
   ============================================================ */
@media print {
    .vn-chapters, .vn-dock, .vn-hero-sky, .bd, .vn-sources { display: none !important; }
    .vn-section { padding: 18px 0; break-inside: avoid; }
    .vn-faq-item p { display: block !important; }
}

/* ============================================================
   MOTION
   Read vn-motion.js before changing anything here.

   The `[data-motion="on"]` gate is load-bearing: that attribute is set by
   JavaScript only after it has confirmed IntersectionObserver exists and the
   reader has not requested reduced motion. Without the gate, a script that
   fails to load would leave the entire article invisible. Never hide a
   reveal target outside this attribute.
   ============================================================ */
.vn[data-motion="on"] [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    /* Short, and decelerating hard — motion that arrives rather than
       motion that travels. 14px, not 50px: the reader should register
       that something settled, not watch it fly in. */
    transition:
        opacity .46s cubic-bezier(.22, 1, .36, 1),
        transform .46s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--i, 0) * 55ms);
    will-change: opacity, transform;
}

.vn[data-motion="on"] [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Belt and braces: even with the attribute set, a reader who switches on
   reduced motion mid-session gets everything immediately. */
@media (prefers-reduced-motion: reduce) {
    .vn[data-motion="on"] [data-reveal],
    .vn[data-motion="on"] [data-reveal].is-in {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
}

/* Printing must never inherit a hidden state. */
@media print {
    .vn[data-motion="on"] [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   REBUILT COMPONENTS (2026-08-18)
   New page order: answer, qualify, cost, logistics, atmosphere, plan.
   ============================================================ */

/* ---- hero: jump straight to an answer ---- */
.vn-jump {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px;
}
.vn-jump a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 17px; border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(27, 36, 56, .12);
    color: var(--vn-ink); font-weight: 700; font-size: .89rem;
    text-decoration: none; backdrop-filter: blur(4px);
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.vn-jump a:hover {
    background: #fff; transform: translateY(-2px);
    border-color: rgba(27, 36, 56, .28);
}
.vn-jump a i { color: var(--vn-terracotta); }
.vn-hero.is-night .vn-jump a {
    background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ---- at a glance ----
   An editorial reference panel, not a row of cards. Hairline rules, a small
   letterspaced label above a confident value, and no repeated badges. The
   restraint is the point: this block is scanned, not read. */
.vn-glance {
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 20px 30px;
}

.vn-glance-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 26px;
}
.vn-glance-head h2 {
    margin: 0;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vn-ink);
    white-space: nowrap;
}
.vn-glance-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--vn-line);
}
.vn-glance-checked {
    font-size: .74rem;
    color: var(--vn-ink-soft);
    white-space: nowrap;
}

/* Separate outlined boxes rather than one ruled table: each is its own
   object because each is independently clickable. Every box is a <details>,
   so the full explanation opens in place with no JavaScript.

   TWO TO A ROW on a phone. It used to drop to a single column below 560px,
   which turned eight one-line facts into eight full-width slabs and about
   two and a half screens of scrolling before the reader reached anything
   else. Two-up halves that and lets the eye compare across the pair, which
   is what a glance table is for.

   The animation rules below are worth reading before editing. <details>
   cannot be height-animated in every browser we support, so the open panel
   animates its CONTENTS in — fade and rise, staggered — rather than its
   box. The height snap is masked by content arriving a beat later. Browsers
   that support ::details-content get the real height transition through the
   @supports block at the end; everybody else gets the same effect minus one
   detail nobody will notice is missing. */
.vn-glance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
@media (min-width: 900px) {
    .vn-glance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

/* Per-card accent, cycled from --n on the element. Four hues rotating
   across the grid, so a column never repeats a colour against its
   neighbour and the block reads as a set rather than a wall. */
.vn-glance-item {
    --accent: var(--vn-terracotta);
    --accent-soft: var(--vn-terracotta-soft);
    position: relative;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .24s ease, transform .24s ease;
}
/* :nth-child, not an attribute match on an inline custom property. The
   browser normalises `style="--n:1"` to `--n: 1;` and the motion layer
   appends its own `--i` to the same attribute, so [style*="--n:1"] matches
   nothing and every card silently falls back to the same colour. */
.vn-glance-item:nth-child(4n+2) { --accent: var(--vn-jade); --accent-soft: var(--vn-jade-soft); }
.vn-glance-item:nth-child(4n+3) { --accent: #b57d10; --accent-soft: #fdf0d6; }
.vn-glance-item:nth-child(4n+4) { --accent: #2f5d8a; --accent-soft: #e8eef6; }

/* The sweep. A hairline of the card's accent that grows across the top
   edge when it opens — the one flourish, and it doubles as the "this is
   the open one" marker when a card has gone full width. */
.vn-glance-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--vn-gold));
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
    z-index: 2;
}
.vn-glance-item[open]::before { width: 100%; }

.vn-glance-item:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(27, 36, 56, .09);
    transform: translateY(-3px);
}
.vn-glance-item[open] {
    border-color: var(--accent);
    box-shadow: 0 14px 34px rgba(27, 36, 56, .12);
    transform: none;
    /* An open box spans the full row so its text has a readable measure
       instead of a 150px column. */
    grid-column: 1 / -1;
}

.vn-glance-item summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 15px 14px 14px;
    cursor: pointer;
    list-style: none;
}
.vn-glance-item summary::-webkit-details-marker { display: none; }
.vn-glance-item summary:focus-visible {
    outline: 3px solid var(--vn-terracotta);
    outline-offset: -3px;
    border-radius: 16px;
}

/* The badge. Circular, tinted with the card's accent, and it fills in
   when the card opens — a small, cheap piece of feedback that makes the
   grid feel responsive rather than static. */
.vn-glance-badge {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .92rem;
    transition: background .26s ease, color .26s ease,
                transform .34s cubic-bezier(.34, 1.56, .64, 1);
}
.vn-glance-item:hover .vn-glance-badge { transform: scale(1.08) rotate(-4deg); }
.vn-glance-item[open] .vn-glance-badge {
    background: var(--accent);
    color: #fff;
    transform: scale(1.05);
}

.vn-glance-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}

/* Clamped to three lines while closed, so a two-up grid stays a grid
   instead of eight boxes of wildly different heights. The full value is
   never lost — opening the card releases the clamp. */
.vn-glance-value {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.42;
    color: var(--vn-ink);
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: font-size .24s ease;
}
.vn-glance-item[open] .vn-glance-value {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    font-size: 1.12rem;
}

/* The affordance. Quiet until the box is hovered or opened — a grid of eight
   loud "Read more" links would be worse than no affordance at all. */
.vn-glance-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--accent);
    opacity: .8;
    transition: opacity .18s ease, gap .2s ease;
}
.vn-glance-item:hover .vn-glance-more { opacity: 1; gap: 9px; }
.vn-glance-item[open] .vn-glance-more { opacity: 1; }
.vn-glance-more i { font-size: .62rem; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.vn-glance-item[open] .vn-glance-more i { transform: rotate(180deg); }
.vn-glance-more-close { display: none; }
.vn-glance-item[open] .vn-glance-more-open { display: none; }
.vn-glance-item[open] .vn-glance-more-close { display: inline; }

.vn-glance-detail {
    padding: 15px 16px 18px;
    border-top: 1px solid var(--vn-line);
    background: linear-gradient(180deg, var(--accent-soft) 0%, #fff 62%);
}
.vn-glance-detail p {
    margin: 0 0 14px;
    font-size: .95rem;
    line-height: 1.72;
    color: var(--vn-ink-soft);
    max-width: 72ch;
}
.vn-glance-jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--accent);
    font-weight: 800;
    font-size: .85rem;
    color: #fff;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, gap .2s ease;
}
.vn-glance-jump:hover {
    color: #fff;
    gap: 12px;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(27, 36, 56, .18);
}
.vn-glance-jump:focus-visible { outline: 3px solid var(--vn-ink); outline-offset: 2px; }
.vn-glance-jump i { font-size: .76rem; }

/* The panel's contents arrive rather than appearing: a short rise and
   fade, the paragraph a beat before the button. This is what makes the
   open feel animated even where the box height itself snaps. */
@keyframes vnGlanceRise {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
}
/* Gated on [data-motion="on"] for the same reason the scroll reveal is:
   `both` fill mode holds the keyframe's opacity:0 through the delay, so an
   ungated version would be a stylesheet that can hide the panel by itself
   if animations never run. JavaScript sets the attribute only once it has
   confirmed it can finish the job. No script, no animation, all the text. */
.vn[data-motion="on"] .vn-glance-item[open] .vn-glance-detail p {
    animation: vnGlanceRise .42s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .04s;
}
.vn[data-motion="on"] .vn-glance-item[open] .vn-glance-jump {
    animation: vnGlanceRise .42s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .13s;
}
.vn[data-motion="on"] .vn-glance-item[open] .vn-glance-value {
    animation: vnGlanceRise .34s cubic-bezier(.22, 1, .36, 1) both;
}

/* The one footnote that explains the ° mark. */
.vn-glance-note {
    margin: 18px 0 0;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
    max-width: 66ch;
}
.vn-glance-note .vn-glance-mark { cursor: default; margin-right: 3px; }
.vn-glance-note a {
    color: var(--vn-jade);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 560px) {
    .vn-glance { padding: 34px 16px 30px; }
    .vn-glance-head { flex-wrap: wrap; gap: 10px; }
    .vn-glance-rule { display: none; }
    .vn-glance-item summary { padding: 13px 12px 12px; }
    .vn-glance-badge { width: 34px; height: 34px; font-size: .84rem; }
    .vn-glance-value { font-size: .87rem; }
    .vn-glance-detail { padding: 14px 13px 16px; }
}

/* Real height animation where the browser has ::details-content. Everything
   above already works without this; this is the extra detail for browsers
   that can do it, and it is deliberately last so it can only ever add. */
@supports selector(details::details-content) {
    .vn-glance-item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .42s cubic-bezier(.22, 1, .36, 1),
                    content-visibility .42s allow-discrete;
        transition-behavior: allow-discrete;
    }
    .vn-glance-item[open]::details-content { block-size: auto; }
}
@supports (interpolate-size: allow-keywords) {
    .vn-glance-grid { interpolate-size: allow-keywords; }
}

/* A reader who asked for stillness gets the layout and none of the motion.
   The clamp, the colours and the full-row open all still work. */
@media (prefers-reduced-motion: reduce) {
    .vn-glance-item,
    .vn-glance-item::before,
    .vn-glance-badge,
    .vn-glance-value,
    .vn-glance-more,
    .vn-glance-more i,
    .vn-glance-jump { transition: none; }
    .vn[data-motion="on"] .vn-glance-item[open] .vn-glance-detail p,
    .vn[data-motion="on"] .vn-glance-item[open] .vn-glance-jump,
    .vn[data-motion="on"] .vn-glance-item[open] .vn-glance-value { animation: none; }
    .vn-glance-item:hover { transform: none; }
    .vn-glance-item:hover .vn-glance-badge { transform: none; }
}

/* ---- straight answers ---- */
.vn-answers { display: grid; gap: 12px; max-width: 860px; }
.vn-answer {
    background: #fff; border: 1px solid var(--vn-line); border-radius: 14px;
    overflow: hidden;
}
.vn-answer summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; cursor: pointer; list-style: none;
    font-weight: 700; font-size: 1.02rem; color: var(--vn-ink);
}
.vn-answer summary::-webkit-details-marker { display: none; }
.vn-answer summary:hover { background: var(--vn-paper-warm); }
.vn-answer summary i {
    flex: 0 0 auto; color: var(--vn-terracotta); font-size: .82rem;
    transition: transform .22s ease;
}
.vn-answer[open] summary i { transform: rotate(180deg); }
.vn-answer > p {
    margin: 0; padding: 0 22px 20px; color: var(--vn-ink-soft);
    line-height: 1.68; max-width: 68ch;
}

.vn-subhead {
    margin: 44px 0 16px; font-size: 1.24rem; font-weight: 800; color: var(--vn-ink);
}

/* The cost grid is defined under "MONEY" — a `1fr 1fr` grid was what let
   the ledger push the page wider than the phone it was on. */

/* ---- map: labelled, non-overlapping ---- */
.vn-area .vn-area-name {
    font-size: 9.5px; font-weight: 700; fill: var(--vn-ink-soft);
    pointer-events: none;
}
.vn-area.is-active .vn-area-name { fill: var(--vn-terracotta); font-weight: 800; }
.vn-area .vn-area-num { font-size: 12px; font-weight: 800; fill: var(--vn-jade); }
.vn-area.is-active .vn-area-num { fill: #fff; }
.vn-map .vn-river-label {
    font-size: 9px; font-weight: 700; fill: #8fb8d4; letter-spacing: .08em;
}
.vn-area-num-chip {
    display: inline-grid; place-items: center; width: 22px; height: 22px;
    border-radius: 50%; background: var(--vn-jade); color: #fff;
    font-size: .76rem; font-weight: 800; margin-right: 9px; flex: 0 0 auto;
}

@media (max-width: 640px) {
    .vn-jump a { font-size: .84rem; padding: 9px 14px; }
}

/* ============================================================
   THE TRIP PLAN
   Day-by-day output from /api/vietnam/<slug>/plan. A vertical
   timeline per day, each row carrying its own cost share, so the
   reader can see where the money actually goes.
   ============================================================ */
.vn-trip { margin-top: 34px; }

.vn-trip-head { margin-bottom: 20px; }
.vn-trip-head h3 { font-size: 1.34rem; font-weight: 800; margin: 0 0 4px; }
.vn-trip-sub {
    margin: 0; font-size: .92rem; color: var(--vn-ink-soft);
    font-variant-numeric: tabular-nums;
}

.vn-trip-days { display: grid; gap: 18px; }

.vn-trip-day {
    background: var(--vn-paper);
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    overflow: hidden;
}

.vn-trip-dayhead {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--vn-paper-warm);
    border-bottom: 1px solid var(--vn-line);
}
.vn-trip-dayhead h4 {
    margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--vn-ink);
}
.vn-trip-areas { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.vn-trip-area {
    font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: var(--vn-jade-soft); color: var(--vn-jade);
}
.vn-trip-daycost {
    font-weight: 800; font-size: .9rem; color: var(--vn-ink);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- the timeline ---- */
.vn-trip-slots { list-style: none; margin: 0; padding: 6px 20px 10px; }

.vn-trip-slot {
    display: grid;
    grid-template-columns: 52px 16px 1fr;
    align-items: start;
    gap: 0 6px;
    padding: 14px 0;
    position: relative;
}
/* The connecting line, drawn between the dots rather than behind them. */
.vn-trip-slot::before {
    content: ''; position: absolute; left: 59px; top: 26px; bottom: -8px;
    width: 2px; background: var(--vn-line);
}
.vn-trip-slot:last-child::before { display: none; }

.vn-trip-time {
    font-size: .82rem; font-weight: 800; color: var(--vn-ink-soft);
    font-variant-numeric: tabular-nums; padding-top: 3px;
}
.vn-trip-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--vn-terracotta); margin-top: 6px;
    box-shadow: 0 0 0 3px var(--vn-terracotta-soft);
    position: relative; z-index: 1;
}
.vn-trip-slot.is-absorbed .vn-trip-dot {
    background: var(--vn-line); box-shadow: none;
}
.vn-trip-slot.is-absorbed { opacity: .72; }

.vn-trip-body { padding-left: 8px; min-width: 0; }
.vn-trip-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}
.vn-trip-row h5 {
    margin: 0; font-size: 1rem; font-weight: 700; color: var(--vn-ink);
    display: flex; align-items: center; gap: 8px;
}
.vn-trip-row h5 i { color: var(--vn-terracotta); font-size: .86rem; }
.vn-trip-cost {
    font-size: .84rem; font-weight: 800; color: var(--vn-jade);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vn-trip-meta {
    margin: 4px 0 0; font-size: .78rem; color: var(--vn-ink-soft);
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.vn-trip-where { display: inline-flex; align-items: center; gap: 4px; }
.vn-trip-why {
    margin: 8px 0 0; font-size: .92rem; line-height: 1.62;
    color: var(--vn-ink-soft); max-width: 68ch;
}
.vn-trip-tip, .vn-trip-slotnote {
    margin: 8px 0 0; font-size: .86rem; line-height: 1.55;
    padding: 9px 12px; border-radius: 9px; max-width: 68ch;
}
.vn-trip-tip {
    background: var(--vn-terracotta-soft); color: var(--vn-ink);
}
.vn-trip-tip i { color: var(--vn-terracotta); margin-right: 5px; }
.vn-trip-slotnote { background: var(--vn-jade-soft); color: var(--vn-ink); }

.vn-trip-dayfoot {
    display: flex; gap: 20px; flex-wrap: wrap;
    padding: 13px 20px; border-top: 1px solid var(--vn-line);
    background: var(--vn-paper-warm);
    font-size: .82rem; color: var(--vn-ink-soft);
    font-variant-numeric: tabular-nums;
}
.vn-trip-dayfoot i { color: var(--vn-terracotta); margin-right: 5px; }

.vn-trip-note {
    margin: 16px 0 0; font-size: .8rem; line-height: 1.6;
    color: var(--vn-ink-soft); max-width: 74ch;
}

.vn-calc-intro {
    margin: 0 0 14px; font-size: .9rem; line-height: 1.6;
    color: var(--vn-ink-soft);
}

@media (max-width: 620px) {
    .vn-trip-slot { grid-template-columns: 44px 14px 1fr; }
    .vn-trip-slot::before { left: 50px; }
    .vn-trip-slots { padding: 6px 14px 10px; }
    .vn-trip-dayhead, .vn-trip-dayfoot { padding: 13px 14px; }
    .vn-trip-dayfoot { gap: 8px; flex-direction: column; }
}
/* ============================================================
   MONEY — the cost ledger and the trip planner

   Rebuilt phone-first after screenshotting it at 390px, where the
   previous version forced the whole document to 518px wide: a
   three-column table of nine-digit figures with `white-space:
   nowrap` on two of them cannot be narrower than about 500px, and
   a `1fr 1fr` cost grid handed it that width to demand.

   The rules that follow all come from one decision — NOTHING in
   this block is allowed to set a floor on its own width:

     * every grid track is minmax(0, 1fr), never 1fr, so a track
       can be told to be narrower than its contents
     * every row is a wrapping flex line. Label and figure share a
       line while both fit; the figure drops to its own right-
       aligned line when they do not. No breakpoint decides this,
       the content does, so it holds at 320px and at 1280px
     * the only nowrap left is on the figures themselves, which
       must never break mid-number, and each one is small enough
       to fit a 320px line on its own

   Visually it takes after a booking app rather than a spreadsheet:
   white cards on warm paper, a hairline between rows, category
   icons to make the list scannable at a glance, and the two
   figures that matter — the daily all-in and the trip total —
   given blocks of their own instead of being set as body copy.
   ============================================================ */

/* ---- band chips: a segmented control with a sliding indicator ---- */
.vn-bands-wrap { margin: 0 0 20px; max-width: 560px; }
.vn-bands-caption {
    margin: 0 0 8px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}
.vn-bands {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 5px;
    background: var(--vn-paper-warm);
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    box-shadow: inset 0 1px 3px rgba(27, 36, 56, .05);
}
/* Absolutely positioned, so it creates no grid track of its own. */
.vn-bands-thumb {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / 3);
    background: var(--vn-ink);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(27, 36, 56, .24);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}
.vn-band-tab {
    position: relative;
    z-index: 1;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    min-width: 0;
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    color: var(--vn-ink-soft);
    transition: color .28s ease;
}
.vn-band-tab strong { font-size: .93rem; font-weight: 800; letter-spacing: -.01em; }
.vn-band-tab small {
    font-size: .69rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    opacity: .78;
}
.vn-band-tab[aria-selected="true"] { color: #fff; }
.vn-band-tab[aria-selected="true"] small { opacity: .82; }
.vn-band-tab:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: 2px; }

/* ---- the two columns ---- */
.vn-cost-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.vn-band-panels, .vn-band-panel { min-width: 0; }

@media (min-width: 940px) {
    .vn-cost-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 26px;
    }
    /* The planner is the thing people came to use, so it follows them
       down past the ledger. 78px clears the sticky chapter nav. */
    .vn-calc { position: sticky; top: 78px; }
}

/* ---- the ledger ---- */
.vn-ledger {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(27, 36, 56, .05);
}
.vn-ledger-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 13px 16px;
    background: var(--vn-paper);
    border-bottom: 1px solid var(--vn-line);
}
.vn-ledger-band { font-size: .96rem; font-weight: 800; letter-spacing: -.01em; }
.vn-ledger-unit {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}

.vn-ledger-rows { list-style: none; margin: 0; padding: 0; }

/* The wrapping row. flex: 1 1 auto on the label, with its default
   min-width of auto, means the label is never squeezed below its own
   min-content — so when the figure no longer fits beside it, the
   figure wraps instead of either of them overflowing. */
.vn-ledger-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vn-line);
}
.vn-ledger-row:last-child { border-bottom: 0; }
/* The minimum is wider than the longest category name, so every row in the
   band starts from the same hypothetical width and they all make the same
   wrap decision — see the note on .vn-ledger-num. */
.vn-ledger-label {
    flex: 1 1 auto;
    min-width: 11.5em;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .93rem;
    font-weight: 600;
    color: var(--vn-ink);
}
.vn-ledger-label i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--vn-jade-soft);
    color: var(--vn-jade);
    font-size: .76rem;
}
/* The min-width is doing two jobs. It right-aligns the figures into a
   money column the eye can run down, and — because every figure in a band
   then claims the same width — the rows wrap together instead of three
   wrapping and two not, which read as a broken card. It is set in em so it
   tracks the font size through the small-screen override below. */
.vn-ledger-num {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 10.5em;
    text-align: right;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--vn-ink);
}

/* The range bar. Its left edge is the low end and its width is the spread,
   both scaled against the biggest category in the band — so the eye reads
   "accommodation is most of this" without doing arithmetic. */
.vn-ledger-track {
    flex: 1 0 100%;
    position: relative;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(27, 36, 56, .07);
}
.vn-ledger-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta));
}

/* The one figure most readers actually take away, so it gets the
   strongest block on the card rather than a row like any other. */
.vn-ledger-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0;
    padding: 15px 16px;
    background: var(--vn-ink);
    color: #fff;
}
.vn-ledger-total span {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .74;
}
.vn-ledger-total strong {
    font-size: 1.04rem;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- the planner card ---- */
.vn-calc {
    position: relative;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 20px;
    padding: 22px 16px 18px;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(27, 36, 56, .09);
}
/* A band of colour along the top edge — the one flourish. */
.vn-calc::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta), var(--vn-gold));
}
.vn-calc-eyebrow {
    margin: 0 0 6px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vn-terracotta);
}
.vn-calc h3 { font-size: 1.3rem; margin: 0 0 7px; letter-spacing: -.02em; }
.vn-calc-intro {
    margin: 0 0 16px;
    font-size: .89rem;
    line-height: 1.58;
    color: var(--vn-ink-soft);
}

/* ---- steppers ---- */
.vn-calc-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 16px;
}
.vn-stepper { min-width: 0; }
.vn-stepper > label {
    display: block;
    margin-bottom: 6px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}
.vn-stepper-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: stretch;
    border: 1px solid var(--vn-line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.vn-stepper-row button {
    min-height: 46px;
    border: 0;
    background: var(--vn-paper-warm);
    color: var(--vn-ink);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.vn-stepper-row button:hover { background: var(--vn-ink); color: #fff; }
.vn-stepper-row button:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: -3px; }
.vn-calc-controls input {
    min-height: 46px;
    width: 100%;
    min-width: 0;
    padding: 10px 2px;
    border: 0;
    text-align: center;
    font-family: inherit;
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--vn-ink);
    font-variant-numeric: tabular-nums;
    background: #fff;
    -moz-appearance: textfield;
}
.vn-calc-controls input::-webkit-outer-spin-button,
.vn-calc-controls input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vn-calc-controls input:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: -3px; }

/* ---- the headline figure ---- */
.vn-calc-quote {
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--vn-line);
    background: linear-gradient(150deg, var(--vn-jade-soft) 0%, var(--vn-paper-warm) 100%);
}
.vn-calc-quotelabel {
    margin: 0 0 5px;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vn-jade);
}
.vn-calc-result {
    margin: 0;
    font-size: clamp(1.2rem, 5.4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.16;
    color: var(--vn-ink);
    font-variant-numeric: tabular-nums;
}
.vn-calc-usd {
    display: block;
    margin-top: 6px;
    font-size: .77rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--vn-ink-soft);
}
.vn-calc-loading {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--vn-ink-soft);
}

/* ---- the breakdown: the same wrapping row as the ledger ---- */
.vn-calc-breakdown {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    border: 1px solid var(--vn-line);
    border-radius: 14px;
    overflow: hidden;
}
.vn-calc-breakdown li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 12px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid var(--vn-line);
    font-size: .86rem;
    color: var(--vn-ink-soft);
}
.vn-calc-breakdown li:last-child { border-bottom: 0; }
.vn-calc-breakdown li > span {
    flex: 1 1 auto;
    min-width: 9.5em;
    display: flex;
    align-items: center;
    gap: 9px;
}
.vn-calc-breakdown li > span i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--vn-terracotta-soft);
    color: var(--vn-terracotta);
    font-size: .68rem;
}
/* Wider than the ledger's 10.5em because these are trip totals rather than
   day rates, so they carry two or three more digits. Both minimums exist to
   make the rows wrap as a group — see the note on .vn-ledger-num. */
.vn-calc-breakdown b {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 11.5em;
    text-align: right;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--vn-ink);
}
.vn-calc-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--vn-ink-soft);
}

/* A phone has no room for a 22px section gutter plus a 16px card
   gutter plus an icon plus a nine-digit figure. Give the narrowest
   screens those millimetres back rather than let anything clip. */
@media (max-width: 420px) {
    #vn-cost { padding-left: 16px; padding-right: 16px; }
    .vn-band-tab strong { font-size: .86rem; }
    .vn-band-tab small { font-size: .64rem; }
    .vn-ledger-row, .vn-ledger-head, .vn-ledger-total { padding-left: 13px; padding-right: 13px; }
    .vn-ledger-label { font-size: .89rem; gap: 9px; }
    .vn-ledger-label i { width: 26px; height: 26px; }
    .vn-ledger-num { font-size: .81rem; }
    .vn-calc { padding: 20px 14px 16px; }
    .vn-calc-breakdown li { padding-left: 12px; padding-right: 12px; }
    /* Dropping a notch pulls the widest figure back inside the shared
       minimum, so all five rows keep making the same wrap decision. */
    .vn-calc-breakdown b { font-size: .8rem; }
}

/* ============================================================
   VISA & ENTRY

   Same phone-first discipline as the money block: no fixed
   widths, every grid track minmax(0, 1fr), every row a wrapping
   flex line. See the MONEY header for the reasoning.

   The one thing this block adds is a visual vocabulary for
   CERTAINTY, because the subject demands it. Four states, and
   they never look alike:

     verified      a Tier-1 government source states it
     pending       we hold the figure, we have not read the
                   instrument text — amber, unmissable
     needs check   depends on your case; we will not guess
     danger        a thing that can go badly wrong

   A page that renders a confirmed e-visa fee and an unverified
   penalty band in the same typeface is lying by layout.
   ============================================================ */

.vn-visa { max-width: 1120px; margin: 0 auto; }
.vn-visa-head { margin-bottom: 22px; }

/* ---- standing notices ---- */
.vn-visa-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin: 0 0 22px;
    border-radius: 14px;
    border: 1px solid var(--vn-line);
    background: #fff;
}
.vn-visa-notice > i { flex: 0 0 auto; margin-top: 2px; color: var(--vn-terracotta); }
.vn-visa-notice strong { display: block; font-size: .94rem; margin-bottom: 4px; }
.vn-visa-notice p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--vn-ink-soft); }
.vn-visa-notice-future { background: #fff8ec; border-color: #f0dcb8; }

/* ---- the checker ---- */
.vn-visa-checker {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 20px;
    padding: 20px 16px 16px;
    margin: 0 0 30px;
    box-shadow: 0 14px 38px rgba(27, 36, 56, .09);
    position: relative;
    overflow: hidden;
}
.vn-visa-checker::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta), var(--vn-gold));
}
.vn-visa-kicker {
    margin: 0 0 5px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vn-terracotta);
}
.vn-visa-checker-head h3 { font-size: 1.24rem; margin: 0 0 16px; letter-spacing: -.02em; }

.vn-visa-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (min-width: 560px) {
    .vn-visa-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vn-visa-field-wide { grid-column: 1 / -1; }
}
@media (min-width: 940px) {
    .vn-visa-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vn-visa-field { min-width: 0; }
/* :not() matters — the toggle pills are labels too, and without it they
   inherit block layout, uppercase and the faded "optional" span styling,
   which collapses them into misaligned boxes. */
.vn-visa-field > label:not(.vn-visa-toggle) {
    display: block;
    margin-bottom: 6px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}
.vn-visa-field > label:not(.vn-visa-toggle) span {
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: none;
    opacity: .7;
}
.vn-visa-field select,
.vn-visa-field input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    background: var(--vn-paper);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--vn-ink);
}
.vn-visa-field select:focus-visible,
.vn-visa-field input:focus-visible {
    outline: 3px solid var(--vn-terracotta);
    outline-offset: -1px;
}

.vn-visa-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.vn-visa-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 8px 14px;
    border: 1px solid var(--vn-line);
    border-radius: 999px;
    background: var(--vn-paper);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}
.vn-visa-toggle input { width: 18px; height: 18px; accent-color: var(--vn-jade); }
.vn-visa-toggle:has(input:checked) {
    background: var(--vn-jade-soft);
    border-color: var(--vn-jade);
    color: var(--vn-jade);
}

/* ---- the result ---- */
.vn-visa-result { margin: 0 0 14px; }
.vn-visa-result-idle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 20px 16px;
    border: 1px dashed var(--vn-line);
    border-radius: 14px;
    font-size: .92rem;
    color: var(--vn-ink-soft);
}
.vn-visa-result-idle i { color: var(--vn-jade); }

.vn-visa-verdict {
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #fff;
}
.vn-visa-verdict-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 15px;
    background: var(--vn-paper);
    border-bottom: 1px solid var(--vn-line);
}
.vn-visa-verdict-head strong { font-size: .95rem; }
.vn-visa-verdict-body { padding: 13px 15px; }
.vn-visa-verdict-body > p { margin: 0 0 8px; font-size: .9rem; line-height: 1.6; }
.vn-visa-verdict-body > p:last-child { margin-bottom: 0; }

/* The four certainty states. Colour is never the only signal — each
   carries a word as well, for colour-blind readers and for anybody
   reading a printout. */
.vn-visa-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.vn-visa-status-available { background: var(--vn-jade-soft); color: var(--vn-jade); }
.vn-visa-status-possible { background: #fff2e0; color: #9a5a12; }
.vn-visa-status-check { background: #eef1f7; color: var(--vn-ink-soft); }
.vn-visa-status-unavailable { background: #fbe9e5; color: var(--vn-terracotta); }

.vn-visa-fee {
    margin-left: auto;
    font-size: .9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vn-visa-why {
    margin: 10px 0 0;
    padding: 11px 13px;
    border-radius: 11px;
    background: var(--vn-paper);
    border: 1px solid var(--vn-line);
}
.vn-visa-why summary {
    cursor: pointer;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vn-jade);
    list-style: none;
}
.vn-visa-why summary::-webkit-details-marker { display: none; }
.vn-visa-why ul { margin: 10px 0 0; padding-left: 18px; }
.vn-visa-why li { font-size: .86rem; line-height: 1.58; color: var(--vn-ink-soft); margin-bottom: 5px; }

.vn-visa-rwarn {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}
.vn-visa-rwarn li {
    display: flex;
    gap: 8px;
    padding: 8px 11px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: #fdf4ef;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--vn-ink);
}
.vn-visa-rwarn li::before { content: '!'; font-weight: 800; color: var(--vn-terracotta); }

.vn-visa-checkrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 13px;
    border: 1px solid var(--vn-line);
    border-radius: 11px;
    margin-bottom: 8px;
    font-size: .87rem;
    background: #fff;
}
.vn-visa-checkrow strong { font-weight: 800; }
.vn-visa-checkrow span { color: var(--vn-ink-soft); line-height: 1.55; }
.vn-visa-checkrow.is-fail { border-color: var(--vn-terracotta); background: #fdf4ef; }
.vn-visa-checkrow.is-pass { border-color: var(--vn-jade); }

.vn-visa-timing {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--vn-line);
    background: var(--vn-jade-soft);
    font-size: .88rem;
    line-height: 1.6;
}
.vn-visa-timing.is-late { background: #fbe9e5; border-color: var(--vn-terracotta); }
.vn-visa-timing.is-tight { background: #fff2e0; border-color: #e6c48c; }
.vn-visa-timing strong { display: block; margin-bottom: 3px; }

.vn-visa-disclaimer {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--vn-ink-soft);
}
.vn-visa-disclaimer i { margin-top: 2px; }

/* ---- group headings ---- */
.vn-visa-group {
    margin: 34px 0 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vn-terracotta);
}
.vn-visa-group::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 8px;
    background: var(--vn-line);
}

/* ---- reference cards ---- */
.vn-visa-card {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    margin-bottom: 10px;
    overflow: hidden;
}
.vn-visa-card > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    cursor: pointer;
    list-style: none;
}
.vn-visa-card > summary::-webkit-details-marker { display: none; }
.vn-visa-card > summary:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: -3px; }
.vn-visa-card-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--vn-jade-soft);
    color: var(--vn-jade);
    font-size: .84rem;
}
.vn-visa-card-title { flex: 1 1 auto; min-width: 0; }
.vn-visa-card-title strong { display: block; font-size: .97rem; font-weight: 800; letter-spacing: -.01em; }
.vn-visa-card-title small {
    display: block;
    margin-top: 2px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--vn-ink-soft);
}
.vn-visa-card-chev {
    flex: 0 0 auto;
    font-size: .8rem;
    color: var(--vn-ink-soft);
    transition: transform .22s ease;
}
.vn-visa-card[open] .vn-visa-card-chev { transform: rotate(180deg); }
.vn-visa-card-body {
    padding: 4px 15px 18px;
    border-top: 1px solid var(--vn-line);
    margin-top: 2px;
}
.vn-visa-card-body > p { font-size: .91rem; line-height: 1.68; color: var(--vn-ink-soft); }
.vn-visa-card-body > p strong,
.vn-visa-card-body > p em { color: var(--vn-ink); }
.vn-visa-card-body h4 {
    margin: 20px 0 8px;
    font-size: .95rem;
    font-weight: 800;
    color: var(--vn-ink);
}
.vn-visa-card-body h4:first-child { margin-top: 14px; }

/* ---- sourced facts ---- */
.vn-visa-fact {
    padding: 12px 14px;
    margin: 12px 0;
    border-radius: 12px;
    border: 1px solid var(--vn-line);
    border-left: 3px solid var(--vn-jade);
    background: var(--vn-paper);
}
.vn-visa-fact.is-review { border-left-color: var(--vn-gold); }
.vn-visa-fact > p { margin: 0; font-size: .91rem; line-height: 1.62; color: var(--vn-ink); }
.vn-visa-fact-note {
    margin-top: 7px !important;
    font-size: .84rem !important;
    color: var(--vn-ink-soft) !important;
}
.vn-visa-fact-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 9px !important;
}
.vn-visa-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef1f7;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--vn-ink-soft);
}
.vn-visa-chip-review { background: #fdf0d6; color: #8a5a08; }
.vn-visa-verified { font-size: .72rem; font-weight: 700; color: var(--vn-ink-soft); }

/* ---- callouts ---- */
.vn-visa-callout {
    padding: 13px 15px;
    margin: 14px 0;
    border-radius: 12px;
    border: 1px solid var(--vn-line);
    background: var(--vn-paper);
}
.vn-visa-callout strong { display: block; font-size: .92rem; line-height: 1.5; color: var(--vn-ink); }
.vn-visa-callout p {
    margin: 7px 0 0;
    font-size: .87rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
}
.vn-visa-callout-good { background: var(--vn-jade-soft); border-color: #bcdcd1; }
.vn-visa-callout-warn { background: #fff5e6; border-color: #ecd5a8; }
.vn-visa-callout-bad { background: #fdf0eb; border-color: #eec4b2; }

/* The pending-verification badge. Deliberately the loudest thing on
   the page after an outright danger warning. */
.vn-visa-pending {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 15px;
    margin: 14px 0;
    border-radius: 12px;
    border: 2px solid var(--vn-gold);
    background: #fffaf0;
}
.vn-visa-pending > i { flex: 0 0 auto; margin-top: 2px; color: #b57d10; }
.vn-visa-pending strong { display: block; font-size: .89rem; margin-bottom: 4px; }
.vn-visa-pending p { margin: 0; font-size: .85rem; line-height: 1.58; color: var(--vn-ink-soft); }

/* ---- lists ---- */
.vn-visa-list { margin: 10px 0; padding-left: 20px; }
.vn-visa-list li { font-size: .89rem; line-height: 1.65; color: var(--vn-ink-soft); margin-bottom: 8px; }
.vn-visa-list li strong { color: var(--vn-ink); }

.vn-visa-check { list-style: none; margin: 12px 0; padding: 0; }
.vn-visa-check li {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--vn-line);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--vn-ink);
}
.vn-visa-check li:last-child { border-bottom: 0; }
.vn-visa-check li::before {
    content: '\f0c8';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 400;
    flex: 0 0 auto;
    color: var(--vn-jade);
}
.vn-visa-check-urgent li::before { content: '\f0da'; font-weight: 900; color: var(--vn-terracotta); }

.vn-visa-fineprint {
    font-size: .81rem !important;
    line-height: 1.6 !important;
    color: var(--vn-ink-soft) !important;
}

/* ---- tables ---- */
.vn-visa-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-variant-numeric: tabular-nums;
}
.vn-visa-table thead th {
    text-align: left;
    padding: 0 0 9px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    border-bottom: 1px solid var(--vn-ink);
}
.vn-visa-table thead th:last-child { text-align: right; }
.vn-visa-table tbody th {
    text-align: left;
    padding: 11px 12px 11px 0;
    font-size: .87rem;
    font-weight: 600;
    color: var(--vn-ink);
    border-bottom: 1px solid var(--vn-line);
}
.vn-visa-table tbody td {
    padding: 11px 0;
    text-align: right;
    font-size: .87rem;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid var(--vn-line);
}
.vn-visa-table tr.is-evisa th, .vn-visa-table tr.is-evisa td { background: var(--vn-jade-soft); }
.vn-visa-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--vn-jade);
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* ---- three-column comparison ---- */
.vn-visa-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 14px 0;
}
@media (min-width: 860px) {
    .vn-visa-compare { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vn-visa-compare-col {
    padding: 14px;
    border: 1px solid var(--vn-line);
    border-radius: 13px;
    background: var(--vn-paper);
    min-width: 0;
}
.vn-visa-compare-col h4 {
    margin: 0 0 10px !important;
    font-size: .89rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vn-visa-compare-good { background: var(--vn-jade-soft); border-color: #bcdcd1; }
.vn-visa-compare-good h4 { color: var(--vn-jade); }
.vn-visa-compare-bad { background: #fdf0eb; border-color: #eec4b2; }
.vn-visa-compare-bad h4 { color: var(--vn-terracotta); }
.vn-visa-compare-col dl { margin: 0; }
.vn-visa-compare-col dt {
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    margin-top: 9px;
}
.vn-visa-compare-col dd {
    margin: 3px 0 0;
    font-size: .85rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.vn-visa-compare-col ul { margin: 0; padding-left: 18px; }
.vn-visa-compare-col li { font-size: .85rem; line-height: 1.5; margin-bottom: 7px; }
.vn-visa-compare-col code {
    font-size: .82em;
    background: rgba(27, 36, 56, .06);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ---- the MRZ specimen ---- */
.vn-visa-mrz { margin: 16px 0; }
.vn-visa-mrz-page {
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    background: linear-gradient(160deg, #fbfbfd 0%, #f2f0ea 100%);
    padding: 14px;
    overflow-x: auto;
}
.vn-visa-mrz-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin-bottom: 14px;
}
.vn-visa-mrz-fields span {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.vn-visa-mrz-fields small {
    display: block;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    margin-bottom: 2px;
}
.vn-visa-mrz-lines {
    border-top: 1px dashed var(--vn-line);
    padding-top: 11px;
}
.vn-visa-mrz-lines code {
    display: block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: .8rem;
    letter-spacing: .06em;
    white-space: nowrap;
    color: var(--vn-ink);
    line-height: 1.7;
}
.vn-visa-mrz figcaption {
    margin-top: 9px;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--vn-ink-soft);
}

/* ---- two-up splits ---- */
.vn-visa-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 14px 0;
}
@media (min-width: 720px) {
    .vn-visa-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vn-visa-split > div { min-width: 0; }
.vn-visa-split h4 { margin-top: 0 !important; }

.vn-visa-entrybox {
    padding: 14px;
    border: 1px solid var(--vn-line);
    border-radius: 13px;
    background: var(--vn-paper);
}
.vn-visa-entrybox h4 { display: flex; align-items: center; gap: 8px; }
.vn-visa-entrybox p { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--vn-ink-soft); }
.vn-visa-entrybox-good { background: var(--vn-jade-soft); border-color: #bcdcd1; }
.vn-visa-entrybox-good h4 { color: var(--vn-jade); }

/* ---- exemption programmes ---- */
.vn-visa-programme {
    padding: 14px;
    margin: 12px 0;
    border: 1px solid var(--vn-line);
    border-radius: 13px;
    background: var(--vn-paper);
}
.vn-visa-programme-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.vn-visa-programme-head h4 { margin: 0 !important; }
.vn-visa-programme-window {
    margin: 6px 0 10px !important;
    font-size: .8rem !important;
    font-weight: 700;
    color: var(--vn-ink-soft) !important;
}
.vn-visa-countries {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.vn-visa-countries li {
    padding: 5px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vn-line);
    font-size: .81rem;
    font-weight: 600;
}
.vn-visa-countries-africa li { padding: 0; border: 0; background: none; }
.vn-visa-countries-africa button {
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--vn-line);
    background: #fff;
    font-family: inherit;
    font-size: .81rem;
    font-weight: 600;
    color: var(--vn-ink);
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.vn-visa-countries-africa button:hover {
    background: var(--vn-jade);
    border-color: var(--vn-jade);
    color: #fff;
}
.vn-visa-countries-africa button:focus-visible {
    outline: 3px solid var(--vn-terracotta);
    outline-offset: 2px;
}

/* ---- gates ---- */
.vn-visa-gates { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 720px) {
    .vn-visa-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vn-visa-gates li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid var(--vn-line);
    border-radius: 11px;
    background: var(--vn-paper);
    min-width: 0;
}
.vn-visa-gates i { flex: 0 0 auto; color: var(--vn-jade); font-size: .84rem; }
.vn-visa-gates span { min-width: 0; }
.vn-visa-gates strong { display: block; font-size: .87rem; font-weight: 700; }
.vn-visa-gates small { display: block; font-size: .78rem; color: var(--vn-ink-soft); }

/* ---- the visa-run timeline ---- */
.vn-visa-timeline-steps { list-style: none; margin: 14px 0; padding: 0; counter-reset: vnvstep; }
.vn-visa-timeline-steps li {
    position: relative;
    padding: 0 0 18px 40px;
    counter-increment: vnvstep;
}
.vn-visa-timeline-steps li::before {
    content: counter(vnvstep);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--vn-ink);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}
.vn-visa-timeline-steps li::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 31px;
    bottom: 4px;
    width: 2px;
    background: var(--vn-line);
}
.vn-visa-timeline-steps li:last-child { padding-bottom: 0; }
.vn-visa-timeline-steps li:last-child::after { display: none; }
.vn-visa-timeline-steps strong { display: block; font-size: .9rem; margin-bottom: 3px; }
.vn-visa-timeline-steps p { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--vn-ink-soft); }

/* ---- neighbours ---- */
.vn-visa-neighbours {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 12px 0;
}
@media (min-width: 720px) {
    .vn-visa-neighbours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vn-visa-neighbour {
    padding: 12px 14px;
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    background: var(--vn-paper);
    min-width: 0;
}
.vn-visa-neighbour strong { display: block; font-size: .9rem; margin-bottom: 4px; }
.vn-visa-neighbour p { margin: 0; font-size: .85rem; line-height: 1.58; color: var(--vn-ink-soft); }

/* ---- footer ---- */
.vn-visa-foot {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--vn-line);
}
.vn-visa-foot p { margin: 0 0 7px; font-size: .84rem; line-height: 1.6; color: var(--vn-ink-soft); }
.vn-visa-foot i { color: var(--vn-jade); margin-right: 5px; }

@media (max-width: 420px) {
    .vn-visa-checker { padding: 20px 13px 14px; }
    .vn-visa-card > summary { padding: 13px; gap: 10px; }
    .vn-visa-card-body { padding: 4px 13px 16px; }
    .vn-visa-fact, .vn-visa-callout, .vn-visa-pending { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   YOUR NEXT TRIP

   Replaced a row of unexplained name pills. The pills were
   cheap to build and useless to read: nine words, no way to
   tell Sapa from the Mekong Delta, and a heading about our
   publishing schedule rather than the reader's trip.

   Same phone-first rules as the rest of the file — no fixed
   widths, every grid track minmax(0, 1fr), rows that wrap.
   ============================================================ */

.vn-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 4px 0 20px;
}
@media (min-width: 900px) {
    /* Two columns of closed cards. Open ones span, because the fit
       columns inside need the room and a half-width open card next to
       a closed one reads as a layout bug. */
    .vn-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vn-next-item[open] { grid-column: 1 / -1; }
}

.vn-next-item {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    overflow: hidden;
    min-width: 0;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.vn-next-item:hover { border-color: var(--vn-jade); }
.vn-next-item[open] { box-shadow: 0 12px 32px rgba(27, 36, 56, .09); }

.vn-next-item > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    cursor: pointer;
    list-style: none;
}
.vn-next-item > summary::-webkit-details-marker { display: none; }
.vn-next-item > summary:focus-visible {
    outline: 3px solid var(--vn-terracotta);
    outline-offset: -3px;
}

.vn-next-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--vn-jade-soft);
    color: var(--vn-jade);
    font-size: .92rem;
}
.vn-next-item[open] .vn-next-icon { background: var(--vn-jade); color: #fff; }

.vn-next-head { flex: 1 1 auto; min-width: 0; }
.vn-next-head strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.vn-next-head small {
    display: block;
    margin-top: 2px;
    font-size: .83rem;
    line-height: 1.45;
    color: var(--vn-ink-soft);
}

.vn-next-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vn-next-kind {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--vn-paper-warm);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    white-space: nowrap;
}
.vn-next-meta i {
    font-size: .8rem;
    color: var(--vn-ink-soft);
    transition: transform .22s ease;
}
.vn-next-item[open] .vn-next-meta i { transform: rotate(180deg); }

/* The tag is the first thing to go when the card gets narrow — it is
   orientation, and the place name is the content. */
@media (max-width: 460px) {
    .vn-next-kind { display: none; }
    .vn-next-item > summary { padding: 13px; gap: 10px; }
}

.vn-next-body {
    padding: 4px 15px 16px;
    border-top: 1px solid var(--vn-line);
}
.vn-next-what {
    margin: 14px 0 0;
    font-size: .93rem;
    line-height: 1.68;
    color: var(--vn-ink);
}

.vn-next-days {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 14px 0;
    padding: 11px 13px;
    border-radius: 11px;
    background: var(--vn-paper-warm);
    font-size: .87rem;
    line-height: 1.55;
    color: var(--vn-ink-soft);
}
.vn-next-days i { color: var(--vn-terracotta); }
.vn-next-days strong { color: var(--vn-ink); }
.vn-next-days span { flex: 1 1 12ch; min-width: 0; }

/* Go / maybe not. The same two-column honesty device the destination
   page uses for "is it for you", so the pattern reads the same in both
   places rather than being reinvented. */
.vn-next-fit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 14px 0;
}
@media (min-width: 640px) {
    .vn-next-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vn-next-col {
    padding: 13px;
    border-radius: 12px;
    border: 1px solid var(--vn-line);
    background: var(--vn-paper);
    min-width: 0;
}
.vn-next-col h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.vn-next-col ul { margin: 0; padding-left: 18px; }
.vn-next-col li {
    font-size: .86rem;
    line-height: 1.58;
    color: var(--vn-ink-soft);
    margin-bottom: 7px;
}
.vn-next-col li:last-child { margin-bottom: 0; }
.vn-next-yes { background: var(--vn-jade-soft); border-color: #bcdcd1; }
.vn-next-yes h4 { color: var(--vn-jade); }
.vn-next-no { background: #fdf3ee; border-color: #eec9b8; }
.vn-next-no h4 { color: var(--vn-terracotta); }

.vn-next-thing {
    padding: 13px;
    margin: 14px 0;
    border-radius: 12px;
    border: 1px solid var(--vn-line);
    border-left: 3px solid var(--vn-gold);
    background: #fffaf0;
}
.vn-next-thing strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a5a08;
}
.vn-next-thing i { color: var(--vn-gold); }
.vn-next-thing p {
    margin: 8px 0 0;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--vn-ink);
}

.vn-next-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    padding-top: 12px;
    border-top: 1px solid var(--vn-line);
}
.vn-next-pairs {
    margin: 0;
    flex: 1 1 16ch;
    min-width: 0;
    font-size: .83rem;
    line-height: 1.55;
    color: var(--vn-ink-soft);
}
.vn-next-pairs i { color: var(--vn-jade); margin-right: 5px; }
.vn-next-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--vn-ink);
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
    transition: background .16s ease;
}
.vn-next-link:hover { background: var(--vn-jade); color: #fff; }
.vn-next-link:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: 2px; }

/* The basis line. This block is editorial judgement rather than sourced
   research, and the page has to say so where the claims are, not in a
   footer nobody reaches. */
.vn-next-basis {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0;
    max-width: 74ch;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
}
.vn-next-basis i { margin-top: 3px; color: var(--vn-jade); }

/* Single-place variant on the coming-soon page: no summary to open, so
   the card is just the body. */
.vn-next-solo {
    display: block;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    margin-bottom: 18px;
}
.vn-next-solo .vn-next-body { border-top: 0; padding: 4px 16px 16px; }

/* ============================================================
   WHERE TO STAY — the decision engine

   Same phone-first rules as the rest of the file. What is new
   here is the ANIMATION VOCABULARY, which had to be rebuilt
   rather than extended, because the section went from "eight
   cards and a map" to "a matcher whose output changes as you
   tap".

   Three ideas govern it:

   1  Motion carries meaning or it does not happen. Score bars
      grow from zero because the growth IS the comparison. The
      map pulses on selection because the pulse is the answer to
      "which one did I just press". Nothing fades in merely to
      look expensive.

   2  Everything decorative is gated behind [data-motion="on"],
      the attribute the motion layer sets only after it has
      confirmed it can finish. No script means no animation and
      a fully readable section — never a section stuck at
      opacity 0. See the reveal block above.

   3  Results animate on ARRIVAL, not on every keystroke. The
      matcher re-runs on each tap, and re-playing a stagger four
      times in two seconds is nausea, not delight — so the
      stagger is keyed to the result set, and a re-rank that
      returns the same areas just moves them.
   ============================================================ */

.vn-stay { max-width: 1120px; margin: 0 auto; }

/* ---- the administrative note, collapsed by default ---- */
.vn-stay-admin {
    background: var(--vn-jade-soft);
    border: 1px solid #bcdcd1;
    border-radius: 14px;
    margin: 0 0 22px;
    overflow: hidden;
}
.vn-stay-admin > summary {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 15px;
    cursor: pointer;
    list-style: none;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--vn-ink);
}
.vn-stay-admin > summary::-webkit-details-marker { display: none; }
.vn-stay-admin > summary > i:first-child { color: var(--vn-jade); margin-top: 3px; }
.vn-stay-admin > summary > span { flex: 1 1 auto; min-width: 0; }
.vn-stay-admin-chev { color: var(--vn-jade); margin-top: 3px; transition: transform .3s ease; }
.vn-stay-admin[open] .vn-stay-admin-chev { transform: rotate(180deg); }
.vn-stay-admin-body { padding: 0 15px 16px; }
.vn-stay-admin-body p { margin: 0 0 10px; font-size: .87rem; line-height: 1.66; color: var(--vn-ink-soft); }
.vn-stay-shared { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.vn-stay-shared li {
    padding: 10px 12px;
    background: #fff;
    border-radius: 11px;
    font-size: .85rem;
    line-height: 1.58;
    color: var(--vn-ink-soft);
}
.vn-stay-shared strong { display: block; color: var(--vn-ink); margin-bottom: 2px; }

/* ---- the matcher ---- */
.vn-stay-matcher {
    position: relative;
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 20px;
    padding: 22px 16px 18px;
    margin: 0 0 22px;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(27, 36, 56, .09);
}
.vn-stay-matcher::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta), var(--vn-gold));
}
.vn-stay-kicker {
    margin: 0 0 5px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vn-terracotta);
}
.vn-stay-matcher h3 { font-size: 1.28rem; margin: 0 0 7px; letter-spacing: -.02em; }
.vn-stay-intro { margin: 0 0 16px; font-size: .89rem; line-height: 1.58; color: var(--vn-ink-soft); }
.vn-stay-sublabel {
    margin: 18px 0 9px;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--vn-ink-soft);
}

/* ---- chips ---- */
.vn-stay-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.vn-stay-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid var(--vn-line);
    border-radius: 999px;
    background: var(--vn-paper);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 700;
    color: var(--vn-ink-soft);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease,
                transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.vn-stay-chip i { font-size: .8rem; color: var(--vn-terracotta); transition: color .2s ease; }
.vn-stay-chip:hover { border-color: var(--vn-jade); color: var(--vn-jade); transform: translateY(-2px); }
.vn-stay-chip:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: 2px; }
.vn-stay-chip[aria-pressed="true"] {
    background: var(--vn-ink);
    border-color: var(--vn-ink);
    color: #fff;
    /* The spring is the feedback. A chip that just changes colour reads as a
       filter; one that pops reads as a choice being taken. */
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 16px rgba(27, 36, 56, .24);
}
.vn-stay-chip[aria-pressed="true"] i { color: var(--vn-gold); }
.vn-stay-chips-small .vn-stay-chip { min-height: 38px; padding: 7px 13px; font-size: .79rem; }

/* The ranking badge on a priority chip. Empty until chosen, so the strip
   does not look pre-filled with numbers nobody picked. */
.vn-stay-rank {
    display: none;
    place-items: center;
    width: 19px;
    height: 19px;
    margin-right: -2px;
    border-radius: 50%;
    background: var(--vn-gold);
    color: var(--vn-ink);
    font-size: .64rem;
    font-weight: 800;
}
.vn-stay-chip[aria-pressed="true"] .vn-stay-rank { display: grid; }

.vn-stay-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    margin-top: 16px;
}
@media (min-width: 640px) {
    .vn-stay-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vn-stay-field { min-width: 0; }
.vn-stay-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}
.vn-stay-field > label span { letter-spacing: .04em; text-transform: none; opacity: .7; }
.vn-stay-field select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    background: var(--vn-paper);
    font-family: inherit;
    font-size: .93rem;
    font-weight: 600;
    color: var(--vn-ink);
}
.vn-stay-field select:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: -1px; }

/* ---- results ---- */
.vn-stay-results { margin: 18px 0 14px; display: grid; gap: 10px; }
.vn-stay-idle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 20px 16px;
    border: 1px dashed var(--vn-line);
    border-radius: 14px;
    font-size: .9rem;
    color: var(--vn-ink-soft);
}
.vn-stay-idle i { color: var(--vn-jade); }

.vn-stay-hit {
    display: grid;
    gap: 10px;
    padding: 14px 15px;
    border: 1px solid var(--vn-line);
    border-radius: 15px;
    background: #fff;
}
.vn-stay-hit:first-child { border-color: var(--vn-jade); background: linear-gradient(160deg, var(--vn-jade-soft), #fff 70%); }
.vn-stay-hit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.vn-stay-hit-rank {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--vn-ink);
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
}
.vn-stay-hit-name { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.vn-stay-hit-official { font-size: .78rem; font-weight: 700; color: var(--vn-ink-soft); }
.vn-stay-hit-pct {
    margin-left: auto;
    font-size: .82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--vn-jade);
    white-space: nowrap;
}
.vn-stay-hit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.vn-stay-hit li { font-size: .85rem; line-height: 1.55; color: var(--vn-ink-soft); }
.vn-stay-hit li::before { content: '→ '; color: var(--vn-jade); font-weight: 800; }
.vn-stay-hit .vn-stay-hit-warn li::before { content: '! '; color: var(--vn-terracotta); }
.vn-stay-hit-link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--vn-ink);
    color: #fff;
    font-size: .81rem;
    font-weight: 800;
    text-decoration: none;
    transition: background .18s ease, gap .18s ease;
}
.vn-stay-hit-link:hover { background: var(--vn-jade); color: #fff; gap: 11px; }

/* The airport verdict, when the flights make it a real question. */
.vn-stay-airport {
    padding: 13px 15px;
    border-radius: 13px;
    border: 1px solid #ecd5a8;
    background: #fff5e6;
}
.vn-stay-airport strong { display: block; font-size: .9rem; margin-bottom: 5px; }
.vn-stay-airport p { margin: 0 0 5px; font-size: .85rem; line-height: 1.58; color: var(--vn-ink-soft); }
.vn-stay-airport.is-yes { border-color: var(--vn-jade); background: var(--vn-jade-soft); }
.vn-stay-airport.is-no { border-color: var(--vn-line); background: var(--vn-paper); }

.vn-stay-basis,
.vn-stay-fine {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0;
    font-size: .81rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
}
.vn-stay-basis i { margin-top: 3px; color: var(--vn-jade); }

/* ---- comparison tray ---- */
.vn-stay-compare {
    background: #fff;
    border: 1px solid var(--vn-ink);
    border-radius: 18px;
    padding: 16px;
    margin: 0 0 22px;
    box-shadow: 0 14px 34px rgba(27, 36, 56, .12);
}
.vn-stay-compare-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.vn-stay-compare-head h3 { margin: 0; font-size: 1.05rem; }
.vn-stay-compare-body { overflow-x: auto; }
.vn-stay-ctable { width: 100%; border-collapse: collapse; min-width: 420px; }
.vn-stay-ctable th, .vn-stay-ctable td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid var(--vn-line);
    font-size: .83rem;
    vertical-align: top;
}
.vn-stay-ctable thead th {
    font-size: .74rem;
    font-weight: 800;
    color: var(--vn-ink);
    border-bottom: 2px solid var(--vn-ink);
}
.vn-stay-ctable thead th small { display: block; font-weight: 700; color: var(--vn-ink-soft); }
.vn-stay-ctable tbody th { font-weight: 700; color: var(--vn-ink-soft); white-space: nowrap; }
.vn-stay-ctable td { color: var(--vn-ink); font-variant-numeric: tabular-nums; }

/* ---- group headings ---- */
.vn-stay-group {
    margin: 32px 0 6px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vn-terracotta);
}
.vn-stay-group::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 8px;
    background: var(--vn-line);
}
.vn-stay-grouplede { margin: 0 0 14px; font-size: .88rem; color: var(--vn-ink-soft); }

/* ---- area cards ---- */
.vn-stay-areas { display: grid; gap: 10px; }
@media (min-width: 940px) {
    .vn-stay-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .vn-stay-area[open] { grid-column: 1 / -1; }
}
.vn-stay-area {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 16px;
    overflow: hidden;
    min-width: 0;
    transition: border-color .2s ease, box-shadow .22s ease;
}
.vn-stay-area:hover { border-color: var(--vn-jade); }
.vn-stay-area[open] { border-color: var(--vn-jade); box-shadow: 0 12px 32px rgba(27, 36, 56, .1); }
.vn-stay-area.is-match { border-color: var(--vn-gold); box-shadow: 0 0 0 2px rgba(224, 163, 64, .3); }
.vn-stay-area > summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 15px;
    cursor: pointer;
    list-style: none;
}
.vn-stay-area > summary::-webkit-details-marker { display: none; }
.vn-stay-area > summary:focus-visible { outline: 3px solid var(--vn-terracotta); outline-offset: -3px; }
.vn-stay-area-head { flex: 1 1 auto; min-width: 0; }
.vn-stay-area-head strong { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.vn-stay-official {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--vn-ink-soft);
}
.vn-stay-identity {
    display: block;
    margin-top: 5px;
    font-size: .83rem;
    line-height: 1.45;
    color: var(--vn-terracotta);
    font-weight: 700;
}
.vn-stay-area-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.vn-stay-metro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--vn-jade-soft);
    color: var(--vn-jade);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    white-space: nowrap;
}
.vn-stay-area-meta > i { font-size: .8rem; color: var(--vn-ink-soft); transition: transform .26s ease; }
.vn-stay-area[open] .vn-stay-area-meta > i { transform: rotate(180deg); }

.vn-stay-area-body { padding: 4px 15px 16px; border-top: 1px solid var(--vn-line); }
.vn-stay-summary { margin: 14px 0; font-size: .91rem; line-height: 1.68; color: var(--vn-ink-soft); }

.vn-stay-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 14px 0; }
@media (min-width: 640px) { .vn-stay-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-stay-col { padding: 12px; border-radius: 12px; border: 1px solid var(--vn-line); min-width: 0; }
.vn-stay-col h5 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px; font-size: .82rem; font-weight: 800;
}
.vn-stay-col ul { margin: 0; padding-left: 17px; }
.vn-stay-col li { font-size: .85rem; line-height: 1.56; color: var(--vn-ink-soft); margin-bottom: 6px; }
.vn-stay-col li:last-child { margin-bottom: 0; }
.vn-stay-yes { background: var(--vn-jade-soft); border-color: #bcdcd1; }
.vn-stay-yes h5 { color: var(--vn-jade); }
.vn-stay-no { background: #fdf3ee; border-color: #eec9b8; }
.vn-stay-no h5 { color: var(--vn-terracotta); }

/* ---- score bars ----
   The growth is the comparison, so the bar starts at zero width and is
   driven to --w only once the card is open and on screen. `is-measured`
   marks the one dimension that is a fact rather than a view. */
.vn-stay-scores { display: grid; gap: 7px; margin: 16px 0; }
.vn-stay-score {
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.vn-stay-score-label { font-size: .78rem; font-weight: 700; color: var(--vn-ink-soft); }
.vn-stay-score-track {
    position: relative;
    display: block;
    height: 7px;
    border-radius: 999px;
    background: rgba(27, 36, 56, .07);
    overflow: hidden;
}
.vn-stay-score-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--w);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta));
}
.vn-stay-score-fill.is-measured {
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-jade));
}
.vn-stay-score-num {
    font-size: .76rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--vn-ink);
    white-space: nowrap;
}
.vn-stay-score-num small { font-weight: 700; color: var(--vn-ink-soft); }
@media (max-width: 460px) {
    .vn-stay-score { grid-template-columns: minmax(0, 7em) minmax(0, 1fr) auto; gap: 8px; }
    .vn-stay-score-label { font-size: .73rem; }
}

.vn-stay-detail { margin: 14px 0; display: grid; gap: 9px; }
.vn-stay-detail > div { display: flex; flex-wrap: wrap; gap: 3px 10px; }
.vn-stay-detail dt {
    flex: 0 0 auto;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    min-width: 9em;
}
.vn-stay-detail dd { flex: 1 1 14ch; margin: 0; font-size: .85rem; line-height: 1.55; color: var(--vn-ink); }

.vn-stay-street {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    margin: 14px 0;
    border-radius: 12px;
    border-left: 3px solid var(--vn-gold);
    background: #fffaf0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
}
.vn-stay-street i { color: var(--vn-gold); margin-top: 3px; }
.vn-stay-street strong { color: var(--vn-ink); }

.vn-stay-actions { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 12px; border-top: 1px solid var(--vn-line); }
.vn-stay-compare-btn, .vn-stay-buddy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--vn-line);
    background: var(--vn-paper);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 800;
    color: var(--vn-ink);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.vn-stay-compare-btn:hover, .vn-stay-buddy:hover {
    background: var(--vn-jade); border-color: var(--vn-jade); color: #fff;
}
.vn-stay-compare-btn[aria-pressed="true"] {
    background: var(--vn-ink); border-color: var(--vn-ink); color: #fff;
}

/* ---- practical cards ---- */
.vn-stay-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 780px) { .vn-stay-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-stay-card {
    padding: 15px;
    border: 1px solid var(--vn-line);
    border-radius: 15px;
    background: #fff;
    min-width: 0;
}
.vn-stay-card h4 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 10px; font-size: .95rem; font-weight: 800;
}
.vn-stay-card h4 i { color: var(--vn-terracotta); }
.vn-stay-card p { margin: 0 0 9px; font-size: .87rem; line-height: 1.66; color: var(--vn-ink-soft); }
.vn-stay-card p:last-child { margin-bottom: 0; }
.vn-stay-warn {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fdf0eb;
    color: var(--vn-ink) !important;
    font-weight: 600;
}
.vn-stay-regrets { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.vn-stay-regrets li { font-size: .86rem; line-height: 1.6; color: var(--vn-ink-soft); }
.vn-stay-regrets strong { display: block; color: var(--vn-ink); margin-bottom: 2px; }

/* ---- market figures ---- */
.vn-stay-market { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 780px) { .vn-stay-market { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-stay-stat {
    padding: 14px;
    border: 1px solid var(--vn-line);
    border-radius: 14px;
    background: var(--vn-paper);
    min-width: 0;
}
.vn-stay-stat > strong { display: block; font-size: .96rem; line-height: 1.45; margin-bottom: 8px; }
.vn-stay-scope { margin: 0 0 8px; font-size: .8rem; line-height: 1.58; color: var(--vn-ink-soft); }
.vn-stay-scope span {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--vn-ink);
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.vn-stay-stat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 0; }
.vn-stay-stat-meta a { font-size: .74rem; font-weight: 700; color: var(--vn-jade); }

.vn-stay-callout {
    padding: 13px 15px;
    margin: 0 0 14px;
    border-radius: 13px;
    border: 1px solid var(--vn-line);
    background: var(--vn-paper);
}
.vn-stay-callout strong { display: block; font-size: .91rem; }
.vn-stay-callout p { margin: 7px 0 0; font-size: .86rem; line-height: 1.62; color: var(--vn-ink-soft); }
.vn-stay-callout-warn { background: #fff5e6; border-color: #ecd5a8; }

/* ---- the gaps we publish on purpose ---- */
.vn-stay-gaps {
    padding: 15px;
    border: 1px dashed var(--vn-line);
    border-radius: 15px;
    background: var(--vn-paper);
}
.vn-stay-gaps h4 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 11px; font-size: .9rem; font-weight: 800;
}
.vn-stay-gaps h4 i { color: var(--vn-ink-soft); }
.vn-stay-gap p { margin: 0 0 11px; font-size: .85rem; line-height: 1.64; color: var(--vn-ink-soft); }
.vn-stay-gap:last-child p { margin-bottom: 0; }

.vn-stay-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--vn-line); }
.vn-stay-foot p { margin: 0; font-size: .83rem; line-height: 1.6; color: var(--vn-ink-soft); }
.vn-stay-foot i { color: var(--vn-jade); margin-right: 5px; }

@media (max-width: 420px) {
    .vn-stay-matcher { padding: 20px 13px 15px; }
    .vn-stay-area > summary { padding: 13px; gap: 10px; }
    .vn-stay-area-body { padding: 4px 13px 15px; }
    .vn-stay-card, .vn-stay-stat, .vn-stay-gaps { padding: 13px; }
}

/* ============================================================
   STAY — motion

   All of it gated. The reveal attribute is set by vn-motion.js
   only after it has confirmed it can finish the job, so a
   blocked script costs the reader the animation and nothing
   else. Every rule below therefore lives inside
   .vn[data-motion="on"] — none of them may hide anything on
   their own. See the reveal block near the top of this file.
   ============================================================ */

@keyframes vnStayRise {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes vnStayGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes vnStayPing {
    0%   { box-shadow: 0 0 0 0 rgba(31, 122, 99, .5); }
    100% { box-shadow: 0 0 0 14px rgba(31, 122, 99, 0); }
}

/* Results arrive staggered. --i is set per card by the script and capped,
   so a twenty-area list never becomes a two-second wait. */
.vn[data-motion="on"] .vn-stay-hit {
    animation: vnStayRise .44s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}
.vn[data-motion="on"] .vn-stay-airport {
    animation: vnStayRise .44s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .12s;
}

/* Score bars grow from the left. transform-origin matters: scaling from the
   centre would read as a pulse rather than a measurement. */
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-score-fill {
    transform-origin: left center;
    animation: vnStayGrow .62s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--row, 0) * 45ms);
}
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-summary,
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-split,
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-detail {
    animation: vnStayRise .4s cubic-bezier(.22, 1, .36, 1) both;
}
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-split { animation-delay: .06s; }
.vn[data-motion="on"] .vn-stay-area[open] .vn-stay-detail { animation-delay: .12s; }

/* A matched area gets one ring when the ranking names it, so the connection
   between the result list and the card below it is visible rather than
   implied. */
.vn[data-motion="on"] .vn-stay-area.is-match { animation: vnStayPing .9s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .vn[data-motion="on"] .vn-stay-hit,
    .vn[data-motion="on"] .vn-stay-airport,
    .vn[data-motion="on"] .vn-stay-area[open] .vn-stay-score-fill,
    .vn[data-motion="on"] .vn-stay-area[open] .vn-stay-summary,
    .vn[data-motion="on"] .vn-stay-area[open] .vn-stay-split,
    .vn[data-motion="on"] .vn-stay-area[open] .vn-stay-detail,
    .vn[data-motion="on"] .vn-stay-area.is-match { animation: none; }
    .vn-stay-chip, .vn-stay-area, .vn-stay-compare-btn { transition: none; }
    .vn-stay-chip:hover { transform: none; }
    .vn-stay-chip[aria-pressed="true"] { transform: none; }
}

/* ---- the map, reworked ----
   It was a static diagram. It is now a control: the selected area rings,
   the others recede, and the ring is what tells you the press registered. */
@keyframes vnMapPulse {
    0%   { r: var(--r); opacity: .55; }
    100% { r: calc(var(--r) * 2.1); opacity: 0; }
}
.vn-area circle { transition: fill .24s ease, stroke-width .24s ease, r .3s cubic-bezier(.34, 1.56, .64, 1); }
.vn-area:hover circle { r: calc(var(--r, 16px) * 1.06); }
/* r:0, not opacity:0. The distinction is the whole safety rule: a
   transparent ring is a hidden element, and the stylesheet is not allowed to
   hide things on its own in case the script never runs. A zero-radius circle
   has no geometry to hide — it draws nothing because there is nothing to
   draw, and the keyframes supply both the radius and the fade. */
.vn-map .vn-area-ring {
    fill: none;
    stroke: var(--vn-jade);
    stroke-width: 2;
    r: 0;
    pointer-events: none;
}
.vn[data-motion="on"] .vn-area.is-active .vn-area-ring {
    animation: vnMapPulse 1.1s cubic-bezier(.22, 1, .36, 1);
}
.vn-map .vn-area:not(.is-active) { transition: opacity .24s ease; }
.vn-map:hover .vn-area:not(.is-active):not(:hover) { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    .vn[data-motion="on"] .vn-area.is-active .vn-area-ring { animation: none; }
    .vn-area circle { transition: none; }
    .vn-map:hover .vn-area:not(.is-active):not(:hover) { opacity: 1; }
}

/* ============================================================
   PHOTOGRAPHY

   Two rules worth stating. The aspect ratio is set on the figure
   and the image fills it, so a photo can never push the page
   around while it loads — the box is the right size before the
   bytes arrive, and --bg holds the picture's own average colour
   so the gap is never a white rectangle.

   The credit is part of the component, not something a caller
   remembers. Small, quiet, and always there.
   ============================================================ */
.vn-photo {
    position: relative;
    margin: 0 0 14px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg, var(--vn-line));
    aspect-ratio: var(--ratio, 16 / 10);
}
.vn-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vn-photo figcaption {
    position: absolute;
    right: 0; bottom: 0;
    display: flex;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 10px 0 0 0;
    background: rgba(16, 26, 46, .62);
    backdrop-filter: blur(4px);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .82);
}
.vn-photo figcaption a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.vn-photo figcaption a:hover { border-bottom-color: #fff; }

/* A dish card with a photo leads with it — the picture is the answer to
   "what am I ordering", and the prose is the answer to "should I". */
.vn-dish.has-photo { padding-top: 0; overflow: hidden; }
.vn-dish.has-photo .vn-photo {
    margin: 0 -20px 14px;
    border-radius: 0;
    aspect-ratio: 16 / 9;
}
@media (max-width: 420px) {
    .vn-dish.has-photo .vn-photo { margin-left: -16px; margin-right: -16px; }
}

/* ============================================================
   PLAN MY VIETNAM — wizard and trip result

   Phone-first, same rules as the rest of the file: every grid
   track minmax(0, 1fr), every row a wrapping flex line, nothing
   sets a floor on its own width.

   One thing specific to this section: MONEY HAS TO BE READABLE.
   Totals are tabular-nums at a size you can read across a room,
   and the low/expected/high triple never collapses into a single
   figure — the range IS the honesty.
   ============================================================ */

/* The site navbar is position:fixed at top:0, and <main> reserves nothing
   for it. With a flat 30px of padding the eyebrow sat entirely underneath
   the bar and the heading lost the top of its letters. Reserve the bar's
   own height and then add the padding on top of it. */
.vn-plan {
    max-width: 900px; margin: 0 auto;
    padding: calc(var(--vn-navbar-h) + 24px) 18px 60px;
}

/* ---- wizard ---- */
.vn-wiz-head { margin-bottom: 20px; }
.vn-wiz-head h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 8px; letter-spacing: -.02em; }
.vn-wiz-bar { height: 4px; border-radius: 999px; background: var(--vn-line); margin: 14px 0 6px; overflow: hidden; }
.vn-wiz-bar span {
    display: block; height: 100%; width: 6%;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-gold), var(--vn-terracotta));
    transition: width .35s cubic-bezier(.22, 1, .36, 1);
}
.vn-wiz-count { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vn-ink-soft); }

.vn-wiz-step {
    border: 1px solid var(--vn-line); border-radius: 18px;
    background: #fff; padding: 18px 16px; margin: 18px 0;
}
.vn-wiz-step legend {
    padding: 0 8px; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em;
}
.vn-wiz-help { margin: 4px 0 14px; font-size: .87rem; line-height: 1.55; color: var(--vn-ink-soft); }
.vn-wiz-note { margin: 10px 0 0; font-size: .79rem; line-height: 1.55; color: var(--vn-ink-soft); }

.vn-wiz-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 560px) { .vn-wiz-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-wiz-field { display: block; min-width: 0; }
.vn-wiz-field > span {
    display: block; margin-bottom: 6px; font-size: .66rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--vn-ink-soft);
}
.vn-wiz-field input, .vn-wiz-field select {
    width: 100%; min-width: 0; min-height: 48px; padding: 12px 13px;
    border: 1px solid var(--vn-line); border-radius: 12px;
    background: var(--vn-paper); font-family: inherit; font-size: .96rem;
    font-weight: 600; color: var(--vn-ink);
}
.vn-wiz-field input:focus-visible, .vn-wiz-field select:focus-visible {
    outline: 3px solid var(--vn-terracotta); outline-offset: -1px;
}
.vn-wiz-check { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: .9rem; font-weight: 600; }
.vn-wiz-check input { width: 18px; height: 18px; accent-color: var(--vn-jade); }

.vn-wiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
@media (min-width: 640px) { .vn-wiz-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vn-wiz-opts-wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .vn-wiz-opts-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-wiz-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.vn-wiz-opt input {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.vn-wiz-opt-body {
    display: flex; flex-direction: column; gap: 5px;
    min-height: 76px; padding: 13px;
    border: 1px solid var(--vn-line); border-radius: 14px;
    background: var(--vn-paper);
    transition: border-color .18s ease, background .18s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.vn-wiz-opt-body i { font-size: 1rem; color: var(--vn-terracotta); }
.vn-wiz-opt-body strong { font-size: .92rem; font-weight: 800; }
.vn-wiz-opt-body small { font-size: .8rem; line-height: 1.45; color: var(--vn-ink-soft); }
.vn-wiz-opt:hover .vn-wiz-opt-body { border-color: var(--vn-jade); transform: translateY(-2px); }
.vn-wiz-opt input:checked + .vn-wiz-opt-body {
    border-color: var(--vn-ink); background: var(--vn-ink); color: #fff;
    box-shadow: 0 8px 20px rgba(27, 36, 56, .22);
}
.vn-wiz-opt input:checked + .vn-wiz-opt-body i { color: var(--vn-gold); }
.vn-wiz-opt input:checked + .vn-wiz-opt-body small { color: rgba(255,255,255,.76); }
.vn-wiz-opt input:focus-visible + .vn-wiz-opt-body { outline: 3px solid var(--vn-terracotta); outline-offset: 2px; }

.vn-wiz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vn-wiz-chip { position: relative; cursor: pointer; }
.vn-wiz-chip input {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.vn-wiz-chip span {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 15px;
    border: 1px solid var(--vn-line); border-radius: 999px;
    background: var(--vn-paper); font-size: .85rem; font-weight: 700;
    color: var(--vn-ink-soft);
    transition: background .18s ease, color .18s ease, border-color .18s ease,
                transform .2s cubic-bezier(.34,1.56,.64,1);
}
.vn-wiz-chip span i { font-size: .82rem; color: var(--vn-terracotta); }
.vn-wiz-chip:hover span { border-color: var(--vn-jade); color: var(--vn-jade); transform: translateY(-2px); }
.vn-wiz-chip input:checked + span {
    background: var(--vn-ink); border-color: var(--vn-ink); color: #fff;
    transform: translateY(-2px) scale(1.02);
}
.vn-wiz-chip input:checked + span i { color: var(--vn-gold); }
.vn-wiz-chip input:focus-visible + span { outline: 3px solid var(--vn-terracotta); outline-offset: 2px; }

.vn-wiz-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.vn-wiz-notice, .vn-trip-notice {
    display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0;
    font-size: .81rem; line-height: 1.58; color: var(--vn-ink-soft);
}

/* ---- the trip ---- */
.vn-trip-head h1 { font-size: clamp(1.4rem, 3.2vw, 2rem); margin: 0 0 8px; letter-spacing: -.02em; line-height: 1.22; }

/* The route reads as one sentence, so it wraps as one — but the arrows must
   never start a line, and a place name must never break across two.
   NB: -stop is already the stops-list card further down this file, hence
   -city here. Same word, different thing. */
.vn-trip-route { display: block; text-wrap: balance; }
.vn-trip-city { white-space: nowrap; }
.vn-trip-hop { color: var(--vn-ink-soft); font-weight: 400; }
/* Saigon is where every route begins. Weight and colour say so without
   adding a word of explanation. */
.vn-trip-city.is-home { font-weight: 900; color: var(--vn-terracotta); }
.vn-trip-h {
    margin: 34px 0 12px; font-size: .72rem; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase; color: var(--vn-terracotta);
}
.vn-trip-h::after { content: ''; display: block; height: 1px; margin-top: 8px; background: var(--vn-line); }

.vn-trip-total {
    padding: 20px 16px; border-radius: 20px;
    border: 1px solid var(--vn-line);
    background: linear-gradient(160deg, var(--vn-jade-soft), #fff 65%);
    margin-bottom: 8px;
}
.vn-trip-total-label {
    margin: 0 0 4px; font-size: .64rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--vn-jade);
}
.vn-trip-total-figure {
    margin: 0; font-size: clamp(1.7rem, 6vw, 2.6rem); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.vn-trip-total-fx { margin: 4px 0 0; font-size: .86rem; color: var(--vn-ink-soft); }
.vn-trip-range { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.vn-trip-range span {
    flex: 1 1 8rem; display: flex; flex-direction: column; gap: 2px;
    padding: 9px 12px; border-radius: 12px; background: #fff;
    border: 1px solid var(--vn-line);
    font-size: .7rem; font-weight: 700; color: var(--vn-ink-soft);
}
.vn-trip-range b { font-size: .95rem; color: var(--vn-ink); font-variant-numeric: tabular-nums; }
.vn-trip-verdict {
    margin: 14px 0 0; padding: 11px 13px; border-radius: 12px;
    font-size: .88rem; line-height: 1.55; font-weight: 600;
    background: var(--vn-paper); border: 1px solid var(--vn-line);
}
.vn-trip-verdict.is-over { background: #fdf0eb; border-color: #eec4b2; }
.vn-trip-verdict.is-tight { background: #fff5e6; border-color: #ecd5a8; }
.vn-trip-verdict.is-comfortable, .vn-trip-verdict.is-on-track { background: var(--vn-jade-soft); border-color: #bcdcd1; }

.vn-trip-stops { display: grid; gap: 8px; }
.vn-trip-leg {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 13px; border-radius: 12px;
    background: var(--vn-paper); border: 1px dashed var(--vn-line);
    font-size: .84rem; line-height: 1.55; color: var(--vn-ink-soft);
}
.vn-trip-leg i { color: var(--vn-terracotta); margin-top: 3px; }
.vn-trip-leg.is-rough { border-color: #ecd5a8; background: #fffaf0; }
.vn-trip-leg em { color: var(--vn-ink); }
.vn-trip-stop { padding: 14px; border: 1px solid var(--vn-line); border-radius: 15px; background: #fff; }
.vn-trip-stop header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.vn-trip-stop h3 { margin: 0; font-size: 1.05rem; }
.vn-trip-nights {
    padding: 3px 10px; border-radius: 999px; background: var(--vn-ink); color: #fff;
    font-size: .68rem; font-weight: 800; letter-spacing: .06em; white-space: nowrap;
}
.vn-trip-why { margin: 7px 0 0; font-size: .85rem; color: var(--vn-terracotta); font-weight: 700; }
.vn-trip-weather { margin: 6px 0 0; font-size: .83rem; color: var(--vn-ink-soft); }
.vn-trip-weather i { color: var(--vn-gold); margin-right: 5px; }
.vn-trip-lines { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.vn-trip-lines span {
    flex: 1 1 7rem; display: flex; flex-direction: column;
    padding: 8px 10px; border-radius: 10px; background: var(--vn-paper);
    font-size: .68rem; font-weight: 700; color: var(--vn-ink-soft);
}
.vn-trip-lines b { font-size: .84rem; color: var(--vn-ink); font-variant-numeric: tabular-nums; }

.vn-trip-excluded { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--vn-paper); border: 1px solid var(--vn-line); }
.vn-trip-excluded h3 { margin: 0 0 9px; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.vn-trip-excluded p { margin: 0 0 7px; font-size: .85rem; line-height: 1.6; color: var(--vn-ink-soft); }

.vn-trip-cats { display: grid; gap: 6px; }
.vn-trip-cat { border: 1px solid var(--vn-line); border-radius: 13px; background: #fff; overflow: hidden; }
.vn-trip-cat > summary {
    display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    cursor: pointer; list-style: none;
}
.vn-trip-cat > summary::-webkit-details-marker { display: none; }
.vn-trip-cat-icon {
    display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: 10px; background: var(--vn-jade-soft); color: var(--vn-jade); font-size: .76rem;
}
.vn-trip-cat-name { flex: 0 0 auto; font-size: .86rem; font-weight: 700; min-width: 7.5em; }
.vn-trip-cat-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(27,36,56,.07); overflow: hidden; min-width: 40px; }
.vn-trip-cat-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--vn-jade), var(--vn-terracotta)); }
.vn-trip-cat-sum { flex: 0 0 auto; font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-trip-cat-body { padding: 0 13px 13px; border-top: 1px solid var(--vn-line); padding-top: 11px; }
.vn-trip-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.vn-trip-money strong { font-size: 1.05rem; }
.vn-trip-money-low, .vn-trip-money-high { font-size: .8rem; color: var(--vn-ink-soft); }
.vn-trip-basis, .vn-trip-conf { margin: 0 0 5px; font-size: .82rem; line-height: 1.6; color: var(--vn-ink-soft); }
.vn-trip-conf b { color: var(--vn-ink); text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }

.vn-trip-advice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 780px) { .vn-trip-advice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-trip-save, .vn-trip-splurge { padding: 14px; border-radius: 15px; border: 1px solid var(--vn-line); background: #fff; min-width: 0; }
.vn-trip-save h3, .vn-trip-splurge h3 { margin: 0 0 10px; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.vn-trip-save h3 i { color: var(--vn-jade); }
.vn-trip-splurge h3 i { color: var(--vn-gold); }
.vn-trip-tip { padding: 10px 0; border-bottom: 1px solid var(--vn-line); }
.vn-trip-tip:last-child { border-bottom: 0; }
.vn-trip-tip strong { font-size: .87rem; }
.vn-trip-tip-amount { float: right; font-size: .84rem; font-weight: 800; color: var(--vn-jade); font-variant-numeric: tabular-nums; }
.vn-trip-tip p { margin: 4px 0 0; font-size: .83rem; line-height: 1.55; color: var(--vn-ink-soft); }

.vn-trip-days { display: grid; gap: 7px; }
.vn-trip-day { border: 1px solid var(--vn-line); border-radius: 13px; background: #fff; overflow: hidden; }
.vn-trip-day > summary { display: flex; align-items: center; gap: 10px; padding: 12px 13px; cursor: pointer; list-style: none; }
.vn-trip-day > summary::-webkit-details-marker { display: none; }
.vn-trip-day > summary strong { flex: 0 0 auto; font-size: .9rem; }
.vn-trip-day > summary small { flex: 1 1 auto; font-size: .78rem; color: var(--vn-terracotta); font-weight: 700; }
.vn-trip-day > summary i { flex: 0 0 auto; font-size: .78rem; color: var(--vn-ink-soft); transition: transform .24s ease; }
.vn-trip-day[open] > summary i { transform: rotate(180deg); }
.vn-trip-slots { list-style: none; margin: 0; padding: 4px 13px 13px; border-top: 1px solid var(--vn-line); }
.vn-trip-slot { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--vn-line); }
.vn-trip-slot:last-child { border-bottom: 0; }
.vn-trip-time { flex: 0 0 3.4em; font-size: .78rem; font-weight: 800; color: var(--vn-ink-soft); font-variant-numeric: tabular-nums; }
.vn-trip-slot .vn-trip-body { flex: 1 1 auto; min-width: 0; display: block; }
.vn-trip-slot .vn-trip-body strong { display: block; font-size: .87rem; }
.vn-trip-slot .vn-trip-body small { display: block; margin-top: 2px; font-size: .79rem; line-height: 1.5; color: var(--vn-ink-soft); }
.vn-trip-slot.is-transport { background: var(--vn-paper); }
.vn-trip-slot.is-meal .vn-trip-time { color: var(--vn-terracotta); }
.vn-trip-slot.is-nightlife .vn-trip-time { color: #6b4fa8; }

.vn-trip-providers { margin-top: 26px; padding: 15px; border: 1px dashed var(--vn-line); border-radius: 15px; background: var(--vn-paper); }
.vn-trip-providers h3 { margin: 0 0 8px; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.vn-trip-providers ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.vn-trip-providers li { padding: 9px 12px; border-radius: 11px; background: #fff; border: 1px solid var(--vn-line); }
.vn-trip-providers li strong { font-size: .85rem; margin-right: 8px; }
.vn-trip-providers li span { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.vn-trip-providers li.is-off span { background: #eef1f7; color: var(--vn-ink-soft); }
.vn-trip-providers li.is-live span { background: var(--vn-jade-soft); color: var(--vn-jade); }
.vn-trip-providers li small { display: block; margin-top: 4px; font-size: .8rem; line-height: 1.5; color: var(--vn-ink-soft); }

.vn-trip-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

@media (prefers-reduced-motion: reduce) {
    .vn-wiz-bar span, .vn-wiz-opt-body, .vn-wiz-chip span, .vn-trip-day > summary i { transition: none; }
    .vn-wiz-opt:hover .vn-wiz-opt-body, .vn-wiz-chip:hover span,
    .vn-wiz-chip input:checked + span { transform: none; }
}

/* ---- the spread: floor to ceiling, first thing on the page ----
   This is the question everybody arrives with and it used to be four
   screens down. Five rows, one bar each, the reader's own level marked.
   Bars start at 6% so the cheapest option is still a visible bar rather
   than an empty track — nothing here is zero. */
.vn-spread {
    padding: 18px 15px 15px; margin-bottom: 12px;
    border: 1px solid var(--vn-ink); border-radius: 20px; background: #fff;
    box-shadow: 0 14px 38px rgba(27, 36, 56, .1);
}
.vn-spread-head h2 { margin: 0 0 4px; font-size: 1.15rem; letter-spacing: -.02em; }
.vn-spread-head p { margin: 0 0 14px; font-size: .85rem; line-height: 1.5; color: var(--vn-ink-soft); }
.vn-spread-rail { display: grid; gap: 6px; }
.vn-spread-row {
    display: grid; align-items: center; gap: 4px 10px;
    grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto;
    padding: 9px 10px; border-radius: 12px; border: 1px solid transparent;
}
.vn-spread-row.is-you { border-color: var(--vn-jade); background: var(--vn-jade-soft); }
.vn-spread-name { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 800; }
.vn-spread-name i { color: var(--vn-terracotta); font-size: .8rem; }
.vn-spread-name b {
    padding: 1px 7px; border-radius: 999px; background: var(--vn-jade); color: #fff;
    font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
}
.vn-spread-bar { height: 8px; border-radius: 999px; background: rgba(27,36,56,.07); overflow: hidden; min-width: 30px; }
.vn-spread-bar span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--vn-jade), var(--vn-gold), var(--vn-terracotta));
}
.vn-spread-sum { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vn-spread-sum b { display: block; font-size: .92rem; font-weight: 800; }
.vn-spread-sum small { display: block; font-size: .7rem; color: var(--vn-ink-soft); }
.vn-spread-feels {
    grid-column: 1 / -1; font-size: .75rem; color: var(--vn-ink-soft);
    padding-left: 2px;
}
.vn-spread-foot {
    margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--vn-line);
    font-size: .82rem; line-height: 1.6; color: var(--vn-ink-soft);
}
@media (max-width: 460px) {
    .vn-spread { padding: 15px 12px 12px; }
    .vn-spread-row { grid-template-columns: minmax(0, 6.2em) minmax(0, 1fr) auto; }
    .vn-spread-name { font-size: .78rem; gap: 5px; }
}

/* ---- folded sections: detail on request, not by default ---- */
.vn-trip-fold {
    margin: 12px 0; border: 1px solid var(--vn-line); border-radius: 15px;
    background: #fff; overflow: hidden;
}
.vn-trip-fold > summary {
    display: flex; align-items: center; gap: 10px; padding: 13px 15px;
    cursor: pointer; list-style: none; font-size: .9rem;
}
.vn-trip-fold > summary::-webkit-details-marker { display: none; }
.vn-trip-fold > summary small { flex: 1 1 auto; font-size: .78rem; color: var(--vn-ink-soft); font-weight: 600; }
.vn-trip-fold > summary > i { margin-left: auto; font-size: .78rem; color: var(--vn-ink-soft); transition: transform .24s ease; }
.vn-trip-fold[open] > summary > i { transform: rotate(180deg); }
.vn-trip-fold > div, .vn-trip-fold > ul, .vn-trip-fold > p {
    padding: 0 15px 15px; border-top: 1px solid var(--vn-line); padding-top: 13px;
}
.vn-trip-fold .vn-trip-cats, .vn-trip-fold .vn-trip-days { padding: 13px 13px 15px; }

/* ---- the optional wizard panel ---- */
.vn-wiz-more {
    margin-top: 16px; border: 1px dashed var(--vn-line); border-radius: 14px;
    background: var(--vn-paper); overflow: hidden;
}
.vn-wiz-more > summary {
    display: flex; align-items: flex-start; gap: 10px; padding: 13px;
    cursor: pointer; list-style: none; font-size: .85rem; line-height: 1.5;
    color: var(--vn-ink-soft);
}
.vn-wiz-more > summary::-webkit-details-marker { display: none; }
.vn-wiz-more > summary > i:first-child { color: var(--vn-jade); margin-top: 2px; }
.vn-wiz-more > summary > span { flex: 1 1 auto; min-width: 0; }
.vn-wiz-more > summary strong { color: var(--vn-ink); }
.vn-wiz-more-chev { margin-top: 2px; transition: transform .24s ease; }
.vn-wiz-more[open] .vn-wiz-more-chev { transform: rotate(180deg); }
.vn-wiz-more-body { padding: 0 13px 14px; }
.vn-wiz-sub {
    margin: 16px 0 8px; font-size: .66rem; font-weight: 800; letter-spacing: .13em;
    text-transform: uppercase; color: var(--vn-ink-soft);
}
@media (prefers-reduced-motion: reduce) {
    .vn-trip-fold > summary > i, .vn-wiz-more-chev { transition: none; }
}

.vn-spread-notice {
    display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0;
    font-size: .76rem; line-height: 1.55; color: var(--vn-ink-soft);
}
.vn-spread-notice i { margin-top: 3px; }

/* ============================================================
   THE HUB  —  /vietnam

   Everything below styles the guide's front door only. It introduces no
   new colour: every value is one of the .vn tokens declared at the top of
   this file, which is what keeps the hub reading as Hangout Buddies —
   Vietnam Guide rather than as a second brand sharing the domain.

   Card chrome (white on paper, 1px --vn-line, the jade-soft icon tile) is
   the same system .vn-facet and .vn-diet already use. Nothing here is a
   new component language.

   Note for anyone extending this block: it sits after the MOTION section,
   so `opacity: 0` is forbidden here — a reveal the script never un-hides
   is a blank page. Use the gated helpers above instead.
   ============================================================ */

/* ---------- shared: a link that is a card ---------- */
.vn-start,
.vn-region,
.vn-guide,
.vn-tile {
    background: #fff;
    border: 1px solid var(--vn-line);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vn-start:hover,
.vn-guide:hover,
.vn-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--vn-shadow);
    border-color: var(--vn-jade);
}

/* ---------- 1 · first time in Vietnam ---------- */
.vn-starts {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.vn-start {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-height: 76px;
    padding: 16px;
}
.vn-start-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--vn-jade-soft);
    color: var(--vn-jade);
    font-size: 1.05rem;
}
.vn-start-body { flex: 1 1 auto; min-width: 0; }
.vn-start-body strong {
    display: block;
    margin-bottom: 3px;
    font-size: .97rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--vn-ink);
}
.vn-start-body small {
    display: block;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--vn-ink-soft);
}
.vn-start-go {
    flex: none;
    margin-top: 12px;
    font-size: .8rem;
    color: var(--vn-terracotta);
    transition: transform .2s ease;
}
.vn-start:hover .vn-start-go { transform: translateX(3px); }

/* The honest footnote under a set of links that do not all land where the
   heading implies. Quiet, but present. */
.vn-note-inline {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 18px 0 0;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
}
.vn-note-inline i { margin-top: 4px; color: var(--vn-jade); }

/* ---------- 2 · regions ---------- */
.vn-regions {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.vn-region { padding: 24px 22px; }

/* A card carrying a photograph loses its own top padding — the picture goes
   edge to edge under the card's own rounded corner — and the body below it
   gets the padding back. `overflow: hidden` is what clips the image to the
   corner radius. */
.vn-region.has-photo {
    padding: 0 22px 24px;
    overflow: hidden;
}
.vn-region-photo {
    display: block;
    /* Undo the card's side padding so the band reaches both edges. */
    margin: 0 -22px 0;
    aspect-ratio: 16 / 7;
    background: var(--vn-terracotta-soft);
}
.vn-region-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.vn-region-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--vn-terracotta-soft);
    color: var(--vn-terracotta);
    font-size: 1.35rem;
}
/* Over a photograph the badge becomes solid and lifts, so it reads against
   whatever the picture happens to be doing behind it, and it overlaps the
   band to tie the two halves of the card together. */
.vn-region.has-photo .vn-region-icon {
    position: relative;
    margin-top: -26px;
    margin-bottom: 12px;
    border: 3px solid #fff;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(27, 36, 56, .16);
}
.vn-region h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; }
.vn-region-blurb {
    margin: 0 0 14px;
    font-size: .89rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
}
.vn-region-list { list-style: none; padding: 0; margin: 0; }
.vn-region-list li + li { border-top: 1px solid var(--vn-line); }
.vn-region-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    padding: 6px 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--vn-ink);
    text-decoration: none;
}
.vn-region-list a:hover { color: var(--vn-jade); }
.vn-region-aka { font-weight: 600; color: var(--vn-ink-soft); }

/* Finished guide versus orientation notes, said on the link itself so the
   difference is visible before the tap rather than after it. */
.vn-tag-full,
.vn-tag-notes {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.vn-tag-full { background: var(--vn-jade-soft); color: var(--vn-jade); }
.vn-tag-notes { background: rgba(27, 36, 56, .06); color: var(--vn-ink-soft); }

/* On a phone the three bands are a swipeable row, not three full-width
   blocks the reader has to scroll past to reach the guides. Same
   scroll-snap pattern as the chapter strip — no carousel library. */
@media (max-width: 719px) {
    .vn-regions {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        /* No negative margin. Bleeding to the window edge means hardcoding
           the section's own padding here, and .vn-section drops from 20px to
           16px at 720px — so a "full bleed" was 8px wider than the viewport
           and scrolled the whole page sideways. The 84% cards already show
           the next one, which is what signals that the row moves. */
        padding: 4px 0 10px;
    }
    .vn-regions::-webkit-scrollbar { display: none; }
    .vn-region {
        flex: 0 0 84%;
        scroll-snap-align: center;
        padding: 20px 18px;
    }
    /* The bleed has to track the card's padding, which is narrower here. */
    .vn-region.has-photo { padding: 0 18px 20px; }
    .vn-region-photo { margin-left: -18px; margin-right: -18px; }
}

/* ---------- 3 · how this guide is written ---------- */
.vn-trust-band { padding-top: 34px; padding-bottom: 34px; }
.vn-trust {
    list-style: none;
    display: grid;
    gap: 18px 22px;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    padding: 0;
    margin: 0;
}
.vn-trust li { display: grid; grid-template-columns: 22px 1fr; gap: 3px 11px; }
.vn-trust i {
    grid-row: 1 / 3;
    margin-top: 3px;
    color: var(--vn-jade);
    font-size: 1rem;
}
.vn-trust strong { font-size: .9rem; font-weight: 800; color: var(--vn-ink); }
.vn-trust span { font-size: .83rem; line-height: 1.55; color: var(--vn-ink-soft); }

/* ---------- 4 · the finished guides ---------- */
.vn-guides { display: grid; gap: 14px; }
@media (min-width: 940px) {
    .vn-guides {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        align-items: start;
    }
}
.vn-guide-stack { display: grid; gap: 14px; align-content: start; }

/* The flagship. Given the night palette so it is unmistakably the biggest
   thing on the page — `--vn-paper` on `--vn-night` is one of the pairings
   the contrast test already holds at AA. */
.vn-guide-lead {
    display: block;
    padding: 28px 26px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--vn-night), var(--vn-night-2));
    color: var(--vn-paper);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.vn-guide-lead:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(16, 26, 46, .28);
}
.vn-guide-flag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(224, 163, 64, .16);
    color: var(--vn-gold);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.vn-guide-lead h3 {
    margin: 0 0 8px;
    font-size: clamp(1.3rem, 3.2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--vn-paper);
}
.vn-guide-aka { font-weight: 600; opacity: .72; }
.vn-guide-lead > p {
    margin: 0 0 16px;
    max-width: 40ch;
    font-size: .95rem;
    line-height: 1.6;
    color: rgba(253, 250, 244, .82);
}
.vn-guide-covers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0 0 18px;
}
.vn-guide-covers li {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(253, 250, 244, .1);
    font-size: .78rem;
    font-weight: 700;
    color: rgba(253, 250, 244, .9);
}
.vn-guide-lead .vn-moment-cta { color: var(--vn-neon); }

.vn-guide {
    display: block;
    padding: 18px;
    min-height: 44px;
}
.vn-guide-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 11px;
    border-radius: 12px;
    background: var(--vn-jade-soft);
    color: var(--vn-jade);
    font-size: .98rem;
}
.vn-guide h3 { font-size: 1rem; font-weight: 800; margin: 0 0 5px; }
.vn-guide p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--vn-ink-soft);
}

/* ---------- 5 · plan your trip ---------- */
.vn-plan-lead {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    min-height: 76px;
    padding: 20px 22px;
    margin-bottom: 14px;
    border-radius: 20px;
    background: var(--vn-jade);
    color: var(--vn-paper);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.vn-plan-lead:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(31, 122, 99, .28);
}
.vn-plan-lead-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(253, 250, 244, .16);
    font-size: 1.1rem;
}
.vn-plan-lead-body { flex: 1 1 240px; min-width: 0; }
.vn-plan-lead-body strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 3px;
}
.vn-plan-lead-body small {
    display: block;
    font-size: .85rem;
    line-height: 1.55;
    /* Was .84, which measured 4.05:1 on jade — under AA for body type. */
    color: rgba(253, 250, 244, .95);
}
.vn-plan-lead-go {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--vn-paper);
    color: var(--vn-jade);
    font-size: .88rem;
    font-weight: 800;
}

.vn-tiles {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
    .vn-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
    .vn-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.vn-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 14px 10px;
    border-radius: 16px;
    text-align: center;
}
.vn-tile i { font-size: 1.1rem; color: var(--vn-terracotta); }
.vn-tile strong {
    font-size: .83rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vn-ink);
}

@media (prefers-reduced-motion: reduce) {
    .vn-start, .vn-region, .vn-guide, .vn-guide-lead, .vn-tile,
    .vn-plan-lead, .vn-start-go { transition: none; }
    .vn-start:hover, .vn-guide:hover, .vn-tile:hover,
    .vn-guide-lead:hover, .vn-plan-lead:hover { transform: none; }
}

/* The visible breadcrumb on a destination hero.

   The hero starts as daylight and turns to night on scroll, so a fixed
   colour is readable in exactly one of its two states. This follows
   `.vn-checked` — the other small hero label — through both, which is also
   why it is defined in terms of the same values rather than new ones. */
.vn-crumb {
    margin-bottom: 12px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--vn-ink-soft);
}
.vn-crumb a {
    color: var(--vn-jade);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vn-hero.is-night .vn-crumb { color: rgba(255, 255, 255, .75); }
.vn-hero.is-night .vn-crumb a { color: #fff; }

/* ---------- the hub hero: copy beside the country map ---------- */
/* Only this hero. Destination heroes keep the skyline and the Buddy. */
.vn-hero-country {
    /* The 140px foot on the shared hero exists to clear the skyline SVG.
       There is no skyline here, so that much air just pushed the first
       section off the screen. */
    padding-bottom: 40px;
}

/* The sun sits at right:12%/top:16% of the hero, which on a phone is exactly
   where the headline is. It is decoration behind a country map now, so it
   goes rather than being nudged into some other collision. */
@media (max-width: 759px) {
    .vn-hero-country .vn-sun { display: none; }
}

.vn-hero-split {
    display: grid;
    gap: 24px;
    /* Copy stays left-aligned to match the destination heroes and the rest
       of the phone layout; only the map centres itself under it. */
    justify-items: stretch;
}
.vn-hero-split .vn-hero-copy { max-width: 62ch; }
.vn-hero-split .vn-hero-actions { margin-bottom: 0; }
.vn-hero-split > .vn-hero-map { justify-self: center; }

/* The map. Height-bounded rather than width-bounded: Vietnam is a long thin
   country and the illustration follows it, so sizing this by width makes a
   hero tall enough to hide everything under it. `contain` because a map that
   has been cropped to fit has lost the places at its edges. */
.vn-hero-map {
    margin: 0;
    line-height: 0;
}
.vn-hero-map img {
    display: block;
    /* Width-bound on a phone. Height-bounding it here produced a 130px-wide
       map whose city labels could not be read, which is not worth the space
       it costs. */
    width: min(62vw, 250px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 16px;
    /* The illustration has its own pale ground, so it needs an edge to sit
       on the peach gradient as a deliberate object rather than a pasted
       rectangle. */
    border: 1px solid rgba(27, 36, 56, .10);
    box-shadow: 0 10px 30px rgba(27, 36, 56, .14);
    background: #fff;
}

/* From the tablet up the hero splits properly: copy left, map right. */
@media (min-width: 760px) {
    .vn-hero-split {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 34px;
    }
    .vn-hero-split .vn-hero-copy { max-width: none; }
    .vn-hero-split .vn-tagline { max-width: 30ch; }
    .vn-hero-split .vn-lede { max-width: 52ch; }
    /* Height-bound from the tablet up, where the constraint is the hero's
       own height rather than the width of the column. */
    .vn-hero-map img { width: auto; height: clamp(290px, 36vw, 440px); }
}

@media (prefers-reduced-motion: reduce) {
    .vn-hero-country { transition: none; }
}


/* ============================================================
   ASK A LOCAL, INSIDE AN ARTICLE

   The component itself is defined once in base.html with the site tokens,
   so it works on every page. Here it takes the guide's own palette - warm
   paper, jade, terracotta - because a blue card dropped into a cream
   article reads as an advertisement somebody pasted in, and this is meant
   to read as the guide offering to help.
   ============================================================ */
.vn .al-inline {
    background: var(--vn-jade-soft);
    border-color: rgba(31, 122, 99, .22);
    border-radius: 18px;
}

.vn .al-inline-line { color: var(--vn-ink); }

.vn .al-inline-btn {
    background: #fff;
    border-color: rgba(31, 122, 99, .3);
    color: var(--vn-jade);
}

.vn .al-inline-btn:hover { background: rgba(31, 122, 99, .07); }

.vn .al-inline-btn-solid {
    background: var(--vn-terracotta);
    border-color: transparent;
    color: #fff;
}

.vn .al-inline-btn-solid:hover { filter: brightness(0.92); }   /* derived, never a second terracotta */

.vn .al-inline-go { color: inherit; }

@media (prefers-reduced-motion: reduce) {
    .vn .al-inline-btn { transition: none; }
    .vn .al-inline-btn:hover { transform: none; }
}