/* ── NỀN NÚT GIỐNG THẺ MONITOR (dễ nhìn hơn) ──
   Dùng đúng nền + bóng của các thẻ biểu đồ ở trang Monitor (.mon-c / .mon-t).
   Viền vẫn giữ màu xanh như cũ; trạng thái "đang bật" vẫn sáng xanh để phân biệt.
   Muốn quay lại nền cũ: bỏ dòng <link href="css/btn-surface.css"> trong index.html. */

.perf-action-btn,
.perf-preset-btn,
.perf-preset-btn--primary,
.rj-btn,
.ck-tile {
  background: rgba(20,24,33,0.72);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* Di chuột: sáng hơn một chút */
.perf-action-btn:hover,
.perf-preset-btn:hover,
.perf-preset-btn--primary:hover,
.rj-btn:hover,
.ck-tile:hover {
  background: rgba(30,37,50,0.9);
}

/* Đang bật / đang chọn: giữ nền xanh sáng như cũ (kể cả khi di chuột) */
.perf-action-btn.active, .perf-action-btn.active:hover,
.perf-preset-btn.active, .perf-preset-btn.active:hover {
  background: rgba(0,180,255,.18);
}
.rj-btn.on, .rj-btn.on:hover { background: rgba(0,180,255,.16); }
.ck-tile.is-on { background: rgba(30,37,50,0.9); }

/* Nút xoá: nền như nút khác, di chuột thì ửng đỏ */
.rj-btn--x:hover, .rj-danger:hover { background: rgba(244,63,94,.18); }
.rj-danger.is-confirm { background: rgba(244,63,94,.35); }

/* Nút đang khoá */
.rj-btn:disabled:hover { background: rgba(20,24,33,0.72); }