/* pwa.css — ALLiw · nút PWA + hộp thoại hướng dẫn · 19/10/2026 — tránh regen (file RIÊNG, ngoài va_chao_mung.py). */

/* Nút «Mở app» / «Mở WebUI» — khi nằm trong sidebar card (chao-mung) */
.cm-the-ben .cm-nut-cai { width: 100%; margin-bottom: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cm-nut-ic { width: 16px; height: 16px; flex-shrink: 0; }
.cm-nut-nhan { white-space: nowrap; }

/* Nút nổi dưới-phải — dùng ở trang Giới Thiệu / Sách Trắng (không có sidebar) */
.cm-nut-cai-noi {
  position: fixed; right: 20px; bottom: 20px; z-index: 100; padding: 12px 18px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  letter-spacing: -0.005em; cursor: pointer;
  background: #141413; color: #ffffff; border: 1px solid #141413;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
}
.cm-nut-cai-noi:hover, .cm-nut-cai-noi:focus-visible { background: #2a2927; outline: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.1); }
.cm-nut-cai-noi .cm-nut-ic { width: 16px; height: 16px; }
@media (prefers-color-scheme: dark) {
  .cm-nut-cai-noi { background: #ffffff; color: #141413; border-color: #ffffff; }
  .cm-nut-cai-noi:hover, .cm-nut-cai-noi:focus-visible { background: #e8e6dc; }
}

/* Hộp thoại hướng dẫn — tối giản, dùng ở mọi trang */
.cm-cai-ov { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 20px; }
.cm-cai-hop {
  background: #ffffff; color: #141413; max-width: 440px; width: 100%; border-radius: 14px; padding: 24px 24px 18px;
  border: 1px solid #e8e6dc; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
}
.cm-cai-td { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.cm-cai-b { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: #504f4c; }
.cm-cai-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
.cm-cai-row .cm-nut-vien {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
  border: 1px solid #141413; background: #ffffff; color: #141413; font: 600 14px/1 inherit; cursor: pointer;
}
.cm-cai-row .cm-nut-vien:first-child { background: #141413; color: #ffffff; }
.cm-cai-row .cm-nut-vien:hover, .cm-cai-row .cm-nut-vien:focus-visible { outline: none; filter: brightness(0.9); }
@media (prefers-color-scheme: dark) {
  .cm-cai-hop { background: #0B1F31; color: #ffffff; border-color: rgba(255, 255, 255, 0.14); }
  .cm-cai-b { color: rgba(255, 255, 255, 0.75); }
  .cm-cai-row .cm-nut-vien { border-color: rgba(255, 255, 255, 0.3); background: transparent; color: #ffffff; }
  .cm-cai-row .cm-nut-vien:first-child { background: #ffffff; color: #141413; border-color: #ffffff; }
}