/* hop-nut.css — QUY ƯỚC TRẠNG THÁI NÚT DUY NHẤT, CHUNG WEB + MOBILE (Web-TaiApp, lệnh anh Triệu 12/10/2026).
   Khớp bảng rà Mobile (~/Desktop/RA_NUT_MOBILE_1212 §5) + đặc tả chung ~/Desktop/WEB_GUI_1212/DAC_TA_NUT_CHUNG.md.
   Nạp SAU hop.css + hop-quyennoi.css. Gỡ = bỏ thẻ <link> (+ thẻ script hop-nut.js) trong hop.html.

   ┌ Trạng thái ─────────────────┬ Biểu diễn ───────────────────────────────────────────────────────┐
   │ Thường / BẬT                │ nền chuẩn (--surface-raised) + icon 3D                           │
   │ TẮT mic/camera              │ icon GẠCH CHÉO + nền ĐỎ (luật 16/09 — chờ anh chốt điểm A)         │
   │ TẮT nút khác (.off)         │ icon gạch chéo + nền chuẩn nhạt                                   │
   │ ĐANG MỞ (bảng/menu) .on     │ nền chuẩn + VIỀN vàng (đứng yên)                                  │
   │ ĐANG HOẠT ĐỘNG              │ nền chuẩn + VIỀN màu + nhịp thở nhẹ:                              │
   │   .dang  đang nói/giữ lượt  │   xanh (--success)                                                │
   │   .rec   đang ghi           │   đỏ (--danger)                                                   │
   │   .cho   chờ lượt/đang chia sẻ │ vàng (--gold)                                                 │
   │ CÓ VIỆC CẦN XEM             │ nền chuẩn + CHẤM huy hiệu vàng (thay nền vàng chói — điểm B)      │
   │ KHÔNG BẤM ĐƯỢC              │ mờ 40 %; VẪN chạm được để hiện LÝ DO (hop-nut.js)                 │
   │ NHẤN                        │ thu 0,92 · tiêu điểm bàn phím: viền vàng 2 px cách 2 px            │
   │ NGUY HIỂM (.leave)          │ đỏ đặc — chỉ Rời họp / Kết thúc                                   │
   └─────────────────────────────┴───────────────────────────────────────────────────────────────────┘
   CỠ: vùng chạm ≥ 44 px (Mobile 48 dp) · nhãn chữ ngắn dưới icon (1 dòng, «…» khi dài). */

/* ── kích cỡ ── */
#uiBar .cbtn, .pv-ctl .cbtn { width: 44px; height: 44px; min-width: 44px; padding: 10px; }
@media (min-width: 560px) { #uiBar .cbtn { width: 46px; height: 46px; padding: 11px; } }
@media (max-width: 459px) {
  #uiBarCenter { gap: 4px !important; }
  #uiBar.qn-hai-hang .qn-nhom { gap: 8px; }
}

/* ── nền: mọi trạng thái dùng NỀN CHUẨN, chỉ khác viền/chấm — trừ tắt mic/camera (đỏ) và Rời (đỏ) ── */
.cbtn { transition: background .15s, color .15s, transform .12s, opacity .15s, box-shadow .15s; }
.cbtn.on, .cbtn.cho, .cbtn.dang, .cbtn.rec {
  background: var(--surface-raised); color: var(--ink);
}
.cbtn.on { box-shadow: inset 0 0 0 2px var(--gold); }
/* mic/camera BẬT = nền chuẩn, ⛔ viền (bật là trạng thái bình thường của thiết bị) */
#cMic.on, #cCam.on, #pvMic.on, #pvCam.on { box-shadow: none; }
.cbtn.off { background: color-mix(in srgb, var(--surface-raised) 70%, transparent); color: var(--ink-2); box-shadow: none; }
#cMic.off, #cCam.off, #pvMic.off, #pvCam.off { background: var(--danger); color: #fff; }
.cbtn.leave, .bar .cbtn.leave { background: var(--danger); color: #fff; box-shadow: none; }
.cbtn.dang { --nut-vien: var(--success); }
.cbtn.rec  { --nut-vien: var(--danger); }
.cbtn.cho  { --nut-vien: var(--gold); }
.cbtn.dang, .cbtn.rec, .cbtn.cho {
  box-shadow: inset 0 0 0 2px var(--nut-vien), 0 0 0 0 color-mix(in srgb, var(--nut-vien) 50%, transparent);
  animation: nut-tho 1.8s ease-in-out infinite;
}
@keyframes nut-tho {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--nut-vien), 0 0 0 0 color-mix(in srgb, var(--nut-vien) 50%, transparent); }
  50%      { box-shadow: inset 0 0 0 2px var(--nut-vien), 0 0 0 5px color-mix(in srgb, var(--nut-vien) 0%, transparent); }
}
/* chỉ báo «có việc cần xem» = chấm vàng góc trên-phải (huy hiệu số giữ nguyên chữ số) */
.cbtn > .badge-dot { top: -2px; right: -2px; background: var(--gold); color: var(--on-accent); }
.cbtn > .badge-dot.goi { background: var(--gold); }
/* không bấm được: mờ, vẫn nhận chạm (hop-nut.js đổi `disabled` → aria-disabled + nói lý do) */
.cbtn:disabled, .cbtn[aria-disabled="true"] {
  opacity: .4; cursor: help; box-shadow: none; animation: none;
}
.cbtn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.92); }
.cbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cbtn.dang, .cbtn.rec, .cbtn.cho { animation: none; } }

/* ── nhãn dưới icon ── */
#uiBar .cbtn, .pv-ctl .cbtn { position: relative; overflow: visible; }
.cbtn > .cb-nhan {
  position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  max-width: 52px; font-size: 10.5px; line-height: 13px; font-weight: 500;
  color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; text-align: center;
}
@media (min-width: 560px) { .cbtn > .cb-nhan { max-width: 64px; font-size: 11px; } }
.cbtn.dang > .cb-nhan { color: var(--success); }
.cbtn.rec > .cb-nhan, #cMic.off > .cb-nhan, #cCam.off > .cb-nhan, #pvMic.off > .cb-nhan, #pvCam.off > .cb-nhan { color: var(--danger-chu, var(--danger)); }
.cbtn.cho > .cb-nhan, .cbtn.on > .cb-nhan { color: var(--gold); }
#cMic.on > .cb-nhan, #cCam.on > .cb-nhan, #pvMic.on > .cb-nhan, #pvCam.on > .cb-nhan { color: var(--ink-2); }
#uiBar.co-nhan { padding-bottom: calc(26px + var(--sab, 0px)); }
#uiBar.co-nhan.qn-hai-hang { row-gap: 22px; }
.pv-ctl.co-nhan { margin-bottom: 16px; }

/* ── mục menu ⋯: vùng chạm ≥ 44 px, chấm «đang bật» = vàng ── */
.menu button { min-height: 44px; }
.menu button .on-dot { background: var(--gold); }