/* HTPOS_GOOGLE_SANS_FLEX_V11_20261105
   Measured from user Chrome DevTools screenshots on 2026-11-05 (viewport ~690px).
   Scope: public HT POS marketing pages sharing site-common.php only.
   Preserve logo, mascot, orange palette, features, HTML and app logic.
   Google Sans Flex published under SIL Open Font License 1.1 (Google Fonts).
*/
@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700;800&display=swap");
:root{--htpos-gsf:'Google Sans Flex',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--htpos-gsf)!important;font-size:16px!important;font-weight:400;line-height:1.6!important;-webkit-font-smoothing:antialiased}
/* Leave icon fonts, SVG, logo graphics and small metadata untouched. */
body :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,label,button,input,textarea,select,a){font-family:var(--htpos-gsf)!important}
/* Chrome KiotViet H1 sample: 48px / 700 / 50px / -0.4px. */
body h1{font-size:48px!important;font-weight:700!important;line-height:50px!important;letter-spacing:-.4px!important}
/* Generic KiotViet H2=18px appears to be a small component title; do not shrink every section heading. */
body h2{font-size:36px!important;font-weight:600!important;line-height:1.22!important;letter-spacing:-.4px!important}
/* Chrome KiotViet H3 sample: 20px / 600 / 28px / -0.1px. */
body h3{font-size:20px!important;font-weight:600!important;line-height:28px!important;letter-spacing:-.1px!important}
body p{font-size:16px;line-height:1.6}
/* Navigation: KiotViet 16px / 400 / 25.6px. */
body :is(header nav a,nav a,.navbar a,.main-nav a,.nav-links a){font-size:16px!important;font-weight:400!important;line-height:1.6!important;letter-spacing:normal!important}
/* KiotViet hero lead sample: 18px / 500 / 25.2px. Scope to hero leads only. */
body :is(.hero p,.hero-lead,.hero-subtitle,.hero-description,.hero__description,.hero-copy p,.hero .lead){font-size:18px!important;font-weight:500!important;line-height:25.2px!important;letter-spacing:normal}
/* Generic actions remain restrained for product cards and forms. */
body :is(button,.btn,a.btn,a.button,input[type=submit]){font-size:16px;font-weight:500;line-height:1.5}
/* KiotViet's primary hero CTA is 22px / 400 / 35.2px. */
body :is(.hero .btn,.hero a.btn,.hero .button,.hero button,.hero-actions a,.hero__actions a){font-size:22px!important;font-weight:400!important;line-height:35.2px!important;max-width:100%;box-sizing:border-box}
@media (max-width:767px){
  body h1{font-size:clamp(34px,6.95vw,48px)!important;line-height:1.08!important;letter-spacing:-.4px!important}
  body h2{font-size:28px!important;line-height:1.22!important}
  body h3{font-size:20px!important;line-height:28px!important}
  body :is(.hero p,.hero-lead,.hero-subtitle,.hero-description,.hero__description,.hero-copy p,.hero .lead){font-size:16px!important;line-height:1.5!important}
  body :is(.hero .btn,.hero a.btn,.hero .button,.hero button,.hero-actions a,.hero__actions a){font-size:18px!important;line-height:1.5!important}
}
@media (min-width:768px) and (max-width:1023px){
  body h1{font-size:clamp(40px,4.8vw,48px)!important;line-height:1.08!important}
}