/* [15/10] BONG BÓNG MÀN HÌNH HỒ SƠ — cửa sổ noVNC + bong bóng góc phải (xem wow-bong-bong-man-hinh-ho-so-2026-10-15.js).
   Nạp ở cả trang trung tâm lẫn đại màn Toàn cảnh ⇒ mọi biến màu có giá trị dự phòng (đại màn không nạp wow-dai-man.css).
   Thay cho khối .ht-man cũ (một cửa sổ giữa màn, chỉ có nút đóng). */
.bb-luoi[hidden], .bb-dock[hidden], .bb-cua[hidden], .bb-cho[hidden] { display: none !important; }
body:has(.wdn-man) .bb-luoi, body:has(.wdn-man) .bb-dock { display: none !important; } /* màn đăng nhập phủ kín */

/* ── Lưới cửa sổ: 1 cửa sổ = giữa màn như cũ; 2–4 = chia ô, chừa dải phải cho bong bóng ── */
.bb-luoi { position: fixed; z-index: 45; display: grid; gap: 10px;
  top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1200px, 95vw); height: min(780px, 92dvh); }
.bb-luoi:not([data-so="1"]) { transform: none; top: 56px; left: 16px; right: 88px; bottom: 16px; width: auto; height: auto; }
.bb-luoi[data-so="2"] { grid-template-columns: 1fr 1fr; }
.bb-luoi[data-so="3"], .bb-luoi[data-so="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.bb-luoi[data-so="3"] .bb-lon { grid-column: span 2; }

.bb-cua { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--wow-vien, #4a2e20); border-radius: 14px; overflow: hidden; background: #070605;
  color: var(--wow-chu, #f2e9e4); box-shadow: 0 30px 90px rgb(0 0 0 / 0.75); }
.bb-cua-dau { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--wow-vien-nhat, #2a1d16); background: #0E0B0A; }
.bb-cua-dau h2 { margin: 0; font-weight: 300; font-size: 14px; letter-spacing: 0.04em; white-space: nowrap; } /* [16/10] tiêu đề = tầng 1 viết hoa ba tầng ⇒ hiện đúng chữ nguồn (chỉ hoa chữ đầu), bỏ in hoa CSS */
.bb-cua-nhac { flex: 1; min-width: 0; font-size: 11.5px; color: var(--wow-chu-3, #8a7b72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-nut { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--wow-vien-nhat, #2a1d16); background: transparent; color: var(--wow-chu-2, var(--wow-chu, #f2e9e4)); font-size: 15px; line-height: 1; }
.bb-nut:hover { filter: brightness(1.6); }
.bb-nut:focus-visible, .bb-bong:focus-visible, .bb-chon-so:focus-visible { outline: 2px solid var(--wow-cam-sang, #ff7a45); outline-offset: 2px; }
.bb-cua-than { position: relative; min-height: 0; }
.bb-khung { border: 0; width: 100%; height: 100%; display: block; background: #000; }
.bb-cho { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--wow-chu-3, #8a7b72); font-size: 14px; }

/* ── Dock bong bóng góc dưới phải (kiểu chat head Messenger) ── */
.bb-dock { position: fixed; z-index: 46; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bb-o { position: relative; }
.bb-bong { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 2px solid var(--wow-vien, #4a2e20); background: radial-gradient(circle at 30% 25%, #3a1d10, #0E0B0A 70%);
  color: var(--wow-cam-nhat, #ffb38f); font-family: var(--wow-font-mono, "JetBrains Mono", monospace); font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.6); }
.bb-bong:hover { filter: brightness(1.3); }
.bb-bong.dang-mo { border-color: var(--wow-cam-sang, #ff7a45); box-shadow: 0 0 0 3px rgb(var(--wow-cam-rgb) / 0.28), 0 10px 28px rgb(0 0 0 / 0.6); }
.bb-bo { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--wow-vien, #4a2e20); background: #0E0B0A; color: var(--wow-chu-3, #8a7b72); font-size: 10px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.15s; }
.bb-o:hover .bb-bo, .bb-bo:focus-visible { opacity: 1; }
@media (hover: none) { .bb-bo { opacity: 1; } }

.bb-chon { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 12px;
  border: 1px solid var(--wow-vien-nhat, #2a1d16); background: rgb(14 11 10 / 0.92); }
.bb-chon-nhan { font-size: 13px; color: var(--wow-chu-3, #8a7b72); }
.bb-chon-so { width: 30px; height: 26px; padding: 0; border-radius: 7px; cursor: pointer; border: 1px solid transparent; background: transparent;
  color: var(--wow-chu-2, #cfc2ba); font-family: var(--wow-font-mono, "JetBrains Mono", monospace); font-size: 12.5px; }
.bb-chon-so:hover:not(:disabled) { filter: brightness(1.5); }
.bb-chon-so.dang-chon { border-color: var(--wow-cam-sang, #ff7a45); color: var(--wow-cam-nhat, #ffb38f); }
.bb-chon-so:disabled { opacity: 0.3; cursor: default; }

/* ── Điện thoại: cửa sổ xếp dọc kín màn, bong bóng nhỏ lại ── */
@media (max-width: 768px) {
  .bb-luoi:not([data-so="1"]) { top: 8px; left: 8px; right: 8px; bottom: 76px; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); }
  .bb-luoi[data-so="3"] .bb-lon { grid-column: auto; }
  .bb-luoi[data-so="1"] { width: 96vw; height: min(780px, 80dvh); top: calc(50% - 30px); }
  .bb-dock { right: 10px; bottom: 10px; flex-direction: row-reverse; }
  .bb-chon { flex-direction: row; padding: 4px 6px; }
  .bb-bong { width: 48px; height: 48px; font-size: 13px; }
}