/* ==========================================================================
   Home "Tại sao chọn OHIO" (frame y 4384.2–5854, 1920 wide). Everything is placed in frame px through --u
   (1px at ≥1920, scales down with the container below); coordinates in comments are relative to the section top
   (frame y − 4384.2) or to the parent noted. Sources: home-text-spec.tsv / home-boxes.tsv (box + 10.2, 10.4).
   ========================================================================== */
.ohio-h2why{position:relative;container-type:inline-size;background:rgba(132,132,132,.05);overflow:hidden}
.ohio-h2why__stage{--u:min(1px,calc(100cqw / 1920));position:relative;width:calc(1920 * var(--u));height:calc(1469.8 * var(--u));margin:0 auto;
  font-family:'Montserrat',sans-serif;color:#422666}
.ohio-h2why ul,.ohio-h2why p,.ohio-h2why h2{margin:0;padding:0;list-style:none}
.ohio-h2why img{display:block;max-width:none}
.ohio-h2why a{text-decoration:none}

/* title 3798:18999 — x 767.9 y 54.5, 36px SemiBold #5c3d94 */
.ohio-h2why__title{position:absolute;left:calc(767.9 * var(--u));top:calc(54.5 * var(--u));width:calc(341 * var(--u));white-space:nowrap;
  font:600 calc(36 * var(--u))/1.219 'Montserrat',sans-serif;color:#5c3d94;text-transform:none;letter-spacing:0}

/* panel 3798:18367 — x 329.6 y 136.4, 1242.8×677.7, purple gradient svg */
.ohio-h2why__panel{position:absolute;left:calc(329.6 * var(--u));top:calc(136.4 * var(--u));width:calc(1242.8 * var(--u));height:calc(677.7 * var(--u));
  background:url(../../img/home2/why-panel.svg) 0 0/100% 100% no-repeat}
/* licence cards 3798:19592–95 — white 281.5×302 r7.1; cols x 24.9 / 324.4, rows y 36 / 350.2 (panel) */
.ohio-h2why__lic{position:absolute;width:calc(281.5 * var(--u));height:calc(302 * var(--u));background:#fff;border-radius:calc(7.13 * var(--u))}
.ohio-h2why__lic:nth-child(1){left:calc(24.9 * var(--u));top:calc(36 * var(--u))}
.ohio-h2why__lic:nth-child(2){left:calc(324.4 * var(--u));top:calc(36 * var(--u))}
.ohio-h2why__lic:nth-child(3){left:calc(24.9 * var(--u));top:calc(350.2 * var(--u))}
.ohio-h2why__lic:nth-child(4){left:calc(324.4 * var(--u));top:calc(350.2 * var(--u))}
.ohio-h2why__lic img{position:absolute;left:calc(8 * var(--u));top:calc(6.8 * var(--u));width:calc(268 * var(--u));height:calc(201.8 * var(--u));object-fit:cover}
/* zoom badge 3798:19619 / 19630 (22.9 round, ring #653C8D) drawn on cards 1 and 3 only: card+(245,177.7) / (240.5,178.2) */
.ohio-h2why__lic:nth-child(1)::after,.ohio-h2why__lic:nth-child(3)::after{content:"";position:absolute;width:calc(23.96 * var(--u));height:calc(23.96 * var(--u));background:url(../../img/home2/why-lic-zoom.svg) 0 0/100% 100%}
.ohio-h2why__lic:nth-child(1)::after{left:calc(244.5 * var(--u));top:calc(177.2 * var(--u))}
.ohio-h2why__lic:nth-child(3)::after{left:calc(240 * var(--u));top:calc(177.7 * var(--u))}
/* caption: 14.213px, 2 × SemiBold lines (pitch 21.1) + Medium licence no. 25 below; first line at card+221.9 */
.ohio-h2why__lic p{position:absolute;left:0;right:0;top:calc(221.9 * var(--u));text-align:center;font-size:calc(14.213 * var(--u));line-height:calc(21.1 * var(--u));color:#422666;white-space:nowrap}
.ohio-h2why__lic b{display:block;font-weight:600}
.ohio-h2why__lic span{display:block;margin-top:calc(4 * var(--u));font-weight:500}

/* mosaic tiles (panel coords): tile box + the full photo box that the Figma mask crops (offset/size from 3798:20008–20032) */
.ohio-h2why__tile{position:absolute;overflow:hidden;border-radius:calc(8 * var(--u))}
.ohio-h2why__tile img{position:absolute}
.ohio-h2why__tile--a{left:calc(625.2 * var(--u));top:calc(36 * var(--u));width:calc(302.1 * var(--u));height:calc(431.9 * var(--u))}
.ohio-h2why__tile--a img{left:calc(-171.6 * var(--u));top:calc(-21.9 * var(--u));width:calc(768.8 * var(--u));height:calc(492.8 * var(--u))}
.ohio-h2why__tile--b{left:calc(943.9 * var(--u));top:calc(36 * var(--u));width:calc(274.3 * var(--u));height:calc(168.1 * var(--u))}
.ohio-h2why__tile--b img{left:calc(-7.3 * var(--u));top:calc(-12.7 * var(--u));width:calc(289.2 * var(--u));height:calc(192.8 * var(--u))}
.ohio-h2why__tile--c{left:calc(943.9 * var(--u));top:calc(496.9 * var(--u));width:calc(274.3 * var(--u));height:calc(155.7 * var(--u))}
.ohio-h2why__tile--c img{left:0;top:calc(-112.4 * var(--u));width:calc(274.4 * var(--u));height:calc(411.6 * var(--u))}
.ohio-h2why__tile--d{left:calc(627.7 * var(--u));top:calc(479 * var(--u));width:calc(299.7 * var(--u));height:calc(173.6 * var(--u))}
.ohio-h2why__tile--d img{left:calc(-15.4 * var(--u));top:calc(-23.7 * var(--u));width:calc(331.8 * var(--u));height:calc(221.2 * var(--u))}
.ohio-h2why__tile--e{left:calc(943.9 * var(--u));top:calc(213.3 * var(--u));width:calc(274.3 * var(--u));height:calc(274.3 * var(--u))}
.ohio-h2why__tile--e img{left:calc(-88.5 * var(--u));top:calc(-39.6 * var(--u));width:calc(475.2 * var(--u));height:calc(316.8 * var(--u))}

/* "Xem thêm →" 3798:19333 — x 852.2 y 851.4, 215.5×51.7, 1.29px #422666 r13.6; text 21px Medium at +40.7 */
.ohio-h2why__more{position:absolute;left:calc(852.2 * var(--u));top:calc(851.4 * var(--u));box-sizing:border-box;width:calc(215.5 * var(--u));height:calc(51.7 * var(--u));
  display:flex;align-items:center;padding-left:calc(40.7 * var(--u));gap:calc(7.7 * var(--u));border:calc(1.29 * var(--u)) solid #422666;border-radius:calc(13.6 * var(--u));
  font:500 calc(21 * var(--u))/1 'Montserrat',sans-serif;color:#422666;white-space:nowrap;transition:background .2s,color .2s}
.ohio-h2why__more .ohio-h2why__arr{width:calc(13.5 * var(--u));height:auto}
.ohio-h2why__more:hover{background:#422666;color:#fff}

/* image cards (frame y 5350.3 → section 966.1): x 323.4 / 649.4 / 975.4 / 1303.3, photo 300.4×314.3, notch clip */
.ohio-h2why__card{position:absolute;top:calc(966.1 * var(--u));width:calc(300.4 * var(--u));height:calc(417.9 * var(--u))}
.ohio-h2why__card:nth-child(1){left:calc(323.4 * var(--u))}
.ohio-h2why__card:nth-child(2){left:calc(649.4 * var(--u))}
.ohio-h2why__card:nth-child(3){left:calc(975.4 * var(--u))}
.ohio-h2why__card:nth-child(4){left:calc(1303.3 * var(--u))}
.ohio-h2why__frame{position:relative;width:100%;height:calc(314.3 * var(--u))}
.ohio-h2why__photo{display:block;width:100%;height:calc(314.3 * var(--u));clip-path:url(#ohio-h2why-notch);overflow:hidden}
.ohio-h2why__photo{position:relative}
.ohio-h2why__photo img{position:absolute;transition:transform .5s ease}
/* photo box (rect 3798:19445/19487/19466/19524) relative to the 300.4×314.3 window */
.ohio-h2why__card:nth-child(1) .ohio-h2why__photo img{left:calc(-8 * var(--u));top:calc(-3.4 * var(--u));width:calc(316.4 * var(--u));height:calc(316.4 * var(--u))}
.ohio-h2why__card:nth-child(2) .ohio-h2why__photo img{left:calc(-119.8 * var(--u));top:calc(-.9 * var(--u));width:calc(517.8 * var(--u));height:calc(330.4 * var(--u))}
.ohio-h2why__card:nth-child(3) .ohio-h2why__photo img{left:calc(-108.8 * var(--u));top:calc(-27 * var(--u));width:calc(518 * var(--u));height:calc(341.2 * var(--u))}
.ohio-h2why__card:nth-child(4) .ohio-h2why__photo img{left:calc(-113.1 * var(--u));top:calc(-28.6 * var(--u));width:calc(514.2 * var(--u));height:calc(342.8 * var(--u))}
.ohio-h2why__card:hover .ohio-h2why__photo img{transform:scale(1.04)}
/* outline stroke #422666 (3798:19449, 301.4×315.3 at −0.5) and round "+" badge 37.06 at (260.5, 272.3) */
.ohio-h2why__outline{position:absolute;left:calc(-.5 * var(--u));top:calc(-.5 * var(--u));width:calc(301.425 * var(--u));height:calc(315.252 * var(--u));pointer-events:none}
.ohio-h2why__badge{position:absolute;left:calc(260.5 * var(--u));top:calc(272.3 * var(--u));width:calc(37.06 * var(--u));height:calc(37.06 * var(--u));pointer-events:none}
/* caption 14px SemiBold, 2 lines pitch 23.5 at +335.2; pill 106.2×25.5 at +392.4 (r6.4, .635 border, 10.158 Medium) */
.ohio-h2why__cap{position:absolute;left:calc(-.8 * var(--u));top:calc(332.3 * var(--u));white-space:nowrap;font:600 calc(14 * var(--u))/calc(23.5 * var(--u)) 'Montserrat',sans-serif}
.ohio-h2why__cap a{color:#000}
.ohio-h2why__cap a:hover{color:#5c3d94}
.ohio-h2why__pill{position:absolute;left:0;top:calc(392.4 * var(--u));box-sizing:border-box;width:calc(106.2 * var(--u));height:calc(25.5 * var(--u));display:flex;align-items:center;
  padding-left:calc(20 * var(--u));gap:calc(4.5 * var(--u));border:calc(.635 * var(--u)) solid #422666;border-radius:calc(6.4 * var(--u));
  font:500 calc(10.158 * var(--u))/1 'Montserrat',sans-serif;color:#422666;white-space:nowrap;transition:background .2s,color .2s}
.ohio-h2why__pill .ohio-h2why__arr{width:calc(6.67 * var(--u));height:auto}
.ohio-h2why__pill:hover{background:#422666;color:#fff}

/* ≤849: stack — title, licence 2×2, photo mosaic grid, button, cards 2×2 */
@media (max-width:849px){
  .ohio-h2why__stage{--u:1px;width:auto;height:auto;padding:36px 16px 40px;box-sizing:border-box}
  .ohio-h2why__title,.ohio-h2why__panel,.ohio-h2why__lic,.ohio-h2why__more,.ohio-h2why__card,.ohio-h2why__cap,.ohio-h2why__pill{position:static}
  .ohio-h2why__title{width:auto;text-align:center;font-size:26px;white-space:normal;margin-bottom:20px}
  .ohio-h2why__panel{height:auto;width:auto;padding:14px;border-radius:12px;background:linear-gradient(90deg,#422666,#6f4298 60%,#ab67db);display:block}
  .ohio-h2why__lics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ohio-h2why__lic{width:auto;height:auto;padding:6px 6px 12px;box-sizing:border-box}
  .ohio-h2why__lic::after{display:none!important}
  .ohio-h2why__lic img{position:static;width:100%;height:auto}
  .ohio-h2why__lic p{position:static;padding-top:8px;white-space:normal;font-size:11px;line-height:1.4}
  .ohio-h2why__mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .ohio-h2why__tile{position:relative;left:auto!important;top:auto!important;width:auto;height:auto;aspect-ratio:4/3;border-radius:8px}
  .ohio-h2why__tile img{left:0;top:0;width:100%;height:100%;object-fit:cover}
  .ohio-h2why__tile--a{grid-row:span 2;aspect-ratio:auto}
  .ohio-h2why__more{width:auto;max-width:240px;height:52px;margin:24px auto;justify-content:center;padding:0 24px;border-width:1.3px;font-size:18px;display:flex}
  .ohio-h2why__more .ohio-h2why__arr{width:13px}
  .ohio-h2why__cards{display:grid;grid-template-columns:1fr 1fr;gap:24px 14px}
  .ohio-h2why__card{width:auto;height:auto;position:relative;top:auto;left:auto!important}
  .ohio-h2why__frame{height:auto;aspect-ratio:300/314}
  .ohio-h2why__photo{height:100%}
  li.ohio-h2why__card:nth-child(n) .ohio-h2why__photo img{left:0;top:0;width:100%;height:100%;object-fit:cover}
  .ohio-h2why__outline,.ohio-h2why__badge{width:calc(100% + 1px);height:auto;aspect-ratio:301/315}
  .ohio-h2why__badge{width:12%;left:86.5%;top:86.6%;height:auto;aspect-ratio:1}
  .ohio-h2why__cap{margin-top:10px;white-space:normal;font-size:12px;line-height:1.5}
  .ohio-h2why__cap br{display:none}
  .ohio-h2why__cap{margin-top:10px}
  .ohio-h2why__pill{display:flex;margin-top:8px;width:92px;height:24px;font-size:10px;padding-left:16px}
  .ohio-h2why__pill .ohio-h2why__arr{width:6px}
}
.ohio-h2why__mtxt{display:none}   /* mobile frame only */

/* ≤767: Figma "Trang chủ – Mobile" 3637:7021, Section / Tại sao chọn OHIO 3765:10897 (390 frame px = page px).
   Grey 50, pad 40/20, gap 20: title + bar · licence card 350×300 r16 (gradient 139° #5E3D8A → #341D52 71%, facility
   photo 220×300 on the right, 4 licence scans 118×62 r6 with a 2px white border at x 12, y 12 + 68n, overlay h130 from
   y 170, caption 16/22 ×2 + "Xem thêm →" 13 at y 214 = 16 above the bottom) · 2×2 reasons (168 wide, gap 20/14): photo 168×176 r12 with a
   34 "+" badge at (128,136), caption 13/18 uppercase, "Xem thêm →" 12/16 uppercase. */
@media (max-width:767px){
  .ohio-h2why{background:#f6f5f8}
  .ohio-h2why__stage{display:flex;flex-direction:column;gap:20px;padding:40px 20px}
  .ohio-h2why .ohio-h2why__title{margin:0;color:#422666!important}
  .ohio-h2why__title::after{content:"";display:block;width:40px;height:3px;margin:12px auto 0;border-radius:2px;background:var(--ohio-cta,#f6911c)}
  .ohio-h2why__panel{position:relative;left:auto;top:auto;height:300px;padding:0;border-radius:16px;overflow:hidden;
    background:url(../../img/home2/why-mobile-facility.webp) 130px 0/220px 300px no-repeat,linear-gradient(139.4deg,#5e3d8a 0%,#341d52 71.43%)}
  .ohio-h2why__panel::after{content:"";position:absolute;left:0;right:0;top:170px;height:130px;background:linear-gradient(180deg,rgba(52,29,82,0),rgba(52,29,82,.88) 55%,#341d52)}
  .ohio-h2why__lics{display:flex;flex-direction:column;gap:6px;padding:12px 0 0 12px}
  .ohio-h2why__lic{box-sizing:border-box;width:118px;height:62px;margin:0;padding:0;border:2px solid #fff;border-radius:6px;overflow:hidden;background:#fff}
  .ohio-h2why__lic img{height:100%;object-fit:cover}
  .ohio-h2why__lic p,.ohio-h2why__mosaic,.ohio-h2why .ohio-h2why__more,.ohio-h2why .ohio-h2why__outline{display:none}
  .ohio-h2why__mtxt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;position:absolute;z-index:1;left:16px;right:12px;bottom:16px;color:#fff}
  .ohio-h2why__mtxt span{font:600 16px/22px var(--ohio-font-body)}
  .ohio-h2why__mtxt b{font:700 16px/22px var(--ohio-font-body);color:#fcfbfe}
  .ohio-h2why__mtxt a{display:flex;align-items:center;gap:6px;font:600 13px/18px var(--ohio-font-body);color:#fff}
  .ohio-h2why__mtxt a::after{content:"";width:14px;height:14px;background:url(../../img/home2/mobile-arrow-right-white.svg) center/14px no-repeat}
  .ohio-h2why__cards{grid-template-columns:1fr 1fr;gap:20px 14px}
  .ohio-h2why__card{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .ohio-h2why__frame{height:176px;aspect-ratio:auto}
  .ohio-h2why__photo{clip-path:none;border-radius:12px}
  .ohio-h2why__badge{left:auto;right:6px;top:auto;bottom:6px;width:34px;height:34px;content:url(../../img/home2/mobile-why-badge.svg)}
  .ohio-h2why .ohio-h2why__cap{margin:0;font:700 13px/18px var(--ohio-font-body)!important;text-transform:uppercase}
  .ohio-h2why__cap a{color:#2a2633}
  .ohio-h2why .ohio-h2why__pill,.ohio-h2why .ohio-h2why__pill *{font-size:12px!important;line-height:16px!important;letter-spacing:.48px!important;text-transform:uppercase!important}
  .ohio-h2why .ohio-h2why__pill{margin:0;width:auto;height:16px;padding:0;gap:6px;border:0;border-radius:0;color:#5e3d8a;background:none}
  .ohio-h2why .ohio-h2why__pill .ohio-h2why__arr{width:12px}
}