:root {
  --nen: #f4f6f5;
  --the: #ffffff;
  --chu: #1c2421;
  --phu: #5b6762;
  --vien: #d9e0dc;
  --chinh: #0b6e4f;
  --chinh-dam: #08573f;
  --nguy: #b42318;
  --canh-bao: #b54708;
  --tot: #067647;
  --nhat: #eef4f1;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--nen); color: var(--chu); }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 16px 0 8px; }
.phu { color: var(--phu); margin: 0 0 12px; }
.loi { color: var(--nguy); min-height: 1.5em; margin: 8px 0 0; }

.dau-trang { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: var(--chinh); color: #fff; }
.ten-he-thong { font-weight: 600; }
.nguoi-dung { font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.the { background: var(--the); border: 1px solid var(--vien); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.dang-nhap { max-width: 380px; margin: 40px auto; }
label { display: block; margin: 0 0 10px; font-size: 14px; color: var(--phu); }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font: inherit; color: var(--chu);
  border: 1px solid var(--vien); border-radius: 8px; background: #fff; }
input[type=checkbox] { display: inline; width: auto; margin: 0 6px 0 0; }
.o-chon { color: var(--chu); display: flex; align-items: center; }

.nut { display: inline-block; padding: 8px 14px; font: inherit; border-radius: 8px; border: 1px solid var(--vien);
  background: #fff; color: var(--chu); cursor: pointer; white-space: nowrap; }
.nut:hover { background: var(--nhat); }
.nut.chinh { background: var(--chinh); border-color: var(--chinh); color: #fff; }
.nut.chinh:hover { background: var(--chinh-dam); }
.nut.nguy { color: var(--nguy); border-color: #f1c4c0; }
.nut.nho { padding: 4px 9px; font-size: 13px; }
.nut:disabled { opacity: .5; cursor: default; }
.dau-trang .nut { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }

.menu { display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto; background: var(--the); border-bottom: 1px solid var(--vien); }
.menu button { padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; font: inherit; color: var(--phu); cursor: pointer; white-space: nowrap; }
.menu button.dang-chon { background: var(--nhat); color: var(--chinh); font-weight: 600; }
.menu .dem { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--canh-bao); color: #fff; font-size: 12px; }
.noi-dung { padding: 16px; max-width: 1200px; margin: 0 auto; }

.loc { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.loc .nut { margin-bottom: 10px; }
.luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.so-lieu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.so-lieu div { background: var(--the); border: 1px solid var(--vien); border-radius: 10px; padding: 10px 12px; }
.so-lieu b { display: block; font-size: 20px; }
.so-lieu span { color: var(--phu); font-size: 13px; }

.bang-cuon { overflow-x: auto; border: 1px solid var(--vien); border-radius: 10px; background: var(--the); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--vien); text-align: left; vertical-align: top; }
th { background: var(--nhat); font-weight: 600; white-space: nowrap; }
td.so, th.so { text-align: right; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.chi-tiet td { background: #fafcfb; }
.trong { color: var(--phu); padding: 16px; text-align: center; }

.nhan { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--nhat); color: var(--chinh); white-space: nowrap; }
.nhan.huy { background: #fde8e7; color: var(--nguy); }
.nhan.hong { background: #fef0c7; color: var(--canh-bao); }
.nhan.canh-bao { background: #fef0c7; color: var(--canh-bao); }
.hang-nut { display: flex; gap: 6px; flex-wrap: wrap; }

.canh-bao-manh { background: #fde8e7; border: 1px solid #f1c4c0; border-radius: 10px; padding: 14px 16px;
  margin-bottom: 16px; color: var(--nguy); font-weight: 600; }

.hop-thoai { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.hop-thoai[hidden] { display: none; }
.hop-thoai .the { width: 100%; max-width: 440px; margin: 0; }
.thong-bao { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--chu); color: #fff; padding: 10px 16px;
  border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; z-index: 20; }
.thong-bao.hien { opacity: 1; }
.thong-bao.loi-tb { background: var(--nguy); }

.bang-ke-in h1 { text-align: center; }
.ky-ten { display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-top: 32px; gap: 16px; }
.ky-ten div { min-height: 90px; }

@media (max-width: 640px) {
  .noi-dung { padding: 12px; }
  th, td { padding: 7px 8px; }
}
@media print {
  .dau-trang, .menu, .khong-in, .thong-bao { display: none !important; }
  body { background: #fff; }
  .noi-dung { padding: 0; max-width: none; }
  .the, .bang-cuon { border: 0; padding: 0; }
}