/* ===== SƠ ĐỒ KẾT NỐI ĐỘI AGENT — "Chòm sao" ===== */
.sd-wrap { position: relative; }
.sd-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ---- dây ---- */
.sd-edge { fill: none; stroke-linecap: round; transition: opacity .22s, stroke-width .22s; }
.sd-edge.hoi { stroke-dasharray: 5 9; opacity: .62; }
.sd-edge.song { filter: url(#sd-gnho); }

/* Lớp "dòng chảy" chồng lên dây.
   TRƯỚC 20/08/2026 lớp này chạy CẢ KHI lưu lượng = 0, với lý do "cạnh chưa
   có lượt nào vẫn sống chứ không trông như bị đứt". Đó là trang trí: sơ đồ
   không có việc nào chạy trông y hệt sơ đồ đang bận. Sếp bắt đúng chỗ này.
   Nay: KHÔNG có lượt thì KHÔNG có chuyển động. Dây tĩnh vẽ nét đứt mờ —
   nhìn là biết "có đường nối, chưa có việc đi qua". */
.sd-cur { fill: none; stroke-linecap: round; opacity: .13; stroke-dasharray: 2 12;
          animation: none; pointer-events: none; }
.sd-cur.song       { opacity: .3;  animation: sd-chay 3.2s linear infinite; }
.sd-cur.song.hoi   { stroke-dasharray: 1.5 22; animation-duration: 6.5s; opacity: .2; }
.sd-cur.song.khach { opacity: .44; animation-duration: 2.2s; }
@keyframes sd-chay { to { stroke-dashoffset: -190; } }

.sd-dot  { filter: url(#sd-glon); }
.sd-tail { filter: url(#sd-gnho); }
/* Số tin + số việc ghi thẳng trên mọi dây, kể cả 0 để không tạo khoảng mù. */
.sd-so { font: 700 11.5px/1 var(--sans, system-ui); paint-order: stroke;
         stroke: var(--surface, #080c14); stroke-width: 4.5px; }
.sd-so .dv { font-weight: 500; opacity: .8; }
.sd-so.zero { opacity: .48; font-weight: 600; }

/* ---- nút ---- */
.sd-node { cursor: pointer; transition: opacity .22s; }
.sd-node .sd-shape { transition: stroke-width .2s; }
.sd-node:hover .sd-shape, .sd-node:focus-visible .sd-shape { stroke-width: 3; }
.sd-node:focus { outline: none; }
/* Dự phòng cho nút bị tách khỏi đội hình do cấu hình. */
.sd-node.roi { opacity: .72; }
.sd-node.roi .sd-shape { stroke-dasharray: 4 4; }

/* Quầng sáng cũng chỉ "thở" ở agent CÓ hoạt động trong cửa sổ. Agent nằm im
   thì quầng đứng yên và mờ hơn — nhìn lướt là đếm được bao nhiêu agent thật
   sự đang chạy. */
.sd-orb { pointer-events: none; opacity: .42; }
.sd-node.song .sd-orb { opacity: .75; animation: sd-tho 5s ease-in-out infinite; }
@keyframes sd-tho { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

.sd-num  { font: 700 19px/1 var(--sans, system-ui); }
.sd-ten  { font: 600 12.6px/1 var(--sans, system-ui); fill: var(--ink-1, #e9eef5);
           paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 3px; }
.sd-nhom { font: 10.4px/1 var(--sans, system-ui); opacity: .72; }
.sd-badge text { font: 700 11px/1 var(--sans, system-ui); fill: #fff; }
.sd-send  text { font: 700 11px/1 var(--sans, system-ui); }

/* Vòng nhịp: chỉ nút đang có việc mới đập. Hai vòng lệch pha cho có chiều sâu. */
.sd-ring { fill: none; stroke-width: 1.3; opacity: 0;
           transform-origin: center; transform-box: fill-box;
           animation: sd-nhip 2.7s ease-out infinite; }
.sd-ring.r2 { animation-delay: 1.35s; }
@keyframes sd-nhip {
  0%   { opacity: .6; transform: scale(1); }
  72%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* ---- chế độ soi ---- */
svg.dang-soi .sd-node.mo, svg.dang-soi .sd-edge.mo { opacity: .09; }
svg.dang-soi .sd-node.mo .sd-ring { animation: none; opacity: 0; }
svg.dang-soi .sd-edge.noi { opacity: 1; stroke-width: 4.5; }
svg.dang-soi .sd-hat { opacity: .22; }

/* ---- người không chịu được chuyển động ---- */
@media (prefers-reduced-motion: reduce) {
  .sd-cur, .sd-cur.song, .sd-ring, .sd-node.song .sd-orb { animation: none; }
  .sd-cur { opacity: .34; stroke-dasharray: 4 7; }
  .sd-ring { opacity: .26; }
  .sd-dot, .sd-tail { display: none; }
  .sd-edge, .sd-node { transition: none; }
}

/* ---- dòng trạng thái thật, ngay dưới thanh chọn cửa sổ ---- */
.sd-that { font-size: 12.6px; color: var(--ink-3, #68748a); margin: -2px 0 11px;
           padding: 8px 12px; border-radius: 11px; background: var(--surface-2, #0e1420);
           border: 1px solid var(--border, #1e2837); }
.sd-that .dang-chay { color: var(--s3, #199e70); }
.sd-that .dung-im   { color: var(--ink-2, #9aa6b8); }

/* ---- chú thích ---- */
.sd-chu { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 14px; padding-top: 13px;
          border-top: 1px dashed var(--border, #1e2837);
          font-size: 12.3px; color: var(--ink-3, #68748a); }
.sd-chu i { display: inline-block; width: 24px; height: 0; vertical-align: middle; margin-right: 7px; }
.sd-chu .l0 { border-top: 3px solid #7c3aed; }
.sd-chu .l1 { border-top: 3px solid #4b9fe0; }
.sd-chu .l2 { border-top: 3px solid #ef5f57; }
.sd-chu .l3 { border-top: 3px solid #22c26e; }
.sd-chu .l4 { border-top: 2px dashed #94a3b8; }