/* =============================================================================
   kq-control.css — HÌNH THỨC BỘ CONTROL DÙNG CHUNG (wwwroot/js/kq-control.js; người dùng 28/10/2026: «không dùng input mặc định trình duyệt»).
   Nạp ở MỌI bố cục (khung mới, nội dung kế thừa, trang cổng), SAU CSS của trang/khung. Chỉ dùng token màu sẵn có (kq-token.css; dự phòng
   biến của site.css cho bố cục kế thừa) — tông màu tự chọn của quản trị và chế độ Tối tự áp. Không style nội tuyến (CSP style-src 'self').
     1. thẻ gốc ẩn mắt (.kq-an-goc) · 2. ô ngày / giờ / tháng · 3. lịch flatpickr · 4. bảng tháng · 5. ô chọn (combobox + danh sách)
     6. ô tích / ô tròn (vẽ lại, KHÔNG cần JS) · 7. ô số · 8. vùng kéo-thả tệp (07-filebox) theo token
   ============================================================================= */

/* 1. Thẻ gốc: vẫn trong biểu mẫu (gửi đi, kiểm hợp lệ), không chiếm chỗ, không nhận chuột. !important: đè lớp hình thức chép từ trang. */
.kq-an-goc {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important;
  overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
.kq-an-chu { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.kq-ctl-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* 1b. Trang KHUNG MỚI còn dùng lớp ô nhập của bộ kế thừa (.o-nhap / .o-van-ban — Tài chính, Phiên bản, Lịch sử thay đổi, Sao lưu…) nhưng
   không nạp control-chung.css: ô rơi về hình của trình duyệt. Hình nền theo token, độ đặc hiệu 0 — CSS riêng của trang và control-chung.css
   vẫn thắng. Gắn thẳng vào thẻ + lớp (không bó theo tổ tiên body.kq-tp — luật BoControlChungTests.KhongConLuatBoTheoToTien). */
:where(input.o-nhap, select.o-nhap, textarea.o-nhap, textarea.o-van-ban) {
  box-sizing: border-box; min-height: var(--kq-cao-nut, 30px); border: 1px solid var(--kq-vien-dam, #848f9b); border-radius: var(--kq-bo-1, 2px);
  background: var(--kq-nen-o, #fff); color: var(--kq-chu, #16202e); padding: 0 8px; font: inherit; font-size: var(--kq-co-2, 13px); max-width: 100%;
}
:where(input.o-nhap) { height: var(--kq-cao-nut, 30px); }
:where(textarea.o-nhap, textarea.o-van-ban) { padding: 6px 8px; line-height: 1.4; resize: vertical; }
:where(input.o-nhap.so) { width: 6em; text-align: right; font-variant-numeric: tabular-nums; }
:where(input.o-nhap, select.o-nhap, textarea.o-nhap, textarea.o-van-ban):focus { border-color: var(--kq-nhan, #0f7a75); outline: 2px solid var(--kq-nhan-nhat, #d5efed); outline-offset: 0; }
:where(input.o-nhap)::placeholder { color: var(--kq-chu-mo, #5b6b80); opacity: 1; }
:where(input.o-nhap, textarea.o-nhap):is(:disabled, [readonly]) { background: var(--kq-nen-tat, #eef1f4); color: var(--kq-chu-2, #3d4a57); }

/* 2. Ô ngày / ngày giờ / giờ / tháng: ô chữ (lớp chép từ thẻ gốc) + nút lịch nằm trong lề phải của ô. */
.kq-ngay { position: relative; display: inline-flex; align-items: center; max-width: 100%; min-width: 0; vertical-align: middle; }
.kq-ngay[hidden] { display: none; }
.kq-ngay.kq-ngay-du { display: flex; width: 100%; }
/* Hình thức nền khi thẻ gốc không mang lớp ô nhập nào (độ đặc hiệu 0 — lớp .o-nhap / .kq-o-nhap của trang thắng). */
:where(.kq-ngay > .kq-ngay-o) {
  height: var(--kq-cao-nut, 30px); border: 1px solid var(--kq-vien-dam, var(--vien-o-nhap, #848f9b)); border-radius: var(--kq-bo-1, 2px);
  background: var(--kq-nen-o, var(--the-nen, #fff)); color: var(--kq-chu, var(--chu, #16202e)); padding: 0 8px; font: inherit; font-size: var(--kq-co-2, 13px);
}
.kq-ngay > input.kq-ngay-o { flex: 1 1 auto; min-width: 0; width: 10.5em; max-width: 100%; padding-right: 30px; font-variant-numeric: tabular-nums; }
.kq-ngay.kq-ngay-gio-ngay > input.kq-ngay-o { width: 13.5em; }
.kq-ngay.kq-ngay-gio > input.kq-ngay-o { width: 7em; }
.kq-ngay.kq-ngay-thang > input.kq-ngay-o { width: 8.5em; }
.kq-ngay.kq-ngay-du > input.kq-ngay-o { width: 100%; }
.kq-ngay > input.kq-ngay-o:focus { border-color: var(--kq-nhan, var(--xanh, #0f7a75)); outline: 2px solid var(--kq-nhan-nhat, var(--xanh-nhat, #d5efed)); outline-offset: 0; }
.kq-ngay.kq-sai > input.kq-ngay-o, .kq-ngay > input.kq-ngay-o[aria-invalid="true"] { border-color: var(--kq-xau, var(--do, #b91c1c)); }
.kq-ngay-nut {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; margin: 0;
  display: inline-grid; place-items: center; border: 0; border-radius: var(--kq-bo-1, 2px); background: transparent;
  color: var(--kq-chu-mo, var(--chu-mo, #5b6b80)); cursor: pointer;
}
.kq-ngay-nut:hover:not(:disabled) { color: var(--kq-chinh, var(--xanh, #1a5f8e)); background: var(--kq-dong-di, var(--xanh-nhat, #f0f5f9)); }
.kq-ngay-nut:disabled { cursor: not-allowed; opacity: .5; }
.kq-ngay > input.kq-ngay-o:disabled, .kq-ngay > input.kq-ngay-o[readonly] { cursor: default; }

/* 3. Lịch flatpickr theo token (cả trang không nạp bộ His_Site). Lặp lớp để thắng flatpickr.min.css và che-do-mau.css. */
html .flatpickr-calendar.flatpickr-calendar {
  background: var(--kq-nen-noi, var(--the-nen, #fff)); color: var(--kq-chu, var(--chu, #16202e)); border: 1px solid var(--kq-vien-dam, var(--vien, #848f9b));
  box-shadow: var(--kq-bong-noi, 0 6px 24px rgba(14, 47, 68, .18)); border-radius: var(--kq-bo-2, 4px); font-family: inherit; font-size: var(--kq-co-2, 13px);
  z-index: var(--z-lop-noi, 1100);
}
html .flatpickr-calendar.flatpickr-calendar::before, html .flatpickr-calendar.flatpickr-calendar::after { display: none; }
html .flatpickr-calendar .flatpickr-months, html .flatpickr-calendar .flatpickr-month, html .flatpickr-calendar .flatpickr-weekdays,
html .flatpickr-calendar span.flatpickr-weekday, html .flatpickr-calendar .flatpickr-weekdaycontainer { background: transparent; color: var(--kq-chu, var(--chu, #16202e)); fill: currentColor; }
html .flatpickr-calendar span.flatpickr-weekday { color: var(--kq-chu-mo, var(--chu-mo, #5b6b80)); font-weight: 600; }
html .flatpickr-calendar .flatpickr-months .flatpickr-prev-month, html .flatpickr-calendar .flatpickr-months .flatpickr-next-month { color: var(--kq-chu-2, var(--chu, #16202e)); fill: currentColor; }
html .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg, html .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--kq-chinh, var(--xanh, #1a5f8e)); }
html .flatpickr-calendar .flatpickr-current-month input.cur-year, html .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
html .flatpickr-calendar .flatpickr-current-month span.cur-month { color: var(--kq-chu, var(--chu, #16202e)); background: transparent; font-weight: 600; }
html .flatpickr-calendar .flatpickr-day { color: var(--kq-chu, var(--chu, #16202e)); border-radius: var(--kq-bo-2, 4px); }
html .flatpickr-calendar .flatpickr-day:hover, html .flatpickr-calendar .flatpickr-day:focus { background: var(--kq-dong-di, var(--xanh-nhat, #f0f5f9)); border-color: var(--kq-dong-di, var(--xanh-nhat, #f0f5f9)); }
html .flatpickr-calendar .flatpickr-day.today { border-color: var(--kq-chinh, var(--xanh, #1a5f8e)); }
html .flatpickr-calendar .flatpickr-day.selected, html .flatpickr-calendar .flatpickr-day.selected:hover {
  background: var(--kq-chinh, var(--xanh, #1a5f8e)); border-color: var(--kq-chinh, var(--xanh, #1a5f8e)); color: var(--kq-chinh-chu, #fff); font-weight: 600;
}
html .flatpickr-calendar .flatpickr-day.prevMonthDay, html .flatpickr-calendar .flatpickr-day.nextMonthDay { color: var(--kq-chu-mo, var(--chu-mo, #5b6b80)); }
html .flatpickr-calendar .flatpickr-day.flatpickr-disabled, html .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover { color: var(--kq-chu-tat, var(--chu-mo, #6b7682)); opacity: .45; background: transparent; border-color: transparent; }
html .flatpickr-calendar .flatpickr-time { border-top-color: var(--kq-vien, var(--vien, #d9dfe8)); }
html .flatpickr-calendar .flatpickr-time input, html .flatpickr-calendar .flatpickr-time .flatpickr-time-separator, html .flatpickr-calendar .flatpickr-time .flatpickr-am-pm { color: var(--kq-chu, var(--chu, #16202e)); background: transparent; }
html .flatpickr-calendar .flatpickr-time input:hover, html .flatpickr-calendar .flatpickr-time input:focus { background: var(--kq-dong-di, var(--xanh-nhat, #f0f5f9)); }
html .flatpickr-calendar .numInputWrapper span.arrowUp::after { border-bottom-color: var(--kq-chu-mo, #5b6b80); }
html .flatpickr-calendar .numInputWrapper span.arrowDown::after { border-top-color: var(--kq-chu-mo, #5b6b80); }

/* 4. Bảng chọn tháng (ô tháng). */
.kq-thang-bang {
  position: fixed; z-index: var(--z-lop-noi, 1100); width: 236px; padding: 8px; overflow: auto;
  background: var(--kq-nen-noi, var(--the-nen, #fff)); color: var(--kq-chu, var(--chu, #16202e)); border: 1px solid var(--kq-vien-dam, var(--vien, #848f9b));
  border-radius: var(--kq-bo-2, 4px); box-shadow: var(--kq-bong-noi, 0 6px 24px rgba(14, 47, 68, .18)); font-size: var(--kq-co-2, 13px);
}
.kq-thang-dau { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.kq-thang-nam { font-weight: 600; }
.kq-thang-chuyen, .kq-thang-o {
  font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: var(--kq-bo-2, 4px); cursor: pointer;
}
.kq-thang-chuyen { width: 28px; height: 28px; font-size: 18px; line-height: 1; }
.kq-thang-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.kq-thang-o { height: 32px; font-variant-numeric: tabular-nums; }
.kq-thang-chuyen:hover, .kq-thang-o:hover:not(:disabled) { background: var(--kq-dong-di, var(--xanh-nhat, #f0f5f9)); }
.kq-thang-o.hom-nay { border-color: var(--kq-chinh, var(--xanh, #1a5f8e)); }
.kq-thang-o[aria-pressed="true"] { background: var(--kq-chinh, var(--xanh, #1a5f8e)); color: var(--kq-chinh-chu, #fff); font-weight: 600; }
.kq-thang-o:disabled { color: var(--kq-chu-tat, var(--chu-mo, #6b7682)); opacity: .5; cursor: not-allowed; }
.kq-thang-chuyen:focus-visible, .kq-thang-o:focus-visible { outline: 2px solid var(--kq-nhan, var(--xanh, #0f7a75)); outline-offset: 1px; }

/* 5. Ô chọn: nút combobox mang lớp của <select> gốc (cỡ, viền, bề rộng y như cũ) + mũi tên SVG; danh sách nổi. */
:where(.kq-chon-nut) {
  min-height: var(--kq-cao-nut, 30px); border: 1px solid var(--kq-vien-dam, var(--vien-o-nhap, #848f9b)); border-radius: var(--kq-bo-1, 2px);
  background-color: var(--kq-nen-o, var(--the-nen, #fff)); color: var(--kq-chu, var(--chu, #16202e)); padding: 0 8px; font: inherit; font-size: var(--kq-co-2, 13px);
}
.kq-chon-nut.kq-chon-nut {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; text-align: left; cursor: pointer; vertical-align: middle;
  background-image: none; padding-right: 6px; line-height: 1.25;
}
.kq-chon-nut[hidden] { display: none; }
/* select.kq-o-chon (kq-thanh-phan.css) rộng đủ ô — luật gắn theo thẻ <select> nên nhắc lại cho nút. */
.kq-chon-nut.kq-o-chon { width: 100%; }
.kq-chon-nut:disabled { cursor: not-allowed; opacity: .6; }
.kq-chon-nut:focus-visible { outline: 2px solid var(--kq-nhan, var(--xanh, #0f7a75)); outline-offset: 0; border-color: var(--kq-nhan, var(--xanh, #0f7a75)); }
.kq-chon-nut[aria-invalid="true"] { border-color: var(--kq-xau, var(--do, #b91c1c)); }
.kq-chon-nut > .kq-ctl-ic { margin-left: auto; color: var(--kq-chu-mo, var(--chu-mo, #5b6b80)); transition: transform var(--kq-nhanh, .12s); }
.kq-chon-nut[aria-expanded="true"] > .kq-ctl-ic { transform: rotate(180deg); }
/* Mọi nhãn chồng một ô lưới (chỉ nhãn đang chọn hiện): nút rộng bằng nhãn dài nhất như <select> thật, hẹp thì «…». */
.kq-chon-chu { display: grid; flex: 1 1 auto; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.kq-chon-nhan { grid-area: 1 / 1; visibility: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kq-chon-nhan.hien { visibility: visible; }
.kq-chon-nut.kq-chon-trong .kq-chon-nhan.hien { color: var(--kq-chu-2, var(--chu-mo, #3d4a57)); }
.kq-chon-ds {
  position: fixed; z-index: var(--z-lop-noi, 1100); display: flex; flex-direction: column; overflow: hidden;
  background: var(--kq-nen-noi, var(--the-nen, #fff)); color: var(--kq-chu, var(--chu, #16202e)); border: 1px solid var(--kq-vien-dam, var(--vien, #848f9b));
  border-radius: var(--kq-bo-2, 4px); box-shadow: var(--kq-bong-noi, 0 6px 24px rgba(14, 47, 68, .18)); font-size: var(--kq-co-2, 13px);
}
.kq-chon-tim {
  flex: none; margin: 6px; height: 28px; padding: 0 8px; font: inherit; border: 1px solid var(--kq-vien-dam, #848f9b); border-radius: var(--kq-bo-1, 2px);
  background: var(--kq-nen-o, #fff); color: inherit;
}
.kq-chon-tim:focus { outline: 2px solid var(--kq-nhan-nhat, #d5efed); border-color: var(--kq-nhan, #0f7a75); }
.kq-chon-cuon { flex: 1 1 auto; overflow: auto; padding: 4px 0; outline: none; overscroll-behavior: contain; }
.kq-chon-muc { position: relative; padding: 6px 10px 6px 26px; cursor: pointer; line-height: 1.35; overflow-wrap: anywhere; }
/* Mục đang trỏ (chuột / phím): nền «dòng đã chọn» + vạch trái — rõ cả ở chế độ Tối (nền «rê chuột» gần trùng nền lớp nổi). */
.kq-chon-muc.dang { background: var(--kq-dong-chon, var(--xanh-nhat, #dde9f4)); box-shadow: inset 3px 0 0 var(--kq-chinh, var(--xanh, #1a5f8e)); }
.kq-chon-muc[aria-selected="true"] { font-weight: 600; color: var(--kq-chinh-dam, var(--kq-chinh, var(--xanh, #1a5f8e))); }
.kq-chon-muc[aria-selected="true"]::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 10px; height: 6px; margin-top: -5px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.kq-chon-muc[aria-disabled="true"] { color: var(--kq-chu-tat, var(--chu-mo, #6b7682)); cursor: not-allowed; }
.kq-chon-nhom-ten { padding: 6px 10px 2px; font-size: var(--kq-co-1, 12px); font-weight: 600; color: var(--kq-chu-mo, var(--chu-mo, #5b6b80)); }
.kq-chon-rong { padding: 8px 10px; color: var(--kq-chu-mo, var(--chu-mo, #5b6b80)); }
html.che-do-toi .kq-chon-muc[aria-selected="true"] { color: var(--kq-chinh, var(--xanh-chu, #8fb8ff)); }

/* 6. Ô tích / ô tròn: vẽ lại bằng CSS trên CHÍNH thẻ input (vẫn là phần tử gửi đi, bàn phím / trình đọc màn hình như cũ).
   Độ đặc hiệu thấp (:where + một lớp phủ định) — thành phần tự ẩn ô tích (.switch, nút bật/tắt…) giữ nguyên luật của nó. Lối thoát: .kq-goc. */
:where(input[type="checkbox"], input[type="radio"]):not(.kq-goc):not(.form-check-input) {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 16px; height: 16px; flex: none; vertical-align: -3px;
  display: inline-block; border: 1.5px solid var(--kq-vien-dam, var(--vien-o-nhap, #848f9b)); border-radius: 3px;
  background: var(--kq-nen-o, var(--the-nen, #fff)) center / 12px 12px no-repeat; cursor: pointer; padding: 0;
  transition: background-color var(--kq-nhanh, .12s), border-color var(--kq-nhanh, .12s);
}
:where(input[type="radio"]):not(.kq-goc):not(.form-check-input) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"]):not(.kq-goc):not(.form-check-input):hover:not(:disabled) { border-color: var(--kq-chinh, var(--xanh, #1a5f8e)); }
:where(input[type="checkbox"]):not(.kq-goc):not(.form-check-input):checked {
  background-color: var(--kq-chinh, var(--xanh, #1a5f8e)); border-color: var(--kq-chinh, var(--xanh, #1a5f8e));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:where(input[type="checkbox"]):not(.kq-goc):not(.form-check-input):indeterminate {
  background-color: var(--kq-chinh, var(--xanh, #1a5f8e)); border-color: var(--kq-chinh, var(--xanh, #1a5f8e));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
:where(input[type="radio"]):not(.kq-goc):not(.form-check-input):checked {
  border-color: var(--kq-chinh, var(--xanh, #1a5f8e)); background-color: var(--kq-nen-o, var(--the-nen, #fff));
  background-image: radial-gradient(circle, var(--kq-chinh, var(--xanh, #1a5f8e)) 0 3.5px, transparent 4px);
  background-size: 100% 100%;
}
/* Tối: nền chính sáng hơn — dấu tích tối để đủ tương phản (chữ trên nút chính cũng tối). */
html.che-do-toi :where(input[type="checkbox"]):not(.kq-goc):not(.form-check-input):checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%230b1520' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.che-do-toi :where(input[type="checkbox"]):not(.kq-goc):not(.form-check-input):indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' stroke='%230b1520' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
:where(input[type="checkbox"], input[type="radio"]):not(.kq-goc):not(.form-check-input):focus-visible { outline: 2px solid var(--kq-nhan, var(--xanh, #0f7a75)); outline-offset: 2px; }
:where(input[type="checkbox"], input[type="radio"]):not(.kq-goc):not(.form-check-input):disabled { opacity: .5; cursor: not-allowed; }

/* 7. Ô số: bỏ nút tăng/giảm của trình duyệt (phím ↑/↓ vẫn tăng giảm theo step). */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* 8. Vùng kéo-thả tệp (07-filebox.css viết theo bảng màu cũ): đổi sang token — đúng tông màu khách và chế độ Tối ở mọi bố cục. */
html .hop-tep.hop-tep {
  --ht-vien: var(--kq-vien-dam, var(--vien, #ced4da)); --ht-nhan: var(--kq-chinh, var(--xanh, #2563eb)); --ht-nhan-nen: var(--kq-dong-di, var(--xanh-nhat, #eff6ff));
  --ht-mo: var(--kq-chu-mo, var(--chu-mo, #64748b)); --ht-loi: var(--kq-xau, var(--do, #b91c1c)); --ht-loi-nen: var(--kq-xau-nen, var(--do-nen, #fef2f2));
  color: var(--kq-chu, var(--chu, #16202e));
}
html .hop-tep.hop-tep[hidden] { display: none; }
html .hop-tep.hop-tep .ht-vung { background: var(--kq-nen-o, var(--the-nen, #fcfdfe)); border-radius: var(--kq-bo-2, 4px); border-width: 1.5px; }
html .hop-tep.hop-tep .ht-vung:hover, html .hop-tep.hop-tep .ht-vung.ht-dang-keo { background: var(--ht-nhan-nen); border-color: var(--ht-nhan); }
html .hop-tep.hop-tep .ht-chu-chinh { color: var(--kq-chu, var(--chu, #334155)); }
html .hop-tep.hop-tep .ht-muc { background: var(--kq-nen-o, var(--the-nen, #fff)); border-color: var(--kq-vien, var(--vien-nhat, #e2e8f0)); color: var(--kq-chu, var(--chu, #16202e)); }
html .hop-tep.hop-tep .ht-bo { background: var(--kq-nen-o, var(--the-nen, #fff)); color: var(--kq-chu-2, var(--chu-mo, #475569)); }
html .hop-tep.hop-tep .ht-loi { border-color: var(--kq-xau-vien, var(--do-vien, #fecaca)); }
/* Biểu tượng tải lên cả ở trang không nạp bieu-tuong.css (khung mới) — cùng hình với [data-bt="tai-len"]. */
html .hop-tep.hop-tep .ht-vung::before {
  content: ""; flex: none; display: inline-block; width: var(--bt-co, 20px); height: var(--bt-co, 20px); background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10.6v-8M4.6 5.8 8 2.4l3.4 3.4M2.6 13.4h10.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10.6v-8M4.6 5.8 8 2.4l3.4 3.4M2.6 13.4h10.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
html .hop-tep.hop-tep.ht-du { max-width: none; }
html .hop-tep.hop-tep.ht-tat .ht-vung { opacity: .55; cursor: not-allowed; pointer-events: none; }
/* Gọn một dòng: ô tệp trong hàng thao tác / ô bảng (vd «Ký số» .p7s). */
html .hop-tep.hop-tep.ht-gon { display: inline-block; vertical-align: middle; max-width: 100%; }
html .hop-tep.hop-tep.ht-gon .ht-vung { min-height: var(--kq-cao-nut, 30px); padding: 3px 10px; justify-content: flex-start; gap: 6px; --bt-co: 15px; }
html .hop-tep.hop-tep.ht-gon .ht-chu { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
html .hop-tep.hop-tep.ht-gon .ht-chu-chinh { font-size: var(--kq-co-2, 13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .hop-tep.hop-tep.ht-gon .ht-chu-phu { font-size: var(--kq-co-1, 12px); white-space: nowrap; }
html .hop-tep.hop-tep.ht-gon .ht-chu-phu + .ht-chu-phu { display: none; }
html .hop-tep.hop-tep.ht-gon:not(.ht-co-tep) .ht-trang-thai { display: none; }
html .hop-tep.hop-tep.ht-gon .ht-ds { margin-top: 4px; }

@media print {
  .kq-ngay-nut, .kq-chon-nut > .kq-ctl-ic { display: none; }
}