/* ==========================================================================
   Bài dịch vụ — Style Guide pass (Figma "Giãn Mao Mạch Mặt - Thục Anh - v2 (đề xuất)" 3533:6181,
   frame 3533:6182; Style Guide 3655:10163). Loaded after qh-post-type.css (inc/qh-post-blocks-sv.php §5),
   so selectors start with .qhp.qhp-sv to win over it without touching the shared file.
   Frame → guide step: body 17/29.75 → body 16/26 · hero lead 17/29.24 → lead 18/28 · content H2 Montserrat 700
   36/44 UPPERCASE · content h3 → guide H3 Montserrat 600 28/32 (frame: BVP 600 24/26) · aside form title Montserrat 600 28/32 (H3) ·
   "Bài viết liên quan"/"Nguồn tham khảo" BVP 700 24 → H4 600 24/26 · bold runs 600 (no 700/900 in the guide).
   ========================================================================== */
.qhp.qhp-sv .qsv-desc{font:400 var(--ohio-lead-size)/var(--ohio-lead-lh) var(--ohio-font-body);color:var(--ohio-text-body);padding-top:2px}

/* ---- article body ---- */
.qhp.qhp-sv .qsv-body{font:400 var(--ohio-body-size)/var(--ohio-body-lh) var(--ohio-font-body);color:var(--ohio-text-body)}
.qhp.qhp-sv .qsv-body > :is(p,ul,ol,div:not([class])) :is(span,em,i,a,u,strong,b){font-size:inherit;line-height:inherit;font-family:inherit}  /* plain editor content only; blocks keep theirs */
.qhp.qhp-sv .qsv-body > p{margin:0 0 14px}
.qhp.qhp-sv .qsv-body :is(strong,b){font-weight:600}
.qhp.qhp-sv .qsv-body > h2{font:700 var(--ohio-h2-size)/var(--ohio-h2-lh) var(--ohio-font-head)!important;text-transform:uppercase;color:var(--ohio-text-heading)!important;
  margin:24px 0 10px!important;padding-top:24px;border-top:1px solid #ECE5F3}                  /* h2 909.6 after divider; p 959.4 */
.qhp.qhp-sv .qsv-body > h3{font:600 var(--ohio-h3-size)/var(--ohio-h3-lh) var(--ohio-font-head)!important;text-transform:none;color:var(--ohio-text-heading)!important;margin:24px 0 10px!important}  /* editor h3 = guide H3 (frame draws BVP 24: audit requires Montserrat on h3) */
.qhp.qhp-sv .qsv-body > h4{font:600 var(--ohio-lead-size)/var(--ohio-lead-lh) var(--ohio-font-body)!important;color:var(--ohio-purple-900)!important;margin:20px 0 8px!important}
.qhp.qhp-sv .qsv-body :is(h2,h3,h4) :is(strong,b,span,em,a){font:inherit!important;color:inherit!important;text-transform:inherit}
.qhp.qhp-sv .qsv-body :is(figcaption,.wp-caption-text){font:italic 400 var(--ohio-caption-size)/var(--ohio-caption-lh) var(--ohio-font-body)}
.qhp.qhp-sv .qsv-body table :is(th,td){font-size:var(--ohio-caption-size);line-height:22px}    /* frame 14.5/22.48 → caption 14 */

/* Legacy "Đăng ký tư vấn" box inside old post content (.post-dktv, ohio-legacy-customizer.css) → guide button L */
.qhp.qhp-sv .post-dktv a{display:inline-flex;align-items:center;justify-content:center;width:auto;height:52px;padding:0 28px;border-radius:12px;
  background:var(--ohio-grad-primary);box-shadow:none;animation:none;font:600 16px/20px var(--ohio-font-body)!important;letter-spacing:.04em;color:#fff!important;text-decoration:none!important}
.qhp.qhp-sv .post-dktv .hotline-post{font:600 var(--ohio-lead-size)/var(--ohio-lead-lh) var(--ohio-font-body)}

/* ---- end-of-article blocks ---- */
.qhp.qhp-sv .qsv-h3{font:600 var(--ohio-h4-size)/var(--ohio-h4-lh) var(--ohio-font-body)!important;letter-spacing:0!important;text-transform:none;color:var(--ohio-purple-900)!important;margin:0 0 16px!important}
.qhp.qhp-sv .qsv-src-h{font:600 var(--ohio-h3-size)/var(--ohio-h3-lh) var(--ohio-font-head)!important;color:var(--ohio-text-heading)!important}  /* 3533:7023 Montserrat 600 28/32 = H3 */
.qhp.qhp-sv .qsv-rel .qsv-h3{text-transform:uppercase;font-weight:600!important;color:var(--ohio-text-heading)!important}               /* frame "BÀI VIẾT LIÊN QUAN" caps */
.qhp.qhp-sv .qsv-src .card > p{font:400 var(--ohio-caption-size)/24px var(--ohio-font-body)}
.qhp.qhp-sv .qsv-src li{font-size:var(--ohio-caption-size)}
.qhp.qhp-sv .qsv-src .card{border-color:#DED0EE}                                              /* 3533:7025 */
/* Related list 3533:7050: one bordered list (r16), rows 3533:7051 pad 18/24, 1px #ECEAF0 dividers, 83 tall */
.qhp.qhp-sv .qsv-rel .grid{gap:0;border:1px solid #ECEAF0;border-radius:16px;overflow:hidden}
.qhp.qhp-sv .qsv-rel .card{gap:4px;padding:18px 24px;border:0;border-bottom:1px solid #ECEAF0;border-radius:0}
.qhp.qhp-sv .qsv-rel .card:last-child{border-bottom:0}
.qhp.qhp-sv .qsv-rel .t{font:600 var(--ohio-body-size)/22px var(--ohio-font-body);color:#2A2633}  /* frame 16/22 */
.qhp.qhp-sv .qsv-rel .s{font:400 var(--ohio-caption-size)/var(--ohio-caption-lh) var(--ohio-font-body)}
.qhp.qhp-sv .qsv-faq summary{font:600 var(--ohio-lead-size)/var(--ohio-lead-lh) var(--ohio-font-body)!important}  /* frame Montserrat 17 → BVP */
.qhp.qhp-sv .qsv-faq .ans{font:400 var(--ohio-body-size)/var(--ohio-body-lh) var(--ohio-font-body)}

/* ---- aside ---- */
.qhp.qhp-sv .qsv-form-t{margin:0;font:600 var(--ohio-h3-size)/var(--ohio-h3-lh) var(--ohio-font-head)!important;text-transform:uppercase;color:var(--ohio-text-heading);white-space:nowrap}   /* frame: one line, runs into the card padding */
.qhp.qhp-sv .qsv-form-sub{font:400 var(--ohio-lead-size)/24px var(--ohio-font-body)}
.qhp.qhp-sv .qsv-form .qsv-f > label{font:600 var(--ohio-caption-size)/18px var(--ohio-font-body)}
.qhp.qhp-sv .qsv-form .qsv-in input,.qhp.qhp-sv .qsv-sel-btn,.qhp.qhp-sv .qsv-sel-val.is-ph,
.qhp.qhp-sv .qsv-form .qsv-in input::placeholder{font-family:var(--ohio-font-body);font-size:var(--ohio-caption-size)}
.qhp.qhp-sv .qsv-form-note{font:italic 400 13px/18px var(--ohio-font-body)}
.qhp.qhp-sv .qsv-aside .ttl{font:600 var(--ohio-label-size)/var(--ohio-label-lh) var(--ohio-font-body);letter-spacing:var(--ohio-label-ls);text-transform:uppercase}
.qhp.qhp-sv .qsv-rv .t{font:600 var(--ohio-caption-size)/20px var(--ohio-font-body)}
.qhp.qhp-sv .qsv-rv .more{font:600 var(--ohio-caption-size)/20px var(--ohio-font-body)}
.qhp.qhp-sv .qsv-toc a{font:400 var(--ohio-caption-size)/20px var(--ohio-font-body)}

@media (max-width:767px){
  .qhp.qhp-sv .post-dktv a{height:44px;padding:0 20px;font-size:14px!important}
}

/* ==========================================================================
   Mobile = Figma frame 3641:12698 "Giãn mao mạch mặt – Mobile" (390). Every rule is ≤767 so desktop is untouched;
   qh-post-type.css (shared) already re-orders the blocks (crumb → H1 → lead → gallery → buttons → author → TOC → body
   → form → FAQ → sources); this pass sets the frame's sizes, spacing and colours.
   ========================================================================== */
@media (max-width:767px){
  /* Section / Hero 3641:12819: p20, gap 16 */
  .qhp.qhp-sv{padding-top:20px}
  .qhp.qhp-sv .qsv-crumb{gap:6px;margin-bottom:16px;font-size:12px;line-height:20px}
  .qhp.qhp-sv .qsv-crumb .sep{color:var(--ohio-neutral-300)}
  .qhp.qhp-sv .qsv-crumb .cur{font-weight:600;color:var(--ohio-purple-700)}
  .qhp.qhp-sv .qsv-title::before,.qhp.qhp-sv .qsv-h2::before,.qhp.qhp-sv .qsv-h3::before,.qhp.qhp-sv .qsv-form-t::before{margin-bottom:8px;border-radius:2px}  /* Gạch nhấn 32×3, gap 8 */
  .qhp.qhp-sv .qsv-desc{padding:0;font-size:var(--ohio-body-size);line-height:var(--ohio-body-lh)}  /* 3641:12782 "Nội dung" 15/24 */
  .qhp.qhp-sv .qsv-gal-big{border-radius:12px}                                                    /* 350×250 r12 */
  .qhp.qhp-sv .qsv-gal figcaption{margin-top:8px;font:400 var(--ohio-caption-size)/var(--ohio-caption-lh) var(--ohio-font-body);text-align:center;color:var(--ohio-neutral-500)}
  .qhp.qhp-sv .qsv-gal-thumbs{gap:8px;margin-top:8px}
  .qhp.qhp-sv .qsv-gal-thumbs a{aspect-ratio:auto;height:78px;border-radius:10px}
  .qhp.qhp-sv .qsv-acts{gap:10px}                                                                  /* 3641:12793 */
  .qhp.qhp-sv .qsv-btn{height:44px;min-height:0;font-size:14px;line-height:20px;letter-spacing:.04em}
  .qhp.qhp-sv .qsv-btn.solid{box-shadow:0 6px 8px rgba(241,121,31,.28)}
  .qhp.qhp-sv .qsv-by{gap:12px;padding:12px;border:0;border-radius:12px;background:var(--ohio-purple-50)}  /* 3641:12799 */
  .qhp.qhp-sv .qsv-ava{flex:0 0 48px;width:48px;height:48px;border-radius:50%}
  .qhp.qhp-sv .qsv-by-txt{gap:2px;font-size:13px;line-height:20px;color:var(--ohio-neutral-500)}
  .qhp.qhp-sv .qsv-by-txt strong{font-weight:inherit;color:inherit}
  .qhp.qhp-sv .qsv-by-txt > span:first-child{font-weight:600;color:var(--ohio-neutral-900)}
  .qhp.qhp-sv .qsv-by-txt > span:last-child:not(:first-child){font-size:12px}
  /* Mục lục 3641:12818: p16 r16, gap 10, rows 13/20 */
  .qhp.qhp-sv .qsv-toc{gap:10px;padding:16px;margin-bottom:20px;border-radius:16px}
  .qhp.qhp-sv .qsv-toc .ttl{font:600 var(--ohio-h4-size)/var(--ohio-h4-lh) var(--ohio-font-body);letter-spacing:0;text-transform:none;color:var(--ohio-purple-700)}
  .qhp.qhp-sv .qsv-toc-toggle{font-size:13px;line-height:20px;color:var(--ohio-purple-600)}
  .qhp.qhp-sv .qsv-toc ul{gap:10px}
  .qhp.qhp-sv .qsv-toc a{padding:0;font-size:13px;line-height:20px;color:var(--ohio-neutral-900)}
  .qhp.qhp-sv .qsv-toc a:is(:hover,:focus-visible),.qhp.qhp-sv .qsv-toc li.active a{background:none;color:var(--ohio-purple-700)}

  /* Body = the frame's content sections (3641:12847 …): H2 22/30 after a 32×3 bar (gap 8), 20 between blocks,
     section bands alternate #F7F3FB (pad 40) / white (pad 20). The bands are each h2's ::before, a full-bleed
     layer that runs down to the next h2; the body clips them at its edges. */
  .qhp.qhp-sv .qsv-body{position:relative;isolation:isolate;clip-path:inset(0 -20px);overflow-y:clip;padding:0 0 20px}  /* overflow-y:clip: the 100000px bands must not extend the page's scroll height (r6: 120 439 px) */
  .qhp.qhp-sv .qsv-body > p{margin:0 0 20px}
  .qhp.qhp-sv .qsv-body > h2{margin:60px 0 20px!important;padding-top:11px;border:0;background:linear-gradient(var(--ohio-cta),var(--ohio-cta)) 0 0/32px 3px no-repeat}
  .qhp.qhp-sv .qsv-body > h2::before{content:"";display:block;position:absolute;left:-20px;right:-20px;width:auto;height:100000px;margin:-51px 0 0;
    border-radius:0;background:var(--ohio-purple-50);z-index:-1;pointer-events:none}
  .qhp.qhp-sv .qsv-body > h2:nth-of-type(even)::before{margin-top:-31px;background:#fff}
  .qhp.qhp-sv .qsv-body img{border-radius:12px}
  .qhp.qhp-sv .qsv-body :is(figcaption,.wp-caption-text){font-style:normal;font-size:var(--ohio-caption-size);line-height:var(--ohio-caption-lh);text-align:center;color:var(--ohio-neutral-500)}

  /* Section / Đăng ký thăm khám 3641:13697: card p20 r16, gap 14 */
  .qhp.qhp-sv .qsv-form{margin-top:20px;padding:20px;border-radius:16px}
  .qhp.qhp-sv .qsv-form-t{font-size:var(--ohio-h2-size)!important;line-height:var(--ohio-h2-lh)!important;white-space:normal}  /* frame: Mobile H2 22/30 (h3 keeps 600) */
  .qhp.qhp-sv .qsv-form-sub{margin-top:8px!important;font-size:var(--ohio-body-size);line-height:var(--ohio-body-lh);color:var(--ohio-neutral-500)}
  .qhp.qhp-sv .qsv-form form{margin-top:14px}
  .qhp.qhp-sv .qsv-form .qsv-f{margin-bottom:14px}
  .qhp.qhp-sv .qsv-form .qsv-f > label{line-height:20px;color:var(--ohio-purple-700)}
  .qhp.qhp-sv .qsv-form .qsv-in{border-color:var(--ohio-neutral-300);border-radius:10px}
  .qhp.qhp-sv .qsv-form .qsv-in input,.qhp.qhp-sv .qsv-sel-btn{padding:0 14px!important;font-size:var(--ohio-body-size)}
  .qhp.qhp-sv .qsv-form .qsv-in input::placeholder,.qhp.qhp-sv .qsv-sel-val.is-ph{font-size:var(--ohio-body-size);color:var(--ohio-neutral-500)}
  .qhp.qhp-sv .qsv-sel-btn .chev{display:none}
  .qhp.qhp-sv .qsv-sel-btn::after{content:"";flex:0 0 18px;height:18px;background:url(../img/service/m-chevron-down-muted.svg) center/18px no-repeat;transition:transform .2s}
  .qhp.qhp-sv .qsv-select.is-open .qsv-sel-btn::after{transform:rotate(180deg)}
  .qhp.qhp-sv .qsv-form .qsv-submit{height:44px;margin:0;font-size:14px;line-height:20px;letter-spacing:.04em;box-shadow:0 6px 8px rgba(241,121,31,.28)}
  .qhp.qhp-sv .qsv-form-note{margin-top:14px!important;font-style:normal;line-height:20px;text-align:center;color:var(--ohio-neutral-500)}

  /* Section / FAQ 3641:13743: items gap 10, p14/16 r12; open = #F7F3FB + #DED0EE; Q H4 16/24, A 13/20 */
  .qhp.qhp-sv .qsv-faq .qsv-h2{margin-bottom:20px!important}
  .qhp.qhp-sv .qsv-faq .list{gap:10px}
  .qhp.qhp-sv .qsv-faq .item{border-color:var(--ohio-border)}
  .qhp.qhp-sv .qsv-faq .item[open]{background:var(--ohio-purple-50);border-color:var(--ohio-purple-200)}
  .qhp.qhp-sv .qsv-faq summary{align-items:center;gap:12px;padding:14px 16px;font:600 var(--ohio-h4-size)/var(--ohio-h4-lh) var(--ohio-font-body)!important;color:var(--ohio-purple-700)}
  .qhp.qhp-sv .qsv-faq summary i{flex:0 0 20px;height:20px;background:url(../img/service/m-plus.svg) center/20px no-repeat}
  .qhp.qhp-sv .qsv-faq details[open] summary i{background-image:url(../img/service/m-minus.svg)}
  .qhp.qhp-sv .qsv-faq summary i::before{content:none}
  .qhp.qhp-sv .qsv-faq .ans{margin-top:-6px;padding:0 16px 14px;font-size:var(--ohio-caption-size);line-height:var(--ohio-caption-lh)}  /* gap 8 under the question */

  /* Section / Nguồn tham khảo 3641:13770: p20, gap 20; meta 13/20 gap 6; refs card #F7F3FB p16 r16 gap 12 */
  .qhp.qhp-sv .qsv-faq ~ .qsv-src{margin-top:20px}
  .qhp.qhp-sv .qsv-src-h{margin-bottom:20px!important;font-size:var(--ohio-h2-size)!important;line-height:var(--ohio-h2-lh)!important;text-transform:uppercase}  /* frame: Mobile H2 22/30 */
  .qhp.qhp-sv .qsv-src .grid{gap:20px}
  .qhp.qhp-sv .qsv-src .card{display:flex;flex-direction:column;gap:6px}
  .qhp.qhp-sv .qsv-src .card > p{margin:0;font-size:13px;line-height:20px;color:var(--ohio-neutral-900)}
  .qhp.qhp-sv .qsv-src .card > p:has(time){color:var(--ohio-neutral-500)}
  .qhp.qhp-sv .qsv-src .card .k,.qhp.qhp-sv .qsv-src .card a{color:inherit}
  .qhp.qhp-sv .qsv-src .card + .card{gap:12px;padding:16px}
  .qhp.qhp-sv .qsv-src .ttl{margin:0!important;font-size:12px!important;line-height:16px!important;letter-spacing:.72px;color:var(--ohio-purple-600)!important}
  .qhp.qhp-sv .qsv-src ol{display:flex;flex-direction:column;gap:10px;padding:0;list-style:none}
  .qhp.qhp-sv .qsv-src li{font-size:13px;line-height:20px;color:var(--ohio-neutral-900)}
}

/* ---- round 5 (frame copy in [qh_*] blocks): block titles on the guide scale; step / review card titles are
   p[role=heading] (inc/qh-post-blocks-sv.php) so the guide's h3 = 28/32 rule stays for section headings ---- */
.qhp.qhp-sv div.qhb-hl .qhb-hl-t{font:600 var(--ohio-lead-size)/var(--ohio-lead-lh) var(--ohio-font-body);letter-spacing:0}
.qhp.qhp-sv div.qhb-qt h2.qhb-qt-h{font:700 36px/44px var(--ohio-font-head);letter-spacing:0;text-transform:uppercase}
.qhp.qhp-sv div.qhb-qt .qhb-qt-t{margin:0;font:600 var(--ohio-body-size)/var(--ohio-body-lh) var(--ohio-font-body);color:#2b1b45}
.qhp.qhp-sv div.qhb-rv .qhb-rv-t{display:block;margin:10px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font:600 var(--ohio-h4-size,24px)/var(--ohio-h4-lh,26px) var(--ohio-font-body)}
.qhp.qhp-sv div.qhb-rv .qhb-rv-t a{display:inline}
.qhp.qhp-sv div.qhb-kd .qhb-kd-n{margin:0;font:600 var(--ohio-h4-size)/var(--ohio-h4-lh) var(--ohio-font-body);color:#2b1b45}
@media (max-width:767px){
  .qhp.qhp-sv div.qhb-qt h2.qhb-qt-h{font-size:22px!important;line-height:30px!important}
  .qhp.qhp-sv div.qhb-rv .qhb-rv-t{font-size:16px;line-height:24px}
}