/* ============================================================
   Công cụ chuyển đổi hoá đơn điện tử XML/PDF sang Excel
   Chỉ nạp ở trang công cụ này, không gộp vào bộ style dùng chung.

   Lưu ý: có rule toàn cục `span { font-size: 14px !important }`
   nên mọi con số lớn ở đây đều đặt trong <div>, không dùng <span>.
   ============================================================ */

/* ---------- Bố cục khối tải file: ô thả trái, cột giới thiệu kết quả phải ---------- */
.hd-upload-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}
@media (min-width: 900px) {
    .hd-upload-grid { grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); }
}

.hd-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.hd-side-title {
    font-size: 14px;
    font-weight: 600;
    color: #202124;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hd-side-title i { color: #1e8e3e; }

.hd-side-sheets {
    list-style: none;
    counter-reset: sheet;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.hd-side-sheets li {
    counter-increment: sheet;
    position: relative;
    padding: 10px 12px 10px 40px;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    background: #fff;
}
.hd-side-sheets li::before {
    content: counter(sheet);
    position: absolute;
    left: 12px;
    top: 11px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #e8f0fe;
    color: #1558b0;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hd-side-sheets strong {
    display: block;
    font-size: 13.5px;
    color: #202124;
    line-height: 1.35;
}
/* Dùng div chứ không dùng span: app.css có rule toàn cục
   span { font-size: 14px !important } sẽ đè mọi cỡ chữ nhỏ hơn. */
.hd-side-sheets div {
    display: block;
    font-size: 12px;
    color: #5f6368;
    line-height: 1.45;
    margin-top: 2px;
}

/* ---------- Vùng thả file ---------- */
.hd-dropzone {
    border: 2px dashed #c3d3ea;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7fe 100%);
    padding: 34px 22px;
    text-align: center;
    cursor: pointer;
    /* Ô thả bị grid kéo cao bằng cột phải — canh giữa theo chiều dọc cho khỏi
       dồn hết nội dung lên đỉnh, hở một mảng trống ở đáy. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: border-color .15s, background .15s, box-shadow .15s;
    outline: none;
}
.hd-dropzone:hover,
.hd-dropzone:focus-visible {
    border-color: #1a73e8;
    background: #eef4fe;
}
.hd-dropzone.is-over {
    border-color: #1a73e8;
    background: #e4eefd;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, .12);
}
.hd-dropzone-icon {
    font-size: 40px;
    line-height: 1;
    color: #1a73e8;
    margin-bottom: 12px;
}
.hd-dropzone-title {
    font-size: 17px;
    font-weight: 600;
    color: #202124;
    margin: 0 0 6px;
}
.hd-dropzone-sub {
    font-size: 13.5px;
    color: #5f6368;
    margin: 0;
}
.hd-dropzone-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
}
.hd-format {
    background: #fff;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12.5px;
    color: #3c4043;
    font-weight: 500;
}

.hd-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: #e6f4ea;
    border: 1px solid #ceead6;
    border-radius: 8px;
    font-size: 13.5px;
    color: #1e6b37;
    line-height: 1.55;
}
.hd-privacy i { margin-top: 2px; }
/* Trong cột phải, đẩy khối cam kết xuống đáy cho thẳng mép dưới ô thả file. */
.hd-side .hd-privacy { margin-top: auto; }

/* ---------- Danh sách file đã nạp ---------- */
.hd-file-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.hd-file-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f6f8fb;
    border: 1px solid #e6ebf3;
    font-size: 13.5px;
}
.hd-file-list li.is-ok i { color: #1e8e3e; }
.hd-file-list li.is-err {
    background: #fdf1f0;
    border-color: #f5cdc9;
}
.hd-file-list li.is-err i { color: #c0392b; }
.hd-file-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #202124;
}
.hd-file-meta {
    flex: 0 0 auto;
    color: #5f6368;
    font-size: 12.5px;
}

.hd-tien-trinh {
    margin-top: 12px;
    font-size: 13.5px;
    color: #1a73e8;
    min-height: 20px;
}
/* Lúc chưa nạp file, hai khối này rỗng nhưng vẫn chiếm 12+20+16px khiến trang
   hở một mảng trắng giữa khối cam kết bảo mật và hàng nút. */
.hd-tien-trinh:empty,
#hdFileList:empty { display: none; }

/* ---------- Thống kê ----------
   Không dùng .gc-salary-stat: khối đó là flex NGANG (nhãn trái, số phải) nên
   số tiền 9 chữ số bị xuống dòng giữa chừng. Ở đây cần card dọc. */
.hd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 10px;
}
.hd-stat {
    padding: 14px 16px;
    border: 1px solid #e6ebf3;
    border-radius: 10px;
    background: #fff;
    min-width: 0;
}
.hd-stat.is-blue  { background: #f1f6fe; border-color: #c7d8f5; }
.hd-stat.is-amber { background: #fff8e6; border-color: #fde293; }
.hd-stat.is-red   { background: #fdf1f0; border-color: #f5b8b3; }
.hd-stat.is-green { background: #eaf6ed; border-color: #c3e6cd; }

.hd-stat-label {
    font-size: 11.5px;
    color: #5f6368;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
    line-height: 1.35;
}
.hd-stat-num {
    font-size: 25px;
    font-weight: 700;
    color: #202124;
    line-height: 1.2;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.hd-stat-sub {
    font-size: 12px;
    color: #5f6368;
    margin-top: 3px;
    line-height: 1.4;
}
.hd-stat.is-blue  .hd-stat-num { color: #1558b0; }
.hd-stat.is-amber .hd-stat-num { color: #8a5300; }
.hd-stat.is-red   .hd-stat-num { color: #c5221f; }
.hd-stat.is-green .hd-stat-num { color: #1e7e34; }

/* ---------- Bảng kết quả ---------- */
.hd-table-wrapper {
    max-height: 560px;
    overflow: auto;
}
.hd-table {
    font-size: 12.8px;
    white-space: nowrap;
}
.hd-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f1f5fb;
}
.hd-table td,
.hd-table th {
    padding: 7px 10px;
}
.hd-table td.is-num,
.hd-table th.is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.hd-table tr.is-total td {
    background: #e8f0fe;
    font-weight: 700;
}
.hd-table td.hd-canh-bao {
    color: #c0392b;
    white-space: normal;
    min-width: 260px;
}
.hd-note {
    font-size: 13px;
    color: #5f6368;
    margin: 10px 0 0;
}

/* ---------- Danh sách cảnh báo ---------- */
.hd-canh-bao-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.hd-canh-bao-list > li {
    border: 1px solid #f2ddc0;
    background: #fffaf0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13.5px;
}
.hd-canh-bao-list > li > strong { color: #202124; }
.hd-canh-bao-file {
    display: block;
    font-size: 12.5px;
    color: #8a6d3b;
    margin-top: 2px;
}
.hd-canh-bao-list ul {
    margin: 6px 0 0;
    padding-left: 18px;
    color: #5f6368;
}
.hd-canh-bao-list ul li { margin-bottom: 3px; }

/* ---------- Nút hành động ---------- */
.hd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.hd-actions .gc-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Cột đầu của mấy bảng này bị cột chữ dài bên cạnh bóp lại, làm nhãn ngắn vỡ
   thành 2–4 dòng ("Bước 1", "Bảng kê theo thuế suất", "Ký hiệu mẫu (đứng trước)"). */
@media (min-width: 641px) {
    #huong-dan .gc-table td:first-child,
    #huong-dan .gc-table th:first-child  { white-space: nowrap; }
    #ba-sheet .gc-table td:first-child   { min-width: 162px; }
    #sau-ky-tu .gc-table td:first-child  { min-width: 152px; }
    #sau-ky-tu .gc-table td:nth-child(2) { min-width: 74px; }
}

/* ---------- Bảng đối chiếu trường dữ liệu ---------- */
.hd-truong-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: #f1f3f4;
    border-radius: 4px;
    padding: 1px 6px;
    color: #1a4f8a;
}

@media (max-width: 640px) {
    .hd-dropzone { padding: 24px 14px; }
    .hd-dropzone-icon { font-size: 32px; }
    .hd-dropzone-title { font-size: 15.5px; }
    .hd-table-wrapper { max-height: 420px; }
    .hd-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .hd-stat { padding: 12px; }
    .hd-stat-num { font-size: 20px; }
    .hd-file-list li { flex-wrap: wrap; }
    .hd-file-meta { flex-basis: 100%; }
}