/* Công cụ Chấm phiếu — chỉ lớp .cp* (tệp này nạp ở mọi trang). Dùng token của app.css. */
.chinh:has(> .cp) { max-width: 1400px; }
.cp [hidden] { display: none !important; }
.cp-an-chu { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cp-mo-ta { margin: 4px 0 0; }
.cp-nguy { color: var(--do); }
.cp-nguy:hover { background: var(--do-nhat); color: var(--do); }
.cp-nhan-o { font-weight: 600; font-size: .9375rem; display: block; margin-bottom: 6px; }
.cp-ky__hang { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.cp-ky__chon { flex: 1 1 260px; margin: 0; }
.cp-ky__chon select { width: 100%; }
#cp-ky-tt { margin: 8px 0 0; }
.cp-nguon { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.cp-nguon label { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; }
.cp-nguon input { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; }
.cp-diem { border: 1px solid var(--vien); border-radius: var(--r-nho); padding: 10px 12px; margin: 0 0 12px; display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: end; }
.cp-diem legend { font-weight: 600; padding: 0 4px; }
.cp-diem label { display: flex; flex-direction: column; gap: 4px; font-size: .875rem; }
.cp-diem input { min-height: 40px; width: 10em; }
.cp-diem .field__hint { flex-basis: 100%; margin: 0; }

/* Tab */
.cp-tab { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 10px; border-bottom: 1px solid var(--vien); }
.cp-tab [role="tab"] { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; font: inherit; font-weight: 700; color: var(--phu);
  cursor: pointer; white-space: nowrap; min-height: 44px; }
.cp-tab [role="tab"][aria-selected="true"] { color: var(--c-dam); border-bottom-color: var(--c); }

/* Camera */
.cp-may__khung { position: relative; max-width: 560px; margin: 0 auto 10px; border-radius: var(--r); overflow: hidden; background: #111; }
.cp-may__khung video { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.cp-may__vien { position: absolute; inset: 4% 8%; border: 3px dashed rgba(240,190,88,.9); border-radius: 8px; pointer-events: none; }
.cp-may__nut { margin-bottom: 8px; }
.cp-tt { font-weight: 600; min-height: 1.5em; margin: 6px 0 0; }
.cp-tt--loi { color: var(--do); }

/* Xem lại phiếu */
.cp-xem { display: grid; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--vien); align-items: start; }
@media (min-width: 1000px) { .cp-xem { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); } }
.cp-xem__anh { position: relative; }
.cp-xem__cv { display: block; width: 100%; height: auto; border: 1px solid var(--vien); border-radius: var(--r-nho); cursor: crosshair; background: #fff; }
@media (min-width: 1000px) { .cp-xem__anh { position: sticky; top: 70px; } .cp-xem__cv { max-height: calc(100vh - 150px); width: auto; max-width: 100%; margin: 0 auto; } }
.cp-chu-mau { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 8px 0 4px; }
.cp-cham { display: inline-block; width: 14px; height: 14px; border: 3px solid; border-radius: 50%; vertical-align: middle; }
.cp-xem__dau h2 { margin: 0; }
.cp-xem__diem { font-size: 1.5rem; font-weight: 800; color: var(--c-dam); margin: 2px 0; }
.cp-cb { margin: 10px 0; padding-left: 28px; }
.cp-cb li { margin: 2px 0; }
.cp-sua { border: 1px solid var(--vien); border-radius: var(--r-nho); padding: 8px 10px 10px; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-sua legend { font-weight: 700; padding: 0 4px; }
div.cp-sua { border: 0; padding: 0; }
.cp-sua__o { display: flex; flex-direction: column; gap: 2px; font-size: .75rem; font-weight: 700; color: var(--phu); align-items: center; }
.cp-sua__o select, .cp-sua__o input { min-height: 38px; font-size: .9375rem; text-align: center; border-width: 2px; }
.cp-sua--p1 select, .cp-sua--p2 select { width: 3.6em; }
.cp-sua--p3 input { width: 5em; }
div.cp-sua .cp-sua__o input { width: 8em; }
.cp-dung select, .cp-dung input { border-color: #86c79b; background: var(--xanh-la-nhat); }
.cp-sai select, .cp-sai input { border-color: #eba59f; background: var(--do-nhat); }
.cp-xem__nut { margin-top: 14px; }

/* Bảng điểm */
.cp-tk { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.cp-tk li { background: var(--c-nhat); border-radius: var(--r-nho); padding: 6px 12px; display: flex; flex-direction: column; min-width: 110px; }
.cp-tk b { font-size: 1.25rem; color: var(--c-dam); }
.cp-cuon { overflow-x: auto; }
.cp-bang { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.cp-bang th, .cp-bang td { border: 1px solid var(--vien); padding: 6px 8px; text-align: left; vertical-align: top; }
.cp-bang thead th, .cp-bang--da th { background: var(--c-nhat); color: var(--c-dam); }
.cp-bang tbody tr { cursor: pointer; }
.cp-bang tbody tr:hover, .cp-bang tbody tr:focus { background: var(--nhan-nhat); outline: none; }
.cp-tong { font-weight: 800; color: var(--c-dam); }
.cp-canh { color: var(--nhan-dam); font-weight: 600; }
.cp-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .cp-bang:not(.cp-bang--da) thead { display: none; }
  .cp-bang:not(.cp-bang--da) tr { display: block; border: 1px solid var(--vien); border-radius: var(--r-nho); margin-bottom: 8px; padding: 6px 10px; }
  .cp-bang:not(.cp-bang--da) td { display: flex; gap: 8px; border: 0; padding: 2px 0; }
  .cp-bang:not(.cp-bang--da) td::before { content: attr(data-label); min-width: 6.5em; color: var(--phu); font-weight: 600; font-size: .8125rem; }
  .cp-bang:not(.cp-bang--da) td:empty { display: none; }
}