/* Ha Giang's field-guide system, with a full-width coastal opening. */
.hihi-guide *, .hihi-guide *::before, .hihi-guide *::after { letter-spacing: 0; }
.hihi-guide h1, .hihi-guide h2, .hihi-guide .eyebrow { letter-spacing: 0; }
.hihi-guide h1 { font-size: 80px; }
.hihi-guide h2 { font-size: 44px; }
.hihi-guide h3 { overflow-wrap: anywhere; }
.hihi-guide #photo-title { letter-spacing: 0; }
.nt-guide .nt-js-only { display: none; }
.nt-guide.nt-ready .nt-js-only { display: flex; }
.nt-guide .nt-hero { position: relative; display: flex; align-items: flex-end; min-height: 480px; height: min(660px, calc(100svh - 200px)); color: #fff; isolation: isolate; }
.nt-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-position: center 45%; }
.nt-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .68), transparent 90%); }
.nt-guide .nt-hero-copy { padding-block: 36px 44px; }
.nt-guide .nt-hero .eyebrow { color: #fff; margin-bottom: 14px; }
.nt-guide .hero-intro { max-width: 620px; font-size: 18px; margin-top: 20px; }
.nt-guide .nt-hero .outline { border-color: #fff; }
.nt-guide .nt-hero .outline:hover { color: var(--ink); border-color: var(--lime); }
.nt-guide .trip-fit { margin-inline: auto; padding-block: 28px; border-top: 0; border-bottom: 1px solid var(--line); }
.nt-guide .story-card, .nt-guide .highlight-card, .nt-guide .weather-card, .nt-guide .budget-card, .nt-guide .gallery-tile { border-radius: 8px; }
.nt-guide .highlight-card { display: flex; flex-direction: column; }
.nt-guide .highlight-card .card-copy { display: flex; flex-direction: column; flex: 1; }
.nt-guide .highlight-card .card-copy > p { margin-block: 12px; }
.nt-guide .highlight-card .text-button { margin-top: auto; }
.nt-guide .nt-context { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.nt-guide .nt-context h3 { font-size: 24px; }
.nt-guide .arrow-up-right { transition: transform 180ms; }
.nt-guide .text-button:hover .arrow-up-right, .nt-guide .button:hover .arrow-up-right { transform: translate(2px, -2px); }
.nt-guide .photo-button { cursor: zoom-in; }
.nt-guide .photo-button:focus-visible { outline-offset: -4px; }
.nt-guide .chips [aria-pressed="true"] { background: var(--purple); border-color: var(--purple); }
.nt-guide .nt-itinerary { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); gap: 32px; align-items: start; }
.nt-guide.nt-ready .route-strip { display: grid; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.nt-guide .route-strip button { position: relative; align-items: center; gap: 16px; min-height: 110px; padding: 16px 8px; border: 0; border-radius: 4px; }
.nt-guide .route-strip button::after { position: absolute; content: ''; left: 32px; bottom: -4px; width: 1px; height: 18px; background: var(--line); }
.nt-guide .route-strip button:last-child::after { display: none; }
.nt-guide .route-strip .nt-step-number { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 50%; background: #f7f3ff; color: var(--purple); }
.nt-guide .route-strip .nt-step-copy { color: var(--ink); font-size: 15px; font-weight: 400; }
.nt-guide .nt-step-copy strong { display: block; font-size: 16px; line-height: 1.5; }
.nt-guide .nt-step-copy small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.nt-guide .route-strip button[aria-current="step"] { background: transparent; }
.nt-guide .route-strip button[aria-current="step"] .nt-step-number { background: var(--lime); color: var(--ink); }
.nt-guide .route-strip button:hover { background: #f7f3ff; }
.nt-guide .nt-itinerary-detail { min-width: 0; padding: 28px; border: 1px solid var(--line); background: #fff; border-radius: 8px; }
.nt-guide .day-tabs { gap: 8px; border: 0; margin-bottom: 28px; padding: 4px; }
.nt-guide .day-tabs button { min-width: 68px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 28px; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
.nt-guide .day-tabs button:hover { border-color: var(--purple); }
.nt-guide .day-tabs button[aria-selected="true"] { background: var(--purple); color: #fff; border-color: var(--purple); }
.nt-guide .nt-day-panel h3 { font: 600 30px/1.2 Phudu, sans-serif; margin-bottom: 24px; }
.nt-guide .nt-day-panel + .nt-day-panel { margin-top: 32px; }
.nt-guide.nt-ready .nt-day-panel { margin: 0; }
.nt-guide .timeline { padding: 0; }
.nt-guide .timeline li { grid-template-columns: 92px minmax(0, 1fr); gap: 24px; padding: 22px 0; }
.nt-guide .timeline li:last-child { border-bottom: 0; }
.nt-guide .timeline li.nt-untimed { grid-template-columns: 1fr; }
.nt-guide .nt-time { color: var(--purple); font-weight: 600; overflow-wrap: anywhere; }
.nt-guide .nt-time small { display: block; font-size: 12px; font-weight: 400; margin-top: 5px; color: var(--muted); }
.nt-guide .nt-estimate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 40px; }
.nt-guide .budget-card { position: static; background: #f0f3f1; }
.nt-guide .pricing-row:hover { background: #e7ece8; }
.nt-guide .nt-download { padding-block: 16px; }
.nt-guide .nt-download > p { margin-top: 16px; }
.nt-guide .nt-download .button { margin-block: 16px; }
.nt-guide .nt-season-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.nt-guide .nt-season-grid img { width: 100%; aspect-ratio: 3/2; height: auto; border-radius: 8px; }
.nt-guide .nt-season-grid h3, .nt-guide .nt-culture h3 { margin-block: 20px 12px; }
.nt-guide .nt-culture, .nt-guide .nt-transport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.nt-guide .nt-culture img, .nt-guide .nt-transport-grid img { width: 100%; height: auto; aspect-ratio: 3/2; border-radius: 8px; }
.nt-guide .nt-transport-grid h3 { margin-top: 16px; }
.nt-guide .nt-transport-grid p { margin-top: 12px; }
.nt-guide #faqs { margin-top: 40px; }
.nt-guide summary:hover { color: var(--purple); }
#nt-preview-cursor { position: fixed; top: 0; left: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--lime); color: var(--ink); border-radius: 28px; pointer-events: none; visibility: hidden; font-size: 13px; font-weight: 600; }
#nt-preview-cursor.is-visible { visibility: visible; }
@media (max-width: 1080px) {
    .hihi-guide h1 { font-size: 64px; }
    .hihi-guide h2 { font-size: 38px; }
    .nt-guide .nt-itinerary { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 20px; }
    .nt-guide .nt-itinerary-detail { padding: 20px; }
    .nt-guide .route-strip .nt-step-number { flex-basis: 40px; height: 40px; }
    .nt-guide .route-strip button::after { left: 28px; }
    .nt-guide .nt-estimate-grid { gap: 24px; }
}
@media (max-width: 760px) {
    .hihi-guide h1 { font-size: 48px; }
    .hihi-guide h2 { font-size: 32px; }
    .nt-guide .nt-hero { height: auto; min-height: 0; }
    .nt-guide .nt-hero-copy { padding-block: 140px 32px; }
    .nt-guide .hero-intro { font-size: 16px; }
    .nt-guide .nt-hero .actions { gap: 8px; }
    .nt-guide .nt-hero .button { padding: 12px 16px; font-size: 13px; }
    .nt-guide .nt-context, .nt-guide .nt-itinerary, .nt-guide .nt-estimate-grid, .nt-guide .nt-culture, .nt-guide .nt-transport-grid, .nt-guide .nt-season-grid { grid-template-columns: 1fr; }
    .nt-guide.nt-ready .route-strip { display: none; }
    .nt-guide .nt-context { gap: 16px; }
    .nt-guide .nt-itinerary-detail { padding: 20px 16px; }
    .nt-guide .day-tabs { gap: 6px; margin-inline: -4px; }
    .nt-guide .day-tabs button { min-width: 54px; padding: 10px 12px; font-size: 13px; }
    .nt-guide .nt-day-panel h3 { font-size: 26px; }
    .nt-guide .timeline li { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
    .nt-guide .nt-season-grid { gap: 32px; }
    .nt-guide .nt-download { padding: 0; }
}
@media (max-width: 380px) {
    .hihi-guide h1 { font-size: 42px; }
    .hihi-guide h2 { font-size: 30px; }
    .nt-guide .nt-hero-copy { padding-top: 110px; }
    .nt-guide .nt-hero .button { padding-inline: 12px; gap: 8px; }
    .nt-guide .day-tabs button { padding-inline: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #nt-preview-cursor { display: none; }
    .nt-guide .button:hover, .nt-guide .photo-button:hover img, .nt-guide .gallery-tile:hover img, .nt-guide .text-button:hover .arrow-up-right, .nt-guide .button:hover .arrow-up-right { transform: none; }
}