/*==================================================
  HcDialog — hộp thoại dùng chung (xem wwwroot/js/HcDialog.js)
==================================================*/

.hc-dlg-mask {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 24, 40, .45);
    animation: hc-dlg-fade .12s ease-out;
}

/* Nhiều hộp thoại chồng nhau: cái sau tự nằm trên vì thêm sau vào DOM. */
.hc-dlg {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(16, 24, 40, .28);
    overflow: hidden;
    animation: hc-dlg-in .14s ease-out;
}

.hc-dlg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: #f4f6f8;
    border-bottom: 1px solid #e3e7ec;
}

.hc-dlg-title {
    font-weight: 700;
    font-size: 14px;
    color: #1d2939;
}

.hc-dlg-x {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: #98a2b3;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 6px;
}
.hc-dlg-x:hover { background: #e7ebf0; color: #475467; }

/* Thân hộp PHẢI cuộn được: form nhiều ô cao hơn màn hình thì trước đây bị cắt mất mấy ô
   dưới cùng — không thanh cuộn, không dấu hiệu gì, người dùng tưởng hộp thoại thiếu control. */
.hc-dlg-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 18px;
    overflow: auto;
    max-height: calc(100vh - 190px);   /* chừa chỗ cho thanh tiêu đề + hàng nút + lề nền */
}

.hc-dlg-icon { font-size: 30px; line-height: 1; flex: none; }
.hc-dlg-icon-info     { color: #0d6efd; }
.hc-dlg-icon-success  { color: #12b76a; }
.hc-dlg-icon-warning  { color: #f79009; }
.hc-dlg-icon-error    { color: #d92d20; }
.hc-dlg-icon-question { color: #0d6efd; }

.hc-dlg-msg {
    flex: 1 1 auto;
    font-size: 14px;
    color: #344054;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-line;      /* xuống dòng bằng \n như MessageBox */
}

.hc-dlg-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    background: #fafbfc;
    border-top: 1px solid #eef0f3;
}

.hc-dlg-btn {
    min-width: 88px;
    padding: 7px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.hc-dlg-btn:hover { background: #f2f4f7; }
.hc-dlg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13,110,253,.25); }
.hc-dlg-btn.primary { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.hc-dlg-btn.primary:hover { background: #0b5ed7; }
.hc-dlg-btn.danger { background: #d92d20; border-color: #d92d20; color: #fff; }
.hc-dlg-btn.danger:hover { background: #b42318; }

/* Nút PHỤ (không đóng hộp) đứng dồn về BÊN TRÁI, tách hẳn khỏi OK/Hủy — bấm nhầm nút
   "làm ngay" trong khi định bấm OK là chuyện phải tránh. Đẩy bằng cách cho nút thường
   ĐẦU TIÊN đứng sau nhóm phụ nhận margin-left:auto (nhóm phụ có mấy nút cũng đúng). */
.hc-dlg-btn.phu { min-width: 0; font-weight: 500; }
.hc-dlg-foot .hc-dlg-btn.phu + .hc-dlg-btn:not(.phu) { margin-left: auto; }

/* Nút khai 'left': đứng hẳn mép trái, đẩy cụm nút quyết định về bên phải. Dùng khi nút đó KHÁC
   LOẠI với mấy nút kia ("Tạo tệp mẫu" không phải một lựa chọn ngang hàng với "Đọc Excel"/"Thoát"),
   để mắt không gộp cả ba thành một cụm. */
.hc-dlg-foot .hc-dlg-btn.trai { margin-right: auto; }

/* Trang không cuộn được khi đang có hộp thoại */
body.hc-dlg-open { overflow: hidden; }

@keyframes hc-dlg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hc-dlg-in {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Hộp CỬA SỔ HÓA (resizable: true) ----------
   Kéo giãn 4 cạnh/góc · kéo đi bằng thanh tiêu đề · phóng to. Hộp THÔNG BÁO không có
   lớp này — phóng to một dòng chữ thì vô nghĩa. */
.hc-dlg-win {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: none;
    max-height: 90vh;
}
/* Kéo giãn hộp thì thân hộp phải giãn theo, không bị kẹp bởi max-height cố định */
.hc-dlg-win .hc-dlg-body { flex: 1 1 auto; min-height: 0; max-height: none; }
.hc-dlg-win .hc-dlg-head, .hc-dlg-win .hc-dlg-foot { flex: none; }

/* Hộp CHỌN từ danh sách: cỡ mở đầu rộng hơn vì có lưới */
.hc-dlg-choose {
    width: 860px;
    height: 70vh;
    max-height: 86vh;
}
.hc-dlg-win.max {
    position: fixed;
    left: 8px;
    top: 8px;
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: none;
    margin: 0;
    border-radius: 8px;
}

/* Vùng danh sách co giãn theo hộp (thay vì cao cố định) */
.hc-dlg-choose .hc-dlg-pick { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hc-dlg-choose .hc-dlg-pick-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.hc-dlg-choose .hc-dlg-head, .hc-dlg-choose .hc-dlg-foot { flex: none; }

/* Nút phóng to/khôi phục ở góc phải thanh tiêu đề */
.hc-dlg-tools { display: flex; align-items: center; gap: 2px; }
.hc-dlg-max {
    border: none; background: none; color: #98a2b3; cursor: pointer;
    padding: 2px 6px; border-radius: 6px; font-size: 15px; line-height: 1;
    display: inline-flex; align-items: center;
}
.hc-dlg-max:hover { background: #e7ebf0; color: #475467; }

/* Tay nắm kéo giãn — 4 cạnh + 4 góc.
   Đặt SÁT MÉP TRONG (không dùng toạ độ âm) vì hộp có overflow:hidden, tràn ra ngoài là bị cắt. */
.hc-rz { position: absolute; z-index: 3; }

.hc-rz-n { top: 0; left: 14px; right: 14px; height: 4px; cursor: ns-resize; }
.hc-rz-s { bottom: 0; left: 14px; right: 14px; height: 6px; cursor: ns-resize; }
.hc-rz-w { left: 0; top: 14px; bottom: 14px; width: 6px; cursor: ew-resize; }
.hc-rz-e { right: 0; top: 14px; bottom: 14px; width: 6px; cursor: ew-resize; }

.hc-rz-nw { left: 0; top: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.hc-rz-ne { right: 0; top: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.hc-rz-sw { left: 0; bottom: 0; width: 14px; height: 14px; cursor: nesw-resize; }

/* Góc dưới phải vẽ vạch chéo cho người dùng biết là kéo được */
.hc-rz-se {
    right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 0 55%, #b9c0ca 55% 62%, transparent 62% 72%, #b9c0ca 72% 79%, transparent 79%);
}

.hc-dlg-win.max .hc-rz { display: none; }      /* đang toàn màn hình thì không kéo */
body.hc-dlg-resizing { user-select: none; }    /* con trỏ do JS đặt theo hướng đang kéo */

/* Thanh tiêu đề = chỗ cầm để kéo cả hộp đi (trừ mấy cái nút) */
.hc-dlg-win .hc-dlg-head { cursor: move; user-select: none; }
.hc-dlg-win .hc-dlg-head button { cursor: pointer; }
.hc-dlg-win.max .hc-dlg-head { cursor: default; }
body.hc-dlg-moving { cursor: move; user-select: none; }

.hc-dlg-pick { padding: 12px 14px; }
.hc-dlg-pick-find {
    width: 100%; padding: 6px 10px; margin-bottom: 8px; font-size: 13px;
    border: 1px solid #d0d5dd; border-radius: 6px;
}
.hc-dlg-pick-find:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13,110,253,.12); }
.hc-dlg-pick-scroll {
    overflow: auto;
    border: 1px solid #dfe3e8; border-radius: 8px; background: #fff;
}
/* Giữ `table-layout: fixed` của .hc-grid-table (KHÔNG đè về auto như trước 07/09/2026): bề rộng
   cột do <colgroup> quyết định thì mới kéo được, và cột mới không phình theo ô dài nhất. */
.hc-dlg-pick-scroll .hc-grid-table th { position: relative; }
.hc-dlg-pick-scroll tbody tr { cursor: pointer; }
.hc-dlg-pick-scroll tbody tr.picked { background: #dbeafe; }
.hc-dlg-pick-scroll tbody tr.picked td { color: #0d3f8f; }

/* Bấm ra nền: không đóng, chỉ nhấn nhá cho biết phải trả lời */
.hc-dlg-nudge { animation: hc-dlg-nudge .18s ease-in-out; }
@keyframes hc-dlg-nudge {
    0%, 100% { transform: none; }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

/* Ô tick phụ ở chân hộp CHỌN (07/09/2026) — dồn về mép trái bằng `margin-right:auto`, cùng cách
   nút `.trai` đang làm, để cụm nút quyết định vẫn nằm nguyên bên phải. */
.hc-dlg-foot .hc-dlg-tick {
    margin-right: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: #344054; cursor: pointer; user-select: none;
}
.hc-dlg-foot .hc-dlg-tick input { margin: 0; cursor: pointer; }

/* ---- Xem ảnh (HcDialog.xemAnh) — toàn màn hình, không hàng nút, ảnh co vừa khung ---- */
.hc-xa-mask { padding: 8px; }
.hc-xa {
    max-width: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.hc-xa-than {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    overflow: hidden;
    background: #101828;
}
.hc-xa-mot { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.hc-xa-luoi { display: grid; gap: 8px; justify-content: center; align-content: center; }
.hc-xa-o { margin: 0; cursor: zoom-in; }
.hc-xa-khung { aspect-ratio: 16 / 9; background: #1d2939; border-radius: 3px; overflow: hidden; }
.hc-xa-khung img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hc-xa-o:hover .hc-xa-khung { outline: 2px solid #53b1fd; }
.hc-xa-o figcaption {
    height: 24px; line-height: 24px; font-size: 13px; color: #e4e7ec;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==========================================================================
   ĐIỆN THOẠI (24/09/2026). Hộp nào khai `width` (hộp soát 940px) thì HcDialog gắn thẳng
   `style="max-width:none;width:940px"` — trên màn 390px hộp tràn ra, cả trang trượt ngang
   và lộ lớp phủ xám hai bên. Dưới 640px mọi hộp co vừa bề ngang màn hình; `!important` vì
   phải đè kiểu gắn thẳng trên phần tử (kể cả cỡ người dùng kéo giãn ở màn rộng).
   ========================================================================== */
@media (max-width: 640px) {
    /* Chiều cao NHÌN THẤY (dvh) thay cho 100vh: Safari iOS tính 100vh gồm cả phần nằm DƯỚI thanh
       địa chỉ, hộp căn giữa theo đó nên hai nút Xác nhận / Hủy rơi đúng sau thanh địa chỉ (dính
       24/09/2026). Máy chưa có dvh thì dòng sau bị bỏ qua, lùi về vh như cũ. */
    .hc-dlg-mask {
        padding: 8px;
        bottom: auto;
        height: 100vh;
        height: 100dvh;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;          /* lề nằm TRONG 100dvh, không cộng thêm ra ngoài */
    }
    .hc-dlg,
    .hc-dlg.hc-dlg-win {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        margin: 0 !important;
    }
    .hc-dlg-win { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
}

/* Dòng phụ dưới tiêu đề (`subtitle`, 24/09/2026) — VD đơn vị · chức vụ của người đang soát. */
.hc-dlg-tt { display: flex; flex-direction: column; min-width: 0; }
.hc-dlg-sub { font-size: 12.5px; color: #475569; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-dlg-tt .hc-dlg-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Nút đang MỜ (VD "Thêm" khi chưa chọn gì ở hộp Thêm nhiều) — nhìn ra ngay là chưa bấm được. */
.hc-dlg-btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Lớp phủ xem PDF (HcDialog.moPdfPhu — chế độ ứng dụng trên iPhone, 07/10/2026) ---
   Ở chế độ toàn màn hình, PDF mở tab mới là đè lên ứng dụng mà không có nút quay lại — nên hiện trong lớp phủ. */
.hc-pdfphu { position: fixed; inset: 0; z-index: 20000; display: flex; flex-direction: column; background: #525659; }
.hc-pdfphu-thanh { display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 6px; background: #03045e; color: #fff; }
.hc-pdfphu-dong { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent;
    color: #fff; font-size: 16px; padding: 6px 8px 6px 0; }
.hc-pdfphu-ten { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 14px; opacity: .9; }
.hc-pdfphu-tai { color: #fff; font-size: 20px; padding: 4px 6px; text-decoration: none; }
.hc-pdfphu-tai:hover { color: #fff; }
.hc-pdfphu-than { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px); }
.hc-pdfphu-than iframe { display: block; border: 0; width: 100%; height: 100%; background: #fff; }