/* PWA install guide: scoped styling; brand tokens come from the saved Admin config. */
/* Scoped CSS: không ghi đè CSS giỏ hàng, footer hay bottom navigation DDV. */
  #ddv-pwa-install {
    --pwa-bg: #ffffff;
    --pwa-ink: #172922;
    --pwa-muted: #687b73;
    --pwa-border: #dce9e2;
    --pwa-soft: #f2f8f5;
    --pwa-brand: #087d59;
    --pwa-action-ink: #ffffff;
    display: block;
    position: fixed;
    z-index: 178;
    inset-inline: 12px;
    bottom: var(--ddv-pwa-bottom, calc(82px + env(safe-area-inset-bottom, 0px)));
    width: min(440px, calc(100% - 24px));
    margin-inline: auto;
    padding: 17px;
    box-sizing: border-box;
    background: var(--pwa-bg);
    border: 1px solid var(--pwa-border);
    border-radius: 20px;
    box-shadow: 0 16px 52px rgba(7, 36, 27, .18);
    color: var(--pwa-ink);
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    overflow-y: auto;
    max-height: max(220px, calc(100dvh - var(--ddv-pwa-bottom, 82px) - 14px));
    animation:none;
  }
  #ddv-pwa-install[hidden], #ddv-pwa-action[hidden], #ddv-pwa-steps[hidden] { display: none !important; }
  #ddv-pwa-install *, #ddv-pwa-install *::before,
  #ddv-pwa-install *::after { box-sizing: border-box; }
  #ddv-pwa-install .ddv-pwa-head { display: flex; align-items: flex-start; gap: 11px; }
  #ddv-pwa-install .ddv-pwa-symbol {
    width: 41px; height: 41px; flex: 0 0 41px;
    border-radius: 13px; background: var(--pwa-soft);
    color: var(--pwa-brand); display: grid; place-items: center;
  }
  #ddv-pwa-install .ddv-pwa-symbol img { width: 40px; height: 40px; object-fit: contain; border-radius: 11px; }
  #ddv-pwa-install .ddv-pwa-headtext { flex: 1; min-width: 0; }
  #ddv-pwa-install .ddv-pwa-headtext strong {
    display: block; font-size: 16px; line-height: 1.3; letter-spacing: -.2px;
  }
  #ddv-pwa-install .ddv-pwa-desc {
    display: block; font-size: 12px; color: var(--pwa-muted); margin-top: 3px;
  }
  #ddv-pwa-install .ddv-pwa-close {
    flex: 0 0 33px; width: 33px; height: 33px;
    border: 1px solid var(--pwa-border); border-radius: 10px;
    background: var(--pwa-soft); color: var(--pwa-ink);
    cursor: pointer; font: 23px/1 sans-serif;
  }
  #ddv-pwa-install .ddv-pwa-steps {
    display: grid; gap: 9px; margin: 14px 0 0; padding: 12px;
    border: 1px solid var(--pwa-border); border-radius: 13px;
    background: var(--pwa-soft); list-style: none;
  }
  #ddv-pwa-install .ddv-pwa-steps li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 12.5px; line-height: 1.42;
  }
  #ddv-pwa-install .ddv-pwa-num {
    display: grid; place-items: center; flex: 0 0 21px;
    width: 21px; height: 21px; border-radius: 7px;
    background: var(--pwa-bg); border: 1px solid var(--pwa-border);
    color: var(--pwa-brand); font-size: 11px; font-weight: 800;
  }
  #ddv-pwa-install .ddv-pwa-share {
    width: 14px; height: 14px; vertical-align: -.1em;
    color: var(--pwa-brand);
  }
  #ddv-pwa-install .ddv-pwa-action {
    display: block; width: 100%; margin-top: 12px; min-height: 44px;
    padding: 10px 14px; border: 0; border-radius: 12px;
    background: var(--pwa-brand); color: var(--pwa-action-ink); cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 700;
  }
  #ddv-pwa-install .ddv-pwa-note {
    margin: 10px 0 0; font-size: 11px; color: var(--pwa-muted);
  }
  /* bottom được tính theo toạ độ menu .ddv-store-mobile-nav thật, không đoán chiều cao. */
  @media (max-width: 420px) {
    #ddv-pwa-install { padding: 14px; border-radius: 17px; }
  }
  @media (min-width: 1101px) {
    #ddv-pwa-install { display: none !important; }
  }
  /* Tránh 2 phần tử nổi chồng lên nhau khi người dùng đang đọc hướng dẫn. */
  body.ddv-pwa-guide-open .ddv-assist-launcher,
  body.ddv-pwa-guide-open .ddv-assist-top { visibility: hidden !important; pointer-events: none !important; }
  @media (prefers-color-scheme: dark) {
    html:not([data-mode="light"]):not([data-theme="light"]) #ddv-pwa-install {
      --pwa-bg: #0e2026; --pwa-ink: #f0f7f3;
      --pwa-muted: #a0b4ac; --pwa-border: #30504a;
      --pwa-soft: #17332e; --pwa-brand: #5ade9c;
      --pwa-action-ink: #072519;
    }
  }
  html[data-mode="dark"] #ddv-pwa-install,
  html[data-theme="dark"] #ddv-pwa-install {
    --pwa-bg: #0e2026; --pwa-ink: #f0f7f3;
    --pwa-muted: #a0b4ac; --pwa-border: #30504a;
    --pwa-soft: #17332e; --pwa-brand: #5ade9c;
    --pwa-action-ink: #072519;
  }
  
  @media (prefers-reduced-motion: reduce) {
    #ddv-pwa-install { animation: none; }
  }