/* ==========================================================================
   Bài dịch vụ ≤767 — the [qh_*] blocks and tables laid out as the Mobile frame 3641:12698 draws them (round 6).
   Loaded after qh-post-service-style-guide.css (inc/qh-post-blocks-sv.php §5). Every rule is mobile-only and scoped to
   .qhp.qhp-sv .qsv-body, so desktop and other post types are untouched. Frame card = white, 1px #ECEAF0, r16, p16;
   texts: H4 600 16/24 #422666 · caption 13/20 · label 600 12/20 #6E6780 · nhãn 600 12/16 +0.72 #5E3D8A.
   ========================================================================== */
@media (max-width:767px){
  .qhp.qhp-sv .qsv-body{--m-card:1px solid var(--ohio-neutral-100)}

  /* section intro (Tiêu đề section 3641:12851 …): h2 → 8 → muted 15/24 when it is the only paragraph before a block */
  .qhp.qhp-sv .qsv-body > h2 + p:not(:has(+ p)){margin-top:-12px;color:var(--ohio-neutral-500)}

  /* [qh_3col] — Tác động 3641:13467: cards gap 20, title H4, text 13/20 muted */
  .qhp.qhp-sv .qsv-body div.qhb-3col{display:flex;flex-direction:column;gap:20px;margin:0 0 20px}
  .qhp.qhp-sv .qsv-body .qhb-3col-c{gap:8px;padding:16px;border:var(--m-card);border-radius:16px}
  .qhp.qhp-sv .qsv-body div.qhb-3col .qhb-3col-t{font:600 16px/24px var(--ohio-font-body);letter-spacing:0;text-transform:none;color:var(--ohio-purple-700)}
  .qhp.qhp-sv .qsv-body .qhb-3col-d{font-size:13px;line-height:20px;color:var(--ohio-neutral-500)}
  /* Giải pháp 3641:13235: 2-col grid gap 12, an odd last card spans the row */
  .qhp.qhp-sv .qsv-body div.qhb-3col:has(.is-half){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .qhp.qhp-sv .qsv-body div.qhb-3col:has(.is-half) .qhb-3col-c{grid-column:auto}
  .qhp.qhp-sv .qsv-body div.qhb-3col:has(.is-half) .qhb-3col-c:last-child:nth-child(odd){grid-column:1 / -1}
  /* Là gì 3641:12836 (the 3col right after the body paragraphs): one card, rows split by 1px rules 12 apart, label 12/20 caps */
  .qhp.qhp-sv .qsv-body > p + p + div.qhb-3col{display:block;padding:16px;border:var(--m-card);border-radius:16px;background:#fff}
  .qhp.qhp-sv .qsv-body > p + p + div.qhb-3col .qhb-3col-c{gap:2px;padding:0;border:0;border-radius:0}
  .qhp.qhp-sv .qsv-body > p + p + div.qhb-3col .qhb-3col-c + .qhb-3col-c{margin-top:12px;padding-top:12px;border-top:var(--m-card)}
  .qhp.qhp-sv .qsv-body > p + p + div.qhb-3col .qhb-3col-t{font-size:12px;line-height:20px;text-transform:uppercase;color:var(--ohio-neutral-500)}
  .qhp.qhp-sv .qsv-body > p + p + div.qhb-3col .qhb-3col-d{color:var(--ohio-neutral-900)}

  /* [qh_nhom] navigation row 3641:12846: white r12 p14, 600 13/20 Tím 700 */
  .qhp.qhp-sv .qsv-body div.qhb-nhom.is-bar:not(.has-cards){padding:14px;border:var(--m-card);border-radius:12px;background:#fff}
  .qhp.qhp-sv .qsv-body div.qhb-nhom.is-bar:not(.has-cards) .qhb-nhom-t{font-size:13px;line-height:20px;letter-spacing:0;text-transform:none;color:var(--ohio-purple-700)}
  /* [qh_nhom] cause groups 3641:12938: card p16 gap 8; nhãn; lead H4; items 13/20 gap 10, no inner boxes */
  .qhp.qhp-sv .qsv-body div.qhb-nhom.has-cards{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0 0 20px;padding:16px;border:var(--m-card);border-radius:16px;background:#fff}
  .qhp.qhp-sv .qsv-body .qhb-nhom-head{gap:8px}
  .qhp.qhp-sv .qsv-body div.qhb-nhom .qhb-nhom-t{font-weight:600;line-height:16px;letter-spacing:.72px;color:var(--ohio-purple-600)}
  .qhp.qhp-sv .qsv-body div.qhb-nhom .qhb-nhom-d{font:600 16px/24px var(--ohio-font-body);color:var(--ohio-purple-700)}
  .qhp.qhp-sv .qsv-body .qhb-nhom.has-cards .qhb-nhom-cards{display:flex;flex-direction:column;gap:10px;padding:0}
  .qhp.qhp-sv .qsv-body .qhb-nhom.has-cards .qhb-nhom-c{padding:0;border:0;background:none;font-size:13px;line-height:20px;color:var(--ohio-neutral-900)}
  /* "Yếu tố khiến tình trạng nặng hơn" 3641:13004: title H4 sentence case, 2-col grid gap 8 of #FFF4E5 r10 p10, 500 13/20 */
  .qhp.qhp-sv .qsv-body div.qhb-nhom.is-bar.has-cards{gap:12px}
  .qhp.qhp-sv .qsv-body div.qhb-nhom.is-bar.has-cards .qhb-nhom-t{font-size:16px;line-height:24px;letter-spacing:0;text-transform:none;color:var(--ohio-purple-700)}
  .qhp.qhp-sv .qsv-body .qhb-nhom.is-bar.has-cards .qhb-nhom-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .qhp.qhp-sv .qsv-body .qhb-nhom.is-bar.has-cards .qhb-nhom-c{grid-column:auto;padding:10px;border-radius:10px;background:var(--ohio-orange-50);font-weight:500}

  /* [qh_boxulli] 3641:12882: a plain list, 15/24, 10 apart (no cards, no ticks) */
  .qhp.qhp-sv .qsv-body ul.qhb-boxulli{display:flex;flex-direction:column;gap:10px;margin:0 0 20px}
  .qhp.qhp-sv .qsv-body ul.qhb-boxulli > li.qhb-boxulli-i{padding:0;border:0;border-radius:0;background:none;color:var(--ohio-neutral-900)}
  .qhp.qhp-sv .qsv-body ul.qhb-boxulli > li.qhb-boxulli-i::before{content:none}

  /* [qh_highlight] boxes: no border, r16 p16 gap 12; title H4 Tím 700; list items 13/20 #1B1822 10 apart, no bullets.
     default (cam) = #FFF4E5 (3641:13310 "Giới hạn"), tím / trắng = #F7F3FB (3641:13299 "Ưu điểm") */
  .qhp.qhp-sv .qsv-body div.qhb-hl{gap:12px;margin:0 0 20px;padding:16px;border:0;border-radius:16px;background:var(--ohio-orange-50);font-size:13px;line-height:20px;color:var(--ohio-neutral-900)}
  .qhp.qhp-sv .qsv-body div.qhb-hl:is(.is-tim,.is-trang){background:var(--ohio-purple-50)}
  .qhp.qhp-sv .qsv-body div.qhb-hl .qhb-hl-t{font-size:16px;line-height:24px;color:var(--ohio-purple-700)}
  .qhp.qhp-sv .qsv-body div.qhb-hl :is(ul,ol){display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
  .qhp.qhp-sv .qsv-body div.qhb-hl li{margin:0}
  .qhp.qhp-sv .qsv-body div.qhb-hl p{margin:0 0 10px}
  .qhp.qhp-sv .qsv-body div.qhb-hl :is(.qhb-hl-t,.qhb-hl-c > :last-child){margin-bottom:0}
  .qhp.qhp-sv .qsv-body div.qhb-hl :is(ul,ol) + p{margin-top:10px;color:var(--ohio-neutral-500)}
  .qhp.qhp-sv .qsv-body div.qhb-hl :is(em,strong){font-style:normal;font-weight:inherit;color:inherit}
  /* "Khi nào cần gặp bác sĩ?" 3641:12910 (box right after a tick list): tím, items 15/24 */
  .qhp.qhp-sv .qsv-body .qhb-boxulli-wrap + div.qhb-hl:not(:has(+ figure)){background:var(--ohio-purple-50);font-size:15px;line-height:24px}
  /* quote 3641:13077 (tím box without a title): white card, 3px orange bar inside, 600 16/24 Tím 700 */
  .qhp.qhp-sv .qsv-body div.qhb-hl.is-tim:not(:has(.qhb-hl-t)){border:var(--m-card);background:#fff}
  .qhp.qhp-sv .qsv-body div.qhb-hl.is-tim:not(:has(.qhb-hl-t)) .qhb-hl-c{padding-left:13px;border-left:3px solid var(--ohio-cta);font:600 16px/24px var(--ohio-font-body);color:var(--ohio-purple-700)}
  /* Trải nghiệm 3641:13439: consecutive boxes = one white card, Q/A split by 1px rules 14 apart, answers 13/20 */
  .qhp.qhp-sv .qsv-body > div.qhb-hl:not(.is-bar):is(:has(+ div.qhb-hl:not(.is-bar)),div.qhb-hl:not(.is-bar) + *){gap:4px;border:var(--m-card);background:#fff}
  .qhp.qhp-sv .qsv-body > div.qhb-hl:not(.is-bar):has(+ div.qhb-hl:not(.is-bar)){margin-bottom:0;padding-bottom:14px;border-bottom:0;border-radius:16px 16px 0 0}
  .qhp.qhp-sv .qsv-body > div.qhb-hl:not(.is-bar) + div.qhb-hl:not(.is-bar){padding-top:14px;border-top:0;border-radius:0;
    background:linear-gradient(var(--ohio-neutral-100),var(--ohio-neutral-100)) 16px 0/calc(100% - 32px) 1px no-repeat #fff}
  .qhp.qhp-sv .qsv-body > div.qhb-hl:not(.is-bar) + div.qhb-hl:not(.is-bar):not(:has(+ div.qhb-hl:not(.is-bar))){border-radius:0 0 16px 16px}
  .qhp.qhp-sv .qsv-body > div.qhb-hl:not(.is-bar) + div.qhb-hl:not(.is-bar):has(+ div.qhb-hl:not(.is-bar)){border-bottom:0}
  /* two boxes side by side (Ưu điểm / Giới hạn, Lưu ý) stack 20 apart */
  .qhp.qhp-sv .qsv-body div.qhb-hl-grid{display:flex;flex-direction:column;gap:20px;margin:0 0 20px}
  .qhp.qhp-sv .qsv-body div.qhb-hl-grid > div.qhb-hl{margin:0}
  /* Tổ hợp 3641:13311 bar boxes: plain text, no box — title H4, body 15/24 */
  .qhp.qhp-sv .qsv-body div.qhb-hl.is-bar{gap:8px;padding:0;border:0;border-radius:0;background:none;font-size:15px;line-height:24px}
  /* table inside a box ("Phù hợp với dạng mao mạch nào?"): r12 card, Tím 700 head row "a · b", rows p10/14 alt #F7F3FB */
  .qhp.qhp-sv .qsv-body div.qhb-hl table{display:block;margin:0;border:var(--m-card);border-radius:12px;overflow:hidden}
  .qhp.qhp-sv .qsv-body div.qhb-hl :is(thead,tbody,tr){display:block}
  .qhp.qhp-sv .qsv-body div.qhb-hl thead tr{padding:10px 14px;background:var(--ohio-purple-700)}
  .qhp.qhp-sv .qsv-body div.qhb-hl table :is(th,td){display:inline;min-width:0;padding:0;border:0;background:none;font:600 13px/20px var(--ohio-font-body);color:#fff}
  .qhp.qhp-sv .qsv-body div.qhb-hl th + th::before{content:" · "}
  .qhp.qhp-sv .qsv-body div.qhb-hl tbody tr{padding:10px 14px}
  .qhp.qhp-sv .qsv-body div.qhb-hl tbody tr:nth-child(even){background:var(--ohio-purple-50)}
  .qhp.qhp-sv .qsv-body div.qhb-hl tbody td{display:block;font-weight:400;color:var(--ohio-neutral-900)}
  .qhp.qhp-sv .qsv-body div.qhb-hl tbody td:first-child{font-weight:600;color:var(--ohio-purple-700)}
}