/* hop-demo.css — 2 PHÒNG DEMO LUÔN MỞ (Demo-Web 19/10). Chỉ tác dụng khi hop-demo.js dựng phần tử dm-* / thêm lớp body.sv-demo.
   Gỡ = bỏ dòng <link> trong hop.html. Màu chỉ từ token của hop.css (⛔ hex rời trừ chữ trên nền vàng). */
.dm-en, .dm-vi { display: block; }
.dm-vi { opacity: .78; font-size: .92em; }

/* ── thanh demo trong phòng ── */
.dm-bang { flex: none; padding: 8px 14px 10px; background: color-mix(in srgb, var(--info) 16%, var(--navy-dark));
  border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.dm-bang[hidden] { display: none; }
.dm-h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-nhan { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 11px; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 999px; background: var(--danger); color: #fff; }
.dm-nhan .ic, .dm-nhan svg { width: 14px; height: 14px; }
.dm-pha { font-weight: 600; font-size: 14px; display: inline-flex; flex-direction: column; line-height: 1.25; }
.dm-pha .dm-vi { font-weight: 500; }
.dm-dem { font: 700 18px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--gold); margin-inline-start: auto; }
.dm-giu { margin-inline-start: auto; color: var(--gold-soft); font-weight: 600; }
.dm-720 { font-size: 12px; color: var(--warning); }
.dm-dk-nut { display: inline-flex; align-items: center; gap: 6px; }
.dm-dk-nut svg { width: 18px; height: 18px; }
.dm-sap { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--warning) 24%, var(--navy-dark));
  border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent); animation: sv-blink 2.4s ease-in-out 3; }
.dm-mo-ta { margin-top: 4px; color: var(--ink-2); }
.dm-buoc { display: flex; align-items: stretch; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dm-mui { align-self: center; color: var(--ink-3); }
.dm-b { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: var(--surface-raised); color: var(--ink); font: inherit; font-weight: 600; text-align: start; }
.dm-b:hover { background: color-mix(in srgb, var(--surface-raised) 80%, var(--ink) 20%); }
.dm-b:active { transform: scale(.94); }
.dm-b .ic { width: 22px; height: 22px; flex: none; }
.dm-b .ic svg { width: 100%; height: 100%; }
.dm-b.mo { opacity: .5; border-color: var(--line); }
.dm-b-ly { display: block; font-weight: 400; font-size: 11px; color: var(--ink-2); max-width: 22ch; }
.dm-b.mo { flex-wrap: wrap; }
.dm-mic { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--gold-soft); }
.dm-mic svg { width: 18px; height: 18px; flex: none; }
body.sv-demo-mic-khoa #cMic { opacity: .45; }

/* ── tiền sảnh: đồng ý ── */
.dm-dongy { margin: 10px 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--info) 12%, transparent); font-size: 13px; line-height: 1.45; text-align: start; }
.dm-pha-nho { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.dm-pha-nho svg { width: 18px; height: 18px; flex: none; }
.dm-cot { display: flex; flex-direction: column; }
.dm-dongy-chu .dm-vi { margin-top: 6px; }
.dm-ten .dm-vi { font-size: .8em; }
#bJoin.dm-vao { height: auto; min-height: 48px; padding-block: 6px; }
.dm-vao-chu { display: inline-flex; flex-direction: column; line-height: 1.2; text-align: start; }
.dm-vao-chu .dm-vi { font-size: 12px; font-weight: 500; }

/* ── trang phòng đầy · mời đăng ký · im lặng ── */
.dm-day .sub { margin: 10px 0 14px; }
.dm-day .sub .dm-vi { margin-top: 6px; }
.dm-so { font: 700 22px/1 ui-monospace, Menlo, monospace; color: var(--gold); margin-bottom: 14px; }
.dm-nut-cot { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 0 auto; }
.dm-nut-cot .btn { width: 100%; justify-content: center; }
.dm-moi { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.dm-moi-t { font-weight: 700; font-size: 16px; }
.dm-moi-c { color: var(--ink-2); font-size: 13px; }
.dm-im { margin: 8px 0 12px; line-height: 1.45; }
.dm-im .dm-vi { margin-top: 6px; }

/* ── biên bản chỉ xem ── */
.dm-bb-ghi { font-size: 12px; opacity: .8; margin-inline: 8px; }
@media print { body.sv-demo:not(.sv-demo-chu) #bbXem { display: none !important; } }

/* ── hộp điều khiển người trực ── */
.dm-dk { min-width: min(520px, 86vw); }
.dm-dk-pha { margin: 4px 0 12px; font-weight: 600; }
.dm-dk-nhom { margin: 10px 0; }
.dm-dk-t { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin-bottom: 6px; }
.dm-dk-hang { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-dk-ghi { font-size: 12px; color: var(--ink-2); width: 100%; }
.dm-dk-ds { max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
.dm-dk-ng { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.dm-dk-ng:last-child { border-bottom: 0; }
.dm-dk-ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── màn hẹp (điện thoại) ── */
@media (max-width: 560px) {
  .dm-bang { padding: 6px 10px 8px; font-size: 12px; }
  .dm-pha { font-size: 13px; }
  .dm-mo-ta { display: none; }
  .dm-buoc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dm-buoc::-webkit-scrollbar { display: none; }
  .dm-b { flex: none; min-height: 44px; padding: 4px 10px; }
  .dm-b-ly { display: none; }
  .dm-sap { font-size: 12px; }
  .dm-mic { display: none; }   /* màn hẹp: nút mic đã mờ + toast giải thích ⇒ bớt 1 khối chữ */
}

/* ── ⭐ 20/10 điện thoại + Fold7 (anh Triệu: «click demo trên điện thoại bị che màn hình, web không trượt được để xem») ──
   GỐC: #app cao bằng màn + overflow:hidden; thanh demo flex:none ⇒ đoạn «Còn 5 phút» song ngữ đẩy vùng hình còn một dải.
   Fold7 mở (~686 px) lớn hơn mốc 560 nên còn hiện đủ mô tả + lý do. ĐO trước/sau: 375×812 thanh 222→160 px, hình 446→508;
   686×762 thanh 194→145, hình 344→394. Chạm dòng LIVE DEMO ⇒ thu/mở (hop-demo.js, nhớ trong phiên). */
.dm-bang { max-height: 34vh; max-height: 34dvh; overflow-y: auto; overscroll-behavior: contain; }
.dm-h1 { cursor: pointer; }
.dm-thu { width: 0; height: 0; border-inline: 5px solid transparent; border-top: 6px solid var(--ink-2); transition: transform .15s; }
.dm-bang.dm-gon .dm-thu { transform: rotate(-90deg); }
.dm-bang.dm-gon > :not(.dm-h1) { display: none; }
@media (max-width: 900px), (max-height: 820px) {
  .dm-bang { padding: 6px 10px 8px; font-size: 12px; }
  .dm-mo-ta, .dm-b-ly, .dm-mic { display: none; }
  .dm-buoc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-top: 6px; }
  .dm-buoc::-webkit-scrollbar { display: none; }
  .dm-b { flex: none; min-height: 40px; padding: 4px 10px; }
  .dm-sap { font-size: 12px; margin-top: 4px; padding: 4px 8px; }
  /* màn gọn: câu «Còn 5 phút» chỉ một ngôn ngữ — tiếng Việt khi giao diện vi, còn lại tiếng Anh */
  html:not([lang="vi"]) .dm-sap .dm-vi, html[lang="vi"] .dm-sap .dm-en { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dm-thu { transition: none; } }

/* ── 23/10 DEMO-VÁ: màn chờ vào phòng demo (che tới khi 2 site đã lên lớp cao, trần 8 s) — xem hop-demo.js §8 ── */
body.sv-demo .stagewrap { position: relative; }
.dm-cho { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px; text-align: center; background: var(--navy-dark); color: var(--ink); transition: opacity .35s ease; }
.dm-cho.het { opacity: 0; pointer-events: none; }
.dm-cho-xoay { width: 44px; height: 44px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-top-color: var(--gold); animation: sv-spin 1.1s linear infinite; }
.dm-cho-t { font-size: 18px; font-weight: 600; line-height: 1.35; }
.dm-cho-t .dm-vi { font-size: 15px; font-weight: 500; }
.dm-cho-p { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .dm-cho-xoay { animation: none; } .dm-cho { transition: none; } }

/* 06/11 anh Triệu: video StarWork phòng demo đang là khung dọc ⇒ hiện đủ khung trên Web, không cắt theo ô ngang. */
.tile[data-id^="sv-demo-share-"] video { object-fit: contain; background: #000; }

/* 06/11: site StarWork dọc trên điện thoại hiện đủ khung. */
.tile[data-id^="sv-demo-doc-"] video { object-fit: contain; background: #000; }