/* ==========================================================================
   Front page v2 — rebuilt from the page frame, Figma DwVsiflHKOGd1W2Wvfdzp8 "Trang Chủ .1 - v2" (3409:1941).
   Values are frame px at 1920 (docs/figma/specs-v3/home/home-text-spec.tsv). Full-bleed blocks scale with their
   width through container units: calc(N * 100cqw / 1920) = N frame px.
   ========================================================================== */

/* ---------- hero (frame y 131–777) ---------- */
.ohio-h2hero{position:relative;container-type:inline-size;overflow:hidden;background:#fff}
.ohio-h2hero__track{position:relative;height:calc(646 * 100cqw / 1920)}
.ohio-h2hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.ohio-h2hero__slide.is-active{opacity:1;visibility:visible}
.ohio-h2hero__img{display:block;width:100%;height:calc(629 * 100cqw / 1920);object-fit:cover;max-width:none}
.ohio-h2hero__slide--plain .ohio-h2hero__img{height:100%}
.ohio-h2hero__slide>picture{display:contents}   /* optional mobile source (image_mobile) */
.ohio-h2hero__band{position:absolute;left:0;right:0;bottom:0;height:calc(191.5 * 100cqw / 1920);text-align:center}
.ohio-h2hero__shape{position:absolute;inset:0;width:100%;height:100%;display:block}
/* title 50.6px at band-top+42, centre 27px left of the frame centre; subtitle 24px at +107, centre −32px */
.ohio-h2hero__title{position:absolute;left:50%;top:calc(42 * 100cqw / 1920);transform:translateX(calc(-50% - 27.2 * 100cqw / 1920));margin:0;
  font:700 calc(50.618 * 100cqw / 1920)/1.219 'Montserrat',sans-serif;color:#fff;white-space:nowrap;letter-spacing:0;text-transform:none}
.ohio-h2hero__sub{position:absolute;left:50%;top:calc(107.2 * 100cqw / 1920);transform:translateX(calc(-50% - 32.5 * 100cqw / 1920));margin:0;
  font:400 calc(23.977 * 100cqw / 1920)/1.219 'Montserrat',sans-serif;color:#fff;white-space:nowrap}
/* dots: 4 × 37.4×2.26 pills, pitch 45.4, white 40% / active 100%, at hero y 611 */
.ohio-h2hero__dots{position:absolute;left:50%;top:calc(611.8 * 100cqw / 1920);transform:translateX(-50%);display:flex;gap:calc(8.06 * 100cqw / 1920);z-index:2}
.ohio-h2hero__dot{width:calc(37.36 * 100cqw / 1920);height:max(2px,calc(2.26 * 100cqw / 1920));min-height:0;padding:0;margin:0;border:0;border-radius:2px;
  background:rgba(255,255,255,.4);cursor:pointer}
.ohio-h2hero__dot.is-active{background:#fff}
/* arrows: 85.2 white circle, 1.5px #EFE7F8 ring, soft shadow, arrow 28×27 #54317A; at x 74.4 / 1760.8, hero y 229.7 */
.ohio-h2hero__nav{position:absolute;top:calc(229.7 * 100cqw / 1920);z-index:2;display:flex;align-items:center;justify-content:center;
  width:calc(85.2 * 100cqw / 1920);height:calc(85.2 * 100cqw / 1920);min-height:0;padding:0;margin:0;border:0;border-radius:50%;
  background:#fff;box-shadow:inset 0 0 0 1.5px #efe7f8,0 0 calc(10 * 100cqw / 1920) rgba(0,0,0,.12);cursor:pointer}
.ohio-h2hero__nav svg{width:calc(28.1 * 100cqw / 1920);height:auto}
.ohio-h2hero__nav--prev{left:calc(74.4 * 100cqw / 1920)}
.ohio-h2hero__nav--prev svg{transform:scaleX(-1)}
.ohio-h2hero__nav--next{left:calc(1760.8 * 100cqw / 1920)}
.ohio-h2hero__nav:hover{box-shadow:inset 0 0 0 1.5px #ded0ee,0 0 calc(14 * 100cqw / 1920) rgba(66,38,102,.2)}

/* ≤767: Figma "Trang chủ – Mobile" 3637:7021, Section / Hero 3637:7106 — 390×214 window on a 390×230 banner
   (cover, 24px cut at the top), overlay 3753:11864 h110 from banner y120: transparent → Tím 700 90% (55%) → Tím 800;
   title 22/28 + subtitle 12/16 (frame 11 → guide minimum) centred at hero y 140 / 172. No arrows; the frame's pager
   falls outside the 214 window, so slides change by autoplay and swipe (js/ohio-home-v2.js). */
@media (max-width:767px){
  .ohio-h2hero__track{height:214px}
  .ohio-h2hero__img{height:230px;margin-top:-24px;object-fit:cover;object-position:center}
  .ohio-h2hero__slide--plain .ohio-h2hero__img{height:100%;margin-top:0;object-fit:contain;background:#422666}
  .ohio-h2hero__band{top:96px;height:auto;background:linear-gradient(180deg,rgba(66,38,102,0) 0,rgba(66,38,102,.9) 60.5px,#341d52 110px)}
  .ohio-h2hero__shape,.ohio-h2hero__nav,.ohio-h2hero__dots{display:none}
  .ohio-h2hero .ohio-h2hero__title{top:44px;left:0;right:0;transform:none;font:700 22px/28px var(--ohio-font-body)}
  .ohio-h2hero .ohio-h2hero__sub{top:76px;left:0;right:0;transform:none;font:500 12px/16px var(--ohio-font-body)!important;letter-spacing:.44px;text-transform:uppercase}
}

/* legacy page wrapper spacing that sat above the old slider */
.ohio-home2 > .page-wrapper,.ohio-home2 .ohio-h2hero + .row{padding-top:0}