/* ==========================================================================
   Home doctors (frame y 777–2104) — Figma DwVsiflHKOGd1W2Wvfdzp8 page frame 3409:1941 (spec docs/figma/specs-v3/home/).
   Everything is placed in frame coordinates inside a 1920-wide stage centred in the section; every px is scaled by
   --u (calc(1 * var(--u)) at ≥1400 viewport, shrinking below). Tops are frame y − 777. ≤calc(849 * var(--u)) stacks (see end of file).
   ========================================================================== */
.ohio-h2doc{position:relative;container-type:inline-size;overflow:hidden;background:#fff;height:calc(1327 * min(1px,100vw / 1400))}
.ohio-h2doc__in{
  --u:min(1px,calc(100cqw / 1400));
  position:absolute;left:50%;top:0;width:calc(1920 * var(--u));height:calc(1327 * var(--u));margin-left:calc(-960 * var(--u))}
.ohio-h2doc__in *{box-sizing:border-box}
/* title 3798:18387 — calc(36 * var(--u)) Montserrat 600 #5c3d94, centre x 941 */
.ohio-h2doc__title{position:absolute;left:calc(941 * var(--u));top:calc(62.2 * var(--u));transform:translateX(-50%);margin:0;white-space:nowrap;width:max-content;
  font:600 calc(36 * var(--u))/calc(44 * var(--u)) 'Montserrat',sans-serif;color:#5c3d94;text-transform:none}

/* featured card 3798:19528 — 1280×558 at (320, 930.7), radius 16, gradient svg */
.ohio-h2doc__feat{position:absolute;left:calc(320 * var(--u));top:calc(153.7 * var(--u));width:calc(1280 * var(--u));height:calc(558 * var(--u));border-radius:calc(16 * var(--u));color:#fff;
  background:url(../../img/home2/doctors-featured-bg.svg) 0 0/100% 100% no-repeat}
.ohio-h2doc__feat>*{position:absolute;margin:0}
.ohio-h2doc__fphoto{left:calc(44.7 * var(--u));top:calc(33 * var(--u));width:calc(420 * var(--u));height:calc(492 * var(--u));object-fit:cover;object-position:top center;border-radius:calc(16 * var(--u));background:#eee8f5}
.ohio-h2doc__pillshadow{left:calc(480.6 * var(--u));top:calc(18.3 * var(--u));width:calc(249.6 * var(--u));height:calc(86.9 * var(--u));max-width:none}
.ohio-h2doc__pill{left:calc(511 * var(--u));top:calc(33 * var(--u));width:calc(196.8 * var(--u));height:calc(34.2 * var(--u));border-radius:calc(17.1 * var(--u));background:#422666;
  font:500 calc(17 * var(--u))/calc(34.2 * var(--u)) 'Montserrat',sans-serif;text-align:center;white-space:nowrap}
.ohio-h2doc__fname{left:calc(507.3 * var(--u));top:calc(80.4 * var(--u));width:calc(760 * var(--u));font:600 calc(41.5 * var(--u))/calc(51 * var(--u)) 'Montserrat',sans-serif;color:#fff;text-transform:uppercase;white-space:nowrap}
.ohio-h2doc__frole{left:calc(510.1 * var(--u));top:calc(134.8 * var(--u));width:calc(700 * var(--u));font:600 calc(24 * var(--u))/calc(26 * var(--u)) 'Be Vietnam Pro',sans-serif;color:#fff}
.ohio-h2doc__fdesc{left:calc(510.5 * var(--u));top:calc(163.1 * var(--u));width:calc(740 * var(--u));font:300 calc(16 * var(--u))/calc(27 * var(--u)) 'Be Vietnam Pro',sans-serif;color:#fff;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ohio-h2doc__rule{left:calc(511.2 * var(--u));top:calc(284.5 * var(--u));width:calc(738.4 * var(--u));height:calc(1 * var(--u))}
.ohio-h2doc__icon--shield{left:calc(604.7 * var(--u));top:calc(306.4 * var(--u));width:calc(40.7 * var(--u));height:calc(47.9 * var(--u))}
.ohio-h2doc__icon--book{left:calc(845.7 * var(--u));top:calc(310.4 * var(--u));width:calc(56.1 * var(--u));height:calc(39.8 * var(--u))}
.ohio-h2doc__icon--hand{left:calc(1094.4 * var(--u));top:calc(306.4 * var(--u));width:calc(56.5 * var(--u));height:calc(48.5 * var(--u))}
.ohio-h2doc__col{top:calc(364.6 * var(--u));width:calc(232 * var(--u));height:calc(170 * var(--u))}
.ohio-h2doc__col--1{left:calc(510.7 * var(--u))}.ohio-h2doc__col--2{left:calc(770.7 * var(--u))}.ohio-h2doc__col--3{left:calc(1022 * var(--u))}
.ohio-h2doc__col h4{margin:0 0 calc(6 * var(--u));font:600 calc(14 * var(--u))/calc(18 * var(--u)) 'Be Vietnam Pro',sans-serif;color:#fff;text-transform:none}
.ohio-h2doc__col p{margin:0;font:400 calc(13 * var(--u))/calc(18 * var(--u)) 'Be Vietnam Pro',sans-serif;color:#fff;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.ohio-h2doc__flink{inset:0;border-radius:calc(16 * var(--u))}

/* slider: cards 301×428.5 at x 319.5 pitch 325.7, y 1582.1; shadow + radius from the card rectangle */
.ohio-h2doc__slider{position:absolute;left:0;top:0;width:calc(1920 * var(--u));height:calc(1327 * var(--u));pointer-events:none}
.ohio-h2doc__slider>*{pointer-events:auto}
.ohio-h2doc__view{position:absolute;left:calc(319.5 * var(--u));top:calc(805.1 * var(--u));width:calc(1279 * var(--u));height:calc(428.5 * var(--u));clip-path:inset(calc(-60 * var(--u)) 0 calc(-60 * var(--u)) 0)}
.ohio-h2doc__track{display:flex;gap:calc(24.7 * var(--u));transition:transform .5s ease;will-change:transform}
.ohio-h2doc__card{position:relative;flex:0 0 calc(301 * var(--u));height:calc(428.5 * var(--u));border-radius:calc(14 * var(--u));overflow:hidden;background:#f9f9f9;
  box-shadow:0 0 calc(14 * var(--u)) rgba(0,0,0,.22);text-decoration:none;display:block}
.ohio-h2doc__photo{display:block;width:calc(301 * var(--u));height:calc(323.3 * var(--u));object-fit:cover;object-position:top center;background:#efe9fb}
.ohio-h2doc__deg,.ohio-h2doc__name{position:absolute;left:calc(8 * var(--u));right:calc(8 * var(--u));text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ohio-h2doc__deg{top:calc(333.2 * var(--u));font:400 calc(19.2 * var(--u))/calc(23 * var(--u)) 'Montserrat',sans-serif;color:#606060}
.ohio-h2doc__name{top:calc(357 * var(--u));font:700 calc(22.4 * var(--u))/calc(27 * var(--u)) 'Montserrat',sans-serif;color:#2c2c2c}
.ohio-h2doc__more{position:absolute;left:calc(97.4 * var(--u));top:calc(391.8 * var(--u));width:calc(106.2 * var(--u));height:calc(25.5 * var(--u));display:flex;align-items:center;justify-content:center;gap:calc(5 * var(--u));
  background:url(../../img/home2/doctors-btn.svg) 0 0/100% 100% no-repeat;font:500 calc(10.2 * var(--u))/1 'Montserrat',sans-serif;color:#422666}
.ohio-h2doc__more img{width:calc(6.7 * var(--u));height:calc(5.6 * var(--u))}
/* arrows 3798:19996 / 19987: 69.1 circle at x 286.3 / 1566.6, y 1720 */
.ohio-h2doc__nav{position:absolute;top:calc(948.3 * var(--u));width:calc(54.3 * var(--u));height:calc(54.3 * var(--u));margin:0;padding:0;border:0;border-radius:50%;background:#fff;
  box-shadow:0 0 calc(12 * var(--u)) rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;min-height:0}
.ohio-h2doc__nav--prev{left:calc(291.6 * var(--u))}.ohio-h2doc__nav--prev svg{transform:scaleX(-1)}
.ohio-h2doc__nav--next{left:calc(1571.9 * var(--u))}
.ohio-h2doc__nav[hidden],.ohio-h2doc__dots[hidden]{display:none}
/* dots 3798:19982: active pill 64×12.1, others circles #ddd, pitch 16 gap; at x 885.7 y 2043.5 */
.ohio-h2doc__dots{position:absolute;left:calc(885.7 * var(--u));top:calc(1266.5 * var(--u));display:flex;gap:calc(16 * var(--u));align-items:center;height:calc(12.1 * var(--u))}
.ohio-h2doc__dots button{min-height:0;min-width:0;flex:none;margin:0;width:calc(12.1 * var(--u));height:calc(12.1 * var(--u));padding:0;border:0;border-radius:calc(6.1 * var(--u));background:#ddd;cursor:pointer;transition:width .25s,background .25s}
.ohio-h2doc__dots button.is-active{width:calc(64 * var(--u));background:#422666}

/* mobile */
@media (max-width:849px){
  .ohio-h2doc{height:auto;padding:28px 0 36px}
  .ohio-h2doc__in{--u:1px;position:static;width:auto;height:auto;margin:0;padding:0 16px}
  .ohio-h2doc__title,.ohio-h2doc__feat,.ohio-h2doc__slider,.ohio-h2doc__view,.ohio-h2doc__dots{position:static;transform:none;width:auto;max-width:100%}
  .ohio-h2doc__title{text-align:center;font-size:26px;line-height:1.25;margin-bottom:20px;white-space:normal}
  .ohio-h2doc__feat{width:auto;height:auto;padding:16px;display:flex;flex-direction:column;gap:10px;margin-bottom:28px;position:relative;left:auto;top:auto;background-size:100% 100%}
  .ohio-h2doc__feat>*{position:static}
  .ohio-h2doc__fphoto{width:100%;height:auto;aspect-ratio:420/492}
  .ohio-h2doc__pillshadow{display:none}
  .ohio-h2doc__pill{width:auto;align-self:flex-start;padding:0 18px;font-size:15px}
  .ohio-h2doc__fname{width:auto;font-size:26px;line-height:1.2;white-space:normal}
  .ohio-h2doc__frole{width:auto;font-size:18px}
  .ohio-h2doc__fdesc{width:auto;font-size:14px;line-height:1.6;-webkit-line-clamp:unset;display:block}
  .ohio-h2doc__rule{width:100%}
  .ohio-h2doc__icon{display:none}
  .ohio-h2doc__col{width:auto;height:auto}
  .ohio-h2doc__col p{-webkit-line-clamp:unset;display:block}
  .ohio-h2doc__col h4{font-size:15px}
  .ohio-h2doc__feat>.ohio-h2doc__flink{position:absolute;inset:0}
  .ohio-h2doc__slider{height:auto;width:auto;pointer-events:auto}
  .ohio-h2doc__view{width:auto;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;clip-path:none;padding:6px 0 14px;scrollbar-width:none}
  .ohio-h2doc__view::-webkit-scrollbar{display:none}
  .ohio-h2doc__track{gap:14px;transform:none!important}
  .ohio-h2doc__card{flex:0 0 72%;scroll-snap-align:start;height:auto;padding-bottom:100px;min-height:0}
  .ohio-h2doc__photo{width:100%;height:auto;aspect-ratio:301/323}
  .ohio-h2doc__deg{top:auto;bottom:70px;font-size:15px}
  .ohio-h2doc__name{top:auto;bottom:42px;font-size:18px}
  .ohio-h2doc__more{top:auto;bottom:10px;left:50%;margin-left:-53px}
  .ohio-h2doc__nav{display:none}
  .ohio-h2doc__dots{justify-content:center;margin-top:10px}
}

/* mobile-only parts (cut-out photo, vision heading, pillar icons, title line breaks) stay out of the desktop layout */
.ohio-h2doc__mcut,.ohio-h2doc__vhead,.ohio-h2doc__micon,.ohio-h2doc__br{display:none}

/* ≤767: Figma "Trang chủ – Mobile" 3637:7021, Section / Đội ngũ bác sĩ 3753:11874 (390 frame px = page px).
   pad 32/20/40, gap 24: title + 40×3 orange bar · card 350×300 r16 · vision (heading + text, gap 12) · 3 pillar cards
   (Tím 50, p16 r16, gap 12) · carousel of 170-wide cards (gap 12) + dot pager. The frame repeats a second 4px pager
   under the first (y 1879): not drawn, its 28px kept as bottom padding so the next section lands on its frame y. */
@media (max-width:767px){
  .ohio-h2doc{padding:32px 20px 68px}
  .ohio-h2doc__in{padding:0}
  .ohio-h2doc .ohio-h2doc__title{margin:0;color:#422666!important}
  .ohio-h2doc__title::after{content:"";display:block;width:40px;height:3px;margin:12px auto 0;border-radius:2px;background:var(--ohio-cta,#f6911c)}
  .ohio-h2doc__feat{display:grid;grid-template-columns:100%;margin:24px 0 0;padding:0;gap:0;background:none;border-radius:0}
  .ohio-h2doc__feat>*{grid-area:1/1;align-self:start;justify-self:start;position:relative;left:auto;top:auto}
  .ohio-h2doc__fphoto,.ohio-h2doc__pillshadow,.ohio-h2doc__rule,.ohio-h2doc__icon,.ohio-h2doc__q{display:none}
  .ohio-h2doc__mcut{display:block;width:100%;height:300px;padding:20px 40px 0 181px;border-radius:16px;object-fit:cover;object-position:top center;
    background:#422666 url(../../img/home2/mobile-doctors-card-bg.webp) center/cover no-repeat}
  .ohio-h2doc__mcut--photo{padding:0 0 0 150px}
  /* overlay 3753:11880: h170 from y130, transparent → Tím 700 90% (at 60%) → Tím 800 */
  .ohio-h2doc__feat>.ohio-h2doc__flink{position:relative;inset:auto;width:100%;height:300px;z-index:1;border-radius:16px;
    background:linear-gradient(180deg,rgba(66,38,102,0) 130px,rgba(66,38,102,.9) 232px,#341d52 300px)}
  .ohio-h2doc__pill,.ohio-h2doc__fname,.ohio-h2doc__frole{z-index:2;pointer-events:none;margin-left:20px}
  .ohio-h2doc .ohio-h2doc__pill{margin-top:166px;width:auto;height:auto;padding:4px 12px;border:1px solid #fff;border-radius:999px;background:#341d52;
    font:500 12px/16px var(--ohio-font-body)!important}
  .ohio-h2doc .ohio-h2doc__fname{margin-top:200px;width:auto;white-space:nowrap;text-transform:none;font-family:var(--ohio-font-body)}
  .ohio-h2doc__fn1,.ohio-h2doc__fn2{display:block}
  .ohio-h2doc__fn1{font:600 18px/22px var(--ohio-font-body);margin-bottom:2px}
  .ohio-h2doc__fn2{font:700 32px/38px var(--ohio-font-body)}
  .ohio-h2doc .ohio-h2doc__frole{margin-top:264px;width:auto;font:600 12px/16px var(--ohio-font-body)!important;letter-spacing:.48px!important;text-transform:uppercase!important}
  /* vision 3753:11888 */
  .ohio-h2doc__feat>.ohio-h2doc__vhead,.ohio-h2doc__feat>.ohio-h2doc__fdesc,.ohio-h2doc__feat>.ohio-h2doc__col{grid-area:auto;justify-self:stretch}
  .ohio-h2doc .ohio-h2doc__vhead{display:block;margin:24px 0 0;font:600 var(--ohio-h3-size)/var(--ohio-h3-lh) var(--ohio-font-head);color:#422666;text-transform:uppercase}
  .ohio-h2doc .ohio-h2doc__fdesc{margin-top:12px;font:400 15px/24px var(--ohio-font-body);color:#544e64}
  /* pillars 3753:11892: white 48 circle with a 26 icon, title 2 lines, text 14/22 */
  .ohio-h2doc .ohio-h2doc__col{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 12px;align-items:center;margin-top:12px;padding:16px;border-radius:16px;background:#f7f3fb}
  .ohio-h2doc .ohio-h2doc__col--1{margin-top:24px}
  .ohio-h2doc__micon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:24px;background:#fff}
  .ohio-h2doc__micon img{width:26px;height:26px}
  .ohio-h2doc__br{display:inline}
  .ohio-h2doc .ohio-h2doc__col h4{margin:0;font:600 16px/22px var(--ohio-font-body);color:#422666}
  .ohio-h2doc .ohio-h2doc__col p{grid-column:1/-1;font:400 14px/22px var(--ohio-font-body);color:#544e64}
  /* carousel 3753:11952: cards 170, border #ECEAF0 r16, photo 200 on Tím 50, body p12 gap 8 */
  .ohio-h2doc__slider{margin-top:24px}
  .ohio-h2doc__view{padding:0}
  .ohio-h2doc__track{gap:12px}
  .ohio-h2doc__card{flex:0 0 170px;display:flex;flex-direction:column;align-items:flex-start;padding:0 0 12px;border:1px solid #eceaf0;border-radius:16px;background:#fff;box-shadow:none}
  .ohio-h2doc__photo{height:200px;aspect-ratio:auto;object-position:top center;background:#f7f3fb}
  .ohio-h2doc__deg,.ohio-h2doc__name,.ohio-h2doc__more{position:static;margin:8px 12px 0;text-align:left}
  .ohio-h2doc .ohio-h2doc__deg{margin-top:12px;padding:4px 10px;border-radius:999px;background:#f7f3fb;font:600 12px/20px var(--ohio-font-body)!important;color:#422666}
  .ohio-h2doc .ohio-h2doc__name{white-space:normal;font:600 16px/24px var(--ohio-font-body)!important;color:#422666}
  .ohio-h2doc .ohio-h2doc__more{width:auto;height:auto;gap:6px;background:none;line-height:20px!important;color:#5e3d8a}
  .ohio-h2doc__more img{display:none}
  .ohio-h2doc__more::after{content:"";width:16px;height:16px;background:url(../../img/home2/mobile-arrow-right.svg) center/16px no-repeat}
  .ohio-h2doc__dots{gap:6px;height:6px;margin-top:16px}
  .ohio-h2doc__dots button{width:6px;height:6px;border-radius:3px;background:#ded0ee}
  .ohio-h2doc__dots button.is-active{width:20px;background:#422666}
}