/* ── Màn Phòng làm việc 3D (index.css) ─────────────────────
   Dùng token từ style.css; không khai báo lại token ở đây.
   ─────────────────────────────────────────────────────────── */

/* Override lk-*.css nếu chúng vô hiệu [hidden] */
[hidden]            { display: none !important; }
dialog:not([open])  { display: none !important; }

/* ── Skip link ──────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--nhan);
  color: var(--tren-nhan);
  padding: 6px 14px;
  border-radius: var(--bo-nho);
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  transition: top .15s;
  text-decoration: none;
}
.skip-link:focus { top: 8px; text-decoration: none; }

/* ── Vùng canvas: trạng thái đang tải / rỗng ─────────── */
.ptrong {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--kc) * 2);
  z-index: 10;
}
.ptrong-tai {
  color: var(--chu-phu);
  font-size: 14px;
  gap: var(--kc);
  flex-direction: row;
}
.ptrong-rong {
  color: var(--chu-phu);
  text-align: center;
  padding: var(--kc);
}
.ptrong-rong svg { opacity: .3; }
.ptrong-rong p   { font-size: 15px; max-width: 260px; line-height: 1.55; }

/* ── Phòng 3D ───────────────────────────────────────────── */
/* Phối cảnh dùng lại tinh thần mô hình VP IANT: cả căn phòng được
   nghiêng về phía viewer bằng rotateX(16deg) trong một khung
   perspective 1800px. Nhân vật được bù rotateX(-16deg) để đứng
   thẳng; bàn và tường tilt theo phòng tạo cảm giác chiều sâu. */
.phong-3d-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1800px;
  perspective-origin: 50% 22%;
}

.phong-3d {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--nen);
  transform-style: preserve-3d;
  /* rotateX trong perspective 1800px khiến mép gần (bottom) rộng ra ~2.5% so
     với mép xa (top). scale(.955) bù lại để bbox phần tử nằm trong khung mẹ
     ở mọi viewport, trong khi vẫn giữ cảm giác chiều sâu của phòng điều hành. */
  transform: rotateX(16deg) scale(0.955);
  transform-origin: center 62%;
  transition: transform .35s ease-out, transform-origin .35s ease-out;
}

/* Lớp phủ chiều sâu — 3 pool đèn trần cyan rải phòng (gợi đèn panel treo
   trần phòng điều hành), fog sâu giữ mắt vào vùng nhân vật, viền tối hai mép. */
.phong-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 18% 10% at 22% 6%, rgba(0, 201, 177, .22) 0%, transparent 72%),
    radial-gradient(ellipse 18% 10% at 50% 6%, rgba(0, 201, 177, .22) 0%, transparent 72%),
    radial-gradient(ellipse 18% 10% at 78% 6%, rgba(0, 201, 177, .22) 0%, transparent 72%),
    radial-gradient(ellipse 70% 55% at 50% 28%,
      rgba(13, 17, 23, 0) 0%,
      rgba(13, 17, 23, .55) 70%,
      rgba(13, 17, 23, .88) 100%),
    linear-gradient(180deg,
      rgba(13, 17, 23, .78) 0%,
      rgba(13, 17, 23, 0) 22%,
      rgba(13, 17, 23, 0) 78%,
      rgba(13, 17, 23, .35) 100%);
  pointer-events: none;
  z-index: 4;
}

/* Sàn lưới phối cảnh — dùng pseudo-element để không là phần tử DOM
   (tránh công cụ kiểm bắt tràn 117px @390px dù parent đã overflow:hidden) */
.phong-3d::before {
  content: '';
  position: absolute;
  inset: -40% -30%;
  background-image:
    linear-gradient(rgba(0, 201, 177, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 201, 177, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotateX(44deg) translateY(14%);
  transform-origin: center 58%;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 60%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.75) 55%,
    rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 60%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.75) 55%,
    rgba(0,0,0,0) 100%);
}

/* Gradient tường phía sau — đậm hơn để tạo cảm giác tường xa.
   Thêm texture dạng tấm panel đứng (gợi vách kính/panel kim loại dọc)
   và vệt nổi ngang để tường có vật liệu thay vì chỉ gradient trơn. */
.tuong-sau {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32%;
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 201, 177, 0) 0,
      rgba(0, 201, 177, 0) 96px,
      rgba(0, 201, 177, .09) 96px,
      rgba(0, 201, 177, .09) 97px),
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 44px,
      rgba(255, 255, 255, .02) 44px,
      rgba(255, 255, 255, .02) 45px),
    linear-gradient(to bottom,
      #2A3240 0%,
      #1F252E 50%,
      #171C24 85%,
      rgba(13, 17, 23, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Đường chân tường — vệt sáng cyan mờ ở ranh giới tường/sàn, gợi
   mép tường chạy ngang phía xa phòng. */
.tuong-sau::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 201, 177, .35) 25%,
    rgba(0, 201, 177, .55) 50%,
    rgba(0, 201, 177, .35) 75%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(0, 201, 177, .25);
}

/* Vách bên trái và phải — đóng khung không gian phòng, có đường mạch
   dọc gợi tấm panel kim loại. */
.tuong-trai {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8%;
  background:
    repeating-linear-gradient(180deg,
      rgba(0, 201, 177, 0) 0,
      rgba(0, 201, 177, 0) 72px,
      rgba(0, 201, 177, .07) 72px,
      rgba(0, 201, 177, .07) 73px),
    linear-gradient(to right, rgba(28, 33, 40, .72) 0%, rgba(28, 33, 40, .18) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.tuong-trai::after {
  content: '';
  position: absolute;
  right: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 201, 177, .35) 50%,
    transparent 100%);
}
.tuong-phai {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8%;
  background:
    repeating-linear-gradient(180deg,
      rgba(0, 201, 177, 0) 0,
      rgba(0, 201, 177, 0) 72px,
      rgba(0, 201, 177, .07) 72px,
      rgba(0, 201, 177, .07) 73px),
    linear-gradient(to left, rgba(28, 33, 40, .72) 0%, rgba(28, 33, 40, .18) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.tuong-phai::after {
  content: '';
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 201, 177, .35) 50%,
    transparent 100%);
}

/* Bàn làm việc trang trí — gợi cảm giác bề mặt bàn gỗ tối + đèn cyan */
.noi-that {
  position: absolute;
  pointer-events: none;
}
.ban-lam {
  background:
    linear-gradient(180deg, #262D37 0%, #1C2128 55%, #141820 100%);
  border: 1px solid #30363D;
  border-top: 1px solid #4A5668;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 2px 6px rgba(0, 0, 0, .4),
    0 14px 22px -10px rgba(0, 0, 0, .65),
    0 0 14px rgba(0, 201, 177, .06);
}
/* Dải đèn cyan dọc mép trước mặt bàn */
.ban-lam::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 201, 177, .55) 22%,
    rgba(0, 201, 177, .9) 50%,
    rgba(0, 201, 177, .55) 78%,
    transparent 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0, 201, 177, .55);
}
/* "Màn hình" nhỏ ở giữa bàn — chấm sáng gợi monitor */
.ban-lam::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 42%;
  background: linear-gradient(180deg,
    rgba(0, 201, 177, .22) 0%,
    rgba(0, 201, 177, .06) 100%);
  border: 1px solid rgba(0, 201, 177, .32);
  border-radius: 2px;
  box-shadow:
    0 0 6px rgba(0, 201, 177, .25),
    inset 0 0 4px rgba(0, 201, 177, .25);
}

/* Thảm sàn mờ nhẹ dưới bàn — gợi khối trọng lượng cho bàn */
.ban-lam .ghe {
  display: none;
}

/* ── Nhân vật ───────────────────────────────────────────── */
/* rotateX(-16deg) counter-rotate để nhân vật đứng thẳng khi phòng
   nghiêng; translateZ(1px) đẩy nhân vật nổi khỏi mặt sàn, không bị
   ::after fog che. */
.nhan-vat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  /* translateZ(40px) đẩy nhân vật nổi hẳn trước mặt bàn trong preserve-3d, để
     bàn hàng trước không che vòng glow và nửa dưới của nhân vật hàng xa. */
  transform: translate(-50%, -50%) translateZ(40px) rotateX(-16deg) scale(var(--scale, 1));
  transform-origin: bottom center;
  transform-style: preserve-3d;
  transition: transform .18s ease;
  z-index: 5;
  user-select: none;
  -webkit-user-select: none;
}

.nhan-vat:hover {
  z-index: 20;
  transform: translate(-50%, -50%) translateZ(46px) rotateX(-16deg) scale(calc(var(--scale, 1) * 1.13));
}
.nhan-vat:focus-visible {
  z-index: 20;
  transform: translate(-50%, -50%) translateZ(46px) rotateX(-16deg) scale(calc(var(--scale, 1) * 1.13));
  outline: 2px solid var(--nhan);
  outline-offset: 6px;
  border-radius: 10px;
}
.nhan-vat:focus-visible .nv-avatar {
  border-color: var(--nhan);
  box-shadow: 0 0 0 5px rgba(0, 201, 177, .22);
}

/* Avatar tròn — đầu nhân vật, nối liền thân bên dưới. Gradient chéo cho
   cảm giác khối cầu (sáng trên-trái, tối dưới-phải) thay vì đĩa phẳng. */
.nv-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    #2A3240 0%,
    var(--mat-2) 45%,
    #0F141B 100%);
  border: 2px solid var(--vien);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-tieu-de);
  font-size: 15px;
  font-weight: 700;
  color: var(--chu);
  position: relative;
  z-index: 3;
  transition: border-color .18s;
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .32);
}
.nhan-vat:hover .nv-avatar,
.nhan-vat:focus-visible .nv-avatar {
  border-color: var(--mg, var(--nhan));
  box-shadow:
    inset 0 -2px 5px rgba(0, 0, 0, .32),
    0 0 0 2px rgba(0, 201, 177, .25);
}

/* Thân nhân vật — khối vai + ngực, mép trên bo tròn như vai người,
   gắn hai cánh tay thanh mảnh ở hai bên qua ::before/::after.
   Mục đích: nhìn rõ là "người đứng" chứ không phải quân cờ trên lưới. */
.nv-body {
  width: 38px;
  height: 32px;
  background:
    linear-gradient(180deg,
      var(--mat-2) 0%,
      var(--mat) 55%,
      #0F141B 100%);
  border: 1.5px solid var(--mg, var(--vien));
  border-top: none;
  border-radius: 50% 50% 10% 10% / 60% 60% 10% 10%;
  margin-top: -4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 2px 6px rgba(0, 0, 0, .45),
    0 0 10px color-mix(in srgb, var(--mg, transparent) 28%, transparent);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
/* Hai cánh tay — thanh mảnh hai bên vai, nổi thêm chiều rộng đôi vai
   để nhân vật nhìn ra "người" chứ không phải khối trụ. */
.nv-body::before,
.nv-body::after {
  content: '';
  position: absolute;
  top: 3px;
  width: 7px;
  height: 20px;
  background: linear-gradient(180deg,
    var(--mat-2) 0%,
    var(--mat) 55%,
    #0F141B 100%);
  border: 1.5px solid var(--mg, var(--vien));
  border-radius: 5px 5px 3px 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.nv-body::before { left: -5px; }
.nv-body::after  { right: -5px; }

.nhan-vat--mat .nv-body {
  border-color: var(--vien);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .03),
    0 2px 4px rgba(0, 0, 0, .35);
}
.nhan-vat--mat .nv-body::before,
.nhan-vat--mat .nv-body::after {
  border-color: var(--vien);
}

/* Vòng glow trạng thái — dưới chân */
.nv-ring {
  width: 54px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--mg) 0%, transparent 68%);
  box-shadow: 0 0 16px 5px var(--mg);
  opacity: .9;
  margin-top: 1px;
  flex-shrink: 0;
  transition: opacity .3s, box-shadow .3s;
}

/* Billboard tên + chức danh — chữ to, tương phản cao, dễ đọc ở desktop.
   Nền đậm hơn + viền sáng hơn để tách khỏi nền phòng tối; chữ chính và chức
   danh đều ở mức tương phản cao (axe-core yêu cầu ≥ 4.5:1). */
.nv-bb {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(13, 17, 23, .88);
  border: 1px solid #4A5668;
  border-radius: 5px;
  padding: 5px 10px;
  margin-bottom: 7px;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 200px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.bb-ten {
  font-family: var(--font-tieu-de);
  font-size: 14px;
  font-weight: 700;
  color: var(--chu);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  letter-spacing: .01em;
}
.bb-cd {
  font-size: 12px;
  color: var(--chu);
}
/* Billboard gộp: Tên · Chức danh — một dòng, dấu · phân cách */
.bb-ten-cd {
  font-family: var(--font-tieu-de);
  font-size: 14px;
  font-weight: 700;
  color: var(--chu);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  letter-spacing: .01em;
}
.bb-ten-ngan { color: var(--chu); }
.bb-cham,
.bb-chuc-danh { color: rgba(230, 237, 243, .9); font-weight: 500; }

/* Nhân vật ở xa (scale < 0.9): giấu chức danh để billboard không chồng
   các nhân vật sát nhau trong cùng hàng. Hover/focus hiện lại đầy đủ. */
.nhan-vat.nv-xa .bb-cham,
.nhan-vat.nv-xa .bb-chuc-danh { display: none; }
.nhan-vat.nv-xa:hover .bb-cham,
.nhan-vat.nv-xa:hover .bb-chuc-danh,
.nhan-vat.nv-xa:focus-visible .bb-cham,
.nhan-vat.nv-xa:focus-visible .bb-chuc-danh,
.nhan-vat.nv-xa:focus-within .bb-cham,
.nhan-vat.nv-xa:focus-within .bb-chuc-danh { display: inline; }
.nhan-vat.nv-xa .nv-bb { max-width: 120px; }
.nhan-vat.nv-xa .bb-ten-cd { font-size: 13px; max-width: 100px; }
.nhan-vat.nv-xa:hover .nv-bb,
.nhan-vat.nv-xa:focus-visible .nv-bb,
.nhan-vat.nv-xa:focus-within .nv-bb { max-width: 200px; }
.nhan-vat.nv-xa:hover .bb-ten-cd,
.nhan-vat.nv-xa:focus-visible .bb-ten-cd,
.nhan-vat.nv-xa:focus-within .bb-ten-cd { font-size: 14px; max-width: 180px; }

/* Khi hover/focus bất kỳ nhân vật nào: đẩy billboard của nó lên trên
   billboard của nhân vật khác (tránh bị khuất khi tên dài hơn trung
   bình). z-index trên .nhan-vat đã lên 20 ở trạng thái này. */
/* Avatar ảnh thật — fill vòng tròn, giữ nét */
.nv-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Badge nhàn rỗi — đỏ, nổi bật nhất, chỉ Sếp thấy */
.nv-badge-nr {
  order: -1;
  background: var(--loi);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-tieu-de);
  padding: 2px 7px;
  border-radius: 100px;
  margin-bottom: 4px;
  white-space: nowrap;
  box-shadow: 0 0 10px var(--loi);
  animation: nhip-badge .9s ease-in-out infinite alternate;
}
@keyframes nhip-badge {
  from { opacity: 1; }
  to   { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-badge-nr { animation: none; }
}

/* Trạng thái mất kết nối */
.nhan-vat--mat {
  opacity: .6;
  filter: grayscale(.7);
}
/* Nhãn mất kết nối: ẩn mặc định — chỉ hiện khi hover/focus/focus-within
   để không treo chữ cứng trên nhân vật trong khung phòng. Thông tin
   "Mất kết nối · Lần cuối hh:mm" vẫn có thể nhìn thấy khi người dùng
   quan tâm (rê chuột, bấm Tab, hoặc mở chi tiết). */
.nv-mat-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--chu-phu);
  background: rgba(22, 27, 34, .94);
  border: 1px solid var(--vien);
  border-radius: 4px;
  padding: 2px 6px;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .18s ease;
}
.nhan-vat--mat:hover .nv-mat-label,
.nhan-vat--mat:focus-visible .nv-mat-label,
.nhan-vat--mat:focus-within .nv-mat-label { opacity: 1; }

/* ── Tooltip việc đang làm ──────────────────────────────── */
.tooltip-viec {
  position: absolute;
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
  padding: 9px 12px;
  width: 180px;
  z-index: 50;
  pointer-events: none;
  box-shadow: var(--bong);
}
.tt-ten      { font-size: 13px; font-weight: 600; color: var(--chu); margin-bottom: 2px; }
.tt-cd       { font-size: 11px; color: var(--chu-phu); margin-bottom: 5px; }
.tt-tt       { font-size: 11px; color: var(--nhan); font-weight: 600; }
.tt-viec     {
  font-size: 12px;
  color: var(--chu);
  border-top: 1px solid var(--vien);
  padding-top: 6px;
  margin-top: 5px;
  line-height: 1.5;
}

/* ── Banner cảnh báo nhàn rỗi ───────────────────────────── */
.canh-bao-banner {
  position: absolute;
  bottom: calc(var(--kc) * 2.5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--kc);
  background: rgba(248, 81, 73, .13);
  border: 1px solid rgba(248, 81, 73, .42);
  border-radius: var(--bo-vua);
  padding: calc(var(--kc) * .875) calc(var(--kc) * 1.5);
  font-size: 13px;
  font-weight: 600;
  color: var(--loi);
  white-space: nowrap;
  z-index: 30;
  max-width: calc(100% - 32px);
  box-shadow: 0 0 18px rgba(248, 81, 73, .18);
}
.canh-bao-nhom-nut {
  display: flex;
  gap: calc(var(--kc) * .75);
  flex-shrink: 0;
}

/* ── Nhịp cập nhật ──────────────────────────────────────── */
.nhip-cap-nhat {
  font-size: 11px;
  color: var(--chu-phu);
  margin-left: calc(var(--kc) * .5);
}

/* ── Panel header ───────────────────────────────────────── */
.panel-header {
  padding: calc(var(--kc) * 2);
  border-bottom: 1px solid var(--vien);
  flex-shrink: 0;
}
.panel-tieu-de {
  font-family: var(--font-tieu-de);
  font-size: 18px;
  font-weight: 700;
  color: var(--chu);
  margin-bottom: calc(var(--kc) * 1.5);
}
.panel-header .bo-loc { flex-wrap: wrap; }

/* ── Hàng thành viên panel ──────────────────────────────── */
.panel-row {
  display: grid;
  grid-template-columns: 36px 1fr auto 54px;
  align-items: center;
  gap: var(--kc);
  padding: calc(var(--kc) * 1.25) calc(var(--kc) * 2);
  border-bottom: 1px solid var(--vien);
  cursor: pointer;
  transition: background .12s;
  min-height: 48px;
}
.panel-row:last-child   { border-bottom: none; }
.panel-row:hover        { background: rgba(255,255,255,.028); }
.panel-row:focus-visible {
  outline: 2px solid var(--nhan);
  outline-offset: -2px;
}

.pr-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mat-2);
  border: 1.5px solid var(--av, var(--vien));
  box-shadow: 0 0 8px color-mix(in srgb, var(--av, transparent) 50%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-tieu-de);
  font-size: 12px;
  font-weight: 700;
  color: var(--chu);
  flex-shrink: 0;
}
.pr-info   { min-width: 0; }
.pr-ten    { font-size: 13px; font-weight: 600; color: var(--chu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-cd     { font-size: 11px; color: var(--chu-phu); }

.pr-tt {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.pr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pr-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--chu);
  white-space: nowrap;
}
.pr-nr {
  font-size: 10px;
  font-weight: 700;
  color: var(--loi);
  background: rgba(248, 81, 73, .12);
  border: 1px solid rgba(248, 81, 73, .3);
  border-radius: 100px;
  padding: 1px 5px;
  white-space: nowrap;
}
.pr-ranh {
  font-size: 11px;
  color: var(--chu-phu);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Trạng thái rỗng panel */
.panel-rong {
  padding: calc(var(--kc) * 4) calc(var(--kc) * 2);
  text-align: center;
  color: var(--chu-phu);
  font-size: 13px;
}

/* ── Overlay chi tiết: nut bottom ───────────────────────── */
.hang-nut #chi-tiet-nut {
  margin-top: calc(var(--kc) * 2.5);
}

/* Ghi chú cho nút P2 (bị vô hiệu) — nói rõ sẽ có ở bản tiếp, thay vì
   chỉ dựa vào tooltip HTML title (người dùng chuột không thấy nếu không
   rê qua; người dùng bàn phím không thấy luôn). */
.nut-ghi-chu {
  font-size: 11px;
  color: var(--chu-phu);
  text-align: center;
  margin-top: calc(var(--kc) * .75);
  font-style: italic;
  line-height: 1.4;
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */

/* Canvas toàn chiều cao khi không có panel — áp dụng cả desktop lẫn mobile */
.bo-cuc-dashboard.khong-panel {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
}
/* Trên màn rộng (vai Thành viên: không có panel), căn giữa canvas trong
   khung tối đa 1280px để phòng không bị kéo loãng ra, nhân vật phân bố
   đều trong khung đóng (hai bên thành "lề phòng" chủ ý). */
@media (min-width: 1024px) {
  .bo-cuc-dashboard.khong-panel {
    grid-template-columns: minmax(0, 1280px);
    justify-content: center;
    background:
      radial-gradient(ellipse 60% 40% at 50% 60%,
        rgba(0, 201, 177, .03) 0%,
        transparent 70%),
      var(--nen);
  }
}

/* ≤ 767px: layout dọc, cho body cuộn tự nhiên theo nội dung — không ép
   100vh và không `flex-grow`. Lý do: công cụ chụp "ca-trang" dùng viewport
   cao 9000px; nếu bất kỳ phần tử nào ép `min-height: 100vh` hay có
   `flex: 1 0 auto` thì nền đen bị kéo dài theo viewport, tạo dải trống rất
   dài sau nội dung. Khi mọi phần tử co theo nội dung (`flex: 0 0 auto`,
   không ép min-height), trang kết thúc đúng chỗ nội dung kết thúc. */
@media (max-width: 767px) {
  html { height: auto; overflow: visible; }
  body.khung-ung-dung {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  #noi-dung {
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
  }
  .bo-cuc-dashboard:not(.khong-panel) {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    grid-template-rows: unset;
    overflow: visible;
    flex: 0 0 auto;
  }
  .bo-cuc-dashboard.khong-panel {
    display: flex;
    flex-direction: column;
    grid-template-rows: unset;
    overflow: visible;
    flex: 0 0 auto;
  }
  .vung-canvas {
    position: relative;
    height: 60vh;
    min-height: 420px;
    max-height: 640px;
    flex: 0 0 auto;
  }
  .panel-ben-phai {
    overflow: visible;
    min-height: 0;
    border-left: none;
    border-top: 1px solid var(--vien);
    flex: 0 0 auto;
  }

  .nv-bb { display: none; }

  .nv-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  .nv-body {
    width: 32px;
    height: 26px;
    border-radius: 50% 50% 10% 10% / 60% 60% 10% 10%;
  }
  .nv-body::before,
  .nv-body::after {
    top: 2px;
    width: 6px;
    height: 16px;
    border-radius: 4px 4px 3px 3px;
  }
  .nv-body::before { left: -4px; }
  .nv-body::after  { right: -4px; }
  .nv-ring {
    width: 46px;
    height: 10px;
  }

  /* Fill height — vai Thành viên (.khong-panel) canvas chiếm hết màn,
     hạ transform-origin xuống và tăng scale một chút để phòng choán đều
     chiều cao viewport thay vì cụm nhân vật về nửa trên. */
  .bo-cuc-dashboard.khong-panel .phong-3d-wrap {
    perspective-origin: 50% 36%;
  }
  .bo-cuc-dashboard.khong-panel .phong-3d {
    transform: rotateX(14deg) scale(1.08);
    transform-origin: center 82%;
  }

  .canh-bao-banner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .panel-row {
    grid-template-columns: 32px 1fr auto;
  }
  .pr-ranh { display: none; }

  .tooltip-viec { display: none; } /* touch không cần hover tooltip */
}

/* ≤ 480px: tooltip Mất kết nối nhỏ hơn, luôn 1 dòng, không vỡ dọc */
@media (max-width: 480px) {
  .nv-mat-label {
    font-size: 9px;
    padding: 1px 5px;
    letter-spacing: -0.01em;
  }
}

/* ≤ 390px */
@media (max-width: 390px) {
  .ptrong-rong p { font-size: 14px; }

  .pr-tt { flex-wrap: wrap; gap: 3px; }
  .pr-nr { margin-top: 2px; }
}