/* OHIO 2026 / 4814:19501. Shared integration; page-specific geometry belongs to phase2. */
html body.ohio-hh #wrapper #main :is(h1,.ohio-h1){font:700 var(--fs-h1)/var(--lh-h1) var(--font-base)!important;text-transform:uppercase!important;letter-spacing:0!important;color:var(--ohio-text-heading)}
html body.ohio-hh #wrapper #main :is(h2,.ohio-h2,.ohio-sec-title){font:700 var(--fs-h2)/var(--lh-h2) var(--font-base)!important;text-transform:uppercase!important;letter-spacing:0!important;color:var(--ohio-text-heading)}
html body.ohio-hh #wrapper #main :is(h3,.ohio-h3){font:600 var(--fs-h3)/var(--lh-h3) var(--font-base)!important;text-transform:none!important;letter-spacing:0!important;color:var(--ohio-text-heading)}
html body.ohio-hh #wrapper #main :is(h4,.ohio-h4){font:600 var(--fs-h4)/var(--lh-h4) var(--font-base)!important;text-transform:none!important;letter-spacing:0!important;color:var(--ohio-text-subheading)}
/* Plain spans inherit naturally; keep their explicit caption/badge styles when present. */
html body.ohio-hh #wrapper #main :is(h1,h2,h3,h4) :is(a,strong,b){font:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;color:inherit}
html body.ohio-hh #wrapper #main .ohio-on-dark :is(h1,h2,h3,h4){color:var(--ohio-text-on-dark)}
html body :is(.ohio-label,[data-sg-type=label]){font:600 var(--fs-label)/var(--lh-label) var(--font-base)!important;letter-spacing:.6px!important;text-transform:uppercase!important;color:var(--ohio-text-label)}
html body :is(.ohio-caption,figcaption){font:400 var(--fs-caption)/var(--lh-caption) var(--font-base);letter-spacing:0;text-transform:none;color:var(--ohio-text-muted)}
/* Standard text CTAs. Circular fixed icon controls have dedicated rules below. */
html body.ohio-hh #wrapper :is(.ohio-btn,.ohio-hh-cta,.ohio-mm-cta){font:600 14px/20px var(--font-base)!important;letter-spacing:.6px!important;text-transform:uppercase!important;border-radius:12px!important;box-sizing:border-box;gap:10px}
html body.ohio-hh #wrapper :is(.ohio-btn,.ohio-hh-cta,.ohio-mm-cta) :is(span,b,strong){font:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important}
html body.ohio-hh #wrapper :is(.ohio-hh-cta,.ohio-mm-cta){height:44px!important;padding:0 var(--ohio-button-padding)!important;background:var(--ohio-cta-bg)!important;color:var(--ohio-text-on-dark)!important;border:0!important}
html body.ohio-hh #wrapper :is(.ohio-hh-cta,.ohio-mm-cta):hover{background:var(--ohio-cta-bg-hover)!important;filter:none}
html body.ohio-hh #wrapper :is(.ohio-hh-cta,.ohio-mm-cta):active{background:var(--ohio-cta-bg-active)!important}
html body.ohio-hh #wrapper .ohio-hh-cta__arrow{width:16px;height:16px;background:none;line-height:16px;flex:none}
/* header CTA = Home frame "[surface] CTA / Đặt lịch khám" (owner 23/10, follow Figma): 48 tall, padding 6/6/6/24, gap 12, arrow tile 36 r8 white/20 % */
@media (min-width:850px){
html body.ohio-hh #wrapper #header .ohio-hh-cta{height:48px!important;padding:6px 6px 6px 24px!important;gap:12px}
html body.ohio-hh #wrapper #header .ohio-hh-cta .ohio-hh-cta__arrow{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.2);line-height:36px}
html body.ohio-hh #wrapper #header .ohio-hh-hotline__num{font-weight:600!important}   /* frame: number SemiBold 600, label 12 (owner 23/10: follow Figma) */
html body.ohio-hh #wrapper #header .ohio-hh-hotline__label{font-size:12px!important}
}
html body.ohio-hh #wrapper .ohio-btn--link{letter-spacing:0!important;text-transform:none!important}
.qh_tuvan::before,.qh_tuvan::after{display:none!important}
/* Menus use the real Medium500 face, even where Flatsome sets a font shorthand. */
html body.ohio-hh #wrapper #header .header-bottom .nav > li > a,
html body.ohio-hh #wrapper #header .nav-dropdown a,
html body.ohio-hh #wrapper .ohio-mega-card__name,
html body .qh-mm .qh-mm-menu a{font:500 var(--fs-menu)/var(--lh-menu) var(--font-base)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ohio-neutral-700)}
html body.ohio-hh #wrapper #header .header-bottom .nav > li > a{color:var(--ohio-text-on-dark)!important;text-transform:none!important}
html body.ohio-hh #wrapper #header .header-bottom .nav > li:is(:hover,:focus-within,.active,.current-menu-ancestor) > a{color:var(--ohio-text-on-dark)!important}
/* Đạt 1984232469: top-level desktop menu uses Header 4724:15837's text style.
   Mega-menu cards and the mobile drawer retain their existing styles. */
@media(min-width:1024px){
html body.ohio-hh #wrapper #header .header-bottom .nav > li > a{font:600 13px/18px var(--font-base)!important;letter-spacing:.6px!important;text-transform:uppercase!important;text-align:center}
/* Đạt 1984328243, 4823:21972: shared dropdown component's Bold 15/20 style, including level 2. */
html body.ohio-hh #wrapper #header .header-bottom .nav-dropdown a{font:700 15px/20px var(--font-base)!important}
}
.ohio-hh #header .ohio-hh-hotline__label,.ohio-mm-tel__label{font:600 var(--fs-label)/var(--lh-label) var(--font-base)!important;letter-spacing:.6px!important;text-transform:uppercase!important;color:var(--ohio-text-label)}
.ohio-hh #header .ohio-hh-hotline__num,.ohio-mm-tel__num{font:700 var(--fs-h4)/var(--lh-h4) var(--font-base)!important;letter-spacing:0;color:var(--ohio-text-heading)}
/* Footer: authored copy stays in UX Builder/options; all dark-background text uses the on-dark variable. */
html body.ohio-hh #wrapper .ohio-footer{font:400 var(--fs-caption)/var(--lh-caption) var(--font-base);color:var(--ohio-text-on-dark)}
html body.ohio-hh #wrapper .ohio-footer :is(p,a,li,span){font-family:var(--font-base);letter-spacing:0;text-transform:none;color:var(--ohio-text-on-dark)}
html body.ohio-hh #wrapper .ohio-footer :is(.ohio-footer__intro,.ohio-footer__li,.ohio-footer__addr,.ohio-footer__lic,.ohio-footer__copy,.ohio-footer__policies a,.ohio-footer__kicker){font:400 var(--fs-caption)/var(--lh-caption) var(--font-base)!important;color:var(--ohio-text-on-dark)!important}
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer .ohio-footer__title{font:600 22px/30px var(--font-base)!important;letter-spacing:0!important;text-transform:uppercase!important;color:var(--ohio-text-on-dark)}
html body.ohio-hh #wrapper .ohio-footer .ohio-footer__branch-name{font:600 var(--fs-h4)/var(--lh-h4) var(--font-base)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ohio-text-on-dark)}
/* Figma footer: hotline 600 13/20 (PC 4724:14031 4164:9860), 14/22 (mobile 4823:24087); column heading 22/30 (mobile 18/26) */
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer .ohio-footer__tel,html body.ohio-hh :is(#wrapper,#footer) .ohio-footer .ohio-footer__tel a{font:600 13px/20px var(--font-base)!important}
@media(max-width:1023px){
  html body.ohio-hh :is(#wrapper,#footer) .ohio-footer .ohio-footer__title{font-size:18px!important;line-height:26px!important}
  html body.ohio-hh :is(#wrapper,#footer) .ohio-footer .ohio-footer__tel,html body.ohio-hh :is(#wrapper,#footer) .ohio-footer .ohio-footer__tel a{font-size:14px!important;line-height:22px!important}
  html body.ohio-hh :is(#wrapper,#footer) .ohio-footer .ohio-footer__policies a{font-size:13px!important;line-height:20px!important}
}
/* Fixed docks: preserve configured links and labels. No synthetic Zalo action or hidden admin actions. */
/* Desktop booking keeps its Figma purple gradient in ohio-floatbar.css (4724:15835). */
@media(max-width:849px){
  /* The mobile dock uses the Figma geometry/gradients in ohio-mobile.css and the admin's DOM order. */
  .ohio-footer{padding-bottom:max(104px,calc(72px + env(safe-area-inset-bottom)))}
  .qh-mm .ohio-mm-cta{height:44px;padding:0 20px;font:600 14px/20px var(--font-base);letter-spacing:.6px;background:var(--ohio-cta-bg)}
}

html body{font:400 var(--fs-body)/var(--lh-body) var(--font-base)!important}
.qh-mm .ohio-mm-cta img{width:16px;height:16px}
.ohio-h2svc__tab{color:var(--ohio-neutral-700)!important}

.ohio-hh #header .ohio-hh-hotline__num,.ohio-mm-tel__num{text-transform:none!important}
.qh-mm .qh-mm-menu > li > a{display:flex;align-items:center;box-sizing:border-box;min-height:52px}
.qh-mm .qh-mm-menu ul.sub-menu a{display:flex;align-items:center;box-sizing:border-box;min-height:44px}
.qh-mm .qh-mm-menu .ohio-mm-all > a{font:600 14px/20px var(--font-base)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ohio-text-link)!important}
/* Actions remain admin-configured. Extra actions remain visible until the owner reconciles the option rows. */
@media(min-width:850px){
  .ohio-hh #header .header-main{border-bottom:1px solid var(--ohio-border);box-sizing:border-box}
  .ohio-hh #header .header-main .header-inner{margin-bottom:7px}
  /* float bar = frame 4724:14031 "Thanh neo" (owner 23/10, follow Figma): white pill 64x226 (r32, pad 8, gap 6: Messenger, Chi duong, Uu dai, Dat lich, each a 48 slot around a 44 / 40 button)
     + 16 + the 64 white call circle = 306; ohio-floatbar.css draws the two groups.
     Position (S3 r3): the frames drop the stack at y 400 (17 of 22 frames), Home 393.6, News 377, Knowledge 403; x 1844.4 (11.6 from the right edge, the admin side option writes 10 -> margin 1.6);
     the 306-high stack never leaves the viewport on short screens */
  .qh-fb{--ohio-fb-top:400px;top:min(var(--ohio-fb-top),max(16px,calc(100vh - 322px)))!important;bottom:auto!important;transform:none!important;margin-right:1.6px;display:flex;flex-direction:column;align-items:center}
  body.home .qh-fb{--ohio-fb-top:393.6px}
  body.category-tin-tuc-su-kien .qh-fb{--ohio-fb-top:377px}
  body.category-kien-thuc-da-lieu .qh-fb{--ohio-fb-top:403px}
  .qh-fb .qh-fb-ico{pointer-events:auto}
  .qh-fb .qh-fb-group:first-child .qh-fb-ico:not(.qh-fb--booking){margin:2px}
  .qh-fb .qh-fb-ico.qh-fb--booking{margin:4px!important}
}
.ohio-footer{padding:72px 20px 0}
@media(max-width:1023px){.ohio-footer{padding-top:40px}}
@media(max-width:849px){.ohio-footer{padding-bottom:max(104px,calc(72px + env(safe-area-inset-bottom)))}}
.qh-mm .ohio-mm-cta:hover{background:var(--ohio-cta-bg-hover)}
.qh-mm .ohio-mm-cta:active{background:var(--ohio-cta-bg-active)}
.ohio-on-dark .ohio-btn--link,.ohio-on-dark .ohio-btn--link::after{color:var(--ohio-text-on-dark)}

/* Figma casing (owner 22/10): the case of every text follows the revised frame; only menus stay sentence case as typed. The frames type these
   labels in capitals (or use an uppercase style) where the role rules print sentence case; the two branch-index button rows are sentence case.
   CSS only, admin text is never rewritten. #main (+ the page prefix) outranks the page rule sets that print sentence case with !important.
   Services card names (home2/services.css) and stories group titles (ohio-listing-stories.css) are fixed at their source rule.
   Sweep + probes: scripts/hn-casing-sweep.mjs; audit variants figmaUpperPc / figmaSentenceButtonPc / storyListGroupTitle. */
@media(min-width:1024px){
html body.ohio-hh #wrapper #main .ohio-ab .ohio-ab__core-t,
html body.ohio-hh #wrapper #main .ohio-ab .ohio-ab__mv-t,
html body.ohio-hh #wrapper #main .ohio-ab .ohio-ab__br-rows small,
html body.ohio-hh #wrapper #main .ohio-doc__name,
html body.ohio-hh #wrapper #main .ohio-dsp-spec li span,
html body.ohio-hh #wrapper #main .ohio-dsp-sub,
html body.ohio-hh #wrapper #main .ohio-dsp .ohio-dsp-hero__creds-h,
html body.ohio-hh #wrapper #main .ohio-dsp .ohio-dsp-hero__creds-h span,
html body.ohio-hh #wrapper #main .ohio-bri__std-card strong,
html body.ohio-hh #wrapper #main .ohio-bri__row--clock strong,
html body.ohio-hh #wrapper #main .ohio-bri__panel-t,
html body.ohio-hh #wrapper #main .ohio-bri__panel-t a,
html body.ohio-hh #wrapper #main .ohio-br__why-t,
html body.ohio-hh #wrapper #main .ohio-br__needs a,
html body.ohio-hh #wrapper #main .ohio-br .ohio-br__info-l,
html body.ohio-hh #wrapper #main .ohio-lh__ch-txt small{text-transform:uppercase!important}
  html body.ohio-hh #wrapper #main :is(.ohio-bri__hero-btns,.ohio-bri__card-btns) .ohio-btn{text-transform:none!important}
}