/*
 * MAS-UI-P01-F01 | Vietnamese Font & Legibility Fix | 2026-10-23
 * Requires P01. Home only. No remote font dependencies or original stylesheet edits.
 * Reason: the P01 stack listed Lora / Be Vietnam Pro without delivering font files.
 * Consistent installed OS families + safe Vietnamese diacritic line boxes.
 */
body.mas-home-ui {
  --sans: "Segoe UI", Tahoma, Arial, sans-serif;
  --serif: Cambria, "Noto Serif", Georgia, "Times New Roman", serif;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/* Headings: loosen tight tracking / height so Vietnamese tone marks don't touch. */
.mas-home-ui :is(h1, h2, h3) {
  letter-spacing: -0.008em;
  overflow-wrap: break-word;
  line-height: 1.27;
}
.mas-home-ui .brand-name,
.mas-home-ui .brand-name strong { line-height: 1.28; letter-spacing: 0; }
.mas-home-ui .hero h1 { line-height: 1.14; letter-spacing: -0.012em; }
.mas-home-ui .section-heading h2 { line-height: 1.24; letter-spacing: -0.009em; }
.mas-home-ui .booking-heading h2 { line-height: 1.3; }
.mas-home-ui .faq-visual h2 { line-height: 1.25; }
.mas-home-ui .bottom-cta h2 { line-height: 1.26; }
.mas-home-ui .section-heading p { font-size: 14px; line-height: 1.65; }
.mas-home-ui .section-kicker { font-size: 11px; letter-spacing: .12em; }
.mas-home-ui .eyebrow { font-size: 11px; line-height: 1.6; }
.mas-home-ui .hero-lead { font-size: 14px; line-height: 1.7; }
/* Feature strips / benefit descriptions were undersized. */
.mas-home-ui .hero-benefits b { font-size: 12px; line-height: 1.48; }
.mas-home-ui .hero-benefits small { font-size: 11px; line-height: 1.5; }
.mas-home-ui .value-grid b { font-size: 13px; line-height: 1.45; }
.mas-home-ui .value-grid small { font-size: 12px; line-height: 1.5; }
/* Readable business cards. Keep the 4-column desktop and 2-column mobile grids. */
.mas-home-ui .service-info h3 { font-size: 20px; line-height: 1.3; }
.mas-home-ui .service-info p { font-size: 14px; line-height: 1.58; }
.mas-home-ui .service-card .status-text { font-size: 13px; line-height: 1.5; }
.mas-home-ui .price-card h3 { font-size: 19px; line-height: 1.32; }
.mas-home-ui .duration { font-size: 13px; line-height: 1.5; }
.mas-home-ui .price-card li { font-size: 13px; line-height: 1.55; }
.mas-home-ui .price-card .price-unavailable { font-size: 15px; line-height: 1.48; }
.mas-home-ui .price-card .btn { font-size: 13px; line-height: 1.4; }
.mas-home-ui .area-card b { font-size: 13px; line-height: 1.4; }
.mas-home-ui .area-card small { font-size: 12px; line-height: 1.48; }
/* Process / FAQs / footer. */
.mas-home-ui .process-item h3 { font-size: 14px; line-height: 1.45; }
.mas-home-ui .process-item p { font-size: 12.5px; line-height: 1.6; }
.mas-home-ui .faq-visual p { font-size: 13px; line-height: 1.6; }
.mas-home-ui .faq-list summary { font-size: 14px; line-height: 1.5; }
.mas-home-ui .faq-list details p { font-size: 13px; line-height: 1.6; }
.mas-home-ui .footer-grid h3 { font-size: 17px; line-height: 1.35; }
.mas-home-ui .footer-grid a:not(.brand),
.mas-home-ui .footer-grid p { font-size: 13px; line-height: 1.65; }
.mas-home-ui .copyright { font-size: 12px; line-height: 1.55; }
.mas-home-ui .bottom-cta p { font-size: 13px; line-height: 1.6; }
/* Form labels should remain unambiguous even at desktop browser zoom. */
.mas-home-ui .field label { font-size: 13px; line-height: 1.5; }
.mas-home-ui .field :is(input, select) { font-size: 14px; line-height: 1.45; }
.mas-home-ui .booking-heading p { font-size: 13px; line-height: 1.55; }
.mas-home-ui .booking-status,
.mas-home-ui .booking-form-note { font-size: 12.5px; line-height: 1.65; }
.mas-home-ui .btn { font-size: 13px; line-height: 1.45; }
.mas-home-ui .btn-card { font-size: 12.5px; }

@media (min-width: 1181px) {
  .mas-home-ui .main-nav { font-size: 13px; }
}
@media (max-width: 950px) {
  .mas-home-ui .main-nav a { font-size: 14px; }
}
@media (max-width: 640px) {
  body.mas-home-ui { font-size: 14px; line-height: 1.6; }
  .mas-home-ui .hero h1 { line-height: 1.14; letter-spacing: 0; }
  .mas-home-ui .hero-lead { font-size: 12.5px; line-height: 1.55; }
  .mas-home-ui .hero-benefits b { font-size: 11px; line-height: 1.42; }
  .mas-home-ui .hero-benefits small { font-size: 10px; line-height: 1.4; }
  .mas-home-ui .booking-heading h2 { font-size: 21px; line-height: 1.3; }
  .mas-home-ui .booking-heading p { font-size: 12px; }
  .mas-home-ui .field label { font-size: 12px; }
  .mas-home-ui .field :is(input, select) { font-size: 16px; line-height: 1.45; }
  .mas-home-ui .section-heading h2 { font-size: clamp(24px, 6.4vw, 29px); line-height: 1.25; }
  .mas-home-ui .section-heading p { font-size: 12px; line-height: 1.55; }
  .mas-home-ui .service-info h3 { font-size: 16px; line-height: 1.3; }
  .mas-home-ui .service-info p { font-size: 12px; line-height: 1.5; }
  .mas-home-ui .service-card .status-text { font-size: 11.5px; line-height: 1.45; }
  .mas-home-ui .price-card h3 { font-size: 16px; line-height: 1.3; }
  .mas-home-ui .duration { font-size: 11.5px; }
  .mas-home-ui .price-card li { font-size: 12px; line-height: 1.5; }
  .mas-home-ui .price-card .price-unavailable { font-size: 13px; line-height: 1.5; }
  .mas-home-ui .price-card .btn { font-size: 11.5px; line-height: 1.45; }
  .mas-home-ui .area-card b { font-size: 12px; }
  .mas-home-ui .area-card small { font-size: 11px; line-height: 1.4; }
  .mas-home-ui .process-item h3 { font-size: 12.5px; line-height: 1.45; }
  .mas-home-ui .process-item p { font-size: 11.5px; line-height: 1.5; }
  .mas-home-ui .faq-visual h2 { font-size: 24px; line-height: 1.25; }
  .mas-home-ui .faq-visual p { font-size: 12px; }
  .mas-home-ui .faq-list summary { font-size: 12.5px; }
  .mas-home-ui .faq-list details p { font-size: 12px; }
  .mas-home-ui .footer-grid h3 { font-size: 15px; line-height: 1.35; }
  .mas-home-ui .footer-grid a:not(.brand),
  .mas-home-ui .footer-grid p { font-size: 12px; line-height: 1.6; }
  .mas-home-ui .copyright { font-size: 11px; }
  .mas-home-ui .btn-card { font-size: 11.5px; }
  .mas-home-ui .booking-status { font-size: 12px; }
}
@media (max-width: 380px) {
  .mas-home-ui .hero h1 { line-height: 1.16; }
  .mas-home-ui .service-info h3,
  .mas-home-ui .price-card h3 { font-size: 15.5px; }
  .mas-home-ui .price-card .btn { font-size: 11px; padding-inline: 4px; }
}