/* HQ-71 đợt 3 — Kanban dự án kiểu Odoo (bản mẫu ui-concepts C-list): cột không khung, tiêu đề đậm + (n), thanh việc hẹn
   đỏ quá hạn / cam hôm nay / xanh đã hẹn / xám chưa hẹn + tổng tiền; thẻ trắng góc 6 px; cột Đóng / Dừng gập dọc. Không gradient / glow / blur. */
.pk-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x proximity;
  overscroll-behavior-x: contain; }
.pk-col { flex: 0 0 296px; width: 296px; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; border-radius: 6px;
  transition: background .12s, opacity .12s; min-height: 120px; }
.pk-col.over { background: var(--brand-soft); outline: 2px dashed var(--brand); outline-offset: 2px; }
.pk-col.no-drop { opacity: .45; }
.pk-head { padding: 4px 4px 0; }
.pk-t { display: flex; align-items: center; gap: 8px; }
.pk-t h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 22px; }
.pk-n { color: var(--muted); font-weight: 500; font-size: 14px; }
.pk-fold { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 4px; display: inline-grid; place-items: center; }
.pk-fold:hover { background: var(--surface-2); color: var(--ink); }
.pk-pg { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pk-acts { flex: 1; height: 6px; display: flex; border-radius: 3px; overflow: hidden; background: var(--line-2); min-width: 40px; }
.pk-seg { display: block; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; min-width: 4px; }
.pk-seg.late { background: var(--err); }
.pk-seg.today { background: var(--accent); }
.pk-seg.plan { background: var(--ok); }
.pk-seg.none { background: var(--line); }
.pk-acts:has(.pk-seg.on) .pk-seg:not(.on) { opacity: .3; }
.pk-seg:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pk-sum { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-cards { display: flex; flex-direction: column; gap: 8px; }
.pk-empty { font-size: 13px; color: var(--muted); padding: 10px 4px; }

/* Thẻ: cả thẻ bấm được (link kéo giãn), riêng nút việc hẹn nằm trên */
.pk-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
  box-shadow: 0 1px 1px rgb(3 0 14 / .04); transition: border-color .12s; }
.pk-card:hover { border-color: var(--brand); }
.pk-card[draggable="true"] { cursor: grab; }
.pk-card[draggable="true"]:active { cursor: grabbing; }
.pk-card.dragging { opacity: .5; }
.pk-link { display: block; color: inherit; text-decoration: none; min-width: 0; }
.pk-link::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.pk-link:focus-visible { outline: none; }
.pk-link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 2px; }
.pk-client { display: block; font-weight: 700; font-size: 14px; line-height: 20px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-name { display: block; font-size: 13px; color: var(--muted); line-height: 18px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-mid { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.pk-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.pk-code { color: var(--muted); margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.pk-prog { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.pk-prog b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.pk-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.pk-bar i { display: block; height: 100%; background: var(--brand); }
.pk-bot { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pk-tag { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: 4px; padding: 1px 6px; line-height: 18px; white-space: nowrap; }
.pk-tag.new { color: var(--ink); }
.pk-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pk-r .act-c, .pk-r .pk-av { position: relative; z-index: 1; }
button.act-c { cursor: pointer; padding: 0; font: inherit; }
button.act-c.none:hover { border-color: var(--brand); color: var(--brand); }
.pk-av { width: 24px; height: 24px; font-size: 10px; }

/* Cột gập (Đóng / Dừng) */
.pk-col.folded { flex: 0 0 44px; width: 44px; min-height: 240px; align-self: stretch; background: var(--surface-2); }
.pk-unfold { width: 100%; height: 100%; min-height: 240px; border: 0; background: none; cursor: pointer; padding: 12px 0; display: flex; justify-content: center;
  border-radius: 6px; color: var(--muted); }
.pk-unfold:hover { background: var(--brand-soft); color: var(--ink); }
.pk-vt { writing-mode: vertical-rl; font-weight: 700; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.pk-vt .pk-n { font-size: 13px; }

.pk-note { font-size: 12px; margin: 8px 0 0; }
.pk-count { display: none; }   /* chỉ để control panel hiện "1-12 / 12" bên phải */
.page-head.cp .pk-count, .cp-pager .pk-count { display: flex; }

/* Màn hẹp: kéo ngang trong bảng (không cuộn ngang cả trang), mỗi cột gần bằng màn */
@media (max-width: 600px) {
  .pk-col:not(.folded) { flex-basis: calc(100vw - 72px); width: calc(100vw - 72px); }
}