/* BOC F demo — trang checklist dự án */
.ck-wrap { width: var(--wrap); max-width: 1080px; margin-inline: auto; }
.ck-hero { background: #0F1E3D; color: #DCE7E0; padding: 48px 0 36px; }
.ck-back { display: inline-flex; align-items: center; gap: 4px; color: #9FD3F0; font-size: 14px; font-weight: 500; }
.ck-hero h1 { color: #fff; font-size: 36px; margin: 14px 0 10px; }
.ck-hero p { max-width: 70ch; margin: 0; font-size: 15px; }
.ck-prog { display: flex; align-items: center; gap: 14px; margin: 24px 0 18px; }
.ck-prog .bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ck-prog i { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 5px; transition: width .3s; }
.ck-prog span { font-weight: 500; color: #fff; font-size: 14px; white-space: nowrap; }
.ck-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.ck-legend .t { margin-left: 8px; }
.t { display: inline-block; padding: 2px 7px; border-radius: 5px; font: 600 11px/1.5 var(--f-body); letter-spacing: .02em; white-space: nowrap; }
.t.hd { background: var(--brand-50); color: var(--brand-d); }
.t.bf { background: #E7F0FB; color: #1F5C9E; }
.t.fee { background: var(--orange-50); color: var(--orange-d); }
.t.law { background: #F1EAFB; color: #6B3FA0; }
.t.ask { background: #FDECEC; color: var(--danger); }
.ck-body { padding: 36px 0 10px; display: grid; gap: 22px; }
.ck-g { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ck-gh { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; background: #FAFBFB; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ck-gh h2 { font-size: 18px; }
.ck-gh span { font-size: 13px; color: var(--muted); }
.ck-n { margin-left: auto; font-size: 13px; color: var(--brand); }
.ck-g ul { list-style: none; margin: 0; padding: 4px 0; }
.ck-g li label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 20px; cursor: pointer; font-size: 14.5px; flex-wrap: wrap; }
.ck-g li label:hover { background: #FAFBFB; }
.ck-g input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.ck-g .txt { flex: 1 1 300px; }
.ck-g input:checked ~ .txt { color: var(--muted); text-decoration: line-through; }
.ck-risk { margin-top: 30px; margin-bottom: 80px; padding: 26px 28px; border-radius: var(--r-lg); background: var(--orange-50); }
.ck-risk h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; color: #7A3209; }
.ck-risk h2 .ic { color: var(--orange-d); width: 24px; height: 24px; }
.ck-risk ol { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; color: #4A2A12; }
@media (max-width: 860px) {
  .ck-hero { padding: 32px 0 26px; }
  .ck-hero h1 { font-size: 26px; }
  .ck-g li label { padding: 10px 14px; }
  .ck-risk { padding: 20px 18px; }
}
@media print {
  .demo-nav, .ck-back { display: none; }
  .ck-hero { background: none; color: var(--ink); }
  .ck-hero h1, .ck-prog span { color: var(--ink); }
  .ck-g { break-inside: avoid; }
}