/* ===== 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: chạy cả khi lưu lượng = 0, nên cạnh chưa có
   lượt nào vẫn sống chứ không trông như bị đứt. */
.sd-cur { fill: none; stroke-linecap: round; opacity: .3; stroke-dasharray: 2 17;
          animation: sd-chay 3.2s linear infinite; pointer-events: none; }
.sd-cur.hoi   { stroke-dasharray: 1.5 22; animation-duration: 6.5s; opacity: .2; }
.sd-cur.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); }
.sd-so { font: 700 11px/1 var(--sans, system-ui); paint-order: stroke;
         stroke: var(--surface, #080c14); stroke-width: 4px; }

/* ---- 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; }
/* Agent 2 cố ý không nối ai — vẽ mờ + nét đứt để thấy ngay đó là chủ ý */
.sd-node.roi { opacity: .72; }
.sd-node.roi .sd-shape { stroke-dasharray: 4 4; }

.sd-orb { pointer-events: none; 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-ring, .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; }
}

/* ---- 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 .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; }