/* ═══════════════════════════════════════════════════════════
   Giám sát Team 3D — style.css
   Hướng: Phòng điều hành tối · nhấn cyan · dashboard-first
   ═══════════════════════════════════════════════════════════ */

/* ─── 19 Token chuẩn IANT ─────────────────────────────────── */
:root {
  /* Nền */
  --nen:          #0D1117;
  --mat:          #161B22;
  --mat-2:        #1C2128;

  /* Chữ */
  --chu:          #E6EDF3;
  --chu-phu:      #8B949E;

  /* Viền */
  --vien:         #30363D;

  /* Nhấn */
  --nhan:         #00C9B1;
  --tren-nhan:    #0D1117;
  --nhan-nhat:    rgba(0, 201, 177, 0.12);

  /* Trạng thái chung */
  --loi:          #F85149;
  --dat:          #3FB950;
  --canh-bao:     #E3B341;

  /* Font */
  --font-than:    'Work Sans', system-ui, sans-serif;
  --font-tieu-de: 'Barlow Condensed', system-ui, sans-serif;

  /* Hình dạng */
  --bo-nho:       6px;
  --bo-vua:       8px;
  --bo-lon:       16px;
  --bong:         0 4px 24px rgba(0, 0, 0, 0.52);
  --kc:           8px;

  /* ─── Token riêng: vòng glow trạng thái nhân vật ─────────── */
  --gl-ranh:  #3FB950;
  --gl-ban:   #F85149;
  --gl-hop:   #E3B341;
  --gl-mat:   #8B949E;
}

/* ─── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--nen);
  color: var(--chu);
  font-family: var(--font-than);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
ul, ol          { list-style: none; }

a {
  color: var(--nhan);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ─── Kiểu chữ ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-tieu-de);
  font-weight: 700;
  line-height: 1.2;
  color: var(--chu);
}

h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; font-weight: 600; }
h6 { font-size: 12px; font-weight: 600; }

.chu-nhan-manh {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-tieu-de);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--chu-phu);
}

/* ─── Bố cục khung ung dụng ───────────────────────────────── */
.khung-ung-dung {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ─── Đầu trang ───────────────────────────────────────────── */
.dau-trang {
  flex-shrink: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: calc(var(--kc) * 3);
  padding: 0 calc(var(--kc) * 3);
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vien);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-san-pham {
  font-family: var(--font-tieu-de);
  font-size: 20px;
  font-weight: 700;
  color: var(--chu);
  letter-spacing: .03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-san-pham:hover { text-decoration: none; }
.logo-san-pham span  { color: var(--nhan); }

/* Menu ngang */
.menu-chinh {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.menu-chinh a {
  font-size: 14px;
  font-weight: 600;
  color: var(--chu-phu);
  padding: calc(var(--kc) * .75) calc(var(--kc) * 1.25);
  border-radius: var(--bo-nho);
  transition: color .15s, background-color .15s;
  white-space: nowrap;
}
.menu-chinh a:hover {
  color: var(--chu);
  background: var(--mat-2);
  text-decoration: none;
}
.menu-chinh a.dang-mo {
  color: var(--nhan);
  background: var(--nhan-nhat);
}

/* Nút hamburger */
.nut-menu-dt {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--bo-nho);
  color: var(--chu-phu);
  margin-left: auto;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.nut-menu-dt:hover { background: var(--mat-2); color: var(--chu); }

/* Menu điện thoại (ẩn mặc định) */
.menu-dt {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  background: var(--mat);
  border-bottom: 1px solid var(--vien);
  padding: calc(var(--kc) * .75) 0;
  z-index: 99;
}
.menu-dt.hien { display: block; }

.menu-dt a {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--chu-phu);
  padding: calc(var(--kc) * 1.25) calc(var(--kc) * 3);
  transition: color .15s, background .15s;
}
.menu-dt a:hover,
.menu-dt a.dang-mo {
  color: var(--nhan);
  background: var(--nhan-nhat);
  text-decoration: none;
}

/* ─── Nội dung chính ──────────────────────────────────────── */
#noi-dung {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Layout dashboard: canvas 70% + panel 30% */
.bo-cuc-dashboard {
  display: grid;
  grid-template-columns: 70fr 30fr;
  flex: 1;
  overflow: hidden;
}

.vung-canvas {
  position: relative;
  overflow: hidden;
  background: var(--nen);
}

.panel-ben-phai {
  background: var(--mat);
  border-left: 1px solid var(--vien);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Cuộn tùy chỉnh cho panel */
.panel-ben-phai::-webkit-scrollbar { width: 6px; }
.panel-ben-phai::-webkit-scrollbar-track { background: transparent; }
.panel-ben-phai::-webkit-scrollbar-thumb {
  background: var(--vien);
  border-radius: 3px;
}

/* ─── Chân trang ──────────────────────────────────────────── */
.chan-trang {
  flex-shrink: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--kc) * 3);
  border-top: 1px solid var(--vien);
  background: var(--nen);
}
.chan-trang p { font-size: 12px; color: var(--chu-phu); }

/* ─── Nút ─────────────────────────────────────────────────── */
.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--kc) * .75);
  padding: calc(var(--kc) * .875) calc(var(--kc) * 2);
  font-family: var(--font-than);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--bo-nho);
  border: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s, opacity .15s;
  text-decoration: none;
}
.nut:hover { text-decoration: none; }

/* Nút chính — nhấn cyan */
.nut-chinh {
  background: var(--nhan);
  color: var(--tren-nhan);
}
.nut-chinh:hover {
  background: #00b09b;
  box-shadow: 0 0 0 3px var(--nhan-nhat);
}

/* Nút phụ */
.nut-phu {
  background: var(--mat-2);
  color: var(--chu);
  border: 1px solid var(--vien);
}
.nut-phu:hover { background: var(--vien); }

/* Nút mờ / ghost */
.nut-ma {
  background: transparent;
  color: var(--chu-phu);
  border: 1px solid var(--vien);
}
.nut-ma:hover { background: var(--mat-2); color: var(--chu); }

/* Nút nguy hiểm */
.nut-nguy {
  background: rgba(248, 81, 73, .12);
  color: var(--loi);
  border: 1px solid rgba(248, 81, 73, .3);
}
.nut-nguy:hover { background: rgba(248, 81, 73, .22); }

/* Kích thước */
.nut-nho {
  padding: calc(var(--kc) * .5) var(--kc);
  font-size: 12px;
}
.nut-lon {
  padding: var(--kc) calc(var(--kc) * 3);
  font-size: 16px;
}
.nut-day {
  width: 100%;
  justify-content: center;
}

.nut:disabled,
.nut[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Thẻ / Khối nội dung ────────────────────────────────── */
.the {
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
  padding: calc(var(--kc) * 2);
}

.the-nhat {
  background: var(--mat-2);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
  padding: calc(var(--kc) * 2);
}

.tieu-de-the {
  font-family: var(--font-tieu-de);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: calc(var(--kc) * 2);
  padding-bottom: var(--kc);
  border-bottom: 1px solid var(--vien);
}

/* ─── Overlay / Cửa sổ nhỏ ──────────────────────────────── */
.nen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .68);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kc);
}

.cua-so-nho {
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
  padding: calc(var(--kc) * 3);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--bong);
  position: relative;
  max-height: calc(100vh - calc(var(--kc) * 4));
  overflow-y: auto;
}

.cua-so-nho .tieu-de {
  font-family: var(--font-tieu-de);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: calc(var(--kc) * 2);
  padding-right: calc(var(--kc) * 4);
}

.nut-dong {
  position: absolute;
  top: calc(var(--kc) * 1.5);
  right: calc(var(--kc) * 1.5);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bo-nho);
  color: var(--chu-phu);
  cursor: pointer;
  transition: background .15s, color .15s;
  border: none;
  background: none;
}
.nut-dong:hover { background: var(--mat-2); color: var(--chu); }

/* ─── Form ────────────────────────────────────────────────── */
.nhom-truong {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kc) * .75);
  margin-bottom: calc(var(--kc) * 2);
}

.nhan-truong {
  font-size: 12px;
  font-weight: 600;
  color: var(--chu-phu);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.o-nhap {
  background: var(--nen);
  border: 1px solid var(--vien);
  border-radius: var(--bo-nho);
  color: var(--chu);
  font-family: var(--font-than);
  font-size: 14px;
  padding: calc(var(--kc) * 1.125) calc(var(--kc) * 1.5);
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.o-nhap::placeholder { color: var(--chu-phu); opacity: .7; }
.o-nhap:focus {
  border-color: var(--nhan);
  box-shadow: 0 0 0 3px var(--nhan-nhat);
}
.o-nhap.loi        { border-color: var(--loi); }
.o-nhap.loi:focus  { box-shadow: 0 0 0 3px rgba(248,81,73,.14); }

.o-chon {
  background: var(--nen);
  border: 1px solid var(--vien);
  border-radius: var(--bo-nho);
  color: var(--chu);
  font-family: var(--font-than);
  font-size: 14px;
  padding: calc(var(--kc) * 1.125) calc(var(--kc) * 4) calc(var(--kc) * 1.125) calc(var(--kc) * 1.5);
  width: 100%;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B949E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.o-chon:focus {
  border-color: var(--nhan);
  box-shadow: 0 0 0 3px var(--nhan-nhat);
}

/* Checkbox */
.nhom-chon {
  display: flex;
  align-items: center;
  gap: var(--kc);
  cursor: pointer;
}
.nhom-chon input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  appearance: none;
  background: var(--nen);
  border: 1.5px solid var(--vien);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: background .15s, border-color .15s;
}
.nhom-chon input[type="checkbox"]:checked {
  background: var(--nhan);
  border-color: var(--nhan);
}
.nhom-chon input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 2px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--tren-nhan);
  border-bottom: 2px solid var(--tren-nhan);
  transform: rotate(-45deg);
}
.nhom-chon input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nhan-nhat);
}
.nhan-chon { font-size: 14px; }

.chu-thich-truong {
  font-size: 12px;
  color: var(--chu-phu);
}
.dem-ky-tu {
  font-size: 12px;
  color: var(--chu-phu);
  text-align: right;
}

/* Hàng nút form */
.hang-nut {
  display: flex;
  gap: var(--kc);
  justify-content: flex-end;
  margin-top: calc(var(--kc) * 3);
}

/* ─── Bảng dữ liệu ────────────────────────────────────────── */
.bang-du-lieu {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.bang-du-lieu th {
  background: var(--mat-2);
  color: var(--chu-phu);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: calc(var(--kc) * 1.25) calc(var(--kc) * 2);
  text-align: left;
  border-bottom: 1px solid var(--vien);
  white-space: nowrap;
}

.bang-du-lieu td {
  padding: calc(var(--kc) * 1.5) calc(var(--kc) * 2);
  border-bottom: 1px solid var(--vien);
  color: var(--chu);
  vertical-align: middle;
}

.bang-du-lieu tbody tr:last-child td { border-bottom: none; }
.bang-du-lieu tbody tr:hover td      { background: rgba(255,255,255,.025); }
.bang-du-lieu tbody tr.duoc-chon td  { background: var(--nhan-nhat); }

/* ─── Nhãn (badge) ───────────────────────────────────────── */
.nhan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}

.nhan-mac-dinh     { background: var(--mat-2);                color: var(--chu-phu); border: 1px solid var(--vien); }
.nhan-nhan-manh    { background: var(--nhan-nhat);            color: var(--nhan);    border: 1px solid rgba(0,201,177,.3); }
.nhan-loi          { background: rgba(248,81,73,.12);         color: var(--loi);     border: 1px solid rgba(248,81,73,.3); }
.nhan-thanh-cong   { background: rgba(63,185,80,.1);          color: var(--dat);     border: 1px solid rgba(63,185,80,.3); }
.nhan-canh-bao     { background: rgba(227,179,65,.1);         color: var(--canh-bao);border: 1px solid rgba(227,179,65,.3); }

/* ─── Toast thông báo ────────────────────────────────────── */
.vung-toast {
  position: fixed;
  top: calc(56px + calc(var(--kc) * 1.5));
  right: calc(var(--kc) * 2);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--kc);
  max-width: 360px;
  pointer-events: none;
}

.toast {
  background: var(--mat);
  border: 1px solid var(--vien);
  border-left-width: 3px;
  border-radius: var(--bo-vua);
  padding: var(--kc) calc(var(--kc) * 2);
  font-size: 13px;
  box-shadow: var(--bong);
  pointer-events: auto;
  animation: toast-truot-vao .2s ease forwards;
}

.toast-thanh-cong { border-left-color: var(--dat); }
.toast-loi        { border-left-color: var(--loi); }
.toast-canh-bao   { border-left-color: var(--canh-bao); }
.toast-thong-tin  { border-left-color: var(--nhan); }

.toast-tieu-de { font-weight: 600; color: var(--chu);     margin-bottom: 2px; }
.toast-mo-ta   { color: var(--chu-phu); line-height: 1.45; }

@keyframes toast-truot-vao {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── Trạng thái rỗng ────────────────────────────────────── */
.trang-thai-rong {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--kc) * 8) calc(var(--kc) * 4);
  gap: calc(var(--kc) * 2);
  color: var(--chu-phu);
}
.trang-thai-rong .bieu-tuong { opacity: .35; margin-bottom: calc(var(--kc) * .5); }
.trang-thai-rong .chu-thich  { font-size: 15px; max-width: 280px; line-height: 1.55; }

/* ─── Trạng thái lỗi ─────────────────────────────────────── */
.khoi-loi {
  display: flex;
  align-items: flex-start;
  gap: var(--kc);
  background: rgba(248, 81, 73, .1);
  border: 1px solid rgba(248, 81, 73, .28);
  border-radius: var(--bo-vua);
  padding: var(--kc) calc(var(--kc) * 1.5);
  font-size: 14px;
  color: var(--loi);
  line-height: 1.5;
}

/* ─── Trạng thái đang tải ────────────────────────────────── */
.dang-tai {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kc);
  padding: calc(var(--kc) * 4) calc(var(--kc) * 2);
  color: var(--chu-phu);
  font-size: 14px;
}

.vong-quay {
  width: 20px;
  height: 20px;
  border: 2px solid var(--vien);
  border-top-color: var(--nhan);
  border-radius: 50%;
  animation: quay .65s linear infinite;
  flex-shrink: 0;
}

@keyframes quay {
  to { transform: rotate(360deg); }
}

/* ─── Bộ lọc / Tab ────────────────────────────────────────── */
.bo-loc {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.nut-loc {
  padding: calc(var(--kc) * .625) var(--kc);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-than);
  color: var(--chu-phu);
  border-radius: var(--bo-nho);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  white-space: nowrap;
}
.nut-loc:hover { color: var(--chu); background: var(--mat-2); border-color: var(--vien); }
.nut-loc.dang-chon {
  color: var(--nhan);
  background: var(--nhan-nhat);
  border-color: rgba(0, 201, 177, .3);
}

/* ─── Hộp xác nhận ───────────────────────────────────────── */
.hop-xac-nhan .tieu-de-hop {
  font-family: var(--font-tieu-de);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--kc);
}
.hop-xac-nhan .mo-ta-hop {
  font-size: 14px;
  color: var(--chu-phu);
  margin-bottom: calc(var(--kc) * 3);
  line-height: 1.55;
}

/* ─── Đường phân cách ────────────────────────────────────── */
.duong-phan {
  border: none;
  border-top: 1px solid var(--vien);
  margin: calc(var(--kc) * 2) 0;
}

/* ─── Dòng thông tin (nhãn + giá trị) ───────────────────── */
.dong-thong-tin {
  display: flex;
  align-items: flex-start;
  gap: var(--kc);
  padding: calc(var(--kc) * .875) 0;
  border-bottom: 1px solid var(--vien);
  font-size: 14px;
}
.dong-thong-tin:last-child { border-bottom: none; }
.dong-thong-tin .nhan-dt   { color: var(--chu-phu); flex-shrink: 0; width: 120px; }
.dong-thong-tin .gia-tri   { color: var(--chu); flex: 1; }

/* ─── Thanh điều hướng camera (nằm trên canvas) ─────────── */
.thanh-camera {
  position: absolute;
  top: calc(var(--kc) * 2);
  left: calc(var(--kc) * 2);
  z-index: 10;
  display: flex;
  gap: var(--kc);
  background: rgba(13, 17, 23, .75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
  padding: calc(var(--kc) * .75) var(--kc);
}

/* ─── Tiêu điểm / Focus ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--nhan);
  outline-offset: 2px;
}

/* ─── Giảm chuyển động ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE 390 – 1440px
   ═══════════════════════════════════════════════════════════ */

/* ≥ 1280px: padding rộng hơn */
@media (min-width: 1280px) {
  .dau-trang  { padding: 0 calc(var(--kc) * 5); }
  .chan-trang { padding: 0 calc(var(--kc) * 5); }
}

/* 1024–1279px: panel thu lại chút */
@media (max-width: 1279px) and (min-width: 1024px) {
  .bo-cuc-dashboard { grid-template-columns: 65fr 35fr; }
}

/* ≤ 1023px: ẩn menu ngang, hiện hamburger */
@media (max-width: 1023px) {
  .menu-chinh   { display: none; }
  .nut-menu-dt  { display: flex; }
}

/* ≤ 767px: dashboard chuyển sang dọc */
@media (max-width: 767px) {
  .bo-cuc-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: 56vh 1fr;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .panel-ben-phai {
    border-left: none;
    border-top: 1px solid var(--vien);
    overflow: visible;
  }

  .chan-trang {
    flex-direction: column;
    height: auto;
    padding: var(--kc) calc(var(--kc) * 2);
    gap: 4px;
    text-align: center;
  }

  .vung-toast {
    max-width: calc(100vw - calc(var(--kc) * 4));
    left: calc(var(--kc) * 2);
    right: calc(var(--kc) * 2);
  }

  .bang-du-lieu th,
  .bang-du-lieu td { padding: var(--kc); }
}

/* ≤ 390px: điện thoại nhỏ */
@media (max-width: 390px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }

  .cua-so-nho { padding: calc(var(--kc) * 2); }

  .hang-nut {
    flex-direction: column-reverse;
  }
  .hang-nut .nut {
    width: 100%;
    justify-content: center;
  }

  .dong-thong-tin {
    flex-direction: column;
    gap: 4px;
  }
  .dong-thong-tin .nhan-dt { width: auto; }
}