/* 📕 Theo sách (book.js) – dùng lại token màu của site và các lớp .tt-* của tomtat.css */
.bk-top{margin:14px 0 4px;padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow)}
.bk-bars{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bk-bar{height:10px;border-radius:99px;background:var(--sunk);overflow:hidden;margin-bottom:4px}
.bk-bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.bk-bar2 i{background:var(--ok)}
.bk-next{margin-top:12px;padding:10px 14px;border-radius:12px;background:var(--accent-soft);color:var(--ink);font-size:14.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bk-sec{margin:26px 0 4px;font-family:var(--display);font-size:20px;color:var(--ink)}
.bk-steps{display:grid;gap:12px;margin-top:10px}
.bk-step{padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:var(--card)}
.bk-step.is-done{border-color:color-mix(in srgb,var(--ok) 50%,var(--border));background:color-mix(in srgb,var(--ok-soft) 55%,var(--card))}
.bk-step>header{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.bk-step h4{margin:0;font-size:16px;color:var(--ink)}
.bk-q{margin:8px 0;padding:8px 12px;border-left:3px solid var(--accent);background:var(--sunk);border-radius:0 10px 10px 0;font-size:13.5px}
.bk-q p{margin:3px 0}
.bk-qn{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent-dark);font-size:11.5px;font-weight:700}
.bk-why{margin:6px 0 8px;font-size:14px;color:var(--muted)}
.bk-c.seen{border-color:var(--ok);color:var(--ok)}
.bk-flt{margin:10px 0}
.bk-flt .chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.bk-list{margin-top:6px}
.bk-h{margin:18px 0 6px;padding-bottom:4px;border-bottom:2px solid var(--accent-soft);font-size:15px;color:var(--accent-dark)}
.bk-h .bk-pg{margin-left:8px}
.bk-row{display:grid;grid-template-columns:22px 30px 1fr auto auto;gap:10px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--border)}
.bk-row.is-done{background:color-mix(in srgb,var(--ok-soft) 45%,transparent)}
.bk-ck{width:18px;height:18px;accent-color:var(--ok)}
.bk-n{font-weight:800;color:var(--accent-dark);text-align:right}
.bk-t{min-width:0;font-size:14.5px}
.bk-pg{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.bk-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bk-f{display:inline-block;margin:3px 4px 0 0;padding:1px 8px;border-radius:99px;background:var(--sunk);border:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.bk-f-voi,.bk-f-vow,.bk-f-dip,.bk-f-con,.bk-f-str,.bk-f-int{background:var(--accent-soft);color:var(--accent-dark);border-color:transparent}
@media (max-width:640px){
  .bk-bars{grid-template-columns:1fr}
  .bk-row{grid-template-columns:22px 26px 1fr;grid-template-areas:"ck n t" ". . pg" ". . a"}
  .bk-row .bk-ck{grid-area:ck}.bk-row .bk-n{grid-area:n}.bk-row .bk-t{grid-area:t}.bk-row>.bk-pg{grid-area:pg}.bk-row .bk-a{grid-area:a;justify-content:flex-start}
}
@media print{.bk-a,.bk-flt,.bk-ck{display:none!important}}