/* ============================================================
   SONDAX TRAVEL - the refined look (October 2026)

   The owner wanted the site to feel calm and expensive, "like a five-star hotel's site",
   and said it read as cramped and heavy, homepage included. Measured on the homepage:
   13 type sizes, two thirds of the words at 12 to 14px under headings drawn at weight 800
   (the hero at 72px), and cards that each carried a place, a title, a description, three
   to five tag pills, icons, a price and a unit, among amber pills, coloured icon tiles,
   line drawings and a navy band. Small type under very heavy type is what read as heavy.

   This layer, loaded after every other stylesheet (Default.aspx), changes that site-wide:
   - Large headings in a serif (Cormorant Garamond, weight 500, served from this site);
     body copy stays Montserrat.
   - One type scale (below): every kind of text has one size wherever it appears, nothing
     heavier than 600. The owner's second round asked for exactly that ("only a few sizes,
     the same everywhere") after finding a place line in large spaced capitals under one
     title, a bold breadcrumb running to three lines, and option cards in five colours.
   - A white page; only what should stand out sits on a tinted panel (the owner: white
     ground, colour for what is highlighted, as photos on white looked dull on ivory).
   - The label above a heading is spaced capitals between two fine lines.
   - Cards are white blocks: a photograph and a few words.
   - Links in text are blue with a blue underline.
   Brand colours, the 2px corners and every form field, id and script are unchanged; to go
   back, remove the one <link> in Default.aspx.
   ============================================================ */

/* ---- the serif: one weight, only the subsets a page uses are fetched ---------------- */
/* Weight 600 (semi-bold): the owner found 500 a touch light. The latin file is cut down to
   what English headings and prices use (17 KB, preloaded on every page); a Vietnamese place
   name takes the Vietnamese file; the rare other European letter falls back to Georgia. */
@font-face {
    font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
    src: url(font/cormorant-garamond/cormorant-garamond-vietnamese-600-normal.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
    font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
    src: url(font/cormorant-garamond/cormorant-garamond-latin-600-normal.woff2) format('woff2');
    unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2032-2033,U+20AC,U+2122;
}

:root {
    --font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

    /* The palette (docs/sondax-brand-guide.html). Text takes one of four colours, never another:
         ink    navy   headings, titles, names, key values
         body   slate  running text
         soft   grey   places, dates, units, captions, notes
         brand  blue   links, buttons, icons, prices
       Amber is for the fine lines and the small labels above headings (accent-text on white),
       never for words a visitor has to read. Green and red only mark included / not included. */
    --color-ink: #06295b;
    --color-body: #3a4757;
    --color-soft: #5a6b7e;
    --color-brand: #1e5a85;
    --color-ivory: #ffffff;        /* the page */
    --color-muted-bg: #f3f6f9;     /* a highlighted band or panel: a breath of the brand blue */
    --color-border: #e1e6ec;       /* hairlines */
    --color-card-line: #e3e8ee;    /* the edge of a white card */
    --color-card-line-hover: #c9d3de;
    /* The older names every stylesheet uses, pointed at the palette: --color-text was navy and
       coloured most paragraphs navy and some slate; --color-muted and --color-link were a second
       grey and a second, brighter blue. */
    --color-text: var(--color-body);
    --color-muted: var(--color-soft);
    --color-link: var(--color-brand);
    --color-secondary: var(--color-brand);

    /* The type scale. Every kind of text takes one of these, wherever it appears. Montserrat is
       wide, so running text is 14px (it read large at 15, the owner said). */
    --fs-label: 0.75rem;    /* 12: labels, badges, units, small print, buttons */
    --fs-small: 0.875rem;   /* 14: second lines, tabs, filters, notes (grey, same size as text) */
    --fs-body: 0.875rem;    /* 14: running text */
    --fs-lead: 1rem;        /* 16: the intro under a page title; small headings inside text */
    --fs-card: 1.375rem;    /* 22, serif: card and option titles, prices on cards */
    --fs-h2: 2.25rem;       /* 36, serif: section titles (30 on a phone) */
    --fs-h1: 2.75rem;       /* 44, serif: a product's or an article's title (32 on a phone) */
    --fs-page: 3.375rem;    /* 54, serif: a listing page's title (36 on a phone) */
    --fs-hero: 4.375rem;    /* 70, serif: the homepage (42 on a phone) */
}
@media (max-width: 768px) {
    :root { --fs-h2: 1.875rem; --fs-h1: 2rem; --fs-page: 2.25rem; --fs-hero: 2.625rem; }
}
body { background: #fff; color: var(--color-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.st-section-white { background: #fff; }
h1, h2, h3, h4 { color: var(--color-ink); }
strong, b { font-weight: 600; }

/* ---- headings ----------------------------------------------------------------------- */
/* The serif is for the large headings, the card titles and the prices. It has one weight,
   so a bold request is drawn at that weight instead of a smeared fake bold, and its numbers
   are lining figures ("10-Day", "$999", not old-style "1o"). */
h1, h2,
.st-hero-title, .st-page-header-title, .st-section-title, .st-heading, .st-detail-title, .st-vt-title,
.st-as-section-title, .st-vt-section-title, .st-xlinks-title, .st-trust-title,
.st-service-title, .st-vt-home .st-service-title, .st-fast-track-title, .st-blog-title, .st-vt-card-title,
.st-as-pass-title, .st-vt-rel-body h3, .st-related-card strong, .st-vt-daytitle > span + span,
.st-vt-price, .st-booking-price, .st-stat-value, .st-as-pass-code, .st-as-pass-price, .st-vt-card-amount,
.st-opt-name, .st-opt-amount, .st-vt-mobilebar-price b,
#dt-mobile-price, #ws-mobile-price, #pt-mobile-price, #as-mobile-price {
    font-family: var(--font-head); font-weight: 600 !important; letter-spacing: 0;
    font-synthesis: style; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
}
/* Small headings stay in the sans: in text, in the questions, in the folds. */
h3, h4, .st-html-content h3, .st-html-content h4, .st-as-faq-q h3, .st-vt-faq h3, .st-practical-item h3,
.st-svc-hl h3, .st-vt-fold h3, .st-category-title, .st-footer-heading, .st-vt-fhead {
    font-family: var(--font-main);
}
h3, h4 { font-weight: 600; }

.st-hero-title { font-size: var(--fs-hero); line-height: 1.12; }
.st-hero-desc { font-weight: 400; letter-spacing: .04em; }
.st-page-header-title { font-size: var(--fs-page) !important; line-height: 1.15; }
.st-section-title, .st-as-section-title, .st-vt-section-title, .st-xlinks-title, .st-trust-title {
    font-size: var(--fs-h2) !important; line-height: 1.2; }
.st-detail-title, .st-vt-title, .st-blog-detail .st-blog-title, .article-details .article-header .kp-title {
    font-family: var(--font-head); font-weight: 600 !important; font-size: var(--fs-h1) !important; line-height: 1.15;
    color: var(--color-ink); letter-spacing: 0; }
/* The airport page's title sits in half the width, beside a photograph. */
.st-as-hero-copy .st-page-header-title { font-size: var(--fs-h1) !important; }
.st-section-desc, .st-as-lead { font-size: var(--fs-body); line-height: 1.75; color: var(--color-soft); }

/* ---- running text and the headings inside it ----------------------------------------- */
.st-html-content, .st-vt-detail .st-html-content, .st-svc .st-as-section .st-html-content,
.st-blog-content, .article-details .content-detail,
.st-vt-detail .st-vt-faq-a, .st-svc .st-as-faq-a p, .st-svc .st-as-faq-a li, .st-svc .st-practical-item p,
.st-svc .st-practical-item li, .st-svc-hl li { font-size: var(--fs-body) !important; line-height: 1.75; }
.st-html-content, .st-blog-content, .article-details .content-detail { color: var(--color-body); }
.st-html-content p, .st-blog-content p, .article-details .content-detail p { line-height: 1.75; }
/* An article's h2 in the heading face, large enough to mark a new part of the text; its
   h3 in the sans, a step above the text. They were 18 to 24px, the h1 shrunk to a card
   title's 22px by a rule meant for the homepage's blog cards. */
.st-html-content h2, .st-blog-detail .st-blog-content h2, .article-details .content-detail h2 {
    font-family: var(--font-head); font-size: 1.875rem !important; font-weight: 600 !important; line-height: 1.2;
    color: var(--color-ink); margin: 48px 0 14px; letter-spacing: 0; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.st-html-content h3, .st-blog-detail .st-blog-content h3, .article-details .content-detail h3 {
    font-family: var(--font-main); font-size: var(--fs-lead) !important; font-weight: 600 !important; line-height: 1.45;
    color: var(--color-ink); margin: 32px 0 10px; }
.st-html-content h4, .st-blog-detail .st-blog-content h4, .article-details .content-detail h4 {
    font-family: var(--font-main); font-size: var(--fs-body) !important; font-weight: 600 !important; color: var(--color-ink); margin: 24px 0 8px; }
.st-html-content > h2:first-child, .st-html-content > h3:first-child { margin-top: 0; }
.st-blog-desc { font-size: var(--fs-lead) !important; line-height: 1.7; color: var(--color-body) !important; }
.st-html-content figcaption, .st-blog-content figcaption, .article-details .content-detail figcaption {
    font-size: var(--fs-small); color: var(--color-soft); }
/* Links in text: blue, underlined in the same blue. */
.st-html-content a, .st-blog-content a, .article-details .content-detail a {
    color: var(--color-link); text-decoration: underline; text-decoration-color: currentColor;
    text-decoration-thickness: 1px; text-underline-offset: 3px; word-break: normal; overflow-wrap: anywhere; }
.st-html-content a:hover, .st-html-content a:focus, .st-blog-content a:hover, .article-details .content-detail a:hover {
    color: var(--color-ink); text-decoration-color: currentColor; }

/* ---- the label above a heading: spaced capitals between two fine lines -------------- */
.st-sub-label {
    background: none; padding: 0; border-radius: 0; gap: 12px; margin-bottom: 16px;
    color: var(--color-accent-text); font-family: var(--font-main);
    font-size: var(--fs-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.st-sub-label svg { display: none; }
.st-sub-label::before, .st-sub-label::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.st-section-header:not(.st-text-left) .st-sub-label { justify-content: center; }
.st-hero .st-sub-label { color: var(--color-accent); }

/* ---- rhythm ------------------------------------------------------------------------- */
.st-section { padding: 104px 0; }
.st-section-header { margin-bottom: 52px; }
.st-section-muted { background: var(--color-muted-bg); }
.st-sketch { display: none; }
.st-mt-10 { margin-top: 48px !important; }

/* ---- listing page headers: the title large, the intro under it in the lead size ------ */
/* Every listing page now opens like the blog's, which the owner pointed to: a large
   title and one centred paragraph, on the tinted band. */
.st-page-header { background: var(--color-muted-bg); padding: 88px 0 72px; text-align: center; }
.st-page-header::before, .st-page-header::after { display: none; }
.st-page-header-title { color: var(--color-ink); margin: 0 auto 16px; max-width: 900px; }
.st-page-header-desc, .st-page-header .st-listing-intro, .st-page-header .st-listing-intro p {
    font-size: var(--fs-lead) !important; line-height: 1.7; color: var(--color-body); }
.st-page-header-desc { max-width: 680px; margin: 0 auto; }
.st-page-header .st-listing-intro a { color: var(--color-link); }
.st-page-header .st-sub-label { color: var(--color-accent-text); justify-content: center; }
.st-page-header .st-btn-outline-white { color: var(--color-ink); border-color: var(--color-ink); }
.st-as-hero-copy, .st-as-hero-copy .st-page-header-desc { text-align: left; }

/* ---- breadcrumbs: one line, the page you are on in the same small grey ---------------- */
.st-crumb { font-size: var(--fs-label); color: var(--color-soft); }
.st-crumb ol { flex-wrap: nowrap; min-width: 0; }
.st-crumb li { flex: 0 0 auto; white-space: nowrap; }
.st-crumb li[aria-current] { flex: 1 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis;
                             font-weight: 400; color: var(--color-soft); }
.st-crumb a { color: var(--color-soft); }
.st-vt-crumb { font-size: var(--fs-label); color: var(--color-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- cards: a white block, a photograph and a few words ----------------------------- */
/* A link card lifts a little under a mouse pointer (not on touch screens, where a hover state
   sticks after a tap). The booking form also carries .st-card and keeps its frame without
   the lift: only link cards (.st-card-hover, a.st-card) move. */
.st-card { background: #fff; border: 1px solid var(--color-card-line); border-radius: var(--radius); overflow: hidden;
           transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
@media (hover: hover) {
    .st-card-hover:hover, a.st-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(6, 41, 91, .12); border-color: var(--color-card-line-hover); }
}
.st-service-img, .st-fast-track-img, .st-blog-card-img { height: auto; aspect-ratio: 4 / 3; overflow: hidden; }
.st-service-img img, .st-fast-track-img img, .st-blog-card-img img { transition: transform 1.2s ease; }
.st-card:hover .st-service-img img, .st-card:hover .st-fast-track-img img, .st-card:hover .st-blog-card-img img { transform: scale(1.04); }
.st-service-grid-3 { gap: 36px 28px; }
.st-service-img-overlay { background: linear-gradient(to top, rgba(6, 41, 91, .45), transparent); }
.st-service-body, .st-fast-track-body, .st-blog-card-body, .st-guide-body { padding: 18px 20px 20px; }
/* Product cards follow the reference the owner sent (a Vietnam Decouverte card): one accent
   colour for the icons, the price and the button; the place line and two lines of
   description in one small grey size; at the foot the price on the left and "View details"
   on the right. Here the accent is the brand blue and the title keeps the heading face. */
.st-service-card, .st-fast-track-card { display: flex; flex-direction: column; }
.st-service-card > .st-service-body, .st-fast-track-card > .st-fast-track-body, .st-transfer-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.st-service-meta, .st-fast-track-airport, .st-transfer-route {
    display: block !important; font-size: var(--fs-small) !important; font-weight: 400 !important; letter-spacing: 0; text-transform: none;
    color: var(--color-soft) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 8px; }
.st-service-meta svg, .st-fast-track-airport svg, .st-transfer-route svg {
    display: inline-block !important; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--color-secondary); }
.st-blog-meta { display: block; font-size: var(--fs-label) !important; font-weight: 500; letter-spacing: .02em; text-transform: none;
                color: var(--color-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
.st-blog-meta > span + span { margin-left: 6px; }
.st-service-title, .st-vt-home .st-service-title, .st-fast-track-title, .st-blog-card-body .st-blog-title, .st-guide-body .st-service-title, .st-transfer-title {
    font-family: var(--font-head); font-weight: 600 !important; font-size: var(--fs-card) !important; line-height: 1.3; color: var(--color-ink); margin: 0 0 8px; }
.st-service-desc, .st-fast-track-desc, .st-transfer-desc {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: var(--fs-small) !important; line-height: 1.6; color: var(--color-soft) !important; margin: 0 0 18px; }
.st-blog-item .st-service-desc, .st-guide-body .st-service-desc { margin-bottom: 16px; }
.st-service-tags, .st-blog-excerpt, .st-fast-track-location { display: none !important; }
.st-service-footer, .st-fast-track-footer, .st-transfer-footer {
    display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border); }
/* What used to sit left of the price (the number of options, the airport code, the tour
   type) is in the place line or the title already; the button takes its place. */
.st-service-footer > span:empty, .st-service-footer > span[style*='font-weight:600'], .st-service-info, .st-fast-track-code, .st-vt-home-type { display: none !important; }
.st-transfer-footer > span:first-child { flex: 1 0 100%; order: -1; font-size: var(--fs-small) !important; font-weight: 400 !important; color: var(--color-soft) !important; }
.st-transfer-footer > span:first-child svg { color: var(--color-secondary); }
.st-service-footer > div, .st-transfer-footer > div { text-align: left !important; }
.st-vt-home-amount, .st-fast-track-price, .st-service-price, .st-service-footer span[style*='font-weight:800'], .st-transfer-footer span[style*='font-weight:800'] {
    font-family: var(--font-head); font-weight: 600 !important; font-size: var(--fs-card) !important; line-height: 1.15;
    color: var(--color-secondary) !important; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; font-synthesis: style; }
.st-service-price-sub, .st-vt-home-unit, .st-fast-track-per, .st-service-footer div[style*='font-size:0.75rem'], .st-transfer-footer div[style*='font-size:0.75rem'] {
    display: block; font-size: var(--fs-label) !important; font-weight: 400 !important; color: var(--color-soft) !important; margin-top: 2px; }
.st-fast-track-price-wrap { display: flex; flex-direction: column; align-items: flex-start; }
/* The button: "View details" on product cards (drawn here, so every card has it without a
   change to each of the dozen places that build one), "Read more" on articles,
   "See prices" on the airport cards; one outline in the accent blue, filled under a pointer. */
.st-service-card .st-service-footer::after, .st-fast-track-card .st-fast-track-footer::after, .st-transfer-card .st-transfer-footer:not(:has(.st-btn))::after {
    content: 'View details'; margin-left: auto; }
.st-service-card .st-service-footer::after, .st-fast-track-card .st-fast-track-footer::after, .st-transfer-card .st-transfer-footer:not(:has(.st-btn))::after,
.st-card-more, .st-as-pass-cta, .st-transfer-footer .st-btn, .st-vt-card-price .st-btn {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 9px 14px !important; border: 1px solid var(--color-secondary) !important;
    border-radius: var(--radius) !important; background: transparent !important; color: var(--color-secondary) !important;
    font-family: var(--font-main); font-size: var(--fs-label) !important; font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase;
    line-height: 1.2; white-space: nowrap; min-height: 0 !important; width: auto !important; transition: background-color .25s ease, color .25s ease; }
.st-card-more { align-self: flex-start; margin-top: auto; }
.st-card-more svg, .st-as-pass-cta svg { display: none !important; }
@media (hover: hover) {
    .st-card:hover .st-service-footer::after, .st-card:hover .st-fast-track-footer::after, .st-transfer-card:hover .st-transfer-footer::after,
    .st-card:hover .st-card-more, .st-airport-row:hover .st-as-pass-cta, .st-transfer-card:hover .st-btn, .st-vt-tcard:hover .st-vt-card-price .st-btn {
        background: var(--color-secondary) !important; color: #fff !important; }
}
/* A press shows: the button fills at once (no fade in) while the card is pressed, and for a
   moment after a tap (.st-pressed, from the click script in Default.aspx), since a phone does
   not reliably show a press while the finger is down. It fades back as the next page loads. */
.st-card:active .st-service-footer::after, .st-card.st-pressed .st-service-footer::after,
.st-card:active .st-fast-track-footer::after, .st-card.st-pressed .st-fast-track-footer::after,
.st-transfer-card:active .st-transfer-footer::after, .st-transfer-card.st-pressed .st-transfer-footer::after,
.st-card:active .st-card-more, .st-card.st-pressed .st-card-more,
.st-airport-row:active .st-as-pass-cta, .st-airport-row.st-pressed .st-as-pass-cta,
.st-transfer-card:active .st-btn, .st-transfer-card.st-pressed .st-btn,
.st-vt-tcard:active .st-vt-card-price .st-btn, .st-vt-tcard.st-pressed .st-vt-card-price .st-btn {
    background: var(--color-secondary) !important; color: #fff !important; transition: none; }
.st-vt-tcard:active, .st-vt-tcard.st-pressed { border-color: var(--color-secondary); }
.st-transfer-card { background: #fff; border: 1px solid var(--color-card-line); border-radius: var(--radius); overflow: hidden; box-shadow: none;
                    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
@media (hover: hover) {
    .st-transfer-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(6, 41, 91, .11); border-color: var(--color-card-line-hover); }
}
/* Badges over a photograph (the fast track levels, a blog's category): small, square-cornered. */
.st-fast-track-badge, .st-fast-track-badge-standard, .st-fast-track-badge-premium, .st-fast-track-badge-elite,
.st-fast-track-badge-vip, .st-service-img-badges .st-badge {
    background: rgba(255, 255, 255, .94) !important; color: var(--color-ink) !important; border: 0 !important; border-radius: var(--radius) !important;
    text-shadow: none !important; font-weight: 500 !important; font-size: var(--fs-label) !important; letter-spacing: .02em; padding: 3px 8px !important; }
/* Articles: the category as a small label, and "Read more" at the foot of the card. */
.st-guide-body > .st-badge { align-self: flex-start; display: inline-block; background: none !important; border: 0 !important; padding: 0 !important;
    margin: 0 0 6px !important; font-size: var(--fs-label) !important; font-weight: 500 !important; letter-spacing: .02em; color: var(--color-soft) !important; }
.st-blog-item .st-service-body, .st-blog-card-body, .st-guide-body { display: flex; flex-direction: column; }

/* ---- homepage: the service strip over the photograph ------------------------------ */
.st-category-card { border: 1px solid var(--color-border); box-shadow: none; }
.st-category-card:hover { transform: none; box-shadow: none; border-color: var(--color-ink); }
.st-category-icon { background: none !important; color: var(--color-ink) !important; width: 36px; height: 36px; }
.st-category-icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.st-category-title { font-weight: 600; font-size: var(--fs-small) !important; }
.st-category-desc { font-size: var(--fs-label) !important; }

/* ---- the light bands: the homepage numbers, How It Works on /airport-services and the
   numbers on /about-us (.st-section-primary there too, it was navy with grey on top) ---- */
.st-section-primary { background: var(--color-muted-bg); color: var(--color-body); }
.st-about-stats { padding: 72px 0; }
.st-section-title-white { color: var(--color-ink); }
.st-section-desc-white { color: var(--color-soft); }
.st-section-primary .st-sub-label { color: var(--color-accent-text); }
.st-as-how-step { background: #fff; border-color: var(--color-border); }
.st-as-how-num { font-family: var(--font-head); font-weight: 600; color: var(--color-accent-text); font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.st-as-how-step h3 { color: var(--color-ink); }
.st-as-how-step p { color: var(--color-body); font-size: var(--fs-small); }
.st-stat-value { color: var(--color-ink) !important; font-size: var(--fs-h2) !important; line-height: 1.15; }
.st-stat-label { color: var(--color-body) !important; font-size: var(--fs-label) !important; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-top: 10px; }
.st-stat-icon, .st-stat-icon svg { color: var(--color-accent-text); stroke-width: 1.25; }
.st-partner-item { border: 0; background: none; color: var(--color-soft); font-weight: 500; }
.st-partners-label { font-weight: 600; letter-spacing: .18em; }

/* ---- hubs: tour cards, chips -------------------------------------------------------- */
.st-vt-tcard { background: #fff; border: 1px solid var(--color-card-line); border-radius: var(--radius); overflow: hidden; margin: 0 0 24px;
               transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
@media (hover: hover) {
    .st-vt-tcard:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(6, 41, 91, .11); border-color: var(--color-card-line-hover); }
}
.st-vt-card-body { padding: 18px 20px; }
.st-vt-card-title { font-size: var(--fs-card) !important; line-height: 1.3; }
.st-vt-card-price { border-left: 1px solid var(--color-card-line); padding: 18px 20px; }
.st-vt-card-amount { font-size: var(--fs-card) !important; color: var(--color-ink); }
/* The whole card opens the tour: the title's link is stretched over it (the photo and the
   button go to the same page). No grey tap flash from the phone; the card shows its own. */
.st-vt-tcard { position: relative; }
.st-vt-card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.st-vt-tcard a { -webkit-tap-highlight-color: transparent; }
@media (max-width: 800px) {
    /* On a phone the price and "View tour" share one line under the text, the price on the
       left and the button on the right, as on the other product cards. */
    .st-vt-card-price { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; row-gap: 2px;
                        border-left: 0; border-top: 1px solid var(--color-card-line); padding: 14px 20px 16px; }
    .st-vt-card-from, .st-vt-card-amount, .st-vt-card-unit { grid-column: 1; margin: 0; }
    .st-vt-card-price .st-btn { grid-column: 2; grid-row: 1 / span 3; }
}
/* The card's small print on the scale: "From", "per person" and the labels before Duration,
   Destinations and Language drew at 11.5 and 13px, the last sizes off the scale on
   /vietnam-tours. They are labels, so they take the label size and weight, and a label sits on
   the same baseline as its larger value. */
.st-vt-card-from, .st-vt-card-unit { font-size: var(--fs-label); }
.st-vt-card-meta div { align-items: baseline; }
.st-vt-card-meta dt { font-size: var(--fs-label); font-weight: 500; }
.st-vt-badge { background: none; border: 0; padding: 0; font-size: var(--fs-label); font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--color-soft); }
.st-vt-badge + .st-vt-badge::before { content: '\00B7'; margin-right: 6px; }
.st-cat-chip { border-width: 1px; border-color: var(--color-border); background: transparent; font-weight: 500; font-size: var(--fs-small) !important; border-radius: var(--radius) !important; }

/* ---- /airport-services: one card per airport ------------------------------------------ */
/* The owner found these rows busy: a grey stub band with the code in 50px letters, then a
   pinned place, the title, three lines of text, a row of pills, FROM, the price and a
   button. Now a white card like the others: the code and the number of options as one small
   line, the title, two lines of text, the services as one quiet line, and a footer with the
   price and "See prices". On a computer the code keeps its own column, in the heading face. */
.st-airport-row.st-as-pass { border: 1px solid var(--color-card-line); background: #fff; min-height: 0; }
/* The code column keeps the boarding-pass colours the owner liked: the amber code on navy. */
.st-as-pass-stub { background: var(--color-primary) !important; border-right: 0 !important; border-bottom: 0 !important; }
.st-as-pass-code { color: var(--color-accent) !important; font-size: var(--fs-h2); line-height: 1; }
.st-as-pass-count { font-size: var(--fs-label) !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: none !important; color: rgba(255, 255, 255, .9) !important; }
.st-as-pass-place { font-size: var(--fs-small) !important; color: var(--color-soft); }
.st-as-pass-place svg { width: 14px; height: 14px; color: var(--color-secondary); }
.st-as-pass-title { font-size: var(--fs-card) !important; line-height: 1.3; color: var(--color-ink); }
.st-airport-row:hover .st-as-pass-title { color: var(--color-ink); }
.st-as-pass-desc { font-size: var(--fs-small) !important; line-height: 1.65 !important; color: var(--color-body); -webkit-line-clamp: 2 !important; }
.st-as-pass-tags { display: flex; flex-wrap: wrap; gap: 0; margin-top: 2px; font-size: var(--fs-label); color: var(--color-soft); }
.st-as-pass-tag { border: 0; padding: 0; background: none; border-radius: 0; font-size: var(--fs-label); font-weight: 400; color: var(--color-soft); line-height: 1.7; }
.st-as-pass-tag:not(:last-child)::after { content: '\00B7'; margin: 0 7px; }
.st-as-pass-fare { border-left: 1px solid var(--color-card-line) !important; }
.st-as-pass-from { font-size: var(--fs-label) !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--color-soft); }
.st-as-pass-price { font-size: var(--fs-card) !important; color: var(--color-ink); line-height: 1.2; }
.st-as-pass-unit { font-size: var(--fs-label) !important; color: var(--color-soft); }

/* ---- buttons and the header ------------------------------------------------------ */
/* Many buttons carry a font-size in their own style attribute (the booking forms); in spaced
   capitals those sizes ran wider than a phone, so the size is set here for all of them. A
   label that still does not fit wraps instead of widening the column. */
.st-btn { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-label) !important; padding: 15px 30px; border-width: 1px; }
.st-btn-lg { font-size: var(--fs-label) !important; padding: 17px 34px; }
.st-btn-sm { padding: 10px 18px; }
.st-carousel-btn { box-shadow: none; border-color: var(--color-border); }
.st-nav-link, .st-nav-dropdown-btn { font-weight: 500; color: var(--color-ink); font-size: var(--fs-small); }
.st-nav-link.active, .st-nav-link:hover, .st-nav-dropdown-btn.active, .st-nav-dropdown-btn:hover { background: none !important; }

/* ---- product pages: the lines under the title ---------------------------------------- */
/* The place under a fast track's title borrowed the cards' place line, which became large
   spaced capitals; it is the small grey line every product page has, and the airport code
   follows it after a dot instead of sitting in a box on a line of its own. */
.st-detail-title + .st-service-meta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 8px; white-space: normal; overflow: visible;
    font-size: var(--fs-small) !important; letter-spacing: 0; color: var(--color-soft); margin: 10px 0 0 !important; }
.st-detail-title + .st-service-meta svg { display: inline-block; }
/* The airport code is already in the title ("... (PQC)"). */
.st-detail-title + .st-service-meta > span + span { display: none !important; }
.st-detail-title + div[style*='font-size:0.875rem'] { font-size: var(--fs-small) !important; color: var(--color-soft) !important; }
.st-as-licence { font-size: var(--fs-label) !important; color: var(--color-soft); line-height: 1.6; }
/* Key facts: a small grey label over the value, the same on every product. */
.st-keyfact, .st-svc .st-keyfact { font-size: var(--fs-body) !important; font-weight: 400 !important; color: var(--color-ink); align-items: flex-start; }
.st-keyfact small, .st-svc .st-keyfact small { display: block; font-size: var(--fs-label) !important; font-weight: 500 !important; letter-spacing: .02em !important;
    text-transform: none !important; color: var(--color-soft) !important; margin-bottom: 2px; }
.st-keyfact svg { color: var(--color-soft) !important; width: 18px; height: 18px; stroke-width: 1.5; margin-top: 2px; }
.st-vt-facts dt, .st-vt-detail .st-vt-facts dt { font-size: var(--fs-label); letter-spacing: .02em; text-transform: none; color: var(--color-soft); }
.st-vt-facts dd { font-size: var(--fs-body); font-weight: 400; color: var(--color-ink); }
/* The section tabs and the option groups. */
.st-as-nav-btn, .st-vt-nav a { font-weight: 500; font-size: var(--fs-small) !important; }
.st-as-tab-label { font-size: var(--fs-small) !important; font-weight: 500 !important; border-radius: var(--radius) !important; border-width: 1px !important; }
.st-as-tab-count { font-weight: 500 !important; margin-left: 4px; opacity: .7; }
.st-as-tab-jump { font-size: var(--fs-small) !important; font-weight: 500 !important; }

/* ---- Options & Packages: one card per choice (ServiceDetail.OptionCard) ------------------ */
.st-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 14px; align-items: start; text-align: left; width: 100%; }
/* The ring of a choice not yet taken was the hairline grey, 1.2:1 on white, too faint to read
   as something to tap; it is the grey of the second lines (5.6:1). The chosen one stays ink. */
.st-opt .st-as-pkg-radio { margin-top: 5px; border-color: var(--color-soft); }
.st-opt-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-opt-head { display: block; }
.st-opt-name { font-size: var(--fs-card); line-height: 1.25; color: var(--color-ink); }
.st-opt-badge { display: inline-block; margin-left: 4px; vertical-align: 3px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em;
                text-transform: uppercase; color: var(--color-accent-text); white-space: nowrap; }
.st-opt-route { font-size: var(--fs-small); font-weight: 500; color: var(--color-body); line-height: 1.55; }
.st-opt-tags { font-size: var(--fs-label); color: var(--color-soft); line-height: 1.7; }
.st-opt-tags > span { white-space: nowrap; }
.st-opt-tags > span:not(:last-child)::after { content: '\00B7'; margin-left: 6px; }
.st-opt-hl { font-size: var(--fs-small); color: var(--color-body); line-height: 1.55; }
.st-opt-desc { font-size: var(--fs-small); color: var(--color-soft); line-height: 1.6; }
.st-opt-notes { display: flex; flex-direction: column; gap: 3px; }
.st-opt-notes > span { position: relative; padding-left: 14px; font-size: var(--fs-label); color: var(--color-soft); line-height: 1.6; }
.st-opt-notes > span::before { content: ''; position: absolute; left: 2px; top: .7em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.st-opt-price { text-align: right; white-space: nowrap; padding-top: 1px; }
.st-opt-amount { display: block; font-size: var(--fs-card); line-height: 1.25; color: var(--color-ink); }
.st-opt-sub { display: block; font-size: var(--fs-label); color: var(--color-soft); margin-top: 2px; }
.st-opt-tier, .st-opt .st-as-tier { align-self: flex-start; display: inline-block; margin-top: 4px; padding: 0; background: none !important; border: 0 !important;
    border-radius: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-soft); }
.st-opt-tier-premium, .st-opt .st-as-tier-premium { color: var(--color-accent-text); }
.st-as-pkg-card.tier-vip .st-opt .st-as-tier, .st-as-pkg-card.tier-elite .st-opt .st-as-tier { color: inherit !important; opacity: .85; }
.st-svc .st-as-pkg-card:not(.tier-vip):not(.tier-elite), .st-as-pkg-card:not(.tier-vip):not(.tier-elite) { background: #fff; border-width: 1px; border-color: var(--color-card-line); padding: 18px 20px; }
.st-as-pkg-card.selected:not(.tier-vip):not(.tier-elite) { border-color: var(--color-ink) !important; box-shadow: inset 0 0 0 1px var(--color-ink) !important; background: #fff !important; }
.st-as-pkg-card.selected .st-as-pkg-radio { border-color: var(--color-ink); background: var(--color-ink); }

/* ---- the price bar at the foot of a phone screen ------------------------------------- */
#dt-mobile-price, #ws-mobile-price, #pt-mobile-price, #as-mobile-price { font-size: var(--fs-card) !important; color: var(--color-ink) !important; line-height: 1.1 !important; }
#dt-mobile-pkg, #ws-mobile-pkg, #pt-mobile-pkg, #as-mobile-pkg { font-size: var(--fs-label) !important; color: var(--color-soft) !important; margin-top: 3px !important;
    max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-vt-mobilebar-price b { font-size: var(--fs-card); color: var(--color-ink); }
.st-vt-mobilebar-price span { font-size: var(--fs-label); color: var(--color-soft); }

/* ---- product pages: the rest ---------------------------------------------------------- */
.st-vt-daynum { font-weight: 600 !important; }
.st-vt-detail .st-vt-daytitle > span + span { font-size: var(--fs-card); line-height: 1.3; }
.st-as-faq-q, .st-vt-detail .st-vt-faq > summary { font-weight: 500 !important; font-size: var(--fs-lead) !important; color: var(--color-ink); }
.st-vt-fold > summary h3, .st-practical-item h3, .st-svc-hl h3, .st-vt-inclabel { font-weight: 600 !important; font-size: var(--fs-lead) !important; }
.st-vt-trust b, .st-trust-item strong, .st-xlink strong, .st-vt-stay-name { font-weight: 500 !important; }
.st-related-card strong, .st-vt-rel-body h3 { font-size: var(--fs-card) !important; line-height: 1.3; }
.st-related-card span, .st-vt-rel-meta { font-size: var(--fs-label) !important; color: var(--color-soft) !important; }
.st-svc .st-related-card, .st-related-card, .st-vt-detail .st-vt-rel-card { background: #fff; border: 1px solid var(--color-card-line); border-radius: var(--radius);
    overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
@media (hover: hover) {
    .st-svc .st-related-card:hover, .st-related-card:hover, .st-vt-detail .st-vt-rel-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(6, 41, 91, .12); border-color: var(--color-card-line-hover); }
}
.st-svc .st-related-card img, .st-vt-detail .st-vt-rel-img { border-radius: 0; }
.st-svc .st-related-card div, .st-vt-detail .st-vt-rel-body { padding: 14px 16px 16px; }
.st-booking-card, .st-vt-book { background: #fff; border-color: var(--color-border); }
.st-as-label { font-size: var(--fs-label) !important; font-weight: 600; color: var(--color-ink); letter-spacing: .02em; }

@media (max-width: 768px) {
    .st-btn { white-space: normal; text-align: center; }
    .st-section { padding: 64px 0; }
    .st-section-header { margin-bottom: 32px; }
    .st-page-header { padding: 56px 0 44px; }
    .st-html-content h2, .st-blog-detail .st-blog-content h2, .article-details .content-detail h2 { margin-top: 40px; }
    .st-opt { gap: 0 12px; }

    /* /airport-services on a phone: the code and the number of options as one line, the
       price and "See prices" in a footer under a hairline. */
    .st-as-pass-stub { flex-direction: row !important; justify-content: flex-start !important; align-items: baseline !important; gap: 8px !important;
                       padding: 11px 20px !important; border-right: 0 !important; }
    .st-as-pass-code { font-family: var(--font-main); font-size: var(--fs-label) !important; font-weight: 600 !important; letter-spacing: .14em; }
    .st-as-pass-count { margin-left: 0 !important; }
    .st-as-pass-count::before { content: '\00B7'; margin-right: 8px; }
    .st-as-pass-main { padding: 16px 20px 0 !important; gap: 6px !important; }
    .st-as-pass-place { order: 2; }
    .st-as-pass-desc { order: 3; }
    .st-as-pass-tags { order: 4; }
    .st-as-pass-fare { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: baseline !important; gap: 4px 6px !important;
                       margin: 16px 20px 0; padding: 14px 0 18px !important; border-left: 0 !important; border-top: 1px solid var(--color-card-line) !important; }
    .st-as-pass-from { order: 0; }
    .st-as-pass-price { order: 1; font-size: var(--fs-card) !important; }
    .st-as-pass-unit { order: 2; }
    .st-as-pass-cta { order: 3; margin: 0 0 0 auto !important; align-self: center; }
}

/* ---- /vietnam-tours and its categories: the band is the other listing pages' own
   (.st-page-header in Index.ascx); this is the gap above the breadcrumb under it. ---- */
.st-vt-hub { padding-top: 16px; }
@media (max-width: 767px) {
    /* The four option groups of a fast track, two to a row: the count is left out on a phone
       so a group's name fits its button. */
    .st-as-tab-label { padding: 10px 8px !important; line-height: 1.3; }
    .st-as-tab-count { display: none; }
}
/* /about-us: the numbers are the tinted band, so the values under them sit on white rather
   than running on in the same tint. */
.st-about-stats + .st-section-muted { background: #fff; }

/* ---- the rest of the text, put on the same scale ------------------------------------- */
/* Measured on twenty pages after the scale went in: these still drew at 13, 16 or 18px. */
.st-hero-desc { font-size: var(--fs-lead) !important; }
.st-as-faq-a p, .st-as-faq-a li, .st-faq-a p, .st-faq-a li { font-size: var(--fs-body) !important; line-height: 1.75; }
.st-xlink strong { font-size: var(--fs-lead) !important; }
.st-as-scope-item, .st-as-mini-trust-item, .st-as-mini-trust-item strong, .st-as-final-cta-line, .st-as-final-cta-left p,
.st-as-hero-badge, .st-vt-note, .st-vt-fname, .st-vt-sortopt, .st-svc-drawer-desc { font-size: var(--fs-small) !important; }
.st-as-final-cta-left h3, .st-value-title, .comment-form-title, .st-blog-sidebar-title, .st-team-name { font-size: var(--fs-lead) !important; font-weight: 600 !important; }
.st-vt-fhead, .st-partners-label { font-size: var(--fs-label) !important; }
.st-vt-nights, .st-blog-meta-item, .st-blog-sidebar-author-role, .st-blog-sidebar-tag, form p, .st-as-form-note { font-size: var(--fs-label) !important; }
.st-html-content table, .st-html-content th, .st-html-content td, .st-blog-content table, .st-blog-content th, .st-blog-content td { font-size: var(--fs-small) !important; }
.st-vt-radarlink { font-size: var(--fs-small) !important; }

/* ---- colour: every text on the palette ------------------------------------------------ */
/* With --color-text now the body slate, the titles and names that borrowed it are set back to
   the ink, and every price takes the brand blue (cards, options, booking box, price bar). */
.st-section-title, .st-as-section-title, .st-vt-section-title, .st-xlinks-title, .st-trust-title, .st-page-header-title, .st-heading,
.st-detail-title, .st-vt-title, .st-vt-cat-title, .st-stat-value,
.st-service-title, .st-fast-track-title, .st-transfer-title, .st-vt-card-title, .st-vt-card-title a, .st-blog-title, .st-opt-name,
.st-related-card strong, .st-vt-rel-body h3, .st-team-name, .st-value-title, .st-category-title, .st-airport-name, .st-as-scope-title,
.st-as-scope-item strong, .st-as-pass-title, .st-as-faq-q, .st-vt-detail .st-vt-faq > summary, .st-xlink strong, .st-trust-item strong,
.st-vt-trust b, .st-vt-nextlist b, .st-as-review-name, .st-contact-channel-label, .st-form-label, .st-as-label, .st-keyfact,
.st-author-card-title, .st-author-h2, .st-mb-card-title, .st-mb-art-title, .st-mb-promo-title, .st-med-section-title, .st-au-section-title,
.st-au-article-title, .st-mb-related-title, .st-mb-refs-title, .st-mb-biobox-name, .st-mb-byline-name, .st-as-final-cta-left h3,
.st-as-trust-strip-inner strong, .st-as-mini-trust-item strong, .st-contact-trust-strip-inner strong, .st-contact-why-item strong,
.st-blog-sidebar-title, .comment-form-title, .st-vt-stay-name, .st-detail-feature strong { color: var(--color-ink) !important; }
.st-service-price, .st-fast-track-price, .st-vt-home-amount, .st-booking-price, .st-vt-price, .st-as-pass-price, .st-opt-amount, .st-vt-card-amount,
.st-service-footer span[style*='font-weight:800'], .st-transfer-footer span[style*='font-weight:800'], .st-vt-mobilebar-price b,
#dt-mobile-price, #ws-mobile-price, #pt-mobile-price, #as-mobile-price { color: var(--color-brand) !important; }
/* Words typed into an article or a product's text in admin with a colour of their own
   (goldenrod, dim grey, #333 seen on the live pages) take the palette instead. */
.st-html-content [style*='color'], .st-blog-content [style*='color'], .article-details .content-detail [style*='color'] { color: inherit !important; }
.st-html-content strong, .st-html-content b, .st-blog-content strong, .st-blog-content b { color: var(--color-ink); }
.st-html-content em, .st-blog-content em { color: inherit; }
.st-blog-content .title, .st-toc-title { color: var(--color-ink) !important; }
/* The footer on the brand blue: white for headings, white at 80% for links and text, 62% for
   the small print; it had five different pale blues. */
.st-footer { color: rgba(255, 255, 255, .8); }
.st-footer-heading, .st-footer-logo-name, .st-footer strong { color: #fff !important; }
.st-footer-link, .st-footer-brand-desc, .st-footer-contact-name, .st-footer a, .st-footer p { color: rgba(255, 255, 255, .8) !important; }
.st-footer-link:hover, .st-footer a:hover { color: #fff !important; }
.st-footer-pay-note, .st-footer-logo-tagline, .st-footer-bottom, .st-footer-bottom a, .st-footer-bottom p, .st-footer-bottom span { color: rgba(255, 255, 255, .62) !important; }
/* The mobile menu's Contact Us was amber on a pale amber wash, hard to read. */
.st-mobile-nav-link[style*='#f5a623'] { color: var(--color-accent-text) !important; }
.st-footer-msg-btn span { color: rgba(255, 255, 255, .62) !important; }
.st-footer-heading { font-size: var(--fs-label) !important; }
.st-footer-link, .st-footer-brand-desc, .st-footer-contact-name { font-size: var(--fs-small) !important; }
.st-footer-pay-note { font-size: var(--fs-label) !important; }
/* Second sweep after the text size went to 14px: these still drew at 13 or 15px. */
.st-as-scope-main p, .st-vt-trust div, .st-vt-card-in span, .st-svc-note, .st-blog-featured-desc, .st-vt-radar p,
.st-trust-item p, .st-vt-card-meta dd, .st-contact-why-item p, .st-booking-scroll li, .st-booking-card li, .st-mobile-nav-link { font-size: var(--fs-small) !important; }
.st-vt-faq > summary h3, .st-as-how-step h3, .st-vt-stay-name { font-size: var(--fs-lead) !important; }

/* ---- the homepage picture ------------------------------------------------------------ */
/* Its title also carries .st-heading, so the ink rule above turned it navy on the photograph;
   it is white. The shade over the photograph was a navy wash, which tinted the picture blue
   and left little contrast for the words: a neutral black one now, darker at the foot. */
.st-hero-title, .st-hero .st-heading { color: #fff !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.st-hero-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .28) 42%, rgba(0, 0, 0, .58) 100%) !important; }

/* ---- the company line in the footer: the only place the licence is stated ------------- */
.st-footer .st-footer-legal { margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: var(--fs-label) !important; line-height: 1.6; color: rgba(255, 255, 255, .62) !important; }
/* /airport-services: the closing invitation on the site's tint, its heading in the heading face
   and its line in plain text (it was an amber wash, a bold line and a licence paragraph). */
.st-as-final-cta { background: var(--color-muted-bg) !important; border: 0 !important; }
.st-as-final-cta-left h3 { font-family: var(--font-head) !important; font-weight: 600 !important; font-size: var(--fs-h2) !important; line-height: 1.2;
    color: var(--color-ink) !important; margin: 0 0 10px; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.st-as-final-cta-line { font-size: var(--fs-body) !important; font-weight: 400 !important; color: var(--color-body) !important; line-height: 1.75; max-width: 560px; }