/* ⭐ 10/10 (QN-WEB) — «Quyền nói» + «Chủ toạ điều hành».
   §15 (anh Triệu 10/10 tối): điều khiển là MỘT NHÓM RIÊNG trên thanh nút chân màn hình (cùng cỡ/kiểu .cbtn),
   có vạch ngăn với nhóm mic/cam/share/rời; menu chế độ + hàng chờ mở LÊN từ nút nhóm; chỉ báo mic gắn vào nút mic.
   ⛔ băng/khối riêng (băng #qnBang luôn ẩn — giữ thẻ để lùi). Lõi tắt ⇒ nhóm ⛔ dựng ⇒ thanh y cũ. */
#qnBang { display: none !important; }

/* nhóm quyền nói — cụm TRÁI sau nút lưới + toàn màn hình (anh Triệu 11/10), nút tròn 46 px như mọi nút thanh, vạch ngăn bên trái */
.qn-nhom { display: inline-flex; align-items: center; gap: 10px; margin-left: 4px; }
/* QN25: ⛔ chữ TD/LP/TL/CT trên nút chế độ — nút mang ICON của chế độ đang chạy (đặc tả nút chung §4) */
.qn-nhom .qn-o { position: relative; display: inline-flex; }
.qn-nhom .qn-vach { width: 1px; height: 30px; background: var(--line); flex: none; }
.qn-menu { left: 0; right: auto; min-width: 230px; }
.qn-menu button { justify-content: space-between; }
.qn-menu .qn-m-phu { font-size: 12px; color: var(--gold); flex: none; }
.qn-menu .qn-m-trong { font-size: 12.5px; color: var(--ink-3); padding: 6px 10px; }

/* màn hẹp (< 560 px): thanh không đủ chỗ ⇒ nhóm quyền nói thành HÀNG RIÊNG phía trên hàng nút, vẫn trong thanh */
#uiBar.qn-hai-hang { flex-wrap: wrap; row-gap: 8px; }
#uiBar.qn-hai-hang .grp-l { flex: 1 0 100%; display: flex; justify-content: center; order: -1; }
#uiBar.qn-hai-hang .qn-nhom { margin-left: 0; }
#uiBar.qn-hai-hang .qn-vach { display: none; }
#uiBar.qn-hai-hang .grp-r:empty { display: none; }   /* hàng nút chính căn giữa như khi không có nhóm */
#uiBar.qn-hai-hang .qn-menu { left: 50%; transform: translateX(-50%); }

/* §15-6 chỉ báo mic 🟢🔴🟠 trên CHÍNH nút mic (viền/màu) — ⛔ đổi cỡ nút */
#cMic.qn-cb-mo { box-shadow: 0 0 0 3px var(--success); }
#cMic.qn-cb-tat { box-shadow: 0 0 0 3px var(--danger); }
#cMic.qn-cb-khoa { background: var(--warning); color: #1b1300; box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 55%, transparent); }
#cMic.qn-nhay { animation: qn-nhay .25s ease-in-out 4; }
@keyframes qn-nhay { 50% { opacity: .45; } }

/* SoC 10/10 (lỗi CÓ SẴN, đo 382 px ở 375 px — mic và Rời bị cắt 3–4 px): màn ≤ 400 px thu nút thanh 46 → 42 px
   và khoảng cách cụm giữa 10 → 6 px (gap nội tuyến ở hop.html ⇒ cần !important). 7 nút ⇒ 7×42 + 6×6 = 330 px. */
/* QN25: ⛔ thu nút còn 42 px (đặc tả nút chung §2: vùng chạm ≥ 44) — cỡ nút + khoảng cách do hop-nut.css (44 px, cách 4 px) */
@media (max-width: 459px) { #uiBar.qn-hai-hang .qn-nhom { gap: 8px; } }

/* 11/10: đếm ngược khoá luân phiên trên nút Xin nói (giây còn lại, lõi khoa_den) */
.qn-nhom .qn-dem { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--gold); color: var(--on-accent, #1b1300); }

/* ⭐ 12/10 QN25 — đặc tả nút chung §4: mục chế độ trong menu có icon; mục không chọn được = mờ 40 %, VẪN chạm được (nói lý do) */
.qn-menu button[aria-disabled="true"], #qnMThem button[aria-disabled="true"] { opacity: .4; cursor: help; }
.qt-nhan .qt-ic svg { width: 14px; height: 14px; }

/* ═══════════ ⭐ 18/10 CD4 — popup «X xin nói» toàn màn + băng «Đang giữ quyền nói» ═══════════
   Chỉ được dựng khi lõi báo che_do_4_bat (hop-quyennoi.js) — ⛔ che_do_4_bat ⇒ không có phần tử nào ⇒ trang y cũ.
   Mọi màu lấy từ token của hop.css ⇒ theo đủ chủ đề (Sáng/Tối/…). z-index 85: trên hộp thoại (80), dưới ảnh xem lớn (9999). */
.qn-xc {
  position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center;
  padding: max(16px, var(--sat, 0px)) 16px max(16px, var(--sab, 0px));
  background: rgba(0, 0, 0, .58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.qn-xc[hidden] { display: none; }
.qn-xc-hop {
  width: min(100%, 420px); max-height: calc(100dvh - 32px); overflow-y: auto; text-align: center;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow, 0 18px 48px rgba(0, 0, 0, .45)); padding: 22px 20px 20px;
}
.qn-xc-ic { width: 52px; height: 52px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface-raised); color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.qn-xc-ic svg { width: 30px; height: 30px; }
.qn-xc-tieu { font-size: 20px; line-height: 1.25; font-weight: 700; margin: 0 0 4px; overflow-wrap: anywhere; }
.qn-xc-dem { font-size: 58px; line-height: 1.05; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; margin: 4px 0 8px; min-height: 61px; }
.qn-xc-vach { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 0 4px 12px; }
.qn-xc-vach i { display: block; height: 100%; width: 100%; background: var(--gold); transition: width .1s linear; }
.qn-xc-phu { font-size: 14px; line-height: 1.4; color: var(--ink-2); margin: 0 0 8px; }
.qn-xc-tam { font-size: 13px; line-height: 1.35; color: var(--warning); margin: 0 0 6px; }
.qn-xc-hang { font-size: 12.5px; color: var(--ink-3); margin: 0 0 6px; overflow-wrap: anywhere; }
.qn-xc-nut { display: flex; gap: 10px; margin-top: 14px; }
.qn-xc-nut .qn-xc-b { flex: 1 1 0; min-height: 52px; font-size: 16px; justify-content: center; }
.qn-xc-b:focus-visible { outline: 3px solid var(--gold-soft, var(--gold)); outline-offset: 2px; }
.qn-xc-b[disabled], .qn-xc-b[aria-disabled="true"] { opacity: .5; cursor: progress; }
@media (max-width: 380px) { .qn-xc-hop { padding: 18px 14px 16px; } .qn-xc-dem { font-size: 50px; } .qn-xc-tieu { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .qn-xc-vach i { transition: none; } }

/* băng «Đang giữ quyền nói: X» — nằm trong luồng trang dưới #qnBang (ẩn); gọn 1 dòng, ⛔ chiếm vùng cố định */
.qn-giu { min-height: 0; padding-top: 5px; padding-bottom: 5px; font-size: 13px; justify-content: center; }
.qn-giu[hidden] { display: none; }
.qn-giu .txt { flex: 0 1 auto; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qn-giu .ic svg { width: 16px; height: 16px; }
.banner.ok.qn-giu { background: color-mix(in srgb, var(--success) 20%, var(--navy-dark, var(--surface))); }