:root {
  --nen: #f5f6f8;
  --the: #ffffff;
  --chu: #1c2333;
  --chu-mo: #5d6678;
  --vien: #dde1e8;
  --chinh: #1f3864;
  --chinh-nhat: #e8edf7;
  --xanh: #1d7a46;
  --xanh-nen: #e5f4ea;
  --do: #b42318;
  --do-nen: #fdecea;
  --vang: #8a5a00;
  --vang-nen: #fff4d6;
  --nasora: #d9e2f3;
  --scenti: #e2efda;
  --orgamiss: #fce4d6;
  --chamvn: #fff2cc;
  --bo: 10px;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nen: #14171d; --the: #1d2129; --chu: #e6e9ef; --chu-mo: #a3abb9; --vien: #343a46;
    --chinh: #8fb0ea; --chinh-nhat: #26324a; --xanh: #6fd39a; --xanh-nen: #183526;
    --do: #ff8a80; --do-nen: #3d1f1d; --vang: #f0c25a; --vang-nen: #3a2f14;
    --nasora: #2b3650; --scenti: #2a3b2a; --orgamiss: #463126; --chamvn: #463d20;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--nen); color: var(--chu); font-size: 15px; line-height: 1.5; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 17px; margin: 0 0 6px; }
h3 { font-size: 15px; margin: 0 0 8px; }
p { margin: 0 0 6px; }
a { color: var(--chinh); }

.dau-trang { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 20px 24px 12px; max-width: 1200px; margin: 0 auto; }
.phu { color: var(--chu-mo); font-size: 13px; }
.an-toan { font-size: 13px; color: var(--xanh); background: var(--xanh-nen); padding: 4px 10px; border-radius: 99px; margin: 0; }

.the { display: flex; gap: 4px; max-width: 1200px; margin: 0 auto; padding: 0 24px; border-bottom: 1px solid var(--vien); overflow-x: auto; }
.the button { border: 0; background: none; padding: 10px 16px; font: inherit; font-weight: 600; color: var(--chu-mo); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.the button[aria-selected="true"] { color: var(--chinh); border-bottom-color: var(--chinh); }

main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
.khung { display: flex; flex-direction: column; gap: 16px; }
.huong-dan { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px 18px; }
.ghi-chu { color: var(--vang); font-size: 14px; }

.o-tha { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 34px 16px; border: 2px dashed var(--vien); border-radius: var(--bo); background: var(--the); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.o-tha:hover, .o-tha.dang-keo { border-color: var(--chinh); background: var(--chinh-nhat); }
.o-tha-chinh { font-weight: 600; font-size: 16px; }
.o-tha-phu { color: var(--chu-mo); font-size: 13px; }

.the-kq { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.so-lieu { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.o-so { border: 1px solid var(--vien); border-radius: 8px; padding: 10px 12px; }
.o-so .nhan { color: var(--chu-mo); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.o-so .gia-tri { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.bao { border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.bao.tot { background: var(--xanh-nen); color: var(--xanh); }
.bao.loi { background: var(--do-nen); color: var(--do); }
.bao.chu-y { background: var(--vang-nen); color: var(--vang); }
.bao b { font-weight: 700; }
.bao ul { margin: 6px 0 0; padding-left: 20px; }

.nut { font: inherit; font-weight: 600; border-radius: 8px; padding: 9px 16px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.nut.chinh { background: var(--chinh); color: #fff; }
.nut.chinh:disabled { opacity: .45; cursor: not-allowed; }
.nut.phu { background: var(--the); color: var(--chinh); border-color: var(--vien); }
.nut.nhe { background: none; color: var(--chu-mo); border-color: var(--vien); }
.nut:hover:not(:disabled) { filter: brightness(1.08); }
.hang-nut { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.cuon { overflow-x: auto; border: 1px solid var(--vien); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--vien); text-align: left; white-space: nowrap; }
th { background: var(--chinh); color: #fff; font-weight: 600; position: sticky; top: 0; }
td.so, th.so { text-align: right; font-variant-numeric: tabular-nums; }
tr.dong-tong td { font-weight: 700; background: var(--chinh-nhat); }
td.nhan-NASORA { background: var(--nasora); }
td.nhan-SCENTI { background: var(--scenti); }
td.nhan-ORGAMISS { background: var(--orgamiss); }
td.nhan-CHAMVN { background: var(--chamvn); }
.bang-cao { max-height: 520px; overflow: auto; }
td input, td select { font: inherit; padding: 4px 6px; border: 1px solid var(--vien); border-radius: 6px; background: var(--the); color: var(--chu); min-width: 0; }
td input.rong { width: 100%; min-width: 280px; }

.thanh-cong-cu { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.thanh-cong-cu input[type="search"] { flex: 1 1 220px; font: inherit; padding: 9px 12px; border: 1px solid var(--vien); border-radius: 8px; background: var(--the); color: var(--chu); }

.tien-trinh { height: 10px; background: var(--chinh-nhat); border-radius: 99px; overflow: hidden; }
.tien-trinh > div { height: 100%; background: var(--chinh); width: 0; transition: width .2s; }
.tien-trinh.chay > div { width: 30% !important; animation: chay 1.2s infinite ease-in-out; }
@keyframes chay { from { margin-left: -30%; } to { margin-left: 100%; } }
.trang-thai { color: var(--chu-mo); font-size: 14px; }

.truong { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--chu-mo); }
.truong select, .truong input { font: inherit; color: var(--chu); padding: 7px 10px; border: 1px solid var(--vien); border-radius: 8px; background: var(--the); }

.thong-bao { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--chu); color: var(--nen); padding: 10px 18px; border-radius: 8px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: calc(100% - 32px); }

@media (max-width: 640px) {
  .dau-trang, .the, main { padding-left: 16px; padding-right: 16px; }
  .o-so .gia-tri { font-size: 17px; }
}