/* Vietnam-only overrides. The base stylesheet is shared with the Singapore site,
   byte for byte; only the differences the client asked for live here. */

/* Poppins has no Vietnamese subset (latin, latin-ext and devanagari only), so every
   diacritic fell back to a system font. Montserrat is the closest geometric sans that
   ships a vietnamese subset. — client feedback #7 */
:root{
  --ff:'Montserrat',"Segoe UI",Helvetica,Arial,sans-serif;
}
body,.mainnav>ul>li>a,.btn,.field input,.field select,.field textarea,.searchform input{
  font-family:var(--ff);
}

/* Banner heights are deliberately NOT overridden here: the home carousel and the
   product hero must render at exactly the same height as the Singapore site, so
   both inherit .slides and .prod-hero from the shared base stylesheet. */

/* The opening tagline on "Hành trình phát triển" stands alone in italics,
   as it does in the source document. — client feedback #9 */
.article .lead-line{
  font-style:italic;
  font-size:1.05rem;
  color:var(--muted);
  margin:0 0 1.4em;
}


/* ---------------------------------------------------------------- Zalo button
   Floating contact button, Vietnam only. z-index 80 sits above page content and
   the nav dropdowns (60) but below the mobile nav scrim (90), the drawer (150)
   and the gallery lightbox (300), so it never covers an open overlay.
   env(safe-area-inset-bottom) keeps it clear of the iOS home indicator and
   Android gesture bar. */
.zalo-fab{position:fixed;right:24px;z-index:80;
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#0068FF;text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:transform .18s ease,box-shadow .18s ease}
.zalo-fab:hover,.zalo-fab:focus-visible{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.3)}
.zalo-fab:focus-visible{outline:3px solid #0068FF;outline-offset:3px}
.zalo-fab svg{width:36px;height:36px;display:block}
@media (max-width:700px){
  .zalo-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:54px;height:54px}
  .zalo-fab svg{width:33px;height:33px}
}
@media (prefers-reduced-motion:reduce){
  .zalo-fab{transition:none}
  .zalo-fab:hover,.zalo-fab:focus-visible{transform:none}
}
@media print{.zalo-fab{display:none}}

/* ---------------------------------------------- Markets We Serve (R7 #4)
   The Vietnamese region headings are wider than the 170px column the shared
   stylesheet reserves - "Châu Á – Thái Bình Dương:" measures 222px - so on that
   row the countries began immediately after the heading while the two shorter
   rows lined up at 170px. Widen the column for Vietnamese so all three align.
   vn.css loads after site.css, so the mobile reset has to be restated here or it
   would override the shared stacked layout below 640px. */
.gp-region strong{min-width:234px}
@media (max-width:640px){.gp-region strong{min-width:0}}