/* hop-guiweb.css — VÁ GIAO DIỆN GUEST + LƯỚI THEO BAR (Web-TaiApp, lệnh anh Triệu 12/10/2026).
   Nạp SAU hop.css. Gỡ = bỏ thẻ <link> trong hop.html (+ lùi hop-app.js) ⇒ hồi nguyên.

   G1 ⛔ ĐẦU KHUNG BỊ CẮT, ⛔ CUỘN LÊN ĐƯỢC (đo 375×812: bấm «Tuỳ chọn khác» ⇒ thẻ top = −237 px
      ngay cả khi scrollTop = 0 ⇒ ô xem trước camera nằm ở vùng âm, mất hẳn).
      Gốc: #uiCenter là flex align-items:center + overflow:auto — phần thừa của thẻ cao hơn khung
      tràn lên TOẠ ĐỘ ÂM, không cuộn tới được. Vá 07/10 chỉ áp cho thẻ khách (.pj-moi); bấm «Tuỳ chọn
      khác» gỡ lớp ấy ⇒ lỗi quay lại. ⇒ Áp cho MỌI thẻ: căn đầu + margin auto (còn chỗ vẫn giữa). */
#uiCenter { align-items: flex-start; }
#uiCenter > .card { margin-top: auto; margin-bottom: auto; }

/* G2 ⛔ CUỘN LỒNG TRÊN ĐIỆN THOẠI: cột form có max-height 100vh−150 + overflow riêng ⇒ trên màn hẹp
      (xếp 1 cột) hoặc thấp (điện thoại ngang ~375 px ⇒ hộp cuộn chỉ còn 225 px) người dùng vuốt trúng
      hộp con, trang không chạy. Màn xếp cột / màn thấp ⇒ bỏ hộp cuộn con, cả thẻ cuộn trong #uiCenter. */
@media (max-width: 900px), (max-height: 560px) {
  .prejoin .fm { max-height: none; overflow: visible; }
}
#uiCenter { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

/* G3 Tiêu đề thẻ khách «BẠN ĐƯỢC MỜI…» + «Phòng 58123»: rời chế độ gọn (Tuỳ chọn khác) thì hai dòng
      dính nhau thành «…CUỘC HỌPPhòng 58123». Cho hai dòng tự xuống hàng ở mọi chế độ. */
.vm-mat, .vm-so { display: block; }

/* G4 THẺ KHÁCH TRÊN ĐIỆN THOẠI: trước đây khung xem trước camera bị đẩy XUỐNG DƯỚI form (order 2) ⇒
      khách mở link thấy «không có camera». Nay: tiêu đề → XEM TRƯỚC CAMERA → tên → Vào họp.
      Cột form `display: contents` ⇒ con của nó thành con trực tiếp của .prejoin ⇒ nút «Vào họp» sticky
      bám đáy suốt chiều dài thẻ (trước chỉ bám trong cột form). */
@media (max-width: 760px) {
  .pj-moi .prejoin { display: flex; flex-direction: column; gap: 12px; }
  .pj-moi .prejoin .fm { display: contents; }
  .pj-moi .prejoin .pj-doi { display: contents; }   /* #bJoin nằm trong .pj-doi ⇒ sticky cũ bị kẹt trong hộp 56 px, ⛔ bao giờ bám đáy */
  .pj-moi .prejoin .fm > h1 { order: -3; margin-bottom: 0; }
  .pj-moi .prejoin .fm > .sub { order: -2; margin-bottom: 0; }
  .pj-moi .prejoin .pv { order: -1; }
  .pj-moi .pv-box { aspect-ratio: 4 / 3; max-height: 34vh; max-height: 34svh; }
}

/* G5 Hướng dẫn cấp quyền camera/micrô (chèn từ hop-app.js khi bị chặn) + nút Thử lại */
.pv-box .off .pv-huong { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); text-align: left; max-width: 34ch; margin-left: auto; margin-right: auto; }
.pv-box .off .pv-thu { margin-top: 10px; }
.pv-box .off { padding: 12px 14px; }
/* có hướng dẫn ⇒ khung tự cao theo chữ (khuôn 16:9 / 4:3 cắt mất nút Thử lại). Chỉ khi dòng báo đang HIỆN —
   camera chạy lại thì .off ẩn ⇒ khung về đúng tỉ lệ cho video. */
.pv-box:has(> .off:not([hidden]) .pv-huong) { aspect-ratio: auto; max-height: none; min-height: 180px; }

/* L1 LƯỚI THEO BAR (`_luoiPhuKin` 5.29.x): ô cách nhau 6 px (Bar: margin 3), bo 10 px, sát khung. */
#stage:not(.speaker):not(.trinhchieu):not(.toanman-cs) { gap: 6px; padding: 6px; }
#stage > .tile { border-radius: 10px; }
#stage.toanman-cs > .tile.screen { border-radius: 0; }
/* L2 ô trống của lưới cố định 3×2 · 3×3 · 4×4 · 2×4 (Bar: «phải đủ số cho khách hàng đếm») */
#stage > .tile.o-trong {
  background: color-mix(in srgb, var(--navy) 55%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); cursor: default;
}

/* G6 ĐIỆN THOẠI NẰM NGANG (thấp ≤ 500 px, rộng ≥ 600 px): xếp 1 cột thì nút «Vào họp» nằm sâu ~500 px
      dưới đáy (đo 844×390). ⇒ Thẻ khách xếp HAI CỘT: trái = xem trước + nút, phải = tiêu đề + tên + Vào họp. */
@media (max-height: 500px) and (min-width: 600px) {
  .pj-moi .prejoin { flex-direction: row; align-items: flex-start; gap: 16px; }
  .pj-moi .prejoin .pv { order: 0; flex: 1 1 50%; padding: 10px; }
  .pj-moi .prejoin .fm { order: 0; flex: 1 1 50%; justify-content: flex-start; }
  .pj-moi .pv-box { aspect-ratio: 16 / 9; max-height: 52vh; }
  .card.pj-moi { padding: 14px; }
  .vm-so { font-size: 24px; }
  .pj-moi #bJoin { position: sticky; bottom: calc(8px + var(--sab, 0px)); z-index: 5; }
}