/* Sales Agent app — xanh dương / trắng */
:root,
.oa-zalo-page {
  --coral: #2563eb;
  --coral-deep: #1d4ed8;
  --amber: #e8a23a;
  --teal: #2a9d8f;
  --violet: #7c6cf0;
  --cream: #ffffff;
  --sand: #f4f7fb;
  --canvas: #eef3f9;
  --ink: #0f172a;
  --muted: #526071;
  --line: #d3deeb;

  --zl-blue: #2563eb;
  --zl-blue-dark: #1d4ed8;
  --zl-blue-soft: rgba(37, 99, 235, 0.14);
  --zl-bg: #eef3f9;
  --zl-bg-chat: #f4f7fb;
  --zl-panel: #ffffff;
  --zl-surface: #f4f7fb;
  --zl-surface-2: #eef3f9;
  --zl-border: #d3deeb;
  --zl-border-soft: #e2e9f2;
  --zl-text: #0f172a;
  --zl-muted: #526071;
  --zl-in: #ffffff;
  --zl-out: #2563eb;
  --zl-shadow-sm: 0 1px 3px rgba(15, 40, 80, 0.07);
  --zl-shadow-md: 0 4px 16px rgba(15, 40, 80, 0.09);
  --zl-shadow-lg: 0 8px 28px rgba(15, 40, 80, 0.11);
}

.hidden { display: none !important; }

html:has(.oa-zalo-page),
body.oa-dash.oa-zalo-page {
  background:
    radial-gradient(ellipse 70% 45% at 8% 8%, rgba(96, 165, 250, 0.18), transparent 55%),
    radial-gradient(ellipse 55% 40% at 95% 12%, rgba(37, 99, 235, 0.12), transparent 50%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(14, 165, 233, 0.12), transparent 50%),
    linear-gradient(180deg, #f2f6fb 0%, #eef3f9 50%, #e2e9f2 100%) !important;
}

.oa-zalo-page .oa-crm-top.oa-zalo-crm-top {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(150, 170, 195, 0.4) !important;
  backdrop-filter: blur(12px);
}

.oa-zalo-page .oa-hg-brand .oa-dash-mark,
.oa-dash-mark.sa-mark {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.sa-logo-img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
  flex-shrink: 0;
}
.oa-zalo-page .oa-hg-brand { gap: 9px; }
.oa-zalo-page .oa-hg-brand .sa-logo-img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(37, 99, 235, .12), 0 6px 14px -4px rgba(37, 99, 235, .35); }
.oa-zalo-page .oa-hg-brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.oa-zalo-page .oa-hg-brand-text b { font-size: 16px; font-weight: 800; letter-spacing: -0.035em; color: #0f172a; }
.oa-zalo-page .oa-hg-brand-text em { font-style: normal; margin-left: 3px; background: linear-gradient(95deg, #2563eb 10%, #7c3aed 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oa-zalo-page .oa-hg-brand-text small { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; }

.oa-zalo-page .oa-crm-module-switch {
  background: #eef3f9 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 3px !important;
  border-radius: 999px !important;
  gap: 2px !important;
}
.oa-zalo-page .oa-crm-module-switch-item,
.oa-zalo-page button.oa-crm-module-switch-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #526071 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font: inherit !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  text-shadow: none !important;
}
.oa-zalo-page .oa-crm-module-switch-item:hover {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.55) !important;
}
.oa-zalo-page .oa-crm-module-switch-item.is-active,
.oa-zalo-page button.oa-crm-module-switch-item.is-active {
  background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25) !important;
  border: 0 !important;
}

.oa-crm-btn-primary,
.zl-nav-create,
.zl-nav-item.is-active,
.zl-filter-tab.is-active,
.zl-stream-tab.is-active,
.zl-board-btn.primary,
.zl-send-btn,
.oa-crm-btn.oa-crm-btn-primary {
  background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25) !important;
}
.zl-filter-tab.is-active {
  background: rgba(37, 99, 235, 0.14) !important;
  color: #1d4ed8 !important;
  box-shadow: none !important;
}
.zl-nav-item.is-active {
  background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
}

.zl-nav-rail {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
}
.zl-app > .zl-chat {
  background: #f4f7fb !important;
}
.zl-bubble.out {
  background: #2563eb !important;
}
.zl-kpi:hover,
.zl-kpi.is-on,
.zl-card.is-on,
.zl-card.clickable:hover {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}
.zl-kpi-ico {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.12) !important;
}
.zl-funnel-row:nth-child(1) .zl-funnel-bar { background: #2563eb !important; }
.zl-funnel-row:nth-child(2) .zl-funnel-bar { background: #3b82f6 !important; }
.zl-funnel-row:nth-child(3) .zl-funnel-bar { background: #e8a23a !important; }
.zl-funnel-row:nth-child(4) .zl-funnel-bar { background: #2a9d8f !important; }
.zl-funnel-row:nth-child(5) .zl-funnel-bar { background: #7c6cf0 !important; }
.zl-conv.is-active {
  border-color: #a9c6f5 !important;
  border-left-color: #2563eb !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.14) !important;
}
.zl-board { background: #eef3f9 !important; }
.zl-card,
.zl-kpi,
.zl-detail,
.zl-drill {
  background: #ffffff !important;
  border-color: #d3deeb !important;
}

/* Header CTA — Kết nối ngay */
.sa-connect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff !important;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.sa-connect-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}
.sa-connect-btn:disabled,
.sa-connect-btn.is-connected {
  background: #2a9d8f;
  box-shadow: 0 6px 16px rgba(42, 157, 143, 0.25);
  cursor: default;
  transform: none;
}

.sa-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(232, 162, 58, 0.18);
  color: #b45309;
}
.sa-mode-chip i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #e8a23a;
}
body.is-connected .sa-mode-chip {
  background: rgba(42, 157, 143, 0.16);
  color: #0f766e;
}
body.is-connected .sa-mode-chip i { background: #2a9d8f; }

.sa-flow-note {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px dashed rgba(232, 162, 58, 0.45);
  background: rgba(255, 247, 237, 0.9);
  font-size: 12px;
  color: #526071;
}
.sa-flow-note strong { color: #b45309; }
body.is-connected .sa-flow-note { display: none !important; }

/* Config panel (test flow — no login) */
.zl-config {
  display: none;
  flex-direction: column;
  min-width: 0;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 45% at 8% 12%, rgba(96, 165, 250, 0.28), transparent 55%),
    radial-gradient(ellipse 60% 40% at 92% 18%, rgba(37, 99, 235, 0.18), transparent 50%),
    radial-gradient(ellipse 55% 40% at 78% 88%, rgba(14, 165, 233, 0.22), transparent 50%),
    radial-gradient(ellipse 50% 35% at 12% 80%, rgba(59, 130, 246, 0.14), transparent 45%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(59, 111, 216, 0.08), transparent 60%),
    linear-gradient(165deg, #f2f6fb 0%, #eef3f9 40%, #e2e9f2 100%);
  overflow: auto;
}
.sa-config-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.sa-config-grid {
  position: absolute;
  inset: -20%;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(15, 40, 80, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 40, 80, 0.07) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at 50% 35%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 20%, transparent 72%);
}
.sa-config-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  opacity: 0.62;
  will-change: transform;
}
.sa-config-orb--a {
  width: 340px;
  height: 340px;
  top: -8%;
  left: -4%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.55), transparent 70%);
  animation: saCfgOrbA 18s ease-in-out infinite;
}
.sa-config-orb--b {
  width: 280px;
  height: 280px;
  top: 12%;
  right: -6%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.42), transparent 70%);
  animation: saCfgOrbB 22s ease-in-out infinite;
}
.sa-config-orb--c {
  width: 320px;
  height: 320px;
  bottom: 8%;
  left: 18%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.45), transparent 70%);
  animation: saCfgOrbC 20s ease-in-out infinite;
}
.sa-config-orb--d {
  width: 300px;
  height: 300px;
  right: 10%;
  bottom: 6%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.38), transparent 70%);
  animation: saCfgOrbD 24s ease-in-out infinite;
}
.sa-config-beam {
  position: absolute;
  inset: -30% -20%;
  opacity: 0.4;
  background: linear-gradient(105deg, transparent 30%, rgba(245, 249, 255, 0.7) 50%, transparent 70%);
  animation: saCfgBeam 14s ease-in-out infinite;
}
.zl-config-scroll {
  position: relative;
  z-index: 1;
}
@keyframes saCfgOrbA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(28px, 22px) scale(1.06); }
}
@keyframes saCfgOrbB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-24px, 18px) scale(1.04); }
}
@keyframes saCfgOrbC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -26px) scale(1.05); }
}
@keyframes saCfgOrbD {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-18px, -20px) scale(1.07); }
}
@keyframes saCfgBeam {
  0%, 100% { transform: translateX(-8%) rotate(0deg); opacity: 0.32; }
  50% { transform: translateX(8%) rotate(1deg); opacity: 0.48; }
}
.zl-app.is-config {
  grid-template-columns: var(--zl-nav-w) minmax(0, 1fr) !important;
}
.zl-app.is-config > .zl-sidebar,
.zl-app.is-config > .zl-chat,
.zl-app.is-config > .zl-profile,
.zl-app.is-config > .zl-board {
  display: none !important;
}
.zl-app.is-config:not(.is-tools) > #zl-config,
.zl-app.is-tools > #zl-tools {
  display: flex;
}
.zl-config-scroll {
  padding: 18px 22px 32px;
  max-width: none;
  position: relative;
  z-index: 1;
}
.zl-config > .zl-config-scroll {
  width: 100%;
  min-width: 0;
}
.zl-config-scroll .lead {
  margin: 4px 0 0;
  color: #526071;
  font-size: 13px;
}
.sa-config-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
}
@media (max-width: 900px) {
  .sa-config-grid { grid-template-columns: 1fr; }
}
.sa-config-card {
  background: #ffffff;
  border: 1.5px solid #d3deeb;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(15, 40, 80, 0.06);
}
.sa-config-card h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
}
.sa-config-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sa-config-card li {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e9f2;
  font-size: 13px;
}
.sa-config-card li b { color: #1d4ed8; }
.sa-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.sa-config-actions a,
.sa-config-actions button {
  text-decoration: none;
}

/* Login modal */
.sa-login-modal {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center; padding: 20px;
}
.sa-login-modal.hidden { display: none !important; }
.sa-login-backdrop {
  position: absolute; inset: 0; border: 0;
  background: rgba(15, 23, 42, 0.45); cursor: pointer;
}
.sa-login-card {
  position: relative; z-index: 1; width: min(440px, 100%);
  background: #ffffff; border: 1.5px solid #d3deeb; border-radius: 18px;
  box-shadow: 0 18px 48px rgba(15, 40, 80, 0.16); overflow: hidden;
}
.sa-login-bar {
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  padding: 10px 14px; background: #f4f7fb; border-bottom: 1px solid #e2e9f2;
}
.sa-login-traffic { display: inline-flex; gap: 6px; }
.sa-login-dot { width: 11px; height: 11px; border-radius: 50%; }
.sa-login-dot.red { background: #ff5f57; }
.sa-login-dot.yellow { background: #febc2e; }
.sa-login-dot.green { background: #28c840; }
.sa-login-bar-title { text-align: center; font-size: 12px; font-weight: 600; color: #526071; }
.sa-login-body { padding: 28px 28px 22px; }
.sa-login-body h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
.sa-login-body .sub { margin: 0 0 20px; font-size: 14px; color: #526071; line-height: 1.55; }
.sa-field { margin-bottom: 14px; }
.sa-field label {
  display: block; font-size: 11px; font-weight: 800; color: #526071;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 7px;
}
.sa-field input {
  width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid #d3deeb;
  border-radius: 12px; font: inherit; font-size: 15px; color: #0f172a; background: #fff; outline: none;
}
.sa-field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.sa-btn-login {
  width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}
.sa-btn-login:hover { filter: brightness(1.04); }
.sa-form-msg { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: #1d4ed8; }
.sa-form-msg.ok { color: #0f766e; }
.sa-login-hint { margin: 14px 0 0; font-size: 12px; color: #526071; text-align: center; }
.sa-login-later {
  display: block; width: 100%; margin-top: 12px; border: 0; background: none;
  color: #1d4ed8; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center;
}

.zl-quick {
  display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px 16px 2px; background: var(--zl-panel);
  overflow-x: auto; scrollbar-width: none;
}
.zl-quick::-webkit-scrollbar { display: none; }
.zl-quick button {
  flex: 0 0 auto; white-space: nowrap;
  border: 1px solid #d3deeb; background: #fff; border-radius: 999px;
  padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 600; color: #526071; cursor: pointer;
}
.zl-quick button:hover { border-color: #2563eb; color: #1d4ed8; }

.zl-report-tabs[hidden],
.zl-report-extra[hidden],
.zl-page-tabs[hidden],
.zl-test-bar[hidden],
.zl-test-banner[hidden],
.zl-drill[hidden],
.zl-qr-modal[hidden],
.zl-order-overlay[hidden] {
  display: none !important;
}

/* Soften leftover hard-coded blues from copied CSS */
.oa-zalo-page .oa-crm-btn-primary:hover,
.oa-zalo-page .zl-board-btn.primary:hover,
.oa-zalo-page .zl-nav-create:hover {
  background: #1d4ed8 !important;
}
.oa-crm-page,
.oa-crm-top {
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-deep: #1e3a8a;
  --border: #d3deeb;
  --bg: #eef3f9;
}

/* Cấu hình chatbot — cream/coral (match landing + tao-agent) */
.zl-config .oa-products-main {
  max-width: 960px;
  margin: 0 auto;
}
.zl-config .oa-cfg-panel {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(211, 222, 235, 0.8);
  box-shadow: 0 10px 28px rgba(15, 40, 80, 0.08);
}
.zl-config .sa-config-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(211, 222, 235, 0.85);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(15, 40, 80, 0.07);
}
.zl-config .sa-config-tab {
  border: 1px solid #d3deeb;
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #526071;
  cursor: pointer;
}
.zl-config .sa-config-tab:hover { border-color: #2563eb; color: #1d4ed8; }
.zl-config .sa-config-tab.is-active {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border-color: #2563eb;
  color: #fff;
}
.zl-config .sa-config-tab--cat.is-active {
  background: linear-gradient(180deg, #8b5cf6, #6366f1);
  border-color: #6366f1;
}
.zl-config .sa-config-stat--cat b { color: #6366f1; }

/* Panel phải — thu thập KH · tâm lý · đơn nháp */
.sa-prof-wrap { display: flex; flex-direction: column; gap: 12px; }
.sa-prof-block {
  background: #fff;
  border: 1px solid #e2e9f2;
  border-radius: 12px;
  padding: 12px 14px;
}
.sa-prof-block h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #526071;
}
.sa-prof-channel { margin: 0; font-size: 12px; color: #64748b; }
.sa-prof-dl { margin: 0; }
.sa-prof-dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
}
.sa-prof-dl dt { color: #64748b; font-weight: 600; }
.sa-prof-dl dd { margin: 0; text-align: right; font-weight: 700; color: #0f172a; }
.sa-prof-readiness {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.sa-prof-readiness--hot { background: #fef2f2; color: #b91c1c; }
.sa-prof-readiness--warm { background: #fff7ed; color: #1d4ed8; }
.sa-prof-readiness--mid { background: #fefce8; color: #a16207; }
.sa-prof-readiness--cool { background: #f0f9ff; color: #0369a1; }
.sa-prof-readiness--cold { background: #f8fafc; color: #64748b; }
.sa-prof-scores { display: flex; flex-direction: column; gap: 8px; }
.sa-prof-score-top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}
.sa-prof-bar {
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.sa-prof-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 999px;
}
.sa-prof-psy .sa-prof-bar i { background: linear-gradient(90deg, #8b5cf6, #6366f1); }
.sa-prof-stage { margin: 10px 0 0; font-size: 12px; color: #475569; }
.sa-prof-journey {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 160px;
  overflow-y: auto;
}
.sa-prof-journey li {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 6px;
  align-items: start;
  padding: 6px 0;
  border-top: 1px dashed #e8ecf1;
  font-size: 11px;
}
.sa-prof-journey time { color: #94a3b8; font-weight: 700; }
.sa-prof-journey span { color: #334155; font-weight: 600; }
.sa-prof-journey em { grid-column: 2 / -1; color: #64748b; font-style: normal; font-size: 10px; }
.sa-prof-journey b { color: #16a34a; font-size: 10px; }
.sa-prof-empty-j { margin: 0; font-size: 11px; color: #94a3b8; }
.sa-prof-order-card {
  border: 1px solid #fed7aa;
  background: #fffbeb;
  border-radius: 10px;
  padding: 10px;
}
.sa-prof-order--draft { border-color: #86efac; background: #f0fdf4; }
.sa-prof-order--missing { border-color: #fcd34d; background: #fffbeb; }
.sa-prof-order-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
}
.sa-prof-order-st { color: #1d4ed8; }
.sa-prof-order--draft .sa-prof-order-st { color: #15803d; }
.sa-prof-order-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 4px 0;
}
.sa-prof-order-row span { color: #64748b; }
.sa-prof-miss { margin: 8px 0 0; font-size: 11px; color: #b45309; }
.sa-prof-btn {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 8px;
  padding: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
}
.sa-prof-btn--ghost {
  background: #fff;
  border: 1px solid #d3deeb;
  color: #334155;
}
.sa-prof-nba p { margin: 0; font-size: 12px; line-height: 1.5; color: #475569; }
.zl-config .oa-cfg-panel.oa-cfg-keywords-section {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.14), #ffffff);
  border-color: rgba(96, 165, 250, 0.45);
}
.zl-config .oa-cfg-panel.oa-cfg-catalog-section {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.12), #ffffff);
  border-color: rgba(99, 102, 241, 0.45);
  scroll-margin-top: 72px;
}
.zl-config .oa-cfg-panel.oa-cfg-keywords-section .oa-chatbot-step {
  background: #e8a23a !important;
}
.zl-config .oa-kw-file-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #526071;
  background: #fff;
  border: 1px dashed #d3deeb;
  border-radius: 10px;
  text-align: center;
  word-break: break-word;
}
.zl-config .oa-cfg-panel.oa-prod-sec-prompt {
  background: linear-gradient(180deg, rgba(42, 157, 143, 0.1), #ffffff);
  border-color: rgba(42, 157, 143, 0.45);
}
.zl-config .oa-cfg-panel.oa-chatbot-tags-section {
  background: linear-gradient(180deg, rgba(124, 108, 240, 0.08), #ffffff);
  border-color: rgba(124, 108, 240, 0.35);
}
.zl-config .oa-chatbot-step {
  background: #2563eb !important;
}
.zl-config .oa-cfg-toggle {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.28);
  color: #1e3a8a;
}
.zl-config .oa-cfg-toggle input {
  accent-color: #2563eb;
}
.zl-config .oa-crm-btn-primary,
.zl-config .oa-crm-btn.oa-crm-btn-primary {
  background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
  font-weight: 800;
}
.zl-config .oa-crm-btn-ghost,
.zl-config a.oa-crm-btn-ghost {
  background: #fff !important;
  border: 1.5px solid #d3deeb !important;
  color: #526071 !important;
  border-radius: 999px !important;
  text-decoration: none;
}
.zl-config .oa-crm-input,
.zl-config .oa-chatbot-prompt {
  background: #fff;
  border: 1.5px solid #d3deeb;
  border-radius: 12px;
  color: #0f172a;
}
.zl-config .oa-crm-input:focus,
.zl-config .oa-chatbot-prompt:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.zl-config .oa-cfg-divider {
  border-top-color: #d3deeb;
}
.zl-config .oa-cfg-divider h2 {
  color: #0f172a;
}
.zl-config .oa-products-lead {
  color: #526071;
}
.zl-config .oa-products-stats div {
  background: #ffffff;
  border: 1px solid #e2e9f2;
  border-radius: 12px;
}
.zl-config .oa-prod-card {
  background: #ffffff;
  border: 1.5px solid #d3deeb;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 40, 80, 0.05);
}
.zl-config .oa-prod-card:hover {
  border-color: rgba(37, 99, 235, 0.45);
}
.zl-config .oa-chatbot-tag-create {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.zl-config .oa-chatbot-tag-create .oa-crm-input {
  flex: 1;
  min-width: 180px;
}
.zl-config .oa-chatbot-tags-hint.is-ok { color: #0f766e; }
.zl-config .oa-chatbot-tags-hint.is-err { color: #1d4ed8; }
.zl-config .oa-chatbot-ai-tags-toggle input {
  accent-color: #2a9d8f;
}
.zl-config .sa-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Product modal + rich tags on cream shell */
.oa-zalo-page.oa-products-page .oa-crm-modal-panel.oa-products-modal {
  background: #ffffff;
  border: 1.5px solid #d3deeb;
}
.oa-zalo-page .oa-cfg-tag-card {
  background: #fff;
  border: 1px solid #e2e9f2;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.oa-zalo-page .oa-chatbot-tag-color-trigger {
  border: 1.5px solid #d3deeb;
  background: #fff;
  border-radius: 10px;
}
.oa-zalo-page .oa-products-toast {
  z-index: 500;
}

/* ── Cấu hình: hero + stats + delete buttons ── */
.sa-config-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(211, 222, 235, 0.75);
  box-shadow: 0 12px 32px rgba(15, 40, 80, 0.1);
}
.sa-config-hero h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.sa-config-hero p {
  margin: 0;
  font-size: 13px;
  color: #526071;
  line-height: 1.5;
  max-width: 520px;
}
.sa-config-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sa-config-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #526071;
  background: #fff;
  border: 1.5px solid #e2e9f2;
  box-shadow: 0 4px 14px rgba(15, 40, 80, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sa-config-stat b {
  font-size: 15px;
  color: #0f172a;
}
.sa-config-stat--kw b { color: #b45309; }
.sa-config-stat--tags b { color: #6d28d9; }
.sa-config-stat--bot.is-on {
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.15), #fff);
  border-color: rgba(42, 157, 143, 0.45);
  color: #0f766e;
}
.sa-config-stat--bot.is-off {
  background: #fff;
  border-color: #d3deeb;
  color: #94a3b8;
}

/* Delete (×) buttons — circular, rõ ràng */
.zl-config .sa-del-btn,
.zl-config .oa-cfg-keyword-del,
.zl-config .oa-chatbot-tag-del,
.zl-config .oa-chatbot-rule-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1.5px solid #e2e9f2;
  border-radius: 50%;
  background: #fff;
  color: #94a3b8;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.zl-config .sa-del-btn:hover,
.zl-config .oa-cfg-keyword-del:hover,
.zl-config .oa-chatbot-tag-del:hover,
.zl-config .oa-chatbot-rule-del:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.18);
}
.zl-config .sa-del-btn--overlay,
.zl-config .oa-chatbot-media-del {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #64748b;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
  z-index: 2;
}
.zl-config .sa-del-btn--overlay:hover,
.zl-config .oa-chatbot-media-del:hover {
  background: #fee2e2;
  color: #dc2626;
  transform: scale(1.1);
}

/* Keyword cards — sống động hơn */
.zl-config .sa-kw-card {
  border-left: 4px solid #e8a23a !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: saCfgFadeUp 0.35s ease both;
}
.zl-config .sa-kw-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(96, 165, 250, 0.16);
  border-left-color: #2563eb !important;
}
.zl-config .sa-kw-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px !important;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.12), rgba(255,255,255,0.6)) !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.2) !important;
}
.zl-config .sa-kw-card-head-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.zl-config .sa-kw-card-head strong {
  font-size: 14px;
  color: #1e3a8a;
}
.zl-config .sa-kw-head-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.zl-config .sa-kw-chip {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: rgba(96, 165, 250, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.35);
}
.zl-config .sa-kw-chip--more {
  color: #526071;
  background: #f4f7fb;
  border-color: #e2e9f2;
}
.zl-config .sa-kw-head-meta {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  font-style: italic;
}

/* Panels hover + section polish */
.zl-config .oa-cfg-panel {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  animation: saCfgFadeUp 0.4s ease both;
}
.zl-config .oa-cfg-panel:nth-child(2) { animation-delay: 0.05s; }
.zl-config .oa-cfg-panel:nth-child(3) { animation-delay: 0.1s; }
.zl-config .oa-cfg-panel:nth-child(4) { animation-delay: 0.15s; }
.zl-config .oa-cfg-panel:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(15, 40, 80, 0.1);
}
.zl-config .oa-chatbot-section-head h4 {
  font-size: 16px;
  letter-spacing: -0.02em;
}
.zl-config .oa-chatbot-step {
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Empty states */
.zl-config .sa-config-empty {
  text-align: center;
  padding: 32px 20px;
  border: 2px dashed rgba(96, 165, 250, 0.45);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.65);
}
.zl-config .sa-config-empty-ico {
  display: block;
  font-size: 2rem;
  margin-bottom: 10px;
  line-height: 1;
}
.zl-config .sa-config-empty p {
  margin: 0;
  font-size: 13px;
  color: #526071;
}
.zl-config .sa-tags-empty {
  border-color: rgba(124, 108, 240, 0.35);
  background: rgba(124, 108, 240, 0.06);
}

/* Rule cards + media trong config */
.zl-config .oa-chatbot-rule-card {
  border: 1.5px solid #e2e9f2 !important;
  background: #fff !important;
}
.zl-config .oa-chatbot-rule-body {
  background: #ffffff;
}
.zl-config .oa-chatbot-rule-field input:focus,
.zl-config .oa-chatbot-rule-field textarea:focus {
  border-color: #e8a23a !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
}
.zl-config .oa-chatbot-upload-chip {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(255, 247, 237, 0.8);
  color: #b45309;
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.zl-config .oa-chatbot-upload-chip:hover {
  border-color: #e8a23a;
  background: #fff7ed;
  transform: scale(1.03);
}
.zl-config .oa-cfg-tag-card {
  transition: border-color 0.18s, box-shadow 0.18s;
}
.zl-config .oa-cfg-tag-card:hover {
  border-color: rgba(124, 108, 240, 0.45);
  box-shadow: 0 6px 18px rgba(124, 108, 240, 0.1);
}
.zl-config .oa-chatbot-tag-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

@keyframes saCfgFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Messenger buttons (Botcake-style) */
.zl-config .sa-kw-buttons-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(96, 165, 250, 0.35);
}
.zl-config .sa-kw-buttons-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.zl-config .sa-kw-buttons-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.zl-config .sa-kw-btn-row {
  display: grid;
  grid-template-columns: 28px 1fr 140px 1fr 30px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #e2e9f2;
}
@media (max-width: 720px) {
  .zl-config .sa-kw-btn-row {
    grid-template-columns: 1fr 30px;
  }
  .zl-config .sa-kw-btn-idx { display: none; }
}
.zl-config .sa-kw-btn-idx {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0, 132, 255, 0.12);
  color: #0084ff;
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 720px) {
  .zl-config .sa-kw-btn-row { grid-template-columns: minmax(0, 1fr) 30px; }
  .zl-config .sa-kw-btn-row .sa-kw-btn-idx { display: none; }
  .zl-config .sa-kw-btn-row .oa-crm-input { width: 100%; min-width: 0; }
  .zl-config .sa-kw-btn-row .sa-kw-btn-type,
  .zl-config .sa-kw-btn-row .sa-kw-btn-value { grid-column: 1 / -1; }
  .zl-config .sa-kw-btn-row .sa-kw-btn-del { grid-column: 2; grid-row: 1; }
}
.zl-config .sa-kw-no-btns {
  margin: 0 0 10px;
  font-size: 12px;
}
.zl-config .sa-fb-preview {
  margin-top: 4px;
}
.zl-config .sa-fb-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #0084ff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.zl-config .sa-fb-preview-card {
  max-width: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid #dbeafe;
  box-shadow: 0 8px 24px rgba(0, 132, 255, 0.12);
}
.zl-config .sa-fb-preview-img img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.zl-config .sa-fb-preview-img--empty {
  height: 100px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
}
.zl-config .sa-fb-preview-body {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #0f172a;
  border-bottom: 1px solid #e2e9f2;
}
.zl-config .sa-fb-preview-btns {
  display: flex;
  flex-direction: column;
}
.zl-config .sa-fb-preview-btn {
  display: block;
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #0084ff;
  border-top: 1px solid #e2e9f2;
  background: #fff;
}
.zl-config .sa-fb-preview-btn--ghost {
  color: #94a3b8;
  font-weight: 600;
}

/* Chat thử: bubble Messenger template */
.zl-bubble.messenger-card {
  padding: 0;
  overflow: hidden;
  max-width: 260px;
  background: #fff !important;
  border: 1px solid #dbeafe;
  color: #0f172a !important;
}
.zl-bubble.messenger-card .zl-mc-img {
  aspect-ratio: 1.91 / 1;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zl-bubble.messenger-card .zl-mc-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zl-bubble.messenger-card .zl-mc-body {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  border-bottom: 1px solid #e2e9f2;
}
.zl-bubble.messenger-card .zl-mc-btn {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid #e2e9f2;
  background: #fff;
  color: #0084ff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.zl-bubble.messenger-card .zl-mc-btn:hover {
  background: #f0f9ff;
}

/* Ảnh trong chat */
.zl-bubble.zl-bubble-img {
  padding: 0;
  overflow: hidden;
  max-width: 260px;
  background: #fff !important;
  border: 1px solid #e2e9f2;
}
.zl-bubble.zl-bubble-img .zl-img-frame {
  aspect-ratio: 1.91 / 1;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zl-bubble.zl-bubble-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zl-bubble.in.zl-bubble-img img { border-radius: 12px 12px 0 0; }
.zl-img-caption {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #334155;
}

/* Messenger catalog carousel — trượt ngang như Facebook */
.zl-msg-row--carousel { margin-bottom: 8px; }
.zl-msg-wrap--carousel {
  max-width: min(94%, 460px) !important;
  width: 100%;
}
.zl-fb-carousel-intro {
  margin: 0 0 6px 4px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #dbeafe;
  font-size: 13px;
  line-height: 1.45;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.zl-fb-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 6px;
  cursor: grab;
}
.zl-fb-carousel::-webkit-scrollbar { display: none; }
.zl-fb-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.zl-fb-carousel-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  padding: 0 2px;
}
.zl-fb-card {
  flex: 0 0 220px;
  width: 220px;
  scroll-snap-align: start;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
}
.zl-fb-card-img {
  aspect-ratio: 1.91 / 1;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.zl-fb-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zl-fb-card-img--empty {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
}
.zl-fb-card-body {
  padding: 8px 10px;
  border-bottom: 1px solid #e2e9f2;
  min-height: 52px;
}
.zl-fb-card-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.zl-fb-card-sub {
  margin: 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}
.zl-fb-card-btn,
.zl-bubble.messenger-card .zl-mc-btn {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-top: 1px solid #e2e9f2;
  background: #fff;
  color: #0084ff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.zl-fb-card-btn:hover,
.zl-bubble.messenger-card .zl-mc-btn:hover { background: #f0f9ff; }
.zl-fb-carousel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 0;
}
.zl-fb-carousel-hint {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  white-space: nowrap;
}
.zl-fb-carousel-dots {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  flex: 1;
}
.zl-fb-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.zl-fb-carousel-dot.is-active { background: #0084ff; }

/* Cấu hình catalog */
.zl-config .oa-cfg-catalog-section .oa-chatbot-step { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.zl-config .sa-cat-card {
  border: 1px solid #e2e9f2;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.zl-config .sa-cat-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #faf7ff, #fff);
  border-bottom: 1px solid #ede9fe;
}
.zl-config .sa-cat-card-body { padding: 12px 14px 14px; }
.zl-config .sa-cat-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.zl-config .sa-cat-product {
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  background: #fafafa;
}
.zl-config .sa-cat-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.zl-config .sa-cat-product-head strong { font-size: 12px; }
.zl-config .sa-cat-product-grid {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: start;
}
.zl-config .sa-cat-prod-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  position: relative;
}
.zl-config .sa-cat-prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zl-config .sa-cat-prod-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zl-config .sa-cat-prod-fields input {
  font-size: 12px;
  padding: 6px 8px;
}
.zl-config .sa-cat-preview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e9f2;
}
.zl-config .sa-cat-preview-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.zl-config .sa-cat-preview-card {
  flex: 0 0 140px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  font-size: 11px;
}
.zl-config .sa-cat-preview-card img {
  width: 100%;
  height: 72px;
  object-fit: contain;
  background: #f1f5f9;
  display: block;
}
.zl-config .sa-cat-preview-card .body {
  padding: 6px 8px;
}
.zl-config .sa-cat-preview-card b {
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
}
.zl-config .sa-cat-preview-card span {
  color: #64748b;
  font-size: 10px;
}
.zl-config .sa-cat-preview-card .btn {
  display: block;
  text-align: center;
  padding: 5px;
  border-top: 1px solid #e2e9f2;
  color: #0084ff;
  font-weight: 700;
  font-size: 10px;
}

/* AI Sales Agent — chat thử */
.sa-prof-missing { color: #b45309; font-style: italic; }
.sa-prof-conv { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px; background: #ecfdf5; color: #047857; font-size: 12.5px; font-weight: 600; }
.zl-bubble.is-typing { color: #94a3b8; font-style: italic; }
.zl-bubble.is-typing::after { content: '…'; animation: saDots 1.2s steps(3) infinite; }
@keyframes saDots { 0% { opacity: .2 } 50% { opacity: 1 } 100% { opacity: .2 } }
.sa-pick-wrap { width: min(620px, 100%); max-width: 100% !important; }
.zl-bubble.sa-pick-card { background: #fff !important; color: #0f172a !important; border: 1px solid #e5eaf1; border-radius: 16px; padding: 14px; max-width: 100%; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12); }
.sa-pick-title { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; margin: 0 2px 12px; color: #0f172a; }
.sa-pick-title small { font-size: 12px; font-weight: 500; color: #64748b; }
.sa-pick-title small::first-letter { text-transform: uppercase; }
.sa-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 6px; }
.sa-pick { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; background: #f8fafc; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background .15s, border-color .15s, box-shadow .15s, transform .15s; }
.sa-pick:hover { background: #fff; border-color: #dbe3ee; box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .18); transform: translateY(-1px); }
.sa-pick.is-active { background: #eff5ff; border-color: #93b4f5; }
.sa-pick.is-active::after { content: ''; position: absolute; top: 50%; right: 10px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.sa-pick.is-setup { background: #fff; border: 1px dashed #b9c8de; }
.sa-pick.is-setup:hover { border-color: #2563eb; border-style: solid; }
.sa-pick[hidden] { display: none; }
.sa-ico { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--c, #2563eb); background: color-mix(in srgb, var(--c, #2563eb) 11%, #fff); }
.sa-ico svg { width: 17px; height: 17px; }
.sa-pick-txt { display: flex; flex-direction: column; min-width: 0; padding-right: 10px; }
.sa-pick-txt b { font-size: 13px; font-weight: 650; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-pick-txt small { font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Thanh đổi ngành luôn hiện trên ô chat thử */
.zl-test-banner .sa-test-note { flex: 1; min-width: 0; font-weight: 500; line-height: 1.4; }
#zl-test-banner { container-type: inline-size; flex-wrap: wrap; row-gap: 6px; }
@container (max-width: 820px) {
  #zl-test-banner .sa-test-note { order: 9; flex: 1 1 100%; font-size: 11.5px; }
  #zl-test-banner #btn-my-products { margin-left: auto; }
  #zl-test-banner .sa-ind-pop { width: 100cqw; }
}
.sa-ind { position: relative; flex: 0 0 auto; }
.sa-ind-btn { display: flex; align-items: center; gap: 8px; max-width: 320px; padding: 4px 6px 4px 4px; border: 1px solid #fcd9b6; border-radius: 11px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: border-color .15s, box-shadow .15s; }
.sa-ind-btn:hover, .sa-ind-btn[aria-expanded="true"] { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.sa-ind-btn .sa-ico { width: 28px; height: 28px; border-radius: 8px; }
.sa-ind-btn .sa-ico svg { width: 15px; height: 15px; }
.sa-ind-btn .sa-pick-txt { padding-right: 0; }
.sa-ind-btn .sa-pick-txt b { font-size: 12.5px; }
.sa-ind-btn .sa-pick-txt small { font-size: 11px; }
.sa-ind-cta { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 4px 8px; border-radius: 8px; background: #2563eb; color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sa-ind-cta svg { width: 12px; height: 12px; }
.sa-ind-pop { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 60; width: min(660px, calc(100vw - 32px)); max-height: min(440px, 60vh); display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid #e5eaf1; border-radius: 16px; background: #fff; box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .06); color: #0f172a; animation: saPop .14s ease-out; }
.sa-ind-pop[hidden] { display: none; }
@keyframes saPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sa-ind-q { flex: 0 0 auto; width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; font: inherit; font-size: 13px; color: #0f172a; outline: none; }
.sa-ind-q:focus { border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.sa-ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px; overflow-y: auto; }
.zl-bubble.zl-bubble-video { max-width: 320px; }
.zl-bubble.zl-bubble-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0f172a; }
.zl-bubble.zl-bubble-img .zl-img-frame img { cursor: zoom-in; }

.zl-compose-pop { position: absolute; left: 10px; bottom: calc(100% + 6px); z-index: 30; width: min(340px, calc(100% - 20px)); max-height: 300px; overflow-y: auto; padding: 8px; background: #fff; border: 1px solid #e2e9f2; border-radius: 14px; box-shadow: 0 14px 40px rgba(15, 23, 42, .18); }
.zl-compose-pop[hidden] { display: none; }
.zl-pop-head { padding: 2px 6px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #64748b; }
.zl-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.zl-emoji-grid button { height: 38px; border: 0; border-radius: 8px; background: none; font-size: 22px; line-height: 1; cursor: pointer; }
.zl-emoji-grid button:hover { background: #eef2f7; }
.zl-tpl-list button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13px; line-height: 1.45; text-align: left; color: #0f172a; cursor: pointer; }
.zl-tpl-list button + button { border-top: 1px solid #f1f5f9; }
.zl-tpl-list button:hover { background: #eef4ff; }
.zl-tpl-list em { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 99px; background: #e0e7ff; color: #3730a3; font-size: 10.5px; font-style: normal; font-weight: 700; vertical-align: 1px; }

.zl-bubble.zl-bubble-card { width: 250px; max-width: 100%; padding: 10px 12px; white-space: normal; background: #fff !important; color: #0f172a; border: 1px solid #e2e9f2; }
.zl-file, .zl-contact-top { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.zl-file-ico { flex: none; width: 40px; height: 46px; border-radius: 8px; background: linear-gradient(160deg, #3b82f6, #1d4ed8); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 46px; text-align: center; }
.zl-file-meta { display: flex; flex-direction: column; min-width: 0; }
.zl-file-meta b { overflow: hidden; font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
.zl-file-meta small { font-size: 11.5px; color: #64748b; }
a.zl-file:hover b { color: #1d4ed8; text-decoration: underline; }
.zl-contact-ava { flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: linear-gradient(140deg, #2563eb, #7c3aed); color: #fff; font-size: 18px; font-weight: 800; }
.zl-contact-ava img { width: 100%; height: 100%; object-fit: cover; }
.zl-contact-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid #eef2f7; font-size: 11.5px; color: #64748b; }
.zl-compose-tools[hidden], .zl-task-due[hidden] { display: none !important; }
.zl-compose.is-note .zl-compose-body textarea { background: #fffbeb; border-color: #fcd34d; }
.zl-compose.is-task .zl-compose-body textarea { background: #f0fdf4; border-color: #86efac; }
.zl-compose.is-note .zl-send-btn { background: linear-gradient(180deg, #f59e0b, #d97706) !important; border-color: #d97706 !important; box-shadow: 0 6px 16px rgba(217, 119, 6, .25) !important; }
.zl-compose.is-task .zl-send-btn { background: linear-gradient(180deg, #22c55e, #16a34a) !important; border-color: #16a34a !important; box-shadow: 0 6px 16px rgba(22, 163, 74, .25) !important; }
.zl-task-due { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #475569; }
.zl-task-due select { height: 32px; padding: 0 8px; border: 1px solid #d5dee9; border-radius: 8px; background: #fff; font: inherit; font-weight: 500; color: #0f172a; }

.zl-msg-row.zl-internal-row { justify-content: center; margin: 6px 0 8px; }
.zl-note, .zl-task-card { width: min(440px, 92%); border-radius: 12px; font-size: 13px; line-height: 1.45; color: #0f172a; }
.zl-note { padding: 8px 12px 10px; background: #fffbeb; border: 1px dashed #f59e0b; }
.zl-note-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; font-size: 11px; font-weight: 700; color: #b45309; }
.zl-note-head span { font-weight: 500; color: #a16207; }
.zl-note p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.zl-task-card { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.zl-task-card.is-late { background: #fef2f2; border-color: #fecaca; }
.zl-task-card.is-late small { color: #b91c1c; font-weight: 600; }
.zl-task-check { flex: none; width: 24px; height: 24px; padding: 0; border: 2px solid #22c55e; border-radius: 50%; background: #fff; color: transparent; font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; }
.zl-task-card.is-late .zl-task-check { border-color: #ef4444; }
.zl-task-check:hover { color: #22c55e; }
.zl-task-card.is-done .zl-task-check { background: #22c55e; border-color: #22c55e; color: #fff; }
.zl-task-card.is-done b { color: #64748b; text-decoration: line-through; }
.zl-task-meta { display: flex; flex-direction: column; min-width: 0; }
.zl-task-meta b { font-weight: 600; word-break: break-word; }
.zl-task-meta small { font-size: 11.5px; color: #475569; }
.zl-contact-foot a { padding: 5px 12px; border-radius: 99px; background: #2563eb; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; }
.sa-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .86); cursor: zoom-out; }
.sa-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }

/* Automation panels (Comment & Live, sequences, broadcast, growth, Messenger, integrations) */
.zl-config .sa-au-panel { animation: none; scroll-margin-top: 72px; }
.zl-config .sa-au-panel:hover { transform: none; }
.zl-config .sa-au-panel .oa-chatbot-step { background: #2a9d8f !important; box-shadow: 0 4px 12px rgba(42, 157, 143, .25); }
.zl-config .sa-config-tab--au { border-color: rgba(42, 157, 143, .45); }
.sa-au-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.sa-au-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sa-au-col > .oa-crm-btn { align-self: flex-start; }
.sa-au-h5 { margin: 10px 0 4px; font-size: 13px; font-weight: 800; color: #334155; }
.sa-au-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sa-au-row-head .sa-au-h5 { margin: 0; }
.sa-au-help { margin: 0 0 8px; font-size: 12px; }
.sa-au-field { margin-bottom: 6px !important; }
.sa-au-field small { font-weight: 500; font-size: 11.5px; }
.sa-au-label { font-size: 13px; color: #334155; font-weight: 600; }
.sa-au-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa-au-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sa-au-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sa-au-inline { margin-bottom: 6px; }
.sa-au-flex { display: flex; gap: 6px; align-items: center; }
.sa-au-flex .oa-crm-input { flex: 1; min-width: 0; }
.sa-au-panel .oa-crm-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid #d3deeb; border-radius: 9px; background: #fff; }
.sa-au-panel textarea.oa-crm-input { resize: vertical; line-height: 1.45; }
.sa-au-checks { display: flex; flex-direction: column; gap: 4px; }
.sa-au-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; cursor: pointer; }
.sa-au-check input, .sa-au-switch input { accent-color: #2a9d8f; width: 16px; height: 16px; }
.sa-au-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #0f766e; white-space: nowrap; }
.sa-au-card { background: rgba(255, 255, 255, .8); border: 1px solid #e2e9f2; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.sa-au-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sa-au-card-head > b { flex: 1; font-size: 13px; }
.sa-au-seq-name { flex: 1; font-weight: 700 !important; }
.sa-au-x { border: 0; background: transparent; color: #94a3b8; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.sa-au-x:hover { color: #c62828; background: #fef2f2; }
.sa-au-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sa-au-actions select.oa-crm-input { width: auto; }
.sa-au-link { border: 0; background: none; color: #64748b; font-size: 12px; text-decoration: underline; cursor: pointer; align-self: flex-start; padding: 0; }
.sa-au-table-wrap { overflow-x: auto; }
.sa-au-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sa-au-table th { text-align: left; font-weight: 700; color: #64748b; padding: 6px; border-bottom: 1px solid #e2e9f2; white-space: nowrap; }
.sa-au-table td { padding: 5px 6px; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
.sa-au-badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 8px; line-height: 1.35; }
.sa-au-badge.is-ok { background: #ecfdf5; color: #047857; }
.sa-au-badge.is-warn { background: #fffbeb; color: #b45309; }
.sa-au-badge.is-block { background: #fef2f2; color: #b91c1c; }
.sa-au-chips, .sa-au-samples { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-au-chip { border: 1px solid #d3deeb; background: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; color: #334155; }
.sa-au-chip:hover { border-color: #2a9d8f; color: #0f766e; }
.sa-au-chip.is-on { background: #2a9d8f; border-color: #2a9d8f; color: #fff; }

/* Facebook post simulator */
.sa-au-sim { position: sticky; top: 64px; }
.sa-au-fbpost { background: #fff; border: 1px solid #e4e6eb; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sa-au-fbpost-head { display: flex; align-items: center; gap: 8px; }
.sa-au-fbpost-head b { display: block; font-size: 13.5px; color: #050505; }
.sa-au-fbpost-head small { font-size: 11.5px; color: #65676b; }
.sa-au-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #e8a23a); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.sa-au-live { color: #e41e3f; font-weight: 800; }
.sa-au-posttext { border: 0 !important; background: #f7f8fa !important; }
.sa-au-feed { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #e4e6eb; padding-top: 10px; }
.sa-au-feed-empty { margin: 4px 0; font-size: 12.5px; }
.sa-au-cmt { display: flex; flex-direction: column; gap: 4px; }
.sa-au-cmt-body { background: #f0f2f5; border-radius: 16px; padding: 7px 12px; align-self: flex-start; max-width: 92%; }
.sa-au-cmt-body b { font-size: 12.5px; color: #050505; }
.sa-au-cmt-body p { margin: 1px 0 0; font-size: 13px; color: #050505; white-space: pre-wrap; }
.sa-au-cmt.is-hidden > .sa-au-cmt-body { opacity: .5; background: repeating-linear-gradient(45deg, #f0f2f5, #f0f2f5 6px, #e7e9ec 6px, #e7e9ec 12px); }
.sa-au-cmt.is-page { margin-left: 28px; }
.sa-au-cmt.is-page .sa-au-cmt-body { background: #e7f3ff; }
.sa-au-cmt-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: #65676b; padding-left: 10px; }
.sa-au-hid { color: #b45309; }
.sa-au-pm { margin-left: 28px; border: 1px dashed #0866ff; border-radius: 12px; padding: 8px 10px; background: #f5f9ff; }
.sa-au-pm span { font-size: 11px; font-weight: 700; color: #0866ff; }
.sa-au-pm p { margin: 3px 0 0; font-size: 12.5px; color: #1c1e21; }
.sa-au-tagline { margin-left: 28px; font-size: 12px; color: #047857; }
.sa-au-tagline.is-warn { color: #b45309; }
.sa-au-note { margin-left: 28px; font-size: 11.5px; color: #65676b; }
.sa-au-note.is-err { color: #b91c1c; }
.sa-au-compose { display: flex; gap: 6px; }
.sa-au-compose .oa-crm-input { flex: 1; min-width: 0; }

/* Sequences */
.sa-au-steps { display: flex; flex-direction: column; margin: 8px 0; }
.sa-au-step { display: grid; grid-template-columns: 28px 1fr; gap: 8px; }
.sa-au-step-rail { position: relative; display: flex; justify-content: center; }
.sa-au-step-rail::after { content: ''; position: absolute; top: 26px; bottom: -6px; width: 2px; background: #cfe9e5; }
.sa-au-step:last-child .sa-au-step-rail::after { display: none; }
.sa-au-step-dot { width: 24px; height: 24px; border-radius: 50%; background: #2a9d8f; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.sa-au-step-body { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; }
.sa-au-step-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #475569; }
.sa-au-step-top select.oa-crm-input { width: auto; }
.sa-au-when { flex: 1; font-size: 12px; color: #0f766e; font-weight: 600; }

/* Broadcast */
.sa-au-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sa-au-stats > div { background: #fff; border: 1px solid #e2e9f2; border-radius: 10px; padding: 10px; text-align: center; }
.sa-au-stats b { display: block; font-size: 22px; color: #0f172a; }
.sa-au-stats span { font-size: 11.5px; color: #64748b; }
.sa-au-stats .is-ok b { color: #047857; }
.sa-au-stats .is-block b { color: #b91c1c; }
.sa-au-reasons { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: #7f1d1d; }
.sa-au-phone { background: #fff; border: 1px solid #e4e6eb; border-radius: 16px; padding: 14px; min-height: 90px; }
.sa-au-bubble { background: #f0f2f5; border-radius: 18px; padding: 9px 13px; font-size: 13px; max-width: 85%; color: #050505; }
.sa-au-bubble-btn { margin: 8px -13px -9px; border-top: 1px solid #dfe1e5; padding: 8px; text-align: center; color: #0866ff; font-weight: 700; }

/* Growth */
.sa-au-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sa-au-ref { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.sa-au-qr { width: 96px; height: 96px; image-rendering: pixelated; border-radius: 8px; background: #fff; border: 1px solid #e2e9f2; flex-shrink: 0; }
.sa-au-ref-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sa-au-code { font-size: 11.5px; background: #f1f5f9; border-radius: 6px; padding: 4px 6px; word-break: break-all; color: #0f172a; }
.sa-au-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 11.5px !important; background: #0f172a !important; color: #e2e8f0 !important; border-color: #0f172a !important; }
.sa-au-tech { margin-top: 8px; font-size: 12px; }
.sa-au-tech > summary { cursor: pointer; color: #64748b; font-weight: 600; padding: 4px 0; }
.sa-au-tech[open] > summary { margin-bottom: 6px; }
.sa-au-steps { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; }
.sa-au-ins { padding: 2px 10px !important; font-size: 12px !important; min-height: 0 !important; vertical-align: baseline; }
.sa-au-btn-preview { display: flex; justify-content: flex-end; padding: 18px 12px 12px; border: 1px dashed #e2e9f2; border-radius: 10px; background: #fff; margin-bottom: 8px; }
.sa-au-btn-preview span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #0866ff; color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 6px 20px rgba(8, 102, 255, 0.35); }

/* Messenger preview */
.sa-au-msgr { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.sa-au-msgr-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sa-au-msgr-head .sa-au-avatar { width: 52px; height: 52px; font-size: 20px; }
.sa-au-msgr-greet { margin: 0; font-size: 13px; color: #65676b; }
.sa-au-msgr-ice { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sa-au-msgr-ice span { border: 1px solid #0866ff; color: #0866ff; border-radius: 18px; padding: 6px 12px; font-size: 12.5px; }
.sa-au-msgr-start { background: #0866ff; color: #fff; border-radius: 18px; padding: 7px 24px; font-weight: 700; font-size: 13px; }
.sa-au-msgr-menu { font-size: 12px; color: #65676b; border-top: 1px solid #e4e6eb; padding-top: 8px; width: 100%; }

@media (max-width: 860px) {
  .sa-au-split, .sa-au-refs { grid-template-columns: 1fr; }
  .sa-au-grid3, .sa-au-grid4 { grid-template-columns: 1fr 1fr; }
  .sa-au-sim { position: static; }
}
.sa-au-card.is-off { opacity: .6; }
.sa-au-rule-hide { align-self: end; padding-bottom: 10px; }

/* Hộp thư · Bình luận */
.zl-conv-group.zl-conv-cmt { background: #e7f3ff; color: #0866ff; }
.sa-cmt-status { font-size: 11.5px; font-weight: 700; color: #94a3b8; }
.sa-cmt-status.is-on { color: #0f766e; }
.sa-cmt-banner { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.sa-cmt-wrap { max-width: min(88%, 480px); }
.sa-cmt-card { background: #fff; border: 1px solid #e4e6eb; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
.sa-cmt-post { border-left: 3px solid #0866ff; padding: 1px 0 1px 8px; }
.sa-cmt-post b { font-size: 11px; color: #0866ff; }
.sa-cmt-post p { margin: 2px 0 0; font-size: 12px; color: #475569; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sa-cmt-card .sa-au-cmt.is-page, .sa-cmt-card .sa-au-note, .sa-cmt-card .sa-au-tagline { margin-left: 20px; }
.sa-cmt-dialog { width: min(460px, 100%); text-align: left; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; }
.sa-cmt-dialog h3, .sa-cmt-dialog p { margin: 0; }
.sa-cmt-postbox { flex-shrink: 0; }
.sa-cmt-posttext { font-size: 13px; color: #1c1e21; white-space: pre-wrap; }
.sa-cmt-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Dữ liệu shop cho AI */
body.sd-open { overflow: hidden; }
.sd-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .55); }
.sd-overlay[hidden] { display: none; }
.sd-modal { width: min(920px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: #ffffff; border-radius: 18px; box-shadow: 0 24px 70px rgba(15, 23, 42, .35); overflow: hidden; }
.sd-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 18px 22px 12px; border-bottom: 1px solid #e6edf5; }
.sd-head h2 { margin: 0 0 4px; font-size: 19px; }
.sd-head p { margin: 0; font-size: 13px; color: #526071; line-height: 1.5; }
.sd-x { border: 0; background: #edf2f8; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: #526071; flex: 0 0 auto; }
.sd-body { overflow-y: auto; padding: 6px 22px 16px; }
.sd-sec { padding: 14px 0; border-bottom: 1px dashed #e0e8f2; }
.sd-sec:last-child { border-bottom: 0; }
.sd-sec h3 { margin: 0 0 8px; font-size: 14.5px; }
.sd-sec h3 small { font-weight: 500; color: #94a3b8; font-size: 12px; }
.sd-muted { margin: 0 0 8px; font-size: 12.5px; color: #5f6b7a; line-height: 1.5; }
.sd-paste { background: #f3f7ff; margin: 10px -10px 0; padding: 14px 10px; border-radius: 12px; border-bottom: 0; }
.sd-overlay label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #4f5b6a; min-width: 0; }
.sd-overlay input, .sd-overlay select, .sd-overlay textarea { width: 100%; box-sizing: border-box; border: 1px solid #d6e0ec; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 400; background: #fff; color: #1f2937; }
.sd-overlay textarea { resize: vertical; }
.sd-overlay input:focus, .sd-overlay select:focus, .sd-overlay textarea:focus { outline: 2px solid rgba(37, 99, 235, .25); border-color: #2563eb; }
.sd-grid3 { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr; gap: 10px; }
.sd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sd-grid5 { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.sd-full { margin-top: 10px; }
.sd-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.sd-img-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 10px; border: 1px dashed #d6dee9; border-radius: 12px; background: #fafcff; }
.sd-img-row b { display: block; font-size: 13.5px; }
.sd-img-row small { display: block; font-size: 12.5px; color: #64748b; margin-top: 2px; }
.sd-img-row .sd-row { margin-top: 6px; }
.sd-img-prev { width: 64px; height: 64px; flex: none; border-radius: 14px; overflow: hidden; display: grid; place-items: center; font-size: 26px; background: #eef2f7; }
.sd-img-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-img-row .sd-btn[hidden] { display: none; }
.sd-prod { border: 1px solid #e6edf5; border-radius: 12px; padding: 10px; margin-bottom: 10px; background: #fff; }
.sd-prod-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.sd-del { border: 0; background: none; color: #b91c1c; font-size: 12px; font-weight: 600; cursor: pointer; }
.sd-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.sd-btn:disabled { opacity: .6; cursor: wait; }
.sd-btn-primary { background: #2563eb; color: #fff; }
.sd-btn-ai { background: #1f2937; color: #fff; }
.sd-btn-ghost { background: #fff; border-color: #d6e0ec; color: #3b4656; }
.sd-status { font-size: 12.5px; color: #047857; }
.sd-status.is-error { color: #b91c1c; }
.sd-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 22px; border-top: 1px solid #e6edf5; background: #fff; }
.sd-foot .sd-status { margin-right: auto; }
.sd-cfg-box { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin: 12px 0; padding: 14px 16px; border-radius: 14px; background: #f3f7ff; border: 1px solid #cfe0fb; }
.sd-cfg-text strong { font-size: 14px; }
.sd-cfg-text p { margin: 4px 0 0; font-size: 12.5px; color: #526071; line-height: 1.5; }
.sd-cfg-summary { color: #1e3a8a !important; font-weight: 600; }
@media (max-width: 720px) {
  .sd-overlay { padding: 0; }
  .sd-modal { max-height: 100vh; height: 100%; border-radius: 0; }
  .sd-grid3, .sd-grid2, .sd-grid5 { grid-template-columns: 1fr; }
  .sd-cfg-box { flex-direction: column; align-items: stretch; }
}

/* Mobile — header menu + chat */
.oa-crm-mmenu-btn { display: none; }
.oa-crm-mmenu { display: none; }
.oa-crm-mmenu[hidden] { display: none !important; }
.zl-back-btn { display: none !important; }

@media (max-width: 820px) {
  .oa-crm-mmenu-btn { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 1px solid #dbe4f0; border-radius: 10px; background: #fff; cursor: pointer; }
  .oa-crm-mmenu-btn span, .oa-crm-mmenu-btn span::before, .oa-crm-mmenu-btn span::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: #0f1b3d; position: relative; content: ""; }
  .oa-crm-mmenu-btn span::before { position: absolute; top: -5px; }
  .oa-crm-mmenu-btn span::after { position: absolute; top: 5px; }
  .oa-crm-mmenu-btn[aria-expanded="true"] { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
  .oa-crm-mmenu { position: absolute; top: calc(100% + 6px); left: 8px; z-index: 120; width: min(360px, calc(100vw - 16px)); display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #e5eaf1; border-radius: 18px; background: #fff; box-shadow: 0 28px 56px -18px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .06); animation: saPop .14s ease-out; transform-origin: top left; }
  .oa-crm-mmenu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .oa-crm-mmenu-item { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; border: 1px solid transparent; border-radius: 14px; background: transparent; font: inherit; color: #0f1b3d; cursor: pointer; transition: background .15s, border-color .15s; }
  .oa-crm-mmenu-item:hover { background: #f8fafc; }
  .oa-crm-mmenu-item.is-active { background: #eff6ff; border-color: #bfdbfe; }
  .mm-ico { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
  .mm-ico svg { width: 21px; height: 21px; }
  .oa-crm-mmenu-item.is-active .mm-ico { color: #fff; background: var(--c); box-shadow: 0 6px 14px -6px var(--c); }
  .mm-ico em { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #fff; border-radius: 99px; background: #ef4444; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; line-height: 14px; text-align: center; box-sizing: border-box; }
  .mm-label { font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; }
  .oa-crm-mmenu-item.is-active .mm-label { color: #1d4ed8; font-weight: 700; }
  .oa-crm-mmenu-danger { padding: 10px; border: 0; border-top: 1px solid #eef2f7; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: #dc2626; cursor: pointer; }
  body.is-test #logoutBtnMenu { display: none; }
  .zl-app.is-board, .zl-app.is-config { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 640px) {
  .oa-zalo-page .oa-crm-top.oa-zalo-crm-top { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 10px; }
  .oa-zalo-page .oa-crm-top-left { flex: 0 1 auto; width: auto; flex-wrap: nowrap; gap: 8px; min-width: 0; }
  .oa-zalo-page .oa-crm-top-right { flex: 1 1 auto; width: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; min-width: 0; }
  .oa-zalo-page .oa-crm-module-switch { display: none; }
  .oa-zalo-page .oa-hg-brand-text { font-size: 15px; white-space: nowrap; }
  .sa-mode-chip { padding: 4px 8px; font-size: 11px; white-space: nowrap; }
  .sa-connect-btn { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
  .sa-flow-note { display: none; }

  .zl-app.is-mlist:not(.is-config):not(.is-autopost):not(.is-comments):not(.is-products):not(.is-api):not(.is-recovery):not(.is-board) > .zl-sidebar { display: flex; }
  .zl-app.is-mlist:not(.is-config):not(.is-autopost):not(.is-comments):not(.is-products):not(.is-api):not(.is-recovery):not(.is-board) > .zl-chat { display: none; }
  .zl-back-btn { display: grid !important; margin-left: -6px; color: #0f1b3d; }
  .zl-chat-head { padding: 8px 10px; min-height: 56px; gap: 6px; }
  .zl-chat-head-left { gap: 8px; flex: 1 1 auto; }
  .zl-chat-head h2 { margin-bottom: 2px; -webkit-line-clamp: 1; }
  .zl-chat-sub { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .zl-chat-head-actions { flex: 0 0 auto; }
  .zl-chat-head-actions .zl-icon-btn:disabled { display: none; }

  .zl-msgs { padding: 10px; }
  .zl-msg-wrap { max-width: 86%; }
  .sa-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .zl-test-banner { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .zl-test-banner .sa-test-note { display: none; }
  .zl-test-banner .sa-ind { flex: 1 1 100%; }
  .sa-ind-btn { width: 100%; max-width: none; }
  .sa-ind-btn .sa-pick-txt { flex: 1 1 auto; min-width: 0; }
  .sa-ind-cta { margin-left: auto; }
  .zl-test-banner > .zl-order-link { flex: 1 1 0; justify-content: center; text-align: center; padding: 7px 8px; font-size: 12px; white-space: nowrap; }
  .sa-cmt-banner > span { flex: 1 1 100%; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sa-ind-pop { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: 72vh; }
  .sa-ind-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .zl-compose-tabs { padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
  .zl-compose-tab { flex: none; padding: 7px 10px; }
  .zl-task-due select { max-width: 150px; }
  .zl-compose-body { padding: 8px 10px 4px; }
  .zl-compose-body textarea { min-height: 44px; height: 48px; font-size: 16px; }
  .zl-compose-foot { padding: 0 10px 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .zl-compose-icon:disabled { display: none; }
}

@media (max-width: 480px) {
  .oa-zalo-page .oa-hg-brand-text { display: none; }
}

/* Mobile — Đơn hàng / Khách hàng / Báo cáo */
@media (max-width: 640px) {
  .zl-board-scroll { padding: 12px 10px 24px; }
  .zl-board-head { margin-bottom: 10px; gap: 10px; }
  .zl-board-head > div:first-child { width: 100%; min-width: 0; }
  .zl-board-head h2 { font-size: 18px; }
  .zl-board-head p { font-size: 12px; }
  .zl-report-tabs, .zl-stream-tabs, .zl-page-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .zl-report-tabs::-webkit-scrollbar, .zl-stream-tabs::-webkit-scrollbar, .zl-page-tabs::-webkit-scrollbar { display: none; }
  .zl-report-tab, .zl-stream-tab, .zl-page-tab { flex: 0 0 auto; white-space: nowrap; }
  .zl-board-tools { width: 100%; gap: 6px; }
  .zl-board-tools input[type="date"] { flex: 1 1 40%; min-width: 0; font-size: 14px; }
  .zl-board-tools .zl-board-btn { flex: 1 1 28%; min-width: 0; padding: 0 8px; white-space: nowrap; }

  .zl-kpis { gap: 8px; margin-bottom: 10px; }
  .zl-kpi { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 10px; border-radius: 12px; }
  .zl-kpi-ico { grid-row: 1 / span 3; align-self: start; width: 28px; height: 28px; margin: 0; border-radius: 8px; }
  .zl-kpi-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zl-kpi-val { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zl-kpi-delta { margin-top: 2px; font-size: 10.5px; }

  .zl-charts, .zl-minis { gap: 10px; margin-bottom: 10px; }
  .zl-card { padding: 12px; border-radius: 12px; }
  .zl-donut-wrap { grid-template-columns: 110px 1fr; }
  .zl-donut { width: 110px; height: 110px; }
  .zl-hbar-row { grid-template-columns: minmax(70px, 110px) 1fr 32px; font-size: 12px; }
  .zl-drill { padding: 10px 12px 6px; }

  .zl-detail-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px; }
  .zl-detail-bar h3 { margin: 0; align-self: center; }
  .zl-detail-bar > span { justify-self: end; align-self: center; font-size: 12px; font-weight: 700; color: #64748b; }
  .zl-detail-bar select { width: 100%; min-width: 0; height: 38px; }
  .zl-detail-bar .zl-board-search { grid-column: 1 / -1; width: 100%; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid #c5d0dc; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; }
  .zl-detail-table { font-size: 12.5px; }
  .zl-detail-table th, .zl-detail-table td { padding: 8px 10px; white-space: nowrap; }
}

.zl-test-banner .zl-order-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 6px 11px; border: 1px solid #dbe4f0; border-radius: 9px; background: #fff; color: #1d4ed8; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: border-color .15s, background .15s; }
.zl-test-banner .zl-order-link:hover { border-color: #93c5fd; background: #f8fbff; text-decoration: none; }
.zl-test-banner .zl-order-link.danger { color: #b91c1c; border-color: #fbd5d5; }
.zl-test-banner .zl-order-link.danger:hover { border-color: #f87171; background: #fff7f7; }
.zl-test-banner .zl-order-link svg { flex: 0 0 auto; }

/* Công cụ: kịch bản CSKH, rải tin, tăng trưởng, tích hợp */
.sa-tools-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: #64748b; }
.sa-tools-crumb > span + span::before, .sa-tools-crumb > b::before { content: "/"; margin-right: 6px; color: #cbd5e1; font-weight: 400; }
.sa-tools-crumb > span:empty, .sa-tools-crumb > b:empty { display: none; }
.sa-tools-crumb > b { color: #0f766e; font-weight: 700; }
.sa-tools-nav { display: none; }
.sa-tools-body > [hidden] { display: none !important; }
.sa-tools-body > .sa-au-panel { margin: 0; }
.sa-tools-body > .is-enter { animation: saToolIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes saToolIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.zl-tools .sa-au-panel .oa-chatbot-step { width: 38px; height: 38px; border-radius: 10px; background: #f0f9f8 !important; color: #0f766e; border: 1px solid rgba(15, 118, 110, 0.18); box-shadow: none !important; }
.zl-tools .sa-au-panel .oa-chatbot-step svg { width: 19px; height: 19px; }

.zl-nav-items { overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.zl-nav-items::-webkit-scrollbar { display: none; }
.zl-nav-items.can-up { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.zl-nav-items.can-down { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22px); mask-image: linear-gradient(to top, transparent 0, #000 22px); }
.zl-nav-items.can-up.can-down { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
.zl-nav-item.has-sub::after { content: ""; position: absolute; right: 6px; top: 50%; width: 4px; height: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: 0.55; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s; }
.zl-nav-item.has-sub:hover::after { opacity: 0.95; }
.zl-nav-item.has-sub.is-open::after { transform: translateY(-30%) rotate(-135deg); }
.sa-nav-sub { display: grid; grid-template-rows: 0fr; flex: none; margin-top: -2px; transition: grid-template-rows 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.3s; }
.sa-nav-sub.is-open { grid-template-rows: 1fr; margin-bottom: 2px; }
.sa-nav-sub-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; border-radius: 10px; background: rgba(15, 23, 42, 0.045); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05); padding: 0 3px; transition: padding 0.3s; }
.sa-nav-sub.is-open .sa-nav-sub-in { padding: 5px 3px; }
.sa-nav-sub-cap { display: block; padding: 6px 0 1px; font-size: 8px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; text-align: center; color: #94a3b8; }
.sa-nav-sub-cap:first-child { padding-top: 2px; }
.sa-nav-sub-item { appearance: none; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 5px 1px; border: 0; border-radius: 8px; background: transparent; color: var(--zl-muted, #64748b); font-size: 8.5px; font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.sa-nav-sub-item svg { flex: none; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sa-nav-sub-item:hover { background: rgba(255, 255, 255, 0.85); color: var(--zl-text, #0f172a); }
.sa-nav-sub-item:hover svg { transform: translateY(-1px); }
.sa-nav-sub-item:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.sa-nav-sub-item.is-active { background: #fff; color: var(--zl-blue, #2563eb); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(37, 99, 235, 0.18); }
.sa-nav-sub.is-open .sa-nav-sub-item, .sa-nav-sub.is-open .sa-nav-sub-cap { animation: saSubIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 22ms + 60ms); }
.sa-nav-sub.is-instant, .sa-nav-sub.is-instant .sa-nav-sub-in { transition: none; }
@keyframes saSubIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sa-au-badge .sa-au-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.sa-au-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sa-au-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sa-au-st.is-ok { color: #047857; }
.sa-au-st.is-wait { color: #b45309; }
@media (prefers-reduced-motion: reduce) {
  .sa-nav-sub, .sa-nav-sub-in, .sa-nav-sub-item, .sa-nav-sub-cap, .zl-nav-item.has-sub::after, .sa-tools-body > .is-enter { transition: none !important; animation: none !important; }
}
.sa-tool-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.sa-tool-kpis > div { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; }
.sa-tool-kpis b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; }
.sa-tool-kpis span { font-size: 11.5px; color: #64748b; }
.sa-tool-kpis .is-block b { color: #b91c1c; }
.sa-tool-kpis .is-ok b { color: #0f766e; }
.sa-tool-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; counter-reset: none; }
.sa-tool-flow > div { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 11px 12px 11px 44px; min-width: 0; }
.sa-tool-flow > div:not(:last-child)::after { content: ""; position: absolute; right: -8px; top: 50%; width: 6px; height: 6px; border-top: 1.5px solid #cbd5e1; border-right: 1.5px solid #cbd5e1; transform: translateY(-50%) rotate(45deg); z-index: 1; }
.sa-tool-flow i { position: absolute; left: 11px; top: 11px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; color: #0f766e; background: #f0f9f8; border: 1px solid rgba(15, 118, 110, 0.25); }
.sa-tool-flow b { display: block; font-size: 12.5px; color: #0f172a; }
.sa-tool-flow span { display: block; font-size: 11.5px; color: #64748b; line-height: 1.4; margin-top: 2px; }
.sa-tool-tips { margin-top: 16px; border: 1px solid #e2e8f0; border-left: 3px solid #2a9d8f; background: #f8fafc; border-radius: 10px; padding: 10px 14px; }
.sa-tool-tips summary { cursor: pointer; display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; color: #0f172a; list-style: none; }
.sa-tool-tips summary::-webkit-details-marker { display: none; }
.sa-tool-tips summary svg { color: #0f766e; flex: none; }
.sa-tool-tips ul { margin: 8px 0 2px; padding-left: 18px; font-size: 12.5px; line-height: 1.7; color: #475569; }
.zl-tools .sa-au-col > .sa-au-reasons { color: #475569; line-height: 1.6; }
.sa-au-seq-sum { font-size: 11.5px; color: #64748b; white-space: nowrap; }
.sa-au-seq.is-off { opacity: 0.6; }
.sa-au-qr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: flex-end; }
.sa-au-qr-chips span { border: 1px solid #0866ff; color: #0866ff; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; }
.sa-au-color { height: 38px; padding: 3px 6px; cursor: pointer; }
.sa-au-webprev { position: relative; height: 210px; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.sa-au-webprev-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; font-size: 11px; color: #64748b; }
.sa-au-webprev-bar i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.sa-au-webprev-bar span { margin-left: 8px; background: #fff; border-radius: 6px; padding: 2px 10px; }
.sa-au-webprev-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sa-au-webprev-body b { width: 45%; height: 12px; border-radius: 6px; background: #e2e8f0; }
.sa-au-webprev-body p { margin: 0; height: 8px; border-radius: 4px; background: #f1f5f9; }
.sa-au-webprev-body p.short { width: 60%; }
.sa-au-webprev-btn { position: absolute; bottom: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; color: #fff; font-weight: 600; font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); background: #0866ff; }
.sa-au-lead-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.sa-au-lead-bar input { flex: 1; min-width: 0; }
.sa-au-lead-bar select { width: auto; min-width: 170px; }
.sa-au-src { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(42, 157, 143, 0.12); color: #0f766e; }
.sa-au-sheet-demo td { font-size: 11.5px; color: #475569; }
@media (max-width: 1100px) {
  .sa-tool-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-tool-flow > div::after { display: none; }
}
@media (max-width: 900px) {
  .sa-tool-flow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .sa-tools-nav { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding: 6px; background: rgba(255, 255, 255, 0.9); border: 1px solid #e2e8f0; border-radius: 12px; scrollbar-width: none; }
  .sa-tools-cap, .sa-tools-item small, .sa-tools-check { display: none; }
  .sa-tools-item { appearance: none; font: inherit; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #334155; font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .sa-tools-item i { display: grid; color: #64748b; font-style: normal; }
  .sa-tools-item i svg { width: 16px; height: 16px; }
  .sa-tools-item span { display: block; }
  .sa-tools-item b { font-weight: 600; }
  .sa-tools-item.is-active { background: #f0f9f8; border-color: rgba(42, 157, 143, 0.35); color: #0f766e; }
  .sa-tools-item.is-active i { color: #0f766e; }
}