/* ═══════════════════════════════════════════════════════════════════════════
   App CTV NAVS — trang "Cài app & thông báo" (app.php) + dải nhắc cài ở Tổng quan.
   Nạp ở mọi trang cổng (ctv_app_head_html) vì dải nhắc nằm ở Tổng quan. Mọi màu qua token.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dải nhắc ở Tổng quan (JS quyết định hiện) */
.capp-bar {
  display: flex; align-items: center; gap: var(--pt-s-3); margin: var(--pt-s-6) 0 0;
  padding: var(--pt-s-3) var(--pt-s-3) var(--pt-s-3) var(--pt-s-4); border-radius: var(--pt-r-lg);
  background: var(--pt-surface); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--pt-border)); box-shadow: var(--pt-sh-2);
}
.capp-bar[hidden] { display: none; }
.capp-bar__ic {
  width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--pt-r-md);
  color: var(--pt-brand-strong); background: var(--pt-wash);
}
.capp-bar__t { flex: 1; min-width: 0; margin: 0; font-size: var(--pt-fs-14); line-height: 1.45; color: var(--pt-text); }
.capp-bar__t b { color: var(--pt-ink); }
.capp-bar .pt-btn { flex-shrink: 0; }
.capp-bar__x { flex-shrink: 0; color: var(--pt-muted); }

/* Khối "Máy này" */
.capp-state__v { display: flex; align-items: flex-start; gap: var(--pt-s-4); }
.capp-state__v[hidden] { display: none; }
.capp-state__ic {
  width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--pt-r-lg);
  color: var(--pt-muted); background: var(--pt-sunken);
}
.capp-state__v--ok .capp-state__ic { color: var(--pt-ok-deep); background: color-mix(in srgb, var(--color-secondary) 14%, var(--pt-surface)); }
.capp-state__v--warn .capp-state__ic { color: var(--pt-warn-deep); background: color-mix(in srgb, var(--color-warning) 14%, var(--pt-surface)); }
.capp-state__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.capp-state__body h3 { margin: 0; font-size: var(--pt-fs-16); font-weight: 700; letter-spacing: -.01em; color: var(--pt-ink); }
.capp-state__body p { margin: 0; font-size: var(--pt-fs-14); line-height: 1.6; color: var(--pt-text); }
.capp-state__body p b { color: var(--pt-ink); }
.capp-state__body a { color: var(--pt-brand-strong); font-weight: 600; }
.capp-state__acts { display: flex; flex-wrap: wrap; gap: var(--pt-s-2); margin-top: var(--pt-s-2); }

/* Danh sách máy đã bật */
.capp-devs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.capp-dev { display: flex; align-items: center; gap: var(--pt-s-3); padding: var(--pt-s-3) 0; border-top: 1px solid var(--pt-hair); }
.capp-dev:first-child { border-top: 0; padding-top: 0; }
.capp-dev:last-child { padding-bottom: 0; }
.capp-dev__ic {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--pt-r-md);
  color: var(--pt-brand-strong); background: var(--pt-wash);
}
.capp-dev.is-err .capp-dev__ic { color: var(--pt-warn-deep); background: color-mix(in srgb, var(--color-warning) 14%, var(--pt-surface)); }
.capp-dev__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.capp-dev__main strong { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-ink); }
.capp-dev__main small { font-size: var(--pt-fs-13); color: var(--pt-muted); overflow-wrap: anywhere; }
.capp-dev__main .capp-dev__err { color: var(--pt-warn-deep); }
.capp-dev__me {
  padding: 1px 8px; border-radius: var(--pt-r-pill); font-size: var(--pt-fs-12); font-style: normal; font-weight: 600;
  color: var(--pt-brand-deep); background: var(--pt-wash);
}
.capp-dev__me[hidden] { display: none; }
.capp-dev__rm { color: var(--pt-muted); }

/* Loại thông báo — mỗi dòng một công tắc (dùng lại .pt-switch của portal) */
.capp-types { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.capp-types li + li { border-top: 1px solid var(--pt-hair); }
.capp-type.pt-switch { display: flex; align-items: center; gap: var(--pt-s-3); width: 100%; padding: var(--pt-s-3) 0; }
.capp-types li:first-child .capp-type { padding-top: 0; }
.capp-types li:last-child .capp-type { padding-bottom: 0; }
.capp-type__ic {
  width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--pt-r-md);
  color: var(--pt-brand-strong); background: var(--pt-wash);
}
.capp-type__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.capp-type__txt b { font-size: var(--pt-fs-14); font-weight: 600; color: var(--pt-ink); }
.capp-type__txt small { font-size: var(--pt-fs-13); color: var(--pt-muted); }
.capp-type input:disabled + .pt-switch__t { opacity: .55; cursor: not-allowed; }
.capp-type.is-busy { opacity: .6; pointer-events: none; }

/* Các bước cài */
.capp-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--pt-s-4); counter-reset: capp-step; }
.capp-steps li { display: flex; align-items: flex-start; gap: var(--pt-s-3); counter-increment: capp-step; }
.capp-steps li > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--pt-fs-14); line-height: 1.55; }
.capp-steps b { color: var(--pt-ink); }
.capp-steps li > div span { color: var(--pt-muted); }
.capp-steps__ic {
  position: relative; width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--pt-r-md);
  color: var(--pt-brand-strong); background: var(--pt-surface); border: 1px solid var(--pt-border);
}
.capp-steps__ic::after {
  content: counter(capp-step); position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: var(--pt-r-pill);
  font-size: var(--pt-fs-12); font-weight: 700; line-height: 1; color: var(--color-on-dark); background: var(--pt-brand-strong);
}
.capp-steps code {
  padding: 1px 6px; border-radius: var(--pt-r-sm); background: var(--pt-surface); border: 1px solid var(--pt-border);
  font-family: inherit; font-size: var(--pt-fs-13); color: var(--pt-brand-deep); overflow-wrap: anywhere;
}
.capp-note { margin: var(--pt-s-4) 0 0; font-size: var(--pt-fs-13); line-height: 1.55; color: var(--pt-muted); }
#cai-iphone { scroll-margin-top: calc(var(--pt-top-h, 64px) + 16px); }

/* ── Màn chặn iPhone / iPad (chủ site chốt 22/09/2026): Safari ⇒ cài app; trong app chưa bật thông báo ⇒ bật.
   Hiện bằng class trên <html> do script trong <head> gắn (không nháy trang), ctv-push.js tính lại sau. ── */
.capp-gate {
  display: none; position: fixed; inset: 0; z-index: calc(var(--pt-z-toast) - 1); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + var(--pt-s-6)) var(--pt-s-4) calc(env(safe-area-inset-bottom, 0px) + var(--pt-s-6));
  background: var(--pt-bg);
}
html.capp-gate-install .capp-gate,
html.capp-gate-enable .capp-gate--portal,
html.capp-gate-denied .capp-gate--portal { display: block; }
html.capp-gate-install:has(.capp-gate),
html.capp-gate-enable:has(.capp-gate--portal),
html.capp-gate-denied:has(.capp-gate--portal) { overflow: hidden; }
.capp-gate__card {
  max-width: 440px; margin: 0 auto; padding: var(--pt-s-6) var(--pt-s-5); border-radius: var(--pt-r-xl);
  background: var(--pt-surface); border: 1px solid var(--pt-border); box-shadow: var(--pt-sh-2);
}
.capp-gate__logo { display: block; width: 72px; height: 72px; margin: 0 auto var(--pt-s-4); border-radius: var(--pt-r-xl); box-shadow: var(--pt-sh-1); }
.capp-gate__v { display: none; }
html.capp-gate-install .capp-gate__v--install,
html.capp-gate-enable .capp-gate__v--enable,
html.capp-gate-denied .capp-gate__v--denied { display: block; }
.capp-gate h2 { margin: 0 0 var(--pt-s-2); text-align: center; font-size: var(--pt-fs-20); font-weight: 800; letter-spacing: -.02em; color: var(--pt-ink); }
.capp-gate__v > p { margin: 0 0 var(--pt-s-4); text-align: center; font-size: var(--pt-fs-14); line-height: 1.6; color: var(--pt-text); }
.capp-gate__v > p b { color: var(--pt-ink); }
.capp-gate__hint { padding: var(--pt-s-3); border-radius: var(--pt-r-md); background: var(--pt-wash); }
.capp-gate .capp-steps { margin: var(--pt-s-5) 0 var(--pt-s-4); }
.capp-gate__acts { display: flex; flex-direction: column; align-items: stretch; gap: var(--pt-s-2); margin: var(--pt-s-2) 0 var(--pt-s-4); }
.capp-gate__acts .pt-btn { justify-content: center; }
.capp-gate__note { margin: 0; text-align: center; font-size: var(--pt-fs-13); line-height: 1.55; color: var(--pt-muted); }
.capp-gate__out { margin: var(--pt-s-5) 0 0; text-align: center; font-size: var(--pt-fs-13); }

/* Đăng nhập Google trong app (iPhone / Mac): luồng vé — hộp trạng thái do /public/assets/js/app-google-login.js vẽ.
   Trước 26/09/2026 app giấu nút Google vì phiên không về được app. */
.ctv-gapp[hidden] { display: none; }
.ctv-gapp { margin: 0 0 var(--pt-s-4); }
.ctv-gapp__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pt-s-2) var(--pt-s-4); margin-top: var(--pt-s-3); }
.ctv-gapp__acts button.pt-link { padding: 0; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }

@media (max-width: 560px) {
  .capp-bar { flex-wrap: wrap; }
  .capp-bar__t { flex-basis: calc(100% - 90px); }
}

/* Nút "Cài app" một chạm (Android / máy tính) đứng ngay trên danh sách 4 bước dự phòng.
   🚨 .capp-steps dùng số thứ tự đặt chồng (absolute) nên KHÔNG tự đẩy nút ra — thiếu
   margin ở đây là nút đè lên ô số 1. */
.capp-install-now { margin: 0 0 18px; }