/* ==========================================================================
   Homepage v2 (Figma "Trang Chủ .1 - v2" 3409:1941; mobile 3637:7020).
   Page 22125 (VI) / 23732 (EN), UX Builder sections .qh_o3 … .qh_o11 filled by child-theme shortcodes.
   Loaded on the front page only, after css/ohio-legacy-customizer.css; overrides only what the v2 frame changes.
   ========================================================================== */

/* ---- section frame: no "+" separators / grey rules, content 1280, Style Guide titles ---- */
.home .qh_o4,.home .qh_o5,.home .qh_o6,.home .qh_o7,.home .qh_o8,.home .qh_o9,.home .qh_o10{border-bottom:0!important;margin-bottom:0!important}
.home .qh_o4::before,.home .qh_o5::after,.home .qh_o6::before,.home .qh_o7::before,
.home .qh_o8::before,.home .qh_o9::before,.home .qh_o10::before{display:none!important}
.home .qh_o6 > .section-content > .row,.home .qh_o7 > .section-content > .row,
.home .qh_o8 > .section-content > .row,.home .qh_o9 > .section-content > .row,.home .qh_o10 > .section-content > .row,
.home .qh_o11 > .section-content > .row{max-width:1280px!important}
.home .qh_o4 h2,.home .qh_o6 h2,.home .qh_o7 h2,.home .qh_o8 h2,.home .qh_o9 h2,.home .qh_o10 h2{
  font:700 var(--ohio-h2-size)/var(--ohio-h2-lh) var(--ohio-font-head)!important;text-transform:uppercase;letter-spacing:0;
  color:var(--ohio-text-heading)!important;text-align:center;margin:0 0 var(--ohio-gap-title)!important}
.home .qh_o4,.home .qh_o6,.home .qh_o7,.home .qh_o8,.home .qh_o9,.home .qh_o10{padding-top:56px!important;padding-bottom:56px!important}

/* ---- 1 hero slider: white round arrows like Figma ---- */
.home .qh_o3 .flickity-prev-next-button{opacity:1!important;width:48px!important;height:48px!important;border-radius:50%!important;
  background:#fff!important;box-shadow:0 6px 18px rgba(36,19,58,.15);padding:0!important;border:0!important}
.home .qh_o3 .flickity-prev-next-button svg{display:none!important}
.home .qh_o3 .flickity-prev-next-button::before{content:"←";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:600 22px/1 var(--ohio-font-body);color:var(--ohio-purple-700)}
.home .qh_o3 .flickity-prev-next-button.next::before{content:"→"}
.home .qh_o3 .flickity-prev-next-button.previous{left:40px!important}
.home .qh_o3 .flickity-prev-next-button.next{right:40px!important}

/* ---- 2 doctors: featured card 1280 + 4-card carousel ---- */
/* .ohio-vision keeps its own 1400 layout (absolute positions inside); only the carousel follows the 1280 grid */
.home .qh_o4 .qh-bsl{max-width:1280px;margin-left:auto;margin-right:auto}
.home .qh_o4 .qh-bsl-card{border:1px solid var(--ohio-border);border-radius:var(--ohio-radius-l);overflow:hidden;
  box-shadow:0 8px 24px rgba(36,19,58,.08);background:#fff}
.home .qh_o4 .qh-bsl-name{font:600 18px/26px var(--ohio-font-body)!important;color:var(--ohio-purple-900)!important}
.home .qh_o4 .qh-bsl-deg{font:400 14px/20px var(--ohio-font-body)!important;color:var(--ohio-text-muted)!important}
.home .qh_o4 .qh-bsl-more{display:inline-flex;align-items:center;height:32px;padding:0 14px;margin-top:8px;border-radius:var(--ohio-radius-s);
  box-shadow:inset 0 0 0 1px var(--ohio-purple-300);font:600 13px/1 var(--ohio-font-body)!important;letter-spacing:0;text-transform:none!important;
  color:var(--ohio-purple-700)!important}
.home .qh_o4 .qh-bsl-more::after{content:" →"}

/* ---- 3 main services: purple band covers the whole section, white card inside ---- */
.home .qh_o5::before{height:100%!important;background:linear-gradient(180deg,#9A5CC8 0%,#6A3E9E 45%,#3E2161 100%)!important}
.home .qh_o5{padding-bottom:64px!important}
.home .qh_o5 .qh-svc-cardname{font:600 17px/24px var(--ohio-font-body)!important;text-transform:none!important;color:var(--ohio-purple-900)!important}
.home .qh_o5 .qh-svc-more{display:inline-flex;align-items:center;height:32px;padding:0 14px;margin-top:8px;border-radius:var(--ohio-radius-s);
  box-shadow:inset 0 0 0 1px var(--ohio-purple-300);font:600 13px/1 var(--ohio-font-body)!important;letter-spacing:0;text-transform:none!important;
  color:var(--ohio-purple-700)!important}

.home .qh_o5 .qh-svc-card{text-align:center}
.home .qh_o5 .qh-svc-more{margin-left:auto;margin-right:auto}

/* ---- 4 treatment results: plain white background, level-2 CTA ---- */
.home .qh_o6{background:#fff!important}
.home .qh_o6 .qh-kq-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 24px;border-radius:var(--ohio-radius-m)!important;
  background:var(--ohio-grad-primary)!important;color:#fff!important;font:600 15px/1 var(--ohio-font-body)!important;letter-spacing:.04em;
  text-transform:uppercase;box-shadow:none!important;border:0!important}
.home .qh_o6 .qh-kq-btn::after{content:"→"}

/* ---- 5 customer stories ---- */
.home .qh_o7 .qhsf-btn,.home .qh_o9 .ohio-news-readmore{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--ohio-radius-s)!important;
  border:0!important;box-shadow:inset 0 0 0 1px var(--ohio-purple-300);background:#fff!important;color:var(--ohio-purple-700)!important;
  font:600 13px/1 var(--ohio-font-body)!important;text-transform:none!important}
.home .qh_o7 .qhsf-btn::after,.home .qh_o9 .ohio-news-readmore::after{content:" →"}

/* ---- section-end "Xem thêm" buttons → level 3 outline, size M ---- */
.home .qhsf-all,.home .qh_o8 .button.is-link,.home .ohio-news-more,.home .qh_o9 .ohio-news-all,.home .qh_o10 .qh-ts-all{
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 24px!important;margin-top:24px;
  border-radius:var(--ohio-radius-m)!important;border:0!important;box-shadow:inset 0 0 0 1.5px var(--ohio-purple-700)!important;
  background:#fff!important;color:var(--ohio-purple-700)!important;font:600 15px/1 var(--ohio-font-body)!important;letter-spacing:.04em;text-transform:uppercase!important}

/* ---- 6 why OHIO: light grey band, centred collage, outline CTA, captions sentence case ---- */
.home .qh_o8{background:#F8F8F8}
.home .qh_o8 .qh_aa{text-align:center}
.home .qh_o8 .qh_aa img{border-radius:var(--ohio-radius-l)}
.home .qh_o8 .box-text p:first-child a{font:600 15px/22px var(--ohio-font-body)!important;text-transform:none!important;color:var(--ohio-purple-900)!important}
.home .qh_o8 .box-text p:last-child a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--ohio-radius-s);
  box-shadow:inset 0 0 0 1px var(--ohio-purple-300);font:600 13px/1 var(--ohio-font-body)!important;text-transform:none!important;color:var(--ohio-purple-700)!important}
.home .qh_o8 .box-image img{border-radius:var(--ohio-radius-l)}

/* ---- 8 talkshow: Tím 50 band ---- */
.home .qh_o10{background:var(--ohio-bg-soft)!important}
.home .qh_o10 .section-bg{background:transparent!important}

.home .qh_o10 .qh-ts-morebtn{display:flex!important;width:max-content!important;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 24px!important;
  margin:24px auto 0!important;border-radius:var(--ohio-radius-m)!important;border:0!important;box-shadow:inset 0 0 0 1.5px var(--ohio-purple-700)!important;
  background:#fff!important;color:var(--ohio-purple-700)!important;font:600 15px/1 var(--ohio-font-body)!important;letter-spacing:.04em;text-transform:uppercase!important}
.home .qh_o10 .qh-ts-morebtn::after{content:"→"}

/* ---- 9 press: purple card (colours set in the qhpr_opts option: title #fff, bg #5E3D8A, no bg image) ---- */

/* ---- 10 gallery slider: not in the v2 frame ---- */
.home .qh_oo{display:none!important}
.home .qh_o10 .qh-ts-more{display:flex!important;justify-content:center!important;text-align:center}

/* ---- intro block: the page's visually hidden H1 (SEO, item 25). The round-4 mobile frame 3637:7021 has no intro
   block under the hero (Hero → Đội ngũ bác sĩ), so it stays hidden at every width ---- */
.home .ohio-home-intro{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- doctors carousel: round white arrows on the card edges, pill + dot pager (Figma 3409:1941) ---- */
.home .qh_o4 .qh-bsl{position:relative}
.home .qh_o4 .qh-bsl.owl-theme .owl-nav [class*="owl-"]{width:48px;height:48px;border-radius:50%;background:#fff!important;
  box-shadow:0 6px 18px rgba(36,19,58,.15);opacity:1;z-index:2}
.home .qh_o4 .qh-bsl.owl-theme .owl-nav .owl-prev{left:-24px}
.home .qh_o4 .qh-bsl.owl-theme .owl-nav .owl-next{right:-24px}
.home .qh_o4 .qh-bsl.owl-theme .owl-nav [class*="owl-"] > *{display:none!important}
.home .qh_o4 .qh-bsl.owl-theme .owl-nav [class*="owl-"]::before{content:"\2190";font:600 20px/1 var(--ohio-font-body);color:var(--ohio-purple-700)}
.home .qh_o4 .qh-bsl.owl-theme .owl-nav .owl-next::before{content:"\2192"}
.home .qh_o4 .qh-bsl.owl-theme .owl-dots{gap:8px}
.home .qh_o4 .qh-bsl.owl-theme .owl-dots .owl-dot{width:8px!important;height:8px!important;border-radius:4px!important;background:var(--ohio-neutral-200)!important}
.home .qh_o4 .qh-bsl.owl-theme .owl-dots .owl-dot.active{width:40px!important;background:var(--ohio-purple-700)!important}
.home .qh_o4 .qh-bsl.owl-theme .owl-dots .owl-dot span{display:none!important}

/* ==========================================================================
   Mobile ≤767 (Figma "Trang Chủ .1 – Mobile" 3637:7020, spec docs/figma/specs/mobile/trang-chu-1-mobile.md)
   Sections: white pad 20, tinted pad 40, content 350, gap 20, cards r16, section buttons full width 44.
   ========================================================================== */
@media (max-width:767px){
  .home .qh_o4,.home .qh_o6,.home .qh_o8,.home .qh_o9{padding-top:20px!important;padding-bottom:20px!important}
  .home .qh_o7,.home .qh_o10{padding-top:40px!important;padding-bottom:40px!important}
  .home .qh_o4 h2,.home .qh_o6 h2,.home .qh_o7 h2,.home .qh_o8 h2,.home .qh_o9 h2,.home .qh_o10 h2{margin-bottom:20px!important}
  .home .qh_o4 h2::after,.home .qh_o6 h2::after,.home .qh_o7 h2::after,.home .qh_o8 h2::after,.home .qh_o9 h2::after,.home .qh_o10 h2::after{
    content:"";display:block;width:48px;height:4px;margin:12px auto 0;background:var(--ohio-cta);border-radius:2px}
  .home .qh_o7{background:var(--ohio-bg-soft)}

  /* featured doctor (spec "Bac si noi bat": one purple card, then the carousel). On mobile the legacy layout shows
     the doctor card image (name baked in, 1080x888); the vision heading + pillars stay desktop-only as in the spec */
  .home .qh_o4 .ohio-vision-wrap{display:block!important;margin-bottom:20px!important;padding:0!important;border-radius:var(--ohio-radius-l)!important;background:var(--ohio-purple-700)!important;box-shadow:none!important}
  .home .qh_o4 .ohio-vision-left{display:block!important;min-height:0!important;aspect-ratio:1080/888}
  .home .qh_o4 .ohio-vision-photo{border-radius:var(--ohio-radius-l)!important}
  .home .qh_o4 .ohio-vision-right,.home .qh_o4 .qh-bsl.owl-theme .owl-nav{display:none!important}

  /* vision pillars as Tím 50 cards */
  .home .qh_o4 .ohio-vision-col{background:var(--ohio-purple-50)!important;border-radius:var(--ohio-radius-l)!important;padding:16px!important;margin-bottom:12px!important}

  /* services: 2-column grid instead of the sliding row */
  .home .qh_o5 .qh-svc-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;transform:none!important;width:auto!important}
  .home .qh_o5 .qh-svc-card{width:auto!important;min-width:0!important;margin:0!important}
  .home .qh_o5 .qh-svc-arrow,.home .qh_o5 .qh-svc-nav{display:none!important}
  .home .qh_o5 .qh-svc-cardname{font-size:14px!important;line-height:20px!important}

  /* results: level-1 orange CTA full width */
  .home .qh_o6 .qh-kq-btn{display:flex!important;width:100%!important;max-width:350px;margin:0 auto;justify-content:center;background:var(--ohio-grad-cta)!important;font-size:14px!important}

  /* section-end buttons: full width outline */
  .home .qhsf-all,.home .qh_o8 .button.is-link,.home .qh_o10 .qh-ts-morebtn,.home .ohio-news-more,.home .qh_o9 .ohio-news-all{
    display:flex!important;width:100%!important;max-width:350px;margin-left:auto!important;margin-right:auto!important;font-size:14px!important}

  /* news (Figma: 1 large card + horizontal rows); the vertical scroller and its JS row height stay as they are */
  .home .qh_o9 .ohio-news-grid{gap:12px!important}
  .home .qh_o9 .ohio-news-card ~ .ohio-news-card{display:grid!important;grid-template-columns:110px minmax(0,1fr);gap:4px 12px;align-items:start;
    padding:10px;border:1px solid var(--ohio-border);border-radius:12px;background:#fff}
  .home .qh_o9 .ohio-news-card ~ .ohio-news-card .ohio-news-thumb{grid-row:1 / span 3;border-radius:8px;overflow:hidden;aspect-ratio:4/3;margin:0!important}
  .home .qh_o9 .ohio-news-card ~ .ohio-news-card .ohio-news-thumb img{height:100%;object-fit:cover}
  .home .qh_o9 .ohio-news-card ~ .ohio-news-card .ohio-news-excerpt,
  .home .qh_o9 .ohio-news-card ~ .ohio-news-card .ohio-news-readmore{display:none!important}
  .home .qh_o9 .ohio-news-card ~ .ohio-news-card .ohio-news-title{margin:0!important;font-size:14px!important;line-height:20px!important}
}