/* ===========================================================================
   Tổng Đài Agent — nhận diện Firebooks (Sách Ngọn Lửa)
   Nguồn chuẩn: Ngon lua\shared\nhan-dien-cong-ty\tokens.json + BRAND.md

   BA RÀNG BUỘC LẤY TỪ BRAND, ĐỪNG PHÁ:
   1. Gradient đỏ→cam là ĐẶC QUYỀN CỦA LOGO. Không dùng làm nền trang, nền nút,
      nền thẻ. Ở đây chỉ có đúng một dải chuyển: trong file logo PNG.
   2. Chữ trắng trên Lửa Đỏ #FF1206 chỉ đạt 3,9:1 — KHÔNG ĐẠT. Cần nền đỏ có chữ
      thì dùng #B80D07 (6,8:1). Nền Lửa Cam #F4841C thì chữ phải ĐEN (8,2:1).
   3. Phông logo SVN-Agency FB là phông bản quyền, không nhúng web được.
      Web dùng Be Vietnam Pro — đúng như web giới thiệu Firebooks đang dùng.

   Tương phản đã tự đo trên nền tối #121010 (không chép từ đâu):
     Lửa Cam  #F4841C  7,4:1  -> dùng làm màu nhấn chính
     Lửa Đỏ   #FF1206  4,8:1  -> chỉ cho chữ lớn / dấu hiệu lỗi, không cho chữ nhỏ
     Trắng    #FFFFFF 19,0:1
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

/* BẪY ĐÃ MẮC THẬT (29/10/2026): thuộc tính `hidden` của HTML chỉ là
   `display: none` ở mức trình duyệt — BẤT KỲ `display` nào do CSS đặt cũng
   ghi đè nó. `.man { display: flex }` bên dưới đã làm hai lớp phủ (nhật ký việc,
   đổi mật khẩu) nằm đè lên toàn trang ngay từ lúc tải, che sạch mọi tính năng.
   Dòng này bắt `hidden` luôn có hiệu lực, cho mọi phần tử, mãi mãi. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   HAI NỀN: sáng (mặc định) và tối. Đổi bằng nút ở đầu trang, nhớ vào trình duyệt.

   BIẾN QUAN TRỌNG NHẤT LÀ `--nhan` — màu dùng cho CHỮ và ĐƯỜNG NÉT nhấn mạnh.
   Nó KHÁC nhau giữa hai nền, và đó không phải tuỳ hứng mà là bắt buộc:

     Lửa Cam #F4841C trên nền tối   = 7,31:1  -> đọc tốt
     Lửa Cam #F4841C trên nền sáng  = 2,57:1  -> KHÔNG ĐỌC ĐƯỢC

   Nên nền sáng phải đổi sang Đỏ đậm #B80D07 (6,78:1) — màu này brand đã công nhận
   (`tokens.json` → `mau_nen_ngoai_logo.chu_tren_nen_do`).

   `--lua-cam` CHỈ còn dùng làm NỀN MẢNG (nút chính), và chữ trên nó luôn là ĐEN
   (8,16:1) — đúng cả hai nền. Đừng bao giờ đặt `color: var(--nhan)`.
   --------------------------------------------------------------------------- */
:root {
  /* Màu thương hiệu — đúng tokens.json, không chế thêm */
  --lua-do: #FF1206;
  --lua-cam: #F4841C;
  --do-dam: #B80D07;

  /* ----- NỀN SÁNG (mặc định) ----- */
  --nen: #FFFFFF;
  --the: #FAF8F6;
  --the-cao: #F3EFEB;
  --vien: #E4DCD6;
  --vien-sang: #C9BCB3;

  --chu: #1A1512;
  --chu-vua: #574E48;
  /* #837872 trông "nhẹ nhàng" nhưng chỉ đạt 3,75:1 trên thẻ — đã đo và phải bỏ.
     #6E635D đạt ≥5:1 trên cả ba nền (trắng, thẻ, thẻ-cao). */
  --chu-mo: #6E635D;

  --nhan: #B80D07;        /* 6,78:1 trên trắng */
  --nhan-nen: #FDEFE6;    /* nền nhạt cho mảng đang hoạt động */
  --canh: #B80D07;        /* cảnh báo / lỗi */

  /* Hai màu này đo trên nền TRẮNG thì đủ, nhưng chữ trạng thái nằm trên THẺ-CAO
     nên tụt xuống 4,3–4,4:1. Đã đậm thêm để đạt trên cả ba nền. */
  --xanh: #146C34;        /* xong — ≥5,7:1 */
  --vang: #8A5406;        /* đã dừng — ≥5,5:1 */

  --o-nhap: #FFFFFF;
  --bong-tieu-de: rgba(0, 0, 0, .06);

  /* Màu hình người + bàn lúc RẢNH. Phải riêng khỏi `--vien-sang`: viền chỉ là
     trang trí nên 1,6:1 còn chấp nhận, nhưng hình người là thứ Sếp NHÌN để biết
     có mấy chỗ ngồi — mờ quá thì coi như không có. Đã đo: ≥3:1 trên thẻ-cao. */
  --nguoi-ranh: #8E7F74;
}

[data-nen="toi"] {
  --nen: #121010;
  --the: #1B1917;
  --the-cao: #232020;
  --vien: #2E2A27;
  --vien-sang: #3D3734;

  --chu: #F2EEEB;
  --chu-vua: #B9AFA9;
  /* #8A807A đủ trên nền chính (4,92:1) nhưng tụt xuống 4,20:1 khi nằm trên thẻ-cao.
     Phải đo trên CẢ BA nền, không chỉ nền chính. #9A8F87 đạt ≥5:1 cả ba. */
  --chu-mo: #9A8F87;

  --nhan: #F4841C;        /* 7,31:1 trên nền tối */
  --nhan-nen: #221A12;
  --canh: #FF1206;        /* 4,82:1 trên nền tối */

  --xanh: #3FBF7F;
  --vang: #E0A62E;

  --o-nhap: #0E0D0C;
  --bong-tieu-de: rgba(0, 0, 0, .3);
  --nguoi-ranh: #867C75;   /* 3,97:1 trên thẻ-cao nền tối */
}

/* Logo: hai bản khác nhau cho hai nền.
   BẪY BRAND: `bieu-tuong-ngon-lua.png` là bản NỀN TỐI (chữ FIREBOOKS màu trắng) —
   đặt lên nền sáng là mất chữ. Nền sáng phải dùng `logo-doc.png`. */
.logo-toi { display: none; }
[data-nen="toi"] .logo-sang { display: none; }
[data-nen="toi"] .logo-toi { display: block; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Đầu trang ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 24px;
  border-bottom: 1px solid var(--vien);
  background: var(--the);
  position: sticky; top: 0; z-index: 5;
}
.hieu { display: flex; align-items: center; gap: 14px; }
.hieu img { height: 46px; width: auto; display: block; }
header h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .2px; }
header .phu { margin: 1px 0 0; font-size: 12.5px; color: var(--chu-mo); }
.nut-dau { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Dải số liệu ---------- */
.dai-so {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px; padding: 18px 24px 0;
}
.o-so {
  background: var(--the); border: 1px solid var(--vien); border-radius: 11px;
  padding: 13px 15px; position: relative; overflow: hidden;
}
.o-so .nhan { font-size: 11.5px; color: var(--chu-mo); text-transform: uppercase; letter-spacing: .6px; }
.o-so .so { font-size: 26px; font-weight: 700; line-height: 1.15; margin-top: 3px; font-variant-numeric: tabular-nums; }
.o-so .duoi { font-size: 11.5px; color: var(--chu-mo); margin-top: 1px; }
.o-so.nhan-manh .so { color: var(--nhan); }
.o-so.canh-bao .so { color: var(--canh); }
.o-so.tot .so { color: var(--xanh); }
/* Vạch màu mảnh bên trái — điểm nhấn thương hiệu, KHÔNG phải nền gradient */
.o-so.nhan-manh::before, .o-so.canh-bao::before, .o-so.tot::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.o-so.nhan-manh::before { background: var(--nhan); }
.o-so.canh-bao::before { background: var(--canh); }
.o-so.tot::before { background: var(--xanh); }

/* ---------- Bố cục chính ---------- */
main {
  display: grid; grid-template-columns: 370px 1fr; gap: 18px;
  padding: 18px 24px 28px; align-items: start;
}
@media (max-width: 1000px) { main { grid-template-columns: 1fr; } }

section {
  background: var(--the); border: 1px solid var(--vien);
  border-radius: 12px; padding: 18px;
}
section h2 {
  margin: 0 0 14px; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .9px; color: var(--chu-vua);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

/* ---------- Biểu mẫu ---------- */
label { display: block; margin-bottom: 14px; font-size: 12.5px; color: var(--chu-vua); font-weight: 500; }
select, textarea, input {
  width: 100%; margin-top: 6px; padding: 9px 11px;
  background: var(--o-nhap); color: var(--chu);
  border: 1px solid var(--vien); border-radius: 8px;
  font-family: inherit; font-size: 14px;
}
textarea { resize: vertical; line-height: 1.5; }
select:focus, textarea:focus, input:focus {
  outline: none; border-color: var(--nhan);
  box-shadow: 0 0 0 3px var(--nhan-nen);
}
small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--chu-mo); line-height: 1.45; }

/* ---------- Nút ---------- */
.hang-nut { display: flex; gap: 10px; flex-wrap: wrap; }
button {
  padding: 9px 15px; border-radius: 8px; border: 1px solid var(--vien-sang);
  background: var(--the-cao); color: var(--chu);
  font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: border-color .12s, background .12s;
}
button:hover { border-color: var(--nhan); }
/* Nút chính: nền Lửa Cam + chữ ĐEN = 8,2:1, đúng quy tắc brand.
   Tuyệt đối KHÔNG đặt chữ trắng lên nền lửa. */
button.chinh {
  background: var(--lua-cam); border-color: var(--lua-cam);
  color: #000; font-weight: 600; flex: 1;
}
button.chinh:hover { background: #E07614; border-color: #E07614; }
button.nguy:hover { border-color: var(--canh); color: var(--canh); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.loc {
  padding: 5px 11px; font-size: 12.5px; border-radius: 999px;
  background: transparent; color: var(--chu-mo);
}
button.loc.chon { background: var(--lua-cam); border-color: var(--lua-cam); color: #000; font-weight: 600; }

.loi { color: var(--canh); font-size: 12.5px; min-height: 17px; margin: 10px 0 0; }
.chip { font-size: 11.5px; color: var(--chu-mo); text-transform: none; letter-spacing: 0; font-weight: 400; }
.hang-loc { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* ---------- Thẻ việc ---------- */
.viec {
  border: 1px solid var(--vien); border-left: 3px solid var(--vien-sang);
  border-radius: 9px; padding: 12px 14px; margin-bottom: 10px;
  background: var(--the-cao); cursor: pointer;
  transition: border-color .12s;
}
.viec:hover { border-color: var(--vien-sang); border-left-color: var(--nhan); }
.viec.cho { border-left-color: var(--chu-mo); }
.viec.dang-chay { border-left-color: var(--nhan); }
.viec.xong { border-left-color: var(--xanh); }
.viec.loi { border-left-color: var(--canh); }
.viec.da-dung { border-left-color: var(--vang); }
.viec.cho-duyet { border-left-color: var(--canh); border-style: dashed; }
.viec.tu-choi { border-left-color: var(--chu-mo); opacity: .6; }
.viec.cho-duyet .tt { color: var(--canh); font-weight: 700; }
.viec.tu-choi .tt { color: var(--chu-mo); }

.viec .dong1 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.viec .ten { font-weight: 600; font-size: 14.5px; }
.viec .tt { font-size: 11.5px; white-space: nowrap; font-weight: 500; }
.viec.dang-chay .tt { color: var(--nhan); }
.viec.xong .tt { color: var(--xanh); }
.viec.loi .tt { color: var(--canh); }
.viec.da-dung .tt { color: var(--vang); }
.viec .meo { font-size: 11.5px; color: var(--chu-mo); margin-top: 5px; }
.viec .meo b { color: var(--chu-vua); font-weight: 500; }
.viec .tomtat {
  font-size: 13px; margin-top: 9px; color: var(--chu-vua); white-space: pre-wrap;
  max-height: 4.8em; overflow: hidden; position: relative;
}
.viec .nut-nho { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.viec .nut-nho button { padding: 4px 10px; font-size: 12px; }
.rong { color: var(--chu-mo); font-size: 13.5px; padding: 14px 0; text-align: center; }

/* ---------- Khối thống kê dưới ---------- */
.hang-duoi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 24px 28px; }
@media (max-width: 1000px) { .hang-duoi { grid-template-columns: 1fr; } }

.bang { width: 100%; border-collapse: collapse; font-size: 13px; }
.bang th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--chu-mo); font-weight: 500; padding: 0 8px 7px 0; border-bottom: 1px solid var(--vien);
}
.bang td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--vien); color: var(--chu-vua); }
.bang tr:last-child td { border-bottom: none; }
.bang .so-cot { text-align: right; font-variant-numeric: tabular-nums; color: var(--chu); }
.bang .ten-cot { color: var(--chu); font-weight: 500; }
.bang .phu-nho { font-size: 11px; color: var(--chu-mo); font-weight: 400; margin-top: 2px; }

/* Thanh tỉ lệ — dùng Lửa Cam đặc, không dải chuyển */
.thanh { height: 5px; border-radius: 3px; background: var(--vien); overflow: hidden; margin-top: 5px; }
.thanh i { display: block; height: 100%; background: var(--nhan); }

/* ---------- Trang đăng nhập ---------- */
body.trang-vao { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.hop-vao {
  background: var(--the); border: 1px solid var(--vien); border-radius: 14px;
  padding: 34px 32px; width: 100%; max-width: 400px; text-align: center;
}
.hop-vao img { height: 76px; width: auto; margin-bottom: 14px; }
.hop-vao h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.hop-vao .khau-hieu { margin: 0 0 20px; font-size: 12.5px; color: var(--nhan); letter-spacing: .3px; }
.loi-dan { color: var(--chu-vua); font-size: 13px; text-align: left; margin: 0 0 16px; line-height: 1.5; }
.hop-vao input { margin-bottom: 10px; }
.hop-vao button.chinh { width: 100%; margin-top: 4px; }
.hop-vao .loi { text-align: left; }

/* ---------- Lớp phủ ---------- */
.man { position: fixed; inset: 0; background: rgba(0, 0, 0, .74); display: flex; padding: 32px; z-index: 10; }
.hop-mk {
  background: var(--the); border: 1px solid var(--vien); border-radius: 12px;
  padding: 26px 28px; width: 100%; max-width: 420px; margin: auto; height: fit-content;
}
.hop-mk h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.hop-rong { max-width: 620px; max-height: 88vh; overflow-y: auto; }

/* Một hãng AI trong màn khoá API */
.the-hang { border: 1px solid var(--vien); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: var(--the-cao); }
.the-hang .dong-ten { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.the-hang .ten-hang { font-weight: 600; font-size: 14.5px; }
.the-hang .trang-thai { font-size: 12px; }
.the-hang .trang-thai.co { color: var(--xanh); }
.the-hang .trang-thai.chua { color: var(--chu-mo); }
.the-hang .chi-dan { font-size: 12px; color: var(--chu-mo); margin: 6px 0 10px; line-height: 1.5; }
.the-hang .chi-dan a { color: var(--nhan); }
.the-hang .hang-nut { margin-top: 8px; }
.the-hang .ket-qua { font-size: 12.5px; margin-top: 8px; min-height: 16px; }
.the-hang .ket-qua.tot { color: var(--xanh); }
.the-hang .ket-qua.xau { color: var(--canh); }

/* ===========================================================================
   SƠ ĐỒ BỘ MÁY — trang chủ
   Ba tầng xếp dọc, đường nối vẽ bằng pseudo-element chứ không dùng SVG:
   nhờ vậy sơ đồ co giãn theo màn hình mà không phải tính lại toạ độ.
   =========================================================================== */
.so-do {
  margin: 18px 24px 0; padding: 22px 20px 20px;
  background: var(--the); border: 1px solid var(--vien); border-radius: 12px;
}
.so-do h2 {
  margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .9px;
  text-transform: uppercase; color: var(--chu-vua);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

/* --- Tầng 1 & 2: Sếp và Mama --- */
.sd-dinh { display: flex; flex-direction: column; align-items: center; }
.sd-o-sep, .sd-o-mama {
  border-radius: 10px; padding: 12px 22px; text-align: center;
  background: var(--the-cao); min-width: 260px;
}
.sd-o-sep { border: 2.5px solid var(--nhan); }
.sd-o-mama { border: 2px solid var(--nhan); cursor: pointer; }
.sd-o-mama:hover { background: var(--the); }
.sd-o-sep .vai, .sd-o-mama .vai { font: 700 16px/1.3 inherit; color: var(--chu); }
.sd-o-sep .duoi, .sd-o-mama .duoi { font-size: 11.5px; color: var(--chu-mo); margin-top: 2px; }
.sd-o-sep .canh { font-size: 12px; color: var(--canh); font-weight: 600; margin-top: 3px; }
.sd-o-mama .lam-gi { font-size: 11.5px; color: var(--nhan); font-weight: 600; margin-top: 3px; }

/* Đường nối dọc giữa hai tầng */
.sd-noi-doc { width: 2px; height: 22px; background: var(--vien-sang); }

/* Tầng 2: hai vị trí ngang cấp, nối nhau bằng vạch "soi chéo".
   `width: 100%` là bắt buộc — `.sd-dinh` là flex-column với align-items:center,
   nên con của nó co lại bằng nội dung; thiếu dòng này là hai ô bị bó hẹp rồi
   tự xuống dòng, trông như Cố vấn nằm DƯỚI Mama thay vì ngang hàng. */
.sd-tang-hai {
  display: flex; align-items: stretch; gap: 0;
  flex-wrap: wrap; justify-content: center; width: 100%;
}
.sd-o-mama.o-co-van { border-style: dashed; }
.sd-cheo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 4px; min-width: 76px; position: relative;
}
.sd-cheo::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%;
  border-top: 2px dashed var(--nhan);
}
.sd-cheo span {
  position: relative; background: var(--the); padding: 1px 6px;
  font-size: 11px; color: var(--nhan); font-weight: 600; white-space: nowrap;
}
@media (max-width: 760px) {
  .sd-cheo { min-height: 34px; width: 100%; }
  .sd-cheo::before { left: 50%; right: auto; top: 4px; bottom: 4px; border-top: none; border-left: 2px dashed var(--nhan); }
}

/* --- Thanh ngang toả xuống các phòng --- */
.sd-toa { width: 100%; display: flex; justify-content: center; }
.sd-toa-trong { height: 18px; border-top: 2px solid var(--vien-sang); width: 80%; position: relative; }

/* --- Tầng 3: các phòng ban --- */
.sd-phong-hang {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 14px; margin-top: 2px;
}
.sd-phong {
  border: 1px solid var(--vien); border-radius: 10px; padding: 12px;
  background: var(--the-cao); position: relative;
}
.sd-phong.co-chay { border-color: var(--nhan); }
.sd-phong .ten-phong { font: 600 13px/1.35 inherit; color: var(--chu); }
.sd-phong .tran {
  font-size: 11px; color: var(--chu-mo); margin-top: 3px;
  display: inline-block; border: 1px solid var(--vien-sang); border-radius: 999px; padding: 0 7px;
}
.sd-phong .tran.cao { color: var(--nhan); border-color: var(--nhan); }
.sd-ds-agent { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

/* --- Một agent --- */
.sd-agent {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid transparent; border-radius: 7px; padding: 5px 7px;
  background: var(--nen);
}
.sd-agent:hover { border-color: var(--vien-sang); }
.sd-agent.chon { border-color: var(--nhan); }
.sd-agent .cham { width: 8px; height: 8px; border-radius: 50%; background: var(--nguoi-ranh); flex: none; }
.sd-agent .ten-agent { font-size: 11.5px; color: var(--chu-vua); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-agent .dem { font-size: 11px; color: var(--chu-mo); margin-left: auto; flex: none; }

/* Đang chạy: chấm cam nhấp nháy + tên sáng lên */
.sd-agent.dang-chay { background: var(--nhan-nen); border-color: var(--nhan); }
.sd-agent.dang-chay .cham { background: var(--nhan); animation: tho 1.4s ease-in-out infinite; }
.sd-agent.dang-chay .ten-agent { color: var(--chu); font-weight: 600; }
@keyframes tho { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .sd-agent.dang-chay .cham { animation: none; } }

/* Agent chưa tồn tại (mới khai trong cơ cấu, chưa có file) */
.sd-agent.thieu { opacity: .45; }
.sd-agent.thieu .ten-agent { text-decoration: line-through; }
.sd-agent.thieu .dem { color: var(--canh); }

/* Việc agent đang làm, hiện ngay dưới tên */
.sd-viec-dang {
  font-size: 11px; color: var(--nhan); padding: 0 7px 4px 22px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===========================================================================
   SƠ ĐỒ VĂN PHÒNG — mỗi phòng ban là một căn phòng, mỗi agent là một người.
   Mục đích khác sơ đồ tổ chức ở trên: sơ đồ kia trả lời "ai báo cáo ai",
   sơ đồ này trả lời "lúc này ai đang ngồi làm gì".
   =========================================================================== */
.van-phong {
  margin: 18px 24px 0; padding: 22px 20px 20px;
  background: var(--the); border: 1px solid var(--vien); border-radius: 12px;
}
.van-phong h2 {
  margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .9px;
  text-transform: uppercase; color: var(--chu-vua);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

/* --- Tầng trên: phòng của Sếp và bàn Mama --- */
.vp-tang-tren {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
}
@media (max-width: 760px) { .vp-tang-tren { grid-template-columns: 1fr; } }

/* --- Một CĂN PHÒNG: có tường, có biển tên gắn trên tường --- */
.vp-phong {
  border: 2px solid var(--vien-sang); border-radius: 4px;
  padding: 0 0 12px; background: var(--the-cao);
  position: relative; overflow: hidden;
}
.vp-phong.co-chay { border-color: var(--nhan); }
.vp-phong.phong-sep { border-width: 3px; border-color: var(--nhan); }

/* Biển tên phòng — như tấm biển gắn trên cửa */
.vp-phong .bien {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 9px 12px; margin-bottom: 14px;
  background: var(--the); border-bottom: 2px solid var(--vien-sang);
}
.vp-phong.co-chay .bien { border-bottom-color: var(--nhan); }
.vp-phong .bien-ten { font: 600 13px/1.3 inherit; color: var(--chu); }
.vp-phong .bien-phu { font-size: 11px; color: var(--chu-mo); white-space: nowrap; }
.vp-phong .bien-phu.dang { color: var(--nhan); font-weight: 600; }

/* Sàn phòng — nơi kê các bàn */
.vp-san {
  display: flex; flex-wrap: wrap; gap: 12px 14px;
  align-items: flex-start; justify-content: flex-start;
  padding: 0 12px;
}

/* --- MỘT CHỖ NGỒI: người + bàn làm việc --- */
.vp-nguoi {
  width: 74px; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; position: relative;
}
.vp-nguoi svg { display: block; overflow: visible; }
.vp-nguoi .dau, .vp-nguoi .than { fill: var(--nguoi-ranh); transition: fill .25s; }
/* Mặt bàn + chân bàn */
.vp-nguoi .ban-mat { fill: var(--nguoi-ranh); transition: fill .25s; }
.vp-nguoi .ban-chan { stroke: var(--nguoi-ranh); stroke-width: 1.6; transition: stroke .25s; }
/* Màn hình trên bàn — sáng lên khi đang làm việc */
.vp-nguoi .man-hinh { fill: var(--the); stroke: var(--nguoi-ranh); stroke-width: 1.2; transition: fill .25s, stroke .25s; }

.vp-nguoi .ten {
  font-size: 11px; color: var(--chu-mo); margin-top: 5px; text-align: center;
  line-height: 1.25; word-break: break-word;
}

/* Đang làm việc: người sáng màu lửa, đầu gật như đang gõ máy,
   màn hình trên bàn sáng lên, có ba chấm suy nghĩ */
.vp-nguoi.lam .dau, .vp-nguoi.lam .than { fill: var(--nhan); }
.vp-nguoi.lam .ban-mat { fill: var(--chu-mo); }
.vp-nguoi.lam .ban-chan { stroke: var(--chu-mo); }
.vp-nguoi.lam .man-hinh { fill: var(--nhan-nen); stroke: var(--nhan); }
.vp-nguoi.lam .ten { color: var(--chu); font-weight: 600; }
.vp-nguoi.lam .dau { animation: gat 2.2s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes gat { 0%,100% { transform: translateY(0) } 45% { transform: translateY(1.6px) } }

.vp-cham { opacity: 0; }
.vp-nguoi.lam .vp-cham { opacity: 1; }
.vp-nguoi.lam .vp-cham circle { fill: var(--nhan); animation: nhay 1.5s ease-in-out infinite; }
.vp-nguoi.lam .vp-cham circle:nth-child(2) { animation-delay: .25s; }
.vp-nguoi.lam .vp-cham circle:nth-child(3) { animation-delay: .5s; }
@keyframes nhay { 0%,70%,100% { opacity: .25 } 35% { opacity: 1 } }

/* Bàn trống — agent chưa tồn tại. Vẽ cái bàn nhưng không có người ngồi. */
.vp-nguoi.vang { opacity: .42; }
.vp-nguoi.vang .ten { text-decoration: line-through; }
.vp-nguoi.vang .dau, .vp-nguoi.vang .than {
  fill: none; stroke: var(--nguoi-ranh); stroke-width: 1.4; stroke-dasharray: 3 2;
}

.vp-nguoi.chon .ten { color: var(--nhan); font-weight: 600; }
.vp-nguoi.chon::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 26px; height: 2px; background: var(--nhan); border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vp-nguoi.lam .dau, .vp-nguoi.lam .vp-cham circle { animation: none; }
}

/* Hai bàn ngang nhau (Mama ↔ Cố vấn), giữa là vạch soi chéo */
.vp-san-doi { align-items: center; justify-content: center; gap: 4px; }
.vp-vach-cheo {
  flex: 1 1 60px; min-width: 56px; max-width: 110px;
  position: relative; display: flex; align-items: center; justify-content: center;
  align-self: center; margin-bottom: 18px;
}
.vp-vach-cheo::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px dashed var(--nhan);
}
.vp-vach-cheo span {
  position: relative; background: var(--the-cao); padding: 1px 5px;
  font-size: 11px; color: var(--nhan); font-weight: 600; white-space: nowrap;
}

/* Bong bóng việc đang làm, nằm dưới sàn phòng */
.vp-dang-lam { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.vp-bong {
  font-size: 11px; color: var(--nhan); line-height: 1.4;
  background: var(--nhan-nen); border-left: 2px solid var(--nhan);
  border-radius: 0 6px 6px 0; padding: 4px 8px;
}
.vp-bong b { color: var(--chu); font-weight: 600; }
.vp-trong { font-size: 11px; color: var(--chu-mo); margin-top: 9px; }

/* Hàng các phòng ban */
.vp-hang {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}

/* Khối việc chờ Sếp duyệt — cố ý nổi bật, không cho bỏ sót */
.khoi-duyet {
  margin: 18px 24px 0; padding: 16px 18px;
  background: var(--the); border: 2px solid var(--canh); border-radius: 12px;
}
.khoi-duyet h3 {
  margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--canh);
}
.khoi-duyet .dan { font-size: 12.5px; color: var(--chu-vua); margin: 0 0 12px; }
.viec-duyet {
  border: 1px solid var(--vien); border-radius: 9px; padding: 12px 14px;
  margin-bottom: 9px; background: var(--the-cao);
}
.viec-duyet .ten { font-weight: 600; font-size: 14.5px; }
.viec-duyet .vi { font-size: 12.5px; color: var(--canh); margin-top: 5px; }
.viec-duyet .noi-dung {
  font-size: 12.5px; color: var(--chu-vua); margin-top: 7px;
  background: var(--o-nhap); border-radius: 6px; padding: 8px 10px;
  max-height: 5em; overflow: auto; white-space: pre-wrap;
}
.viec-duyet .meo { font-size: 11.5px; color: var(--chu-mo); margin-top: 6px; }
.viec-duyet .nut-nho { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.viec-duyet .nut-nho button { padding: 6px 14px; font-size: 13px; }

/* Nhãn phòng ban + người giao */
.dau-phong {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--vien-sang); color: var(--chu-mo); margin-left: 6px;
  vertical-align: middle; font-weight: 500;
}
.dau-mama { border-color: var(--nhan); color: var(--nhan); }
.o-so.cho-duyet .so { color: var(--canh); }
.o-so.cho-duyet::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--canh); }

/* Dấu hiệu nền ngoài trên thẻ việc */
.dau-nen {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--vien-sang); color: var(--chu-vua); margin-left: 6px;
  vertical-align: middle; font-weight: 500;
}
.dau-nen.ngoai { border-color: var(--nhan); color: var(--nhan); }
.hop-mk input { margin-bottom: 10px; }

.hop-log {
  background: var(--the); border: 1px solid var(--vien); border-radius: 12px;
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.dau-log {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--vien);
}
.dau-log > div { display: flex; gap: 8px; }
#log-noi-dung {
  margin: 0; padding: 16px; overflow: auto; flex: 1;
  font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; line-height: 1.6;
  white-space: pre-wrap; color: var(--chu-vua);
}