/* Bảng màu chính thức Nova Automation (chốt 27/08/2026) — xem ../Dich vụ/CLAUDE.md */
:root {
  --nen: #fdf6fa;
  --nen-phu: #fbe7f1;
  --nhan: #e11d8f;
  --nhan-dam: #cb137e;
  --chu: #1f1420;
  --chu-mo: #6b5a66;
  --vien: #f0d7e6;
  --trang: #ffffff;
  --xanh: #0f8a5f;
  --do: #c62828;
  --vang: #b26a00;
  --grad: linear-gradient(135deg, #f342ab, #cb137e);
  --bong: 0 1px 2px rgba(31, 20, 32, 0.06), 0 8px 24px rgba(31, 20, 32, 0.06);
  --bo: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--nhan-dam); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 34px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0 0 12px; }

.khung { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.hep { max-width: 720px; }

/* ── Thanh điều hướng ─────────────────────────────────────────────────────── */
.thanh-dau {
  background: var(--trang);
  border-bottom: 1px solid var(--vien);
  position: sticky;
  top: 0;
  z-index: 20;
}
.thanh-dau .khung {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; text-decoration: none; color: var(--chu); }
.logo svg { width: 26px; height: 26px; }
.thanh-dau nav { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.thanh-dau nav a { text-decoration: none; color: var(--chu-mo); padding: 8px 10px; border-radius: 8px; font-weight: 500; }
.thanh-dau nav a:hover { background: var(--nen-phu); color: var(--chu); }

/* ── Nút ──────────────────────────────────────────────────────────────────── */
.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  background: var(--grad);
  color: #fff;
  transition: filter .15s ease, transform .05s ease;
}
.nut:hover { filter: brightness(1.06); }
.nut:active { transform: translateY(1px); }
.nut:disabled { opacity: .5; cursor: not-allowed; }
.nut.phu { background: var(--trang); color: var(--nhan-dam); border: 1px solid var(--vien); }
.nut.nhat { background: var(--nen-phu); color: var(--chu); }
.nut.nho { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.nut.nguy { background: var(--trang); color: var(--do); border: 1px solid #f0c9c9; }

/* ── Thẻ ──────────────────────────────────────────────────────────────────── */
.the {
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  padding: 20px;
  box-shadow: var(--bong);
}
.luoi { display: grid; gap: 16px; }
.luoi.c2 { grid-template-columns: repeat(2, 1fr); }
.luoi.c3 { grid-template-columns: repeat(3, 1fr); }
.luoi.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .luoi.c2, .luoi.c3, .luoi.c4 { grid-template-columns: 1fr; } }

/* ── Biểu mẫu ─────────────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 14px; }
label .goi-y { display: block; font-weight: 400; color: var(--chu-mo); font-size: 13px; margin-top: 2px; }
input, textarea, select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--vien);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  background: var(--trang);
  color: var(--chu);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--nhan); outline-offset: -1px; }
textarea { min-height: 96px; resize: vertical; }

/* ── Nhãn trạng thái ──────────────────────────────────────────────────────── */
.nhan-tt { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.tt-xanh { background: #e4f5ec; color: var(--xanh); }
.tt-do { background: #fdeaea; color: var(--do); }
.tt-vang { background: #fdf1e0; color: var(--vang); }
.tt-xam { background: #f1eef0; color: var(--chu-mo); }

.mo { color: var(--chu-mo); }
.nho { font-size: 13px; }
.giua { text-align: center; }
.hang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hang.phai { justify-content: flex-end; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--vien); vertical-align: top; }
th { font-size: 13px; color: var(--chu-mo); font-weight: 600; }

.bao {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  border: 1px solid var(--vien);
  background: var(--nen-phu);
}
.bao.loi { background: #fdeaea; border-color: #f5cccc; color: #8c1c1c; }
.bao.ok { background: #e4f5ec; border-color: #bfe6d2; color: #14603f; }
.bao.canh { background: #fdf1e0; border-color: #f2ddba; color: #7a4a00; }