:root {
  --nen: #f6f7f4;
  --the: #ffffff;
  --chu: #1d2420;
  --phu: #5f6b64;
  --vien: #dde2dc;
  --chinh: #2f7d4f;
  --dat: #2f8f55;
  --dat-nen: #e3f4e8;
  --gan: #b7791f;
  --gan-nen: #fdf2dc;
  --thieu: #c0392b;
  --thieu-nen: #fbe6e3;
  --xam-nen: #eef0ed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nen: #141815; --the: #1e2420; --chu: #e7ece8; --phu: #9aa69f; --vien: #333b36;
    --chinh: #5cbf83; --dat: #5cbf83; --dat-nen: #1f3a29; --gan: #e0a84a; --gan-nen: #3a3020;
    --thieu: #ef7b6c; --thieu-nen: #3d2321; --xam-nen: #262c28;
  }
}
:root[data-theme="dark"] {
  --nen: #141815; --the: #1e2420; --chu: #e7ece8; --phu: #9aa69f; --vien: #333b36;
  --chinh: #5cbf83; --dat: #5cbf83; --dat-nen: #1f3a29; --gan: #e0a84a; --gan-nen: #3a3020;
  --thieu: #ef7b6c; --thieu-nen: #3d2321; --xam-nen: #262c28;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nen); color: var(--chu);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.dau {
  position: sticky; top: 0; z-index: 5; background: var(--the); border-bottom: 1px solid var(--vien);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 0;
}
h1 { font-size: 18px; margin: 0 0 8px; }
h2 { font-size: 17px; margin: 0; }
.tab { display: flex; gap: 4px; }
.tab button {
  flex: 1; border: 0; background: none; padding: 10px 4px; font: inherit; color: var(--phu);
  border-bottom: 3px solid transparent; cursor: pointer;
}
.tab button.chon { color: var(--chinh); border-color: var(--chinh); font-weight: 600; }
main { max-width: 640px; margin: 0 auto; padding: 12px 16px 80px; }

.the { background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.the h2 { margin-bottom: 8px; }
label { display: block; font-size: 14px; color: var(--phu); margin-bottom: 10px; }
label input { display: block; width: 100%; margin-top: 4px; }
input {
  font: inherit; font-size: 16px; padding: 9px 10px; border: 1px solid var(--vien); border-radius: 10px;
  background: var(--nen); color: var(--chu); min-width: 0;
}
button {
  font: inherit; padding: 9px 14px; border-radius: 10px; border: 0; background: var(--chinh); color: #fff;
  cursor: pointer; white-space: nowrap;
}
button.nhe { background: var(--xam-nen); color: var(--chu); }
button.xoa { background: none; color: var(--thieu); padding: 4px 8px; }
.hang { display: flex; gap: 8px; align-items: center; }
.hang > * { flex: 1; }
.hang > button, .hang > .xem-truoc { flex: 0 0 auto; }
.loi { color: var(--thieu); font-size: 14px; margin: 6px 0 0; min-height: 0; }
.loi:empty { display: none; }
.nho { color: var(--phu); font-size: 13px; }

.chon-ngay { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.chon-ngay input, .chon-ngay strong { flex: 1; text-align: center; }
.chon-ngay button { background: var(--the); color: var(--chu); border: 1px solid var(--vien); width: 44px; font-size: 20px; padding: 6px; }
.chon-ngay button:disabled { opacity: .35; }

.bua-dau { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.moc { color: var(--phu); font-size: 14px; margin: 4px 0 10px; }
.nhan { font-size: 13px; padding: 3px 10px; border-radius: 99px; font-weight: 600; }
.nhan.dat { background: var(--dat-nen); color: var(--dat); }
.nhan.gan { background: var(--gan-nen); color: var(--gan); }
.nhan.thieu, .nhan.bo_trong { background: var(--thieu-nen); color: var(--thieu); }
.nhan.chua_den, .nhan.khong_co_moc { background: var(--xam-nen); color: var(--phu); }

.thanh { margin-bottom: 8px; }
.thanh-chu { display: flex; justify-content: space-between; font-size: 14px; }
.thanh-nen { height: 10px; background: var(--xam-nen); border-radius: 99px; overflow: hidden; margin-top: 3px; }
.thanh-day { height: 100%; border-radius: 99px; }
.thanh-day.dat { background: var(--dat); }
.thanh-day.gan { background: var(--gan); }
.thanh-day.thieu { background: var(--thieu); }

.canh-bao > div, #canh-bao-chung > div {
  border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 8px 0;
}
.cb-dat { background: var(--dat-nen); color: var(--dat); }
.cb-gan { background: var(--gan-nen); color: var(--chu); border-left: 4px solid var(--gan); }
.cb-thieu { background: var(--thieu-nen); color: var(--chu); border-left: 4px solid var(--thieu); }
.cb-xam { background: var(--xam-nen); color: var(--phu); }
.canh-bao ul { margin: 6px 0 0; padding-left: 18px; }

.ds { list-style: none; margin: 8px 0; padding: 0; }
.ds li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--vien); font-size: 15px; }
.ds li:first-child { border-top: 0; }
.ds .so { color: var(--phu); font-size: 13px; white-space: nowrap; }
.ds .ten { flex: 1; min-width: 0; }

.them { margin-top: 6px; }
.tim-wrap { position: relative; }
.o-tim { width: 100%; }
.goi-y-tim {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 3; list-style: none; margin: 4px 0 0; padding: 4px;
  background: var(--the); border: 1px solid var(--vien); border-radius: 10px; max-height: 260px; overflow: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.goi-y-tim li { padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.goi-y-tim li:hover, .goi-y-tim li.dang { background: var(--xam-nen); }
.goi-y-tim .so { color: var(--phu); font-size: 12px; display: block; }
.chon-mon { margin-top: 8px; }
.mon-chon { margin: 0 0 6px; font-weight: 600; }
.phan { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.phan button { background: var(--xam-nen); color: var(--chu); padding: 6px 10px; font-size: 14px; }
.o-gam { width: 90px; flex: 0 0 90px !important; }
.xem-truoc { font-size: 13px; color: var(--phu); flex: 1 !important; }

.bang-tuan .ngay { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--vien); }
.bang-tuan .ngay:first-child { border-top: 0; }
.bang-tuan .thu { width: 64px; font-size: 14px; flex: 0 0 64px; }
.bang-tuan .thu small { display: block; color: var(--phu); }
.bang-tuan .o-bua { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 13px; padding: 6px 8px; border-radius: 8px; cursor: pointer; border: 0; text-align: left; }
.chip b { display: block; font-size: 12px; }
.chip.dat { background: var(--dat-nen); color: var(--dat); }
.chip.gan { background: var(--gan-nen); color: var(--gan); }
.chip.thieu, .chip.bo_trong { background: var(--thieu-nen); color: var(--thieu); }
.chip.chua_den, .chip.khong_co_moc, .chip.tuong_lai { background: var(--xam-nen); color: var(--phu); }
.so-lon { font-size: 28px; font-weight: 700; }

#form-dich { align-items: flex-end; }
#form-dich label { margin-bottom: 0; }
.bang-moc { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.bang-moc td { padding: 6px 4px; border-top: 1px solid var(--vien); }
.bang-moc td:last-child { text-align: right; }
.bang-moc tr.qua td { color: var(--phu); }
.bang-moc tr.ke td { font-weight: 700; color: var(--chinh); }