/*
 * Giao diện dashboard quảng cáo.
 *
 * Nguyên tắc: đây là công cụ người ta mở 8 tiếng mỗi ngày để nhìn số. Nên chữ số
 * phải sắc, khoảng thở phải rộng, màu phải tiết chế — màu chỉ dùng khi nó MANG
 * NGHĨA (tốt/xấu/cảnh báo), không dùng để trang trí. Nền tối tự bật theo máy.
 */

:root {
  color-scheme: light dark;

  --nen: #f7f7f8;
  --mat: #ffffff;
  --mat-2: #fbfbfc;
  --vien: #e6e6ea;
  --vien-dam: #d4d4dc;

  --chu: #16161a;
  --chu-2: #5c5c68;
  --chu-mo: #8e8e9c;

  --chinh: #4f46e5;
  --chinh-nen: #eef2ff;
  --chinh-dam: #4338ca;

  --tot: #0f7b52;
  --tot-nen: #e8f6ef;
  --xau: #c0392f;
  --xau-nen: #fdeeec;
  --luu-y: #a05e03;
  --luu-y-nen: #fdf3e3;

  --r: 10px;
  --r-lon: 14px;
  --bong: 0 1px 2px rgba(16, 16, 26, .04), 0 4px 12px rgba(16, 16, 26, .04);
  --nhanh: 120ms cubic-bezier(.4, 0, .2, 1);

  --so: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nen: #0e0e11;
    --mat: #17171c;
    --mat-2: #1c1c22;
    --vien: #2a2a33;
    --vien-dam: #3a3a46;

    --chu: #f0f0f4;
    --chu-2: #a3a3b2;
    --chu-mo: #6e6e80;

    --chinh: #818cf8;
    --chinh-nen: #1e1b3a;
    --chinh-dam: #a5b4fc;

    --tot: #4ade80;
    --tot-nen: #0d2a1c;
    --xau: #f87171;
    --xau-nen: #2d1414;
    --luu-y: #fbbf24;
    --luu-y-nen: #2b1f08;

    --bong: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--chu);
  background: var(--nen);
  -webkit-font-smoothing: antialiased;
}

.an { display: none !important; }
.phu { color: var(--chu-2); }
.nho { font-size: 12px; }
.day { flex: 1; }

/* ── Đăng nhập ───────────────────────────────────────────── */

.man-dang-nhap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--chinh-nen), transparent 70%),
    var(--nen);
}

.the-dang-nhap {
  width: 100%;
  max-width: 360px;
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--r-lon);
  padding: 32px 28px;
  box-shadow: var(--bong);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.the-dang-nhap h1 { font-size: 20px; font-weight: 620; letter-spacing: -.02em; }
.the-dang-nhap > .phu { margin-top: -12px; margin-bottom: 6px; font-size: 13px; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 550;
  color: var(--chu-2);
}

input, select {
  font: inherit;
  color: var(--chu);
  background: var(--mat-2);
  border: 1px solid var(--vien-dam);
  border-radius: var(--r);
  padding: 9px 11px;
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--chinh);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chinh) 18%, transparent);
}

button {
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 9px 14px;
  background: var(--chinh);
  color: #fff;
  transition: background var(--nhanh), transform var(--nhanh);
}

button:hover { background: var(--chinh-dam); }
button:active { transform: translateY(1px); }

button.phang {
  background: transparent;
  color: var(--chu-2);
  border-color: var(--vien-dam);
}
button.phang:hover { background: var(--mat-2); color: var(--chu); }

.loi {
  background: var(--xau-nen);
  color: var(--xau);
  border-radius: var(--r);
  padding: 8px 11px;
  font-size: 13px;
}

/* ── Khung ứng dụng ──────────────────────────────────────── */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--mat) 85%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--vien);
}

header .trai, header .phai { display: flex; align-items: center; gap: 10px; }
header .phai { margin-left: auto; }
/* Tiêu đề co lại thay vì tràn. Trước đây nó nowrap + không cho co, nên khi
   header chật thì chữ tràn ra và ĐÈ LÊN ngày tháng bên phải. */
header strong {
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
header .trai { min-width: 0; flex: 1 1 auto; overflow: hidden; }
header .phai { flex: 0 1 auto; min-width: 0; }
#tuoi-du-lieu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#canh-bao-dong-bo { overflow: hidden; text-overflow: ellipsis; }
#nut-dang-xuat { white-space: nowrap; padding: 6px 11px; font-size: 12.5px; flex-shrink: 0; }

/* Header chật thì giấu bớt thứ phụ, giữ lại tên người và nút đăng xuất. */
@media (max-width: 900px) {
  #tuoi-du-lieu { display: none; }
}

.chip {
  font-size: 11px;
  font-weight: 550;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--mat-2);
  border: 1px solid var(--vien);
  color: var(--chu-2);
  white-space: nowrap;
}

.chip.pixel { background: var(--luu-y-nen); color: var(--luu-y); border-color: transparent; cursor: help; }
.chip.canh-bao { background: var(--xau-nen); color: var(--xau); border-color: transparent; }

/* ── Thanh lọc ───────────────────────────────────────────── */

.thanh-loc {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--vien);
  background: var(--mat);
}

.nhan { font-size: 12px; color: var(--chu-mo); font-weight: 550; }

.nhom-nut { display: flex; gap: 4px; flex-wrap: wrap; }

.nhom-nut button {
  background: transparent;
  color: var(--chu-2);
  border-color: transparent;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 100px;
}
.nhom-nut button:hover { background: var(--mat-2); color: var(--chu); }
.nhom-nut button.chon { background: var(--chinh); color: #fff; }

/* ── Thẻ chỉ số ──────────────────────────────────────────── */

.luoi-the {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 18px 20px 12px;
}

.the {
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--r-lon);
  padding: 13px 15px;
  box-shadow: var(--bong);
}

.the .ten { font-size: 11.5px; color: var(--chu-mo); font-weight: 550; letter-spacing: .01em; }

.the .so {
  font-family: var(--so);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  /* Số phải nằm trọn một dòng. "166,4 tr đ" xuống dòng làm thẻ cao lệch nhau,
     nhìn như hàng thẻ bị vỡ. Hẹp quá thì thu chữ, không bao giờ ngắt dòng. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1100px) { .the .so { font-size: 18px; } }

.the .doi { font-size: 11.5px; font-weight: 550; margin-top: 3px; display: flex; align-items: center; gap: 3px; }
.doi.tot { color: var(--tot); }
.doi.xau { color: var(--xau); }
.doi.trung { color: var(--chu-mo); }

/* ── Cảnh báo lỗi đặt tên ────────────────────────────────── */

.bao-loi {
  margin: 0 20px 12px;
  padding: 11px 14px;
  border-radius: var(--r);
  background: var(--xau-nen);
  border: 1px solid color-mix(in srgb, var(--xau) 22%, transparent);
  color: var(--xau);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.bao-loi b { font-weight: 620; }
.bao-loi a { color: inherit; margin-left: auto; font-weight: 550; }

/* ── Khối bảng ───────────────────────────────────────────── */

.khoi {
  margin: 0 20px 24px;
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--r-lon);
  box-shadow: var(--bong);
  overflow: hidden;
}

.dau-khoi {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--vien);
  flex-wrap: wrap;
}

.dau-khoi select { padding: 5px 9px; font-size: 12.5px; border-radius: 100px; }

.duong-dan { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.duong-dan .buoc {
  font-size: 12px;
  font-weight: 550;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--chinh-nen);
  color: var(--chinh-dam);
  border: none;
  cursor: pointer;
}
.duong-dan .buoc:hover { filter: brightness(.96); }
.duong-dan .mui { color: var(--chu-mo); font-size: 11px; }

.cuon-ngang { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  position: sticky;
  top: 0;
  background: var(--mat-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--chu-mo);
  text-align: right;
  padding: 8px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--vien);
  cursor: pointer;
  user-select: none;
}
thead th:first-child { text-align: left; padding-left: 15px; min-width: 240px; }
thead th:hover { color: var(--chu); }
thead th.dang-sap { color: var(--chinh); }

tbody td {
  padding: 9px 10px;
  text-align: right;
  border-bottom: 1px solid var(--vien);
  font-family: var(--so);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
tbody td:first-child {
  text-align: left;
  padding-left: 15px;
  font-family: inherit;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Cột tên dính bên trái khi cuốn ngang: bảng có 11 cột chỉ số, cuốn sang phải
     mà mất tên dòng thì không còn biết đang đọc số của ai. */
  position: sticky;
  left: 0;
  background: var(--mat);
  z-index: 1;
}

thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--mat-2); }
tbody tr.chua-ro td:first-child { background: var(--mat-2); }
tbody tr.dao-duoc:hover td:first-child { background: var(--chinh-nen); }

tbody tr { transition: background var(--nhanh); }
tbody tr.dao-duoc { cursor: pointer; }
tbody tr.dao-duoc:hover { background: var(--chinh-nen); }
tbody tr.chua-ro td { color: var(--chu-mo); background: var(--mat-2); }
tbody tr.tong td { font-weight: 650; background: var(--mat-2); border-top: 2px solid var(--vien-dam); }

.ten-dong { display: flex; align-items: center; gap: 7px; }
.ten-dong .mui-dao { color: var(--chu-mo); font-size: 10px; flex-shrink: 0; }
tbody tr.dao-duoc:hover .mui-dao { color: var(--chinh); }

.thanh {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--chinh);
  opacity: .28;
  margin-top: 4px;
}

.nhan-phu { font-size: 11px; color: var(--chu-mo); font-weight: 400; }

.diem {
  display: inline-block;
  min-width: 40px;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--so);
}
.diem.tot { background: var(--tot-nen); color: var(--tot); }
.diem.vua { background: var(--luu-y-nen); color: var(--luu-y); }
.diem.kem { background: var(--xau-nen); color: var(--xau); }

.mui-doi { font-size: 10px; font-weight: 600; margin-left: 5px; font-family: var(--so); }
.mui-doi.tot { color: var(--tot); }
.mui-doi.xau { color: var(--xau); }
.mui-doi.trung { color: var(--chu-mo); }

@media (max-width: 640px) {
  .luoi-the { grid-template-columns: repeat(2, 1fr); padding: 12px; }
  .khoi, .bao-loi { margin-left: 12px; margin-right: 12px; }
  header, .thanh-loc { padding-left: 12px; padding-right: 12px; }
}

/* ── Hộp chi tiết lỗi đặt tên ────────────────────────────── */

.hop {
  /* margin:auto là thứ trình duyệt dùng để căn giữa <dialog>. Dòng reset
     `* { margin: 0 }` ở đầu tệp xoá mất nó, làm hộp dính góc trên-trái. */
  margin: auto;
  width: min(760px, 92vw);
  max-height: 85vh;
  border: 1px solid var(--vien);
  border-radius: var(--r-lon);
  background: var(--mat);
  color: var(--chu);
  padding: 0;
  box-shadow: 0 12px 40px rgba(16, 16, 26, .18);
}
.hop::backdrop { background: rgba(16, 16, 26, .45); backdrop-filter: blur(2px); }

.dau-hop {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--vien);
  position: sticky;
  top: 0;
  background: var(--mat);
  z-index: 1;
}
.dau-hop strong { font-size: 15px; font-weight: 620; }
.dau-hop button { margin-left: auto; }

.giai-thich {
  margin: 0;
  padding: 11px 18px;
  background: var(--mat-2);
  border-bottom: 1px solid var(--vien);
  line-height: 1.5;
}
.giai-thich b { color: var(--chu); font-weight: 600; }

.than-hop { overflow-y: auto; max-height: calc(85vh - 150px); padding: 6px 0; }

.mot-loi { padding: 13px 18px; border-bottom: 1px solid var(--vien); }
.mot-loi:last-child { border-bottom: none; }

.mot-loi .hang-1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.the-muc {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 100px;
  flex-shrink: 0;
}
.the-muc.muc-2 { background: var(--luu-y-nen); color: var(--luu-y); }
.the-muc.muc-3 { background: var(--xau-nen); color: var(--xau); }

.ten-qc {
  font-family: var(--so);
  font-size: 12px;
  background: var(--mat-2);
  border: 1px solid var(--vien);
  border-radius: 6px;
  padding: 2px 6px;
  overflow-wrap: anywhere;
}

.mot-loi .cp { margin-left: auto; font-family: var(--so); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.mot-loi .hang-2 { font-size: 12px; color: var(--chu-2); margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; }
.mot-loi .cham { color: var(--chu-mo); }
.mot-loi .chu-qc { font-family: var(--so); font-weight: 600; color: var(--chu); }
.mot-loi .khong-chu { color: var(--xau); font-weight: 550; }

.ly-do { margin: 8px 0 0; padding-left: 17px; font-size: 12.5px; color: var(--chu-2); }
.ly-do li { margin: 2px 0; }
.ly-do li.nhe { color: var(--chu-mo); }

.nut-sua {
  display: inline-block;
  margin-top: 9px;
  font-size: 12px;
  font-weight: 550;
  color: var(--chinh-dam);
  text-decoration: none;
  background: var(--chinh-nen);
  padding: 5px 10px;
  border-radius: var(--r);
}
.nut-sua:hover { filter: brightness(.96); }

.bao-loi a { cursor: pointer; text-decoration: underline; }

.khoi-loi { border-bottom: 1px solid var(--vien-dam); }
.khoi-loi:last-child { border-bottom: none; }
.khoi-loi h3 { font-size: 13px; font-weight: 620; padding: 13px 18px 0; }
.khoi-loi .viec {
  font-size: 12px;
  color: var(--chu-2);
  padding: 5px 18px 10px;
  line-height: 1.55;
}
.khoi-loi .viec b { color: var(--chu); font-weight: 600; }
.khoi-loi .viec code {
  font-family: var(--so);
  font-size: 11px;
  background: var(--mat-2);
  border: 1px solid var(--vien);
  border-radius: 5px;
  padding: 1px 5px;
}
.the-muc.muc-ma { background: var(--luu-y-nen); color: var(--luu-y); }
.the-muc.muc-ten { background: var(--xau-nen); color: var(--xau); }

/* ── Quản lý nhân sự + đổi mật khẩu ──────────────────────── */

.hop-hep { width: min(400px, 92vw); }

.than-form { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.than-form label { gap: 6px; }
.than-form button[type=submit] { margin-top: 4px; }

.thong-bao { font-size: 12.5px; padding: 7px 10px; border-radius: var(--r); margin: 0; }
.thong-bao.ok-nho { background: var(--tot-nen); color: var(--tot); }
.thong-bao.loi-nho { background: var(--xau-nen); color: var(--xau); }

.form-them { padding: 12px 18px; border-bottom: 1px solid var(--vien); }
.hang-them { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hang-them input, .hang-them select { flex: 1; min-width: 120px; padding: 7px 9px; font-size: 13px; }
.hang-them button { flex-shrink: 0; }
.form-them .thong-bao { margin-top: 8px; }

.bang-ns { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.bang-ns th:nth-child(1), .bang-ns td:nth-child(1) { width: 92px; }
.bang-ns th:nth-child(3), .bang-ns td:nth-child(3) { width: 96px; }
.bang-ns th:nth-child(4), .bang-ns td:nth-child(4) { width: 116px; }
.bang-ns th:nth-child(5), .bang-ns td:nth-child(5) { width: 150px; }
.bang-ns td { overflow: hidden; text-overflow: ellipsis; }
.bang-ns th { text-align: left; padding: 8px 10px; font-size: 11px; color: var(--chu-mo); font-weight: 600; border-bottom: 1px solid var(--vien); }
.bang-ns td { padding: 9px 10px; border-bottom: 1px solid var(--vien); vertical-align: middle; }
.bang-ns tr.ns-ngung td { color: var(--chu-mo); background: var(--mat-2); }

.ns-on { color: var(--tot); font-weight: 550; }
.ns-off { color: var(--chu-mo); font-weight: 550; }
.ns-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 100px; background: var(--chinh-nen); color: var(--chinh-dam); font-weight: 550; }
.ns-nut { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
button.nho { padding: 3px 8px; font-size: 11.5px; white-space: nowrap; }