/* HCL ONE — module KỸ THUẬT. Chỉ dùng biến của hệ thiết kế (web/giao_dien.css) — không mã màu cứng (trừ trắng #fff). Tiền tố .kt-.
   Điện thoại 390 px trước; nút ≥ 48 px; đồng hồ vệ sinh số to; màn văn phòng dùng main.hc-may + .hc-bang. */

/* ---- chung */
.kt-le { margin: -2px 2px 12px; }
.kt-nho { font-size: 12.5px; color: var(--mo); margin: 4px 0 0; }
.kt-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kt-ma { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .02em; }
.kt-ma-to { font-size: 20px; color: var(--chinh); }
.kt-bb { font: 700 10.5px/1 var(--noi-dung); letter-spacing: .02em; text-transform: none; color: var(--do); background: var(--do-nhat); padding: 3px 7px; border-radius: 99px; }
.kt-muc-phu { margin-left: auto; font: 600 12px var(--noi-dung); text-transform: none; letter-spacing: 0; color: var(--mo); }
.kt-rong-nho { padding: 16px 12px 8px; }
.kt-rong-nho img { width: 110px; }
.kt-nhan-nho { font: 700 11.5px/1.45 var(--tieu-de); padding-top: 2px; letter-spacing: .06em; text-transform: uppercase; color: var(--mo); }
.hc-muc .kt-bb { margin-left: 2px; }
.hc-muc .dem + .kt-bb, .hc-muc .kt-bb + .dem { margin-left: 6px; }

/* ---- thẻ việc (trang chủ KTV) */
.kt-the .hc-the-dau { align-items: center; }
.kt-the-trai { display: flex; gap: 12px; align-items: center; min-width: 0; }
.kt-the-trai > div { min-width: 0; }
.kt-the-trai h3 { margin: 0; font: 800 16.5px/1.25 var(--tieu-de); overflow-wrap: anywhere; }
.kt-the-trai .hc-phu { margin-top: 2px; }
.kt-the-duoi { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0 52px; font-size: 13px; color: var(--mo); }
.kt-the-duoi span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.kt-the-duoi svg { flex: none; color: var(--chinh); }
.kt-the .hc-chip { flex: none; }

/* ---- đầu màn một việc */
.kt-dau-viec { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.kt-dau-viec > div { flex: 1; min-width: 0; }
.kt-hen { font: 800 19px/1.25 var(--tieu-de); margin-top: 3px; overflow-wrap: anywhere; }
.kt-quan { padding-bottom: 6px; }
.kt-quan-ten { margin: 4px 0 0; font: 800 20px/1.25 var(--tieu-de); overflow-wrap: anywhere; }
.kt-quan .hc-nhom-nut { margin: 10px 0 4px; }
.kt-kc { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: 14.5px; font-weight: 600; color: var(--mo); }
.kt-kc svg { flex: none; }
.kt-kc.gan { color: var(--xanh); } .kt-kc.xa { color: var(--cam-dam); }
@media (prefers-color-scheme: dark) { .kt-kc.xa { color: var(--cam); } }
.kt-lien-he { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 14.5px; }
.kt-lien-he svg { flex: none; color: var(--chinh); }
.kt-kv { margin: 4px 0 12px; }
.kt-khong-duoc { color: var(--do); margin-top: 8px; }

/* ---- đồng hồ vệ sinh (khoá hoàn thành) */
.kt-dong-ho { text-align: center; background: var(--the); border: 1px solid var(--vien-2); border-radius: var(--r-lon); box-shadow: var(--bong-1); padding: 18px 16px 14px; margin-bottom: 14px; }
.kt-dong-ho > p { margin: 10px 0 0; font-size: 14.5px; font-weight: 600; color: var(--chu); }
.kt-dong-ho > p.kt-nho { font-weight: 400; color: var(--mo); margin-top: 2px; }
.kt-vong { --p: 0; width: 212px; height: 212px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--vang) calc(var(--p) * 1%), var(--nen-2) 0); transition: background .4s; }
.kt-vong::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--the); }
.kt-vong > div { position: relative; line-height: 1; }
.kt-vong b { display: block; font: 800 58px/1 var(--tieu-de); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--chu); }
.kt-vong span { display: block; margin-top: 8px; font: 700 13px var(--noi-dung); color: var(--mo); text-transform: uppercase; letter-spacing: .08em; }
.kt-dong-ho.xong .kt-vong { background: conic-gradient(var(--xanh) 100%, var(--nen-2) 0); }
.kt-dong-ho.xong .kt-vong b, .kt-dong-ho.xong .kt-vong span, .kt-dong-ho.xong > p:not(.kt-nho) { color: var(--xanh); }

/* ---- các bước (tích) */
.kt-buoc .hc-dong { min-height: 56px; }
.kt-buoc .hc-dong.xong .t { color: var(--mo); text-decoration: line-through; text-decoration-color: var(--vien); }
.kt-buoc .hc-dong-dau { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; }

/* ---- ảnh */
.kt-anh-luoi { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.kt-anh-luoi img { cursor: zoom-in; }
.kt-anh { position: relative; display: block; }
.kt-anh img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--vien-2); background: var(--nen-2); display: block; cursor: zoom-in; }
.kt-anh-xoa { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--cham-dam); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .85; }
.kt-anh-nho { width: 40px; }
.kt-anh-nho img { border-radius: 8px; }
.kt-anh-ky { margin-bottom: 12px; }
.kt-anh-ky img { display: block; width: 100%; height: 150px; object-fit: contain; background: #fff; border: 1px solid var(--vien-2); border-radius: var(--r-vua); padding: 6px; box-sizing: border-box; }
.kt-anh-ky span { display: block; margin-top: 6px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--mo); }
.kt-xem-anh img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r-vua); background: var(--nen-2); margin-bottom: 12px; }

/* ---- bộ đếm keg (nhãn + nút lớn) */
.kt-dem { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--the); border: 1px solid var(--vien-2); border-radius: var(--r-vua); padding: 10px 10px 10px 14px; margin-bottom: 8px; }
.kt-dem > div:first-child { min-width: 0; }
.kt-dem > div:first-child b { display: block; font: 700 15.5px var(--noi-dung); }
.kt-dem > div:first-child span { display: block; font-size: 12.5px; color: var(--mo); }
.kt-dem .hc-dem { flex: none; gap: 8px; }
.kt-dem .hc-dem .so { min-width: 44px; font-size: 32px; }
.kt-dem .hc-dem button { width: 52px; height: 52px; border-radius: 14px; font-size: 24px; }
.kt-dem .hc-dem button.cong { width: 64px; }
.kt-co-keg { margin-bottom: 8px; }

/* ---- tài sản quét được */
.kt-buoc-lon { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; }
.kt-buoc-lon > span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cham); color: #fff; display: grid; place-items: center; font: 800 16px var(--tieu-de); }
.kt-buoc-lon b { font: 800 16px var(--tieu-de); }
.kt-buoc-lon .hc-phu { margin: 0; }
.kt-chon-kho > button, .kt-ket-qua > button { flex: 1 1 auto; }
.kt-ket-qua > button[data-v="tot"].chon { background: var(--xanh); border-color: var(--xanh); }
.kt-ket-qua > button[data-v="ve_xuong"].chon { background: var(--cam-dam); border-color: var(--cam-dam); }

/* ---- tấm quét QR */
.kt-quet h3 { margin-bottom: 12px; }
.kt-camera { position: relative; border-radius: var(--r-lon); overflow: hidden; background: var(--cham-dam); aspect-ratio: 4 / 3; margin-bottom: 12px; }
.kt-camera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kt-khung { position: absolute; inset: 16% 22%; border: 3px solid var(--vang); border-radius: 18px; box-shadow: 0 0 0 999px color-mix(in srgb, var(--cham-dam) 38%, transparent); }
.kt-camera-chu { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; color: #fff; font-size: 13px; font-weight: 600; }
.kt-go-ma { display: flex; align-items: center; height: 54px; border: 1.5px solid var(--vien); border-radius: 12px; background: var(--the); overflow: hidden; }
.kt-go-ma span { flex: none; padding: 0 4px 0 14px; font: 700 18px ui-monospace, Menlo, Consolas, monospace; color: var(--mo); }
.kt-go-ma input { border: 0; min-height: 0; height: 100%; padding: 0 12px 0 0; font: 700 20px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; background: none; outline: 0; }
.kt-quet-ds:empty { display: none; }
.kt-quet-ds { margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.kt-quet-dong { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--xanh-nhat); font-size: 14px; }
.kt-quet-dong svg { color: var(--xanh); flex: none; }
.kt-quet-dong span { color: var(--mo); margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-quet-dau { display: flex; gap: 12px; align-items: center; margin: 4px 0 14px; }
.kt-quet-dau .hc-phu { margin: 2px 0 0; }
.kt-ts-the { margin-top: 14px; }
.kt-ts-the .hc-kv { margin-top: 10px; }

/* ---- kết quả (đã xong / chờ gửi / không làm được) */
.kt-ket { text-align: center; padding: 22px 16px 16px; border-radius: var(--r-lon); margin: 4px 0 14px; background: var(--the); border: 1px solid var(--vien-2); }
.kt-ket-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; background: var(--nen-2); color: var(--mo); }
.kt-ket h2 { margin: 0; font: 800 22px/1.2 var(--tieu-de); color: var(--chu); text-transform: none; letter-spacing: -.01em; }
.kt-ket p { margin: 4px 0 0; }
.kt-ket.xanh .kt-ket-icon { background: var(--xanh-nhat); color: var(--xanh); }
.kt-ket.vang .kt-ket-icon { background: var(--vang-nhat); color: var(--vang-chu); }

/* ---- văn phòng: đầu màn, bảng có ô chọn, lịch theo KTV */
.kt-dau-man { flex-wrap: wrap; margin: 4px 0 12px; }
.kt-dau-man .hc-phu { margin-top: 4px; }
.kt-dau-man .hc-hang-ngang { gap: 8px; }
.kt-o { min-height: 40px; height: 40px; padding: 4px 10px; font-size: 14px; border-radius: 10px; width: auto; max-width: 100%; }
.kt-bang td { vertical-align: middle; }
.kt-bang .kt-o { min-width: 150px; }
.kt-bang input[type=date].kt-o { min-width: 140px; }
.kt-trai { padding: 0; min-height: 0; justify-content: flex-start; text-align: left; }
.kt-ngay-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.kt-ngay-nav b { font: 800 17px var(--tieu-de); margin-left: 4px; }
.kt-ngay-nav .hc-nut-tron { text-decoration: none; }
.kt-ktv { padding: 14px 14px 6px; }
.kt-ktv .hc-the-dau { align-items: center; margin-bottom: 8px; }
.kt-ktv h3 { font-size: 16px; }
.kt-vong-nho { --co: 56px; }
.kt-vong-nho::before { inset: 6px; }
.kt-vong-nho b { font-size: 16px; } .kt-vong-nho span { font-size: 10px; margin-top: 1px; }
.kt-ktv-ds .hc-dong { padding: 10px 2px; min-height: 52px; border-bottom: 1px solid var(--vien-2); background: none; }
.kt-ktv-ds .hc-dong:last-child { border-bottom: 0; }
.kt-ktv-ds .hc-dong-dau { width: 32px; height: 32px; border-radius: 10px; }
.kt-ktv-ds .hc-dong-giua .t { font-size: 14.5px; }
.kt-sheet-rong { max-width: 640px; }
.kt-chon-quan { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--chinh-nhat); }
.kt-chon-quan > div { min-width: 0; } .kt-chon-quan b { display: block; overflow-wrap: anywhere; } .kt-chon-quan .hc-phu { display: block; margin: 0; }
.kt-chon-ts .hc-dong.chon { background: var(--xanh-nhat); }
.hc-sheet .hc-ds { margin: 6px 0 8px; box-shadow: none; }

/* ---- sổ tài sản */
.kt-loc { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.kt-loc .hc-tim { flex: 1 1 280px; margin: 0; }
.kt-loc-chip { height: 32px; padding: 0 12px; text-decoration: none; font-size: 12.5px; }
.kt-bang-ts tbody tr { cursor: pointer; }
.kt-o-chon { width: 38px; }
.kt-o-chon input, .kt-ts-dong input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--cham); }
.kt-ts-dong { cursor: pointer; }
.kt-ts-dong input { flex: none; }
.kt-chi-hep { display: none; }
@media (max-width: 720px) { .kt-chi-rong { display: none; } .kt-chi-hep { display: block; } }
.kt-ho-so-dau { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.kt-qr-to { flex: none; width: 150px; text-align: center; }
.kt-qr-to svg { width: 150px; height: 150px; display: block; background: #fff; border-radius: 12px; border: 1px solid var(--vien-2); }
.kt-qr-to .kt-ma { display: block; margin-top: 8px; font-size: 15px; }
.kt-ho-so-chu { flex: 1 1 260px; min-width: 0; }
.kt-ho-so-chu .hc-tieu-de { margin-top: 8px; }
.kt-ho-so-chu .hc-kv { margin-top: 8px; }
.kt-ho-so > * { min-width: 0; }

/* ---- in nhãn QR: màn hình xem trước + giấy A4 thật (3 × 7 nhãn 63,5 × 38,1 mm) */
.kt-in-vung { display: flex; flex-direction: column; align-items: center; gap: 18px; overflow-x: auto; padding-bottom: 12px; }
.kt-trang-in { width: 210mm; min-height: 297mm; background: #fff; box-shadow: var(--bong-2); padding: 15.1mm 7.2mm; display: grid;
  grid-template-columns: repeat(3, 63.5mm); grid-auto-rows: 38.1mm; column-gap: 2.5mm; align-content: start; }
.kt-nhan { display: flex; align-items: center; gap: 2.5mm; padding: 2.5mm 3mm; border: .2mm dashed var(--vien); border-radius: 2.5mm; overflow: hidden; color: var(--cham-dam); background: #fff; }
.kt-nhan-qr { flex: none; width: 29mm; height: 29mm; }
.kt-nhan-qr svg { width: 100%; height: 100%; display: block; }
.kt-nhan-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8mm; }
.kt-nhan-logo { width: 8mm; height: 8mm; }
.kt-nhan-ma span { display: block; font: 700 6.5pt/1.1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }
.kt-nhan-ma b { display: block; font: 800 14pt/1.05 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; white-space: nowrap; }
.kt-nhan-ten { font: 700 7.5pt/1.2 var(--noi-dung); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kt-nhan-chu em { font: 400 6.2pt/1.25 var(--noi-dung); font-style: normal; border-top: .3mm solid var(--vang); padding-top: .8mm; }
/* 0.7: trang in ĐẶT TÊN (ktNhan) — lề 0 chỉ áp cho tờ nhãn QR của module này, không đè trang in của module khác */
@page ktNhan { size: A4 portrait; margin: 0; }
.kt-in-vung { page: ktNhan; }
@media print {
  body, main.kt-man-in { background: #fff !important; }
  main.kt-man-in { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .kt-in-vung { display: block; overflow: visible; padding: 0; gap: 0; }
  .kt-trang-in { box-shadow: none; margin: 0; break-after: page; page-break-after: always; height: 297mm; }
  .kt-trang-in:last-child { break-after: auto; page-break-after: auto; }
  .kt-nhan { border-color: transparent; }
}

/* ---- bổ sung 27/09: khoảng cách, chữ ký có tên, bảng không vỡ nút */
.kt-cach-tren { margin-top: 12px; }
.kt-cach-tren-nho { margin-top: 8px; }
.kt-sheet-phu { margin: -4px 0 12px; }
.kt-nw, .kt-bang .hc-nut { white-space: nowrap; }
.kt-nut-viec { margin-top: 6px; }
.kt-dau-viec .hc-chip { flex: none; }
.kt-dau-viec .kt-nhan-nho { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-ts .hc-dong-giua { min-width: 0; }
.kt-ts-chip { display: block; margin-top: 5px; }
.kt-bo { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vien); background: var(--the); color: var(--mo); display: grid; place-items: center; cursor: pointer; }
.kt-bo:active { background: var(--nen-2); }
.kt-kho-npp { margin-top: 8px; }
.kt-kho-npp.chon { border-color: var(--cham); box-shadow: 0 0 0 1px var(--cham); font-weight: 700; }
h2.kt-tieu-de { margin: 0; color: var(--chu); text-transform: none; letter-spacing: -.01em; font: 800 22px/1.2 var(--tieu-de); }
.hc-sheet select.kt-o, .hc-sheet input.kt-o { width: 100%; height: auto; min-height: 50px; font-size: 16px; padding: 0 12px; }
.kt-bang td.kt-nw { white-space: nowrap; }
.kt-bang { min-width: 900px; }
.kt-bang-cb { min-width: 780px; }
.kt-cuoi-ngang { flex-direction: row; gap: 6px; align-items: center; }
.kt-ho-so-chu .hc-nhom-nut { flex-wrap: wrap; }
.kt-ho-so-chu .hc-nhom-nut > * { white-space: nowrap; flex: 1 1 auto; }
/* điều phối trên điện thoại: thẻ thay bảng */
.kt-the-dp { padding: 14px; }
.kt-the-dp .hc-the-dau { align-items: flex-start; }
.kt-the-dp .hc-the-dau > div { min-width: 0; }
.kt-the-dp .hc-chip { flex: none; }
.kt-the-dp h3 { margin: 3px 0 0; font: 800 16.5px/1.25 var(--tieu-de); overflow-wrap: anywhere; }
.kt-the-dp > .hc-phu { margin: 2px 0 0; }
.kt-dp-dong { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: 14px; line-height: 1.4; }
.kt-dp-dong > svg { flex: none; margin-top: 2px; color: var(--chinh); }
.kt-dp-dong > span { min-width: 0; overflow-wrap: anywhere; }
.kt-dp-giao { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.kt-dp-giao .kt-o { width: 100%; min-width: 0; height: 48px; font-size: 15px; }
.kt-dp-giao select.kt-o { grid-column: 1 / -1; }
.kt-dp-giao .hc-nut { min-width: 118px; min-height: 48px; }
.kt-dp-xem { margin-top: 6px; padding-left: 0; padding-right: 0; }