/* Trang chi tiết bài viết (single.php) – sinh từ cong-cu/tao-mau-bai-viet.js (mẫu B), không sửa tay */
/* ---------- 1. Token sáng + tối ---------- */
.tn-bvb{--bvb-primary:#2F7BF5;--bvb-hl:#2563EB;--bvb-ink:#0F172A;--bvb-text:#334155;--bvb-muted:#64748B;--bvb-bg:#FFFFFF;--bvb-bg-b:#EEF5FF;--bvb-bg-c:#D3E4FD;--bvb-tint:#EFF6FF;--bvb-line:#DBEAFE;--bvb-line-h:#93C5FD;--bvb-card:#FFFFFF;--bvb-grid:rgb(47 123 245 / .07);--bvb-ghost-bg:rgb(255 255 255 / .75);--bvb-ghost-line:rgb(47 123 245 / .35);--bvb-ghost-fg:#0F172A;--bvb-call-a:#2563EB;--bvb-call-b:#3B82F6;--bvb-call-fill:#1E40AF;--bvb-on:#FFFFFF;--bvb-on-soft:rgb(255 255 255 / .9);--bvb-ov:rgb(8 20 48 / .85);--bvb-ov-0:rgb(8 20 48 / 0);--bvb-band-a:#1D4ED8;--bvb-band-b:#2563EB;--bvb-band-grid:rgb(255 255 255 / .08);--bvb-focus:#2563EB;--bvb-shadow:0 10px 30px -12px rgb(15 23 42 / .12);--bvb-r-lg:28px;--bvb-r-md:18px;--bvb-r-pill:999px}
/* Giao ước sáng/tối: đọc thuộc tính data-med-theme trên thẻ html */
:root[data-med-theme="dark"] .tn-bvb{--bvb-hl:#93C5FD;--bvb-ink:#F1F5F9;--bvb-text:#CBD5E1;--bvb-muted:#94A3B8;--bvb-bg:#0B1220;--bvb-bg-b:#0E1B33;--bvb-bg-c:#14305E;--bvb-tint:#0F1B30;--bvb-line:#1E2E4A;--bvb-line-h:#3B82F6;--bvb-card:#0F1A2C;--bvb-grid:rgb(147 197 253 / .06);--bvb-ghost-bg:rgb(15 23 42 / .5);--bvb-ghost-line:rgb(147 197 253 / .35);--bvb-ghost-fg:#F1F5F9;--bvb-band-a:#1E3A8A;--bvb-band-b:#1D4ED8;--bvb-focus:#93C5FD;--bvb-shadow:0 10px 30px -12px rgb(0 0 0 / .6)}
/* ---------- 2. Reset trong phạm vi khối ---------- */
.tn-bvb{display:block;width:100vw;max-width:100vw;margin:0 calc(50% - 50vw)!important;padding:0!important;background:var(--bvb-bg);color:var(--bvb-text);font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:clip}
/* Khối full-width (100vw): chặn thanh cuộn ngang của cả trang */
body{overflow-x:clip}
.tn-bvb *,.tn-bvb *::before,.tn-bvb *::after{box-sizing:border-box}
.tn-bvb :is(h1,h2,h3,p,ul,ol,li,figure,nav,aside,details,summary){margin:0;padding:0;border:0;background:none;box-shadow:none;font-family:inherit!important;text-transform:none;letter-spacing:normal}
.tn-bvb :is(h1,h2,h3){color:var(--bvb-ink);font-weight:700;line-height:1.25}
.tn-bvb :is(ul,ol){list-style:none}
.tn-bvb :is(ul,ol)>li::before{content:none}
.tn-bvb a{color:inherit;text-decoration:none!important;box-shadow:none;font-family:inherit!important}
.tn-bvb img{display:block;max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.tn-bvb svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tn-bvb :focus-visible{outline:3px solid var(--bvb-focus);outline-offset:3px}
/* ---------- 3. Component ---------- */
.tn-bvb .tn-bvb-wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.tn-bvb .tn-bvb-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;color:var(--bvb-muted)}
.tn-bvb .tn-bvb-crumb li+li::before{content:"/";margin-right:8px;opacity:.6}
.tn-bvb .tn-bvb-crumb a{display:inline-flex;align-items:center;min-height:44px}
.tn-bvb .tn-bvb-crumb a:hover{color:var(--bvb-hl)}
.tn-bvb .tn-bvb-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--bvb-r-pill);background:var(--bvb-tint);color:var(--bvb-hl);font-size:13px;font-weight:700}
.tn-bvb h1{font-size:clamp(28px,5vw,44px);letter-spacing:-.02em;line-height:1.18;text-wrap:balance}
.tn-bvb .hl{color:var(--bvb-hl)}
.tn-bvb .tn-bvb-lead{font-size:17px;color:var(--bvb-muted)}
.tn-bvb .tn-bvb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14px;color:var(--bvb-muted)}
.tn-bvb .tn-bvb-meta>span{display:inline-flex;align-items:center;gap:6px}
.tn-bvb .tn-bvb-by{font-weight:600;color:var(--bvb-ink)}
.tn-bvb .tn-bvb-av{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--bvb-call-a),var(--bvb-call-b));color:var(--bvb-on);font-size:11.5px;font-weight:800;letter-spacing:.02em}
.tn-bvb .tn-bvb-fig{overflow:hidden;aspect-ratio:16/9;border-radius:var(--bvb-r-md);background:var(--bvb-tint)}
.tn-bvb .tn-bvb-fig img{width:100%;height:100%;object-fit:cover}
/* Nội dung bài (the_content) */
.tn-bvb .tn-bvb-prose{font-size:17px;line-height:1.75;color:var(--bvb-text)}
.tn-bvb .tn-bvb-prose>*+*{margin-top:18px}
.tn-bvb .tn-bvb-prose h2{margin-top:40px;font-size:clamp(21px,2.6vw,26px);letter-spacing:-.01em;scroll-margin-top:96px}
.tn-bvb .tn-bvb-prose ul{display:grid;gap:10px}
.tn-bvb .tn-bvb-prose ul li{position:relative;padding-left:26px}
.tn-bvb .tn-bvb-prose ul li::after{content:"";position:absolute;left:6px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--bvb-primary)}
.tn-bvb .tn-bvb-prose a:not(.tn-bvb-btn){color:var(--bvb-hl);font-weight:600;text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:1px!important}
.tn-bvb .tn-bvb-disc{margin-top:32px!important;padding-top:18px;border-top:1px solid var(--bvb-line);font-size:14.5px;color:var(--bvb-muted);font-style:italic}
/* Nút gọi / Zalo */
.tn-bvb .tn-bvb-ctas{display:flex;flex-direction:column;gap:10px}
.tn-bvb .tn-bvb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:var(--bvb-r-pill);font-size:15.5px;font-weight:700;line-height:1.2;transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
.tn-bvb .tn-bvb-btn:active{transform:scale(.97)}
.tn-bvb .tn-bvb-btn--call{background:linear-gradient(135deg,var(--bvb-call-a),var(--bvb-call-b));color:var(--bvb-on);box-shadow:0 14px 28px -12px rgb(37 99 235 / .7)}
.tn-bvb .tn-bvb-btn--call:hover{background:var(--bvb-call-fill)}
.tn-bvb .tn-bvb-btn--zalo{background:var(--bvb-ghost-bg);border:1px solid var(--bvb-ghost-line);color:var(--bvb-ghost-fg)}
.tn-bvb .tn-bvb-btn--zalo:hover{border-color:var(--bvb-primary)}
.tn-bvb .tn-bvb-btn--zalo svg{color:var(--bvb-hl)}
.tn-bvb .tn-bvb-help{padding:24px;border-radius:var(--bvb-r-md);border:1px solid var(--bvb-line);background:linear-gradient(180deg,var(--bvb-bg-b),var(--bvb-bg-c))}
.tn-bvb .tn-bvb-help h2{font-size:20px}
.tn-bvb .tn-bvb-help p{margin:8px 0 18px;font-size:15px}
/* Mục lục */
.tn-bvb .tn-bvb-toc{display:grid;gap:2px;counter-reset:tc}
.tn-bvb .tn-bvb-toc li{counter-increment:tc}
.tn-bvb .tn-bvb-toc a{display:flex;gap:10px;min-height:44px;align-items:center;padding:6px 10px;border-radius:10px;font-size:15px;font-weight:500;color:var(--bvb-text)}
.tn-bvb .tn-bvb-toc a::before{content:counter(tc);display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--bvb-tint);color:var(--bvb-hl);font-size:12.5px;font-weight:700}
.tn-bvb .tn-bvb-toc a:hover{background:var(--bvb-tint);color:var(--bvb-hl)}
/* Thẻ dịch vụ liên quan */
.tn-bvb .tn-bvb-svc{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border:1px solid var(--bvb-line);border-radius:var(--bvb-r-md);background:var(--bvb-card);transition:border-color .25s ease}
.tn-bvb .tn-bvb-svc:hover{border-color:var(--bvb-line-h)}
.tn-bvb .tn-bvb-svc img{width:96px;height:96px;object-fit:cover;border-radius:12px}
.tn-bvb .tn-bvb-svc small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bvb-hl)}
.tn-bvb .tn-bvb-svc strong{display:block;margin-top:2px;font-size:16px;color:var(--bvb-ink)}
.tn-bvb .tn-bvb-svc span>span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--bvb-muted)}
/* Bài viết liên quan */
.tn-bvb .tn-bvb-relsec{padding:56px 0 64px;background:var(--bvb-tint)}
.tn-bvb .tn-bvb-relsec h2{font-size:clamp(24px,3.4vw,32px);text-align:center;margin-bottom:28px}
.tn-bvb .tn-bvb-rel{display:grid;gap:14px}
.tn-bvb .tn-bvb-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center;height:100%;padding:12px;border:1px solid var(--bvb-line);border-radius:var(--bvb-r-md);background:var(--bvb-card)}
.tn-bvb .tn-bvb-card-img{overflow:hidden;aspect-ratio:4/3;border-radius:12px;background:var(--bvb-bg-b)}
.tn-bvb .tn-bvb-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tn-bvb .tn-bvb-card:hover .tn-bvb-card-img img{transform:scale(1.05)}
.tn-bvb .tn-bvb-card-cat{font-size:12.5px;font-weight:700;color:var(--bvb-hl)}
.tn-bvb .tn-bvb-card h3{margin-top:2px;font-size:15.5px;line-height:1.4}
.tn-bvb .tn-bvb-card h3 a:hover{color:var(--bvb-hl)}
.tn-bvb .tn-bvb-card-meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--bvb-muted)}
.tn-bvb .tn-bvb-card-meta svg{width:15px;height:15px}
.tn-bvb .tn-bvb-all{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:20px;font-weight:700;color:var(--bvb-hl)}
/* Mẫu B: tiêu đề căn trái; bài bên trái, cột bên dính (mục lục, gọi tư vấn, dịch vụ liên quan) */
.tn-bvb .tn-bvb-head{display:grid;gap:14px;padding:16px 0 28px;border-bottom:1px solid var(--bvb-line)}
.tn-bvb .tn-bvb-head h1{max-width:900px}
.tn-bvb .tn-bvb-head .tn-bvb-lead{max-width:760px}
.tn-bvb .tn-bvb-layout{display:grid;gap:32px;padding:28px 0 64px}
.tn-bvb .tn-bvb-art{min-width:0}
.tn-bvb .tn-bvb-art .tn-bvb-fig{margin-bottom:28px}
.tn-bvb .tn-bvb-tocm{margin-bottom:24px;border:1px solid var(--bvb-line);border-radius:var(--bvb-r-md);background:var(--bvb-card)}
.tn-bvb .tn-bvb-tocm summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;font-weight:700;color:var(--bvb-ink);cursor:pointer;list-style:none}
.tn-bvb .tn-bvb-tocm summary::-webkit-details-marker{display:none}
.tn-bvb .tn-bvb-tocm summary svg:last-child{margin-left:auto;transition:transform .25s ease}
.tn-bvb .tn-bvb-tocm[open] summary svg:last-child{transform:rotate(180deg)}
.tn-bvb .tn-bvb-tocm .tn-bvb-toc{padding:0 8px 10px}
.tn-bvb .tn-bvb-side{display:grid;gap:16px;align-content:start}
.tn-bvb .tn-bvb-box{padding:18px;border:1px solid var(--bvb-line);border-radius:var(--bvb-r-md);background:var(--bvb-card)}
.tn-bvb .tn-bvb-box h2{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:16px}
.tn-bvb .tn-bvb-side .tn-bvb-ctas{flex-direction:column!important}
.tn-bvb .tn-bvb-side .tn-bvb-toc-box{display:none}
/* ---------- 4. Responsive (min-width) ---------- */
@media (min-width:560px){.tn-bvb .tn-bvb-ctas{flex-direction:row;flex-wrap:wrap}}
@media (min-width:768px){.tn-bvb .tn-bvb-wrap{padding:0 24px}.tn-bvb .tn-bvb-relsec{padding:80px 0 96px}.tn-bvb .tn-bvb-rel{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.tn-bvb .tn-bvb-card{grid-template-columns:1fr;align-items:start;padding:0;overflow:hidden}.tn-bvb .tn-bvb-card-img{border-radius:0}.tn-bvb .tn-bvb-card>div{padding:4px 18px 20px}.tn-bvb .tn-bvb-help{padding:28px}}
@media (min-width:1024px){.tn-bvb .tn-bvb-head{padding:20px 0 36px}.tn-bvb .tn-bvb-layout{grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start;padding:40px 0 96px}.tn-bvb .tn-bvb-side{position:sticky;top:96px}.tn-bvb .tn-bvb-tocm{display:none}.tn-bvb .tn-bvb-side .tn-bvb-toc-box{display:block}}
/* ---------- 5. Hiện dần khi cuộn + giảm chuyển động ---------- */
.tn-bvb.tn-bvb--anim .tn-bvb-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--bvb-d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--bvb-d,0ms)}
.tn-bvb.tn-bvb--anim .tn-bvb-rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tn-bvb.tn-bvb--anim .tn-bvb-rv{opacity:1;transform:none;transition:none}.tn-bvb *{transition:none!important}}