/* ============================================================
   CHI TIẾT BÀI VIẾT (tin tức) ≤767px — Figma "Trang bài viết – Mobile" 3638:17564 (390 rộng).
   PC: qh-post-single.css + qh-post-type.css (file này nạp sau cả hai, enqueue ở single.php).
   Lưới 2 cột → 1 luồng flex (article/aside = display:contents), thứ tự Figma:
   crumb → tag → H1 → sapo → thông tin + chia sẻ → mục lục (đóng) → ảnh → nội dung chính → bài → FAQ
   → tác giả/nguồn/tags/CTA → form đặt lịch → bài viết liên quan. Số px = khung 390 (y trong comment).
   ============================================================ */
@media (max-width:767px){
  .qhp{padding:20px 0 0}                                               /* crumb y 84 = header 64 + 20 */
  .qhp-wrap{padding:0 20px}
  .qhp-grid{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0}
  .qhp-main,.qhp-aside,.qhp-aside-in{display:contents}

  /* Breadcrumb 3638:17679 · 12/20, gap 6, "/" #BDB7C8, trang hiện tại 600 #422666 */
  .qhp-crumb{gap:0 6px;margin-bottom:16px;font-size:12px;line-height:20px;color:#6E6780}
  .qhp-crumb a{color:#6E6780}
  .qhp-crumb .sep{position:relative;color:transparent}                 /* "›" → "/" như khung */
  .qhp-crumb .sep::before{content:"/";position:absolute;left:0;right:0;text-align:center;color:#BDB7C8}
  .qhp-crumb .cur{font-weight:600;color:var(--ohio-purple-700)}

  /* Đầu bài 3638:17687 · gap 16: tag (pill 12/20 600) → H1 26/34 → sapo 16/26 */
  .qhp-head{order:1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:16px;padding:0}
  .qhp .qhp-cat{margin:0;padding:4px 10px;border-radius:999px;background:#F7F3FB;font-size:12px;line-height:20px;letter-spacing:0;text-transform:none}
  .qhp .qhp-title{margin:0!important}
  .qhp .qhp-sapo{max-width:none;padding:0;color:#1B1822}

  /* Thông tin bài 3638:17646 · nền #F7F3FB r12 p14 gap 6, 13/20; nhãn 600, ngày #6E6780; hàng chia sẻ pt 4 gap 8 */
  .qhp-meta{order:2;padding:14px 14px 0;border:0;border-radius:12px 12px 0 0;background:#F7F3FB;font-size:13px;line-height:20px;color:#1B1822}
  .qhp-meta .line{flex-direction:column;align-items:flex-start;gap:6px;min-height:0}
  .qhp-meta .line > span{display:block;font-weight:600}
  .qhp-meta .rv svg{display:none}
  .qhp-meta strong,.qhp-meta .rv a{font-weight:400;color:#1B1822;text-decoration:none}
  .qhp-meta .line.sub{display:block;margin-top:6px;color:#6E6780}
  .qhp-meta .line.sub > span{display:inline;font-weight:400}
  .qhp-meta .line.sub > span + span::before{content:" · "}
  .qhp-share{order:3;gap:8px;margin:0 0 16px;padding:10px 14px 14px;border:0;border-radius:0 0 12px 12px;background:#F7F3FB}
  .qhp-share .lbl{font-size:13px;line-height:20px;color:#6E6780}
  .qhp-share .btn.ico,.qhp-share .btn svg{display:none}                /* khung: chỉ Zalo + Sao chép */
  .qhp-share .btn,.qhp-share .qhp-share-zalo,.qhp-share .qhp-share-copy{height:32px;padding:0 12px;border-color:#ECEAF0;border-radius:999px;
    font-size:13px;line-height:20px;font-weight:600;color:#1B1822}
  .qhp-share .qhp-share-zalo{gap:6px}
  .qhp-share .qhp-share-zalo::before{content:"";flex:0 0 16px;height:16px;background:no-repeat center/contain   /* icon/zalo 3638:17638 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23422666' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c-5 0-9 3.4-9 7.6 0 2.3 1.2 4.4 3.1 5.8L5.5 20.5l4-2.1c.8.2 1.6.3 2.5.3 5 0 9-3.4 9-7.6s-4-7.6-9-7.6z'/%3E%3C/svg%3E")}

  /* Mục lục 3638:17653 · viền #DED0EE r12 px16 py12; icon menu 18 + "Mục lục" 600 16/24; chevron 20 */
  .qhp-toc{order:4;display:block;margin:0 0 16px;padding:0;border-color:#DED0EE;border-radius:12px}
  .qhp-toc summary.ttl{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px;pointer-events:auto;cursor:pointer;
    font-size:16px;line-height:24px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ohio-purple-700)}
  .qhp-toc summary.ttl::before,.qhp-toc summary.ttl::after{content:"";flex:0 0 18px;height:18px;background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23422666' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
  .qhp-toc summary.ttl::after{flex-basis:20px;height:20px;margin-left:auto;transition:transform .2s;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23422666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
  .qhp-toc details[open] summary.ttl::after{transform:rotate(180deg)}
  .qhp-toc ul{padding:0 16px 12px}

  /* Ảnh 3638:17686 · cao 250 r12, chú thích 13/20 #6E6780 cách 8 */
  .qhp-figure{order:5;margin:0 0 16px}
  .qhp-figure img{height:250px;object-fit:cover;border-radius:12px}
  .qhp-figure figcaption{margin-top:8px;font-size:13px;line-height:20px;color:#6E6780}

  /* Nội dung chính 3638:17671 · nền #F7F3FB r12 p16 gap 10; tiêu đề 600 16/24; mục chevron 16 + 15/24 #5E3D8A */
  .qhp-keys{margin:0 0 16px;padding:16px;border-radius:12px;background:#F7F3FB}
  .qhp-keys .ttl{margin-bottom:10px;font-size:16px;line-height:24px;color:var(--ohio-purple-700)}
  .qhp .qhp-keys ul{padding:0;list-style:none}
  .qhp .qhp-keys li{position:relative;margin:0 0 10px;padding-left:24px;font-size:15px;line-height:24px}
  .qhp .qhp-keys li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E3D8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
  .qhp .qhp-keys a{color:#5E3D8A;text-decoration:none}

  /* Bài 3638:17732… · đoạn 15/24 cách 16; H2 = vạch cam 32×3 → 8 → 22/30, cách khối trên 40, dưới 16 */
  .qhp-body{order:6;color:#1B1822}
  .qhp-body > :last-child{margin-bottom:0}
  .qhp-body h2{margin:40px 0 16px}
  .qhp-body > h2::before,.qhp-faq .qhp-h2::before,.qhp-rel-h::before{content:"";display:block;width:32px;height:3px;margin:0 0 8px;border-radius:2px;background:var(--ohio-cta)}
  .qhp .qhp-body h3:not([class]){font-size:18px!important;line-height:26px!important;margin:24px 0 8px}
  .qhp-body img{border-radius:12px}
  .qhp-body .wp-caption-text,.qhp-body figcaption{font-size:13px;line-height:20px;color:#6E6780;margin-top:8px}

  /* FAQ 3638:18026 · dải nền #F7F3FB py40 tràn mép; mục r12 px16 py14 gap 10, mở = nền #F7F3FB viền #DED0EE; trả lời 13/20 */
  .qhp-faq{order:7;margin-top:20px;padding:40px 0;background:#F7F3FB;box-shadow:0 0 0 100vmax #F7F3FB;clip-path:inset(0 -100vmax)}
  .qhp .qhp-faq .qhp-h2{margin:0 0 16px!important}
  .qhp-faq .list{display:flex;flex-direction:column;gap:10px;padding:0;border:0}
  .qhp-faq .item{padding:14px 16px;border:1px solid #ECEAF0;border-radius:12px;background:#fff}
  .qhp-faq .item[open]{border-color:#DED0EE;background:#F7F3FB}
  .qhp-faq summary{gap:12px;min-height:0;padding:0;font-weight:700;color:var(--ohio-purple-700)}
  .qhp-faq summary i{flex-basis:20px;width:20px;height:20px}
  .qhp-faq summary i::before,.qhp-faq summary i::after{left:4.17px;right:4.17px;height:1.67px;margin-top:-.83px;border-radius:1px;background:#6E6780}   /* icon/plus 3638:17996: 11.7 long, stroke 1.67 #6E6780 */
  .qhp-faq details[open] summary i::before,.qhp-faq details[open] summary i::after{background:var(--ohio-purple-700)}                          /* icon/minus 3638:17990: #422666 */
  .qhp .qhp-faq .ans{padding:8px 0 0;font-size:13px;line-height:20px;color:#1B1822}

  /* Tác giả & nguồn 3638:18078 · p20 gap 16; thẻ viền r16 p16, 2 người cách 14 + kẻ 1; icon 44 #F7F3FB; vai trò 13/20, tên 600 16/24, mô tả 13/20 */
  .qhp-people{order:8;display:flex;flex-direction:column;gap:0;margin-top:20px;padding:16px;border:1px solid #ECEAF0;border-radius:16px}
  .qhp-people .person{align-items:center}
  .qhp-people .person + .person{margin-top:14px;padding-top:14px;border-top:1px solid #ECEAF0}
  .qhp-people .ico,.qhp-people .person:first-child .ico,.qhp-people.is-single .person:first-child .ico{flex-basis:44px;width:44px;height:44px;background:#F7F3FB}
  .qhp-people .ico svg{display:none}                                               /* frame: icon/user 22 (3638:18027) for both people */
  .qhp-people .ico::before{content:"";width:22px;height:22px;background:no-repeat center/22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23422666' stroke-width='1.83333' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 11a3.667 3.667 0 1 0 0-7.333A3.667 3.667 0 0 0 11 11ZM3.667 19.25c0-3.667 3.3-5.958 7.333-5.958s7.333 2.291 7.333 5.958'/%3E%3C/svg%3E")}
  .qhp-people .role{font-size:13px;line-height:20px;color:#6E6780}
  .qhp-people .name{margin:2px 0;font-size:16px;line-height:24px;color:var(--ohio-purple-700)}
  .qhp-people .name a{color:var(--ohio-purple-700)}
  .qhp-people .desc{font-size:13px;line-height:20px;color:#1B1822}
  .qhp-refs{order:9;margin-top:16px}
  .qhp-refs .ttl{margin-bottom:8px;font-size:16px;line-height:24px;color:var(--ohio-purple-700)}
  .qhp-refs ol{padding:0;list-style:none}
  .qhp-refs li{position:relative;min-height:22px;margin-bottom:8px;padding-left:32px;font-size:13px;line-height:20px;color:#1B1822}
  .qhp-refs li:last-child{margin-bottom:0}                                        /* list 3638:18058: 40 + 8 + 22 = 70 */
  .qhp-refs li::before{content:"";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:#F7F3FB no-repeat center/14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23422666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
  .qhp-tags{order:10;margin-top:16px;gap:8px}
  .qhp-tags .lbl{flex:0 0 100%;padding:0;font-size:16px;line-height:24px;font-weight:600;color:var(--ohio-purple-700)}
  .qhp-tags a{padding:4px 10px;background:#F6F5F8;font-size:12px;line-height:20px;font-weight:600;color:#3D3849}

  /* CTA 3638:18077 · nền #422666 r16 p20 gap 12; tiêu đề trắng 18/26, mô tả trắng 15/24; nút cam L1 44 + mũi tên */
  .qhp-cta{order:11;flex-direction:column;align-items:stretch;gap:12px;margin-top:16px;padding:20px;border:0;border-radius:16px;background:var(--ohio-purple-700)}
  .qhp-cta .txt{flex:none}
  .qhp-cta .ttl{margin-bottom:12px;color:#fff}
  .qhp-cta .desc{font-size:15px;line-height:24px;color:#fff}
  .qhp-cta .acts{width:100%}
  .qhp:not(.qhp-sv) .qhp-cta .qhp-btn,.qhp:not(.qhp-sv) .qhp-form .qh-tvf-submit.qhp-btn{gap:8px;width:100%;height:44px;border-radius:12px;background:var(--ohio-grad-cta);color:#fff;
    font-size:14px;line-height:20px;box-shadow:var(--ohio-shadow-primary)}
  .qhp .qhp-cta .qhp-btn.qh_tuvan::after,.qhp .qhp-form .qh-tvf-submit::after{content:"";position:static;flex:0 0 18px;width:18px;height:18px;margin:0;opacity:1;border:0;animation:none;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}

  /* Đặt lịch khám 3638:18102 · dải nền #F7F3FB py40; thẻ trắng viền r16 p20 gap 14; ô 48 r10 viền #BDB7C8; nhãn 600 13/20 #422666 */
  .qhp-form{order:12;max-width:none;margin:60px 0 40px;padding:20px;border-color:#ECEAF0;border-radius:16px;box-shadow:0 0 0 100vmax #F7F3FB;clip-path:inset(-40px -100vmax)}
  .qhp-form > .ttl{margin-bottom:4px;font-size:18px;line-height:26px;color:var(--ohio-purple-700)}
  .qhp-form .sub{margin-bottom:14px;font-size:13px;line-height:20px;color:#6E6780}
  .qhp .qhp-form .qh-tvf-field{margin:0 0 14px;font-size:13px;line-height:20px;font-weight:600;color:var(--ohio-purple-700)}
  .qhp .qhp-form .qh-tvf-field > span{margin-bottom:6px}
  .qhp .qhp-form .qh-tvf-field input,.qhp .qhp-form .qh-tvf-field input[name="need"]{height:48px!important;padding:0 14px!important;border-color:#BDB7C8;border-radius:10px;font-size:15px;font-weight:400}
  .qhp-form .note{justify-content:center;max-width:none;margin-top:14px;font-size:12px;line-height:20px;text-align:center;color:#6E6780}
  .qhp-form .note svg{display:none}
  .qhp-side-rel{display:none}

  /* Bài viết liên quan 3638:18157 · p20 gap 20; H2 vạch cam; 2 thẻ (viền r16, ảnh 196, thân p14 gap 8: tag → 600 16/24 → "Đọc bài viết →") */
  .qhp-rel{order:13;margin:0;padding:20px 0}
  .qhp-rel .qhp-rel-t{display:none}
  .qhp .qhp-rel .qhp-rel-h{display:block;margin:0 0 20px!important;font:700 22px/30px var(--qh-font-head);text-transform:uppercase}
  .qhp-rel .grid{grid-template-columns:1fr;gap:var(--single-aside-related-grid-gap,16px)}
  .qhp-rel .card{overflow:hidden;padding-bottom:14px;border:1px solid #ECEAF0;border-radius:16px;background:#fff}
  .qhp-rel .card:nth-child(n+3){display:none}
  .qhp-rel .thumb{aspect-ratio:auto;height:196px;margin:0 0 14px;border-radius:0}
  .qhp-rel .cat{align-self:flex-start;margin:0 14px 8px;padding:4px 10px;border-radius:999px;background:#F7F3FB;font-size:12px;line-height:20px;letter-spacing:0;text-transform:none;color:var(--ohio-purple-700)}
  .qhp-rel .t{margin:0 14px 8px;font-size:18px;line-height:26px;font-weight:600;color:var(--ohio-purple-700);-webkit-line-clamp:4}
  .qhp-rel .more{display:inline-flex;align-items:center;gap:6px;margin:0 14px;font-size:14px;line-height:20px;font-weight:600;color:#5E3D8A}
  .qhp-rel .more::after{content:"→";font-weight:400}
}

/* Flatten the sticky wrapper too: its unordered flex item otherwise precedes the article title. */
@media(max-width:767px){.qhp:not(.qhp-sv) .qhp-stick{display:contents}}

/* Wrapped CMS tags retain a safe inset inside their pill border. */
@media(max-width:767px){.qhp .qhp-tags a{padding:6px 14px;max-width:100%;overflow-wrap:anywhere}}

/* QA v2 R2 (23/10): article mobile type copied from the frame 4823:27928; "Mục lục" / "Tác giả" per frame case. */
@media(max-width:767px){
  html body.ohio-hh #wrapper #main .qhp nav.qhp-crumb a{line-height:20px!important}
  html body.ohio-hh #wrapper #main .qhp nav.qhp-crumb span.cur{font-weight:600!important;color:#422666!important;line-height:20px!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-body .qhp-keys p.ttl{font-weight:var(--single-key-title-weight,600)!important;font-size:var(--single-key-title-size,18px)!important;line-height:var(--single-key-title-line,26px)!important;color:var(--single-key-title-ink,#422666)!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-meta .line span{font-size:13px!important;line-height:20px!important;color:#1b1822!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-share span.lbl{font-size:12px!important;line-height:18px!important;color:#6e6780!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-share button.btn{font-weight:600!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-tags span.lbl{font-weight:600!important;font-size:18px!important;line-height:26px!important;color:#422666!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-tags a{font-weight:600!important;font-size:12px!important;color:#3d3849!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-people .person .name{color:#422666!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-people .person .role{font-weight:400!important;line-height:18px!important;color:#6e6780!important;letter-spacing:0!important;text-transform:none!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-cta .txt p.desc{font-size:13px!important;line-height:20px!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-toc summary.ttl{font-size:18px!important;line-height:26px!important;color:#422666!important;letter-spacing:0!important;text-transform:none!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-form p.ttl{font-weight:600!important;font-size:20px!important;line-height:28px!important;color:#422666!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-form p.sub{font-size:12px!important;line-height:18px!important;color:#6e6780!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-form p.note{font-size:12px!important;color:#6e6780!important}
  html body.ohio-hh #wrapper #main .qhp .qhp-form label.qh-tvf-field>span{font-weight:600!important;color:#422666!important}
  html body.ohio-hh #wrapper #main .qhp .list details.item summary>span{color:#422666!important}
  html body.ohio-hh #wrapper #main .qhp .list details.item .ans p{font-size:12px!important;line-height:18px!important}
}

/* S3 round 2 (24/10): related-card "Đọc bài viết" starts at the card padding (frame 4823:27928 x 35), not centred. */
@media(max-width:767px){.qhp-rel .more{align-self:flex-start}}