/* ==========================================================================
   Home services (frame y 2104–2877) — Figma page frame 3409:1941 (spec docs/figma/specs-v3/home/).
   Stage = 1920-wide box centred in the section, every px scaled by --u (calc(1 * var(--u)) ≥1400 viewport). Tops = frame y − 2104.
   ========================================================================== */
.ohio-h2svc{position:relative;container-type:inline-size;overflow:hidden;height:calc(773 * min(1px,100vw / 1400));
  background:linear-gradient(#fff 0 calc(32.6 * min(1px,100vw / 1400)),transparent 0),linear-gradient(to top,#422666,#9057bd)}
/* the band svg lives on the stage so its notch stays under the title when the stage scales/crops; root gradient only fills beyond 1920 */
.ohio-h2svc__in{
  --u:min(1px,calc(100cqw / 1400));
  position:absolute;left:50%;top:0;width:calc(1920 * var(--u));height:calc(773 * var(--u));margin-left:calc(-960 * var(--u));
  background:url(../../img/home2/services-band.svg) 0 0/100% 100% no-repeat}
.ohio-h2svc__in *{box-sizing:border-box}
/* title 3798:18391 — calc(36 * var(--u)) Montserrat 600 #5c3d94 uppercase, centre x 959 */
.ohio-h2svc__title{position:absolute;left:calc(959.2 * var(--u));top:calc(40.1 * 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:uppercase}
/* panel frame 3798:19023 1223x552 at (353.8, 2235.4) is the shadow box; white face 3798:19024: 1198.6x527.7 at (360.1, 2243.8), radius 26, hard shadow to the lower right */
.ohio-h2svc__panel{position:absolute;left:calc(353.8 * var(--u));top:calc(131.4 * var(--u));width:calc(1223 * var(--u));height:calc(552 * var(--u))}
.ohio-h2svc__panel::before{content:"";position:absolute;left:calc(6.3 * var(--u));top:calc(8.4 * var(--u));width:calc(1198.6 * var(--u));height:calc(527.7 * var(--u));border-radius:calc(26 * var(--u));background:#fff;
  box-shadow:calc(8 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u)) calc(-3 * var(--u)) rgba(0,0,0,.85)}
/* tabs: cell 200×57.4 at y 2254.6; active = notched gradient svg 3798:19067; text calc(15.3 * var(--u)) #999 / active calc(17.2 * var(--u)) bold white */
.ohio-h2svc__tabs{position:absolute;inset:0;pointer-events:none}
.ohio-h2svc__tab{position:absolute;top:calc(19.2 * var(--u));width:calc(200 * var(--u));height:calc(57.4 * var(--u));margin:0;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;z-index:0;
  font:500 calc(15.324 * var(--u))/calc(18.4 * var(--u)) 'Montserrat',sans-serif;color:#999;text-align:center;text-transform:none;letter-spacing:0}
.ohio-h2svc__tab:nth-child(1){left:calc(98.9 * var(--u))}.ohio-h2svc__tab:nth-child(2){left:calc(301.6 * var(--u))}.ohio-h2svc__tab:nth-child(3){left:calc(495.8 * var(--u))}
.ohio-h2svc__tab:nth-child(4){left:calc(698.2 * var(--u))}.ohio-h2svc__tab:nth-child(5){left:calc(898.2 * var(--u))}
.ohio-h2svc__tab span{position:absolute;left:0;right:0;top:calc(8.6 * var(--u));display:block}
.ohio-h2svc__tab.is-active{font:700 calc(17.24 * var(--u))/calc(20.7 * var(--u)) 'Montserrat',sans-serif;color:#fff}
.ohio-h2svc__tab.is-active::before{content:"";position:absolute;left:0;top:0;width:calc(199.7 * var(--u));height:calc(57.4 * var(--u));z-index:-1;
  background:url(../../img/home2/services-tab-active.svg) 0 0/100% 100% no-repeat}
.ohio-h2svc__tab.is-active:nth-child(1)::before{left:calc(9 * var(--u))}
.ohio-h2svc__line{position:absolute;left:calc(34.2 * var(--u));top:calc(76.6 * var(--u));width:calc(1142.3 * var(--u));height:calc(1 * var(--u));max-width:none}
/* cards 3798:19053..: photos 270.1×316.4 at x 384.7 pitch 293.1, y 2352.1 */
.ohio-h2svc__grid{display:none;position:absolute;left:calc(30.9 * var(--u));top:calc(116.7 * var(--u));gap:calc(23 * var(--u))}
.ohio-h2svc__grid.is-active{display:flex}
.ohio-h2svc__card{display:block;width:calc(270.1 * var(--u));flex:none;text-align:center;text-decoration:none}
.ohio-h2svc__card:nth-child(n+5){display:none}
.ohio-h2svc__photo{display:block;width:calc(270.1 * var(--u));height:calc(316.4 * var(--u));object-fit:cover;border-radius:calc(12 * var(--u));background:#eee;max-width:none}
.ohio-h2svc__name{display:block;margin-top:calc(26.8 * var(--u));height:calc(19 * var(--u));font:600 calc(15.324 * var(--u))/calc(19 * var(--u)) 'Montserrat',sans-serif;color:#1e1e1e;
  transform:translateX(calc(-9 * var(--u)));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ohio-h2svc__more{display:flex;align-items:center;justify-content:center;gap:calc(5 * var(--u));width:calc(114.6 * var(--u));height:calc(27.5 * var(--u));margin:calc(5.7 * var(--u)) auto 0;
  background:url(../../img/home2/services-btn.svg) 0 0/100% 100% no-repeat;font:500 calc(10.957 * var(--u))/1 'Montserrat',sans-serif;color:#422666}
.ohio-h2svc__more img{width:calc(7.2 * var(--u));height:calc(6 * var(--u))}

/* mobile */
@media (max-width:849px){
  .ohio-h2svc{height:auto;padding:0 0 28px;background:linear-gradient(#9057bd,#422666)}
  .ohio-h2svc__in{--u:1px;background:none;position:static;width:auto;height:auto;margin:0;padding:12px 14px 0}
  .ohio-h2svc__title{position:static;transform:none;text-align:center;font-size:24px;line-height:1.3;white-space:normal;padding:18px 0 22px;color:#fff;width:auto}
  .ohio-h2svc__panel{position:static;width:auto;height:auto;padding:14px 12px 20px;border-radius:20px;background:#fff;box-shadow:4px 4px 8px rgba(0,0,0,.4)}
  .ohio-h2svc__panel::before{display:none}
  .ohio-h2svc__tabs{position:static;display:flex;overflow-x:auto;scrollbar-width:none;pointer-events:auto}
  .ohio-h2svc__tab{position:static;flex:0 0 auto;width:auto;min-width:130px;height:auto;padding:10px 12px;border-radius:14px 14px 0 0}
  .ohio-h2svc__tab span{position:static}
  .ohio-h2svc__tab.is-active{background:linear-gradient(135deg,#7a34b0,#422666)}
  .ohio-h2svc__tab.is-active::before{display:none}
  .ohio-h2svc__line{position:static;width:100%;margin:0 0 16px}
  .ohio-h2svc__grid{position:static;display:none;grid-template-columns:repeat(2,1fr);gap:14px}
  .ohio-h2svc__grid.is-active{display:grid}
  .ohio-h2svc__card,.ohio-h2svc__photo{width:100%}
  .ohio-h2svc__photo{height:auto;aspect-ratio:270/316}
  .ohio-h2svc__name{transform:none;font-size:13px;margin-top:10px;height:auto;white-space:normal}
  .ohio-h2svc__more{margin-top:6px}
}

/* card-row arrows exist for the mobile frame only */
.ohio-h2svc__arr{display:none}

/* ≤767: Figma "Trang chủ – Mobile" 3637:7021, Section / Dịch vụ chủ đạo 3765:10813 (390 frame px = page px).
   Gradient 123.7° Tím 700 → Tím 500 (71%), pad 0/20/32, gap 20: white title tab (radius 0 0 28 28, pad 14/28/16)
   · 5 pill tabs 108×46 r23 (white outline; active white) wrapping 3+2, gap 8 · white card row r16 (pad 14/0/16/14,
   shadow 0 10 24 #24123B2E) of 150-wide cards (photo 150×130 r12, gap 12) scrolling sideways, 32 arrows at row y 63. */
@media (max-width:767px){
  .ohio-h2svc{padding:0 0 32px;background:linear-gradient(123.7deg,#422666 0%,#7e5aae 71.43%)}
  .ohio-h2svc__in{display:flex;flex-direction:column;align-items:center;padding:0 20px}
  .ohio-h2svc .ohio-h2svc__title{padding:13px 28px 15px;border-radius:0 0 28px 28px;background:#fff;color:#422666!important}
  .ohio-h2svc__panel{position:relative;left:auto;top:auto;width:100%;margin-top:20px;padding:0;border-radius:0;background:none;box-shadow:none}
  .ohio-h2svc__tabs{flex-wrap:wrap;justify-content:center;gap:8px;overflow:visible}
  /* pills size to their label (frame: 108 each; "THẨM MỸ CÔNG NGHỆ CAO" is 105 wide and touched the curve) with 11px sides,
     min 96 so short labels keep the frame look; rows stay 3 + 2 from 360 up */
  .ohio-h2svc .ohio-h2svc__tab{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:96px;height:46px;padding:0 11px;border:1px solid #fff;border-radius:23px;
    background:transparent;color:#fff;font:600 12px/14px var(--ohio-font-body)!important;text-transform:uppercase}
  .ohio-h2svc .ohio-h2svc__tab.is-active{background:#fff;color:#422666;font-size:12px!important;font-weight:700!important}
  @media (max-width:379px){.ohio-h2svc .ohio-h2svc__tab{min-width:0;padding:0 9px;border-radius:16px}}  /* keeps 3 + 2 at 360 */
  .ohio-h2svc__line{display:none}
  .ohio-h2svc__grid.is-active{display:flex}
  .ohio-h2svc__grid{gap:12px;margin-top:20px;padding:14px 0 16px 14px;border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(36,18,59,.18);
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:14px;scrollbar-width:none}
  .ohio-h2svc__grid::-webkit-scrollbar{display:none}
  .ohio-h2svc__card{flex:0 0 150px;width:150px;scroll-snap-align:start;text-align:left}
  .ohio-h2svc__photo{height:130px;aspect-ratio:auto;border-radius:12px}
  .ohio-h2svc .ohio-h2svc__name{margin-top:8px;font:700 14px/18px var(--ohio-font-body)!important;color:#422666;text-transform:uppercase;overflow:visible}
  .ohio-h2svc .ohio-h2svc__more,.ohio-h2svc .ohio-h2svc__more *{font-size:12px!important;line-height:14px!important;letter-spacing:.66px!important;text-transform:uppercase!important}
  .ohio-h2svc .ohio-h2svc__more{justify-content:flex-start;width:auto;height:auto;margin:8px 0 0;background:none;color:#948da3}
  .ohio-h2svc__more img{display:none}
  .ohio-h2svc__arr{position:absolute;bottom:113px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:0;margin:0;padding:0;
    border:1px solid #dad6e1;border-radius:16px;background:#fff;cursor:pointer;z-index:1}
  .ohio-h2svc__arr--prev{left:8px}.ohio-h2svc__arr--next{right:-8px}
}