/* HCL ONE — module KỸ THUẬT 0.9.3 (k1): trung tâm "Kỹ thuật", duyệt lắp đặt – trưng bày, sự cố, CO2, khối kỹ thuật của quán, đơn kèm CO2.
   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 ≥ 44 px. */

.kt-cach { margin-top: 14px; }
.kt-h4 { margin: 16px 2px 8px; font: 700 12px/1.3 var(--tieu-de); letter-spacing: .06em; text-transform: uppercase; color: var(--mo); }
.kt-chip-hang { gap: 6px; margin: 2px 0 8px; }
.kt-dong-phu { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13.5px; color: var(--mo); }
.kt-dong-phu svg { flex: none; color: var(--chinh); }
.kt-dong-phu.cam { color: var(--cam-dam); }
@media (prefers-color-scheme: dark) { .kt-dong-phu.cam { color: var(--cam); } }

/* ---- trung tâm: ô chức năng (2 cột điện thoại, nhiều cột màn rộng) */
.kt-ocn-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (min-width: 720px) { .kt-ocn-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kt-ocn-luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kt-ocn { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 118px; padding: 14px 12px 12px; border-radius: var(--r-lon);
  background: var(--the); border: 1px solid var(--vien-2); box-shadow: var(--bong-1); color: var(--chu); text-decoration: none; }
.kt-ocn:active { background: var(--nen); }
.kt-ocn-dau { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--chinh-nhat); color: var(--chinh); flex: none; }
.kt-ocn-chu { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kt-ocn-chu b { font: 800 15.5px/1.25 var(--tieu-de); overflow-wrap: anywhere; }
.kt-ocn-chu span { font-size: 12.5px; line-height: 1.35; color: var(--mo); overflow-wrap: anywhere; }
.kt-ocn-so { position: absolute; top: 12px; right: 12px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center;
  font: 800 13px/1 var(--tieu-de); background: var(--chinh); color: #fff; font-variant-numeric: tabular-nums; }
.kt-ocn-so.do { background: var(--do); } .kt-ocn-so.cam { background: var(--cam); color: var(--cham-dam); } .kt-ocn-so.vang { background: var(--vang); color: var(--cham-dam); }
.kt-dang-o { margin-bottom: 14px; }
.kt-dang-o .hc-the-dau { align-items: center; }
.kt-dang-o .hc-the-dau > svg:last-child { color: var(--mo); flex: none; }

/* ---- việc kỹ thuật của quán (tấm + màn quán) */
.kt-hd .hc-dong-giua .p { white-space: normal; }
.kt-hd .hc-dong-cuoi { color: var(--mo); }
.kt-sheet-dau { margin-bottom: 10px; }
.kt-sheet-dau h3 { margin: 0; }
.kt-sheet-dau .hc-phu { margin: 3px 0 0; }
.kt-diem-dau { padding-bottom: 8px; }
.kt-diem-dau .hc-phu { margin: 0; }

/* ---- khối "Kỹ thuật" trên màn điểm bán */
.kt-khoi { margin-bottom: 6px; }
.kt-khoi-nut { margin-bottom: 12px; }

/* ---- báo sự cố: chip loại (2 cột cho dễ chạm), ảnh */
.kt-chon-sc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kt-chon-sc > button { min-height: 48px; padding: 6px 10px; line-height: 1.25; text-align: left; }
.kt-anh-sc { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.kt-anh-o { position: relative; display: block; }
.kt-anh-o img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--vien-2); background: var(--nen-2); display: block; }
.kt-anh-bo { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--cham-dam); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .88; }
.kt-xong { text-align: center; padding: 6px 4px 10px; }
.kt-xong > svg { color: var(--do); }
.kt-xong h3 { margin: 8px 0 6px; }
.kt-xong p { margin: 0 0 8px; }
.kt-xong + .hc-nut, .kt-xong ~ .hc-nut { margin-top: 8px; }

/* ---- duyệt lắp đặt – trưng bày */
.kt-hero h2 { overflow-wrap: anywhere; }
.kt-duyet { margin-bottom: 12px; }
.kt-duyet-chu { min-width: 0; flex: 1; }
.kt-tien { flex: none; text-align: right; }
.kt-tien b { display: block; font: 800 17px/1.2 var(--tieu-de); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kt-tien span { display: block; font-size: 11.5px; color: var(--mo); }
.kt-duyet-dong { margin: 8px 0 4px; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.kt-duyet-dong li { overflow-wrap: anywhere; }
.kt-duyet-gc { margin: 6px 0; font-size: 14px; font-style: italic; color: var(--chu); overflow-wrap: anywhere; }
.kt-duyet-anh { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin: 8px 0 4px; }
.kt-duyet-anh img { aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.kt-nut-duyet { margin: 10px 0 2px; }
.kt-khong-duyet { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; }
.kt-khong-duyet svg { flex: none; }
.kt-xem { margin-top: 6px; padding-left: 0; }
.kt-duyet .hc-bao { margin: 8px 0 4px; }

/* ---- sự cố: bước trạng thái Mới → Đã nhận → Đang sửa → Xong */
.kt-buoc-tt { display: flex; gap: 6px; list-style: none; margin: 4px 0 14px; padding: 0; counter-reset: b; }
.kt-buoc-tt li { flex: 1; position: relative; padding: 26px 2px 0; text-align: center; font: 700 12px/1.25 var(--noi-dung); color: var(--mo); counter-increment: b; }
.kt-buoc-tt li::before { content: counter(b); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--nen-2); color: var(--mo); font: 800 12px/1 var(--tieu-de); }
.kt-buoc-tt li::after { content: ""; position: absolute; top: 10px; left: calc(50% + 14px); right: calc(-50% + 14px); height: 2px; background: var(--vien); }
.kt-buoc-tt li:last-child::after { display: none; }
.kt-buoc-tt li.xong { color: var(--xanh); } .kt-buoc-tt li.xong::before { background: var(--xanh); color: #fff; content: "✓"; }
.kt-buoc-tt li.xong::after { background: var(--xanh); }
.kt-buoc-tt li.dang { color: var(--chu); } .kt-buoc-tt li.dang::before { background: var(--vang); color: var(--cham-dam); }
.kt-buoc-tt li.loi { color: var(--do); } .kt-buoc-tt li.loi::before { background: var(--do); content: "!"; }
.kt-sc .hc-the-dau h3, .kt-co2 .hc-the-dau h3 { font-size: 16.5px; }
.kt-su-co { margin-bottom: 10px; }   /* phiếu sự cố trong màn việc sửa của KTV (ky_thuat.js) */
.kt-su-co .kt-quan-ten { font-size: 18px; }
.kt-sc-gc { margin: 6px 0 8px; font-size: 14.5px; font-style: italic; overflow-wrap: anywhere; }
.kt-sc-dau .hc-phu a { color: var(--chinh); font-weight: 700; }

/* ---- đơn kèm CO2 (màn đặt hàng) */
.kt-don-co2 { margin-bottom: 12px; }
.kt-don-co2-t { display: inline-flex; align-items: center; gap: 6px; font: 800 15px var(--tieu-de); }
.kt-don-co2 .hc-phu { margin: 6px 0 10px; }
.kt-don-co2 .kt-dem { margin-bottom: 0; }

/* ---- thẻ trang chủ */
.kt-tc .hc-the-dau { align-items: center; }
.kt-tc-giua { flex: 1; min-width: 0; }
.kt-tc-giua h3 { margin: 0; font: 800 17px/1.3 var(--tieu-de); }
.kt-tc .hc-the-dau > svg:last-child { color: var(--mo); flex: none; }

/* ---- bản web: ô trung tâm rộng hơn, thẻ duyệt tự thành lưới (web.css) */
body.hc-web .kt-ocn { min-height: 128px; }