/* Vừa đủ đọc được, không kéo theo framework nào. */
:root {
  --nen: #f6f7f9;
  --the: #ffffff;
  --vien: #e3e6ea;
  --chu: #1f2430;
  --mo: #6b7280;
  --chinh: #1f4e79;
  --do: #b42318;
  --xanh: #067647;
  --cam: #b54708;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--nen); color: var(--chu);
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
header {
  background: var(--chinh); color: #fff; padding: 12px 20px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
header h1 { font-size: 16px; margin: 0; font-weight: 700; letter-spacing: .3px; }
nav { display: flex; gap: 4px; flex: 1; }
nav button {
  background: transparent; border: 0; color: #cfe0ef; padding: 7px 13px;
  border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600;
}
nav button:hover { background: rgba(255,255,255,.12); color: #fff; }
nav button.chon { background: #fff; color: var(--chinh); }
main { padding: 20px; max-width: 1500px; margin: 0 auto; }
section { display: none; }
section.hien { display: block; }

.the { background: var(--the); border: 1px solid var(--vien); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.hang { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
label { display: block; font-size: 11px; font-weight: 700; color: var(--mo); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
input, select, textarea {
  font: inherit; padding: 7px 10px; border: 1px solid var(--vien); border-radius: 7px;
  background: #fff; color: var(--chu); min-width: 150px;
}
textarea { width: 100%; min-height: 150px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
button.nut {
  font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 7px;
  border: 1px solid var(--chinh); background: var(--chinh); color: #fff; cursor: pointer;
}
button.nut.phu { background: #fff; color: var(--chinh); }
button.nut.nho { padding: 4px 9px; font-size: 12px; }
button.nut:disabled { opacity: .45; cursor: default; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--mo); padding: 8px 10px; border-bottom: 2px solid var(--vien); white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid var(--vien); vertical-align: top; }
tbody tr:hover { background: #f9fafb; cursor: pointer; }
.phai { text-align: right; }
.mo { color: var(--mo); }
.don-dong { white-space: nowrap; }

.o-so { display: flex; gap: 12px; flex-wrap: wrap; }
.o-so .the { flex: 1; min-width: 150px; margin: 0; }
.o-so .so { font-size: 26px; font-weight: 700; }
.o-so .ten { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--mo); }

.the-trang { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.t-Parsed { background: #e7f6ee; color: var(--xanh); }
.t-Failed { background: #fdeceb; color: var(--do); }
.t-NotAnOrder { background: #f1f2f4; color: var(--mo); }
.t-Duplicate { background: #fdf3e6; color: var(--cam); }

dialog { border: 0; border-radius: 12px; padding: 0; max-width: 900px; width: 92vw; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(15,23,42,.5); }
.dialog-than { padding: 18px; max-height: 76vh; overflow: auto; }
.dialog-chan { padding: 12px 18px; border-top: 1px solid var(--vien); display: flex; justify-content: flex-end; gap: 8px; }
pre { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 8px; overflow: auto; font-size: 12px; max-height: 420px; }
h2 { font-size: 15px; margin: 0 0 12px; }
h3 { font-size: 13px; margin: 16px 0 6px; color: var(--mo); text-transform: uppercase; letter-spacing: .4px; }
.luoi-2 { display: grid; grid-template-columns: 170px 1fr; gap: 4px 14px; font-size: 13px; }
.luoi-2 div:nth-child(odd) { color: var(--mo); }
#bao { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 99; }
#bao div { background: #111827; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
#bao div.loi { background: var(--do); }
.trang { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--mo); }

/* màn đăng nhập */
#man-khoa {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; background: #16324f;
}
#man-khoa.hien { display: flex; }
#form-khoa {
  background: #fff; padding: 30px 28px; border-radius: 12px; width: 360px; max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
#form-khoa h1 { font-size: 17px; margin: 0 0 6px; color: var(--chinh); }
#form-khoa p { margin: 0 0 16px; color: var(--mo); font-size: 13px; }
#form-khoa input { width: 100%; margin-bottom: 12px; }
#form-khoa button { width: 100%; }
#khoa-loi { color: var(--do); font-size: 13px; margin-top: 10px; min-height: 18px; }