/* =========================================================
   ĐẢO SỐ — VIETNAMESE TYPOGRAPHY SYSTEM
   Safe metrics for Vietnamese diacritics, descenders and large display type.
   ========================================================= */

html[lang="vi"]{
  --vi-display-leading:.98;
  --vi-display-tracking:-.04em;
  --vi-heading-leading:1.06;
  --vi-heading-tracking:-.032em;
  --vi-subheading-leading:1.14;
  --vi-subheading-tracking:-.02em;
  --vi-mobile-display-leading:1.02;
  --vi-mobile-display-tracking:-.028em;
}

html[lang="vi"] body{
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Large Vietnamese text needs room above and below the baseline. */
html[lang="vi"] body h1,
html[lang="vi"] body h2,
html[lang="vi"] body h3{
  overflow:visible;
  text-wrap:balance;
  hyphens:none;
}

html[lang="vi"] body h1{
  line-height:var(--vi-display-leading);
  letter-spacing:var(--vi-display-tracking);
  padding-block:.035em .12em;
}

html[lang="vi"] body h2{
  line-height:var(--vi-heading-leading);
  letter-spacing:var(--vi-heading-tracking);
  padding-block:.025em .09em;
}

html[lang="vi"] body h3{
  line-height:var(--vi-subheading-leading);
  letter-spacing:var(--vi-subheading-tracking);
  padding-block:.02em .06em;
}

/* Hero/display headings: clamp tracking so dấu and descenders never collide. */
html[lang="vi"] body :where(
  .hero-title,
  .hero-editorial-title,
  .solutions-hero h1,
  .rest-hero h1,
  .stay-hero h1,
  .tour-hero h1,
  .maps-hero h1,
  .qr-hero h1,
  .about-hero h1,
  .pricing-hero h1,
  .projects-hero h1,
  .audit-hero h1,
  .privacy-hero h1,
  .terms-hero h1
){
  line-height:var(--vi-display-leading);
  letter-spacing:var(--vi-display-tracking);
  overflow:visible;
}

/* Vietnamese emphasis is rendered as normal glyphs.
   Gradient text is intentionally avoided because background-clip can crop
   dot-below marks and descenders depending on browser/font rasterization. */
html[lang="vi"] body:not(.visual-home) h1 > span,
html[lang="vi"] body:not(.visual-home) :where(
  .section-heading,
  .rest-section-heading,
  .stay-section-heading,
  .tour-section-heading,
  .qr-section-heading,
  .about-section-heading,
  .pricing-section-heading,
  .projects-section-heading,
  .audit-section-heading,
  .privacy-section-heading,
  .terms-section-heading,
  .maps-section-heading,
  .metrics-copy,
  .rest-guest-copy,
  .conversion-copy,
  .rest-audit-copy,
  .stay-location-copy,
  .stay-direct-copy,
  .stay-audit-copy,
  .tour-pickup-copy,
  .tour-trust-copy,
  .qr-architecture-copy,
  .qr-data-copy,
  .capability-copy,
  .about-not-copy,
  .region-copy,
  .pricing-anatomy-copy,
  .pricing-cost-copy,
  .transparency-copy,
  .audit-output-copy,
  .audit-form-intro,
  .privacy-data-copy,
  .terms-lifecycle-copy,
  .maps-profile-copy,
  .review-loop-copy
) h2 > :where(span,em){
  color:var(--vh-accent,#5572ff);
  -webkit-text-fill-color:currentColor;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  filter:none;
}

/* Any emphasized Vietnamese H2 uses a solid page accent.
   This intentionally wins over legacy background-clip gradients. */
html[lang="vi"] body h2 > :where(span,em){
  color:var(--vh-accent,#5572ff);
  -webkit-text-fill-color:currentColor;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  filter:none;
}

/* Homepage editorial headline: remove the historical glyph-splitting workaround.
   Two solid accent tones preserve hierarchy while letting the browser draw the
   complete Vietnamese glyph metrics normally. */
html[lang="vi"] .hero-editorial-title{
  line-height:.96;
  letter-spacing:-.038em;
}

html[lang="vi"] .hero-editorial-title .editorial-line{
  overflow:visible;
  padding-block:.045em .14em;
}

html[lang="vi"] .hero-editorial-title .editorial-gradient-main{
  display:inline;
  color:#727cff;
  -webkit-text-fill-color:#727cff;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  overflow:visible;
}

html[lang="vi"] .hero-editorial-title .editorial-gradient-last{
  display:inline;
  color:#df45d8;
  -webkit-text-fill-color:#df45d8;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  overflow:visible;
}

html[lang="vi"] .hero-editorial-title .editorial-gradient-descender{
  display:contents;
  color:inherit;
  -webkit-text-fill-color:inherit;
}

/* Compact UI labels can stay tracked, but need normal vertical metrics. */
html[lang="vi"] body :where(
  .eyebrow,
  [class*="kicker"],
  [class*="label"],
  [class*="badge"],
  [class*="chip"]
){
  line-height:1.35;
}

/* Long Vietnamese copy is easier to scan with slightly more leading. */
html[lang="vi"] body :where(.lead,p,li){
  hanging-punctuation:first last;
}

/* Mobile: reduce negative tracking further because glyph collisions become
   more obvious at narrow widths and browser zoom levels. */
@media(max-width:760px){
  html[lang="vi"] body h1,
  html[lang="vi"] body :where(
    .hero-title,
    .hero-editorial-title,
    .solutions-hero h1,
    .rest-hero h1,
    .stay-hero h1,
    .tour-hero h1,
    .maps-hero h1,
    .qr-hero h1,
    .about-hero h1,
    .pricing-hero h1,
    .projects-hero h1,
    .audit-hero h1,
    .privacy-hero h1,
    .terms-hero h1
  ){
    line-height:var(--vi-mobile-display-leading);
    letter-spacing:var(--vi-mobile-display-tracking);
    padding-bottom:.14em;
  }

  html[lang="vi"] body h2{
    line-height:1.09;
    letter-spacing:-.024em;
  }

  html[lang="vi"] body h3{
    line-height:1.16;
    letter-spacing:-.015em;
  }

  html[lang="vi"] .hero-editorial-title{
    line-height:1;
    letter-spacing:-.026em;
  }
}

@media(max-width:420px){
  html[lang="vi"] body h1,
  html[lang="vi"] .hero-editorial-title{
    line-height:1.03;
    letter-spacing:-.022em;
  }
}