/* =============================================================================
   Hình thức cho hộp chọn tệp (fileBoxStyle — ThemHis/js/07-filebox.js).

   Mọi trạng thái đổi bằng LỚP CSS, không bằng thuộc tính style nội tuyến: chính sách
   style-src 'self' chặn style nội tuyến trong im lặng (QD-065). Bề rộng thanh dung
   lượng nhận qua biến --ht-day, do JavaScript đặt bằng CSSOM (el.style.setProperty),
   đường mà chính sách không đụng tới.

   Số đo bám theo bộ control His_Site: viền 1px #ced4da, bo 2px, chữ 13–14px,
   cùng bảng màu với bootStrapCustom.css.
   ========================================================================== */

.hop-tep {
    --ht-day: 0%;
    --ht-vien: #ced4da;
    --ht-nhan: #2563eb;
    --ht-nhan-nen: #eff6ff;
    --ht-mo: #64748b;
    --ht-loi: #b91c1c;
    --ht-loi-nen: #fef2f2;
    display: block;
    max-width: 640px;
}

/* ── Vùng kéo thả ────────────────────────────────────────────────────────── */
.hop-tep .ht-vung {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 14px 16px;
    border: 1px dashed var(--ht-vien);
    border-radius: 2px;
    background: #fcfdfe;
    cursor: pointer;
    text-align: center;
    transition: border-color .12s, background .12s;
    /* Biểu tượng tải lên (data-bt, ::before) đứng trước khối chữ, cách một nhịp. */
    gap: 10px;
    --bt-co: 20px;
    color: var(--ht-mo);
}

.hop-tep .ht-vung:hover { border-color: var(--ht-nhan); background: var(--ht-nhan-nen); }

/* Tiêu điểm bàn phím phải NHÌN THẤY RÕ: kéo thả chỉ là đường nhanh, bàn phím là
   đường chính cho người không dùng được chuột. */
.hop-tep .ht-vung:focus,
.hop-tep .ht-vung:focus-visible {
    outline: 2px solid var(--ht-nhan);
    outline-offset: 2px;
    border-color: var(--ht-nhan);
}

/* Đang kéo tệp vào — đổi bằng lớp .ht-dang-keo do JS gắn. */
.hop-tep .ht-vung.ht-dang-keo {
    border-color: var(--ht-nhan);
    border-style: solid;
    background: var(--ht-nhan-nen);
}

.hop-tep .ht-chu { display: flex; flex-direction: column; gap: 3px; }
.hop-tep .ht-chu-chinh { font-size: 14px; color: #334155; }
.hop-tep .ht-chu-phu { font-size: 12px; color: var(--ht-mo); }

/* Thẻ input thật: vẫn nằm trong DOM (biểu mẫu POST multipart mang tệp đi), chỉ ẩn
   khỏi mắt SAU KHI JavaScript đã dựng xong vùng thả. Không dùng display:none để
   trình đọc màn hình vẫn tới được bằng Tab nếu người dùng muốn. */
.hop-tep.ht-co-js .ht-input-that {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Danh sách tệp đã chọn ───────────────────────────────────────────────── */
.hop-tep .ht-ds { list-style: none; margin: 8px 0 0; padding: 0; }
.hop-tep:not(.ht-co-tep) .ht-ds { margin: 0; }

.hop-tep .ht-muc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 2px;
    margin-bottom: 4px;
    background: #fff;
    font-size: 13px;
}

.hop-tep .ht-ten {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hop-tep .ht-loai { flex: 0 0 auto; color: var(--ht-mo); font-size: 12px; }
.hop-tep .ht-co { flex: 0 0 auto; color: var(--ht-mo); font-variant-numeric: tabular-nums; }

.hop-tep .ht-bo {
    flex: 0 0 auto;
    border: 1px solid var(--ht-vien);
    background: #fff;
    color: #475569;
    border-radius: 2px;
    /* ≥ 24×24 điểm ảnh theo WCAG 2.5.5, khớp phép đo DICH_NHO của kiem-giao-dien.js */
    min-width: 40px;
    min-height: 24px;
    padding: 2px 10px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.hop-tep .ht-bo:hover { border-color: var(--ht-loi); color: var(--ht-loi); }
.hop-tep .ht-bo:focus-visible { outline: 2px solid var(--ht-nhan); outline-offset: 1px; }

/* ── Trạng thái + thanh dung lượng ───────────────────────────────────────── */
.hop-tep .ht-trang-thai {
    position: relative;
    margin: 6px 0 0;
    padding: 4px 0 8px;
    font-size: 12px;
    color: var(--ht-mo);
}

.hop-tep .ht-trang-thai::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: var(--ht-day);
    background: var(--ht-nhan);
    border-radius: 2px;
    transition: width .15s linear;
}

.hop-tep.ht-gan-day .ht-trang-thai::after { background: var(--vang); }

/* ── Lỗi từng tệp (một tệp hỏng không đánh hỏng cả lô) ───────────────────── */
.hop-tep .ht-loi { list-style: none; margin: 0; padding: 0; }
.hop-tep:not(.ht-co-loi) .ht-loi { display: none; }

.hop-tep.ht-co-loi .ht-loi {
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--do-vien);
    border-radius: 2px;
    background: var(--ht-loi-nen);
    color: var(--ht-loi);
    font-size: 12px;
    line-height: 1.6;
}

.hop-tep .ht-loi li { margin: 0; }

/* ── Chế độ tối (luật 15, 23/09) ────────────────────────────────────────────
   Bản trước ghi `html[data-theme="dark"]` — "bám theo cách _MainLayout của His_Site đặt
   data-theme" đúng cho THƯ VIỆN His_Site (bootStrapCustom.css cũng dùng đúng quy ước đó), nhưng
   đây lại là tệp DO DỰ ÁN VIẾT (xem docs/kientruc/bo-control-his/NGUON.md mục `ThemHis/**`), và
   dự án đặt `data-theme` bằng BA giá trị tiếng Việt "sang"/"toi"/"he-thong" (HaTang/CheDoMau.cs)
   — "dark" không bao giờ khớp. Đo được: nhãn trạng thái (--ht-mo → #64748b) và cả hộp chọn tệp
   giữ nguyên nền trắng #fcfdfe/#fff giữa nền tối. Đổi sang lớp `.che-do-toi` và bảng màu CHUNG
   của site thay vì một bảng xám riêng không ăn khớp tông màu xanh-navy của toàn site. */
.che-do-toi .hop-tep {
    --ht-vien: var(--vien);
    --ht-nhan: var(--xanh);
    --ht-nhan-nen: var(--xanh-nhat);
    --ht-mo: var(--chu-mo);
    --ht-loi: var(--do);
    --ht-loi-nen: var(--do-nen);
}
.che-do-toi .hop-tep .ht-vung { background: var(--the-dinh); }
.che-do-toi .hop-tep .ht-muc { background: var(--the-nen); border-color: var(--vien-nhat); color: var(--chu); }
.che-do-toi .hop-tep .ht-chu-chinh { color: var(--chu); }
.che-do-toi .hop-tep .ht-bo { background: var(--the-nen); color: var(--chu-mo); }