/* ============================================================================
   PHỦ THÊM cho bản mô phỏng — chỉ những gì app thật KHÔNG có.

   🔴 KHÔNG đặt màu/bố cục của app ở đây. Toàn bộ giao diện đến từ `app.css`, là bản chép
   NGUYÊN VĂN các khối <style> của `web/index.html` do `scripts/sinh-demo.py` sinh ra. Đặt
   token riêng ở đây là dựng hệ màu thứ hai, và bản mô phỏng sẽ trôi khỏi app thật.

   File này chỉ giữ 3 nhóm: huy hiệu "Bản mô phỏng", thẻ giữ chỗ cho màn chưa mô phỏng,
   và hướng dẫn viên (tour). Cộng vài lớp phụ cho ảnh xem trước giả.
   Biến màu (--card, --line, --accent, --muted…) lấy thẳng từ app.css.
   ========================================================================== */

/* ── Huy hiệu THẬT THÀ: khách phải biết ngay đây không phải app đang chạy ──── */
.demo-huyhieu {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 18px;
  background: #1c1206; border-bottom: 1px solid rgba(245, 158, 11, .35);
  color: #f5b544; font-size: 12.5px;
}
.demo-huyhieu__cham { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex: none; }
.demo-huyhieu b { font-weight: 700; }
/* 23/09 — nhãn BẮT BUỘC: trang này là giao diện MÔ PHỎNG với dữ liệu mẫu (số liệu, trạng thái đăng nhập
   đều là bịa cho dễ xem). Thiếu nhãn = quảng cáo mập mờ (ghi ngay trong commit gốc của bộ sinh). ĐỪNG GỠ.
   Dùng thẻ <b> chứ không <span> để không xô lệch luật `.demo-huyhieu > span:nth-of-type(2)` ngay dưới. */
.demo-huyhieu__mp { background: #f59e0b; color: #1c1206; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; flex: none; }
.demo-huyhieu > span:nth-of-type(2) { color: #c79a58; }
.demo-huyhieu__nut { margin-left: auto; display: flex; gap: 7px; }
.demo-huyhieu__nut button,
.demo-huyhieu__nut a {
  padding: 5px 11px; border-radius: 8px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.demo-huyhieu__nut button:hover, .demo-huyhieu__nut a:hover { background: rgba(255, 255, 255, .14); }
.demo-huyhieu__nut a { background: linear-gradient(135deg, #8b5cf6, #ec4899); border-color: transparent; }

.demo-hepqua { display: none; margin: 0; padding: 7px 18px; background: #152641; color: #5b9bff; font-size: 12.5px; }
@media (max-width: 1180px) { .demo-hepqua { display: block; } }

/* App thật dính đỉnh khung nhìn; ở đây huy hiệu chiếm chỗ đó nên đẩy thanh bên xuống */
.demo-huyhieu ~ .app .side { top: 37px; height: calc(100vh - 37px); }

/* ── Màn chưa mô phỏng ────────────────────────────────────────────────────── */
.demo-giucho {
  display: grid; place-items: center; gap: 11px;
  padding: 58px 20px; text-align: center;
  background: var(--card); border: 1px dashed var(--line); border-radius: 16px;
}
.demo-giucho__ic { font-size: 34px; opacity: .6; }
.demo-giucho h2 { margin: 0; font-size: 18px; }
.demo-giucho p { margin: 0; max-width: 430px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.demo-giucho__nho { font-size: 12px !important; opacity: .75; }

/* ── Ảnh xem trước GIẢ ────────────────────────────────────────────────────────
   Không nhúng video/ảnh thật nào (0 byte media). Mỗi thẻ là một ô gradient, kèm dòng
   phụ đề giả đặt ở 1/3 DƯỚI — đúng vùng sản phẩm hỗ trợ. `.viet` là sau khi render:
   chữ Trung đã bị che, dòng tiếng Việt đã ghép vào. Đó là cả câu chuyện bán hàng. */
.demo-thumb { position: absolute; inset: 0; }
.demo-sub {
  position: absolute; left: 7px; right: 7px; bottom: 8px;
  padding: 3px 7px; border-radius: 4px;
  background: rgba(0, 0, 0, .42);
  font-size: 11.5px; text-align: center; line-height: 1.35; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.demo-sub.viet { color: #ffe75e; font-weight: 600; }

/* ── HƯỚNG DẪN VIÊN (tour) ────────────────────────────────────────────────────
   <dialog> phủ TRỌN khung nhìn để được miễn phí: nền inert, Esc, trả focus, aria-modal.
   Lớp tối KHÔNG phải một div riêng — nó là box-shadow 100vmax của `.tour__lo`, nên chỉ
   có ĐÚNG MỘT phần tử phải dời chỗ mỗi khung. `pointer-events:none` để lỗ không nuốt chuột.
   Không dùng backdrop-filter: blur cả khung nhìn phải lấy mẫu lại mỗi khung khi thanh tiến
   độ đang chạy — đắt nhất trong cả lớp phủ mà không thêm được gì. */
.tour { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); overflow: hidden; }
.tour::backdrop { background: transparent; }
.tour__lo { position: absolute; border-radius: 13px; pointer-events: none; box-shadow: 0 0 0 2px var(--accent), 0 0 0 100vmax rgba(0, 0, 0, .68); }
.tour__hop {
  position: absolute; width: 344px; max-height: calc(100vh - 24px); overflow: auto;
  padding: 16px 19px 18px; border-radius: 16px;
  background: var(--card2, #16182c); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .62);
}
.tour__buoc { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: #a3a7ba; }
.tour__hop h3 { margin: 0 0 8px; font-size: 16px; color: #fff; }
/* Chữ trong hộp: #a3a7ba (≈7:1 trên nền hộp). Đừng hạ xuống xám đậm hơn, sẽ trượt 4,5. */
.tour__hop p { margin: 0; font-size: 13px; line-height: 1.6; color: #a3a7ba; }
.tour__nut { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour__cach { flex: 1; }
.tour__nut button {
  padding: 6px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.tour__nut button:hover { background: rgba(255, 255, 255, .14); }
.tour__nut button.chinh { background: linear-gradient(135deg, #8b5cf6, #ec4899); border-color: transparent; }
.tour__nut button:disabled { opacity: .45; cursor: default; }

@media (prefers-reduced-motion: no-preference) {
  .tour__lo { transition: top .22s ease-out, left .22s ease-out, width .22s ease-out, height .22s ease-out; }
  .tour__hop { transition: top .22s ease-out, left .22s ease-out; }
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.demo-toast { position: fixed; right: 18px; bottom: 18px; z-index: 950; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.demo-toast > div {
  padding: 11px 15px; border-radius: 11px; max-width: 360px; font-size: 13px;
  background: var(--card2, #16182c); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5); color: var(--text, #fff);
}