/* Bài blog (scripts/build-blog-articles.mjs) — dùng chung theme.css + style.css của trang SEO, chỉ thêm phần riêng của bài dài. */
.bl-crumb{ font-size:.82rem; color:var(--ink-soft); margin:4px 0 10px; }
.bl-crumb a{ color:var(--ink-soft); }
.bl-article{ font-family:'Source Serif 4', Georgia, serif; font-size:1.06rem; line-height:1.7; color:var(--ink); }
.bl-article h1{ margin-bottom:6px; }
.bl-article h2{ font-family:'IBM Plex Sans', sans-serif; font-size:1.25rem; margin:30px 0 10px; line-height:1.35; }
.bl-article h3{ font-family:'IBM Plex Sans', sans-serif; font-size:1.05rem; margin:20px 0 8px; }
.bl-article p{ margin:0 0 14px; }
.bl-article ul, .bl-article ol{ margin:0 0 14px; padding-left:22px; }
.bl-article li{ margin:4px 0; }
.bl-article a{ color:var(--seal); }
.bl-article a.sa-cta{ color:#fff; text-decoration:none; }
.bl-meta{ font-family:'IBM Plex Sans', sans-serif; font-size:.82rem; color:var(--ink-soft); margin:0 0 18px !important; }
.bl-note, .bl-tip{ padding:12px 14px; border-radius:10px; font-size:.98rem; }
.bl-note{ background:var(--azure-soft); }
.bl-tip{ background:var(--seal-soft); }
.bl-ex{ margin:0 0 14px; }
.bl-ex-go{ display:inline-block; margin-top:8px; font-family:'IBM Plex Sans', sans-serif; font-size:.82rem; font-weight:600; color:var(--seal); text-decoration:none; }
.bl-table{ overflow-x:auto; margin:0 0 16px; }
.bl-table table{ border-collapse:collapse; width:100%; font-family:'IBM Plex Sans', sans-serif; font-size:.92rem; }
.bl-table th, .bl-table td{ border:1px solid #E4DDCB; padding:8px 10px; text-align:left; vertical-align:top; }
.bl-table th{ background:var(--azure-soft); }
.bl-cta{ margin:22px 0; padding:16px 18px; border:1.5px solid #E8D9B5; border-radius:12px; background:var(--card-bg, #fff); }
.bl-cta p{ margin:0 0 10px; }
.bl-faq details{ border-bottom:1px solid #E4DDCB; padding:10px 0; }
.bl-faq summary{ cursor:pointer; font-family:'IBM Plex Sans', sans-serif; font-weight:600; }
.bl-faq details p{ margin:8px 0 0; }
.bl-foot{ font-family:'IBM Plex Sans', sans-serif; font-size:.8rem; color:var(--ink-soft); margin-top:28px !important; }
.bl-related, .bl-hub{ margin-top:28px; font-family:'IBM Plex Sans', sans-serif; }
.bl-related ul, .bl-hub ul{ padding-left:20px; }
.bl-related li, .bl-hub li{ margin:6px 0; }

/* Ảnh bìa + hình minh hoạ động (blog-render.js figHtml, 2026-10-13). Tĩnh = đủ nội dung; .is-in (article.js, khi cuộn tới) mới chạy animation. */
.bl-cover{ display:block; width:100%; height:auto; border-radius:12px; margin:6px 0 18px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.bf{ position:relative; margin:22px 0; padding:18px 20px; background:var(--card-bg, #fff); border:1.5px solid #E4DDCB; border-radius:14px; font-family:'IBM Plex Sans', 'Be Vietnam Pro', sans-serif; font-size:.98rem; line-height:1.5; }
.bf-title{ font-weight:700; margin:0 0 12px; font-size:1rem; color:var(--ink); }
.bf ul, .bf ol{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.bf-ck{ display:flex; gap:12px; align-items:flex-start; }
.bf-box{ flex:none; width:22px; height:22px; border-radius:6px; border:2.5px solid var(--jade, #2F6F5E); display:grid; place-items:center; margin-top:1px; box-sizing:border-box; }
.bf-ck.is-done .bf-box::after{ content:'✓'; color:var(--jade, #2F6F5E); font-weight:800; font-size:.85rem; line-height:1; }
.bf-ck.is-done > span:last-child{ color:var(--ink-soft); text-decoration:line-through; }
.bf-ck.is-todo .bf-box{ border-color:var(--seal, #C8322B); }
.bf-ck.is-todo > span:last-child{ font-weight:700; }
.bf-stamp{ display:inline-block; margin-top:14px; transform:rotate(-5deg); border:3px solid var(--seal, #C8322B); color:var(--seal, #C8322B); font-weight:800; padding:3px 12px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; }
.bf-steps li{ display:flex; gap:12px; align-items:flex-start; position:relative; }
.bf-steps li b{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--seal, #C8322B); color:#fff; display:grid; place-items:center; font-size:.85rem; }
.bf-steps li:not(:last-child)::after{ content:''; position:absolute; left:13px; top:30px; bottom:-10px; width:2px; background:#E4DDCB; }
.bf-cols{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; }
.bf-col{ border-radius:10px; padding:12px 14px; } .bf-col b{ display:block; margin-bottom:8px; }
.bf-col li{ padding-left:16px; position:relative; } .bf-col li::before{ content:'•'; position:absolute; left:2px; }
.bf-col.is-before{ background:#F4F1EA; color:var(--ink-soft); } .bf-col.is-after{ background:rgba(47,111,94,.1); }
.bf-arrow{ align-self:center; font-size:1.6rem; color:var(--seal, #C8322B); font-weight:700; }
@media (max-width:600px){ .bf-cols{ grid-template-columns:1fr; } .bf-arrow{ justify-self:center; font-size:0; } .bf-arrow::after{ content:"↓"; font-size:1.6rem; } } /* animation ghi đè transform → đổi ký tự thay vì xoay */
.bf.is-wait .bf-anim{ opacity:0; }
.bf.is-in .bf-anim{ animation:bf-pop .5s cubic-bezier(.2,.9,.3,1.3) var(--d, 0s) both; }
.bf-checklist.is-in .bf-stamp{ animation-name:bf-stamp; }
@keyframes bf-pop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes bf-stamp{ from{ opacity:0; transform:rotate(-5deg) scale(1.8); } to{ opacity:1; transform:rotate(-5deg); } }
@media (prefers-reduced-motion: reduce){ .bf.is-in .bf-anim{ animation:none; } .bf.is-wait .bf-anim{ opacity:1; } }