/* Doki – giao diện phần PWA: nút cài ứng dụng, dòng báo "bản đã lưu", thông báo "có bản mới", hướng dẫn cài trên iPhone.
   Chữ theo thang type.css: <14px đậm ≤600 · 14–16px ≤700 · ≥17px ≤800. */

[data-pwa-install][hidden]{display:none!important}
.mm-install{font-family:inherit;text-align:left;width:100%;cursor:pointer}

/* ---------- Ngăn xếp thông báo nổi (giữa, phía dưới) ---------- */
.pwa-stack{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:95;display:flex;flex-direction:column;gap:10px;width:min(460px,calc(100vw - 24px));pointer-events:none}
.pwa-note{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--surface);color:var(--ink);border:1.5px solid var(--line2);box-shadow:0 14px 34px rgba(15,27,61,.28);font-size:var(--fs-sm);line-height:1.45;animation:pwaIn .28s ease-out both}
.pwa-note[hidden]{display:none}
@keyframes pwaIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pwa-ico{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--soft-blue);color:var(--accent-ink)}
.pwa-txt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.pwa-txt b{font-size:var(--fs-md);font-weight:700;line-height:1.3}
.pwa-txt span{color:var(--muted);font-size:var(--fs-sm);font-weight:500}
.pwa-acts[hidden]{display:none}
.pwa-acts{flex:none;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pwa-btn{border:0;cursor:pointer;font-family:inherit;font-size:var(--fs-sm);font-weight:700;line-height:1.3;padding:9px 14px;border-radius:999px;background:var(--blue);color:#fff;min-height:40px}
.pwa-btn:hover{filter:brightness(1.08)}
.pwa-btn.ghost{background:transparent;color:var(--accent-ink);border:1.5px solid var(--line2)}
.pwa-btn:focus-visible,.pwa-x:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* đang xem bản đã lưu (tông vàng, giống cảnh báo khác của trang) */
.pwa-note.stale{background:#FFF3D1;border-color:#E9C46A;color:#4A2F00}
.pwa-note.stale .pwa-ico{background:#FFE4A0;color:#7A4A00}
.pwa-note.stale .pwa-txt span{color:#6B4A12}
.dark .pwa-note.stale{background:#4A3308;border-color:#8A6215;color:#FFE8B0}
.dark .pwa-note.stale .pwa-ico{background:#6A4A10;color:#FFE8B0}
.dark .pwa-note.stale .pwa-txt span{color:#F1D9A0}
/* có bản mới */
.pwa-note.update{border-color:var(--blue)}
.pwa-note.update .pwa-ico{background:var(--blue);color:#fff}
.pwa-note.ok{border-color:#2DD4BF}
.pwa-note.ok .pwa-ico{background:var(--soft-teal);color:var(--teal-ink)}

@media (max-width:520px){
  .pwa-stack{bottom:76px}
  .pwa-note{flex-wrap:wrap}
  .pwa-acts{width:100%;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){.pwa-note{animation:none}}

/* ---------- Hướng dẫn cài trên iPhone / iPad ---------- */
.pwa-ov{position:fixed;inset:0;z-index:120;background:rgba(15,27,61,.62);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.pwa-ov[hidden]{display:none}
.pwa-sheet{position:relative;width:min(460px,100%);max-height:calc(100vh - 24px);overflow:auto;background:var(--surface);color:var(--ink);border-radius:24px;padding:24px 22px 22px;box-shadow:0 24px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:14px}
.pwa-sheet h2{margin:0;font-family:'Baloo 2',system-ui,sans-serif;font-size:var(--fs-h3);font-weight:800;line-height:1.25;padding-right:44px}
.pwa-sheet p{margin:0;color:var(--ink2);font-size:var(--fs-md);line-height:1.6}
.pwa-sheet ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:s}
.pwa-sheet li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--ink2);font-size:var(--fs-md);line-height:1.55}
.pwa-sheet li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:700}
.pwa-sheet li b{color:var(--ink);font-weight:700}
.pwa-sheet .pwa-warn{background:#FFF3D1;border:1px solid #E9C46A;color:#4A2F00;border-radius:14px;padding:12px 14px;font-size:var(--fs-sm);font-weight:600;line-height:1.5}
.dark .pwa-sheet .pwa-warn{background:#4A3308;border-color:#8A6215;color:#FFE8B0}
.pwa-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);cursor:pointer;font-size:var(--fs-lg);font-weight:700;line-height:1;padding:0}
.pwa-sheet .pwa-btn{align-self:stretch;min-height:46px;font-size:var(--fs-lg)}
@media (min-width:700px){.pwa-ov{align-items:center}}