/* ============================================================
   NATIVE CHROME CSS — iOS & Android shells
   Dùng chung biến vùng an toàn của .za-frame.
   ============================================================ */

/* nền header (đồng bộ za-header-bg, dùng brand var) */
.nat-header-bg{
  position:absolute; top:0; left:0; right:0; height:var(--zalo-safe-top);
  background:var(--zalo-header-bg); z-index:105; pointer-events:none;
}

/* ---------- TONE ----------
   hero    = màn gốc có hero tím (Trang chủ): nền tím, glyph/chữ trắng.
   surface = mọi màn khác: nav bar SÁNG, chữ tối, tím chỉ làm accent
             (đúng brand — tím là điểm nhấn, không tràn màn hình). */
.nat-chrome.tone-surface .nat-header-bg{ background:var(--vlf-bg,#F2F2F2); border-bottom:1px solid var(--vlf-line); }
.nat-chrome.tone-surface .nat-statusbar{ color:var(--vlf-ink-900); }
.nat-chrome.tone-surface .ios-nav{ color:var(--vlf-ink-900); }
.nat-chrome.tone-surface .ios-nav-back{ color:var(--vlf-purple-700); }
.nat-chrome.tone-surface .md-appbar{ color:var(--vlf-ink-900); }
.nat-chrome.tone-surface .md-back:active,
.nat-chrome.tone-surface .md-overflow:active{ background:rgba(0,0,0,.06); }
/* status bar full-screen (map) vẫn glyph trắng — không đụng */

/* ---------- frame variant ---------- */
.za-frame[data-platform="android"] .za-phone{ border-radius:42px; }
.za-frame[data-platform="android"] .za-screen{ border-radius:42px; }

/* camera: iOS = Dynamic Island (mặc định); Android = punch-hole giữa trên */
.za-frame[data-platform="android"] .za-island{
  width:11px; height:11px; top:14px; border-radius:50%; padding:0;
}
.za-frame[data-platform="android"] .za-island::after{ display:none; }

/* ---------- iOS nav bar ---------- */
.ios-nav{
  position:absolute; top:var(--zalo-status-h); left:0; right:0; height:var(--zalo-action-h);
  display:grid; align-items:center; padding:0 8px; z-index:110; color:var(--zalo-header-fg);
}
.ios-nav.mode-page{ grid-template-columns:1fr auto 1fr; }
.ios-nav.mode-large{ grid-template-columns:auto 1fr; gap:9px; padding-left:14px; }
.ios-nav-title{
  font-size:17px; font-weight:600; letter-spacing:-.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ios-nav.mode-page .ios-nav-title{ grid-column:2; text-align:center; max-width:210px; }
.ios-nav.mode-large .ios-nav-title{ grid-column:2; justify-self:start; text-align:left; font-size:26px; font-weight:800; letter-spacing:-.6px; padding-left:0; }
.ios-nav-back{
  grid-column:1; justify-self:start; display:flex; align-items:center; gap:3px;
  border:none; background:none; color:inherit; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:400; letter-spacing:-.2px; padding:6px 6px 6px 4px;
}
.ios-nav-back:active{ opacity:.5; }
.ios-nav-side{ grid-column:3; }

/* leading brand mark — màn gốc (L1) không có back nên nav bar trống bên trái;
   thêm logo VLF (top-left, kiểu YouTube/Play/X) để header có DANH TÍNH app,
   KHÔNG dùng hamburger/drawer: điều hướng chính đã nằm ở thanh tab dưới. */
.nat-brand{ flex:0 0 auto; display:flex; align-items:center; }
.nat-brand svg{ width:28px; height:28px; border-radius:7px; display:block; box-shadow:0 1px 5px rgba(0,0,0,.20); }
.ios-nav.mode-large .nat-brand{ grid-column:1; align-self:center; }
/* màn gốc Home (hero tím): logo nằm top-left, cân với chuông/help bên phải.
   Trên nền tối, viền sáng mảnh + đổ bóng để khối monogram tách khỏi hero. */
.nat-brand-bare{ position:absolute; top:calc(var(--zalo-status-h) + 9px); left:14px; z-index:120;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; }
.nat-brand-bare svg{ width:31px; height:31px; border-radius:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.34); }

/* ---------- Android Material app bar ---------- */
.md-appbar{
  position:absolute; top:var(--zalo-status-h); left:0; right:0; height:var(--zalo-action-h);
  display:flex; align-items:center; gap:6px; padding:0 6px 0 8px;
  z-index:110; color:var(--zalo-header-fg);
}
.md-back,.md-overflow{
  width:42px; height:42px; flex:0 0 auto; border:none; background:none; color:inherit;
  border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.md-back:active,.md-overflow:active{ background:rgba(255,255,255,.16); }
.md-appbar-title{
  flex:1; min-width:0; font-weight:600; letter-spacing:.1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:4px;
}
.md-appbar.mode-large .md-appbar-title{ font-size:22px; font-weight:700; padding-left:8px; }
.md-appbar.mode-large .nat-brand{ margin-left:2px; }
.md-appbar.mode-large .nat-brand svg{ width:26px; height:26px; }
.md-appbar.mode-page .md-appbar-title{ font-size:19px; }
/* gesture pill Android: rộng & mảnh hơn pill iOS */
.nat-md-gesture{ width:108px; height:4px; bottom:9px; }

/* ============================================================
   TAB BAR — biến thể nền tảng (footer L1 vẽ bởi app)
   ============================================================ */
/* iOS: blur + nhãn nhỏ + hairline mảnh (gần mặc định) */
.v-tabbar[data-platform="ios"]{ border-top:.5px solid var(--vlf-line); }
.v-tabbar[data-platform="ios"] .v-tab{ font-size:10px; gap:2px; }

/* Android Material: viên chỉ báo bo tròn sau icon của tab active */
.v-tabbar[data-platform="android"]{ background:var(--vlf-bg); backdrop-filter:none; border-top:1px solid var(--vlf-line); }
.v-tabbar[data-platform="android"] .v-tab{ font-size:11px; gap:4px; justify-content:flex-start; padding-top:9px; }
.v-tabbar[data-platform="android"] .v-tab .ic{
  width:56px; height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.v-tabbar[data-platform="android"] .v-tab.on .ic{ background:var(--vlf-purple-100); }
.v-tabbar[data-platform="android"] .v-tab.on{ color:var(--vlf-purple-700); }
.v-tabbar[data-platform="android"] .v-tab .badge{ top:-1px; right:8px; }

/* ============================================================
   NATIVE LOGIN — số điện thoại + OTP (onboarding iOS/Android)
   ============================================================ */
.nl-field{ position:relative; margin-top:8px; }
/* logo gọn cho màn đăng nhập (SVG không set size sẽ giãn full-width → màn bị tràn/scroll) */
.nl-logo{ margin-bottom:22px; }
.nl-logo svg{ width:60px; height:60px; border-radius:15px; display:block; box-shadow:0 8px 22px rgba(0,0,0,.32); }
.nl-row{ display:flex; gap:8px; }
.nl-cc{ flex:0 0 auto; height:54px; padding:0 14px; border-radius:14px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08); color:#fff; font-size:16px; font-weight:700; display:flex; align-items:center; gap:5px; cursor:pointer; font-family:inherit; }
.nl-input{ flex:1; min-width:0; height:54px; border-radius:14px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08); color:#fff; font-size:16px; padding:0 16px; font-family:inherit; }
.nl-input::placeholder{ color:rgba(255,255,255,.4); }
.nl-input:focus,.nl-otp:focus{ outline:none; border-color:var(--vlf-gold-500); background:rgba(255,255,255,.12); }
.nl-cclist{ position:absolute; top:60px; left:0; width:230px; max-height:228px; overflow-y:auto;
  background:#2a1733; border:1px solid rgba(255,255,255,.16); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.5); z-index:20; padding:6px; }
.nl-ccitem{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:none; background:none; color:#fff; cursor:pointer; border-radius:10px; text-align:left; font-family:inherit; }
.nl-ccitem:active,.nl-ccitem.on{ background:rgba(255,255,255,.1); }
.nl-ccitem .c{ font-weight:700; font-size:15px; min-width:50px; }
.nl-ccitem .n{ font-size:13px; opacity:.72; }
.nl-hint{ margin-top:10px; font-size:12px; color:rgba(255,255,255,.5); }
.nl-otp{ width:100%; height:60px; text-align:center; letter-spacing:.55em; font-size:24px; font-weight:700; padding-left:.55em;
  border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; font-family:inherit; margin-top:8px; }
.nl-otp::placeholder{ color:rgba(255,255,255,.32); }
.nl-resend{ margin-top:14px; font-size:13px; color:rgba(255,255,255,.6); }
.nl-resend button{ background:none; border:none; color:var(--vlf-gold-300); font-weight:700; cursor:pointer; font-size:13px; font-family:inherit; padding:0; }
.nl-div{ display:flex; align-items:center; gap:12px; margin:16px 0; color:rgba(255,255,255,.42); font-size:12px; }
.nl-div::before,.nl-div::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.16); }
.nl-sso{ width:100%; height:54px; border-radius:14px; border:none; background:#fff;
  color:#000; font-size:15.5px; font-weight:600; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 2px 10px rgba(0,0,0,.28); transition:filter .12s ease; }
.nl-sso:active{ filter:brightness(.92); }
/* Apple: nút trắng chuẩn HIG (logo + chữ đen) trên nền tối */
.nl-sso[data-plat="ios"]{ background:#fff; color:#000; font-weight:600; }
/* Google: nút trắng chuẩn, logo G nhiều màu, chữ #1f1f1f, font-weight 500 */
.nl-sso[data-plat="android"]{ background:#fff; color:#1f1f1f; font-weight:500; }
.nl-back{ display:block; width:100%; margin-top:16px; background:none; border:none; color:rgba(255,255,255,.6); font-size:13px; cursor:pointer; font-family:inherit; }

/* native login: nút primary ĐỒNG BỘ với ô nhập & SSO — cùng bo 14px, cùng
   chiều cao 52px, KHÔNG uppercase (khớp "Tiếp tục với Apple/Google"), để 3
   control xếp chồng nhìn như một khối native nhất quán, không lệch pill/rect. */
.v-onboard .nl-primary{ height:54px; flex-shrink:0; border-radius:14px; text-transform:none; letter-spacing:.005em; font-weight:700; font-size:15.5px; }
.v-onboard .nl-primary[disabled]{ opacity:1; background:rgba(255,255,255,.12); color:rgba(255,255,255,.4); box-shadow:none; cursor:default; }
.v-onboard .nl-primary[disabled]:active{ transform:none; }

/* .inner là flex column cuộn dọc — KHÔNG cho các control co lại (nếu không
   nút 52px bị bóp còn ~21px khi nội dung cao). Cho phần thừa cuộn thay vì bóp. */
.v-onboard .inner > *{ flex-shrink:0; }

/* nút disabled chung trong onboarding (nền tối) */
.v-onboard .v-btn[disabled]{ opacity:1; background:rgba(255,255,255,.18); color:rgba(255,255,255,.55); box-shadow:none; cursor:default; }
.v-onboard .v-btn[disabled]:active{ transform:none; }

/* notif bell + help: trên Zalo nằm trái cụm ···|X; trên native KHÔNG có cụm,
   nên đưa về sát mép phải nav bar (trailing item) */
.za-frame[data-platform="ios"] .v-bell,
.za-frame[data-platform="android"] .v-bell{ right:10px; }
.za-frame[data-platform="ios"] .v-helpbtn,
.za-frame[data-platform="android"] .v-helpbtn{ right:50px; }
/* trên màn surface (sáng): chuông & help phải đổi sang màu tối để đọc được */
.za-frame[data-platform="ios"][data-navtone="surface"] .v-bell,
.za-frame[data-platform="ios"][data-navtone="surface"] .v-helpbtn,
.za-frame[data-platform="android"][data-navtone="surface"] .v-bell,
.za-frame[data-platform="android"][data-navtone="surface"] .v-helpbtn{ color:var(--vlf-ink-800); }
.za-frame[data-platform="ios"][data-navtone="surface"] .v-bell-badge,
.za-frame[data-platform="android"][data-navtone="surface"] .v-bell-badge{ border-color:var(--vlf-bg,#F2F2F2); }