/* ==========================================================================
   Branch page — Figma "OHIO Hà Nội - v2" 3409:7814, frame 3409:7815 (1920; content column x 330–1590), mobile 3638:13703.
   Layout = frame; type = Style Guide 3655:10163 (tokens). Frame y in comments. This file also loads on the contact and
   about pages (prose / .ohio-br__more / .ohio-br__full) — page rules are scoped to .ohio-br.
   ========================================================================== */
@media (min-width:768px){.ohio-br .ohio-br__m-only{display:none!important}}
@media (max-width:767px){.ohio-br .ohio-br__d-only{display:none!important}}
.ohio-br .qh_tuvan::before,.ohio-br .qh_tuvan::after{content:none;display:none}   /* legacy pulse ring on the popup trigger */
.ohio-br__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:var(--ohio-gap-title)}
.ohio-br__head .ohio-sec-title{margin-bottom:0}
.ohio-br__head-link{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font:600 14px/20px var(--ohio-font-body);color:var(--ohio-purple-700)}
.ohio-br__more{display:flex;align-items:center;justify-content:center;gap:20px;margin:32px 0 0}
.ohio-br__full{margin-top:24px}
.ohio-br__full summary{list-style:none;cursor:pointer}
.ohio-br__full summary::-webkit-details-marker{display:none}
.ohio-br__full .is-less,.ohio-br__full[open] .is-more{display:none}
.ohio-br__full[open] .is-less{display:inline}
.ohio-br__prose{max-width:960px;margin-top:20px}
.ohio-br__prose img{border-radius:var(--ohio-radius-l)}
.ohio-br__prose h2,.ohio-br__prose h3{font:600 var(--ohio-h3-size)/var(--ohio-h3-lh) var(--ohio-font-head);color:var(--ohio-text-heading);text-transform:none}
/* legacy page content (inline arial / Montserrat 900 spans) → guide body type */
.ohio-br .ohio-br__prose :is(p,li,span,b,strong,em,a){font-family:var(--ohio-font-body)!important;font-size:16px!important;line-height:26px!important}
.ohio-br .ohio-br__prose :is(b,strong){font-weight:600!important}
.ohio-br .ohio-br__prose :is(h2,h3,h4) :is(span,b,strong,em){font:inherit!important}
.ohio-br .ohio-br__prose h2{font:700 36px/44px var(--ohio-font-head);text-transform:uppercase}
.ohio-br .ohio-br__prose h3{text-transform:none}
.ohio-br .ohio-br__prose h4{font:600 24px/26px var(--ohio-font-body);color:var(--ohio-purple-900)}

/* ---- shared bits: section bar 32×3 #FF950E (frame 3409:7910), icon masks (img/branch/icon-*.svg) ---- */
.ohio-br .ohio-sec-title--bar::before{width:32px;height:3px;margin-bottom:13px;background:var(--ohio-orange-400)}
.ohio-br__i{display:inline-block;flex:none;width:19px;height:19px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ohio-br__i--cal{width:15px;height:16px}
.ohio-br__i--tel,.ohio-br__i--nav{width:14px;height:14px}
.ohio-br .ohio-btn{border-radius:var(--ohio-radius-m)}
.ohio-br .ohio-container{max-width:1300px}   /* frame content column 1260 (x 330–1590) */

/* ---- hero banner 160–835: full-width image, H1 386, lead 526, buttons 643 (254×52 / 201×52) ---- */
.ohio-br__hero{position:relative;min-height:675px;overflow:hidden}
.ohio-br__hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.ohio-br__hero-in{position:relative;max-width:1300px;padding-top:226px;padding-bottom:40px}
.ohio-br__hero-txt{max-width:530px}
.ohio-br__hero .ohio-h1{margin:0}
.ohio-br__lead{margin:24px 0 0}
.ohio-br__hero-btns{display:flex;gap:19px;margin-top:40px}
.ohio-br__hero-btns .ohio-btn{gap:10px}
.ohio-br__hero-btns .ohio-btn--secondary{min-width:254px}
.ohio-br__hero-btns .ohio-btn--outline{min-width:201px}

/* ---- info card 808–897 (1255×88, overlaps the banner), breadcrumb 945, orange bar 982 ---- */
.ohio-br__top{max-width:1300px;position:relative;margin-top:-27px}
.ohio-br__info{display:grid;grid-template-columns:440px 302px minmax(0,1fr) auto;column-gap:12px;align-items:center;height:88px;margin:0 3px 0 2px;padding:0 18px 0 25px;
  list-style:none;background:#fff;border:1.5px solid var(--ohio-purple-100);border-radius:var(--ohio-radius-m)}
.ohio-br__info li{display:flex;align-items:center;gap:14px;margin:0;min-width:0}
.ohio-br__info li > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.ohio-br__info-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:43px;height:43px;border-radius:var(--ohio-radius-m);background:var(--ohio-purple-100);color:var(--ohio-purple-700)}
.ohio-br__info-l{font:600 var(--ohio-label-size)/var(--ohio-label-lh) var(--ohio-font-body);letter-spacing:var(--ohio-label-ls);text-transform:uppercase;color:var(--ohio-text-muted)}
.ohio-br__info strong{font:600 15px/20px var(--ohio-font-body);color:var(--ohio-text-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:1367px){.ohio-br__info li:nth-child(2) strong{white-space:nowrap}}
.ohio-br__info-cta .ohio-btn{min-width:166px}
.ohio-br__crumbs{margin-top:49px}
.ohio-br__crumbs .ohio-crumbs{margin:0;color:var(--ohio-text-body)}
.ohio-br__crumbs .ohio-crumbs [aria-current]{color:var(--ohio-text-muted);font-weight:700}
.ohio-br__crumbs::after{content:"";display:block;width:32px;height:6px;margin-top:17px;border-radius:3px;background:var(--ohio-orange-400)}

/* ---- about 1019–1553: image 624×532 | text column x 1008 ---- */
.ohio-br__about{padding-top:31px}
.ohio-br__about-in{display:grid;grid-template-columns:624px minmax(0,1fr);column-gap:54px;align-items:start}
.ohio-br__about-img img{display:block;width:100%;height:532px;object-fit:cover;border-radius:var(--ohio-radius-m)}
.ohio-br__about .ohio-sec-title{margin:0 0 20px}
.ohio-br__about .ohio-lead{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 24px}   /* frame intro = 4 lines; full text under Xem toàn bộ giới thiệu */
.ohio-br__points{display:flex;flex-direction:column;gap:16px;margin:0 0 23px;padding:0;list-style:none}   /* 01–03 at y 1225, step 62 */
.ohio-br__points li{display:flex;align-items:flex-start;gap:16px;margin:0}
.ohio-br__points b{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:var(--ohio-purple-100);font:600 13px/18px var(--ohio-font-body);color:var(--ohio-purple-700)}
.ohio-br__points strong{display:block;font:600 16px/26px var(--ohio-font-body);color:var(--ohio-text-body)}
.ohio-br__points small{display:block;font:400 14px/20px var(--ohio-font-body);color:var(--ohio-text-body)}
.ohio-br__needs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin:0 0 20px}
.ohio-br__needs span{margin-right:4px;font:600 13px/18px var(--ohio-font-body);color:var(--ohio-text-muted)}
.ohio-br__needs a{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:14px;background:var(--ohio-purple-100);font:600 13px/18px var(--ohio-font-body);color:var(--ohio-purple-700)}
.ohio-br__needs a:first-of-type{background:var(--ohio-purple-700);color:#fff}
.ohio-br__about .ohio-br__book{min-width:234px}
.ohio-br__about-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.ohio-br__about-act .ohio-br__full{margin:0}
.ohio-br__about-act .ohio-br__full[open]{flex-basis:100%}
.ohio-br__about-act .ohio-br__full summary{display:inline-flex;gap:6px}

/* ---- why 1601–2206: 4 × 296×243 cards, gap 23 / 21 ---- */
.ohio-br__why-sec{padding-top:48px}
.ohio-br__why-sec .ohio-sec-title{margin-bottom:34px}
.ohio-br__why-sec .ohio-sec-title--bar::before{margin-bottom:19px}
.ohio-br__why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px 23px;margin-right:5px}
.ohio-br__why-item{min-height:243px;box-sizing:border-box;padding:28px 20px 20px 24px;border:1.5px solid var(--ohio-purple-100);border-radius:var(--ohio-radius-l);background:#fff}
.ohio-br__why-ico{display:inline-flex;align-items:center;justify-content:center;width:47px;height:47px;border-radius:var(--ohio-radius-m);background:var(--ohio-purple-100);color:var(--ohio-purple-700)}
.ohio-br__why-t{margin:7px 0 16px;font:600 var(--ohio-lead-size)/var(--ohio-lead-lh) var(--ohio-font-body);text-transform:uppercase;color:var(--ohio-text-body)}
.ohio-br__why-item p{margin:0;font:400 var(--ohio-caption-size)/21px var(--ohio-font-body);color:var(--ohio-text-body)}

/* ---- doctors 2253–3062: 4 × 295×612 cards from x 337, gap 24; "Xem thêm" 212×44 at 3018 ---- */
.ohio-br__docs-sec{padding-top:47px}
.ohio-br__docs-sec .ohio-br__head{margin-bottom:41px}
.ohio-br__docs-sec .ohio-sec-title--bar::before{margin-bottom:16px}
.ohio-br__docs-sec .ohio-br__head-link{align-self:flex-end;margin:0 0 12px}
.ohio-br__docs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0 2px 0 7px}
.ohio-br__doc{display:flex;flex-direction:column;min-height:612px;overflow:hidden;border:1.5px solid var(--ohio-purple-50);border-radius:var(--ohio-radius-l);background:#fff}
.ohio-br__doc-img img{display:block;width:100%;height:323px;object-fit:cover;object-position:center top;background:var(--ohio-purple-100)}
.ohio-br__doc-body{flex:1;display:flex;flex-direction:column;padding:21px 20px 0}
.ohio-br__doc-name{margin:0;font:600 var(--ohio-h4-size)/var(--ohio-h4-lh) var(--ohio-font-body);color:var(--ohio-purple-900)}
.ohio-br__doc-name a{color:inherit}
.ohio-br__doc-role{margin:3px 0 0;font:500 14px/20px var(--ohio-font-body);color:var(--ohio-purple-700)}
.ohio-br__doc-bio{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:11px 0 0;font:400 14px/21px var(--ohio-font-body);color:var(--ohio-text-body)}
.ohio-br__tags{display:flex;flex-wrap:wrap;gap:4px 6px;margin:12px 0 0}
.ohio-br__tags span{display:block;max-width:100%;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:5px 10px 6px;border-radius:14px;background:var(--ohio-purple-50);font:500 12px/16px var(--ohio-font-body);color:var(--ohio-purple-700)}
.ohio-br__doc-more{display:inline-flex;align-items:center;gap:8px;margin:auto 0 0;padding:14px 0 31px;border-top:1px solid var(--ohio-neutral-100);font:600 14px/20px var(--ohio-font-body);color:var(--ohio-purple-700)}
.ohio-br__docs-sec .ohio-br__more{margin-top:49px}
.ohio-br__docs-sec .ohio-br__more .ohio-btn{gap:8px}

@media (max-width:1366px) and (min-width:768px){
  .ohio-br__info{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;gap:16px}
  .ohio-br__about-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
}
@media (max-width:1024px) and (min-width:768px){
  .ohio-br__info{height:auto;grid-template-columns:1fr 1fr;padding:16px 20px;gap:14px}
  .ohio-br__why,.ohio-br__docs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .ohio-br__hero{min-height:0;overflow:visible}
  .ohio-br__hero-img{position:static;height:220px;object-position:72% top}
  .ohio-br__hero-in{padding:20px 20px 0}
  .ohio-br__hero .ohio-crumbs{margin:0 0 12px}
  .ohio-br__hero .ohio-label{display:block;margin:0 0 8px}
  .ohio-br__hero .ohio-h1{margin:0 0 12px}
  .ohio-br__lead{margin:0 0 16px}
  .ohio-br__hero-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
  .ohio-br__hero-btns .ohio-btn{min-width:0!important;padding-left:8px;padding-right:8px}
  .ohio-br__book{background:var(--ohio-grad-cta)}
  .ohio-br__top{margin-top:16px}
  .ohio-br__info{display:flex;flex-direction:column;align-items:stretch;height:auto;gap:14px;margin:0;padding:16px;border:0;border-radius:16px;background:var(--ohio-purple-50)}
  .ohio-br__info li{align-items:flex-start;gap:10px}
  .ohio-br__info-ico{width:auto;height:auto;background:none}
  .ohio-br__info strong{white-space:normal}
  .ohio-br__info-cta .ohio-btn{width:100%}
  .ohio-br__about,.ohio-br__why-sec,.ohio-br__docs-sec{padding-top:32px}
  .ohio-br__about-in{display:flex;flex-direction:column;gap:20px}
  .ohio-br__about-img img{height:auto;aspect-ratio:350/250;border-radius:16px}
  .ohio-br__about .ohio-sec-title{margin-bottom:12px}
  .ohio-br__about .ohio-br__book{display:flex;width:100%}
  .ohio-br__why-sec .ohio-sec-title,.ohio-br__docs-sec .ohio-br__head{margin-bottom:20px}
  .ohio-br__why{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
  .ohio-br__why-item{min-height:0;padding:16px}
  .ohio-br__why-ico{width:40px;height:40px}
  .ohio-br__why-t{margin:12px 0 6px;font-size:15px;line-height:22px}
  .ohio-br__docs{display:flex;gap:16px;margin:0 -20px;padding:0 20px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none}
  .ohio-br__doc{flex:0 0 260px;min-height:0;scroll-snap-align:start}
  .ohio-br__doc-img img{height:260px}
  .ohio-br__doc-more{padding-bottom:16px;margin-top:16px}
  .ohio-br__docs-sec .ohio-br__more{justify-content:space-between;margin-top:20px}
  .ohio-br__docs-sec .ohio-br__more{gap:12px}
  .ohio-br__docs-sec .ohio-br__more .ohio-btn{flex:none;padding:0 14px}
}