/* Phòng họp có gọi — giao diện kính tối + neon (GenZ) */
.mt {
  --a1: #8b5cf6; --a2: #ff4fa3; --a3: #ffb347; --neon: #5cf2ff; --ok: #4ade80; --bad: #ff5470;
  position: fixed; z-index: 40; top: 64px; right: 14px; width: min(452px, calc(100vw - 20px));
  font-family: 'Be Vietnam Pro', system-ui, sans-serif; color: #fff; display: flex; flex-direction: column;
  border-radius: 28px; padding: 1.5px; user-select: none; -webkit-user-select: none;
  background: linear-gradient(135deg, rgba(139,92,246,.9), rgba(255,79,163,.75) 50%, rgba(255,179,71,.7));
  box-shadow: 0 30px 80px -10px rgba(10,6,30,.75), 0 0 60px -12px rgba(139,92,246,.7);
  animation: mtIn .42s cubic-bezier(.2,1.2,.3,1) both;
}
.mt[hidden] { display: none; }
.mt > * { background: none; }
.mt::before { content: ""; position: absolute; inset: 1.5px; border-radius: 26.5px; z-index: -1;
  background: radial-gradient(120% 90% at 0% 0%, rgba(139,92,246,.28), transparent 60%), radial-gradient(100% 80% at 100% 100%, rgba(255,79,163,.2), transparent 55%), rgba(14,10,28,.9);
  backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); }
.mt.drag { transition: none; box-shadow: 0 40px 100px -10px rgba(10,6,30,.85), 0 0 80px -8px rgba(255,79,163,.7); }
@keyframes mtIn { from { opacity: 0; transform: translateY(-14px) scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.mt.wide { left: 50% !important; top: 5vh !important; right: auto !important; transform: translateX(-50%); width: min(1180px, 96vw); height: 88vh; animation: none; }
.mt.wide .mt-body { flex: 1; min-height: 0; }

.mt-bar { display: flex; align-items: center; gap: 9px; padding: 13px 14px 8px 18px; cursor: grab; position: relative; z-index: 1; }
.mt.drag .mt-bar { cursor: grabbing; }
.mt.wide .mt-bar { cursor: default; }
.mt-live { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 99px; font: 800 10px/1 'Inter', sans-serif; letter-spacing: .1em; background: linear-gradient(135deg, #ff3b6b, #ff7a45); box-shadow: 0 6px 16px -4px rgba(255,59,107,.7); }
.mt-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: mtBlink 1.3s infinite; }
@keyframes mtBlink { 50% { opacity: .25; transform: scale(.7); } }
.mt-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-cnt { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.62); padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.08); white-space: nowrap; }
.mt-lockb { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--a3); white-space: nowrap; }
.mt-lockb:empty { display: none; }
.mt-lockb svg { width: 13px; height: 13px; }
.mt-sp { flex: 1; }
.mt svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mt-hb { width: 32px; height: 32px; border-radius: 11px; border: 0; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; transition: .18s; }
.mt-hb:hover { background: rgba(255,255,255,.18); transform: scale(1.08); }
.mt-hb svg { width: 16px; height: 16px; }

.mt-body { position: relative; z-index: 1; padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 10px; overflow: auto; max-height: min(62vh, 560px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.mt.wide .mt-body { max-height: none; }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.mt.wide .mt-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; flex: 1; align-content: center; }
.mt.wide.stage .mt-grid { flex: none; align-content: start; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mt.stage .mt-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.mt.stage .mt-tile { aspect-ratio: 4/3; border-radius: 16px; }
.mt.stage .mt-ava canvas { height: 56%; }

/* ô người */
.mt-tile { --h: 260; position: relative; aspect-ratio: 16/10; border-radius: 22px; overflow: hidden; cursor: pointer;
  background: radial-gradient(90% 80% at 20% 10%, hsl(var(--h) 85% 55% / .55), transparent 62%), radial-gradient(80% 90% at 90% 100%, hsl(calc(var(--h) + 55) 90% 50% / .5), transparent 60%), hsl(var(--h) 45% 14%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1), 0 10px 24px -12px rgba(0,0,0,.7);
  transition: box-shadow .12s, transform .25s cubic-bezier(.2,1.3,.4,1); animation: mtPop .4s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes mtPop { from { opacity: 0; transform: scale(.8); } }
.mt-tile:hover { transform: translateY(-2px) scale(1.012); }
.mt-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.mt-tile.cam video { opacity: 1; }
.mt-tile.me video { transform: scaleX(-1); }
.mt-ava { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .25s; }
.mt-tile.cam .mt-ava { opacity: 0; }
.mt-ava canvas { height: 66%; aspect-ratio: 18/26; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); transform-origin: 50% 100%; }
.mt-tile.sp .mt-ava canvas { animation: mtBounce .42s ease-in-out infinite alternate; }
@keyframes mtBounce { to { transform: translateY(-5px) scale(1.04); } }
.mt-tile.sp { box-shadow: inset 0 0 0 2.5px var(--neon), 0 0 calc(10px + 26px * var(--lv, 0)) rgba(92,242,255,.75), 0 10px 24px -12px rgba(0,0,0,.7); }
.mt-tile.pin { box-shadow: inset 0 0 0 2px var(--a2), 0 10px 24px -12px rgba(0,0,0,.7); }
.mt-tile.pin.sp { box-shadow: inset 0 0 0 2.5px var(--neon), 0 0 22px rgba(92,242,255,.7); }
.mt-eq { position: absolute; top: 10px; left: 11px; display: none; align-items: flex-end; gap: 2.5px; height: 16px; padding: 4px 6px; border-radius: 9px; background: rgba(0,0,0,.4); backdrop-filter: blur(8px); }
.mt-tile.sp .mt-eq { display: flex; }
.mt-eq i { width: 3px; border-radius: 2px; background: var(--neon); height: 40%; animation: mtEq .6s ease-in-out infinite alternate; }
.mt-eq i:nth-child(2) { animation-delay: -.2s; } .mt-eq i:nth-child(3) { animation-delay: -.4s; } .mt-eq i:nth-child(4) { animation-delay: -.1s; }
@keyframes mtEq { from { height: 20%; } to { height: 100%; } }
.mt-name { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 7px; border-radius: 99px; background: rgba(10,6,22,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.mt-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-name .mi { display: grid; place-items: center; color: var(--ok); }
.mt-name .mi.off { color: var(--bad); }
.mt-name .mi svg { width: 14px; height: 14px; }
.mt-name .crown { display: grid; place-items: center; color: #ffd24d; filter: drop-shadow(0 0 5px rgba(255,210,77,.7)); }
.mt-name .crown[hidden] { display: none; }
.mt-name .crown svg { width: 13px; height: 13px; fill: currentColor; }
.mt-ping { position: absolute; top: 10px; right: 11px; padding: 3px 8px; border-radius: 99px; font: 700 10px/1.2 'Inter', sans-serif; background: rgba(0,0,0,.42); backdrop-filter: blur(8px); }
.mt-ping[hidden] { display: none; }
.mt-ping::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 0; background: currentColor; }
.mt-ping[data-q=good] { color: var(--ok); } .mt-ping[data-q=mid] { color: #ffc94d; } .mt-ping[data-q=bad] { color: var(--bad); }
.mt-more { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 10px; border: 0; background: rgba(10,6,22,.62); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: .15s; backdrop-filter: blur(10px); }
.mt-more[hidden] { display: none; }
.mt-tile:hover .mt-more { opacity: 1; }
.mt-more svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.mt-conn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; background: rgba(12,8,24,.55); backdrop-filter: blur(4px); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); z-index: 2; }
.mt-conn[hidden] { display: none; }
.mt-conn span { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.25); border-top-color: var(--neon); animation: mtSpin .8s linear infinite; }
@keyframes mtSpin { to { transform: rotate(360deg); } }

/* sân khấu (màn hình chia sẻ / ô ghim) */
.mt-stage { position: relative; border-radius: 20px; overflow: hidden; background: #05030c; aspect-ratio: 16/9; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), 0 14px 34px -14px rgba(0,0,0,.8); }
.mt.wide .mt-stage { aspect-ratio: auto; flex: 1; min-height: 0; }
.mt-stage[hidden] { display: none; }
.mt-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.mt-stage video[hidden] { display: none; }
.mt-stcap { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(10,6,22,.7); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.mt-full { position: absolute; right: 10px; top: 10px; }
.mt-selfshare { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; background: radial-gradient(70% 70% at 50% 40%, rgba(255,79,163,.28), transparent 70%); }
.mt-selfshare[hidden] { display: none; }
.mt-selfshare svg { width: 44px; height: 44px; color: var(--a2); filter: drop-shadow(0 0 14px rgba(255,79,163,.8)); }
.mt-selfshare b { font-size: 15px; } .mt-selfshare span { font-size: 12px; color: rgba(255,255,255,.6); }

/* thanh điều khiển */
.mt-dock { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px 14px; }
.mt-b { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 52px; height: 54px; padding: 0 7px; border: 0; border-radius: 18px; cursor: pointer; color: #fff; font-family: inherit;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: transform .18s cubic-bezier(.2,1.5,.4,1), background .18s, box-shadow .18s; }
.mt-b small { font-size: 9.5px; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,.72); white-space: nowrap; }
.mt-b:hover { transform: translateY(-3px) scale(1.06); background: rgba(255,255,255,.2); }
.mt-b:active { transform: scale(.94); }
.mt-b.on { background: linear-gradient(135deg, rgba(74,222,128,.34), rgba(34,211,238,.28)); box-shadow: inset 0 0 0 1.5px rgba(74,222,128,.7), 0 8px 22px -8px rgba(74,222,128,.7); }
.mt-b.on small { color: #bdf8d1; }
.mt-b.off { background: rgba(255,84,112,.2); box-shadow: inset 0 0 0 1.5px rgba(255,84,112,.6); }
.mt-b.off svg { color: #ff8da0; }
.mt-b.share { background: linear-gradient(135deg, rgba(139,92,246,.45), rgba(255,79,163,.4)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 8px 22px -8px rgba(139,92,246,.8); }
.mt-b.share.live { background: linear-gradient(135deg, #ff3b6b, #ff7a45); animation: mtGlow 1.6s infinite; }
@keyframes mtGlow { 50% { box-shadow: 0 0 0 5px rgba(255,59,107,.25), 0 8px 22px -6px rgba(255,59,107,.9); } }
.mt-b.dim { opacity: .45; }
.mt-b.tog.on2 { background: linear-gradient(135deg, rgba(139,92,246,.5), rgba(34,211,238,.32)); box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.9); }
.mt-b.leave { min-width: 62px; background: linear-gradient(135deg, #ff3b6b, #d6246e); box-shadow: 0 10px 24px -8px rgba(255,59,107,.8), inset 0 0 0 1px rgba(255,255,255,.25); }
.mt-b.leave small { color: #fff; }
.mt-b.leave:hover { background: linear-gradient(135deg, #ff5a82, #ec2f7e); }
.mt-sep { width: 1px; height: 30px; background: rgba(255,255,255,.14); margin: 0 2px; }

/* menu ⋯ của chủ phòng */
.mt-menu { position: absolute; z-index: 5; width: 184px; padding: 8px; border-radius: 18px; background: rgba(22,16,42,.96); backdrop-filter: blur(20px); box-shadow: 0 18px 44px -8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 3px; animation: mtPop .2s both; }
.mt-menu[hidden] { display: none; }
.mt-menu b { font-size: 11px; color: rgba(255,255,255,.55); padding: 4px 8px 5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-menu button { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: #fff; font: 600 12.5px 'Be Vietnam Pro', sans-serif; cursor: pointer; }
.mt-menu button:hover { background: rgba(255,255,255,.12); }
.mt-menu button.red { color: #ff8da0; }
.mt-menu svg { width: 16px; height: 16px; }

/* thu nhỏ */
.mt-pill { display: none; position: relative; z-index: 1; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; cursor: pointer; }
.mt.min { width: auto; border-radius: 99px; }
.mt.min::before { border-radius: 99px; }
.mt.min .mt-bar, .mt.min .mt-body, .mt.min .mt-dock { display: none; }
.mt.min .mt-pill { display: flex; }
.mt-pill b { font-size: 13px; }
.mt-pav { display: flex; }
.mt-pav em { width: 26px; height: 26px; margin-left: -7px; border-radius: 50%; display: grid; place-items: center; font: 800 11px 'Inter', sans-serif; font-style: normal; background: hsl(var(--h) 70% 45%); box-shadow: 0 0 0 2px #1a1230; }
.mt-pav em:first-child { margin-left: 0; }
.mt-pav em.sp { box-shadow: 0 0 0 2px var(--neon), 0 0 10px var(--neon); }
.mt-pill .mt-b { min-width: 38px; width: 38px; height: 38px; border-radius: 13px; padding: 0; }
.mt-pill .mt-b small { display: none; }
.mt-pill .mt-b svg { width: 18px; height: 18px; }

/* khi đang họp: nút Đứng dậy của game nhường chỗ, gợi ý phím */
body.meeting #standBtn { bottom: 22px !important; opacity: .0; pointer-events: none !important; }
@media (max-width: 700px) {
  .mt { left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px; width: auto; transform: none !important; border-radius: 24px; }
  .mt.wide { height: 82vh; top: auto !important; }
  .mt-body { max-height: 46vh; }
  .mt-grid { grid-template-columns: repeat(2, 1fr); }
  .mt-b { min-width: 46px; height: 50px; border-radius: 16px; padding: 0 5px; }
  .mt-b small { font-size: 8.5px; }
  .mt-sep { display: none; }
  .mt-dock { gap: 6px; }
  .mt.min { left: auto !important; }
  .mt-more { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .mt, .mt-tile, .mt-live i, .mt-eq i { animation: none !important; } }

.mt-err { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; font-size: 12.5px; line-height: 1.45; font-weight: 500; background: linear-gradient(135deg, rgba(255,84,112,.28), rgba(255,122,69,.2)); box-shadow: inset 0 0 0 1px rgba(255,120,140,.55); }
.mt-err[hidden] { display: none; }
.mt-err span { flex: 1; }
.mt-err button { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 11px; cursor: pointer; font: 700 12px 'Be Vietnam Pro', sans-serif; color: #2a0a12; background: #fff; }
.mt-err button:hover { transform: scale(1.05); }