/* =========================================================================
   admin.css — MAN HINH QUAN TRI (admin.html) + TRANG HO SO (account.html)
   Bo the so lieu, bang danh sach, o keo tha tep, hop thoai sua.
   ========================================================================= */

.page { padding: clamp(24px, 4vw, 44px) 0 80px; }
.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.page__head h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.page__head p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* ── The so lieu ────────────────────────────────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.kpi { padding: 18px 20px; }
.kpi__k {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.kpi__v {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.kpi__v small { font-size: .8rem; color: var(--text-faint); font-weight: 600; }

/* ── Thanh tab cua trang quan tri ───────────────────────── */
.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
  border-bottom: var(--hair) solid var(--border);
}
.subtab {
  padding: 10px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.subtab:hover { color: var(--text); }
.subtab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Bang ──────────────────────────────────────────────────
   Boc trong .tablewrap de bang rong hon man hinh thi cuon NGANG trong khung,
   khong day ca trang bi cuon ngang. */
.tablewrap {
  border: var(--hair) solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
  background: var(--card);
}
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
.tbl th, .tbl td { padding: 12px 14px; text-align: left; border-bottom: var(--hair) solid var(--border); vertical-align: middle; }
.tbl th {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tbl tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-family: var(--font-mono); text-align: right; }
.tbl .acts { display: flex; gap: 6px; justify-content: flex-end; }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

/* ── O keo tha tep ──────────────────────────────────────── */
.drop {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 26px 18px;
  text-align: center;
  border: 2px dashed var(--border-strong);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.drop:hover { border-color: var(--accent); }
/* .is-over do js/admin.js gan khi dang keo tep ngang qua. */
.drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop svg { color: var(--accent); }
.drop b { color: var(--text); }
.drop input[type="file"] { display: none; }

/* Anh xem truoc sau khi chon tep. */
.preview {
  position: relative;
  margin-top: 12px;
  border: var(--hair) solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-3);
}
.preview img, .preview video { width: 100%; display: block; max-height: 260px; object-fit: cover; background: #000; }
.preview__x {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 4px;
  background: rgba(20, 26, 34, .78);
  color: var(--accent-fg);
  cursor: pointer;
}
.preview__x:hover { background: var(--danger); }

/* ── Hop thoai sua ban phat hanh ────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 40px);
  background: var(--overlay);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__box {
  width: min(680px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--card);
  border: var(--hair) solid var(--border);
  border-radius: 8px;
  box-shadow: var(--sh-xl);
  transform: translateY(14px) scale(.97);
  transition: transform .35s var(--ease-spring);
}
.modal.is-open .modal__box { transform: none; }

.modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: var(--hair) solid var(--border);
  background: var(--card);
  z-index: 1;
}
.modal__head h2 { margin: 0; font-size: 1.1rem; }
.modal__body { padding: 20px; }
.modal__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: var(--hair) solid var(--border);
  background: var(--card);
}

/* Hai o nhap dung hang tren man hinh rong. */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

/* ── Ho so tai khoan ────────────────────────────────────── */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 860px) { .profile { grid-template-columns: 1fr; } }

.idcard {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: var(--hair) solid var(--border);
}
.idcard__name { font-weight: 750; font-size: 1.05rem; }
.idcard__mail { font-size: var(--fs-sm); color: var(--text-muted); }

/* ══ BAN QUYEN CUA TOI ═════════════════════════════════════════════════
   The ban quyen: ma to o giua, trang thai o goc, danh sach may ben duoi.
   Ma ban quyen la thu nguoi dung vao day de LAY -> cho no noi bat nhat. */
.lic { display: grid; gap: 16px; margin-bottom: var(--gap); }

.lic__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.lic__plan { font-weight: 750; font-size: 1.05rem; }
.lic__top .badge { margin-left: auto; }

/* O ma ban quyen + nut sao chep */
.lic__key {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: var(--hair) solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface-2);
}
.lic__key code {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text);
  word-break: break-all;
}
/* An bot ma khi chua bam "Hiện" — de con chup man hinh gui di ma khong lo. */
.lic__key.is-masked code { letter-spacing: .18em; }

.lic__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.lic__meta div { font-size: var(--fs-sm); }
.lic__meta dt {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.lic__meta dd { margin: 0; font-weight: 650; }

/* Thanh cho biet dung het bao nhieu may / con bao nhieu ngay */
.bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--accent-solid);
  border-radius: 3px;
  transition: width var(--dur-slow) var(--ease-out);
}
.bar--warn i { background: var(--warn); }
.bar--danger i { background: var(--danger); }

/* Danh sach may da kich hoat */
.machines { display: grid; gap: 8px; }
.machine {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: var(--hair) solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.machine__ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
}
.machine__n { font-weight: 650; }
.machine__s { font-size: var(--fs-xs); color: var(--text-faint); font-family: var(--font-mono); }