:root {
  /* Mặc định giao diện sáng để iOS/Laban Key không tự suy đoán sai appearance. */
  color-scheme: light;
  --gd-green: #0068FF;
  --gd-green-dark: #0057D9;
  --gd-green-soft: #EAF3FF;
  --gd-text-dark: #303846;
  --gd-text-gray: #7A7F89;
  --gd-line: #E5E7EB;
  --gd-card: #FFFFFF;
  --danger: #DC2626;
  --purple-soft: #F3F0FF;
  --purple-line: #C4B5FD;
  --purple-text: #6D28D9;
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, .12);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, .12);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { color-scheme: light; }
html, body, #app { min-height: 100%; margin: 0; }
body { background: var(--gd-green-soft); color: var(--gd-text-dark); }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
.hidden { display: none !important; }

.app-shell {
  min-height: 100vh;
  max-width: 430px;
  margin: 0 auto;
  background: var(--gd-green-soft);
  position: relative;
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}
.page { padding: 16px; }
.android-card {
  background: #fff;
  border: 1px solid var(--gd-line);
  border-radius: 18px;
}

/* v1.2.4 - Splash khởi động: che hoàn toàn màn Login trong lúc Firebase
   khôi phục tài khoản đã lưu và xác minh quyền Pro/session lease. */
.startup-splash {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 10000;
  background: var(--gd-green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.startup-splash-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-3vh);
}
.startup-splash-logo {
  width: 156px;
  height: 104px;
  object-fit: contain;
  display: block;
}
.startup-splash-spinner {
  width: 28px;
  height: 28px;
  margin-top: 28px;
  border: 3px solid rgba(0, 104, 255, .18);
  border-top-color: var(--gd-green-dark);
  border-radius: 50%;
  animation: gd-startup-spin .8s linear infinite;
}
.startup-splash-text {
  margin: 14px 0 0;
  color: var(--gd-text-gray);
  font-size: 14px;
  font-weight: 600;
}
.startup-splash-version {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  color: #9CA3AF;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}
@keyframes gd-startup-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .startup-splash-spinner { animation-duration: 1.6s; }
}

/* Login giống activity_login.xml */
.login-screen {
  min-height: 100vh;
  background: var(--gd-green-soft);
  display: block;
  padding: 80px 28px 32px;
}
.login-card {
  width: min(430px, 100%);
  margin: 0 auto;
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.logo {
  width: 120px;
  height: 80px;
  object-fit: contain;
  border-radius: 0;
  margin: 4px auto 0;
  display: block;
}
.login-card h1 {
  margin: 34px 0 0;
  color: var(--gd-text-dark);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 800;
}
.login-card p {
  margin: 10px 0 0;
  color: var(--gd-text-gray);
  font-size: 15px;
}

.login-app-version {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  color: #9CA3AF;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
  z-index: 1;
}
.field {
  width: 100%;
  height: 62px;
  margin-top: 18px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1.5px solid var(--gd-green);
  background: #fff;
  color: var(--gd-text-dark);
  outline: none;
  font-size: 16px;
}
#fullName { margin-top: 34px; }
#email:not(.hidden) { margin-top: 34px; }
.field::placeholder { color: #9CA3AF; }
.primary-btn {
  width: 100%;
  height: 58px;
  margin-top: 28px;
  border-radius: 18px;
  background: linear-gradient(90deg, #0068FF, #0057D9);
  color: white;
  font-size: 17px;
  font-weight: 800;
  box-shadow: none;
}
.primary-btn:disabled { opacity: .65; }
.link-btn {
  width: 100%;
  margin-top: 26px;
  background: transparent;
  color: var(--gd-green-dark);
  font-size: 16px;
  font-weight: 800;
}
.error-text {
  margin-top: 16px;
  min-height: 20px;
  color: #E53935;
  font-size: 14px;
  text-align: center;
}

/* Header canh cuốc */
.top-header {
  height: calc(66px + env(safe-area-inset-top));
  padding: calc(14px + env(safe-area-inset-top)) 12px 14px 16px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 5px 18px rgba(0,0,0,.12);
}
.header-chip {
  color: #555;
  font-size: 14px;
  white-space: nowrap;
  line-height: 34px;
  min-width: 62px;
  text-align: left;
  font-weight: 400;
}
.header-chip.ok { color: #0057D9; font-weight: 700; }
.auto-box {
  height: 38px;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.auto-label {
  color: #6B7280;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.switch {
  width: 48px;
  height: 28px;
  border-radius: 18px;
  background: #CBD5E1;
  position: relative;
  flex: 0 0 auto;
  padding: 0;
}
.switch::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .18s;
}
.switch.on { background: #0068FF; }
.switch.on::after { transform: translateX(20px); }
.bell {
  width: 44px;
  height: 44px;
  background: transparent;
  color: #444;
  font-size: 24px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 0;
}
.badge {
  position: absolute;
  right: 1px;
  top: 2px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 5px;
  background: #EF4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* Canh cuốc */
.rides-page {
  padding: 21px 14px 14px;
  min-height: calc(100vh - 140px);
}
.ride-list { display: flex; flex-direction: column; gap: 0; }
.server-status {
  margin-bottom: 10px;
  text-align: center;
  color: #DC2626;
  font-size: 15px;
  font-weight: 800;
}
.empty-ride-modern {
  min-height: calc(100vh - 210px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px 40px;
}
.empty-car { font-size: 60px; line-height: 96px; width: 96px; height: 96px; }
.empty-ride-modern h2 {
  margin: 28px 0 0;
  color: #111827;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
}
.empty-ride-modern p {
  margin: 10px 0 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.55;
}
.android-ride-card {
  margin: 8px 8px 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--purple-line);
  background: var(--purple-soft);
  box-shadow: var(--shadow-sm);
}
.ride-message {
  color: #303846;
  font-size: var(--ride-font, 18px);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  font-weight: 800;
}
.server-tag {
  display: inline-flex;
  margin-top: 8px;
  margin-bottom: 4px;
  color: var(--purple-text);
  background: #EDE9FE;
  border-radius: 9px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
}
.ride-media {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin: 10px 0;
  background: #F3F4F6;
}
.voice-box {
  height: 72px;
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid #B7DCEB;
  background: #DDF3FF;
  display: flex;
  align-items: center;
  gap: 12px;
}
.voice-play {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0877F2;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}
.voice-box div { flex: 1; color: #555; }
.voice-box span { display:block; margin-top:3px; font-size:14px; font-weight:800; }
.voice-box em {
  width: 42px; height: 42px; border-radius: 12px; background: #C7E8F3;
  display: grid; place-items: center; color: #4B5563; font-style: normal; font-weight:900; font-size:18px;
}

/* Web V9.9.1 - transcript nằm ngay dưới audio của cuốc voice. */
.voice-transcript {
  margin: -1px 0 8px;
  padding: 10px 12px;
  border: 1px solid #D7E7EF;
  border-radius: 12px;
  background: #F8FCFF;
  color: #1F2937;
  font-size: var(--ride-font, 18px);
  line-height: 1.42;
  font-weight: 850;
  white-space: pre-wrap;
  word-break: break-word;
}
.voice-transcript-label {
  display: block;
  margin-bottom: 4px;
  color: #64748B;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .25px;
  text-transform: uppercase;
}
.voice-transcript.pending {
  color: #64748B;
  font-size: 14px;
  font-weight: 750;
}
.ride-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.ride-meta-row span {
  flex: 1;
  min-width: 0;
  color: #4098FF;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ride-meta-row b {
  color: #0057D9;
  font-size: 13px;
}
.ride-actions {
  display: flex;
  gap: 14px;
}
.accept-btn, .skip-btn {
  flex: 1;
  height: 48px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
}
.accept-btn { background: #0068FF; color: #fff; }
.skip-btn { background: #E2E2E6; color: #4B5563; }

/* Tin nhắn */
.messages-page {
  min-height: calc(100vh - 74px - env(safe-area-inset-bottom));
  background: var(--gd-green-soft);
  padding-top: calc(env(safe-area-inset-top) + 18px);
  padding-bottom: 90px;
}

.chat-page {
  min-height: calc(100vh - 74px - env(safe-area-inset-bottom));
  background: var(--gd-green-soft);
  padding-bottom: 90px;
}
.messages-tabs {
  height: 58px;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 0 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  position: sticky;
  top: calc(env(safe-area-inset-top) + 18px);
  z-index: 20;
}
.messages-tab {
  height: 58px;
  background: transparent;
  color: #111827;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}
.messages-tab.active { color: #1976D2; }
.message-list-container {
    padding: 14px;
    padding-top: calc(14px + env(safe-area-inset-top));
}
.empty-message-text {
  margin-top: 120px;
  color: #333;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}
.native-list { display: flex; flex-direction: column; gap: 10px; }
.native-group-row {
  min-height: 70px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--gd-line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: #E5E7EB;
  color: #0057D9;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex: 0 0 auto;
  overflow: hidden;
}
.ok-avatar { background: #E8F2FF; color: #0068FF; }
.native-group-text { min-width: 0; flex: 1; }
.native-group-text div { color: #111827; font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.native-group-text p { margin: 4px 0 0; color: #6B7280; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check { width: 24px; height: 24px; accent-color: #0068FF; }
.native-chat-header {
  height: 56px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.back-chat { width: 28px; height: 44px; background: transparent; color: #111827; font-size: 38px; line-height: 1; }
.native-chat-title { flex:1; min-width:0; color:#111827; font-size:17px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tap-reply { height:36px; padding:0 12px; background:transparent; color:#6B7280; font-size:14px; font-weight:900; }
.native-chat-list {
  min-height: calc(100vh - 56px - 64px - 74px);
  min-height: calc(100dvh - 56px - 64px - 74px - env(safe-area-inset-bottom));
  background: #E9EEF5;
  padding: 10px 10px 84px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}
.bubble {
  max-width: 78%;
  align-self: flex-start;
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0 !important;
  padding: 9px 11px;
  border-radius: 16px;
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  white-space: normal;
}
.bubble-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bubble.me { align-self: flex-end; background: #DDEBFF; }
.bubble-sender { color:#1976D2; font-size:13px; font-weight:900; margin-bottom:4px; }
.bubble-quote {
  display: flex;
  align-items: stretch;
  gap: 9px;
  min-width: 0;
  margin: 1px 0 8px;
  padding: 5px 8px 5px 5px;
  border-radius: 9px;
  background: rgba(255,255,255,.50);
}
.bubble.me .bubble-quote { background: rgba(255,255,255,.58); }
.bubble-quote-bar {
  width: 4px;
  min-width: 4px;
  border-radius: 999px;
  background: #1DA1F2;
}
.bubble-quote-text { min-width: 0; flex: 1; }
.bubble-quote-text strong {
  display: block;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bubble-quote-text p {
  margin: 2px 0 0;
  color: #6B7280;
  font-size: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.bubble-time { color:#6B7280; font-size:11px; text-align:right; margin-top:4px; }
.bubble-voice { margin-top: 6px; font-weight: 800; color: #2563EB; }
.bubble-voice-control { display:flex; align-items:center; gap:8px; }
.bubble-voice-play {
  width:34px; height:34px; min-width:34px; border:0; border-radius:50%;
  display:inline-grid; place-items:center; padding:0;
  background:#0877F2; color:#fff; font-size:16px; font-weight:900;
  cursor:pointer;
}
.bubble-voice-play:active { transform: scale(.96); }
.native-chat-input {
  position: fixed;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(430px, 100%);
  height: 64px;
  padding: 8px 10px;
  background: #fff;
  box-shadow: 0 -4px 14px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 25;
}
.native-chat-input input {
  flex: 1;
  height: 46px;
  border: 1px solid #C7CBD1;
  border-radius: 4px;
  padding: 0 14px;
  font-size: 15px;
  outline: none;
}
.native-chat-input button {
  width: 64px;
  height: 46px;
  background: #0068FF;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

/* Cài đặt */
.settings-page { padding: 16px 16px 110px; }
.settings-stack { display: flex; flex-direction: column; gap: 14px; }
.settings-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.settings-header-row h1 {
  flex: 1;
  margin: 0;
  color: #333;
  font-size: 26px;
  font-weight: 900;
}
.settings-header-row span { width:38px; height:38px; display:grid; place-items:center; font-size:22px; }
.setting-card { padding: 16px; }
.setting-card h2 {
  margin: 0;
  color: #333;
  font-size: 21px;
  font-weight: 900;
}
.setting-card p {
  margin: 8px 0 12px;
  color: #777;
  font-size: 13px;
  line-height: 1.4;
}
.keyword-title-row { display:flex; align-items:center; gap:8px; }
.keyword-title-row h2 { flex:1; }
.circle-add, .circle-gear {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.circle-add { background: #0068FF; color: #fff; }
.circle-gear { background: #EDE9FE; color: #111827; font-size: 20px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; min-height: 8px; margin-top: 12px; }
.chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:7px 10px; background:#EDE9FE; color:#111827; font-weight:800; }
.chip button { background:transparent; color:#DC2626; font-size:16px; font-weight:900; }
.check-row { height:42px; display:flex; align-items:center; gap:8px; color:#333; font-size:16px; }
.check-row input, .radio-row input { accent-color: #0068FF; }
.range-row { display:flex; align-items:center; gap:14px; margin-top:16px; }
.range { flex:1; accent-color:#0068FF; }
.range-row b { width:48px; text-align:center; color:#333; font-size:16px; }
.radio-row { display:flex; align-items:center; gap:8px; min-height:36px; color:#333; font-size:16px; }
.save-btn {
  width: 100%;
  height: 48px;
  border-radius: 18px;
  margin-top: 12px;
  background: #0068FF;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}
.reply-field {
  width: 100%;
  height: 52px;
  border-radius: 18px;
  border: 1px solid var(--gd-line);
  background: #fff;
  padding: 0 14px;
  font-size: 17px;
  outline: none;
}

/* Tài khoản */
.account-page { padding: 18px 18px 120px; }
.account-header-user {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 18px;
}
.account-header-user img { width:64px; height:64px; object-fit:contain; }
.account-header-user div { flex:1; min-width:0; }
.account-header-user h1 { margin:0; color:#303846; font-size:22px; font-weight:900; }
.account-header-user p { margin:3px 0 0; color:#555; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-header-user > button {
  flex: 0 0 auto;
}
.section-title {
  margin: 10px 0 12px;
  color: #303846;
  font-size: 22px;
  font-weight: 900;
}
.account-plan-card, .account-zalo-card { padding:18px; }
.account-plan-card > div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:22px;
}
.account-plan-card > div:first-child { margin-top:0; }
.account-plan-card span { color:#555; font-size:16px; }
.account-plan-card b { color:#303846; font-size:16px; }
.zalo-row { display:flex; align-items:center; gap:18px; }
.zalo-row .avatar { width:60px; height:60px; }
.zalo-row b { flex:1; color:#303846; font-size:22px; font-weight:900; }
.disconnect-btn {
  display: none;
}
.zalo-status { margin:20px 0 0; color:#D32F2F; font-size:17px; font-weight:900; }
.zalo-status.connected { color:#0068FF; }
.zalo-status.disconnected { color:#D32F2F; }
.zalo-group-count { margin:16px 0 0; color:#555; font-size:17px; }
.connect-cloud-btn {
  width: 100%;
  height: 54px;
  border-radius: 18px;
  margin-top: 18px;
  background: #0068FF;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}
.ghost-full {
  width: 100%;
  height: 48px;
  margin-top: 12px;
  border-radius: 18px;
  background: #E4EFFF;
  color: #263142;
  font-size: 16px;
  font-weight: 900;
}
.cloud-status-text { margin:10px 0 0; color:#777; font-size:15px; font-weight:800; }
.settings-section-title { margin-top: 30px; font-size: 24px; }
.account-settings-list { display:flex; flex-direction:column; gap:10px; }
.account-settings-list button {
  width:100%;
  height:58px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--gd-line);
  color:#555;
  text-align:left;
  padding:0 18px;
  font-size:18px;
}
.account-settings-list .delete-account { color:#D32F2F; font-weight:900; }

/* QR cloud */
.qr-screen {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #EDF5FF;
  overflow: auto;
}
.qr-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 24px;
}
.qr-page h1 {
  margin: 0;
  color: #263142;
  font-size: 28px;
  font-weight: 900;
}
.qr-page > p {
  margin: 8px 0 0;
  color: #666;
  font-size: 16px;
  line-height: 1.45;
}
.qr-card-box {
  margin-top: 28px;
  background: #fff;
  padding: 24px;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.qr-card-box img { width: 260px; height: 260px; object-fit: contain; }
.qr-card-box strong { margin-top:18px; color:#333; font-size:16px; text-align:center; }
.qr-loading { width:48px; height:48px; border:4px solid #E4EFFF; border-top-color:#0068FF; border-radius:50%; animation:spin 1s linear infinite; overflow:hidden; text-indent:-999px; }
@keyframes spin { to { transform: rotate(360deg); } }
.qr-back-btn {
  width:100%;
  height:56px;
  margin-top:12px;
  border-radius:6px;
  background:#E4EFFF;
  color:#263142;
  font-size:17px;
  font-weight:900;
}

/* Bottom nav */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(430px, 100%);
  height: calc(70px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  border-top: 1px solid var(--gd-line);
  box-shadow: 0 -5px 18px rgba(0,0,0,.12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 40;
}
.nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:transparent;
  color:#777;
  font-size:12px;
  font-weight:800;
}
.nav-item .ico { font-size:22px; line-height:1; }
.nav-item.active { color:#0068FF; }

/* Modal auto/pass */
.modal-backdrop { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.5); display:grid; place-items:center; padding:18px; }
.modal { width:min(390px,100%); max-height:86vh; overflow:auto; background:#fff; border-radius:18px; padding:18px; color:#111827; }
.modal h2 { margin:0 0 8px; font-size:22px; }
.modal h3 { margin:16px 0 8px; }
.modal .row { display:flex; align-items:center; gap:10px; margin:10px 0; }
.modal .space { justify-content:space-between; }
.modal textarea.field { height:auto; padding-top:12px; }
.ghost-btn, .small-btn, .danger-btn {
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
}
.ghost-btn { background:#E4EFFF; color:#263142; }
.small-btn { background:#0068FF; color:#fff; }
.danger-btn { background:#FEE2E2; color:#B91C1C; }
.setting-desc { color:#777; font-size:13px; line-height:1.4; }
.toast-host { position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 16px); transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { max-width:min(390px, calc(100vw - 28px)); background:#111827; color:#fff; border-radius:999px; padding:10px 14px; font-weight:800; box-shadow:0 10px 28px rgba(0,0,0,.24); }

@media (min-width: 700px) {
  body { background:#EAF3FF; }
  .app-shell, .login-card, .qr-page { box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
}
@media (max-width: 360px) {
  .auto-label { max-width: 118px; }
  .messages-tab { font-size: 14px; }
  .empty-ride-modern h2 { font-size: 26px; }
}

/* ===== Canh Cuốc v2 - bám giao diện Android mẫu, chỉ Server 2 ===== */
:root {
  --gd-green: #0068FF;
  --gd-green-dark: #0057D9;
  --gd-green-soft: #F1F6FF;
  --gd-text-dark: #303846;
  --gd-muted: #686D76;
  --gd-nav-gray: #6F7580;
  --gd-purple-status: #6750A4;
  --gd-active-pill: #F1EAFF;
}

html, body, #app { min-height: 100dvh; }
body { background: var(--gd-green-soft); }
.app-shell {
  min-height: 100dvh;
  max-width: 430px;
  background: var(--gd-green-soft);
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  box-shadow: none;
}

/* Header tab Canh Cuốc */
.top-header {
  height: calc(70px + env(safe-area-inset-top));
  padding: calc(18px + env(safe-area-inset-top)) 16px 18px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: none;
}
.ride-filter-chip,
.auto-pill,
.sound-btn {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .08);
}
.ride-header-spacer {
  width: 122px;
  height: 38px;
  flex: 0 0 auto;
  pointer-events: none;
}
.ride-filter-chip {
  height: 38px;
  min-width: 105px;
  max-width: 122px;
  padding: 0 13px;
  border-radius: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--gd-muted);
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0068FF;
  flex: 0 0 auto;
}
.status-dot.offline { background: #EF4444; }
.status-dot.online { background: #0068FF; }
.filter-label { transform: translateY(-.5px); }
.filter-label.connected { color:#0068FF; }
.filter-caret { font-size: 12px; transform: translateY(-1px); color: #777D87; }
.top-auto-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 0 0 auto;
}
.auto-pill {
  width: 87px;
  height: 38px;
  border-radius: 21px;
  color: var(--gd-muted);
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}
.switch {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #D4D4D8;
  padding: 0;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.switch::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: -1px;
  top: -1px;
  border-radius: 999px;
  background: #F4F4F5;
  box-shadow: 0 2px 7px rgba(0,0,0,.22);
  transition: transform .18s ease;
}
.switch.on { background: #0068FF; }
.switch.on::after { transform: translateX(16px); background: #FFFFFF; }
.sound-btn {
  width: 49px;
  height: 49px;
  border-radius: 14px;
  color: #3F4248;
  display: grid;
  place-items: center;
  position: relative;
}
.sound-btn svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sound-btn svg path:first-child {
  fill: currentColor;
  stroke: none;
}
/* Chuông thông báo quản trị viên: icon nét, tránh hiểu nhầm là nút âm lượng. */
.sound-btn svg.admin-bell-icon path,
.sound-btn svg.admin-bell-icon path:first-child {
  fill: none;
  stroke: currentColor;
}
.badge {
  right: -3px;
  top: -3px;
  min-width: 20px;
  height: 20px;
  background: #EF4444;
}

/* Canh Cuốc content */
.rides-page {
  padding: 29px 22px 18px;
  min-height: calc(100dvh - 150px - env(safe-area-inset-bottom));
  background: var(--gd-green-soft);
}
.ride-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.server-status {
  margin: -10px 0 12px;
  text-align: center;
  color: #DC2626;
  font-size: 15px;
  font-weight: 900;
}
.android-ride-card {
  margin: 0 0 20px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #E6E8EF;
  background: #FFFFFF;
  box-shadow: 0 3px 8px rgba(15, 23, 42, .10);
}
.ride-message {
  color: #303846;
  font-size: var(--ride-font, 18px);
  line-height: 1.45;
  letter-spacing: .1px;
  white-space: pre-wrap;
  word-break: break-word;
  font-weight: 900;
}
.server-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-top: 8px;
  margin-bottom: 4px;
  color: #0057D9;
  background: #E8F2FF;
  border-radius: 9px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 20px;
  font-weight: 900;
}
.ride-media {
  max-height: 220px;
  border-radius: 12px;
  margin: 10px 0;
}
.ride-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.ride-meta-row span {
  flex: 1;
  min-width: 0;
  color: #4098FF;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ride-meta-row b {
  color: #0057D9;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
  white-space: nowrap;
}
.ride-actions {
  display: flex;
  gap: 14px;
}
.accept-btn,
.skip-btn {
  flex: 1;
  height: 48px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.accept-btn {
  background: #0068FF;
  color: #FFFFFF;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
.skip-btn {
  background: #E5E5EA;
  color: #4B5563;
}

/* Empty Canh Cuốc */
.empty-ride-modern {
  min-height: calc(100dvh - 230px - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px 46px;
}
.empty-car {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  font-size: 60px;
  line-height: 1;
}
.empty-ride-modern h2 {
  margin: 28px 0 0;
  color: #111827;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .1px;
}
.empty-ride-modern p {
  margin: 11px 0 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 500;
}

/* Bottom navigation giống tab app */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(430px, 100%);
  height: calc(80px + env(safe-area-inset-bottom));
  padding: 9px 0 env(safe-area-inset-bottom);
  background: #FFFFFF;
  border-top: 0;
  box-shadow: 0 -5px 18px rgba(15, 23, 42, .12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 40;
}
.nav-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  background: transparent;
  color: #6F7580;
  font-size: 12px;
  font-weight: 900;
}
.nav-item .ico {
  width: 64px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #6F7580;
}
.nav-item .ico svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item .ico svg circle { fill: currentColor; stroke: none; }
/* 0.1.40 — bánh răng Cài đặt theo mẫu: 8 răng, nét dày, tâm rỗng rõ ràng. */
.nav-item .ico svg.settings-gear-icon {
  width: 29px;
  height: 29px;
  fill: currentColor !important;
  stroke: none !important;
}
.nav-item .ico svg.settings-gear-icon path {
  fill: currentColor !important;
  stroke: none !important;
}
.nav-item .nav-label {
  display: block;
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.15;
  transform: translateY(-1px);
  color: #111827;
}
.nav-item.active {
  color: #0068FF;
}
.nav-item.active .ico {
  background: var(--gd-active-pill);
  color: #0068FF;
}
.nav-item.active .nav-label {
  color: #0068FF;
}

@media (max-width: 374px) {
  .top-header { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .ride-filter-chip { min-width: 99px; padding: 0 10px; font-size: 14px; }
  .ride-header-spacer { width: 99px; }
  .top-auto-group { gap: 9px; }
  .auto-pill { width: 80px; font-size: 15px; }
  .sound-btn { width: 46px; height: 46px; }
  .rides-page { padding-left: 18px; padding-right: 18px; }
  .empty-ride-modern h2 { font-size: 28px; }
}
.icon-action {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #64748B;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
  padding: 0;
}

.icon-action svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logout-action {
  color: #64748B;
  background: #F8FAFC;
}

.disconnect-action {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #DC2626;
  background: #FEE2E2;
  border-color: #FECACA;
  box-shadow: none;
}

.disconnect-action svg {
  width: 23px;
  height: 23px;
}
.auto-pill.active {
  color: #0068FF;
  font-weight: 800;
  border-color: #B9D6FF;
  background: #EFF6FF;
}
/* ===== Auto dialog v3 - match Android app screenshots ===== */
.auto-backdrop {
  background: rgba(17, 24, 39, .66);
  place-items: center;
  padding: 0;
}
.auto-config-modal {
  width: min(350px, calc(100vw - 64px));
  height: min(610px, calc(100dvh - 168px));
  min-height: 460px;
  background: #FFFFFF;
  color: #111827;
  border-radius: 2px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  padding: 22px 18px 0;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.auto-dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  flex: 0 0 auto;
}
.auto-dialog-header h2 {
  flex: 1;
  margin: 0;
  color: #111827;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .1px;
}
.auto-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.auto-outline-btn {
  height: 33px;
  padding: 0 12px;
  border: 1px solid #2563EB;
  border-radius: 10px;
  background: #FFFFFF;
  color: #2563EB;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: .2px;
}
.auto-main-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 14px;
  flex: 0 0 auto;
}
.auto-main-tab {
  height: 52px;
  border-radius: 14px;
  border: 1px solid #C7D2FE;
  background: #EEF2FF;
  color: #374151;
  font-size: 14px;
  line-height: 1.18;
  font-weight: 900;
  text-align: center;
}
.auto-main-tab.active {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
}
.auto-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 12px;
  overscroll-behavior: contain;
}
.auto-pane h3 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: .1px;
}
.auto-pane h4 {
  margin: 16px 0 9px;
  color: #374151;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
}
.auto-hint {
  margin: 0 0 12px;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.32;
  font-weight: 500;
}
.auto-input {
  width: 100%;
  min-height: 44px;
  margin: 0 0 8px;
  border: 1px solid #D1D5DB;
  border-radius: 14px;
  background: #FFFFFF;
  color: #111827;
  outline: none;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
  resize: none;
}
.auto-input::placeholder { color: #9CA3AF; font-weight: 700; }
.auto-input:focus { border-color: #2563EB; box-shadow: 0 0 0 1px rgba(37, 99, 235, .12); }
.auto-textarea {
  min-height: 54px;
  padding-top: 12px;
  line-height: 1.35;
}
.auto-subtabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 12px;
}
.auto-subtab {
  height: 40px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
}
.auto-subtab.receive {
  border: 1px solid #C7D2FE;
  background: #EEF2FF;
  color: #374151;
}
.auto-subtab.receive.active {
  border-color: #2563EB;
  background: #2563EB;
  color: #FFFFFF;
}
.auto-subtab.block {
  border: 1px solid #FCA5A5;
  background: #FEF2F2;
  color: #DC2626;
}
.auto-subtab.block.active {
  border-color: #DC2626;
  background: #DC2626;
  color: #FFFFFF;
}
.auto-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.auto-chip-with-gear {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.auto-chip-with-gear .auto-chip {
  max-width: 100%;
}
.auto-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #2563EB;
  border-radius: 18px;
  background: #EFF6FF;
  color: #2563EB;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auto-chip.danger {
  background: #FEF2F2;
  border-color: #DC2626;
  color: #DC2626;
}
.auto-chip button {
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  line-height: 1;
}
.auto-gear-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #111827;
  background: #FFFFFF;
  color: #2563EB;
  font-size: 22px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.auto-empty-line {
  margin: 3px 0 0;
  color: #6B7280;
  font-size: 15px;
  line-height: 1.4;
}
.auto-dialog-footer {
  flex: 0 0 auto;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding: 7px 4px 13px;
  background: #FFFFFF;
}
.auto-footer-btn {
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .35em;
}
.auto-footer-btn.close { color: #374151; }
.auto-footer-btn.add { color: #2563EB; }

@media (max-width: 374px) {
  .auto-config-modal {
    width: calc(100vw - 44px);
    height: min(590px, calc(100dvh - 150px));
    padding-left: 16px;
    padding-right: 16px;
  }
  .auto-dialog-header h2 { font-size: 26px; }
  .auto-outline-btn { padding: 0 10px; font-size: 12.5px; }
  .auto-main-tabs { gap: 10px; }
  .auto-main-tab { font-size: 13.5px; }
}

/* ===== Auto dialog additions: Nhóm / Test nhanh / Mẫu đã lưu ===== */
.auto-dialog-header { gap: 10px; }
.auto-header-actions { gap: 7px; }
.auto-outline-btn { padding: 0 10px; }
.auto-outline-btn.auto-group-btn {
  border-color: #0068FF;
  color: #0057D9;
  background: #EFF6FF;
}

.auto-groups-modal {
  width: min(350px, calc(100vw - 54px));
  height: min(600px, calc(100dvh - 150px));
  background: #FFFFFF;
  color: #111827;
  border-radius: 2px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  padding: 28px 18px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.auto-groups-modal h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: .1px;
}
.auto-groups-desc {
  margin: 0 0 18px;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.34;
  font-weight: 500;
}
.auto-server-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.auto-server-tabs button {
  height: 42px;
  border-radius: 13px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #475569;
  font-size: 15px;
  font-weight: 900;
}
.auto-server-tabs button.active {
  border-color: #2563EB;
  background: #EFF6FF;
  color: #2563EB;
}
.auto-group-search-box {
  flex: 0 0 auto;
  height: 42px;
  margin-bottom: 12px;
  padding: 0 13px;
  border: 1px solid #D1D5DB;
  border-radius: 13px;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  gap: 9px;
}
.auto-group-search-box:focus-within {
  border-color: #93C5FD;
  background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
}
.auto-group-search-box svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: #64748B;
  stroke-width: 2;
  stroke-linecap: round;
}
.auto-group-search-box input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
}
.auto-group-search-box input::placeholder {
  color: #9CA3AF;
  opacity: 1;
}
.auto-group-search-box input::-webkit-search-cancel-button {
  opacity: .55;
}
.auto-groups-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
}
.auto-group-row {
  min-height: 64px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid #B9D6FF;
  background: #EFF6FF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auto-group-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auto-group-info strong {
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 235px;
}
.auto-group-info span {
  color: #0057D9;
  font-size: 13px;
  font-weight: 700;
}
.auto-group-check {
  width: 24px;
  height: 24px;
  accent-color: #0068FF;
  flex: 0 0 auto;
}
.auto-group-empty {
  padding: 30px 10px;
  text-align: center;
  color: #6B7280;
  font-size: 15px;
  line-height: 1.45;
}
.auto-groups-footer {
  flex: 0 0 auto;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 12px;
}
.auto-groups-footer button {
  background: transparent;
  border: 0;
  color: #6D28D9;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .35em;
}

.auto-test-modal {
  width: min(408px, calc(100vw - 22px));
  background: #FFFFFF;
  color: #111827;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  padding: 20px 18px 18px;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.auto-test-head,
.saved-samples-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auto-test-head h2,
.saved-samples-head h2 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: .1px;
}
.auto-test-head button,
.saved-samples-head button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: #111827;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}
.auto-test-modal p {
  margin: 14px 0 12px;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.35;
}
.auto-test-input {
  width: 100%;
  min-height: 78px;
  border: 1px solid #D1D5DB;
  border-radius: 14px;
  background: #FFFFFF;
  color: #111827;
  outline: none;
  resize: none;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.auto-test-input::placeholder { color: #9CA3AF; }
.auto-test-example {
  margin: 10px 0 14px;
  color: #9CA3AF;
  font-size: 13px;
  font-weight: 700;
}
.auto-test-send {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 900;
}
.auto-test-cancel {
  width: 100%;
  height: 46px;
  margin-top: 10px;
  border-radius: 12px;
  background: transparent;
  color: #374151;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
}

.saved-samples-modal {
  width: min(350px, calc(100vw - 64px));
  background: #FFFFFF;
  color: #111827;
  border-radius: 2px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  padding: 20px 18px 20px;
}
.sample-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0 14px;
}
.sample-tabs button {
  height: 42px;
  border-radius: 14px;
  border: 1px solid #FCA5A5;
  background: #FEF2F2;
  color: #DC2626;
  font-size: 14px;
  font-weight: 900;
}
.sample-tabs button:first-child {
  border-color: #C7D2FE;
  background: #EEF2FF;
  color: #374151;
}
.sample-tabs button.active:first-child {
  border-color: #2563EB;
  background: #2563EB;
  color: #FFFFFF;
}
.sample-tabs button.danger.active {
  border-color: #DC2626;
  background: #DC2626;
  color: #FFFFFF;
}
.sample-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(330px, 45dvh);
  overflow: auto;
}
.saved-sample-row {
  min-height: 54px;
  padding: 10px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  background: #FFFFFF;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}
.saved-sample-row strong {
  min-width: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-sample-row button {
  background: transparent;
  border: 0;
  color: #2563EB;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}
.saved-sample-row button:last-child { color: #DC2626; }
.saved-sample-row.danger {
  border-color: #FCA5A5;
  background: #FEF2F2;
}
.sample-empty {
  padding: 18px 4px;
  color: #6B7280;
  font-size: 15px;
  text-align: center;
}

@media (max-width: 374px) {
  .auto-header-actions { gap: 5px; }
  .auto-outline-btn { height: 32px; padding: 0 7px; font-size: 11.5px; }
  .auto-groups-modal { width: calc(100vw - 44px); height: min(590px, calc(100dvh - 140px)); }
  .auto-test-head h2, .saved-samples-head h2 { font-size: 21px; }
  .saved-samples-modal { width: calc(100vw - 44px); }
}


/* QR live Server 2 */
.qr-card-box.qr-ended { border-color: #FECACA; background: #FFF7F7; }
.qr-card-box.qr-ended strong { color: #DC2626; }
body.dark .qr-card-box.qr-ended { background: #2A1214; border-color: #7F1D1D; }
body.dark .qr-card-box.qr-ended strong { color: #FCA5A5; }

.auto-range-note{margin:6px 0 14px;color:#6b7280;font-size:13px;line-height:1.4}
/* ===== Auto dialog polished v4 - giống app native hơn ===== */
.auto-config-modal {
  width: min(392px, calc(100vw - 46px));
  height: min(640px, calc(100dvh - 150px));
  min-height: 520px;
  border-radius: 18px;
  padding: 20px 18px 0;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .30);
}

.auto-dialog-header {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: center;
  padding-bottom: 14px;
}

.auto-dialog-header h2 {
  font-size: 30px;
  line-height: 1;
}

.auto-header-actions {
  display: grid;
  grid-template-columns: .72fr 1fr 1fr;
  gap: 8px;
  min-width: 0;
}

.auto-outline-btn {
  height: 34px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auto-main-tabs {
  gap: 14px;
  padding-bottom: 14px;
}

.auto-main-tab {
  height: 58px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.15;
}

.auto-subtabs {
  gap: 14px;
  padding-bottom: 14px;
}

.auto-subtab {
  height: 45px;
  border-radius: 15px;
  font-size: 16px;
}

.auto-subtab.receive.active::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-right: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-size: 14px;
  line-height: 1;
}

.auto-subtab.block::before {
  content: "⊘";
  margin-right: 8px;
  font-size: 20px;
  vertical-align: -2px;
}

.auto-hint {
  margin: 2px 0 14px;
  color: #6B7280;
  font-size: 15px;
  line-height: 1.4;
}

.auto-pair-input-layout {
  display: grid;
  grid-template-columns: 1fr 62px;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 18px;
}

.auto-pair-input-stack {
  display: grid;
  gap: 9px;
}

.auto-field-with-icon {
  min-height: 50px;
  border: 1px solid #D1D5DB;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  background: #FFFFFF;
}

.auto-field-with-icon:focus-within {
  border-color: #2563EB;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .12);
}

.auto-input-icon {
  display: grid;
  place-items: center;
  color: #6B7280;
  font-size: 22px;
  font-weight: 800;
}

.auto-field-with-icon .auto-input {
  margin: 0;
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  padding-left: 0;
  box-shadow: none;
}

.auto-paste-btn {
  min-height: 109px;
  border: 1px solid #BFDBFE;
  border-radius: 16px;
  background: #FFFFFF;
  color: #2563EB;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 900;
}

.auto-paste-btn span {
  font-size: 29px;
  line-height: 1;
}

.auto-pane h4 {
  margin: 12px 0 10px;
  font-size: 17px;
  color: #111827;
}

.auto-pair-chip-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auto-pair-chip-row {
  display: grid;
  grid-template-columns: 1fr 49px;
  align-items: center;
  gap: 10px;
}

.auto-pair-chip-card {
  min-width: 0;
  min-height: 46px;
  border: 1.5px solid #60A5FA;
  border-radius: 16px;
  background: #EFF6FF;
  padding: 0 8px 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  white-space: nowrap;
}

.auto-pair-chip-card .pair-main {
  color: #2563EB;
  font-size: 14px;
  font-weight: 900;
}

.auto-pair-chip-card .pair-condition {
  color: #2563EB;
  font-size: 13px;
  font-weight: 900;
}

.auto-pair-chip-card .pair-range {
  color: #0068FF;
  font-size: 13px;
  font-weight: 900;
}

.auto-pair-chip-card .pair-dot {
  color: #2563EB;
  font-weight: 900;
}

.pair-remove {
  margin-left: auto;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #D1D5DB;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.auto-gear-btn {
  width: 49px;
  height: 49px;
  border-radius: 14px;
  border: 1px solid #2563EB;
  color: #2563EB;
  font-size: 25px;
}

.auto-dialog-footer {
  min-height: 64px;
  border-top: 1px solid #EEF2F7;
  padding: 10px 8px 14px;
}

.pair-advanced-modal {
  width: min(386px, calc(100vw - 48px));
  border-radius: 18px;
  padding: 20px 18px;
}

.pair-advanced-modal h2 {
  font-size: 26px;
  margin-bottom: 12px;
}

.pair-advanced-sub {
  margin: 0 0 14px;
  color: #6B7280;
  font-size: 15px;
  line-height: 1.35;
}

.field-label {
  display: block;
  margin: 14px 0 8px;
  color: #374151;
  font-size: 15px;
  font-weight: 900;
}

.pair-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.pair-time-input {
  text-align: left;
  margin-top: 0;
}

.pair-advanced-actions {
  display: grid;
  grid-template-columns: 1fr .92fr 1fr;
  gap: 9px;
  margin-top: 18px;
}

.pair-advanced-actions .primary-btn,
.pair-advanced-actions .ghost-btn,
.danger-outline-btn {
  height: 48px;
  margin-top: 0;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
}

.danger-outline-btn {
  border: 1px solid #FCA5A5;
  background: #FFF7F7;
  color: #DC2626;
}

.pair-advanced-actions .ghost-btn {
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
}

@media (max-width: 374px) {
  .auto-config-modal {
    width: calc(100vw - 30px);
    padding-left: 14px;
    padding-right: 14px;
  }

  .auto-dialog-header {
    grid-template-columns: 70px 1fr;
    gap: 8px;
  }

  .auto-dialog-header h2 {
    font-size: 28px;
  }

  .auto-outline-btn {
    font-size: 12px;
    padding: 0 6px;
  }

  .auto-pair-input-layout {
    grid-template-columns: 1fr 56px;
    gap: 9px;
  }

  .auto-paste-btn {
    min-height: 106px;
  }

  .auto-pair-chip-row {
    grid-template-columns: 1fr 46px;
    gap: 8px;
  }

  .auto-pair-chip-card .pair-condition,
  .auto-pair-chip-card .pair-range {
    font-size: 12px;
  }
}
/* Fix hiển thị đầy đủ cặp từ khóa + điều kiện + khung giờ */
.auto-pair-chip-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 49px;
  align-items: stretch;
  gap: 10px;
}

.auto-pair-chip-card {
  min-width: 0;
  min-height: 58px;
  height: auto !important;
  padding: 9px 8px 9px 12px;
  align-items: center;
  gap: 8px;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.pair-chip-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
}

.pair-line-main {
  color: #2563EB;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pair-line-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: #2563EB;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pair-line-extra .pair-condition {
  color: #2563EB;
}

.pair-line-extra .pair-range {
  color: #0068FF;
}

.pair-line-extra .pair-dot {
  color: #2563EB;
}

.pair-remove {
  flex: 0 0 auto;
  margin-left: 4px;
}

@media (max-width: 374px) {
  .auto-pair-chip-row {
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
  }

  .pair-line-main {
    font-size: 14px;
  }

  .pair-line-extra {
    font-size: 12.5px;
  }
}
/* Menu bánh răng Lọc thông báo / Ẩn thông báo */
.keyword-action-modal {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.keyword-action-modal h2,
.keyword-edit-modal h2,
.keyword-samples-modal h2 {
  margin: 0 0 18px;
  color: #111827;
  font-size: 24px;
  font-weight: 900;
}

.keyword-action-item {
  width: 100%;
  min-height: 54px;
  padding: 0;
  background: #FFFFFF;
  color: #374151;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  border-radius: 0;
}

.keyword-action-item + .keyword-action-item {
  border-top: 1px solid #EEF2F7;
}

.keyword-edit-textarea {
  height: 120px;
  min-height: 120px;
  padding-top: 14px;
  line-height: 1.45;
  resize: vertical;
}

.keyword-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.keyword-edit-actions .primary-btn,
.keyword-edit-actions .ghost-btn {
  height: 48px;
  margin-top: 0;
  border-radius: 14px;
}

.keyword-sample-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(420px, 56dvh);
  overflow: auto;
}

.keyword-sample-row {
  padding: 12px;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  background: #FFFFFF;
}

.keyword-sample-text {
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  word-break: break-word;
}

.keyword-sample-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.keyword-sample-actions button {
  height: 38px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
  background: #EFF6FF;
  color: #2563EB;
}

.keyword-sample-actions button:last-child {
  background: #FEF2F2;
  color: #DC2626;
}
/* ===== Settings page polished v6 - giống app native hơn ===== */

.settings-page-v2 {
  padding: 24px 22px 130px;
  background:
    radial-gradient(circle at top left, rgba(0, 104, 255, .08), transparent 34%),
    #F7FBF8;
}

.settings-header-v2 {
  margin-bottom: 22px;
  padding: 0 2px;
}

.settings-header-v2 h1 {
  color: #111827;
  font-size: 36px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.8px;
}

.settings-theme-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.sun-icon {
  width: auto !important;
  height: auto !important;
  font-size: 26px !important;
}

/* Card tổng */
.settings-page-v2 .setting-card {
  border: 1px solid #E8EDF2;
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
  padding: 20px;
}

/* Card lọc / ẩn */
.keyword-card-v2 {
  padding: 19px 18px 20px !important;
}

.keyword-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.keyword-title-left {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.keyword-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 27px;
  font-weight: 900;
}

.keyword-icon-filter {
  background: #EAFBEF;
  color: #6D28D9;
}

.keyword-icon-hide {
  background: #FEECEF;
  color: #DC2626;
}

.keyword-title-text {
  min-width: 0;
}

.keyword-title-text h2 {
  margin: 0;
  color: #111827;
  font-size: 23px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -.2px;
}

.keyword-title-text p {
  margin: 5px 0 0;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
}

.keyword-actions-v2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.keyword-actions-v2 .circle-add,
.keyword-actions-v2 .circle-gear {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

.keyword-actions-v2 .circle-add {
  background: linear-gradient(145deg, #0A7CFF, #0057D9);
  color: #FFFFFF;
  font-size: 32px;
  font-weight: 900;
}

.keyword-actions-v2 .circle-gear {
  background: #F1EAFF;
  color: #111827;
  font-size: 24px;
}

/* Chip từ khóa giống hình mẫu */
.keyword-chips-v2 {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 12px;
}

.keyword-chip-v2 {
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #BFD8FF;
  background: #F4F8FF;
  color: #1D4ED8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.keyword-chip-v2 button {
  color: #1D4ED8;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  padding: 0;
}

/* Card cài đặt thông báo */
.settings-notify-card {
  padding: 22px 20px 10px !important;
}

.settings-card-title-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.settings-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 25px;
}

.bell-soft {
  background: #F1EAFF;
  color: #6D28D9;
}

.settings-card-title-row h2 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 950;
}

.settings-check-list {
  display: flex;
  flex-direction: column;
}

.settings-check-row {
  min-height: 56px;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0;
  border-bottom: 1px solid #EEF2F7;
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 600;
}

.settings-check-row:last-child {
  border-bottom: 0;
}

.settings-check-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #6D28D9;
}

.settings-check-row span {
  min-width: 0;
  line-height: 1.3;
}

.settings-info-dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1.6px solid #6B7280;
  color: #6B7280;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

/* Làm các card phía dưới nhẹ hơn */
.settings-page-v2 .setting-card:not(.keyword-card-v2):not(.settings-notify-card) h2 {
  color: #111827;
  font-size: 22px;
  font-weight: 950;
}

.settings-page-v2 .setting-card:not(.keyword-card-v2):not(.settings-notify-card) p {
  color: #6B7280;
  font-size: 14px;
}

/* Mobile nhỏ */
@media (max-width: 374px) {
  .settings-page-v2 {
    padding-left: 18px;
    padding-right: 18px;
  }

  .settings-header-v2 h1 {
    font-size: 33px;
  }

  .keyword-card-head {
    gap: 10px;
  }

  .keyword-title-left {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }

  .keyword-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }

  .keyword-title-text h2 {
    font-size: 21px;
  }

  .keyword-actions-v2 {
    gap: 8px;
  }

  .keyword-actions-v2 .circle-add,
  .keyword-actions-v2 .circle-gear {
    width: 48px;
    height: 48px;
  }

  .keyword-chips-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-check-row {
    font-size: 16px !important;
  }
}
/* ===== Menu tùy chọn cặp từ khóa giống app ===== */
.pair-option-modal {
  width: min(360px, calc(100vw - 52px));
  border-radius: 4px;
  padding: 22px 0 10px;
  background: #FFFFFF;
}

.pair-option-modal h2 {
  margin: 0 0 14px;
  padding: 0 24px;
  color: #111827;
  font-size: 22px;
  font-weight: 800;
}

.pair-option-item {
  width: 100%;
  min-height: 58px;
  padding: 0 24px;
  background: #FFFFFF;
  color: #374151;
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  border-radius: 0;
}

.pair-option-item:active {
  background: #F3F4F6;
}

.pair-option-close {
  width: calc(100% - 48px);
  height: 44px;
  margin: 8px 24px 0;
  border-radius: 12px;
  background: #F3F4F6;
  color: #374151;
  font-size: 15px;
  font-weight: 900;
}

.pair-edit-modal {
  width: min(386px, calc(100vw - 48px));
  border-radius: 18px;
  padding: 20px 18px;
}

.pair-edit-modal h2 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 26px;
  font-weight: 900;
}

.pair-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.pair-edit-actions .primary-btn,
.pair-edit-actions .ghost-btn {
  height: 48px;
  margin-top: 0;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
}
/* ===== Xem mẫu Auto giống app hơn ===== */
.saved-samples-modal {
  width: min(390px, calc(100vw - 42px));
  max-height: min(620px, calc(100dvh - 120px));
  overflow: hidden;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .25);
  padding: 18px;
}

.saved-samples-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.saved-samples-head h2 {
  margin: 0;
  color: #111827;
  font-size: 25px;
  font-weight: 950;
}

.saved-samples-head button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #F3F4F6;
  color: #374151;
  font-size: 24px;
  line-height: 1;
}

.sample-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 14px;
}

.sample-tabs button {
  height: 42px;
  border-radius: 14px;
  background: #EFF6FF;
  color: #2563EB;
  font-size: 14px;
  font-weight: 900;
}

.sample-tabs button.active {
  background: #2563EB;
  color: #FFFFFF;
}

.sample-tabs button.danger {
  background: #FFF1F2;
  color: #DC2626;
}

.sample-tabs button.danger.active {
  background: #DC2626;
  color: #FFFFFF;
}

.sample-list {
  max-height: min(460px, 54dvh);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
}

.saved-sample-row {
  border: 1px solid #DBEAFE;
  background: #F8FBFF;
  border-radius: 16px;
  padding: 12px;
}

.saved-sample-row.danger {
  border-color: #FECACA;
  background: #FFF7F7;
}

.saved-sample-text strong {
  display: block;
  color: #2563EB;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.3;
}

.saved-sample-row.danger .saved-sample-text strong {
  color: #DC2626;
}

.saved-sample-text p {
  margin: 5px 0 0;
  color: #0068FF;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.saved-sample-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.saved-sample-actions button {
  height: 38px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 950;
  background: #EAF2FF;
  color: #2563EB;
}

.saved-sample-actions button:last-child {
  background: #FEE2E2;
  color: #DC2626;
}

.sample-empty {
  padding: 18px 12px;
  border: 1px dashed #CBD5E1;
  border-radius: 16px;
  color: #6B7280;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  background: #F8FAFC;
}
/* Fix cặp từ khóa dài: xuống dòng, không tràn ngang */
.auto-pair-chip-list {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.auto-pair-chip-row {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 49px;
  align-items: start;
  gap: 10px;
  overflow: hidden;
}

.auto-pair-chip-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 58px;
  padding: 10px 8px 10px 12px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;

  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: unset !important;
}

.pair-chip-content {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  display: block;
  overflow: hidden;
}

.pair-line-main {
  display: block;
  width: 100%;
  max-width: 100%;
  color: #2563EB;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.32;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  word-wrap: break-word !important;
}

.pair-line-main .pair-arrow {
  display: inline-block;
  padding: 0 3px;
}

.pair-line-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  width: 100%;
  max-width: 100%;

  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.pair-line-extra .pair-condition {
  color: #2563EB;
}

.pair-line-extra .pair-range {
  color: #0068FF;
}

.pair-line-extra .pair-dot {
  color: #2563EB;
}

.pair-remove {
  width: 26px;
  height: 26px;
  margin: 0;
  justify-self: end;
  align-self: center;
  flex: 0 0 auto;
}

.auto-gear-btn {
  width: 49px;
  height: 49px;
  min-width: 49px;
  align-self: start;
}

@media (max-width: 374px) {
  .auto-pair-chip-row {
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
  }

  .auto-pair-chip-card {
    grid-template-columns: minmax(0, 1fr) 28px;
    padding: 9px 7px 9px 10px;
  }

  .pair-line-main {
    font-size: 14px;
    line-height: 1.3;
  }

  .pair-line-extra {
    font-size: 12.5px;
  }

  .auto-gear-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
  }
}
/* PWA iPhone: dùng trọn màn hình và chừa đúng vùng tai thỏ/Home Indicator. */
html.standalone-mode,
html.standalone-mode body {
  width: 100%;
  min-height: 100%;
  overscroll-behavior-y: none;
}
html.standalone-mode body {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
html.standalone-mode .login-screen {
  min-height: 100dvh;
  padding-top: max(80px, calc(44px + env(safe-area-inset-top)));
}
html.standalone-mode .app-shell {
  min-height: 100dvh;
}

/* ===== Auto Server 2 parity 2026-07-20 ===== */
.auto-pair-full-pane {
  display: grid;
  gap: 12px;
}

.auto-pair-input-layout-full {
  align-items: stretch;
}

.auto-rule-field {
  display: grid;
  gap: 7px;
}

.auto-rule-field > span {
  font-size: 13px;
  font-weight: 800;
  color: var(--text, #202124);
}

.auto-rule-block-field > span,
.pair-block {
  color: #b3261e;
}

.auto-pair-create-time {
  margin: 0;
}

.pair-line-extra {
  flex-wrap: wrap;
  row-gap: 4px;
}

.pair-edit-full-modal {
  width: min(94vw, 520px);
  max-height: min(88vh, 760px);
  overflow-y: auto;
}

.pair-edit-textarea {
  min-height: 68px;
  resize: vertical;
}

.saved-sample-note {
  margin: 0 18px 12px;
  color: var(--muted, #667085);
  font-size: 13px;
  line-height: 1.45;
}

.auto-test-result {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  line-height: 1.45;
}

.auto-test-result.hidden {
  display: none;
}

.auto-test-result p {
  margin: 6px 0 0;
}

.auto-test-result ol {
  margin: 10px 0 0 20px;
  padding: 0;
}

.auto-test-result.ok {
  background: #EAF3FF;
  border-color: #93C5FD;
  color: #1D4ED8;
}

.auto-test-result.warning {
  background: #fff6df;
  border-color: #e7b84d;
  color: #7a4c00;
}

.auto-test-result.fail {
  background: #fdecea;
  border-color: #e49a94;
  color: #9f241d;
}

.multi-ride-backdrop {
  z-index: 1500;
}

.multi-ride-modal {
  width: min(94vw, 620px);
  max-height: min(90vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  color: var(--text, #202124);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.multi-ride-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}

.multi-ride-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.multi-ride-head h2 {
  margin: 0;
  font-size: 20px;
}

.multi-ride-head button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  font-size: 24px;
}

.multi-ride-modal > p {
  margin: 0;
  padding: 0 18px 12px;
  color: var(--muted, #667085);
  line-height: 1.45;
}

.multi-ride-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 18px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(103, 80, 164, .08);
  font-size: 13px;
}

.multi-ride-list {
  overflow-y: auto;
  padding: 0 14px;
  display: grid;
  gap: 10px;
}

.multi-ride-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 14px;
}

.multi-ride-item.matched {
  border-color: #93C5FD;
  background: #F1F6FF;
}

.multi-ride-item.other {
  opacity: .75;
}

.multi-ride-index {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(103, 80, 164, .12);
  font-weight: 800;
}

.multi-ride-content p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.multi-ride-content small {
  display: block;
  margin-top: 5px;
  color: var(--muted, #667085);
}

.multi-ride-item button,
.multi-ride-close {
  border: 0;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.multi-ride-item button {
  padding: 10px 13px;
  background: #0068FF;
  color: #fff;
}

.multi-ride-close {
  margin: 14px 18px 18px;
  min-height: 44px;
  background: rgba(0, 0, 0, .07);
  color: inherit;
}

body.dark .multi-ride-item.matched {
  background: rgba(0, 104, 255, .18);
}

@media (max-width: 520px) {
  .auto-pair-input-layout-full {
    grid-template-columns: minmax(0, 1fr) 66px;
  }

  .multi-ride-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .multi-ride-item button {
    grid-column: 2;
    width: 100%;
  }

  .multi-ride-meta {
    flex-direction: column;
  }
}

.auto-pill {
  gap: 5px;
}

.auto-pill small {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

/* ===== Manual receive + Native tap reply quota fix 20260720 ===== */
.accept-btn.disabled,
.accept-btn:disabled {
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid #FCA5A5;
  cursor: not-allowed;
  opacity: 1;
}

.tap-reply {
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  background: #F1F5F9;
  min-width: 74px;
}
.tap-reply.on {
  color: #0068FF;
  border-color: #93C5FD;
  background: #E8F2FF;
}
.tap-reply.off {
  color: #6B7280;
  border-color: #E5E7EB;
  background: #F1F5F9;
}
.tap-reply.limit-ended,
.tap-reply:disabled {
  color: #DC2626;
  border-color: #FCA5A5;
  background: #FEE2E2;
  cursor: not-allowed;
  opacity: 1;
}

.bubble.native-replyable {
  cursor: pointer;
  outline: 2px solid rgba(0, 104, 255, .18);
  outline-offset: 1px;
  touch-action: manipulation;
}
.bubble.native-replyable:active {
  transform: scale(.985);
}
.bubble.native-reply-pending {
  opacity: .65;
  pointer-events: none;
}

/* ===== 2026-07-20: Điều hướng đúng reply + thông báo admin + Dark Mode ===== */
.native-scroll-target {
  animation: nativeReplyFocusPulse 1.8s ease-out;
  outline: 3px solid rgba(0, 104, 255, .55);
  outline-offset: 3px;
}

@keyframes nativeReplyFocusPulse {
  0% {
    transform: scale(.985);
    box-shadow: 0 0 0 0 rgba(0, 104, 255, .52);
  }
  45% {
    transform: scale(1);
    box-shadow: 0 0 0 12px rgba(0, 104, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  }
}

.admin-notification-modal {
  width: 100%;
}

.admin-notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-notification-head h2 {
  margin: 0;
}

.admin-notification-head button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #F3F4F6;
  color: #374151;
  font-size: 25px;
  line-height: 1;
}

.admin-notification-list {
  max-height: min(56dvh, 520px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
}

.admin-notification-item {
  padding: 14px;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  background: #FFFFFF;
}

.admin-notification-item.unread {
  border-color: #C7D2FE;
  background: #EEF2FF;
}

.admin-notification-item h3 {
  margin: 0;
  color: #111827;
  font-size: 16px;
  line-height: 1.35;
}

.admin-notification-item p {
  margin: 8px 0 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-notification-item time {
  display: block;
  margin-top: 8px;
  color: #6B7280;
  font-size: 12px;
  font-weight: 700;
}

.admin-notification-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 14px;
}

.admin-notification-actions .primary-btn,
.admin-notification-actions .ghost-btn {
  width: auto;
  height: 48px;
  margin: 0;
}

/* Dark Mode thật cho toàn bộ Web/PWA. */
html.dark,
body.dark {
  color-scheme: dark;
  background: #020617;
}

body.dark {
  --gd-green-soft: #0B1220;
  --gd-text-dark: #F8FAFC;
  --gd-text-gray: #94A3B8;
  --gd-line: #334155;
  --gd-card: #111827;
  color: #F8FAFC;
}

body.dark .app-shell,
body.dark .login-screen,
body.dark .page,
body.dark .rides-page,
body.dark .messages-page,
body.dark .chat-page,
body.dark .settings-page,
body.dark .settings-page-v2,
body.dark .account-page {
  background: #0F172A;
  color: #F8FAFC;
}

body.dark .top-header,
body.dark .messages-tabs,
body.dark .native-chat-header,
body.dark .native-chat-input,
body.dark .bottom-nav {
  background: #111827;
  border-color: #334155;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .38);
}

body.dark .ride-filter-chip,
body.dark .auto-pill,
body.dark .sound-btn,
body.dark .tap-reply.off {
  background: #1F2937;
  border-color: #475569;
  color: #E2E8F0;
}

body.dark .filter-label,
body.dark .filter-caret,
body.dark .auto-pill span,
body.dark .sound-btn,
body.dark .messages-tab,
body.dark .back-chat,
body.dark .native-chat-title,
body.dark .nav-item,
body.dark .empty-message-text {
  color: #E2E8F0;
}

body.dark .messages-tab.active,
body.dark .nav-item.active,
body.dark .bubble-sender {
  color: #60A5FA;
}
body.dark .nav-item .nav-label {
  color: #E2E8F0;
}
body.dark .nav-item.active .nav-label {
  color: #60A5FA;
}

body.dark .android-card,
body.dark .ride-card,
body.dark .native-group-row,
body.dark .setting-card,
body.dark .settings-page-v2 .setting-card,
body.dark .account-header-user,
body.dark .account-plan-card,
body.dark .account-zalo-card,
body.dark .account-settings-list button,
body.dark .saved-samples-modal,
body.dark .pair-option-modal,
body.dark .pair-edit-modal,
body.dark .modal {
  background: #111827;
  border-color: #334155;
  color: #F8FAFC;
}

body.dark .ride-message,
body.dark .ride-meta-row,
body.dark .native-group-text div,
body.dark .account-header-user h1,
body.dark .account-plan-card b,
body.dark .account-zalo-card b,
body.dark .settings-header-v2 h1,
body.dark .keyword-title-text h2,
body.dark .settings-page-v2 .setting-card h2,
body.dark .pair-option-modal h2,
body.dark .pair-edit-modal h2,
body.dark .saved-samples-head h2,
body.dark .modal h2,
body.dark .modal h3 {
  color: #F8FAFC !important;
}

body.dark .ride-meta-row span,
body.dark .native-group-text p,
body.dark .account-header-user p,
body.dark .account-plan-card span,
body.dark .zalo-status,
body.dark .zalo-group-count,
body.dark .settings-page-v2 .setting-card p,
body.dark .keyword-title-text p,
body.dark .setting-desc,
body.dark .bubble-time {
  color: #94A3B8 !important;
}

body.dark .native-chat-list {
  background: #0B1220;
}

body.dark .bubble {
  background: #1F2937;
  color: #F8FAFC;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

body.dark .bubble.me {
  background: #1E3A5F;
  color: #EFF6FF;
}

body.dark .bubble-quote,
body.dark .bubble.me .bubble-quote {
  background: rgba(15, 23, 42, .62);
}

body.dark .bubble-quote-text strong {
  color: #E2E8F0;
}

body.dark .bubble-quote-text p {
  color: #94A3B8;
}

body.dark input,
body.dark textarea,
body.dark select,
body.dark .field,
body.dark .native-chat-input input {
  background: #0F172A;
  border-color: #475569;
  color: #F8FAFC;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
  color: #64748B;
}

body.dark .skip-btn,
body.dark .ghost-btn,
body.dark .pair-option-close,
body.dark .saved-samples-head button,
body.dark .admin-notification-head button {
  background: #1F2937;
  color: #E2E8F0;
  border-color: #475569;
}

body.dark .settings-check-row {
  border-color: #334155;
  color: #F8FAFC !important;
}

body.dark .keyword-chip-v2,
body.dark .chip,
body.dark .saved-sample-row,
body.dark .keyword-sample-row {
  background: #172033;
  border-color: #334155;
  color: #E2E8F0;
}

body.dark .admin-notification-item {
  background: #111827;
  border-color: #334155;
}

body.dark .admin-notification-item.unread {
  background: #172033;
  border-color: #6366F1;
}

body.dark .admin-notification-item h3 {
  color: #F8FAFC;
}

body.dark .admin-notification-item p {
  color: #CBD5E1;
}

body.dark .admin-notification-item time {
  color: #94A3B8;
}

body.dark .modal-backdrop {
  background: rgba(2, 6, 23, .78);
}

body.dark .toast {
  background: #E2E8F0;
  color: #0F172A;
}

/* ===== Khung cố định thống nhất 4 tab — bản làm sạch =====
 * Canh Cuốc/Tin nhắn chỉ khóa phần nội dung giữa.
 * Bottom nav dùng chính xác cùng cơ chế fixed như Cài đặt/Tài khoản.
 * Không dùng visualViewport, không đưa bottom nav vào Grid/Flex flow.
 */
:root {
  --gd-bottom-nav-height: 80px;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

/* iOS PWA: không thay đổi body/#app khi chuyển tab.
 * Canh Cuốc/Nhóm chỉ khóa phần nội dung bằng viewport-shell để bottom-nav
 * luôn dùng cùng một hệ tọa độ với Cài đặt/Tài khoản. */

/* Khung của Canh Cuốc/Nhóm phủ đúng viewport thật.
 * Bottom nav đã được tách ra ngoài app-shell nên khung này chỉ cần chừa đúng
 * chiều cao menu chung; không còn bù safe-area-top theo từng trang.
 */
.app-shell.viewport-shell {
  position: fixed;
  inset: 0;
  width: min(430px, 100%);
  max-width: 430px;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0 0 calc(
    var(--gd-bottom-nav-height)
    + env(safe-area-inset-bottom, 0px)
  );
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--gd-green-soft);
  box-shadow: none;
}

/* Bottom nav là sibling trực tiếp của app-shell và dùng cùng một tọa độ vật lý
 * cho cả 4 tab. Không còn selector riêng cho Canh Cuốc/Nhóm. */
#app > .bottom-nav {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translateX(-50%);
  width: min(430px, 100%);
  max-width: 430px;
  height: calc(var(--gd-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  min-height: calc(var(--gd-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 9px 0 env(safe-area-inset-bottom, 0px);
  background: #fff;
  z-index: 40;
}

/* ===== Canh Cuốc ===== */
.app-shell.page-mode-rides > .top-header {
  position: relative;
  top: auto;
  width: 100%;
  flex: 0 0 auto;
}

.app-shell.page-mode-rides > .rides-page {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
  background: var(--gd-green-soft);
}

.app-shell.page-mode-rides .ride-list {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 21px 22px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.app-shell.page-mode-rides .ride-list:has(.empty-ride-modern) {
  padding-top: 0;
  padding-bottom: 0;
}

.app-shell.page-mode-rides .empty-ride-modern {
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ===== Danh sách Tin nhắn ===== */
.app-shell.page-mode-messages > .messages-page {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--gd-green-soft);
}

.app-shell.page-mode-messages .messages-tabs {
  position: relative;
  top: auto;
  z-index: 20;
  width: 100%;
  height: calc(58px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 8px 0;
}

.app-shell.page-mode-messages .message-list-container {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.app-shell.page-mode-messages .empty-message-text {
  min-height: 100%;
  margin: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  text-align: center;
}

/* ===== Native hội thoại ===== */
.app-shell.page-mode-native-chat > .chat-page {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--gd-green-soft);
}

.app-shell.page-mode-native-chat .native-chat-header {
  position: relative;
  top: auto;
  width: 100%;
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 14px 0;
}

.app-shell.page-mode-native-chat .native-chat-list {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.app-shell.page-mode-native-chat .native-chat-input {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  height: 64px;
  flex: 0 0 auto;
}

body.dark #app > .bottom-nav {
  background: #111827;
}

@media (max-height: 700px) {
  .app-shell.page-mode-rides .ride-list {
    padding-top: 12px;
    padding-bottom: 14px;
  }

  .app-shell.page-mode-rides .empty-ride-modern {
    padding-top: 8px;
    padding-bottom: 12px;
  }

  .app-shell.page-mode-rides .empty-car {
    width: 76px;
    height: 76px;
    font-size: 50px;
  }

  .app-shell.page-mode-rides .empty-ride-modern h2 {
    margin-top: 18px;
  }
}

@supports not selector(:has(*)) {
  .app-shell.page-mode-rides .ride-list {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}



/* ===== Safe area đáy thống nhất 4 tab =====
 * Bottom nav chung đã phủ trực tiếp vùng Home Indicator bằng chính
 * env(safe-area-inset-bottom), nên không cần pseudo-element kéo dài riêng
 * cho Canh Cuốc/Nhóm nữa.
 */
html.standalone-mode:has(.app-shell.page-mode-rides),
html.standalone-mode:has(.app-shell.page-mode-messages),
html.standalone-mode body:has(.app-shell.page-mode-rides),
html.standalone-mode body:has(.app-shell.page-mode-messages) {
  background: #fff !important;
}


/* ===== Auto nhận: sắp xếp giống bố cục app Android 2026-07-21 ===== */
.auto-config-modal.auto-config-native-order {
  width: min(430px, calc(100vw - 28px));
  height: min(760px, calc(100dvh - 88px));
  min-height: min(540px, calc(100dvh - 88px));
  border-radius: 8px;
  padding: 22px 18px 0;
}

.auto-dialog-title-only {
  display: block;
  padding: 0 2px 16px;
}

.auto-dialog-title-only h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 900;
}

.auto-config-native-order .auto-main-tabs {
  gap: 10px;
  padding-bottom: 12px;
}

.auto-config-native-order .auto-main-tab {
  height: 52px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.15;
  padding: 0 8px;
}

.auto-utility-row {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  flex: 0 0 auto;
}

.auto-utility-row.pair-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auto-utility-row.ride-mode {
  grid-template-columns: 1fr 1fr;
}

.auto-utility-row .auto-outline-btn {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  padding: 0 8px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auto-paste-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.auto-config-native-order .auto-scroll-area {
  padding: 0 1px 12px;
}

.auto-pair-native-layout {
  display: grid;
  gap: 9px;
}

.auto-pair-input-stack-native {
  display: grid;
  gap: 9px;
}

.auto-pair-primary-input {
  min-height: 54px;
  margin: 0;
  border-radius: 15px;
  padding: 0 13px;
  font-size: 15px;
}

.auto-pair-time-native {
  margin: 0;
  gap: 10px;
}

.auto-pair-time-native .auto-input {
  min-height: 54px;
  margin: 0;
  border-radius: 15px;
  padding: 0 13px;
  font-size: 15px;
}

.auto-pair-block-native {
  margin: 0;
}

.auto-pair-native-layout h4 {
  margin: 12px 0 2px;
  font-size: 16px;
}

.auto-dialog-footer-native {
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 9px 4px 14px;
}

.auto-footer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}

.auto-dialog-footer-native .auto-footer-btn {
  white-space: nowrap;
}

.auto-dialog-footer-native .auto-footer-btn.groups {
  color: #6750A4;
  letter-spacing: .13em;
}

@media (max-width: 374px) {
  .auto-config-modal.auto-config-native-order {
    width: calc(100vw - 20px);
    height: min(740px, calc(100dvh - 72px));
    padding-left: 14px;
    padding-right: 14px;
  }

  .auto-dialog-title-only h2 {
    font-size: 27px;
  }

  .auto-utility-row {
    gap: 6px;
  }

  .auto-utility-row .auto-outline-btn {
    height: 40px;
    padding: 0 5px;
    font-size: 12.5px;
  }

  .auto-pair-primary-input,
  .auto-pair-time-native .auto-input {
    min-height: 50px;
    font-size: 14px;
  }

  .auto-dialog-footer-native {
    gap: 8px;
  }

  .auto-footer-right {
    gap: 15px;
  }

  .auto-dialog-footer-native .auto-footer-btn {
    font-size: 13px;
  }

  .auto-dialog-footer-native .auto-footer-btn.groups {
    letter-spacing: .09em;
  }
}

body.dark .auto-config-native-order,
body.dark .auto-config-native-order .auto-dialog-footer-native {
  background: #111827;
  color: #F9FAFB;
}

body.dark .auto-dialog-title-only h2,
body.dark .auto-pair-native-layout h4 {
  color: #F9FAFB;
}

body.dark .auto-utility-row .auto-outline-btn,
body.dark .auto-pair-primary-input,
body.dark .auto-pair-time-native .auto-input {
  background: #1F2937;
  color: #F9FAFB;
  border-color: #4B5563;
}

body.dark .auto-pair-primary-input::placeholder,
body.dark .auto-pair-time-native .auto-input::placeholder {
  color: #9CA3AF;
}


.auto-pair-native-layout .auto-pair-chip-card {
  border-color: #D1D5DB;
  background: #F8F9FF;
}

.auto-pair-native-layout .pair-line-main {
  color: #111827;
}

.auto-pair-native-layout .pair-line-extra,
.auto-pair-native-layout .pair-line-extra .pair-condition,
.auto-pair-native-layout .pair-line-extra .pair-range,
.auto-pair-native-layout .pair-line-extra .pair-block,
.auto-pair-native-layout .pair-line-extra .pair-dot {
  color: #111827;
}

.auto-pair-native-layout .auto-gear-btn {
  border-color: transparent;
  background: transparent;
  color: #2563EB;
}

body.dark .auto-pair-native-layout .auto-pair-chip-card {
  border-color: #4B5563;
  background: #1F2937;
}

body.dark .auto-pair-native-layout .pair-line-main,
body.dark .auto-pair-native-layout .pair-line-extra,
body.dark .auto-pair-native-layout .pair-line-extra .pair-condition,
body.dark .auto-pair-native-layout .pair-line-extra .pair-range,
body.dark .auto-pair-native-layout .pair-line-extra .pair-block,
body.dark .auto-pair-native-layout .pair-line-extra .pair-dot {
  color: #F3F4F6;
}


/* ===== 2026-08-08 Web parity with Android commercial ===== */
.auto-pill.preparing {
  color: #B45309;
  border-color: #FDE68A;
  background: #FFFBEB;
  font-size: 12px;
}
.auto-multi-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #F9FAFB;
  flex: 0 0 auto;
}
.auto-multi-toggle-row > div { min-width: 0; display: grid; gap: 3px; }
.auto-multi-toggle-row strong { font-size: 14px; color: #111827; }
.auto-multi-toggle-row span { font-size: 12px; line-height: 1.25; color: #6B7280; }
.auto-multi-toggle-row input { width: 20px; height: 20px; flex: 0 0 auto; }
.history-ranking { color: #0057D9 !important; font-weight: 800; }
.history-ranking-top3, .auto-ranking-top3 {
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #475569 !important;
  font-weight: 650 !important;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.auto-ranking-header { color: #0057D9 !important; font-weight: 800; }
body.dark .history-ranking-top3, body.dark .auto-ranking-top3 { color: #CBD5E1 !important; }
#sendChatText:disabled { opacity: .55; cursor: wait; }
body.dark .auto-pill.preparing { color: #FBBF24; border-color: #92400E; background: #451A03; }
body.dark .auto-multi-toggle-row { border-color: #334155; background: #1F2937; }
body.dark .auto-multi-toggle-row strong { color: #F9FAFB; }
body.dark .auto-multi-toggle-row span { color: #CBD5E1; }


/* UI clean 20260808: trạng thái kết nối luôn dùng màu xanh kể cả dark mode. */
body.dark .filter-label.connected,
body.dark .zalo-status.connected {
  color:#0068FF !important;
}


/* UI fix 20260808-2353: force linked Zalo status green in account card. */
.account-zalo-card .zalo-status.connected {
  color:#0068FF !important;
}
body.dark .account-zalo-card .zalo-status.connected {
  color:#0068FF !important;
}

/* ===== Final UI tweak 20260809 =====
 * Khi mất kết nối và Canh Cuốc đang rỗng, :has(.empty-ride-modern)
 * đặt padding-top về 0 khiến server-status sát mép trên và bị header che.
 * Chừa một khoảng nhỏ riêng cho trạng thái lỗi; không ảnh hưởng card cuốc.
 */
.app-shell.page-mode-rides .ride-list:has(.server-status) {
  padding-top: 14px;
}

.app-shell.page-mode-rides .server-status {
  margin: 0 0 12px;
}

/* ===== Bottom nav shared layout 2026-08-10 =====
 * Không còn breakpoint riêng iPhone 13/16 Pro Max. Cả 4 tab dùng cùng một
 * bottom-nav sibling nên chuyển tab không thay đổi tọa độ thanh menu.
 */

/* ===== Tìm kiếm nhóm - đồng bộ hành vi với app Android ===== */
.group-search-box {
  position: relative;
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 7px 14px 9px;
  background: #fff;
  border-bottom: 1px solid rgba(17, 24, 39, .06);
}

.group-search-icon {
  position: absolute;
  left: 29px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-54%);
  fill: none;
  stroke: #6B7280;
  stroke-width: 2.2;
  stroke-linecap: round;
  pointer-events: none;
  z-index: 2;
}

.group-search-input {
  width: 100%;
  height: 42px;
  border: 1px solid #E5E7EB;
  border-radius: 15px;
  outline: none;
  padding: 0 46px 0 44px;
  background: #F8FAFC;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

.group-search-input:focus {
  border-color: rgba(0, 104, 255, .55);
  box-shadow: 0 0 0 3px rgba(0, 104, 255, .10);
  background: #fff;
}

.group-search-input::placeholder {
  color: #9CA3AF;
  font-weight: 650;
  opacity: 1;
}

.group-search-clear {
  position: absolute;
  right: 23px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-53%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6B7280;
  font-size: 24px;
  line-height: 26px;
  font-weight: 500;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 0 2px;
}

.group-search-clear.show { display: flex; }
.group-search-empty { min-height: 220px !important; margin: 0 !important; }

.app-shell.page-mode-messages > .messages-page {
  grid-template-rows: auto auto minmax(0, 1fr);
}

body.dark .group-search-box {
  background: #111827;
  border-color: #334155;
}

body.dark .group-search-input {
  background: #1F2937;
  border-color: #334155;
  color: #F8FAFC;
}

body.dark .group-search-input:focus {
  background: #111827;
  border-color: rgba(96, 165, 250, .55);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .10);
}

body.dark .group-search-icon,
body.dark .group-search-clear {
  color: #94A3B8;
  stroke: #94A3B8;
}

/* ===== 20260810-0020: mẫu Auto dài xuống dòng, nút luôn nằm dưới ===== */
.saved-sample-row {
  display: block;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.saved-sample-text {
  min-width: 0;
  width: 100%;
}

.saved-sample-text strong {
  display: block;
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.saved-sample-text p {
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.saved-sample-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.saved-sample-actions button {
  width: 100%;
  min-width: 0;
}

/* ===== 20260810-0021: Saved Samples V2 - scroll dọc thật trên iOS, nút luôn dưới mẫu =====
 * Dùng class mới hoàn toàn để không bị các rule saved-sample-row cũ ghi đè.
 */
.saved-samples-modal {
  width: min(390px, calc(100vw - 42px));
  height: min(680px, calc(100dvh - 96px));
  max-height: calc(100dvh - 96px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.saved-samples-head,
.saved-sample-note {
  flex: 0 0 auto;
}

.saved-samples-scroll-v2 {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 2px 10px 0;
  scrollbar-gutter: stable;
}

.saved-sample-card-v2 {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  border: 1px solid #DBEAFE;
  background: #F8FBFF;
  border-radius: 16px;
  padding: 12px;
  overflow: visible;
}

.saved-sample-card-v2.danger {
  border-color: #FECACA;
  background: #FFF7F7;
}

.saved-sample-content-v2 {
  width: 100%;
  min-width: 0;
}

.saved-sample-content-v2 strong {
  display: block;
  width: 100%;
  min-width: 0;
  color: #2563EB;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.saved-sample-card-v2.danger .saved-sample-content-v2 strong {
  color: #DC2626;
}

.saved-sample-content-v2 p {
  width: 100%;
  min-width: 0;
  margin: 6px 0 0;
  color: #0068FF;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.saved-sample-actions-v2 {
  width: 100%;
  min-width: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.saved-sample-actions-v2 button {
  display: block !important;
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: #EAF2FF;
  color: #2563EB;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
  visibility: visible !important;
  opacity: 1 !important;
}

.saved-sample-actions-v2 button:last-child {
  background: #FEE2E2;
  color: #DC2626;
}

body.dark .saved-sample-card-v2 {
  background: #172033;
  border-color: #334155;
}

body.dark .saved-sample-content-v2 strong {
  color: #60A5FA;
}

body.dark .saved-sample-content-v2 p {
  color: #60A5FA;
}

body.dark .saved-sample-actions-v2 button {
  background: #1E3A5F;
  color: #93C5FD;
}

body.dark .saved-sample-actions-v2 button:last-child {
  background: #4C1D1D;
  color: #FCA5A5;
}



/* ===== 20260810-0022: nút xóa cặp màu đỏ rõ ràng ===== */
.pair-remove {
  background: #FEE2E2 !important;
  color: #DC2626 !important;
  border: 1px solid #FCA5A5 !important;
}

.pair-remove:active {
  background: #FECACA !important;
}

body.dark .pair-remove {
  background: #4C1D1D !important;
  color: #FCA5A5 !important;
  border-color: #7F1D1D !important;
}

/* ===== 20260810-0024: nút xóa cặp tròn, gọn và cân đối hơn ===== */
.pair-remove {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  flex: 0 0 26px !important;
  justify-self: end !important;
  align-self: center !important;
  overflow: hidden !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}


/* Phiên bản Zcar hiển thị cuối tab Tài khoản để kiểm tra PWA đã cập nhật. */
.account-app-version {
  margin: 14px 0 30px;
  text-align: center;
  color: #8a8f98;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* ===== v1.2.20: Thu hồi dưới bubble + đếm ngược 20 giây + icon Undo nét đơn ===== */
.server2-own-reply-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex: 0 0 auto;
}

.server2-own-reply-block .bubble.me {
  align-self: flex-end;
}

.server2-recall-actions {
  max-width: 78%;
  display: flex;
  justify-content: flex-end;
  padding-right: 1px;
}

.server2-recall-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  border: 1.2px solid #EF4444;
  border-radius: 10px;
  padding: 5px 10px;
  background: rgba(255,255,255,.82);
  color: #DC2626;
  box-shadow: 0 1px 2px rgba(220,38,38,.08);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.server2-recall-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  font-variant-emoji: text;
  margin-top: -1px;
}

.server2-recall-countdown {
  min-width: 22px;
  padding-left: 5px;
  border-left: 1px solid rgba(220,38,38,.22);
  color: #EF4444;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.server2-recall-button:active {
  transform: scale(.96);
  background: #FEF2F2;
}

body.dark .server2-recall-button {
  color: #F87171;
  border-color: #F87171;
  background: rgba(31,41,55,.88);
}

body.dark .server2-recall-countdown {
  color: #FCA5A5;
  border-left-color: rgba(248,113,113,.3);
}

.bubble.server2-recalled {
  opacity: .72;
  font-style: italic;
}

.bubble.server2-recalled .bubble-content {
  color: #6B7280;
}

body.dark .bubble.server2-recalled .bubble-content {
  color: #9CA3AF;
}


/* Zcar 1.2.16 - Auto nhận success: Xem ngay / Thu Hồi / Đóng */
.auto-success-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px !important;
  margin: 14px 0 2px !important;
}
.auto-success-actions > button {
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 900;
  white-space: nowrap;
}
.auto-success-actions .primary-btn {
  background: linear-gradient(90deg, #0068FF, #0057D9);
  color: #fff;
}
.auto-success-actions .ghost-btn {
  background: #E4EFFF;
  color: #263142;
}
.auto-success-recall-btn {
  background: #DC2626;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.auto-success-recall-btn:active {
  transform: scale(.97);
}
.auto-success-recall-btn:disabled {
  opacity: .62;
  cursor: default;
}
body.dark .auto-success-recall-btn {
  background: #DC2626;
  color: #fff;
}


body.dark .voice-transcript {
  background: #172033;
  border-color: #334155;
  color: #F8FAFC;
}
body.dark .voice-transcript-label,
body.dark .voice-transcript.pending {
  color: #94A3B8;
}

/* ===== 2026-08-28 Auto pair compact: create keyword set button ===== */
.auto-pair-compact-layout {
  gap: 10px;
}

.auto-pair-create-entry {
  width: 100%;
  min-height: 50px;
  border: 1.5px solid #2563EB;
  border-radius: 14px;
  background: #EFF6FF;
  color: #1D4ED8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.auto-pair-create-entry:active {
  transform: translateY(1px);
}

.auto-pair-create-entry-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.auto-pair-compact-layout h4 {
  margin-top: 6px;
}

.auto-pair-builder-modal {
  width: min(92vw, 430px);
  height: auto;
  max-height: calc(100dvh - 46px);
  padding: 20px 18px 16px;
  overflow: auto;
}

.auto-pair-builder-header {
  display: block;
  margin-bottom: 14px;
}

.auto-pair-builder-header h2 {
  margin-bottom: 4px;
}

.auto-pair-builder-header p {
  margin: 0;
  color: #6B7280;
  font-size: 13px;
  line-height: 1.4;
}

.auto-pair-builder-body {
  display: grid;
  gap: 10px;
}

.auto-pair-builder-paste {
  width: 100%;
  min-height: 40px;
  margin: 0 0 2px;
  border-radius: 12px;
}

.auto-pair-builder-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
  padding-top: 16px;
}

.auto-pair-builder-submit {
  color: #2563EB;
}

body.dark .auto-pair-create-entry {
  border-color: #60A5FA;
  background: #172554;
  color: #BFDBFE;
}

body.dark .auto-pair-create-entry-icon {
  background: #3B82F6;
}

body.dark .auto-pair-builder-header p {
  color: #9CA3AF;
}

@media (max-width: 374px) {
  .auto-pair-create-entry {
    min-height: 46px;
    font-size: 14px;
  }

  .auto-pair-builder-modal {
    width: calc(100vw - 20px);
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* v1.2.28 auto pair title + accordion */
.auto-pair-title-row {
  align-items: stretch;
  gap: 10px;
}
.auto-pair-accordion-card {
  flex: 1;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 2px solid #cfd5df;
  background: #f7f8fc;
  box-shadow: none;
}
.auto-pair-accordion-card summary {
  list-style: none;
}
.auto-pair-accordion-card summary::-webkit-details-marker {
  display: none;
}
.auto-pair-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 18px;
  cursor: pointer;
}
.auto-pair-summary-content {
  min-width: 0;
}
.auto-pair-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #10182f;
  line-height: 1.3;
  word-break: break-word;
}
.auto-pair-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #2f6df6;
  font-size: 24px;
  font-weight: 700;
  transition: transform .18s ease;
}
.auto-pair-accordion-card[open] .auto-pair-chevron {
  transform: rotate(180deg);
}
.auto-pair-details-panel {
  padding: 0 18px 18px;
  border-top: 1px solid #e3e7ef;
}
.auto-pair-detail-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed #e6eaf1;
}
.auto-pair-detail-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.auto-pair-detail-label {
  flex: 0 0 95px;
  font-size: 14px;
  font-weight: 800;
  color: #586277;
}
.auto-pair-detail-value {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: #10182f;
  line-height: 1.45;
  word-break: break-word;
}
.auto-pair-detail-route .auto-pair-detail-value {
  color: #2f6df6;
}
.auto-pair-row-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.auto-pair-row-actions .pair-remove,
.auto-pair-row-actions .auto-gear-btn {
  flex: 0 0 auto;
}
@media (max-width: 430px) {
  .auto-pair-summary {
    padding: 18px 16px;
  }
  .auto-pair-card-title {
    font-size: 17px;
  }
  .auto-pair-detail-row {
    flex-direction: column;
    gap: 4px;
  }
  .auto-pair-detail-label,
  .auto-pair-detail-value {
    flex: unset;
    text-align: left;
  }
}
body.dark .auto-pair-accordion-card {
  background: #172031;
  border-color: #33405a;
}
body.dark .auto-pair-card-title,
body.dark .auto-pair-detail-value {
  color: #eef3ff;
}
body.dark .auto-pair-detail-label {
  color: #aeb9cf;
}
body.dark .auto-pair-details-panel {
  border-top-color: #33405a;
}
body.dark .auto-pair-detail-row {
  border-bottom-color: #33405a;
}

/* ===== Zcar 1.2.29 - Auto dialog redesign theo mẫu tham chiếu ===== */
.auto-backdrop {
  background: rgba(38, 47, 61, .68) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}

.auto-config-modal.auto-config-native-order {
  width: min(430px, calc(100vw - 24px)) !important;
  height: min(760px, calc(100dvh - 34px)) !important;
  min-height: min(590px, calc(100dvh - 34px)) !important;
  max-height: calc(100dvh - 34px) !important;
  padding: 24px 22px 18px !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .28) !important;
  border: 1px solid rgba(226,232,240,.92);
}

.auto-dialog-title-only {
  padding: 0 2px 18px !important;
}
.auto-dialog-title-only h2 {
  font-size: 30px !important;
  line-height: 1.08 !important;
  letter-spacing: -.7px;
  color: #0F172A !important;
}

.auto-config-native-order .auto-main-tabs {
  gap: 10px !important;
  padding: 0 0 14px !important;
}
.auto-config-native-order .auto-main-tab {
  height: 52px !important;
  border-radius: 15px !important;
  border: 1px solid #D6DCE7 !important;
  background: #FFFFFF !important;
  color: #374151 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.auto-config-native-order .auto-main-tab.active {
  color: #fff !important;
  border-color: #2563EB !important;
  background: linear-gradient(135deg, #2F6FF6 0%, #1F5EEB 100%) !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.20);
}

.auto-utility-row {
  gap: 8px !important;
  padding-bottom: 14px !important;
}
.auto-utility-row.pair-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.auto-utility-row .auto-outline-btn {
  height: 44px !important;
  border: 1.5px solid #2F6FF6 !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #2563EB !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.02);
}
.auto-utility-row .auto-outline-btn svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}
.auto-utility-row .auto-outline-btn:active {
  transform: translateY(1px);
  background: #F8FAFF !important;
}

.auto-multi-toggle-row {
  min-height: 76px !important;
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  gap: 12px !important;
  border-radius: 16px !important;
  border: 1px solid #E4E8EF !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.07) !important;
}
.auto-warning-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #FFF7E8;
  color: #F59E0B;
  font-size: 28px;
  line-height: 1;
}
.auto-multi-toggle-row > div {
  gap: 4px !important;
}
.auto-multi-toggle-row strong {
  color: #0F172A !important;
  font-size: 14px !important;
  line-height: 1.25;
  font-weight: 850 !important;
}
.auto-multi-toggle-row span:not(.auto-warning-icon) {
  color: #6B7280 !important;
  font-size: 12.5px !important;
  line-height: 1.38 !important;
}
.auto-multi-toggle-row input {
  -webkit-appearance: none;
  appearance: none;
  width: 50px !important;
  height: 28px !important;
  flex: 0 0 50px !important;
  border: 0;
  border-radius: 999px;
  background: #E5E9F0;
  position: relative;
  cursor: pointer;
  transition: background .18s ease;
}
.auto-multi-toggle-row input::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.20);
  transition: transform .18s ease;
}
.auto-multi-toggle-row input:checked {
  background: #2563EB;
}
.auto-multi-toggle-row input:checked::before {
  transform: translateX(22px);
}

.auto-config-native-order .auto-scroll-area {
  padding: 0 1px 12px !important;
}
.auto-pair-native-layout {
  gap: 13px !important;
}
.auto-pair-create-entry {
  min-height: 58px !important;
  border: 1.6px solid #2F6FF6 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #2563EB !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  gap: 10px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.02);
}
.auto-pair-create-entry-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: #2563EB !important;
  color: #fff !important;
  border: 1.5px dashed rgba(255,255,255,.92);
  box-shadow: 0 0 0 2px #2563EB;
  font-size: 25px !important;
  font-weight: 400 !important;
}
.auto-pair-compact-layout h4 {
  margin: 5px 2px 0 !important;
  font-size: 17px !important;
  color: #111827 !important;
  font-weight: 850 !important;
}
.auto-pair-chip-list {
  display: grid !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

/* pair row giống card của mẫu */
.auto-pair-ref-card {
  display: flex;
  align-items: stretch;
  min-height: 82px;
  border: 1px solid #E6EAF1;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 6px 17px rgba(15,23,42,.07);
  overflow: hidden;
}
.auto-pair-ref-details {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.auto-pair-ref-summary {
  min-height: 82px;
  padding: 12px 6px 12px 12px !important;
  gap: 10px !important;
}
.auto-pair-tag-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #F0F5FF;
  color: #2F6FF6;
}
.auto-pair-tag-icon svg {
  width: 27px;
  height: 27px;
}
.auto-pair-card-title {
  font-size: 16.5px !important;
  font-weight: 850 !important;
  line-height: 1.28 !important;
  color: #111827 !important;
}
.auto-pair-chevron {
  width: 30px !important;
  height: 30px !important;
  color: #2563EB !important;
  margin-right: 2px;
}
.auto-pair-chevron svg {
  width: 22px;
  height: 22px;
}
.auto-pair-ref-details[open] .auto-pair-chevron {
  transform: rotate(180deg);
}
.auto-pair-details-panel {
  margin: 0 10px 12px 12px;
  padding: 10px 12px 12px !important;
  border-top: 1px solid #EDF0F5 !important;
  border-radius: 12px;
  background: #F8FAFC;
}
.auto-pair-detail-row {
  padding: 8px 0 !important;
}
.auto-pair-detail-label {
  flex-basis: 92px !important;
  font-size: 12.5px !important;
}
.auto-pair-detail-value {
  font-size: 13px !important;
}
.auto-pair-ref-actions {
  flex: 0 0 102px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px 0 4px;
}
.auto-pair-action-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  border: 0 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.auto-pair-action-btn svg {
  width: 22px;
  height: 22px;
}
.auto-pair-action-btn.settings {
  background: #F3F5F8 !important;
  color: #475569 !important;
}
.auto-pair-action-btn.delete {
  background: #FFF0F1 !important;
  color: #EF4444 !important;
}
.auto-pair-action-btn:active {
  transform: scale(.95);
}

/* footer 2 nút lớn */
.auto-dialog-footer-native {
  min-height: 70px !important;
  padding: 12px 0 0 !important;
  gap: 10px !important;
  border-top: 1px solid #EEF1F5;
  background: #fff !important;
  display: grid !important;
  grid-template-columns: 1.12fr .88fr;
}
.auto-footer-right {
  display: contents !important;
}
.auto-dialog-footer-native .auto-footer-btn {
  height: 54px !important;
  width: 100% !important;
  border: 1px solid #E2E7EE !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 0 14px !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  color: #374151 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.auto-dialog-footer-native .auto-footer-btn.groups {
  color: #2563EB !important;
}
.auto-dialog-footer-native .auto-footer-btn.groups svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 374px) {
  .auto-config-modal.auto-config-native-order {
    width: calc(100vw - 18px) !important;
    height: calc(100dvh - 24px) !important;
    min-height: 0 !important;
    padding: 20px 14px 14px !important;
    border-radius: 21px !important;
  }
  .auto-dialog-title-only h2 { font-size: 27px !important; }
  .auto-utility-row { gap: 6px !important; }
  .auto-utility-row .auto-outline-btn {
    font-size: 12.2px !important;
    gap: 5px !important;
    padding: 0 5px !important;
  }
  .auto-utility-row .auto-outline-btn svg { width: 17px; height: 17px; flex-basis: 17px; }
  .auto-warning-icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 24px; }
  .auto-multi-toggle-row { padding: 10px !important; }
  .auto-pair-ref-actions { flex-basis: 92px; gap: 6px; padding-right: 7px; }
  .auto-pair-action-btn { width: 39px !important; height: 39px !important; min-width: 39px; }
  .auto-pair-tag-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .auto-pair-card-title { font-size: 15.5px !important; }
  .auto-dialog-footer-native .auto-footer-btn { font-size: 13px !important; padding: 0 8px !important; }
}

body.dark .auto-config-modal.auto-config-native-order,
body.dark .auto-dialog-footer-native {
  background: #111827 !important;
  border-color: #263244 !important;
}
body.dark .auto-pair-ref-card,
body.dark .auto-main-tab,
body.dark .auto-utility-row .auto-outline-btn,
body.dark .auto-pair-create-entry {
  background: #172033 !important;
  border-color: #334155 !important;
}
body.dark .auto-multi-toggle-row {
  background: #172033 !important;
  border-color: #334155 !important;
}
body.dark .auto-pair-tag-icon { background: #172554; color: #60A5FA; }
body.dark .auto-pair-action-btn.settings { background: #263244 !important; color: #CBD5E1 !important; }
body.dark .auto-pair-action-btn.delete { background: #3A2026 !important; color: #FB7185 !important; }
body.dark .auto-pair-details-panel { background: #0F172A; border-top-color: #334155 !important; }
body.dark .auto-pair-card-title,
body.dark .auto-pair-compact-layout h4 { color: #F8FAFC !important; }

.auto-warning-icon svg { width: 28px; height: 28px; }
.auto-pair-action-btn {
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
}
@media (max-width: 374px) {
  .auto-pair-action-btn { min-height: 39px !important; max-width: 39px !important; max-height: 39px !important; }
}


/* ===== v1.2.30 — Tạo bộ từ khóa, giao diện card kiểu mẫu 2/3 ===== */
.auto-pair-builder-backdrop {
  padding: 14px 10px !important;
  align-items: center !important;
}
.auto-pair-builder-modal.auto-pair-builder-ref3 {
  width: min(94vw, 430px) !important;
  max-width: 430px !important;
  height: min(92dvh, 790px) !important;
  max-height: calc(100dvh - 28px) !important;
  padding: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.30) !important;
  display: flex !important;
  flex-direction: column !important;
}
.auto-pair-builder-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.auto-pair-builder-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 22px 18px;
  background: linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.auto-pair-builder-hero-copy { min-width: 0; }
.auto-pair-builder-hero h2 {
  margin: 0 0 5px !important;
  color: #10182f !important;
  font-size: 30px !important;
  line-height: 1.08 !important;
  letter-spacing: -.7px;
  font-weight: 900 !important;
}
.auto-pair-builder-hero p {
  margin: 0 !important;
  color: #748096 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  font-weight: 500;
}
.auto-pair-builder-quick-paste {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid #dbe7ff;
  border-radius: 12px;
  background: #f4f8ff;
  color: #2563eb;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.auto-pair-builder-quick-paste svg { width: 18px; height: 18px; }
.auto-pair-builder-content {
  padding: 0 22px 20px;
}
.auto-pair-name-card,
.auto-pair-field-card {
  border: 1px solid #e2e7ef;
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 5px 18px rgba(15,23,42,.055);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: text;
}
.auto-pair-name-card {
  min-height: 76px;
  padding: 12px 14px;
  border-color: #9abaff;
  box-shadow: 0 7px 20px rgba(37,99,235,.10);
}
.auto-pair-field-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  background: #f1f5ff;
  color: #2563eb;
  display: grid;
  place-items: center;
}
.auto-pair-field-icon svg { width: 23px; height: 23px; }
.auto-pair-field-icon-strong {
  background: #edf4ff;
}
.auto-pair-name-copy,
.auto-pair-field-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
}
.auto-pair-name-copy strong,
.auto-pair-field-copy strong {
  color: #17213a;
  font-size: 14.5px;
  line-height: 1.2;
  font-weight: 850;
}
.auto-pair-name-copy strong { color: #1d5fe9; font-size: 15px; }
.auto-pair-field-copy strong em {
  color: #68758b;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 650;
}
.auto-pair-card-input {
  width: 100%;
  min-width: 0;
  height: 24px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #334155 !important;
  font: inherit;
  font-size: 13.5px !important;
  line-height: 1.25;
  font-weight: 550 !important;
  box-shadow: none !important;
  appearance: none;
}
.auto-pair-card-input::placeholder {
  color: #8b96a9 !important;
  opacity: 1;
}
.auto-pair-name-card:focus-within,
.auto-pair-field-card:focus-within {
  border-color: #2f6ff6;
  box-shadow: 0 0 0 3px rgba(47,111,246,.10), 0 8px 22px rgba(15,23,42,.06);
}
.auto-pair-section-title {
  margin: 22px 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.auto-pair-section-title > span {
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: #2f6ff6;
}
.auto-pair-section-title strong {
  color: #17213a;
  font-size: 15.5px;
  font-weight: 900;
}
.auto-pair-builder-fields {
  display: grid;
  gap: 9px;
}
.auto-pair-field-card {
  min-height: 70px;
  padding: 10px 13px;
}
.auto-pair-time-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.auto-pair-time-card {
  min-width: 0;
  min-height: 70px;
  padding-left: 11px;
  padding-right: 10px;
  gap: 9px;
}
.auto-pair-time-card .auto-pair-field-icon {
  width: 37px;
  height: 37px;
  flex-basis: 37px;
}
.auto-pair-time-card .auto-pair-field-icon svg { width: 20px; height: 20px; }
.auto-pair-time-card .auto-pair-field-copy strong { font-size: 13.5px; }
.auto-pair-time-card .auto-pair-card-input { font-size: 12.5px !important; }
.auto-pair-builder-footer-ref3 {
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: .72fr 1.28fr;
  gap: 10px !important;
  padding: 13px 22px calc(13px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #edf1f6;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
}
.auto-pair-builder-cancel,
.auto-pair-builder-save {
  height: 52px;
  border-radius: 14px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 850;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.auto-pair-builder-cancel {
  border: 1px solid #dfe5ee;
  background: #fff;
  color: #334155;
}
.auto-pair-builder-save {
  border: 0;
  background: linear-gradient(135deg,#1f66f5 0%,#2459eb 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}
.auto-pair-builder-save svg { width: 20px; height: 20px; }
.auto-pair-builder-cancel:active,
.auto-pair-builder-save:active,
.auto-pair-builder-quick-paste:active { transform: scale(.985); }

@media (max-width: 374px) {
  .auto-pair-builder-modal.auto-pair-builder-ref3 {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    height: calc(100dvh - 16px) !important;
    border-radius: 21px !important;
  }
  .auto-pair-builder-hero { padding: 20px 16px 14px; }
  .auto-pair-builder-content { padding: 0 16px 16px; }
  .auto-pair-builder-hero h2 { font-size: 27px !important; }
  .auto-pair-builder-hero p { font-size: 12.5px !important; }
  .auto-pair-builder-quick-paste span { display: none; }
  .auto-pair-builder-quick-paste { width: 40px; padding: 0; }
  .auto-pair-field-card { min-height: 65px; }
  .auto-pair-field-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .auto-pair-time-card .auto-pair-field-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .auto-pair-builder-footer-ref3 { padding-left: 16px !important; padding-right: 16px !important; }
}

body.dark .auto-pair-builder-modal.auto-pair-builder-ref3,
body.dark .auto-pair-builder-hero,
body.dark .auto-pair-builder-footer-ref3 {
  background: #111827 !important;
}
body.dark .auto-pair-name-card,
body.dark .auto-pair-field-card {
  background: #172033;
  border-color: #334155;
}
body.dark .auto-pair-builder-hero h2,
body.dark .auto-pair-name-copy strong,
body.dark .auto-pair-field-copy strong,
body.dark .auto-pair-section-title strong { color: #f8fafc !important; }
body.dark .auto-pair-field-icon { background: #172554; color: #60a5fa; }
body.dark .auto-pair-card-input { color: #e5e7eb !important; }
body.dark .auto-pair-builder-cancel { background: #172033; border-color: #334155; color: #e5e7eb; }

/* ===== v1.2.32 — Nhận Cuốc Auto theo giao diện card mẫu + thu gọn bộ từ khóa ===== */
.auto-ride-ref-modal {
  width: min(430px, calc(100vw - 22px)) !important;
  height: min(820px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  padding: 22px 20px 16px !important;
  border-radius: 24px !important;
}
.auto-ride-title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 14px !important;
}
.auto-ride-title-row h2 {
  margin: 0 !important;
}
.auto-ride-top-close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 0;
  border-radius: 999px;
  background: #F3F5F9;
  color: #475569;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.auto-ride-top-close span {
  font-size: 29px;
  line-height: 1;
  font-weight: 350;
  transform: translateY(-1px);
}

.auto-ride-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.auto-ride-mode-card {
  min-height: 82px;
  border: 1px solid #E3E7EF;
  border-radius: 16px;
  background: #fff;
  padding: 12px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: #1F2937;
  box-shadow: 0 4px 14px rgba(15,23,42,.05);
}
.auto-ride-mode-card.active {
  background: linear-gradient(135deg, #2F6FF6 0%, #1D5EEB 100%);
  border-color: #2563EB;
  color: #fff;
  box-shadow: 0 10px 22px rgba(37,99,235,.20);
}
.auto-ride-mode-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #2563EB;
  background: #F1F5FF;
}
.auto-ride-mode-card.active .auto-ride-mode-icon {
  color: #fff;
  background: rgba(255,255,255,.18);
}
.auto-ride-mode-icon svg {
  width: 23px;
  height: 23px;
}
.auto-ride-mode-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.auto-ride-mode-copy strong {
  font-size: 14px;
  line-height: 1.18;
  font-weight: 850;
}
.auto-ride-mode-copy small {
  font-size: 10.5px;
  line-height: 1.3;
  color: #6B7280;
}
.auto-ride-mode-card.active .auto-ride-mode-copy small {
  color: rgba(255,255,255,.82);
}

.auto-ride-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.auto-ride-quick-card {
  min-height: 68px;
  border: 1px solid #E3E7EF;
  border-radius: 16px;
  background: #fff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2563EB;
  text-align: left;
  box-shadow: 0 4px 14px rgba(15,23,42,.045);
}
.auto-ride-quick-card > span {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #F3F6FC;
}
.auto-ride-quick-card svg {
  width: 22px;
  height: 22px;
}
.auto-ride-quick-card div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.auto-ride-quick-card strong {
  font-size: 13.5px;
  font-weight: 850;
  line-height: 1.2;
}
.auto-ride-quick-card small {
  color: #6B7280;
  font-size: 10.5px;
  line-height: 1.25;
}

.auto-ride-warning-card {
  margin-bottom: 12px !important;
  background: linear-gradient(90deg, #FFFDF8 0%, #FFF9EF 100%) !important;
  border-color: #F5EBD8 !important;
}
.auto-ride-ref-modal .auto-warning-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}
.auto-ride-ref-modal .auto-multi-toggle-row strong {
  font-size: 13.5px !important;
}
.auto-ride-ref-modal .auto-multi-toggle-row span:not(.auto-warning-icon) {
  font-size: 11.8px !important;
}
.auto-ride-scroll-area {
  padding: 0 0 10px !important;
}
.auto-ride-ref-pane {
  display: grid;
  gap: 12px;
}
.auto-ride-editor-card,
.auto-ride-list-card {
  border: 1px solid #E5E9F0;
  border-radius: 17px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 5px 16px rgba(15,23,42,.045);
}
.auto-ride-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.auto-ride-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.auto-ride-section-icon.car {
  color: #2563EB;
  background: #EEF4FF;
}
.auto-ride-section-icon.list {
  color: #2563EB;
  background: #EEF4FF;
}
.auto-ride-section-icon svg {
  width: 24px;
  height: 24px;
}
.auto-ride-section-heading > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.auto-ride-section-heading strong {
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 850;
}
.auto-ride-section-heading span,
.auto-ride-section-heading em {
  color: #667085;
  font-size: 11.7px;
  line-height: 1.35;
  font-style: normal;
}
.auto-ride-section-heading em {
  color: #475569;
  font-weight: 650;
}
.auto-ride-input-shell {
  min-height: 64px;
  margin-top: 12px;
  border: 1px solid #DCE3EF;
  border-radius: 14px;
  background: #F8FAFF;
  padding: 9px 46px 9px 13px;
  display: block;
  position: relative;
}
.auto-ride-input {
  width: 100%;
  min-height: 44px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
  font: inherit;
  font-size: 13px;
  line-height: 1.42;
  padding: 3px 0;
}
.auto-ride-input::placeholder {
  color: #9AA4B4;
}
.auto-ride-edit-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #2563EB;
}
.auto-ride-edit-icon svg {
  width: 21px;
  height: 21px;
}
.auto-ride-items {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.auto-ride-empty-state {
  min-height: 150px;
  border: 1px solid #E8ECF2;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: #fff;
}
.auto-ride-empty-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  color: #4C7DF5;
  margin-bottom: 4px;
}
.auto-ride-empty-icon svg {
  width: 62px;
  height: 62px;
}
.auto-ride-empty-state strong {
  color: #1F2937;
  font-size: 14px;
  margin-top: 2px;
}
.auto-ride-empty-state > span:last-child {
  color: #7B8494;
  font-size: 11.5px;
  margin-top: 5px;
}
.auto-ride-item-card {
  min-height: 54px;
  border: 1px solid #E5E9F0;
  border-radius: 13px;
  background: #FAFBFD;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px 8px 10px;
}
.auto-ride-item-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #EEF4FF;
  color: #2563EB;
}
.auto-ride-item-icon svg { width: 20px; height: 20px; }
.auto-ride-item-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
  color: #1F2937;
  word-break: break-word;
}
.auto-ride-item-delete {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #FFF0F1;
  color: #EF4444;
}
.auto-ride-item-delete svg { width: 18px; height: 18px; }

.auto-ride-footer {
  border-top: 1px solid #EEF1F5;
  padding-top: 11px;
  display: grid;
  gap: 10px;
  background: #fff;
}
.auto-ride-footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.auto-ride-footer-btn {
  height: 49px !important;
  border: 1.5px solid #BFD0FF !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #2563EB !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.auto-ride-footer-btn svg {
  width: 22px;
  height: 22px;
}
.auto-ride-close-main {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #2F6FF6 0%, #1F5EEB 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(37,99,235,.18);
}

/* Thu gọn danh sách bộ từ khóa: giữ chức năng, giảm chiều cao/icon/nút. */
.auto-pair-ref-card {
  min-height: 64px !important;
  border-radius: 15px !important;
}
.auto-pair-ref-summary {
  min-height: 64px !important;
  padding: 8px 4px 8px 10px !important;
  gap: 8px !important;
}
.auto-pair-tag-icon {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
  border-radius: 10px !important;
}
.auto-pair-tag-icon svg {
  width: 22px !important;
  height: 22px !important;
}
.auto-pair-card-title {
  font-size: 15px !important;
}
.auto-pair-chevron {
  width: 25px !important;
  height: 25px !important;
}
.auto-pair-chevron svg {
  width: 18px !important;
  height: 18px !important;
}
.auto-pair-ref-actions {
  flex-basis: 82px !important;
  gap: 6px !important;
  padding: 0 7px 0 2px !important;
}
.auto-pair-action-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
}
.auto-pair-action-btn svg {
  width: 18px !important;
  height: 18px !important;
}
.auto-pair-chip-list {
  gap: 8px !important;
}
.auto-pair-details-panel {
  margin: 0 8px 9px 10px !important;
  padding: 8px 10px 10px !important;
}

@media (max-width: 374px) {
  .auto-ride-ref-modal { padding: 18px 14px 13px !important; }
  .auto-ride-mode-card { min-height: 74px; padding: 9px 8px; gap: 7px; }
  .auto-ride-mode-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .auto-ride-mode-copy strong { font-size: 12.5px; }
  .auto-ride-mode-copy small { font-size: 9.5px; }
  .auto-ride-quick-card { padding: 8px; gap: 7px; }
  .auto-ride-quick-card strong { font-size: 12.5px; }
  .auto-ride-quick-card small { font-size: 9.5px; }
  .auto-ride-editor-card, .auto-ride-list-card { padding: 11px; }
  .auto-pair-ref-actions { flex-basis: 76px !important; }
  .auto-pair-action-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; }
}

body.dark .auto-ride-mode-card,
body.dark .auto-ride-quick-card,
body.dark .auto-ride-editor-card,
body.dark .auto-ride-list-card,
body.dark .auto-ride-footer,
body.dark .auto-ride-empty-state {
  background: #172033 !important;
  border-color: #334155 !important;
}
body.dark .auto-ride-mode-card.active,
body.dark .auto-ride-close-main {
  background: linear-gradient(135deg, #2F6FF6 0%, #1F5EEB 100%) !important;
}
body.dark .auto-ride-section-heading strong,
body.dark .auto-ride-item-text,
body.dark .auto-ride-empty-state strong {
  color: #F8FAFC !important;
}
body.dark .auto-ride-input-shell,
body.dark .auto-ride-item-card {
  background: #0F172A !important;
  border-color: #334155 !important;
}
body.dark .auto-ride-input { color: #F8FAFC !important; }


/* v1.2.33 - tinh chỉnh typography hai nút Chọn nhóm / Thêm */
.auto-ride-footer .auto-ride-footer-btn,
.auto-ride-footer .auto-ride-footer-btn span {
  letter-spacing: -0.1px !important;
  text-transform: none !important;
  font-family: inherit !important;
}
.auto-ride-footer .auto-ride-footer-btn {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  padding: 0 16px !important;
  gap: 8px !important;
}
.auto-ride-footer .auto-ride-footer-btn.groups span,
.auto-ride-footer .auto-ride-footer-btn.add span {
  display: inline-block;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.auto-ride-footer .auto-ride-footer-btn.groups svg {
  width: 22px !important;
  height: 22px !important;
}
.auto-ride-footer .auto-ride-footer-btn.add svg {
  width: 20px !important;
  height: 20px !important;
}
@media (max-width: 374px) {
  .auto-ride-footer .auto-ride-footer-btn,
  .auto-ride-footer .auto-ride-footer-btn.groups span,
  .auto-ride-footer .auto-ride-footer-btn.add span {
    font-size: 14px !important;
  }
}


/* v1.2.36 - Bật/tắt độc lập từng bộ từ khóa */
.auto-pair-ref-card.is-enabled {
  border-color: rgba(0, 104, 255, .28) !important;
  background: linear-gradient(90deg, rgba(240, 253, 244, .92), rgba(255, 255, 255, .98)) !important;
}
.auto-pair-ref-card.is-disabled {
  border-color: #e2e7ef !important;
  background: #fff !important;
}
.auto-pair-ref-card.is-enabled .auto-pair-tag-icon {
  background: #EAF3FF !important;
  color: #0068FF !important;
}
.auto-pair-ref-card.is-disabled .auto-pair-tag-icon {
  background: #f3f6fb !important;
  color: #6c87b6 !important;
}
.auto-pair-summary-content {
  min-width: 0 !important;
}
.auto-pair-card-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.15;
  font-weight: 750;
  white-space: nowrap;
}
.auto-pair-card-status.active { color: #0068FF; }
.auto-pair-card-status.inactive { color: #8a94a6; }
.auto-pair-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 5px;
}
.auto-pair-enable-switch {
  position: relative;
  width: 43px;
  height: 25px;
  min-width: 43px;
  flex: 0 0 43px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.auto-pair-enable-switch.off {
  background: #dfe4ec;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .08);
}
.auto-pair-enable-switch.on {
  background: linear-gradient(135deg, #0068FF, #0068FF);
  box-shadow: 0 4px 10px rgba(0, 104, 255, .20);
}
.auto-pair-enable-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .18);
  transition: transform .18s ease;
}
.auto-pair-enable-switch.on .auto-pair-enable-knob {
  transform: translateX(18px);
}
.auto-pair-enable-switch:active .auto-pair-enable-knob {
  width: 21px;
}
.auto-pair-enable-switch.on:active .auto-pair-enable-knob {
  transform: translateX(16px);
}
.auto-pair-ref-summary {
  padding-right: 2px !important;
}
.auto-pair-chevron {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
}
@media (max-width: 390px) {
  .auto-pair-enable-switch {
    width: 39px;
    height: 23px;
    min-width: 39px;
    flex-basis: 39px;
  }
  .auto-pair-enable-knob {
    width: 17px;
    height: 17px;
  }
  .auto-pair-enable-switch.on .auto-pair-enable-knob { transform: translateX(16px); }
  .auto-pair-card-status { font-size: 9.8px; }
}
body.dark .auto-pair-ref-card.is-enabled {
  background: linear-gradient(90deg, rgba(30, 58, 95, .22), rgba(23, 32, 49, .98)) !important;
  border-color: rgba(0, 104, 255, .28) !important;
}
body.dark .auto-pair-ref-card.is-disabled {
  background: #172031 !important;
  border-color: #334155 !important;
}
body.dark .auto-pair-enable-switch.off { background: #465166; }


/* ===== v1.2.37: Xem mẫu theo bộ thu gọn / xổ chi tiết ===== */
.saved-pair-accordion {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  border: 1px solid #dfe6f1;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
  overflow: hidden;
}
.saved-pair-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.saved-pair-summary::-webkit-details-marker { display: none; }
.saved-pair-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #eef4ff;
  color: #246df5;
  font-size: 25px;
  font-weight: 900;
  transform: rotate(-45deg);
}
.saved-pair-summary-title {
  min-width: 0;
  color: #111827;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.saved-pair-summary-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #246df5;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  transition: transform .18s ease;
}
.saved-pair-accordion[open] .saved-pair-summary-chevron { transform: rotate(180deg); }
.saved-pair-accordion[open] .saved-pair-summary { border-bottom: 1px solid #e7ebf2; }
.saved-pair-expanded { padding: 6px 14px 14px; }
.saved-pair-detail-grid { width: 100%; }
.saved-pair-detail-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px dashed #e6eaf1;
}
.saved-pair-detail-row:last-child { border-bottom: 0; }
.saved-pair-detail-row > span {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}
.saved-pair-detail-row > strong {
  min-width: 0;
  color: #111827;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.saved-pair-actions { margin-top: 12px; }
.saved-pair-actions button { height: 44px; }
@media (max-width: 430px) {
  .saved-pair-summary { grid-template-columns: 38px minmax(0,1fr) 26px; min-height: 66px; padding: 10px 12px; gap: 10px; }
  .saved-pair-summary-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 22px; }
  .saved-pair-summary-title { font-size: 16px; }
  .saved-pair-detail-row { grid-template-columns: 82px minmax(0,1fr); gap: 8px; }
}
body.dark .saved-pair-accordion { background: #172033; border-color: #334155; box-shadow: none; }
body.dark .saved-pair-summary-title,
body.dark .saved-pair-detail-row > strong { color: #eef3ff; }
body.dark .saved-pair-detail-row > span { color: #aeb9cf; }
body.dark .saved-pair-accordion[open] .saved-pair-summary { border-bottom-color: #334155; }
body.dark .saved-pair-detail-row { border-bottom-color: #334155; }
body.dark .saved-pair-summary-icon { background: #1e3a5f; color: #93c5fd; }

/* ===== v1.2.38 — Settings UI theo mẫu iOS được duyệt ===== */
.settings-reference-v38 {
  padding: 26px 18px 132px;
  gap: 10px;
  background:
    radial-gradient(circle at 6% 3%, rgba(0, 104, 255, .045), transparent 24%),
    #f7f9fb;
}
.settings-reference-v38 .settings-header-v2 {
  min-height: 58px;
  margin: 0 0 8px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-reference-v38 .settings-header-v2 h1 {
  margin: 0;
  color: #101827;
  font-size: 35px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.9px;
}
.settings-reference-v38 .settings-theme-box {
  min-width: 92px;
  height: 44px;
  padding: 5px 8px 5px 10px;
  border: 1px solid #e8edf2;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, .06);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}
.settings-reference-v38 .sun-icon {
  width: 26px !important;
  height: 26px !important;
  color: #f4a900;
  display: grid !important;
  place-items: center;
}
.settings-reference-v38 .sun-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.settings-reference-v38 .setting-card {
  padding: 16px 16px;
  border: 1px solid rgba(231, 236, 242, .92);
  border-radius: 19px;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
}

/* Công tắc kiểu iOS */
.settings-reference-v38 .settings-switch {
  width: 50px;
  height: 29px;
  min-width: 50px;
  border-radius: 999px;
  background: #d2d7de;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
  position: relative;
  padding: 0;
}
.settings-reference-v38 .settings-switch::after {
  width: 25px;
  height: 25px;
  left: 2px;
  top: 2px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .24);
  transform: translateX(0);
}
.settings-reference-v38 .settings-switch.on { background: #0068FF; }
.settings-reference-v38 .settings-switch.on::after { transform: translateX(21px); }
.settings-reference-v38 .theme-switch {
  width: 48px;
  min-width: 48px;
  height: 28px;
}
.settings-reference-v38 .theme-switch::after {
  width: 24px;
  height: 24px;
}
.settings-reference-v38 .theme-switch.on::after { transform: translateX(20px); }

/* Lọc / Ẩn thông báo */
.settings-reference-v38 .keyword-card-v2 {
  padding: 14px 13px 14px !important;
  min-height: 86px;
}
.settings-reference-v38 .keyword-card-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.settings-reference-v38 .keyword-title-left {
  grid-template-columns: 45px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}
.settings-reference-v38 .keyword-icon-circle,
.settings-reference-v38 .settings-card-icon {
  width: 45px;
  height: 45px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.settings-reference-v38 .keyword-icon-circle svg,
.settings-reference-v38 .settings-card-icon svg,
.settings-reference-v38 .circle-gear svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-reference-v38 .keyword-icon-filter {
  background: #EAF3FF;
  color: #0068FF;
}
.settings-reference-v38 .keyword-icon-hide {
  background: #fff0f0;
  color: #eb4c4c;
}
.settings-reference-v38 .keyword-title-text h2 {
  margin: 0;
  color: #101827;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.12px;
}
.settings-reference-v38 .keyword-title-text p {
  margin: 4px 0 0;
  color: #7b8391;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;
}
.settings-reference-v38 .keyword-actions-v2 {
  gap: 8px;
}
.settings-reference-v38 .keyword-actions-v2 .circle-add,
.settings-reference-v38 .keyword-actions-v2 .circle-gear {
  width: 45px;
  height: 45px;
  min-width: 45px;
  border-radius: 999px;
  box-shadow: none;
}
.settings-reference-v38 .keyword-actions-v2 .circle-add {
  background: #EDF5FF;
  color: #0068FF;
  font-size: 29px;
  line-height: 1;
  font-weight: 650;
}
.settings-reference-v38 .keyword-actions-v2 .circle-gear {
  background: #f4f6fa;
  color: #111827;
}
.settings-reference-v38 .circle-gear svg { width: 22px; height: 22px; }
.settings-reference-v38 .keyword-chips-v2 {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.settings-reference-v38 .keyword-chip-v2 {
  min-width: auto;
  width: auto;
  height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: #EDF5FF;
  color: #0068FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  box-shadow: none;
}
.settings-reference-v38 .keyword-chip-v2 button {
  color: #0068FF;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}
.settings-reference-v38 .keyword-chips-v2:empty { display: none; }

/* Cài đặt thông báo */
.settings-reference-v38 .settings-notify-card {
  padding: 15px 14px 7px !important;
}
.settings-reference-v38 .settings-card-title-row {
  grid-template-columns: 45px minmax(0, 1fr);
  gap: 11px;
  margin-bottom: 8px;
}
.settings-reference-v38 .bell-soft {
  background: #f1ecff;
  color: #7d45ef;
}
.settings-reference-v38 .settings-card-title-row h2 {
  margin: 0;
  color: #101827;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -.1px;
}
.settings-reference-v38 .settings-card-copy h2,
.settings-reference-v38 .settings-range-card h2,
.settings-reference-v38 .settings-compact-card h2 {
  margin: 0;
  color: #101827;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -.1px;
}
.settings-reference-v38 .settings-check-list {
  display: flex;
  flex-direction: column;
}
.settings-reference-v38 .settings-toggle-row {
  min-height: 45px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  align-items: center;
  gap: 12px;
  padding: 0 0 0 1px;
  border-bottom: 1px solid #edf0f4;
  color: #151c29;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 500;
}
.settings-reference-v38 .settings-toggle-row:last-child { border-bottom: 0; }

/* Card slider */
.settings-reference-v38 .settings-range-card {
  padding: 13px 14px 12px;
}
.settings-reference-v38 .settings-range-main {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}
.settings-reference-v38 .settings-card-copy {
  min-width: 0;
}
.settings-reference-v38 .settings-card-copy p,
.settings-reference-v38 .settings-range-card p,
.settings-reference-v38 .settings-compact-card p {
  margin: 3px 0 0;
  color: #7b8391;
  font-size: 11.75px;
  line-height: 1.35;
  font-weight: 500;
}
.settings-reference-v38 .text-soft { background: #EAF3FF; color: #0068FF; }
.settings-reference-v38 .clock-soft { background: #ecf6ff; color: #168ce4; }
.settings-reference-v38 .hand-soft { background: #f4edff; color: #7d45ef; }
.settings-reference-v38 .chat-soft { background: #fff7df; color: #e4ad00; }
.settings-reference-v38 .robot-soft { background: #EAF3FF; color: #0068FF; }
.settings-reference-v38 .settings-range-row {
  margin: 9px 0 0 56px;
  gap: 10px;
}
.settings-reference-v38 .settings-range-row .range {
  width: 100%;
  min-width: 0;
  height: 26px;
  margin: 0;
  accent-color: #0068FF;
  cursor: pointer;
}
.settings-reference-v38 .settings-range-row b {
  width: 42px;
  min-width: 42px;
  color: #242936;
  font-size: 13px;
  line-height: 1;
  font-weight: 850;
  text-align: right;
}

/* Card hành động 1 dòng */
.settings-reference-v38 .settings-compact-card {
  min-height: 73px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
}
.settings-reference-v38 .settings-reply-card { min-height: 82px; }
.settings-reference-v38 .settings-action-pill {
  min-width: 84px;
  height: 42px;
  padding: 0 11px 0 14px;
  border-radius: 999px;
  background: #f4f6fa;
  color: #172033;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}
.settings-reference-v38 .settings-action-pill span {
  width: auto;
  height: auto;
  display: inline;
  color: inherit;
  font-size: 25px;
  line-height: 16px;
  transform: translateY(-1px);
}
.settings-reference-v38 .settings-action-pill.green {
  min-width: 117px;
  background: #F1F6FF;
  color: #0068FF;
}

/* Hộp sửa hai tùy chọn được thu gọn trên trang */
.settings-editor-modal .setting-desc { margin: 4px 0 14px; }
.settings-choice-row {
  min-height: 70px;
  margin: 8px 0;
  padding: 11px 12px;
  border: 1px solid #e7ebf0;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.settings-choice-row input {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: #0068FF;
}
.settings-choice-row span { min-width: 0; display: block; }
.settings-choice-row strong {
  display: block;
  color: #111827;
  font-size: 15px;
  line-height: 1.25;
}
.settings-choice-row small {
  display: block;
  margin-top: 3px;
  color: #7b8391;
  font-size: 12px;
  line-height: 1.35;
}
.settings-editor-input {
  width: 100%;
  height: 50px;
  margin-top: 4px;
  border: 1px solid #dfe5ec;
  border-radius: 14px;
  padding: 0 13px;
  outline: none;
  font-size: 16px;
}
.settings-editor-input:focus {
  border-color: #0A7CFF;
  box-shadow: 0 0 0 3px rgba(0, 104, 255, .11);
}
.settings-editor-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.settings-editor-actions button { height: 44px; }

@media (max-width: 380px) {
  .settings-reference-v38 { padding-left: 13px; padding-right: 13px; }
  .settings-reference-v38 .settings-header-v2 h1 { font-size: 32px; }
  .settings-reference-v38 .settings-theme-box { min-width: 86px; }
  .settings-reference-v38 .keyword-title-left { grid-template-columns: 42px minmax(0,1fr); gap: 9px; }
  .settings-reference-v38 .keyword-icon-circle,
  .settings-reference-v38 .settings-card-icon { width: 42px; height: 42px; border-radius: 13px; }
  .settings-reference-v38 .keyword-title-text h2,
  .settings-reference-v38 .settings-card-title-row h2,
  .settings-reference-v38 .settings-card-copy h2 { font-size: 15px; }
  .settings-reference-v38 .keyword-title-text p,
  .settings-reference-v38 .settings-card-copy p { font-size: 11.5px; }
  .settings-reference-v38 .keyword-actions-v2 .circle-add,
  .settings-reference-v38 .keyword-actions-v2 .circle-gear { width: 42px; height: 42px; min-width: 42px; }
  .settings-reference-v38 .settings-compact-card { grid-template-columns: 42px minmax(0,1fr) auto; gap: 9px; }
  .settings-reference-v38 .settings-action-pill { min-width: 76px; padding-left: 11px; padding-right: 8px; font-size: 12px; }
  .settings-reference-v38 .settings-action-pill.green { min-width: 106px; }
  .settings-reference-v38 .settings-range-row { margin-left: 51px; }
  .settings-reference-v38 .settings-range-card h2,
  .settings-reference-v38 .settings-compact-card h2 { font-size: 14.5px; }
  .settings-reference-v38 .settings-range-card p,
  .settings-reference-v38 .settings-compact-card p { font-size: 11.25px; }
  .settings-reference-v38 .settings-range-row b { font-size: 12.5px; }
  .settings-reference-v38 .settings-action-pill { font-size: 11.5px; }
}

/* Dark mode đồng bộ với layout mới */
body.dark .settings-reference-v38 { background: #0f172a; }
body.dark .settings-reference-v38 .settings-theme-box,
body.dark .settings-reference-v38 .setting-card { background: #111827; border-color: #2b3749; box-shadow: none; }
body.dark .settings-reference-v38 .settings-header-v2 h1,
body.dark .settings-reference-v38 .keyword-title-text h2,
body.dark .settings-reference-v38 .settings-card-title-row h2,
body.dark .settings-reference-v38 .settings-card-copy h2,
body.dark .settings-reference-v38 .settings-toggle-row { color: #f8fafc !important; }
body.dark .settings-reference-v38 .keyword-title-text p,
body.dark .settings-reference-v38 .settings-card-copy p { color: #94a3b8 !important; }
body.dark .settings-reference-v38 .settings-toggle-row { border-bottom-color: #2b3749; }
body.dark .settings-reference-v38 .keyword-actions-v2 .circle-gear,
body.dark .settings-reference-v38 .settings-action-pill { background: #202a3b; color: #e2e8f0; }
body.dark .settings-reference-v38 .keyword-actions-v2 .circle-add,
body.dark .settings-reference-v38 .keyword-chip-v2,
body.dark .settings-reference-v38 .settings-action-pill.green { background: #172554; color: #60A5FA; border-color: transparent; }
body.dark .settings-reference-v38 .settings-range-row b { color: #f8fafc; }
body.dark .settings-choice-row { border-color: #334155; background: #111827; }
body.dark .settings-choice-row strong { color: #f8fafc; }
body.dark .settings-choice-row small { color: #94a3b8; }
.settings-reference-v38 .text-soft b {
  font-size: 19px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.6px;
}


/* v1.2.40 - Khôi phục tùy chọn mở rộng cho Lọc trùng cuốc AI */
.settings-reference-v38 .settings-duplicate-main-row {
  grid-template-columns: minmax(0, 1fr) 28px 50px;
}
.settings-reference-v38 .settings-duplicate-chevron {
  width: 28px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b7280;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transform: translateY(-1px);
  transition: transform .18s ease, color .18s ease;
}
.settings-reference-v38 .settings-duplicate-chevron.open {
  transform: rotate(180deg) translateY(1px);
  color: #0068FF;
}
.settings-reference-v38 .settings-duplicate-options[hidden] {
  display: none !important;
}
.settings-reference-v38 .settings-duplicate-options {
  border-bottom: 1px solid #edf0f4;
  background: #f8fbf9;
  padding: 8px 0 9px 12px;
}
.settings-reference-v38 .settings-duplicate-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  align-items: center;
  gap: 12px;
}
.settings-reference-v38 .settings-duplicate-option-copy {
  min-width: 0;
}
.settings-reference-v38 .settings-duplicate-option-copy strong {
  display: block;
  color: #151c29;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
}
.settings-reference-v38 .settings-duplicate-option-copy small {
  display: block;
  margin-top: 2px;
  color: #7a8493;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}
.settings-reference-v38 .settings-duplicate-option-row.disabled {
  opacity: .58;
}
.settings-reference-v38 .settings-duplicate-option-row .settings-switch:disabled {
  cursor: default;
}
body.dark .settings-reference-v38 .settings-duplicate-options {
  background: #152031;
  border-bottom-color: #2b3749;
}
body.dark .settings-reference-v38 .settings-duplicate-option-copy strong {
  color: #f8fafc;
}
body.dark .settings-reference-v38 .settings-duplicate-option-copy small,
body.dark .settings-reference-v38 .settings-duplicate-chevron {
  color: #a8b1bf;
}
body.dark .settings-reference-v38 .settings-duplicate-chevron.open {
  color: #60A5FA;
}

/* ===== v1.2.41 rides empty + account redesign ===== */
.badge.badge-dot {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  background: #0068FF;
  box-shadow: 0 0 0 3px #fff;
}

.empty-ride-panel {
  min-height: 100%;
  display: flex;
  align-items: stretch;
}

.empty-ride-reference-v2 {
  width: 100%;
  min-height: calc(100dvh - 182px - env(safe-area-inset-bottom, 0px));
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(246,252,248,.94));
  border: 1px solid rgba(191, 216, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  padding: 42px 26px 28px;
  justify-content: flex-start;
}

.empty-illustration-v2 {
  width: 100%;
  max-width: 330px;
  height: 330px;
  position: relative;
  margin: 0 auto;
}

.empty-illustration-glow {
  position: absolute;
  inset: 26px 16px 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(147, 197, 253, .34), rgba(147, 197, 253, .12) 55%, rgba(147, 197, 253, 0) 72%);
}

.empty-illustration-cloud {
  position: absolute;
  background: rgba(96, 165, 250, .26);
  border-radius: 999px;
}
.empty-illustration-cloud::before,
.empty-illustration-cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.empty-illustration-cloud.cloud-1 {
  width: 48px;
  height: 16px;
  top: 96px;
  right: 64px;
}
.empty-illustration-cloud.cloud-1::before { width: 18px; height: 18px; left: 4px; top: -8px; }
.empty-illustration-cloud.cloud-1::after { width: 22px; height: 22px; right: 6px; top: -10px; }
.empty-illustration-cloud.cloud-2 {
  width: 38px;
  height: 12px;
  top: 122px;
  left: 78px;
  opacity: .55;
}
.empty-illustration-cloud.cloud-2::before { width: 16px; height: 16px; left: 2px; top: -7px; }
.empty-illustration-cloud.cloud-2::after { width: 18px; height: 18px; right: 5px; top: -8px; }

.empty-illustration-city {
  position: absolute;
  inset: 78px 58px 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  opacity: .42;
}
.city-tower {
  display: block;
  width: 34px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, rgba(96, 165, 250, .7), rgba(96, 165, 250, .2));
  position: relative;
}
.city-tower::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -11px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 12px solid rgba(96, 165, 250, .52);
}
.tower-1 { height: 84px; }
.tower-2 { height: 118px; width: 40px; }
.tower-3 { height: 92px; width: 36px; }
.tower-4 { height: 72px; width: 30px; }

.empty-illustration-ground {
  position: absolute;
  left: 46px;
  right: 46px;
  bottom: 88px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(147, 197, 253, .28), rgba(147, 197, 253, .1) 70%, rgba(147, 197, 253, 0) 100%);
}

.empty-illustration-plant {
  position: absolute;
  bottom: 92px;
  width: 46px;
  height: 56px;
}
.empty-illustration-plant span {
  position: absolute;
  bottom: 0;
  width: 18px;
  height: 30px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(180deg, rgba(0, 104, 255, .78), rgba(0, 104, 255, .45));
}
.empty-illustration-plant.plant-left { left: 36px; }
.empty-illustration-plant.plant-right { right: 34px; }
.empty-illustration-plant.plant-left span:nth-child(1),
.empty-illustration-plant.plant-right span:nth-child(1) { left: 4px; transform: rotate(-28deg); }
.empty-illustration-plant.plant-left span:nth-child(2),
.empty-illustration-plant.plant-right span:nth-child(2) { left: 16px; height: 36px; transform: rotate(10deg); }
.empty-illustration-plant.plant-left span:nth-child(3),
.empty-illustration-plant.plant-right span:nth-child(3) { left: 26px; transform: rotate(32deg); }
.empty-illustration-plant.plant-right span:nth-child(1) { left: auto; right: 26px; transform: rotate(28deg) scaleX(-1); }
.empty-illustration-plant.plant-right span:nth-child(2) { left: auto; right: 14px; transform: rotate(-10deg) scaleX(-1); }
.empty-illustration-plant.plant-right span:nth-child(3) { left: auto; right: 4px; transform: rotate(-32deg) scaleX(-1); }

.empty-car-v2 {
  position: absolute;
  left: 50%;
  bottom: 84px;
  width: 132px;
  height: 110px;
  transform: translateX(-50%);
}
.empty-car-v2 .car-shadow {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 104, 255, .14);
}
.empty-car-v2 .car-roof {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 12px;
  height: 46px;
  border-radius: 24px 24px 10px 10px;
  background: linear-gradient(180deg, #60A5FA, #0A7CFF);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.28);
}
.empty-car-v2 .car-window {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 19px;
  height: 34px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, rgba(234,243,255,.96), rgba(147, 197, 253, .9));
  border: 3px solid rgba(0, 104, 255, .3);
}
.empty-car-v2 .car-body {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 44px;
  height: 48px;
  border-radius: 18px 18px 14px 14px;
  background: linear-gradient(180deg, #60A5FA, #0068FF);
}
.empty-car-v2 .car-bumper {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 82px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 87, 217, .5);
}
.empty-car-v2 .car-wheel {
  position: absolute;
  bottom: 4px;
  width: 18px;
  height: 26px;
  border-radius: 9px;
  background: linear-gradient(180deg, #0B4AA2, #062D67);
}
.empty-car-v2 .wheel-left { left: 18px; }
.empty-car-v2 .wheel-right { right: 18px; }
.empty-car-v2 .car-light {
  position: absolute;
  top: 56px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.18);
}
.empty-car-v2 .light-left { left: 12px; }
.empty-car-v2 .light-right { right: 12px; }
.empty-car-v2 .car-grill {
  position: absolute;
  left: 44px;
  right: 44px;
  top: 62px;
  height: 12px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #78818d, #414b58);
  border-top: 2px solid rgba(255,255,255,.45);
}

.empty-ride-reference-v2 h2 {
  margin-top: 0;
  font-size: 34px;
  font-weight: 950;
  color: #15203A;
  letter-spacing: -.02em;
}
.empty-ride-reference-v2 p {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.55;
  color: #4B5563;
  font-weight: 500;
}
.empty-ready-card {
  width: min(100%, 560px);
  margin-top: 38px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.empty-ready-card.warning {
  background: #fffdf7;
  border-color: #fde68a;
}
.empty-ready-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #EDF5FF;
  color: #0068FF;
  border: 2px solid #60A5FA;
  font-weight: 900;
  font-size: 22px;
  font-family: Georgia, serif;
  flex: 0 0 auto;
}
.empty-ready-card.warning .empty-ready-icon {
  color: #d97706;
  background: #fff7db;
  border-color: #f6c453;
}
.empty-ready-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.empty-ready-copy strong {
  color: #1F2937;
  font-size: 17px;
  font-weight: 850;
}
.empty-ready-copy span {
  color: #6B7280;
  font-size: 15px;
  line-height: 1.45;
}

.account-reference-v2 {
  padding: 18px 18px 118px;
}
.account-section-title-v2 {
  margin: 18px 6px 14px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .02em;
}
.account-profile-card-v2,
.account-plan-card-v2,
.account-linked-card-v2,
.account-settings-panel-v2,
.account-delete-card-v2 {
  border-radius: 22px;
  border: 1px solid rgba(226, 232, 240, .95);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}
.account-profile-card-v2 {
  position: relative;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7fcf8, #f3fbf4);
}
.account-profile-accent {
  position: absolute;
  right: -24px;
  top: -24px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 165, 250, .22) 0%, rgba(96, 165, 250, .18) 45%, rgba(96, 165, 250, 0) 70%);
}
.account-profile-main {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
}
.account-profile-logo {
  width: 98px;
  height: 98px;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(0, 104, 255, .12);
  background: #fff;
}
.account-profile-copy-v2 {
  min-width: 0;
}
.account-profile-copy-v2 h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  color: #15203A;
  font-weight: 950;
}
.account-profile-copy-v2 p {
  margin: 10px 0 0;
  color: #1F2937;
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
}
.account-verified-row {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0068FF;
  font-size: 16px;
  font-weight: 700;
}
.account-verified-row svg {
  width: 18px;
  height: 18px;
  fill: #0068FF;
  stroke: #fff;
  stroke-width: 1.7;
}
.account-logout-box {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}
.account-logout-box svg {
  width: 28px;
  height: 28px;
}
.account-plan-card-v2 {
  margin-top: 0;
  padding: 18px 20px;
  background: #fff;
}
.account-plan-main-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px 122px;
  gap: 18px;
  align-items: center;
}
.account-plan-copy-v2 span,
.account-plan-expire-v2 span {
  display: block;
  color: #6B7280;
  font-size: 17px;
  font-weight: 500;
}
.account-plan-copy-v2 b,
.account-plan-expire-v2 b {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.15;
  color: #0068FF;
  font-weight: 950;
}
.account-plan-copy-v2 p {
  margin: 12px 0 0;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.45;
}
.account-plan-divider-v2 {
  width: 1px;
  height: 84px;
  background: #E5E7EB;
}
.account-plan-expire-v2 {
  text-align: left;
}
.account-plan-expire-v2 b {
  font-size: 24px;
}
.account-linked-card-v2 {
  padding: 18px;
  background: #fff;
}
.account-linked-main-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.account-linked-card-v2 .avatar,
.account-linked-card-v2 .avatar img,
.account-linked-card-v2 img.avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
}
.account-linked-card-v2 .avatar {
  display: grid;
  place-items: center;
  background: #EAF3FF;
  color: #0068FF;
  font-weight: 900;
}
.account-linked-copy-v2 {
  flex: 1 1 auto;
  min-width: 0;
}
.account-linked-copy-v2 h3 {
  margin: 0;
  color: #15203A;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}
.account-linked-meta,
.account-linked-note {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.35;
}
.account-linked-meta.connected { color: #0068FF; font-weight: 800; }
.account-linked-meta.disconnected { color: #DC2626; font-weight: 800; }
.account-linked-note { color: #1F2937; }
.account-linked-meta svg,
.account-linked-note svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.account-disconnect-btn,
.account-connect-btn {
  flex: 0 0 auto;
  min-width: 146px;
  height: 60px;
  border-radius: 16px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 850;
}
.account-disconnect-btn {
  background: #FEECEC;
  color: #EF4444;
}
.account-disconnect-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-connect-btn {
  background: #EAF3FF;
  color: #0068FF;
}
.account-cloud-status-v2 {
  margin-top: 12px;
}
.account-settings-panel-v2 {
  overflow: hidden;
  background: #fff;
}
.account-settings-row-v2 {
  width: 100%;
  min-height: 74px;
  background: transparent;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #EEF2F7;
  text-align: left;
}
.account-settings-row-v2:last-child { border-bottom: 0; }
.account-row-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
}
.account-row-icon.green { color: #0068FF; }
.account-row-icon.red { color: #EF4444; }
.account-row-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-row-label {
  color: #15203A;
  font-size: 17px;
  font-weight: 500;
}
.account-row-chevron {
  color: #7B8494;
  display: grid;
  place-items: center;
}
.account-row-chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-delete-card-v2 {
  width: 100%;
  margin-top: 18px;
  padding: 18px;
  background: #fff;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
  text-align: left;
}
.account-delete-copy-v2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.account-delete-copy-v2 strong {
  color: #EF4444;
  font-size: 17px;
  font-weight: 900;
}
.account-delete-copy-v2 small {
  color: #6B7280;
  font-size: 15px;
  line-height: 1.45;
}

body.dark .badge.badge-dot { box-shadow: 0 0 0 3px #111827; }
body.dark .empty-ride-reference-v2,
body.dark .account-profile-card-v2,
body.dark .account-plan-card-v2,
body.dark .account-linked-card-v2,
body.dark .account-settings-panel-v2,
body.dark .account-delete-card-v2 {
  background: #172033;
  border-color: #334155;
  box-shadow: none;
}
body.dark .empty-ride-reference-v2 h2,
body.dark .account-profile-copy-v2 h1,
body.dark .account-linked-copy-v2 h3,
body.dark .account-row-label,
body.dark .account-delete-copy-v2 small,
body.dark .account-plan-copy-v2 span,
body.dark .account-plan-expire-v2 span,
body.dark .empty-ready-copy strong {
  color: #F8FAFC;
}
body.dark .empty-ride-reference-v2 p,
body.dark .empty-ready-copy span,
body.dark .account-profile-copy-v2 p,
body.dark .account-plan-copy-v2 p,
body.dark .account-linked-note,
body.dark .account-app-version,
body.dark .account-delete-copy-v2 small,
body.dark .account-row-chevron {
  color: #CBD5E1;
}
body.dark .empty-ready-card {
  background: #111827;
  border-color: #334155;
  box-shadow: none;
}
body.dark .account-plan-divider-v2,
body.dark .account-settings-row-v2 { border-color: #334155; }
body.dark .account-disconnect-btn { background: #4C1D1D; color: #FCA5A5; }
body.dark .account-connect-btn { background: #172554; color: #93C5FD; }
body.dark .account-logout-box { background: #111827; border-color: #334155; }

@media (max-width: 390px) {
  .empty-ride-reference-v2 {
    padding: 34px 18px 24px;
    border-radius: 24px;
  }
  .empty-illustration-v2 {
    height: 288px;
    max-width: 292px;
  }
  .empty-ride-reference-v2 h2 { font-size: 30px; }
  .empty-ride-reference-v2 p { font-size: 16px; }
  .empty-ready-card { padding: 16px 18px; border-radius: 20px; }
  .account-profile-logo { width: 82px; height: 82px; }
  .account-profile-copy-v2 h1 { font-size: 22px; }
  .account-plan-main-v2 { grid-template-columns: 1fr; gap: 12px; }
  .account-plan-divider-v2 { display: none; }
  .account-plan-expire-v2 b { font-size: 22px; }
  .account-linked-main-v2 {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
  }
  .account-disconnect-btn,
  .account-connect-btn {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
  }
}


/* ===== v1.2.43 compact tune for rides/account ===== */
.empty-ride-reference-v2 {
  min-height: calc(100dvh - 196px - env(safe-area-inset-bottom, 0px));
  padding: 28px 20px 22px;
  border-radius: 24px;
}
.empty-illustration-v2 {
  max-width: 272px;
  height: 272px;
}
.empty-ride-reference-v2 h2 {
  font-size: 28px;
  margin-top: -4px;
  letter-spacing: -.01em;
}
.empty-ride-reference-v2 p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.empty-ready-card {
  margin-top: 28px;
  max-width: 580px;
  padding: 16px 18px;
  border-radius: 20px;
  gap: 14px;
}
.empty-ready-icon {
  width: 36px;
  height: 36px;
  font-size: 19px;
}
.empty-ready-copy strong {
  font-size: 15px;
  line-height: 1.35;
}
.empty-ready-copy span {
  font-size: 13px;
  line-height: 1.4;
}
.empty-car-v2 {
  width: 116px;
  height: 98px;
  bottom: 70px;
}
.empty-illustration-ground { bottom: 76px; }
.empty-illustration-plant { bottom: 78px; transform: scale(.88); }
.empty-illustration-city { inset: 68px 56px 98px; }

.account-reference-v2 {
  padding: 16px 16px 114px;
}
.account-section-title-v2 {
  margin: 16px 6px 12px;
  font-size: 15px;
  letter-spacing: .015em;
}
.account-profile-card-v2,
.account-plan-card-v2,
.account-linked-card-v2,
.account-settings-panel-v2,
.account-delete-card-v2 {
  border-radius: 18px;
}
.account-profile-card-v2 {
  padding: 16px;
  gap: 12px;
}
.account-profile-logo {
  width: 88px;
  height: 88px;
  border-radius: 18px;
}
.account-profile-copy-v2 h1 {
  font-size: 22px;
}
.account-profile-copy-v2 p {
  margin-top: 8px;
  font-size: 14px;
}
.account-verified-row {
  margin-top: 10px;
  font-size: 14px;
  gap: 7px;
}
.account-verified-row svg { width: 16px; height: 16px; }
.account-logout-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.account-logout-box svg { width: 24px; height: 24px; }

.account-plan-card-v2 {
  margin-top: 0;
  padding: 16px 18px;
}
.account-plan-main-v2 {
  grid-template-columns: minmax(0, 1fr) 1px 112px;
  gap: 16px;
}
.account-plan-copy-v2 span,
.account-plan-expire-v2 span {
  font-size: 14px;
}
.account-plan-copy-v2 b,
.account-plan-expire-v2 b {
  margin-top: 7px;
  font-size: 24px;
}
.account-plan-expire-v2 b { font-size: 20px; }
.account-plan-copy-v2 p {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.35;
}
.account-plan-divider-v2 { height: 74px; }

.account-linked-card-v2 { padding: 16px; }
.account-linked-main-v2 { gap: 12px; }
.account-linked-card-v2 .avatar,
.account-linked-card-v2 .avatar img,
.account-linked-card-v2 img.avatar {
  width: 60px;
  height: 60px;
}
.account-linked-copy-v2 h3 { font-size: 20px; }
.account-linked-meta,
.account-linked-note {
  margin-top: 8px;
  font-size: 13px;
  gap: 7px;
}
.account-linked-meta svg,
.account-linked-note svg { width: 16px; height: 16px; }
.account-disconnect-btn,
.account-connect-btn {
  min-width: 132px;
  height: 52px;
  border-radius: 14px;
  padding: 0 16px;
  font-size: 14px;
}
.account-disconnect-btn svg { width: 18px; height: 18px; }
.account-cloud-status-v2 { margin-top: 10px; font-size: 13px; }

.account-settings-row-v2 {
  min-height: 64px;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  gap: 10px;
  padding: 0 16px;
}
.account-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.account-row-icon svg { width: 23px; height: 23px; }
.account-row-label { font-size: 15px; }
.account-row-chevron svg { width: 16px; height: 16px; }

.account-delete-card-v2 {
  margin-top: 16px;
  padding: 16px;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  gap: 10px;
}
.account-delete-copy-v2 { gap: 4px; }
.account-delete-copy-v2 strong { font-size: 15px; }
.account-delete-copy-v2 small { font-size: 13px; line-height: 1.35; }
.account-app-version { margin: 12px 0 22px; font-size: 12px; }

@media (max-width: 390px) {
  .empty-ride-reference-v2 { padding: 24px 16px 18px; }
  .empty-illustration-v2 { max-width: 248px; height: 248px; }
  .empty-ride-reference-v2 h2 { font-size: 26px; }
  .empty-ride-reference-v2 p { font-size: 14px; }
  .empty-ready-card { margin-top: 24px; padding: 14px 16px; }
  .account-profile-logo { width: 74px; height: 74px; }
  .account-profile-copy-v2 h1 { font-size: 20px; }
  .account-profile-copy-v2 p { font-size: 13px; }
  .account-logout-box { width: 48px; height: 48px; }
  .account-plan-copy-v2 b { font-size: 22px; }
  .account-linked-copy-v2 h3 { font-size: 18px; }
  .account-row-label { font-size: 14px; }
}

/* ===== v1.2.45 native chat horizontal overflow fix =====
 * Tên nhóm dài không được phép làm implicit grid column lớn hơn viewport.
 * Header/list/input luôn nằm trong đúng chiều rộng màn hình iOS PWA.
 */
.app-shell.page-mode-native-chat {
  width: min(430px, 100%) !important;
  max-width: 430px !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.app-shell.page-mode-native-chat > .chat-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.app-shell.page-mode-native-chat .native-chat-header,
.app-shell.page-mode-native-chat .native-chat-list,
.app-shell.page-mode-native-chat .native-chat-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Header: 2 nút/icon cố định, tên nhóm chỉ dùng phần còn lại và ellipsis. */
.app-shell.page-mode-native-chat .native-chat-header {
  display: grid !important;
  grid-template-columns: 28px 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 10px !important;
}

.app-shell.page-mode-native-chat .native-chat-header .back-chat,
.app-shell.page-mode-native-chat .native-chat-header .avatar,
.app-shell.page-mode-native-chat .native-chat-header .tap-reply {
  min-width: 0;
  flex: none;
}

.app-shell.page-mode-native-chat .native-chat-header .native-chat-title {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.app-shell.page-mode-native-chat .native-chat-header .tap-reply {
  width: auto !important;
  max-width: 96px !important;
  white-space: nowrap !important;
  justify-self: end !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Tin nhắn không được phép tạo intrinsic width lớn hơn cột chat. */
.app-shell.page-mode-native-chat .native-chat-list > *,
.app-shell.page-mode-native-chat .bubble,
.app-shell.page-mode-native-chat .server2-own-reply-block {
  min-width: 0 !important;
  max-width: 100%;
}

.app-shell.page-mode-native-chat .bubble {
  max-width: 78% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Flex input cần min-width:0, nếu không input có thể đẩy nút Gửi ra ngoài. */
.app-shell.page-mode-native-chat .native-chat-input {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.app-shell.page-mode-native-chat .native-chat-input input {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.app-shell.page-mode-native-chat .native-chat-input #sendChatText {
  flex: 0 0 64px !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}

@media (max-width: 390px) {
  .app-shell.page-mode-native-chat .native-chat-header {
    grid-template-columns: 26px 38px minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .app-shell.page-mode-native-chat .native-chat-header .avatar {
    width: 38px !important;
    height: 38px !important;
  }

  .app-shell.page-mode-native-chat .native-chat-header .tap-reply {
    max-width: 88px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================
   WEB V2 STEP 1 - QR FIRST LOGIN
   ========================================================== */
.web-v2-qr-login {
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #eefbf3 0%, #ffffff 58%, #f7faf8 100%);
}

.web-v2-qr-card {
  width: min(100%, 430px);
  box-sizing: border-box;
  text-align: center;
  padding: 28px 22px 18px;
  border-radius: 28px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0, 104, 255, .08);
  box-shadow: 0 20px 55px rgba(30, 58, 95, .12);
}

.web-v2-qr-logo {
  width: 86px;
  height: 86px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
}

.web-v2-qr-card h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  color: #172554;
}

.web-v2-qr-subtitle {
  min-height: 42px;
  margin: 9px auto 16px;
  max-width: 330px;
  color: #64748B;
  font-size: 14px;
  line-height: 1.5;
}

.web-v2-qr-box {
  width: min(100%, 292px);
  aspect-ratio: 1;
  margin: 0 auto 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #e4eee7;
  box-shadow: inset 0 0 0 9px #f7fbf8;
  overflow: hidden;
}

.web-v2-qr-box.is-ended {
  border-style: dashed;
}

.web-v2-qr-image {
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.web-v2-qr-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.web-v2-qr-loader span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0068FF;
  animation: webV2QrPulse 1s infinite ease-in-out;
}

.web-v2-qr-loader span:nth-child(2) { animation-delay: .12s; }
.web-v2-qr-loader span:nth-child(3) { animation-delay: .24s; }

@keyframes webV2QrPulse {
  0%, 80%, 100% { transform: scale(.72); opacity: .45; }
  40% { transform: scale(1); opacity: 1; }
}

.web-v2-payment-required {
  margin: 4px 0 18px;
  padding: 22px 18px;
  border-radius: 22px;
  background: #fff7f3;
  border: 1px solid #f3ded3;
  color: #633927;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.web-v2-payment-required strong {
  font-size: 16px;
  line-height: 1.4;
}

.web-v2-payment-required span {
  font-size: 13px;
  line-height: 1.45;
  color: #856452;
}

.web-v2-payment-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 22px;
  background: #ffe7dc;
}

.web-v2-qr-retry {
  width: 100%;
  margin-top: 2px;
}


/* ===== Zcar Web V2 brand ===== */
.zcar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #0068FF;
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 1;
  user-select: none;
}
.zcar-brand-splash {
  width: 156px;
  height: 104px;
  margin: 0 auto;
  font-size: 52px;
}
.zcar-brand-qr {
  width: 86px;
  height: 86px;
  margin: 0 auto 12px;
  border-radius: 24px;
  background: #EFF6FF;
  box-shadow: 0 8px 24px rgba(0, 104, 255, .10);
  font-size: 31px;
}
.zcar-brand-account {
  flex: 0 0 98px;
  width: 98px;
  height: 98px;
  border-radius: 22px;
  background: #EFF6FF;
  box-shadow: 0 10px 20px rgba(0, 104, 255, .12);
  font-size: 30px;
}
.zcar-brand-error {
  width: 120px;
  height: 80px;
  margin: 4px auto 0;
  font-size: 38px;
}
@media (max-width: 430px) {
  .zcar-brand-account {
    flex-basis: 82px;
    width: 82px;
    height: 82px;
    font-size: 26px;
  }
}

/* ==========================================================
   ZCAR WEB V2 0.1.4 - ZALO BLUE + NEW ZCAR LOGO
   ========================================================== */
.zcar-logo {
  display: block;
  object-fit: contain;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.zcar-logo-splash {
  width: min(76vw, 270px);
  margin: 0 auto;
  filter: drop-shadow(0 12px 24px rgba(0, 50, 115, .16));
}
.zcar-logo-qr {
  width: min(82%, 280px);
  margin: 18px auto 8px;
  filter: drop-shadow(0 10px 20px rgba(0, 48, 110, .16));
}
.zcar-logo-account {
  flex: 0 0 112px;
  width: 112px;
  max-height: 72px;
  margin: 0;
  filter: drop-shadow(0 7px 12px rgba(0, 48, 110, .12));
}
.zcar-logo-error {
  width: min(74vw, 240px);
  margin: 4px auto 10px;
}

.startup-splash {
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 104, 255, .12), transparent 32%),
    linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 62%, #F5F9FF 100%);
}

.web-v2-qr-login {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 4%, rgba(0,104,255,.16), transparent 28%),
    radial-gradient(circle at 94% 12%, rgba(64,155,255,.18), transparent 30%),
    linear-gradient(180deg, #EAF4FF 0%, #F8FBFF 40%, #FFFFFF 72%, #F5F9FF 100%);
}
.web-v2-qr-login::before,
.web-v2-qr-login::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.web-v2-qr-login::before {
  width: 560px;
  height: 220px;
  left: 50%;
  top: -92px;
  transform: translateX(-50%) rotate(-5deg);
  background: linear-gradient(135deg, rgba(0,104,255,.30), rgba(76,165,255,.08));
  filter: blur(.2px);
}
.web-v2-qr-login::after {
  width: 420px;
  height: 160px;
  right: -190px;
  top: 88px;
  background: rgba(0,104,255,.08);
}

.web-v2-qr-card {
  position: relative;
  width: min(100%, 430px);
  padding: 18px 20px 16px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(233,245,255,.98) 0%, rgba(255,255,255,.99) 27%, #FFFFFF 100%);
  border: 1px solid rgba(0,104,255,.14);
  box-shadow: 0 22px 60px rgba(0, 72, 170, .15);
  overflow: hidden;
}
.web-v2-qr-card::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 145px;
  left: 50%;
  top: -58px;
  transform: translateX(-50%) rotate(-4deg);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,104,255,.20), rgba(89,176,255,.05));
  pointer-events: none;
}
.web-v2-qr-card > * {
  position: relative;
  z-index: 1;
}

.web-v2-zalo-badge {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #1684FF, #0068FF);
  box-shadow: 0 8px 18px rgba(0,104,255,.20);
  font-size: 11px;
  font-weight: 800;
}
.web-v2-zalo-badge-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255,255,255,.20);
  font-size: 12px;
}

.web-v2-qr-card h1 {
  margin: 0;
  color: #183B70;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -.02em;
}
.web-v2-qr-subtitle {
  display: none;
}
.web-v2-qr-info {
  width: min(100%, 340px);
  margin: 15px auto 16px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  color: #47658C;
  background: linear-gradient(180deg, #F7FBFF, #EFF7FF);
  border: 1px solid #BBD8FF;
  border-radius: 15px;
  font-size: 12.5px;
  line-height: 1.35;
}
.web-v2-qr-info-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0068FF;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 900;
  font-family: Georgia, serif;
}

.web-v2-qr-box {
  width: min(100%, 310px);
  aspect-ratio: 1;
  margin: 0 auto 8px;
  border-radius: 24px;
  border: 1px solid #B8D8FF;
  background: #FFFFFF;
  box-shadow:
    inset 0 0 0 9px #F4F9FF,
    0 12px 30px rgba(0,104,255,.08);
}
.web-v2-qr-box.is-ended {
  border-color: #AFCFFF;
  border-style: dashed;
}
.web-v2-qr-image {
  width: 92%;
  height: 92%;
  object-fit: contain;
  border-radius: 12px;
}
.web-v2-qr-progress {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.web-v2-qr-ring {
  width: 68px;
  height: 68px;
  margin-bottom: 22px;
  border-radius: 50%;
  border: 7px solid #CBE2FF;
  border-top-color: #0068FF;
  border-right-color: #1684FF;
  animation: zcarQrSpin .85s linear infinite;
}
@keyframes zcarQrSpin { to { transform: rotate(360deg); } }
.web-v2-qr-progress strong {
  max-width: 240px;
  color: #4A6590;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
}
.web-v2-qr-loader {
  margin-top: 18px;
  gap: 8px;
}
.web-v2-qr-loader span {
  width: 9px;
  height: 9px;
  background: #0068FF;
}
.web-v2-qr-loader span:nth-child(2) { background: #7FB8FF; }
.web-v2-qr-loader span:nth-child(3) { background: #B6D7FF; }
.web-v2-qr-status {
  min-height: 22px;
  margin: 8px auto 12px;
  color: #385987;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

.web-v2-qr-retry,
.web-v2-qr-refresh {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border: 0;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background: linear-gradient(135deg, #1684FF, #0068FF 70%, #0059DB);
  box-shadow: 0 12px 24px rgba(0,104,255,.20);
  font-size: 16px;
  font-weight: 850;
}
.web-v2-qr-retry:active,
.web-v2-qr-refresh:active {
  transform: translateY(1px);
  box-shadow: 0 7px 16px rgba(0,104,255,.18);
}
.web-v2-payment-required {
  border-color: #FFD7C5;
  box-shadow: 0 10px 26px rgba(172,79,24,.06);
}
.login-app-version {
  margin-top: 17px !important;
  color: #91A4C1 !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
}

@media (max-width: 430px) {
  .web-v2-qr-card {
    padding: 18px 18px 15px;
    border-radius: 27px;
  }
  .zcar-logo-qr {
    width: min(80%, 255px);
    margin-top: 25px;
  }
  .web-v2-qr-card h1 { font-size: 23px; }
  .web-v2-qr-box { width: min(100%, 292px); }
  .zcar-logo-account {
    flex-basis: 92px;
    width: 92px;
  }
}

@media (max-height: 740px) {
  .web-v2-qr-login { align-items: flex-start; }
  .web-v2-qr-card { margin-top: 4px; }
  .zcar-logo-qr { width: min(76%, 230px); margin-top: 20px; }
  .web-v2-qr-info { margin-top: 10px; margin-bottom: 11px; }
  .web-v2-qr-box { width: min(100%, 260px); }
  .web-v2-qr-ring { width: 58px; height: 58px; margin-bottom: 16px; }
}

/* ==========================================================
   ZCAR WEB V2 0.1.11 - SINGLE QR STARTUP FLOW
   QR gate is rendered immediately; footer must stay in card flow.
   ========================================================== */
.web-v2-qr-card .login-app-version {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100%;
  display: block;
  margin: 12px 0 0 !important;
  line-height: 1.25;
  z-index: auto;
}

/* ==========================================================
   ZCAR WEB V2 0.1.18 - QR SCREEN REFRESH
   Giao diện QR kiểu Zalo: topbar riêng, nền thành phố, QR card,
   status inline và khối mẹo bảo mật. Chỉ đổi UI, không đổi flow.
   ========================================================== */
.web-v2-qr-login-v018 {
  min-height: 100dvh;
  position: relative;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 18% 2%, rgba(0,104,255,.18), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(63,159,255,.16), transparent 30%),
    linear-gradient(180deg, #dcebff 0%, #edf6ff 20%, #f8fbff 54%, #ffffff 100%);
}
.web-v2-qr-login-v018::before {
  content:"";
  position:absolute;
  inset:84px -15% auto -15%;
  height:170px;
  border-radius:50%;
  transform:rotate(-5deg);
  background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(198,225,255,.38));
  pointer-events:none;
  z-index:0;
}
.web-v2-qr-page-v018 {
  position:relative;
  z-index:2;
  width:min(100%, 470px);
  margin:0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px 24px;
}
.web-v2-qr-topbar-v018 {
  min-height:64px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:4;
}
.web-v2-qr-topbar-v018 h1 {
  margin:0;
  text-align:center;
  white-space:nowrap;
  color:#0d2c60;
  font-size:21px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.02em;
}
.web-v2-qr-back-v018 {
  width:46px;
  height:46px;
  border:1px solid rgba(0,104,255,.10);
  border-radius:15px;
  display:grid;
  place-items:center;
  color:#11386e;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 20px rgba(8,67,145,.10);
  font-size:27px;
  font-weight:700;
  line-height:1;
}
.web-v2-zalo-badge-v018 {
  position:static;
  min-height:42px;
  padding:7px 12px;
  color:#0871ef;
  background:rgba(255,255,255,.90);
  border:1.5px solid #65aaff;
  box-shadow:0 8px 18px rgba(0,104,255,.09);
  font-size:12px;
  font-weight:850;
}
.web-v2-zalo-badge-v018 .web-v2-zalo-badge-icon {
  width:21px;
  height:21px;
  color:#fff;
  background:#1684ff;
  border-radius:50%;
}
.web-v2-qr-brand-v018 {
  position:relative;
  z-index:3;
  height:245px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:18px;
}
.web-v2-qr-logo-v018 {
  width:min(68vw, 245px);
  max-height:135px;
  margin:0 auto;
  object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(8,51,116,.13));
}
.web-v2-qr-skyline {
  position:absolute;
  z-index:1;
  left:50%;
  top:142px;
  width:min(100%, 560px);
  height:220px;
  transform:translateX(-50%);
  pointer-events:none;
  overflow:hidden;
  opacity:.86;
}
.web-v2-qr-skyline::after {
  content:"";
  position:absolute;
  left:-5%; right:-5%; bottom:-12px;
  height:78px;
  border-radius:50% 50% 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.92));
}
.web-v2-qr-skyline .building {
  position:absolute;
  bottom:26px;
  width:38px;
  border-radius:7px 7px 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.34) 8px 11px),
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(255,255,255,.28) 12px 15px),
    linear-gradient(180deg, #8fc5fb 0%, #d8ebff 100%);
  box-shadow:0 0 18px rgba(68,143,229,.10);
}
.web-v2-qr-skyline .building::before {
  content:"";
  position:absolute;
  left:50%; top:-16px;
  width:3px; height:16px;
  transform:translateX(-50%);
  background:#9acafa;
  border-radius:3px;
}
.web-v2-qr-skyline .b1{left:6%;height:82px;width:30px}.web-v2-qr-skyline .b2{left:16%;height:126px;width:42px}
.web-v2-qr-skyline .b3{left:28%;height:94px;width:34px}.web-v2-qr-skyline .b4{left:39%;height:148px;width:52px}
.web-v2-qr-skyline .b5{left:53%;height:166px;width:46px}.web-v2-qr-skyline .b6{left:65%;height:112px;width:38px}
.web-v2-qr-skyline .b7{left:75%;height:138px;width:44px}.web-v2-qr-skyline .b8{left:86%;height:86px;width:34px}
.web-v2-qr-skyline .b9{left:94%;height:116px;width:32px}
.web-v2-qr-cloud {
  position:absolute;
  width:54px;
  height:20px;
  border-radius:999px;
  background:rgba(142,198,255,.50);
}
.web-v2-qr-cloud::before,.web-v2-qr-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.web-v2-qr-cloud::before{width:27px;height:27px;left:8px;top:-12px}.web-v2-qr-cloud::after{width:34px;height:34px;right:5px;top:-16px}
.web-v2-qr-cloud.cloud-a{left:32%;top:28px}.web-v2-qr-cloud.cloud-b{right:20%;top:46px;transform:scale(.8)}

.web-v2-qr-info-v018 {
  position:relative;
  z-index:4;
  width:calc(100% - 18px);
  max-width:390px;
  min-height:78px;
  margin:0 auto 18px;
  padding:15px 17px;
  gap:14px;
  color:#183963;
  background:rgba(255,255,255,.72);
  border:1.5px solid #91c4ff;
  border-radius:20px;
  box-shadow:0 8px 22px rgba(0,104,255,.05);
  backdrop-filter:blur(9px);
  font-size:15px;
  font-weight:700;
  line-height:1.42;
}
.web-v2-qr-info-v018 .web-v2-qr-info-icon {
  flex:0 0 38px;
  width:38px;
  height:38px;
  font-size:23px;
  box-shadow:0 7px 16px rgba(0,104,255,.18);
}
.web-v2-qr-panel-v018 {
  width:calc(100% - 14px);
  max-width:396px;
  margin:0 auto;
  padding:18px 16px 16px;
  border-radius:26px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(0,104,255,.13);
  box-shadow:0 18px 42px rgba(11,71,154,.11);
}
.web-v2-qr-panel-v018 .web-v2-qr-box {
  width:min(100%, 310px);
  margin:0 auto;
  border-radius:24px;
  box-shadow:inset 0 0 0 9px #f4f9ff;
}
.web-v2-qr-status-row-v018 {
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  padding:8px 3px 2px;
  color:#7588a4;
  font-size:14px;
  font-weight:700;
  text-align:center;
}
.web-v2-qr-status-row-v018 button {
  border:0;
  padding:4px 2px;
  color:#0874ef;
  background:transparent;
  font-size:14px;
  font-weight:850;
}
.web-v2-qr-panel-v018 .web-v2-qr-refresh,
.web-v2-qr-panel-v018 .web-v2-qr-retry {
  min-height:55px;
  margin-top:10px;
  border-radius:17px;
  font-size:18px;
}
.web-v2-qr-panel-v018 .login-app-version {
  margin:13px 0 0;
  color:#8797af;
  font-size:13px;
  font-weight:650;
}
.web-v2-qr-security-v018 {
  width:calc(100% - 14px);
  max-width:396px;
  min-height:96px;
  margin:18px auto 0;
  padding:16px 18px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  border-radius:22px;
  color:#15345e;
  background:rgba(255,255,255,.72);
  border:1px solid #c6e0ff;
  box-shadow:0 10px 26px rgba(8,67,145,.05);
}
.web-v2-qr-security-icon-v018 {
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg,#4aa2ff,#0068ff);
  box-shadow:0 9px 18px rgba(0,104,255,.18);
  font-size:22px;
  font-weight:950;
}
.web-v2-qr-security-v018 strong{display:block;margin:1px 0 5px;font-size:16px;font-weight:900}
.web-v2-qr-security-v018 p{margin:0;color:#687c98;font-size:14px;line-height:1.5}
.web-v2-payment-required-v018{width:calc(100% - 14px);max-width:396px;margin:28px auto 0}

@media (max-width: 390px) {
  .web-v2-qr-page-v018{padding-left:11px;padding-right:11px}
  .web-v2-qr-topbar-v018{grid-template-columns:44px minmax(0,1fr) auto;gap:7px}
  .web-v2-qr-topbar-v018 h1{font-size:18px}
  .web-v2-qr-back-v018{width:42px;height:42px;font-size:24px}
  .web-v2-zalo-badge-v018{padding:6px 9px;font-size:11px}
  .web-v2-qr-brand-v018{height:225px;padding-bottom:12px}
  .web-v2-qr-logo-v018{width:min(64vw,220px)}
  .web-v2-qr-info-v018{font-size:14px;min-height:72px}
  .web-v2-qr-panel-v018{padding:15px 13px 14px}
  .web-v2-qr-panel-v018 .web-v2-qr-box{width:min(100%,286px)}
}

@media (min-width: 650px) {
  .web-v2-qr-page-v018{padding-top:22px}
  .web-v2-qr-brand-v018{height:260px}
}

/* ==========================================================
   ZCAR WEB V2 0.1.19 - COMPACT QR SCREEN
   Thu gọn theo tỷ lệ màn tham chiếu: vừa một màn iPhone,
   không đổi logic QR/Firebase/session restore.
   ========================================================== */
.web-v2-qr-page-v018 {
  width: min(100%, 430px);
  padding: 4px 10px 18px;
}

.web-v2-qr-topbar-v018 {
  min-height: 46px;
  grid-template-columns: 38px minmax(0,1fr) 104px;
  gap: 7px;
}
.web-v2-qr-topbar-v018 h1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15.5px;
  letter-spacing: -.025em;
}
.web-v2-qr-back-v018 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 23px;
  box-shadow: 0 5px 13px rgba(8,67,145,.09);
}
.web-v2-zalo-badge-v018 {
  min-width: 104px;
  min-height: 36px;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  font-size: 10.5px;
  white-space: nowrap;
}
.web-v2-zalo-badge-v018 .web-v2-zalo-badge-icon {
  width: 18px;
  height: 18px;
  font-size: 11px;
}

.web-v2-qr-brand-v018 {
  height: 156px;
  padding-bottom: 8px;
}
.web-v2-qr-logo-v018 {
  width: min(38vw, 138px);
  max-height: 82px;
  filter: drop-shadow(0 8px 13px rgba(8,51,116,.11));
}
.web-v2-qr-skyline {
  top: 104px;
  width: min(100%, 470px);
  height: 170px;
  opacity: .72;
}
.web-v2-qr-skyline::after {
  height: 58px;
}
.web-v2-qr-skyline .building {
  bottom: 20px;
  transform-origin: bottom center;
  transform: scale(.76);
}
.web-v2-qr-cloud {
  transform: scale(.76);
}
.web-v2-qr-cloud.cloud-b {
  transform: scale(.62);
}

.web-v2-qr-info-v018 {
  width: min(calc(100% - 18px), 304px);
  min-height: 62px;
  margin: 0 auto 12px;
  padding: 10px 12px;
  gap: 10px;
  border-radius: 16px;
  font-size: 12.5px;
  line-height: 1.38;
}
.web-v2-qr-info-v018 .web-v2-qr-info-icon {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  font-size: 20px;
}

.web-v2-qr-panel-v018 {
  width: min(calc(100% - 14px), 310px);
  padding: 12px 11px 12px;
  border-radius: 22px;
  box-shadow: 0 13px 30px rgba(11,71,154,.09);
}
.web-v2-qr-panel-v018 .web-v2-qr-box {
  width: min(100%, 250px);
  border-radius: 20px;
  box-shadow: inset 0 0 0 7px #f4f9ff;
}
.web-v2-qr-image {
  width: 92%;
  height: 92%;
  border-radius: 10px;
}
.web-v2-qr-status-row-v018 {
  min-height: 32px;
  gap: 6px;
  padding: 5px 2px 0;
  font-size: 12.5px;
}
.web-v2-qr-status-row-v018 button {
  padding: 3px 1px;
  font-size: 12.5px;
}
.web-v2-qr-panel-v018 .web-v2-qr-refresh,
.web-v2-qr-panel-v018 .web-v2-qr-retry {
  min-height: 47px;
  margin-top: 7px;
  border-radius: 15px;
  font-size: 16px;
}
.web-v2-qr-panel-v018 .login-app-version {
  margin: 9px 0 0 !important;
  font-size: 11.5px !important;
}

.web-v2-qr-security-v018 {
  width: min(calc(100% - 14px), 310px);
  min-height: 88px;
  margin: 13px auto 0;
  padding: 13px 14px;
  gap: 11px;
  border-radius: 18px;
}
.web-v2-qr-security-icon-v018 {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  font-size: 19px;
}
.web-v2-qr-security-v018 strong {
  margin: 0 0 4px;
  font-size: 14px;
}
.web-v2-qr-security-v018 p {
  font-size: 12.2px;
  line-height: 1.42;
}

.web-v2-payment-required-v018 {
  width: min(calc(100% - 14px), 310px);
  margin-top: 18px;
}

@media (max-width: 390px) {
  .web-v2-qr-page-v018 {
    padding: 3px 8px 16px;
  }
  .web-v2-qr-topbar-v018 {
    grid-template-columns: 36px minmax(0,1fr) 100px;
    min-height: 44px;
    gap: 5px;
  }
  .web-v2-qr-topbar-v018 h1 { font-size: 14.5px; }
  .web-v2-qr-back-v018 { width: 36px; height: 36px; font-size: 22px; }
  .web-v2-zalo-badge-v018 { min-width: 100px; min-height: 34px; padding: 4px 7px; font-size: 10px; }
  .web-v2-qr-brand-v018 { height: 150px; padding-bottom: 7px; }
  .web-v2-qr-logo-v018 { width: min(39vw, 132px); }
  .web-v2-qr-info-v018 { width: min(calc(100% - 16px), 300px); min-height: 60px; font-size: 12px; }
  .web-v2-qr-panel-v018 { width: min(calc(100% - 12px), 304px); padding: 11px 10px; }
  .web-v2-qr-panel-v018 .web-v2-qr-box { width: min(100%, 246px); }
  .web-v2-qr-security-v018 { width: min(calc(100% - 12px), 304px); }
}

@media (max-height: 760px) {
  .web-v2-qr-brand-v018 { height: 135px; }
  .web-v2-qr-logo-v018 { width: min(36vw, 122px); }
  .web-v2-qr-info-v018 { min-height: 56px; margin-bottom: 9px; padding-top: 8px; padding-bottom: 8px; }
  .web-v2-qr-panel-v018 .web-v2-qr-box { width: min(100%, 226px); }
  .web-v2-qr-security-v018 { min-height: 78px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}

/* ZCAR 0.1.21 - Zalo Blue Theme
   Chuẩn hóa toàn bộ trạng thái/tương tác xanh lá cũ sang xanh Zalo. */
:root {
  --zcar-blue: #0068FF;
  --zcar-blue-dark: #0057D9;
  --zcar-blue-soft: #EAF3FF;
  --zcar-blue-soft-2: #F4F8FF;
  --zcar-blue-border: #BFD8FF;
}
.settings-reference-v38 .settings-switch.on,
.settings-reference-v38 .theme-switch.on,
.switch.on { background: var(--zcar-blue) !important; }
.settings-reference-v38 .keyword-icon-filter,
.settings-reference-v38 .keyword-actions-v2 .circle-add,
.settings-reference-v38 .keyword-chip-v2,
.settings-reference-v38 .keyword-chip-v2 button,
.settings-reference-v38 .text-soft,
.settings-reference-v38 .robot-soft,
.settings-reference-v38 .settings-action-pill.green,
.account-row-icon.green,
.auto-pair-card-status.active,
.zalo-status.connected { color: var(--zcar-blue) !important; }
.settings-reference-v38 .keyword-icon-filter,
.settings-reference-v38 .keyword-actions-v2 .circle-add,
.settings-reference-v38 .keyword-chip-v2,
.settings-reference-v38 .text-soft,
.settings-reference-v38 .robot-soft,
.settings-reference-v38 .settings-action-pill.green { background: var(--zcar-blue-soft) !important; }
.settings-reference-v38 .settings-range-row .range, .check, .check-row input, .radio-row input { accent-color: var(--zcar-blue) !important; }
.keyword-actions-v2 .circle-add, .multi-ride-item button, .accept-btn, .primary-btn, .small-btn { background-color: var(--zcar-blue); }
.keyword-actions-v2 .circle-add { background-image: linear-gradient(145deg, #0A7CFF, #0057D9) !important; }
.keyword-chip-v2 { border-color: var(--zcar-blue-border); background: var(--zcar-blue-soft-2); color: #1D4ED8; }
.keyword-chip-v2 button { color: #1D4ED8; }
.auto-test-result.ok, .multi-ride-item.matched { background: var(--zcar-blue-soft); border-color: var(--zcar-blue-border); color: #1D4ED8; }
.auto-ride-section-icon.list { color: #2563EB; background: #EEF4FF; }
body.dark .bubble.me { background: #1E3A5F; }
body.dark .group-search-input:focus { border-color: rgba(96, 165, 250, .55); box-shadow: 0 0 0 3px rgba(96, 165, 250, .10); }


/* ==========================================================
   ZCAR WEB V2 0.1.23 - NAV REWORK + AUTO TAB
   - Bỏ tab Tài khoản, gộp phần tài khoản vào đầu Cài đặt.
   - Thêm tab Auto riêng cạnh Nhóm.
   - Cấu hình Auto hiển thị trực tiếp như một trang, không còn mở từ Cài đặt.
   ========================================================== */

.settings-page-v2 {
  background:
    radial-gradient(circle at top left, rgba(0, 104, 255, .09), transparent 34%),
    #F5F9FF !important;
}

.settings-account-summary {
  display: grid;
  gap: 14px;
  margin: 0 0 8px;
}
.settings-account-summary .account-plan-card-v2,
.settings-account-summary .account-linked-card-v2 {
  margin: 0 !important;
}
.settings-linked-title {
  margin: 8px 2px 0 !important;
  font-size: 19px !important;
  letter-spacing: .1px;
}
.settings-header-v2 {
  margin-top: 10px;
}
.settings-account-tools-wrap {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
.settings-account-tools-title {
  margin: 8px 2px 0 !important;
  font-size: 18px !important;
}
.settings-account-tools-card,
.settings-account-delete {
  margin: 0 !important;
}
.settings-app-version {
  margin: 2px 0 0 !important;
}

/* Auto là một trang thực sự, dùng cùng ngôn ngữ thiết kế xanh Zalo. */
.auto-page-v1 {
  min-height: 100%;
  padding: 18px 16px 124px;
  background:
    radial-gradient(circle at top left, rgba(0, 104, 255, .10), transparent 34%),
    #F5F9FF;
  overflow-x: hidden;
}
.auto-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 0 2px 14px;
}
.auto-page-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #0068FF;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .12em;
}
.auto-page-header h1 {
  margin: 0;
  color: #0F172A;
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.7px;
}
.auto-page-header p {
  margin: 8px 0 0;
  color: #64748B;
  font-size: 13px;
  line-height: 1.4;
}
.auto-page-master {
  min-width: 142px;
  padding: 10px 11px;
  border: 1px solid #D9E7FB;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}
.auto-page-master.ready {
  border-color: #BFD8FF;
  background: #F3F8FF;
}
.auto-page-master.preparing {
  border-color: #F9DFA6;
  background: #FFFBF1;
}
.auto-page-master-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.auto-page-master-copy strong {
  color: #0F172A;
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 900;
  white-space: nowrap;
}
.auto-page-master-copy small {
  color: #64748B;
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
}

.auto-page .auto-config-modal.auto-config-native-order.auto-page-config {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid #E0EAF7 !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 12px 32px rgba(15,23,42,.07) !important;
  overflow: visible !important;
}
.auto-page .auto-config-native-order .auto-scroll-area {
  flex: none !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 10px !important;
}
.auto-page .auto-ride-mode-grid {
  margin-top: 0 !important;
}
.auto-page .auto-multi-toggle-row {
  margin-bottom: 13px !important;
}
.auto-page .auto-page-footer {
  margin-top: 2px;
}
.auto-page .auto-dialog-footer-native.auto-page-footer {
  padding-bottom: 0 !important;
}
.auto-page .auto-dialog-footer-native.auto-page-footer .auto-footer-btn.groups {
  width: 100%;
}

/* Nút Auto trên header Canh Cuốc chỉ còn là đường tắt sang tab Auto. */
.page-mode-rides .auto-pill {
  cursor: pointer;
}

/* Dark mode cho trang mới. */
body.dark .auto-page-v1,
body.dark .settings-page-v2 {
  background:
    radial-gradient(circle at top left, rgba(0, 104, 255, .16), transparent 34%),
    #0B1220 !important;
}
body.dark .auto-page-header h1,
body.dark .auto-page-master-copy strong {
  color: #F8FAFC;
}
body.dark .auto-page-header p,
body.dark .auto-page-master-copy small {
  color: #AAB7CC;
}
body.dark .auto-page-master,
body.dark .auto-page .auto-config-modal.auto-config-native-order.auto-page-config {
  background: #111A2B !important;
  border-color: #263653 !important;
}
body.dark .auto-page-master.ready {
  background: #102345 !important;
  border-color: #275B9E !important;
}
body.dark .auto-page-master.preparing {
  background: #2B2413 !important;
  border-color: #725B22 !important;
}

@media (max-width: 390px) {
  .settings-page-v2 {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .auto-page-v1 {
    padding-left: 12px;
    padding-right: 12px;
  }
  .auto-page-header {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .auto-page-master {
    width: 100%;
    min-width: 0;
  }
  .auto-page-master-copy strong { font-size: 13px; }
  .auto-page-master-copy small { font-size: 11px; }
  .auto-page .auto-config-modal.auto-config-native-order.auto-page-config {
    padding: 13px !important;
    border-radius: 19px !important;
  }
}


/* =========================================================
 * ZCAR WEB V2 0.1.28 - GROUP DUAL SELECT (CANH / AUTO)
 * Chọn nhóm Canh Cuốc và Auto ngay tại tab Nhóm.
 * ========================================================= */
.native-group-row .group-select-actions {
  flex: 0 0 94px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 7px;
  margin-left: 2px;
}

.native-group-row .group-select-option {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.native-group-row .group-select-option span {
  color: #64748B;
  font-size: 9.5px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.01em;
}

.native-group-row .group-mode-check {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #0068FF;
  cursor: pointer;
}

.native-group-row .group-select-option.auto span {
  color: #0068FF;
}

/* Auto không còn màn Chọn nhóm riêng; nút Lưu chiếm trọn hàng. */
.auto-ride-footer-top.single-action {
  grid-template-columns: 1fr !important;
}

.auto-dialog-footer-close-only {
  justify-content: flex-end !important;
}

@media (max-width: 390px) {
  .native-group-row {
    gap: 9px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .native-group-row .group-select-actions {
    flex-basis: 86px;
    gap: 5px;
  }
  .native-group-row .group-mode-check {
    width: 22px;
    height: 22px;
  }
  .native-group-row .group-select-option span {
    font-size: 9px;
  }
}

body.dark .native-group-row .group-select-option span {
  color: #94A3B8;
}
body.dark .native-group-row .group-select-option.auto span {
  color: #60A5FA;
}


/* ===== Zcar 0.1.33 · PWA scroll stability ===== */
.app-shell.page-mode-rides .ride-list,
.app-shell.page-mode-messages .message-list-container,
.app-shell.page-mode-native-chat .native-chat-list {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: scroll-position;
}
.app-shell.page-mode-messages .native-group-row,
.app-shell.page-mode-native-chat .bubble,
.app-shell.page-mode-rides .ride-card {
  contain: layout paint style;
}

/* ===== Zcar 0.1.34 · Canh Cuốc pending-new indicator ===== */
.app-shell.page-mode-rides > .rides-page {
  position: relative;
}
.app-shell.page-mode-rides .ride-new-indicator {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 24;
  min-height: 36px;
  max-width: calc(100% - 40px);
  padding: 8px 16px;
  border: 1px solid rgba(0, 104, 255, 0.18);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.16);
  color: #0068ff;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
  touch-action: manipulation;
}
.app-shell.page-mode-rides .ride-new-indicator:active {
  transform: translateX(-50%) scale(0.98);
}
body.dark .app-shell.page-mode-rides .ride-new-indicator {
  background: #182235;
  border-color: rgba(96, 165, 250, 0.28);
  color: #60a5fa;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
}


/* ===== Zcar 0.1.36 · Canh Cuốc inertial-scroll smoothness ===== */
.app-shell.page-mode-rides .ride-list {
  /* JS tự neo viewport khi prepend; tắt browser scroll anchoring để tránh
     WebKit vừa tự bù offset vừa bị JS bù lần hai gây rung/giật. */
  overflow-anchor: none;
  touch-action: pan-y;
}
.app-shell.page-mode-rides .ride-card {
  overflow-anchor: none;
}


/* ===== Zcar 0.1.44 · System maintenance screen ===== */
body.zcar-maintenance-active {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.zcar-maintenance-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  overflow: auto;
  background:
    radial-gradient(circle at 12% 4%, rgba(0,104,255,.18), transparent 30%),
    radial-gradient(circle at 92% 20%, rgba(57,164,255,.13), transparent 28%),
    linear-gradient(180deg,#edf6ff 0%,#f8fbff 52%,#eef6ff 100%);
  color: #102a43;
}
.zcar-maintenance-card {
  width: min(520px, 100%);
  padding: 28px 24px 24px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 28px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 22px 65px rgba(18,82,148,.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.zcar-maintenance-logo { width: 120px; height: auto; display: block; margin: 0 auto 14px; }
.zcar-maintenance-icon {
  width: 58px; height: 58px; margin: 0 auto 13px; border-radius: 18px;
  display: grid; place-items: center; font-size: 31px; line-height: 1;
  color: #0068ff; background: #eaf4ff; border: 1px solid #cde3ff;
}
.zcar-maintenance-kicker { margin: 0 0 7px; color: #0068ff; font-size: 11px; font-weight: 900; letter-spacing: .11em; }
.zcar-maintenance-card h1 { margin: 0; font-size: clamp(25px, 7vw, 34px); line-height: 1.12; letter-spacing: -.025em; }
.zcar-maintenance-message { margin: 12px auto 18px; max-width: 420px; color: #64748b; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.zcar-maintenance-times { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 6px; }
.zcar-maintenance-times > div { padding: 12px; border: 1px solid #dceafa; border-radius: 15px; background: #f8fbff; text-align: left; }
.zcar-maintenance-times span,.zcar-maintenance-countdown-wrap span { display: block; color: #7890a8; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.zcar-maintenance-times strong { display: block; margin-top: 5px; color: #183b56; font-size: 13px; line-height: 1.35; }
.zcar-maintenance-countdown-wrap { margin-top: 10px; padding: 15px; border-radius: 17px; background: linear-gradient(135deg,#0068ff,#1687ff); color: white; }
.zcar-maintenance-countdown-wrap span { color: rgba(255,255,255,.8); }
.zcar-maintenance-countdown-wrap strong { display: block; margin-top: 5px; font-size: 27px; letter-spacing: .025em; font-variant-numeric: tabular-nums; }
.zcar-maintenance-note { margin: 14px 4px 0; color: #7890a8; font-size: 11.5px; line-height: 1.5; }
@media (max-width: 420px) {
  .zcar-maintenance-card { padding: 23px 17px 20px; border-radius: 24px; }
  .zcar-maintenance-logo { width: 106px; }
  .zcar-maintenance-times { grid-template-columns: 1fr; }
}


/* 0.1.57 - Auto Test Explain */
.auto-test-result-title {
  display: block;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
}
.auto-test-result .auto-test-reason {
  margin: 5px 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #64748B;
}
.auto-test-detail-grid {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}
.auto-test-detail-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .20);
  font-size: 13px;
}
.auto-test-detail-row:last-child { border-bottom: 0; }
.auto-test-detail-row > span {
  color: #64748B;
  font-weight: 700;
}
.auto-test-detail-row > strong {
  color: #0F172A;
  font-weight: 800;
  text-align: left;
  overflow-wrap: anywhere;
}
.auto-test-detail-row > strong em {
  font-style: normal;
  white-space: nowrap;
}
.auto-test-detail-row.fail > strong { color: #B42318; }
.auto-test-understand {
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 10px;
  background: rgba(255,255,255,.62);
  border: 1px dashed rgba(148, 163, 184, .45);
}
.auto-test-understand-title {
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 6px;
}
.auto-test-understand ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.auto-test-understand li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  padding: 3px 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.4;
}
.auto-test-understand code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(226,232,240,.75);
  color: #0F172A;
  font-family: inherit;
  font-weight: 900;
}
.auto-test-multi-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}
.auto-test-multi-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  padding: 8px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,.7);
}
.auto-test-multi-row span { text-align: right; font-size: 12px; font-weight: 800; }
.auto-test-multi-row small { grid-column: 1 / -1; color: #64748B; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .auto-test-detail-row { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 7px 9px; }
  .auto-test-understand li { grid-template-columns: 1fr; gap: 1px; }
}


/* ===== Zcar Web V2 0.1.58 — Account blocked gate ===== */
.web-v2-blocked-page{min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:linear-gradient(180deg,#eef6ff 0%,#f7fbff 48%,#eef4fb 100%)}
.web-v2-blocked-card{width:min(430px,100%);background:#fff;border:1px solid #d9e8f8;border-radius:26px;padding:28px 22px;text-align:center;box-shadow:0 20px 55px rgba(20,70,120,.13)}
.web-v2-blocked-logo{width:150px;max-width:48%;height:auto;margin:0 auto 10px;display:block}
.web-v2-blocked-icon{width:68px;height:68px;margin:8px auto 14px;border-radius:22px;display:grid;place-items:center;font-size:34px;background:#fff0f0;border:1px solid #ffd1d1}
.web-v2-blocked-card h1{margin:0;color:#b4232c;font-size:26px;line-height:1.2}
.web-v2-blocked-card>p{margin:12px auto 0;color:#52677c;line-height:1.6;font-size:14px;max-width:360px}
.web-v2-blocked-uid{margin:18px 0 0;padding:12px 14px;border-radius:15px;background:#f6f9fc;border:1px solid #e0eaf4;text-align:left}
.web-v2-blocked-uid span{display:block;color:#7b8da0;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.web-v2-blocked-uid strong{display:block;margin-top:4px;color:#17324d;font-size:14px;word-break:break-all}
.web-v2-blocked-note{margin:12px 0 16px;padding:10px 12px;border-radius:13px;background:#fff7e8;border:1px solid #f7dca7;color:#87570c;font-size:12px;font-weight:700;line-height:1.5}
#webV2BlockedRecheck{width:100%;border:0;border-radius:15px;padding:13px 14px;background:#0068ff;color:#fff;font-weight:850;cursor:pointer;box-shadow:0 10px 24px rgba(0,104,255,.2)}
.web-v2-blocked-card .login-app-version{margin-top:16px;color:#91a3b4;font-size:11px}


/* ===== Zcar 0.1.72 · Ping máy chủ giống GoDriver ===== */
.server-ping-header-chip {
  width: 122px;
  min-width: 122px;
  max-width: 122px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
  color: #64748B;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.server-ping-header-chip .server-ping-dot-indicator {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,.72);
  transition: opacity .18s ease, transform .18s ease;
}
.server-ping-header-chip .server-ping-header-text {
  color: currentColor;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.server-ping-header-chip.good,
.server-ping-header-chip.connected-flash { color: #16A34A; }
.server-ping-header-chip.fair,
.server-ping-header-chip.reconnecting,
.server-ping-header-chip.measuring { color: #B7791F; }
.server-ping-header-chip.poor,
.server-ping-header-chip.offline { color: #DC2626; }
.server-ping-header-chip.reconnecting .server-ping-dot-indicator,
.server-ping-header-chip.measuring .server-ping-dot-indicator {
  opacity: .82;
  animation: zcarServerPingPulse 1s ease-in-out infinite alternate;
}
.server-ping-header-chip.reconnecting .server-ping-header-text,
.server-ping-header-chip.offline .server-ping-header-text {
  font-size: 11.5px;
}
@keyframes zcarServerPingPulse {
  from { opacity: .25; }
  to { opacity: 1; }
}
body.dark .server-ping-header-chip.good,
body.dark .server-ping-header-chip.connected-flash { color: #4ADE80; }
body.dark .server-ping-header-chip.fair,
body.dark .server-ping-header-chip.reconnecting,
body.dark .server-ping-header-chip.measuring { color: #FACC15; }
body.dark .server-ping-header-chip.poor,
body.dark .server-ping-header-chip.offline { color: #F87171; }
body.dark .server-ping-header-chip .server-ping-dot-indicator {
  box-shadow: 0 0 0 2px rgba(15,23,42,.72);
}
@media (max-width: 374px) {
  .server-ping-header-chip {
    width: 99px;
    min-width: 99px;
    max-width: 99px;
    padding-left: 9px;
    padding-right: 9px;
    gap: 6px;
  }
  .server-ping-header-chip .server-ping-header-text { font-size: 12.5px; }
  .server-ping-header-chip.reconnecting .server-ping-header-text,
  .server-ping-header-chip.offline .server-ping-header-text { font-size: 10.5px; }
}

/* ZCAR REFERRAL V1 · 0.1.78 */
.settings-referral-card {
  margin-top: 16px;
  padding: 21px 22px 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.settings-referral-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.settings-referral-copy { min-width:0; display:flex; flex-direction:column; gap:6px; }
.settings-referral-label { color:var(--muted, #667085); font-size:15px; font-weight:650; line-height:1.3; }
.settings-referral-code { color:#0b6cff; font-size:28px; line-height:1.05; letter-spacing:.8px; overflow-wrap:anywhere; }
.settings-referral-copy-btn {
  flex:0 0 auto; border:0; border-radius:16px; padding:12px 16px; background:#eaf3ff; color:#0868f7;
  font:inherit; font-weight:800; cursor:pointer;
}
.settings-referral-copy-btn:disabled { opacity:.55; cursor:default; }
.settings-referral-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:15px; color:#667085; font-size:14px; }
.settings-referral-meta b { color:#172033; font-weight:800; }
.settings-referral-meta i { width:4px; height:4px; border-radius:50%; background:#b7c1d1; }
.settings-referral-parent { margin-top:10px; padding-top:10px; border-top:1px solid rgba(120,135,160,.16); color:#7a8496; font-size:13px; }
.settings-referral-parent b { color:#3d485b; }
.referral-details-modal { min-width:0; }
.referral-modal-head { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.referral-modal-kicker { display:block; margin-bottom:4px; color:#778195; font-size:13px; font-weight:700; }
.referral-modal-head h2 { margin:0; color:#0b6cff; letter-spacing:.5px; }
.referral-modal-copy { border:0; border-radius:14px; padding:10px 13px; background:#eaf3ff; color:#0868f7; font-weight:800; }
.referral-modal-desc { margin:14px 0; color:#697386; line-height:1.45; font-size:14px; }
.referral-modal-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0 18px; }
.referral-modal-stats > div { border-radius:14px; background:#f5f8fd; padding:11px 8px; text-align:center; }
.referral-modal-stats b { display:block; color:#111a2c; font-size:20px; }
.referral-modal-stats span { display:block; margin-top:3px; color:#798397; font-size:11px; line-height:1.25; }
.referral-list-title { margin:0 0 8px; color:#202a3b; font-weight:850; font-size:15px; }
.referral-detail-list { max-height:min(42vh, 420px); overflow:auto; border-top:1px solid rgba(120,135,160,.16); }
.referral-detail-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid rgba(120,135,160,.14); }
.referral-detail-person { min-width:0; display:flex; flex-direction:column; gap:4px; }
.referral-detail-person b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#172033; }
.referral-detail-person small { color:#8a94a6; font-size:11px; }
.referral-detail-status { flex:0 0 auto; max-width:48%; border-radius:999px; padding:6px 9px; font-size:11px; font-weight:800; text-align:center; }
.referral-detail-status.rewarded { color:#087a42; background:#e8f8ef; }
.referral-detail-status.paid { color:#0b6cff; background:#eaf3ff; }
.referral-detail-status.pending { color:#8a6410; background:#fff6d9; }
.referral-empty { padding:20px 6px; color:#8a94a6; text-align:center; font-size:13px; }
body.dark-mode .settings-referral-copy-btn,
body.dark .settings-referral-copy-btn,
.dark-mode .settings-referral-copy-btn { background:rgba(28,111,255,.18); color:#70a8ff; }
body.dark-mode .settings-referral-code,
body.dark .settings-referral-code,
.dark-mode .settings-referral-code { color:#70a8ff; }
body.dark-mode .settings-referral-meta b,
body.dark .settings-referral-meta b,
.dark-mode .settings-referral-meta b,
body.dark-mode .referral-detail-person b,
body.dark .referral-detail-person b,
.dark-mode .referral-detail-person b { color:#f3f6fb; }
body.dark-mode .referral-modal-stats > div,
body.dark .referral-modal-stats > div,
.dark-mode .referral-modal-stats > div { background:rgba(255,255,255,.06); }
body.dark-mode .referral-modal-stats b,
body.dark .referral-modal-stats b,
.dark-mode .referral-modal-stats b,
body.dark-mode .referral-list-title,
body.dark .referral-list-title,
.dark-mode .referral-list-title { color:#f3f6fb; }
@media (max-width:420px) {
  .settings-referral-card { padding:18px; }
  .settings-referral-code { font-size:25px; }
  .settings-referral-copy-btn { padding:10px 12px; }
  .referral-modal-stats { gap:5px; }
}


/* ZCAR REFERRAL EXPERIENCE · 0.1.79 */
.referral-card-v079 {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 17px 18px 15px;
  cursor: default;
  border-color: rgba(0,104,255,.66);
  box-shadow: 0 9px 28px rgba(43,112,210,.08);
  background:
    radial-gradient(circle at 91% 10%, rgba(77,158,255,.18), transparent 31%),
    linear-gradient(135deg, #ffffff 0%, #f5faff 56%, #edf6ff 100%);
}
.referral-card-v079::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -46px;
  top: -54px;
  border-radius: 50%;
  background: rgba(0,104,255,.055);
  pointer-events: none;
}
.referral-card-main {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 58px;
  gap: 10px;
  align-items: center;
}
.referral-card-users {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #0874ff;
}
.referral-card-users svg {
  width: 31px;
  height: 31px;
  fill: currentColor;
}
.referral-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.referral-card-v079 .settings-referral-label {
  color: #52617a;
  font-size: 15px;
  font-weight: 800;
}
.referral-card-v079 .settings-referral-code {
  display: block;
  max-width: 100%;
  color: #0668f7;
  font-size: clamp(24px, 7vw, 31px);
  line-height: 1;
  letter-spacing: .4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.referral-card-gift {
  position: relative;
  width: 56px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #0c6ef6;
  background: linear-gradient(145deg,#fff1b9,#ffffff 49%,#dcebff 100%);
  box-shadow: inset 0 0 0 1px rgba(255,183,0,.15);
  transform: rotate(2deg);
}
.referral-card-gift svg {
  width: 36px;
  height: 36px;
  fill: #0b6cff;
  stroke: #ffb800;
  stroke-width: .7;
}
.referral-card-gift i {
  position: absolute;
  right: -2px;
  top: -4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #54a2ff;
  border: 2px solid #fff;
  font-size: 16px;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}
.referral-card-actions {
  display: flex;
  justify-content: flex-end;
  margin: -2px 55px 9px 0;
}
.referral-card-v079 .settings-referral-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 14px;
  background: linear-gradient(180deg,#edf6ff,#e4f1ff);
  color: #0768f5;
  box-shadow: 0 3px 10px rgba(0,104,255,.08);
}
.referral-card-v079 .settings-referral-copy-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.referral-card-teaser {
  width: 100%;
  min-height: 47px;
  display: grid;
  grid-template-columns: 28px auto 17px minmax(0,1fr) 22px;
  gap: 5px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 14px;
  color: #8f5d13;
  background: linear-gradient(90deg,#fff8dc 0%,#fff0c5 48%,#fff7e8 100%);
  box-shadow: inset 0 0 0 1px rgba(237,182,48,.12);
  text-align: left;
}
.referral-card-teaser > span:nth-child(2) {
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.referral-card-teaser > i {
  font-style: normal;
  color: #b7771f;
  font-weight: 900;
}
.referral-card-teaser > strong {
  min-width: 0;
  color: #e0362f;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 900;
}
.referral-card-teaser-gift {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #ff4f45;
}
.referral-card-teaser-gift svg {
  width: 24px;
  height: 24px;
  fill: #ffda3f;
  stroke: #f04b39;
  stroke-width: .9;
}
.referral-card-chevron {
  display: grid;
  place-items: center;
  color: #17233a;
}
.referral-card-chevron svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.referral-card-v079 .settings-referral-parent {
  margin-top: 10px;
  padding: 8px 2px 0;
  font-size: 12px;
}

/* Full-screen referral detail */
body.referral-screen-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.referral-fullscreen-shell {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  justify-content: center;
  background: rgba(229,240,255,.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.referral-fullscreen {
  width: min(430px,100%);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f3f8ff;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(25,68,127,.18);
  animation: referralScreenIn .22s cubic-bezier(.22,.75,.25,1);
}
@keyframes referralScreenIn {
  from { transform: translateX(22px); opacity: .45; }
  to { transform: translateX(0); opacity: 1; }
}
.referral-screen-header {
  flex: 0 0 auto;
  height: calc(60px + env(safe-area-inset-top));
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(116,146,190,.12);
  z-index: 2;
}
.referral-screen-header h1 {
  margin: 0;
  text-align: center;
  color: #111a2d;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 900;
}
.referral-screen-back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: transparent;
  color: #111827;
}
.referral-screen-back:active { background: #eef5ff; }
.referral-screen-back svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.referral-screen-header-spacer { width: 40px; }
.referral-screen-body {
  min-height: 0;
  flex: 1;
}
.referral-screen-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
}
.referral-hero-v079 {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #d9ecff;
  aspect-ratio: 570 / 255;
}
.referral-hero-v079 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.referral-hero-total-badge {
  position: absolute;
  right: 13%;
  top: 7%;
  width: 94px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 47% 53% 52% 48% / 55% 45% 56% 44%;
  color: #fff;
  background: linear-gradient(165deg,#ff64b6,#ff2f69 63%,#ed1f50);
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 5px 12px rgba(229,37,92,.2);
  font-size: 25px;
  font-weight: 950;
  line-height: .9;
  text-shadow: 0 1px 1px rgba(141,20,56,.15);
}
.referral-hero-total-badge small {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 900;
}
.referral-detail-promo-card {
  position: relative;
  z-index: 1;
  margin: -5px 10px 0;
  padding: 15px 12px 14px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(21,66,128,.08);
}
.referral-detail-promo-card > h2 {
  margin: 0;
  text-align: center;
  color: #0c6cf6;
  font-size: 23px;
  font-weight: 950;
}
.referral-detail-promo-card > h3 {
  margin: 2px 0 5px;
  text-align: center;
  color: #0b63df;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 950;
}
.referral-detail-promo-card > p {
  margin: 0 auto 12px;
  max-width: 365px;
  color: #61708a;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.35;
}
.referral-reward-split {
  display: grid;
  grid-template-columns: minmax(0,1fr) 27px minmax(0,1fr);
  gap: 4px;
  align-items: stretch;
}
.referral-reward-box {
  min-height: 94px;
  display: grid;
  grid-template-columns: 50px minmax(0,1fr);
  gap: 7px;
  align-items: center;
  padding: 10px 9px;
  border-radius: 16px;
}
.referral-reward-box.referrer {
  background: linear-gradient(135deg,#fff5d8,#fffdf6);
}
.referral-reward-box.referred {
  background: linear-gradient(135deg,#effbe6,#fbfff7);
}
.referral-reward-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #086cff;
  background: rgba(255,255,255,.78);
}
.referral-reward-box.referred .referral-reward-icon { color: #0a9a4a; }
.referral-reward-icon svg {
  width: 31px;
  height: 31px;
  fill: currentColor;
}
.referral-reward-box small {
  display: block;
  color: #25324b;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 850;
}
.referral-reward-box.referred small { color: #087b3a; }
.referral-reward-box b {
  display: block;
  margin-top: 3px;
  color: #096cf6;
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
}
.referral-reward-box.referred b { color: #079544; }
.referral-reward-box span {
  display: block;
  margin-top: 4px;
  color: #374151;
  font-size: 11px;
  font-weight: 750;
}
.referral-reward-plus {
  display: grid;
  place-items: center;
  color: #0b6cff;
  font-size: 32px;
  font-weight: 950;
}
.referral-total-strip {
  margin-top: 9px;
  min-height: 57px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: linear-gradient(90deg,#fff8dc,#fff0ef);
}
.referral-total-gift {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #f23f46;
}
.referral-total-gift svg {
  width: 39px;
  height: 39px;
  fill: #ffcf3b;
  stroke: currentColor;
  stroke-width: .8;
}
.referral-total-strip b {
  color: #243047;
  font-size: 14px;
}
.referral-total-strip strong { color: #e02f33; }
.referral-total-strip small {
  display: block;
  margin-top: 3px;
  color: #6c7484;
  font-size: 11px;
}
.referral-how-title {
  margin: 16px 2px 8px;
  color: #151e31;
  font-size: 14px;
  font-weight: 900;
}
.referral-how-steps {
  display: grid;
  grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr);
  align-items: start;
  gap: 2px;
}
.referral-step {
  position: relative;
  min-width: 0;
  text-align: center;
}
.referral-step-number {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0b76f7;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 900;
  z-index: 1;
}
.referral-step-icon {
  width: 57px;
  height: 57px;
  margin: 6px auto 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0870f6;
  background: #eaf5ff;
}
.referral-step-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.referral-step-gift .referral-step-icon svg {
  fill: #ffdb44;
  stroke: #0870f6;
  stroke-width: .8;
}
.referral-step p {
  margin: 0;
  color: #4e5b70;
  font-size: 10px;
  line-height: 1.28;
}
.referral-step p b {
  color: #066cf6;
  font-size: 11px;
}
.referral-step-arrow {
  align-self: center;
  margin-top: 28px;
  color: #48a0ff;
  font-size: 18px;
  font-weight: 900;
}
.referral-detail-code-card {
  margin-top: 15px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px 12px;
  border-radius: 15px;
  background: linear-gradient(135deg,#edf6ff,#e1f0ff);
}
.referral-detail-code-card > div { min-width: 0; }
.referral-detail-code-card span {
  display: block;
  color: #637089;
  font-size: 12px;
  font-weight: 700;
}
.referral-detail-code-card b {
  display: block;
  margin-top: 3px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #086bf7;
  font-size: clamp(22px, 7vw, 30px);
  font-weight: 950;
  letter-spacing: .35px;
  white-space: nowrap;
}
.referral-detail-code-card button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg,#1681ff,#0668f7);
  box-shadow: 0 6px 14px rgba(0,104,255,.2);
  font-weight: 850;
}
.referral-detail-code-card button:disabled { opacity: .55; }
.referral-detail-code-card button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.referral-detail-code-card button span {
  color: inherit;
  font-size: 13px;
}
.referral-own-source {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 11px;
  color: #667085;
  background: #f7f9fc;
  font-size: 11px;
}
.referral-own-source b { color: #354158; }
.referral-detail-progress-card {
  margin: 12px 10px 0;
  padding: 15px 14px;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(21,66,128,.07);
}
.referral-detail-progress-title b {
  display: block;
  color: #172033;
  font-size: 16px;
}
.referral-detail-progress-title small {
  display: block;
  margin-top: 3px;
  color: #7a8497;
  font-size: 11px;
}
.referral-detail-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
  margin-top: 12px;
}
.referral-detail-stats > div {
  padding: 11px 6px;
  border-radius: 13px;
  background: #f4f8fd;
  text-align: center;
}
.referral-detail-stats b {
  display: block;
  color: #0a6cf5;
  font-size: 20px;
  font-weight: 950;
}
.referral-detail-stats span {
  display: block;
  margin-top: 3px;
  color: #6f798c;
  font-size: 10px;
  line-height: 1.25;
}
.referral-detail-list-title {
  margin-top: 15px;
  color: #283449;
  font-size: 13px;
  font-weight: 850;
}
.referral-detail-list-v079 {
  max-height: none;
  margin-top: 5px;
}

/* Dark theme */
body.dark .referral-card-v079,
body.dark-mode .referral-card-v079 {
  border-color: rgba(85,154,255,.5);
  background: linear-gradient(135deg,#172033,#14243a);
}
body.dark .referral-card-v079 .settings-referral-label,
body.dark-mode .referral-card-v079 .settings-referral-label { color: #a9b7cc; }
body.dark .referral-card-v079 .settings-referral-code,
body.dark-mode .referral-card-v079 .settings-referral-code { color: #73adff; }
body.dark .referral-card-gift,
body.dark-mode .referral-card-gift { background: rgba(255,255,255,.08); }
body.dark .referral-fullscreen,
body.dark-mode .referral-fullscreen { background: #0f1725; }
body.dark .referral-screen-header,
body.dark-mode .referral-screen-header { background: rgba(20,29,44,.98); border-color: rgba(255,255,255,.06); }
body.dark .referral-screen-header h1,
body.dark-mode .referral-screen-header h1,
body.dark .referral-screen-back,
body.dark-mode .referral-screen-back { color: #f7faff; }
body.dark .referral-detail-promo-card,
body.dark-mode .referral-detail-promo-card,
body.dark .referral-detail-progress-card,
body.dark-mode .referral-detail-progress-card { background: #182235; }
body.dark .referral-detail-progress-title b,
body.dark-mode .referral-detail-progress-title b,
body.dark .referral-how-title,
body.dark-mode .referral-how-title { color: #f4f7fb; }
body.dark .referral-detail-promo-card > p,
body.dark-mode .referral-detail-promo-card > p,
body.dark .referral-step p,
body.dark-mode .referral-step p { color: #aab6c8; }
body.dark .referral-detail-code-card,
body.dark-mode .referral-detail-code-card { background: rgba(60,122,208,.14); }
body.dark .referral-detail-stats > div,
body.dark-mode .referral-detail-stats > div,
body.dark .referral-own-source,
body.dark-mode .referral-own-source { background: rgba(255,255,255,.055); }

@media (max-width: 374px) {
  .referral-card-v079 { padding-left: 14px; padding-right: 14px; }
  .referral-card-main { grid-template-columns: 30px minmax(0,1fr) 48px; gap: 8px; }
  .referral-card-gift { width: 48px; height: 46px; }
  .referral-card-gift svg { width: 31px; height: 31px; }
  .referral-card-actions { margin-right: 47px; }
  .referral-card-teaser { grid-template-columns: 24px auto 14px minmax(0,1fr) 18px; padding-left: 7px; padding-right: 7px; }
  .referral-card-teaser > span:nth-child(2),
  .referral-card-teaser > strong { font-size: 11px; }
  .referral-detail-promo-card { margin-left: 7px; margin-right: 7px; padding-left: 9px; padding-right: 9px; }
  .referral-reward-box { grid-template-columns: 40px minmax(0,1fr); padding: 8px 6px; }
  .referral-reward-icon { width: 39px; height: 39px; }
  .referral-reward-box b { font-size: 19px; }
  .referral-reward-box small { font-size: 9px; }
  .referral-how-steps { grid-template-columns: minmax(0,1fr) 13px minmax(0,1fr) 13px minmax(0,1fr); }
  .referral-step p { font-size: 9px; }
  .referral-detail-code-card button { padding: 0 10px; }
}

/* ZCAR REFERRAL SETTINGS CARD · 0.1.81 · match compact reference */
.referral-card-v079 {
  margin-top: 14px;
  padding: 13px 14px 13px;
  border: 1.5px solid rgba(0, 105, 255, .78);
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 3%, rgba(92, 166, 255, .18), transparent 28%),
    linear-gradient(135deg, #fff 0%, #f7fbff 56%, #eef7ff 100%);
  box-shadow: 0 6px 18px rgba(43, 112, 210, .055);
}
.referral-card-v079::after {
  width: 84px;
  height: 84px;
  right: -32px;
  top: -37px;
  background: rgba(0, 104, 255, .045);
}
.referral-card-main {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 92px;
  gap: 8px;
  min-height: 67px;
  align-items: start;
}
.referral-card-users {
  width: 28px;
  height: 32px;
  margin-top: 5px;
}
.referral-card-users svg {
  width: 27px;
  height: 27px;
}
.referral-card-copy {
  gap: 2px;
  padding-top: 1px;
}
.referral-card-v079 .settings-referral-label {
  font-size: 13px;
  line-height: 1.15;
  font-weight: 800;
  white-space: nowrap;
}
.referral-card-v079 .settings-referral-code {
  margin-top: 1px;
  font-size: clamp(25px, 6.7vw, 29px);
  line-height: 1;
  letter-spacing: .35px;
}
.referral-card-gift {
  width: 92px;
  height: 58px;
  margin-top: -4px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: hidden;
  align-self: start;
}
.referral-card-gift img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
}
.referral-card-gift svg,
.referral-card-gift i { display: none !important; }
.referral-card-actions {
  position: absolute;
  z-index: 2;
  top: 61px;
  right: 61px;
  margin: 0;
  display: block;
}
.referral-card-v079 .settings-referral-copy-btn {
  min-height: 31px;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1;
  background: linear-gradient(180deg, #eef7ff 0%, #e2f0ff 100%);
  box-shadow: 0 3px 9px rgba(0, 104, 255, .07);
}
.referral-card-v079 .settings-referral-copy-btn svg {
  width: 16px;
  height: 16px;
}
.referral-card-teaser {
  min-height: 39px;
  margin-top: 11px;
  grid-template-columns: 23px auto 13px minmax(0, 1fr) 18px;
  gap: 4px;
  padding: 7px 9px;
  border-radius: 13px;
  background: linear-gradient(90deg, #fff9df 0%, #fff0c8 49%, #fff8ea 100%);
}
.referral-card-teaser-gift {
  width: 22px;
  height: 22px;
}
.referral-card-teaser-gift svg {
  width: 21px;
  height: 21px;
}
.referral-card-teaser > span:nth-child(2) {
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.referral-card-teaser > i {
  font-size: 13px;
  line-height: 1;
}
.referral-card-teaser > strong {
  font-size: 11px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.referral-card-chevron svg {
  width: 17px;
  height: 17px;
}
.referral-card-v079 .settings-referral-parent {
  margin-top: 7px;
  padding-top: 7px;
  font-size: 10.5px;
}
@media (max-width: 390px) {
  .referral-card-v079 { padding: 12px 12px 12px; }
  .referral-card-main { grid-template-columns: 27px minmax(0,1fr) 88px; gap: 7px; }
  .referral-card-gift { width: 88px; height: 55px; }
  .referral-card-v079 .settings-referral-label { font-size: 12px; }
  .referral-card-v079 .settings-referral-code { font-size: clamp(23px, 7vw, 27px); }
  .referral-card-actions { top: 58px; right: 56px; }
  .referral-card-v079 .settings-referral-copy-btn { min-height: 30px; padding: 6px 9px; font-size: 11.5px; }
  .referral-card-teaser { grid-template-columns: 22px auto 12px minmax(0,1fr) 17px; gap: 3px; padding: 7px 8px; }
  .referral-card-teaser > span:nth-child(2),
  .referral-card-teaser > strong { font-size: 10.5px; }
}


/* ===== Zcar Web V2 0.1.85 — New square Zcar logo ===== */
/* Logo mới tỉ lệ 1:1: thu gọn riêng theo từng màn, không đổi layout/chức năng. */
.zcar-logo-splash {
  width: min(43vw, 176px);
  max-height: 176px;
  margin: 0 auto;
  border-radius: 24%;
  filter: drop-shadow(0 12px 24px rgba(0, 50, 115, .16));
}
.zcar-logo-error {
  width: min(38vw, 150px);
  max-height: 150px;
  margin: 4px auto 10px;
  border-radius: 24%;
}
.web-v2-qr-logo-v018 {
  width: 102px;
  height: 102px;
  max-height: 102px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 24%;
  filter: drop-shadow(0 8px 13px rgba(8,51,116,.11));
}
.zcar-maintenance-logo {
  width: 108px;
  height: 108px;
  object-fit: contain;
  border-radius: 24%;
  margin: 0 auto 14px;
}
.web-v2-blocked-logo {
  width: 116px;
  height: 116px;
  max-width: none;
  object-fit: contain;
  border-radius: 24%;
  margin: 0 auto 12px;
}
@media (max-width: 390px) {
  .zcar-logo-splash { width: min(45vw, 164px); max-height: 164px; }
  .web-v2-qr-logo-v018 { width: 94px; height: 94px; max-height: 94px; }
}
@media (max-height: 760px) {
  .web-v2-qr-logo-v018 { width: 86px; height: 86px; max-height: 86px; }
}


/* ===== Zcar Web V2 0.1.86 — QR screen transparent logo ===== */
.web-v2-qr-brand-v018 {
  height: 174px;
  padding-bottom: 6px;
}
.web-v2-qr-logo-v018 {
  width: min(62vw, 214px);
  height: auto;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(8,51,116,.14));
}
@media (max-width: 390px) {
  .web-v2-qr-brand-v018 { height: 168px; }
  .web-v2-qr-logo-v018 { width: min(60vw, 198px); height: auto; max-height: none; }
}
@media (max-height: 760px) {
  .web-v2-qr-brand-v018 { height: 150px; }
  .web-v2-qr-logo-v018 { width: min(54vw, 176px); height: auto; max-height: none; }
}


/* Zcar 0.1.90 - Đăng ký/Gia hạn gói luôn hiển thị */
.settings-renew-plan-card{
  width:100%;
  margin:14px 0 18px;
  border:1px solid rgba(0,104,255,.20);
  background:linear-gradient(135deg,#ffffff 0%,#f3f8ff 100%);
  display:flex;
  align-items:center;
  gap:14px;
  min-height:88px;
  padding:16px 18px;
  text-align:left;
  color:#10233f;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.settings-renew-plan-card:active{
  transform:scale(.992);
}
.settings-renew-plan-card:hover{
  border-color:rgba(0,104,255,.38);
  box-shadow:0 10px 28px rgba(0,104,255,.10);
}
.settings-renew-plan-icon{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:17px;
  display:grid;
  place-items:center;
  color:#0068ff;
  background:#eaf3ff;
}
.settings-renew-plan-icon svg{
  width:28px;
  height:28px;
}
.settings-renew-plan-copy{
  min-width:0;
  flex:1;
  display:grid;
  gap:4px;
}
.settings-renew-plan-copy b{
  color:#0f2d58;
  font-size:19px;
  line-height:1.2;
  font-weight:900;
}
.settings-renew-plan-copy span{
  color:#6d7d93;
  font-size:14px;
  line-height:1.4;
  font-weight:600;
}
.settings-renew-plan-arrow{
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#0068ff;
  background:#fff;
  font-size:31px;
  line-height:1;
  font-weight:700;
  box-shadow:0 5px 14px rgba(0,104,255,.08);
}
body.dark-mode .settings-renew-plan-card{
  background:linear-gradient(135deg,#151a24 0%,#111827 100%);
  border-color:rgba(77,153,255,.26);
  color:#edf5ff;
}
body.dark-mode .settings-renew-plan-copy b{
  color:#f3f8ff;
}
body.dark-mode .settings-renew-plan-copy span{
  color:#9eacc0;
}
body.dark-mode .settings-renew-plan-icon{
  background:rgba(0,104,255,.16);
}
body.dark-mode .settings-renew-plan-arrow{
  background:#1a2230;
}
@media(max-width:640px){
  .settings-renew-plan-card{
    min-height:84px;
    padding:15px 16px;
    gap:12px;
  }
  .settings-renew-plan-icon{
    flex-basis:48px;
    width:48px;
    height:48px;
    border-radius:16px;
  }
  .settings-renew-plan-copy b{
    font-size:18px;
  }
  .settings-renew-plan-copy span{
    font-size:13px;
  }
}
\n\n/* ZCAR 0.1.94 - THƯỞNG MỐC GIỚI THIỆU */\n.referral-milestone-card{margin-top:10px;padding:12px;border:1px solid #d8e9ff;border-radius:16px;background:linear-gradient(135deg,#f7fbff,#fffaf1);box-shadow:0 6px 16px rgba(31,111,235,.06)}\n.referral-milestone-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.referral-milestone-head b{display:block;color:#143d76;font-size:14px;font-weight:950}.referral-milestone-head span{display:block;margin-top:2px;color:#75839a;font-size:10.5px;font-weight:700}.referral-milestone-head em{font-style:normal;font-size:24px}\n.referral-milestone-list{display:grid;gap:8px}.referral-milestone-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:9px;align-items:center;padding:10px;border-radius:13px;background:#fff;border:1px solid #e7eef8}.referral-milestone-item.done{border-color:#bce6c8;background:linear-gradient(135deg,#f4fff6,#fff)}\n.referral-milestone-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff4d7;color:#f2a100}.referral-milestone-icon svg{width:29px;height:29px;fill:#ffdc55;stroke:#f05b2b;stroke-width:.75}\n.referral-milestone-main{min-width:0}.referral-milestone-line{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.referral-milestone-line b{color:#24324a;font-size:11.5px;font-weight:900}.referral-milestone-line strong{color:#0a6cf5;font-size:11px;font-weight:950;text-align:right}.referral-milestone-item.done .referral-milestone-line strong{color:#0b9a4c}\n.referral-milestone-progress{height:7px;margin-top:7px;overflow:hidden;border-radius:999px;background:#eaf0f7}.referral-milestone-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1682ff,#54a9ff);transition:width .2s ease}.referral-milestone-item.done .referral-milestone-progress i{background:linear-gradient(90deg,#13a65a,#63c985)}\n.referral-milestone-main small{display:block;margin-top:5px;color:#7a8597;font-size:9.5px;font-weight:700}.referral-milestone-card>p{margin:8px 2px 0;color:#7a8495;font-size:9.5px;line-height:1.35}\nbody.dark .referral-milestone-card,body.dark-mode .referral-milestone-card{background:linear-gradient(135deg,#17243a,#1b2432);border-color:rgba(90,156,255,.25)}body.dark .referral-milestone-item,body.dark-mode .referral-milestone-item{background:#202c3e;border-color:rgba(255,255,255,.07)}body.dark .referral-milestone-item.done,body.dark-mode .referral-milestone-item.done{background:#183429;border-color:rgba(67,190,119,.25)}body.dark .referral-milestone-head b,body.dark-mode .referral-milestone-head b,body.dark .referral-milestone-line b,body.dark-mode .referral-milestone-line b{color:#eef5ff}\n@media(max-width:374px){.referral-milestone-card{padding:9px}.referral-milestone-item{grid-template-columns:34px minmax(0,1fr);padding:8px;gap:7px}.referral-milestone-icon{width:32px;height:32px}.referral-milestone-line b,.referral-milestone-line strong{font-size:10px}}\n

/* ZCAR 0.1.96 - THƯỞNG GIỚI THIỆU GỌN, THEO TỔNG MỐC */
.referral-milestone-card.compact{
  margin-top:8px;
  padding:10px 11px;
  border-radius:15px;
  background:#f8fbff;
  border:1px solid #dceaff;
  box-shadow:none;
}
.referral-milestone-card.compact .referral-milestone-head{margin-bottom:7px}
.referral-milestone-card.compact .referral-milestone-head b{font-size:13px;color:#183e73}
.referral-milestone-card.compact .referral-milestone-head span{font-size:9.8px;line-height:1.3}
.referral-milestone-card.compact .referral-milestone-list{grid-template-columns:1fr 1fr;gap:7px}
.referral-milestone-card.compact .referral-milestone-item{
  grid-template-columns:31px minmax(0,1fr);
  gap:7px;
  padding:8px;
  border-radius:12px;
}
.referral-milestone-card.compact .referral-milestone-icon{
  width:30px;height:30px;border-radius:9px
}
.referral-milestone-card.compact .referral-milestone-icon svg{width:22px;height:22px}
.referral-milestone-card.compact .referral-milestone-line{gap:5px}
.referral-milestone-card.compact .referral-milestone-line b,
.referral-milestone-card.compact .referral-milestone-line strong{
  font-size:9.8px;line-height:1.2
}
.referral-milestone-card.compact .referral-milestone-main small{
  margin-top:3px;font-size:8.6px
}
.referral-milestone-card.compact .referral-milestone-progress{
  height:5px;margin-top:5px
}
body.dark .referral-milestone-card.compact,
body.dark-mode .referral-milestone-card.compact{background:#17243a}
@media(max-width:350px){
  .referral-milestone-card.compact .referral-milestone-list{grid-template-columns:1fr}
}


/* ZCAR 0.1.97 - wording milestone dài hơn */
.referral-milestone-card.compact .referral-milestone-line strong{
  font-size:9.2px;
  max-width:52%;
  text-align:right;
}
@media(max-width:390px){
  .referral-milestone-card.compact .referral-milestone-line strong{
    font-size:8.8px;
  }
}


/* ZCAR 0.1.99 · Đồng bộ nhóm thủ công */
.group-sync-toolbar {
  min-height: 44px;
  padding: 6px 14px 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(17, 24, 39, .05);
}
.group-sync-count {
  color: #64748B;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.group-sync-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(31, 178, 68, .28);
  border-radius: 12px;
  background: #F0FDF4;
  color: #16A34A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.group-sync-btn:active { transform: scale(.98); }
.group-sync-btn:disabled { opacity: .72; cursor: default; transform: none; }
.group-sync-icon {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transform-origin: 50% 50%;
}
.group-sync-btn.syncing .group-sync-icon {
  animation: zcarGroupSyncSpin .9s linear infinite;
}
@keyframes zcarGroupSyncSpin {
  to { transform: rotate(360deg); }
}
.app-shell.page-mode-messages > .messages-page {
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
}
.app-shell.page-mode-messages .group-search-box {
  min-height: 52px;
  padding: 4px 14px 6px;
}
body.dark .group-sync-toolbar,
body.dark-mode .group-sync-toolbar {
  background: #0F172A;
  border-bottom-color: rgba(148, 163, 184, .14);
}
body.dark .group-sync-count,
body.dark-mode .group-sync-count { color: #94A3B8; }
body.dark .group-sync-btn,
body.dark-mode .group-sync-btn {
  background: rgba(22, 163, 74, .12);
  border-color: rgba(74, 222, 128, .28);
  color: #4ADE80;
}


/* ===== Zcar 0.1.101 · Làm mới đường gửi ở dưới, như bảng trạng thái ===== */
/* Không đặt nút trong một hàng nằm ngay dưới top-header vì dễ tràn màn hình. */
.app-shell.page-mode-rides > .rides-page {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
}
.app-shell.page-mode-rides > .rides-page.has-rides {
  grid-template-rows: minmax(0, 1fr) auto;
}
.app-shell.page-mode-rides .ride-list {
  min-height: 0;
  min-width: 0;
  height: 100%;
}
/* Khi chưa có cuốc, giữ minh họa nguyên vẹn và đặt công cụ phía DƯỚI trạng thái. */
.app-shell.page-mode-rides .empty-ready-card {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}
.app-shell.page-mode-rides .empty-ready-status {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  width: 100%;
}
.app-shell.page-mode-rides .empty-ready-status .empty-ready-copy {
  min-width: 0;
}
.app-shell.page-mode-rides .outbound-refresh-bar {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.app-shell.page-mode-rides .empty-ready-card .outbound-refresh-bar {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .22);
}
.app-shell.page-mode-rides .outbound-refresh-copy {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.app-shell.page-mode-rides .outbound-refresh-copy strong {
  color: #1f2937;
  font-weight: 850;
  font-size: 13px;
  line-height: 1.3;
}
.app-shell.page-mode-rides .outbound-refresh-copy span {
  color: #64748b;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app-shell.page-mode-rides .outbound-refresh-btn {
  flex: 0 0 auto;
  max-width: 54%;
  min-height: 37px;
  padding: 8px 10px;
  border: 1px solid rgba(0,104,255,.24);
  border-radius: 11px;
  background: #edf5ff;
  color: #0068ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: inherit;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}
.app-shell.page-mode-rides .outbound-refresh-btn:active:not(:disabled) {
  transform: scale(.98);
}
.app-shell.page-mode-rides .outbound-refresh-btn:disabled { opacity: .62; }
.app-shell.page-mode-rides .outbound-refresh-icon {
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  flex: 0 0 auto;
}
.app-shell.page-mode-rides .outbound-refresh-btn.refreshing .outbound-refresh-icon {
  animation: zcarOutboundRefreshSpin .85s linear infinite;
}
@keyframes zcarOutboundRefreshSpin { to { transform: rotate(360deg); } }
/* Khi có cuốc, đặt thanh công cụ dưới danh sách thay vì che tin hoặc nút nhận. */
.app-shell.page-mode-rides .outbound-refresh-dock {
  position: relative;
  z-index: 5;
  min-width: 0;
  padding: 9px 16px;
  background: #fff;
  border-top: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 -2px 12px rgba(15,23,42,.04);
}
/* Restore vị trí nút cuốc mới vì không còn thanh làm mới ở phía trên. */
.app-shell.page-mode-rides .ride-new-indicator { top: 10px; }
body.dark .app-shell.page-mode-rides .outbound-refresh-dock,
body.dark-mode .app-shell.page-mode-rides .outbound-refresh-dock {
  background: #0f172a;
  border-top-color: rgba(148,163,184,.16);
}
body.dark .app-shell.page-mode-rides .empty-ready-card .outbound-refresh-bar,
body.dark-mode .app-shell.page-mode-rides .empty-ready-card .outbound-refresh-bar {
  border-top-color: rgba(148,163,184,.18);
}
body.dark .app-shell.page-mode-rides .outbound-refresh-copy strong,
body.dark-mode .app-shell.page-mode-rides .outbound-refresh-copy strong {
  color: #e2e8f0;
}
body.dark .app-shell.page-mode-rides .outbound-refresh-copy span,
body.dark-mode .app-shell.page-mode-rides .outbound-refresh-copy span {
  color: #94a3b8;
}
body.dark .app-shell.page-mode-rides .outbound-refresh-btn,
body.dark-mode .app-shell.page-mode-rides .outbound-refresh-btn {
  background: rgba(0,104,255,.14);
  border-color: rgba(96,165,250,.26);
  color: #60a5fa;
}
@media (max-width: 390px) {
  .app-shell.page-mode-rides .outbound-refresh-bar { gap: 8px; }
  .app-shell.page-mode-rides .outbound-refresh-btn { padding: 7px 9px; font-size: 11.5px; }
  .app-shell.page-mode-rides .outbound-refresh-copy span { font-size: 10.5px; }
  .app-shell.page-mode-rides .outbound-refresh-dock { padding: 8px 12px; }
}


/* ===== Zcar 0.1.102 · Card trạng thái như GoDriver + tuổi kết nối ===== */
.app-shell.page-mode-rides .empty-ready-card.manual-route-ready {
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
}

.app-shell.page-mode-rides .manual-route-ready .empty-ready-icon {
  flex: 0 0 auto;
}

.app-shell.page-mode-rides .route-ready-copy {
  min-width: 0;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}

.app-shell.page-mode-rides .route-ready-copy strong {
  color: #111827;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
}

.app-shell.page-mode-rides .route-ready-copy > span {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 550;
}

.app-shell.page-mode-rides .outbound-refresh-link {
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0068ff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.app-shell.page-mode-rides .outbound-refresh-link:active:not(:disabled) {
  opacity: .68;
}

.app-shell.page-mode-rides .outbound-refresh-link:disabled {
  opacity: .56;
  cursor: default;
}

.app-shell.page-mode-rides .outbound-refresh-icon {
  display: inline-block;
  width: 15px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  transform-origin: 50% 50%;
}

.app-shell.page-mode-rides .outbound-refresh-link.refreshing .outbound-refresh-icon {
  animation: zcarOutboundRefreshSpin .85s linear infinite;
}

/* Khi có cuốc, giữ nút ở dưới danh sách nhưng thu gọn thành một dòng. */
.app-shell.page-mode-rides .outbound-refresh-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 16px;
}

.app-shell.page-mode-rides .outbound-refresh-dock-age {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark .app-shell.page-mode-rides .route-ready-copy strong,
body.dark-mode .app-shell.page-mode-rides .route-ready-copy strong {
  color: #f8fafc;
}

body.dark .app-shell.page-mode-rides .route-ready-copy > span,
body.dark-mode .app-shell.page-mode-rides .route-ready-copy > span,
body.dark .app-shell.page-mode-rides .outbound-refresh-dock-age,
body.dark-mode .app-shell.page-mode-rides .outbound-refresh-dock-age {
  color: #94a3b8;
}

body.dark .app-shell.page-mode-rides .outbound-refresh-link,
body.dark-mode .app-shell.page-mode-rides .outbound-refresh-link {
  color: #60a5fa;
}

@media (max-width: 390px) {
  .app-shell.page-mode-rides .empty-ready-card.manual-route-ready {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  .app-shell.page-mode-rides .route-ready-copy strong { font-size: 16px; }
  .app-shell.page-mode-rides .route-ready-copy > span,
  .app-shell.page-mode-rides .outbound-refresh-link { font-size: 12.5px; }
}


/* ===== Zcar 0.1.103 · Chấm xanh sẵn sàng nhận cuốc ===== */
.app-shell.page-mode-rides .manual-route-ready .empty-ready-icon.ready-dot {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 0;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34,197,94,.14);
  position: relative;
  color: transparent;
  font-size: 0;
}

.app-shell.page-mode-rides .manual-route-ready .empty-ready-icon.ready-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

body.dark .app-shell.page-mode-rides .manual-route-ready .empty-ready-icon.ready-dot,
body.dark-mode .app-shell.page-mode-rides .manual-route-ready .empty-ready-icon.ready-dot {
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34,197,94,.18);
}