/* ============================================================================
   SBH Knowledge Hub — NK-309 · 11/09/2026
   Phạm vi: chỉ trong .kh (hub, cụm, bài). Không đụng header/footer/WooCommerce.
   Tông: tối giản, biên tập, quiet luxury — trắng ngà · navy SBH · xám trung tính · đen.
   Ghi chú: CSS tuỳ chỉnh của theme ép h1–h6 về Arial bằng !important (quyết định
   14/07/2026) — các selector dưới có độ ưu tiên cao hơn nên chữ tiêu đề có chân
   vẫn hiện đúng trong .kh; chữ thân bài giữ bộ chữ của máy để nhẹ và dễ đọc.
   ========================================================================== */
.kh{
  --kh-navy:#1B2A4A; --kh-brand:#2E3192; --kh-ink:#16181D; --kh-muted:#5C6270;
  --kh-line:rgba(22,24,29,.12); --kh-line-dam:rgba(22,24,29,.28);
  --kh-paper:#FFFFFF; --kh-off:#F7F6F3; --kh-off-2:#EFEDE8;
  --kh-serif:Georgia,"Times New Roman",Times,serif;
  --kh-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --kh-r:4px; --kh-khung:1120px;
  font-family:var(--kh-sans); color:var(--kh-ink); background:var(--kh-paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.kh *,.kh *::before,.kh *::after{box-sizing:border-box}
.kh a{color:var(--kh-brand);text-decoration:none}
.kh a:hover{color:var(--kh-navy)}
.kh a:focus-visible,.kh button:focus-visible,.kh input:focus-visible,.kh summary:focus-visible{outline:2px solid var(--kh-brand);outline-offset:2px}
.kh img{max-width:100%;height:auto;display:block}
.kh-khung{width:100%;max-width:var(--kh-khung);margin:0 auto;padding:0 20px}
.kh .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- chữ ---------- */
.kh .kh-eyebrow{margin:0 0 .55rem;font:700 11px/1.4 var(--kh-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--kh-muted)}
.kh .kh-eyebrow a{color:var(--kh-muted)} .kh .kh-eyebrow a:hover{color:var(--kh-brand)}
.kh .kh-h1,.kh .kh-h2,.kh .kh-the-tieu-de,.kh .kh-cum-ten,.kh .kh-cta-hoi,.kh .kh-dv-ten,.kh-noi-dung h2{
  font-family:var(--kh-serif)!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;color:var(--kh-ink)
}
.kh .kh-h1{margin:0 0 .8rem;font-size:clamp(1.75rem,3.4vw + .6rem,2.75rem)!important;line-height:1.15!important}
.kh .kh-h1--nho{font-size:clamp(1.55rem,2.6vw + .5rem,2.25rem)!important}
.kh .kh-h2{margin:0;font-size:clamp(1.35rem,1.6vw + .7rem,1.9rem)!important;line-height:1.2!important}

/* ---------- nút, chip ---------- */
.kh .kh-nut{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid var(--kh-navy);border-radius:var(--kh-r);background:#fff;color:var(--kh-navy);font:600 14px/1.2 var(--kh-sans);text-decoration:none;transition:background .16s,color .16s,border-color .16s}
.kh .kh-nut:hover{background:var(--kh-off)}
.kh .kh-nut--chinh{background:var(--kh-navy);color:#fff}
.kh .kh-nut--chinh:hover{background:#12203B;color:#fff}
.kh .kh-nut--phang{border-color:transparent;color:var(--kh-brand)}
.kh .kh-chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid var(--kh-line-dam);border-radius:999px;background:#fff;color:var(--kh-ink);font:500 13.5px/1.2 var(--kh-sans);white-space:nowrap;text-decoration:none;transition:border-color .16s,background .16s}
.kh .kh-chip:hover{border-color:var(--kh-navy);color:var(--kh-navy)}
.kh .kh-chip--dang{background:var(--kh-navy);border-color:var(--kh-navy);color:#fff}
.kh .kh-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.kh .kh-chips--phu{margin-top:8px}

/* ---------- tìm kiếm ---------- */
.kh .kh-tim form{display:flex;gap:0;width:100%;max-width:640px;border:1px solid var(--kh-line-dam);border-radius:var(--kh-r);background:#fff;overflow:hidden}
.kh .kh-tim form:focus-within{border-color:var(--kh-navy);box-shadow:0 0 0 3px rgba(27,42,74,.08)}
.kh .kh-tim-o{flex:1 1 auto;min-width:0;height:48px;padding:0 16px;border:0;background:transparent;font:16px/1.2 var(--kh-sans);color:var(--kh-ink);border-radius:0;box-shadow:none;margin:0}
.kh .kh-tim-o::placeholder{color:#8A8F99}
.kh .kh-tim-nut{flex:0 0 auto;min-width:72px;height:48px;padding:0 18px;border:0;border-left:1px solid var(--kh-line);background:var(--kh-navy);color:#fff;font:600 14px/1 var(--kh-sans);cursor:pointer;margin:0;border-radius:0;text-transform:none;letter-spacing:0}
.kh .kh-tim-nut:hover{background:#12203B}
.kh .kh-tim-goi-y{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kh .kh-tim--nho{margin-top:16px}
.kh .kh-tim--nho form{max-width:480px}

/* ---------- hero ---------- */
.kh .kh-hero{background:var(--kh-off);border-bottom:1px solid var(--kh-line)}
.kh .kh-hero-trong{padding-top:44px;padding-bottom:36px;max-width:820px}
.kh .kh-hero-phu{margin:0 0 22px;font-size:clamp(1rem,.4vw + .9rem,1.15rem);line-height:1.6;color:var(--kh-muted);max-width:640px}

/* ---------- 4 cụm ---------- */
.kh .kh-cum-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:32px;padding-bottom:8px}
.kh .kh-cum-the{display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;border:1px solid var(--kh-line);border-radius:var(--kh-r);background:#fff;color:var(--kh-ink);text-decoration:none;min-height:100%;transition:border-color .16s,transform .16s}
.kh .kh-cum-the:hover{border-color:var(--kh-navy);transform:translateY(-1px);color:var(--kh-ink)}
.kh .kh-cum-so{font:700 11px/1 var(--kh-sans);letter-spacing:.18em;color:var(--kh-muted)}
.kh .kh-cum-ten{font-size:1.25rem!important;line-height:1.2!important;margin:2px 0 0}
.kh .kh-cum-mo-ta{font-size:14px;line-height:1.5;color:var(--kh-muted)}
.kh .kh-cum-dem{margin-top:auto;padding-top:8px;font:600 13px/1.2 var(--kh-sans);color:var(--kh-brand)}

/* ---------- khối ---------- */
.kh .kh-khoi{padding-top:40px;padding-bottom:8px}
.kh .kh-khoi-dau{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--kh-line)}
.kh .kh-khoi-mo-ta{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--kh-muted)}
.kh .kh-xem-tat-ca{flex:0 0 auto;font:600 14px/1.2 var(--kh-sans);color:var(--kh-brand);white-space:nowrap;padding-bottom:2px}
.kh .kh-luoi{display:grid;gap:22px 20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.kh .kh-luoi--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kh .kh-luoi--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- thẻ bài ---------- */
.kh .kh-the{display:flex;flex-direction:column;min-width:0}
.kh .kh-the-khung{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--kh-r);background:var(--kh-off-2);margin-bottom:12px}
.kh .kh-the-khung img,.kh .kh-the-anh{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.kh .kh-the:hover .kh-the-khung img{transform:scale(1.025)}
.kh .kh-the-than{display:flex;flex-direction:column;gap:6px;min-width:0}
.kh .kh-the-cum{font:700 11px/1.3 var(--kh-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--kh-muted)}
.kh .kh-the-cum:hover{color:var(--kh-brand)}
.kh .kh-the-tieu-de{margin:0;font-size:1.15rem!important;line-height:1.3!important}
.kh .kh-the-tieu-de a{color:var(--kh-ink)} .kh .kh-the-tieu-de a:hover{color:var(--kh-brand)}
.kh .kh-the-mo-ta{margin:0;font-size:14px;line-height:1.55;color:var(--kh-muted);overflow-wrap:anywhere}
.kh .kh-the-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0;font-size:12.5px;line-height:1.4;color:#7A808B}
.kh .kh-the--khong-anh{padding-top:12px;border-top:2px solid var(--kh-navy)}
.kh .kh-luoi--4 .kh-the-tieu-de{font-size:1.05rem!important}

/* ---------- câu hỏi thường gặp (hub) ---------- */
.kh .kh-cau-hoi-ds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.kh .kh-cau-hoi-ds li{border-bottom:1px solid var(--kh-line)}
.kh .kh-cau-hoi-ds a{display:flex;flex-direction:column;gap:3px;padding:14px 0;color:var(--kh-ink);min-height:44px}
.kh .kh-cau-hoi-ds a>span:first-child{font:600 16px/1.35 var(--kh-sans)}
.kh .kh-cau-hoi-bai{font-size:13px;color:var(--kh-muted)}
.kh .kh-cau-hoi-ds a:hover>span:first-child{color:var(--kh-brand)}

/* ---------- dịch vụ (hub) ---------- */
.kh .kh-dich-vu{margin-top:44px;padding:32px 28px;border:1px solid var(--kh-line);border-radius:var(--kh-r);background:var(--kh-off)}
.kh .kh-dich-vu-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.kh .kh-dv{display:flex;flex-direction:column;gap:8px;padding:20px;background:#fff;border:1px solid var(--kh-line);border-radius:var(--kh-r)}
.kh .kh-dv-ten{margin:0;font-size:1.2rem!important;line-height:1.25!important}
.kh .kh-dv-mo-ta{margin:0 0 6px;font-size:14px;line-height:1.55;color:var(--kh-muted);flex:1 1 auto}
.kh .kh-dich-vu-phu{margin:18px 0 0;font-size:14px;color:var(--kh-muted)}

/* ---------- phân trang ---------- */
.kh .kh-phan-trang{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:32px 0 8px}
.kh .kh-phan-trang .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--kh-line-dam);border-radius:var(--kh-r);color:var(--kh-ink);font:500 14px/1 var(--kh-sans);background:#fff}
.kh .kh-phan-trang .page-numbers.current{background:var(--kh-navy);border-color:var(--kh-navy);color:#fff}
.kh .kh-phan-trang .page-numbers.dots{border-color:transparent}
.kh .kh-trong{padding:24px 0;color:var(--kh-muted)}

/* ---------- trang cụm ---------- */
.kh .kh-cum-dau-trang{padding-top:32px;padding-bottom:20px;border-bottom:1px solid var(--kh-line)}
.kh .kh-cum-gioi-thieu{margin:0 0 18px;max-width:760px;font-size:16.5px;line-height:1.65;color:var(--kh-muted)}
.kh.kh-cum .kh-khoi{padding-top:28px}

/* ---------- bài viết ---------- */
.kh .kh-bai-khung{width:100%;max-width:760px;margin:0 auto;padding:36px 20px 24px}
.kh .kh-bai-dau{margin-bottom:22px}
.kh .kh-bai-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--kh-line);font-size:13.5px;line-height:1.4;color:var(--kh-muted)}
.kh .kh-bai-tac-gia{font-weight:700;color:var(--kh-ink)}
.kh .kh-bai-cap-nhat{color:var(--kh-brand)}
.kh .kh-tom-tat{margin:18px 0 0;padding:16px 20px;border-left:3px solid var(--kh-navy);background:var(--kh-off);border-radius:0 var(--kh-r) var(--kh-r) 0}
.kh .kh-tom-tat-nhan{margin:0 0 6px;font:700 11px/1.3 var(--kh-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kh-navy)}
.kh .kh-tom-tat p{margin:0 0 .6em;font-size:16.5px;line-height:1.65;color:var(--kh-ink)}
.kh .kh-tom-tat p:last-child{margin-bottom:0}
.kh .kh-bai-anh{margin:0 0 24px;border-radius:var(--kh-r);overflow:hidden}
.kh .kh-bai-anh img{width:100%;height:auto}
.kh .kh-muc-luc{margin:0 0 28px;padding:14px 18px;border:1px solid var(--kh-line);border-radius:var(--kh-r);background:#fff}
.kh .kh-muc-luc summary{cursor:pointer;font:700 12px/1.4 var(--kh-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kh-muted);list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:24px}
.kh .kh-muc-luc summary::-webkit-details-marker{display:none}
.kh .kh-muc-luc summary::after{content:"+";font-size:18px;font-weight:400;color:var(--kh-muted)}
.kh .kh-muc-luc[open] summary::after{content:"–"}
.kh .kh-muc-luc ol{margin:10px 0 0;padding:0 0 0 20px;font-size:15px;line-height:1.5}
.kh .kh-muc-luc li{margin:0 0 6px}
.kh .kh-muc-luc a{color:var(--kh-ink)} .kh .kh-muc-luc a:hover{color:var(--kh-brand)}

.kh-noi-dung{font-size:17px;line-height:1.75;color:var(--kh-ink);overflow-wrap:anywhere}
.kh-noi-dung>*{max-width:100%}
.kh-noi-dung p{margin:0 0 1.2em}
.kh-noi-dung h2{margin:2em 0 .7em;font-size:1.65rem!important;line-height:1.25!important;scroll-margin-top:90px}
.kh-noi-dung h3{margin:1.6em 0 .5em;font:600 1.2rem/1.35 var(--kh-sans)!important;color:var(--kh-ink);text-transform:none!important;letter-spacing:0!important}
.kh-noi-dung h4{margin:1.3em 0 .4em;font:600 1.05rem/1.4 var(--kh-sans)!important}
.kh-noi-dung ul,.kh-noi-dung ol{margin:0 0 1.3em;padding-left:1.4em}
.kh-noi-dung li{margin:0 0 .45em}
.kh-noi-dung li>ul,.kh-noi-dung li>ol{margin-top:.4em}
.kh-noi-dung strong{font-weight:700}
.kh-noi-dung img{margin:1.4em auto;border-radius:var(--kh-r)}
.kh-noi-dung figure{margin:1.4em 0}
.kh-noi-dung figcaption,.kh-noi-dung .wp-caption-text{font-size:13.5px;line-height:1.5;color:var(--kh-muted);text-align:center;margin-top:.4em}
.kh-noi-dung blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--kh-navy);font-style:italic;color:#333}
.kh-noi-dung hr{border:0;border-top:1px solid var(--kh-line);margin:2em 0}
.kh-noi-dung a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.kh-noi-dung .sbh-hook{font-size:1.06em}
.kh-noi-dung table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:15px;line-height:1.5;display:block;overflow-x:auto}
.kh-noi-dung th,.kh-noi-dung td{padding:10px 12px;border:1px solid var(--kh-line);text-align:left;vertical-align:top;min-width:120px}
.kh-noi-dung th{background:var(--kh-off);font-weight:700}
/* khối kinh nghiệm thật + checklist (dùng trong 12 bài ưu tiên) */
.kh-noi-dung .kh-goc{margin:1.8em 0;padding:18px 20px;border:1px solid var(--kh-line);border-left:3px solid var(--kh-brand);border-radius:0 var(--kh-r) var(--kh-r) 0;background:var(--kh-off)}
.kh-noi-dung .kh-goc-nhan{margin:0 0 8px;font:700 11px/1.3 var(--kh-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kh-brand)}
.kh-noi-dung .kh-goc p:last-child{margin-bottom:0}
.kh-noi-dung .kh-checklist{list-style:none;padding:0;margin:0 0 1.5em}
.kh-noi-dung .kh-checklist li{position:relative;padding:8px 0 8px 32px;border-bottom:1px solid var(--kh-line);margin:0}
.kh-noi-dung .kh-checklist li::before{content:"";position:absolute;left:4px;top:13px;width:14px;height:14px;border:1.5px solid var(--kh-navy);border-radius:3px}
.kh-noi-dung .kh-checklist li::after{content:"";position:absolute;left:9px;top:15px;width:4px;height:8px;border:solid var(--kh-navy);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
/* FAQ hiển thị (cũng là nguồn FAQPage) */
.kh-noi-dung .kh-faq-h2{padding-top:1em;border-top:1px solid var(--kh-line)}
.kh-noi-dung .kh-faq-h2 ~ h3{margin:1.2em 0 .35em;font-size:1.08rem!important;padding-left:14px;border-left:2px solid var(--kh-navy)}
.kh-noi-dung .kh-faq-h2 ~ p{color:#2B2F38}

.kh .kh-tac-gia-hop{margin:36px 0 0;padding:16px 18px;border:1px solid var(--kh-line);border-radius:var(--kh-r);background:var(--kh-off);font-size:14px;line-height:1.6;color:var(--kh-muted)}
.kh .kh-tac-gia-hop p{margin:0} .kh .kh-tac-gia-hop strong{color:var(--kh-ink)}
.kh .kh-lien-quan{margin-top:40px}
.kh .kh-lien-quan .kh-the-mo-ta{display:none}

/* ---------- CTA theo intent ---------- */
.kh .kh-cta{margin:40px 0 8px;padding:28px 26px;border-radius:var(--kh-r);background:var(--kh-navy);color:#fff}
.kh .kh-cta .kh-eyebrow{color:rgba(255,255,255,.7)}
.kh .kh-cta-hoi{margin:0 0 8px;font-size:clamp(1.3rem,1.4vw + .8rem,1.7rem)!important;line-height:1.25!important;color:#fff!important}
.kh .kh-cta-phu{margin:0 0 18px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82);max-width:600px}
.kh .kh-cta-nut{display:flex;flex-wrap:wrap;gap:10px}
.kh .kh-cta .kh-nut{border-color:rgba(255,255,255,.55);background:transparent;color:#fff}
.kh .kh-cta .kh-nut:hover{background:rgba(255,255,255,.1)}
.kh .kh-cta .kh-nut--chinh{background:#fff;color:var(--kh-navy);border-color:#fff}
.kh .kh-cta .kh-nut--chinh:hover{background:#EDEFF5;color:var(--kh-navy)}
.kh .kh-cta .kh-nut--phang{border-color:transparent;color:rgba(255,255,255,.9)}
.kh.kh-cum .kh-cta{margin-top:36px;margin-bottom:24px}

/* ---------- đáp ứng ---------- */
@media (max-width:1023px){
  .kh .kh-cum-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kh .kh-luoi--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kh .kh-dich-vu-luoi{grid-template-columns:1fr}
}
@media (max-width:767px){
  .kh-khung{padding:0 16px}
  .kh .kh-hero-trong{padding-top:28px;padding-bottom:22px}
  .kh .kh-hero-phu{margin-bottom:16px;font-size:15px}
  .kh .kh-tim-goi-y{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:12px -16px 0;padding:0 16px 2px}
  .kh .kh-tim-goi-y::-webkit-scrollbar{display:none}
  .kh .kh-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
  .kh .kh-chips::-webkit-scrollbar{display:none}
  .kh .kh-chip{min-height:44px}
  .kh .kh-cum-luoi{padding-top:20px;gap:10px}
  .kh .kh-cum-the{padding:14px 14px 12px;gap:4px}
  .kh .kh-cum-ten{font-size:1.05rem!important}
  .kh .kh-cum-mo-ta{font-size:12.5px}
  .kh .kh-khoi{padding-top:28px}
  .kh .kh-khoi-dau{flex-direction:column;align-items:flex-start;gap:8px}
  .kh .kh-luoi,.kh .kh-luoi--4,.kh .kh-luoi--2{grid-template-columns:1fr;gap:18px}
  .kh .kh-luoi--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  .kh .kh-luoi--4 .kh-the-mo-ta{display:none}
  .kh .kh-luoi--4 .kh-the-tieu-de{font-size:.98rem!important}
  .kh .kh-cau-hoi-ds{grid-template-columns:1fr}
  .kh .kh-dich-vu{padding:22px 16px;margin-top:32px}
  .kh .kh-bai-khung{padding:22px 16px 20px}
  .kh-noi-dung{font-size:16.5px;line-height:1.7}
  .kh-noi-dung h2{font-size:1.45rem!important;margin-top:1.7em}
  .kh .kh-cta{padding:22px 18px}
  .kh .kh-cta-nut .kh-nut{flex:1 1 100%}
  .kh .kh-tom-tat{padding:14px 16px}
  .kh .kh-tom-tat p{font-size:15.5px}
}
@media (max-width:559px){
  .kh .kh-cum-luoi{grid-template-columns:1fr 1fr}
  .kh .kh-cum-dem{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .kh *{transition:none!important}
}