/* Giao diện chung — đơn giản, đọc tốt trên cả máy tính và điện thoại */

:root {
  --nen: #f6f5f2;
  --the: #ffffff;
  --chu: #1f2328;
  --mo: #6b7280;
  --vien: #e3e1dc;
  --chinh: #b5482d;       /* màu chủ đạo */
  --xanh: #1f7a4d;
  --do: #b42318;
  --vang-nen: #fff6e0;
  --xanh-nen: #e8f5ee;
  --do-nen: #fdecea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: 8px 0 16px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }

/* Thanh trên cùng */
.thanh-tren {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  padding: 10px 16px; background: var(--the); border-bottom: 1px solid var(--vien);
}
.logo { font-weight: 700; color: var(--chinh); text-decoration: none; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.menu a { padding: 6px 10px; border-radius: 6px; color: var(--chu); text-decoration: none; }
.menu a.dang-chon, .menu a:hover { background: var(--nen); }
.dang-xuat { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--mo); margin: 0; }
.dang-xuat button { border: 1px solid var(--vien); background: var(--the); border-radius: 6px; padding: 4px 10px; cursor: pointer; }

/* Hộp nội dung */
.hop {
  background: var(--the); border: 1px solid var(--vien); border-radius: 10px;
  padding: 16px; margin-bottom: 16px;
}
.hop.canh-bao { background: var(--vang-nen); }
.hop.thanh-cong { background: var(--xanh-nen); }
.hop.loi { background: var(--do-nen); }
.loi { color: var(--do); }
.mo { color: var(--mo); font-size: 0.92em; }

/* Bảng số liệu */
.cuon-ngang { overflow-x: auto; }
.bang { border-collapse: collapse; width: 100%; }
.bang th, .bang td { padding: 6px 8px; border-bottom: 1px solid var(--vien); text-align: left; vertical-align: top; }
.bang th { background: var(--nen); font-weight: 600; white-space: nowrap; }
.bang .so { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bang.nho { font-size: 13px; }
.bang tfoot th { border-top: 2px solid var(--chu); }

/* Form */
.form label { display: block; margin-bottom: 12px; font-weight: 500; }
.form input, .form select, select, .o-chu-dai {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
  border: 1px solid var(--vien); border-radius: 6px; font: inherit; background: #fff;
}
.form.hep { max-width: 420px; margin: 24px auto; }
.mot-dong { display: flex; gap: 8px; margin-bottom: 12px; }
.mot-dong select { margin: 0; max-width: 320px; }
.o-chu-dai { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

.nut {
  display: inline-block; padding: 9px 18px; border: 0; border-radius: 6px;
  background: var(--chinh); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.nut:hover { filter: brightness(1.08); }

.chan-trang { text-align: center; color: var(--mo); font-size: 12px; padding: 24px 16px; }