/* ── Thanh trạng thái trên đầu: bắt đầu từ mép phải sidebar (cùng đường kẻ dọc) ── */
.hstat {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--sidebar-w) + 24px);
  display: flex; align-items: center; gap: 10px;
}
.hstat[hidden] { display: none; }
/* nút bo tròn viền xanh — cùng kiểu với nút "x/y online" */
.hstat__b {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px;
  border-radius: 999px; border: 1px solid rgba(var(--cyan),.5); background: rgba(var(--cyan),.06);
  color: rgb(var(--cyan)); text-shadow: 0 0 6px rgba(var(--cyan),.4);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; cursor: pointer;
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.hstat__b[hidden] { display: none; }
.hstat__b:hover, .hstat__b:focus-visible { border-color: rgba(var(--cyan),.85); background: rgba(var(--cyan),.14); box-shadow: 0 0 12px rgba(var(--cyan),.3); outline: none; }
.hstat__b i { width: 9px; height: 9px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 6px rgba(244,63,94,.8); }
.hstat__b.is-on i { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.9); }
/* màn hẹp: không đủ chỗ cạnh logo → ẩn */
@media (max-width: 1000px) { .hstat { display: none; } }
.hstat__b--old { cursor: help; color: #ff8095; border-color: rgba(244,63,94,.6); background: rgba(244,63,94,.1); text-shadow: none; }
.hstat__b--old:hover { border-color: rgba(244,63,94,.9); background: rgba(244,63,94,.16); box-shadow: none; }