/* Màu chủ đạo: trắng - xám ghi - xanh dương đậm, điểm nhấn vàng đồng */
:root {
  --nen: #f4f5f7;
  --the: #ffffff;
  --chu: #1f2933;
  --chu-phu: #5f6b7a;
  --vien: #d5d9e0;
  --chinh: #1b3a6b;
  --chinh-dam: #122a4f;
  --nhan: #b08d3c;
  --loi: #9b2c2c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--chinh); }
.dau-trang {
  background: var(--chinh);
  color: #fff;
  border-bottom: 3px solid var(--nhan);
}
.dau-trang .khung { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dau-trang a { color: #fff; text-decoration: none; }
.ten-app { font-weight: 600; font-size: 17px; }
.khung { max-width: 960px; margin: 0 auto; padding: 12px 16px; }
.nguoi-dung { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.nguoi-dung form { margin: 0; }
.nut {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--chinh);
  border-radius: 4px;
  background: var(--chinh);
  color: #fff;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.nut:hover { background: var(--chinh-dam); }
.nut-nhe { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; padding: 4px 10px; }
.nut-nhe:hover { background: rgba(255,255,255,.12); }
.the {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 6px;
  padding: 20px;
  margin: 16px 0;
}
h1 { font-size: 22px; margin: 8px 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.phu { color: var(--chu-phu); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--vien); }
th { font-weight: 600; color: var(--chu-phu); font-size: 13px; }
.nhan-dang-lam { color: var(--nhan); font-weight: 600; }
.dang-nhap { max-width: 380px; margin: 64px auto; }
.dang-nhap label { display: block; margin: 12px 0 4px; font-weight: 600; }
.dang-nhap input[type=text], .dang-nhap input[type=password] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--vien); border-radius: 4px; font: inherit;
}
.dang-nhap .nut { width: 100%; margin-top: 20px; }
.bao-loi { color: var(--loi); }

/* Bước 4: form hồ sơ, trang dự toán */
.hang-tieu-de { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nhom-nut { flex-wrap: wrap; }
.nhom-nut { display: flex; gap: 8px; }
.nhom-nut form { margin: 0; }
.nut-phu { background: var(--the); color: var(--chinh); }
.nut-phu:hover { background: #e8edf5; }
.nut-lien-ket { background: none; border: 0; padding: 0; color: var(--chinh); text-decoration: underline; cursor: pointer; font: inherit; }
.noi-dong { display: inline; margin-left: 8px; }
.tim-kiem { display: flex; gap: 8px; margin: 12px 0; }
.tim-kiem input { flex: 1; max-width: 360px; }
input[type=text], input[type=number], input[type=date], input[type=search], select, textarea {
  padding: 6px 8px; border: 1px solid var(--vien); border-radius: 4px; font: inherit; width: 100%; background: #fff;
}
input:disabled { background: var(--nen); color: var(--chu-phu); }
.luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; }
.truong label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.truong .o-chon { font-weight: 400; display: flex; align-items: center; gap: 6px; margin-top: 26px; }
.truong .o-chon input { width: auto; }
.truong small { display: block; margin-top: 2px; }
.co-loi input, .co-loi select { border-color: var(--loi); }
.an { display: none !important; }
.bang-nhap td { vertical-align: top; }
.bang-nhap input[type=checkbox] { width: auto; }
.bang-nhap tr.da-xoa { display: none; }
.bang-nhap + .nut { margin-top: 10px; }
.nut-xoa { background: none; border: 1px solid var(--vien); border-radius: 4px; color: var(--loi); cursor: pointer; padding: 5px 10px; font: inherit; }
.giua { text-align: center; }
.so { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.thanh-nut { margin: 16px 0 40px; }
.hop-loi, .hop-canh-bao, .thong-bao { border-radius: 6px; padding: 12px 16px; margin: 16px 0; }
.hop-loi { background: #fbeaea; border: 1px solid #e3b4b4; }
.hop-canh-bao { background: #fbf4e4; border: 1px solid #e2cf9c; }
.thong-bao { background: #e9f1e9; border: 1px solid #b7d1b7; }
.hop-loi ul, .hop-canh-bao ul { margin: 6px 0 0; padding-left: 20px; }
.thong-tin { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.thong-tin dt { color: var(--chu-phu); }
.thong-tin dd { margin: 0; }
.cuon-ngang { overflow-x: auto; }
.bang-du-toan { font-size: 14px; min-width: 900px; }
.dong-tong td { font-weight: 600; }
.dong-chinh td { font-weight: 700; background: #eef2f8; }
.cach-tren { margin-top: 24px; }
@media (max-width: 600px) {
  .thong-tin { grid-template-columns: 1fr; }
  .bang-nhap { display: block; overflow-x: auto; }
}