/* Social Autopilot — cream/coral, đồng bộ giao diện Sales Agent */
.zl-autopost { display: none; }
.zl-app.is-autopost { grid-template-columns: var(--zl-nav-w) minmax(0, 1fr) !important; }
.zl-app.is-autopost > .zl-sidebar,
.zl-app.is-autopost > .zl-chat,
.zl-app.is-autopost > .zl-profile,
.zl-app.is-autopost > .zl-board,
.zl-app.is-autopost > .zl-config { display: none !important; }
.zl-app.is-autopost > .zl-autopost { display: flex; }
@media (max-width: 820px) {
  .zl-app.is-autopost { grid-template-columns: minmax(0, 1fr) !important; }
}

.zl-autopost {
  --ap-panel: #ffffff;
  --ap-panel-2: #f4f7fb;
  --ap-line: #e2e9f2;
  --ap-line-2: #d3deeb;
  --ap-text: #0f172a;
  --ap-muted: #526071;
  --ap-dim: #7a8696;
  --ap-accent: #2563eb;
  --ap-accent-2: #1d4ed8;
  --ap-green: #2a9d8f;
  --ap-amber: #d98a1c;
  --ap-red: #dc2626;
  --ap-violet: #7c6cf0;
  --ap-blue: #3b82f6;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(ellipse 60% 40% at 8% 0%, rgba(96, 165, 250, 0.14), transparent 55%),
    radial-gradient(ellipse 50% 35% at 95% 5%, rgba(37, 99, 235, 0.1), transparent 50%),
    linear-gradient(180deg, #f4f7fb 0%, #eef3f9 100%);
  color: var(--ap-text);
  font-size: 13.5px;
  overflow: hidden;
}
.zl-autopost * { box-sizing: border-box; }
.ap-scroll { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 40px; }
.ap-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px; padding: 14px 16px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(211, 222, 235, 0.8);
  box-shadow: 0 1px 2px rgba(15, 40, 80, 0.04);
}
.ap-head-txt { flex: 1; min-width: 0; }
.ap-head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-head p { margin: 3px 0 0; color: var(--ap-muted); font-size: 13px; }
.ap-head .ap-btn .vx-ic { width: 16px; height: 16px; }
.ap-logo { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #111827; color: #fff; }
.ap-logo .vx-ic { width: 19px; height: 19px; stroke-width: 1.8; margin: 1px 2px 0 0; }
.ap-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 0; letter-spacing: 0; }
.ap-mode i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ap-mode.sandbox { color: #b45309; border-color: rgba(232, 162, 58, 0.5); background: rgba(232, 162, 58, 0.14); }
.ap-mode.live { color: #1f7a6f; border-color: rgba(42, 157, 143, 0.45); background: rgba(42, 157, 143, 0.12); }

.ap-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; padding: 4px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--ap-line); border-radius: 999px; width: max-content; max-width: 100%; }
.ap-tabs::-webkit-scrollbar { display: none; }
.ap-tab { appearance: none; background: none; border: 0; color: var(--ap-muted); font: inherit; font-weight: 700; padding: 7px 14px; cursor: pointer; border-radius: 999px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.ap-tab:hover { color: var(--ap-text); background: rgba(37, 99, 235, 0.08); }
.ap-tab.on { color: #fff; background: linear-gradient(180deg, #3b82f6, #2563eb); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); }
.ap-tab em { font-style: normal; font-size: 10.5px; background: var(--ap-red); color: #fff; border-radius: 999px; padding: 1px 6px; }
.ap-tab.on em { background: #fff; color: var(--ap-accent-2); }

.ap-btn { appearance: none; font: inherit; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 8px 16px; cursor: pointer; border: 1.5px solid var(--ap-line-2); background: #fff; color: var(--ap-muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.ap-btn:hover { border-color: var(--ap-accent); color: var(--ap-accent-2); }
.ap-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ap-btn.primary { background: linear-gradient(180deg, #3b82f6, #2563eb); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25); font-weight: 800; }
.ap-btn.primary:hover { background: #1d4ed8; color: #fff; }
.ap-btn.danger { color: #b91c1c; border-color: rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.05); }
.ap-btn.ghost { background: transparent; border-color: transparent; }
.ap-btn.ghost:hover { background: rgba(37, 99, 235, 0.08); }
.ap-btn.sm { padding: 5px 11px; font-size: 12px; }
.ap-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ap-spacer { flex: 1; }

.ap-card { background: var(--ap-panel); border: 1.5px solid var(--ap-line); border-radius: 16px; padding: 16px; box-shadow: 0 1px 3px rgba(15, 40, 80, 0.06); }
.ap-card + .ap-card { margin-top: 12px; }
.ap-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-card h3 small { font-weight: 500; color: var(--ap-muted); font-size: 12px; letter-spacing: 0; }
.ap-muted { color: var(--ap-muted); }
.ap-dim { color: var(--ap-dim); font-size: 12px; }
.ap-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-grid-2 > .ap-card + .ap-card, .ap-grid-3 > .ap-card + .ap-card { margin-top: 0; }
.ap-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .ap-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ap-grid-2 { grid-template-columns: 1fr; } }

.ap-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (max-width: 1100px) { .ap-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-kpi { background: var(--ap-panel); border: 1.5px solid var(--ap-line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(15, 40, 80, 0.05); }
.ap-kpi b { display: block; font-size: 26px; font-weight: 800; margin-top: 4px; letter-spacing: -0.02em; }
.ap-kpi span { color: var(--ap-muted); font-size: 12px; font-weight: 700; }
.ap-kpi small { color: var(--ap-dim); font-size: 11.5px; }
.ap-kpi.warn b { color: var(--ap-amber); }
.ap-kpi.bad b { color: var(--ap-red); }
.ap-kpi.good b { color: var(--ap-green); }

.ap-banner { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid rgba(232, 162, 58, 0.45); background: rgba(232, 162, 58, 0.1); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.ap-banner.info { border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.07); }
.ap-banner.bad { border-color: rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.06); }
.ap-banner.good { border-color: rgba(42, 157, 143, 0.4); background: rgba(42, 157, 143, 0.08); }
.ap-banner > span { font-size: 18px; line-height: 1.2; }
.ap-banner p { margin: 2px 0 0; color: var(--ap-muted); }
.ap-banner a { color: var(--ap-accent-2); font-weight: 700; }

.ap-list { display: flex; flex-direction: column; }
.ap-item { display: flex; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--ap-line); }
.ap-item:first-child { border-top: 0; }
.ap-item-main { flex: 1; min-width: 0; }
.ap-item-main b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-item-main small { color: var(--ap-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-item-when { text-align: right; font-size: 12px; color: var(--ap-muted); white-space: nowrap; }
.ap-empty { text-align: center; color: var(--ap-muted); padding: 28px 10px; }
.ap-empty b { display: block; color: var(--ap-text); font-size: 14px; margin-bottom: 6px; }

.ap-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; border: 1px solid transparent; white-space: nowrap; }
.ap-badge.gray { color: #526071; background: #e6edf5; }
.ap-badge.blue { color: #1d4ed8; background: rgba(59, 130, 246, 0.12); }
.ap-badge.green { color: #1f7a6f; background: rgba(42, 157, 143, 0.14); }
.ap-badge.amber { color: #b45309; background: rgba(232, 162, 58, 0.18); }
.ap-badge.red { color: #b91c1c; background: rgba(220, 38, 38, 0.1); }
.ap-badge.violet { color: #5b4bd6; background: rgba(124, 108, 240, 0.14); }
.ap-badge.cyan { color: #1d4ed8; background: rgba(37, 99, 235, 0.12); }
.ap-badge.outline { background: #fff; border-color: var(--ap-line-2); color: var(--ap-muted); }

.ap-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; min-width: 0; }
.ap-field > span { font-size: 12px; font-weight: 700; color: var(--ap-muted); }
.ap-field > span i { font-style: normal; font-weight: 500; color: var(--ap-dim); }
.zl-autopost input[type="text"],
.zl-autopost input[type="url"],
.zl-autopost input[type="number"],
.zl-autopost input[type="time"],
.zl-autopost input[type="datetime-local"],
.zl-autopost select,
.zl-autopost textarea {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--ap-line-2);
  color: var(--ap-text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  outline: none;
  color-scheme: light;
}
.zl-autopost textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.zl-autopost input:focus, .zl-autopost select:focus, .zl-autopost textarea:focus { border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.ap-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.ap-check input { accent-color: var(--ap-accent); width: 16px; height: 16px; }

.ap-steps { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ap-step { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--ap-panel); border: 1.5px solid var(--ap-line); color: var(--ap-muted); font-weight: 700; font-size: 12.5px; cursor: default; }
.ap-step i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ap-panel-2); font-size: 11.5px; }
.ap-step.on { color: var(--ap-text); border-color: var(--ap-accent); }
.ap-step.on i { background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; }
.ap-step.done { cursor: pointer; color: var(--ap-text); }
.ap-step.done i { background: rgba(42, 157, 143, 0.16); color: var(--ap-green); }

.ap-facts { display: flex; flex-direction: column; gap: 6px; }
.ap-fact { display: grid; grid-template-columns: 150px minmax(0, 1fr) 32px; gap: 6px; align-items: center; }
.ap-fact button { appearance: none; background: none; border: 0; color: var(--ap-dim); cursor: pointer; font-size: 16px; }
.ap-fact button:hover { color: var(--ap-red); }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip { appearance: none; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1.5px dashed var(--ap-line-2); background: transparent; color: var(--ap-muted); cursor: pointer; }
.ap-chip:hover, .ap-chip.on { color: var(--ap-accent-2); border-style: solid; border-color: var(--ap-accent); background: rgba(37, 99, 235, 0.08); }
.ap-lock { font-size: 11px; color: var(--ap-accent-2); font-weight: 700; }

.ap-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ap-var { background: var(--ap-panel); border: 1.5px solid var(--ap-line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.ap-var:hover { border-color: var(--ap-accent); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15, 40, 80, 0.08); }
.ap-var.on { border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.ap-var-angle { font-size: 11.5px; font-weight: 800; color: var(--ap-accent-2); text-transform: uppercase; letter-spacing: 0.04em; }
.ap-var-text { white-space: pre-wrap; line-height: 1.5; color: #2a3442; max-height: 260px; overflow: auto; font-size: 13px; }
.ap-tags { color: #385898; font-size: 12.5px; }

.ap-editor { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .ap-editor { grid-template-columns: 1fr; } }
.ap-counter { font-size: 11.5px; color: var(--ap-dim); text-align: right; margin-top: -6px; margin-bottom: 8px; }
.ap-media { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-thumb { position: relative; width: 78px; height: 78px; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--ap-line-2); background: #fff; }
.ap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; font-size: 12px; line-height: 20px; padding: 0; }
.ap-thumb.add { display: grid; place-items: center; color: var(--ap-dim); cursor: pointer; border-style: dashed; font-size: 22px; }
.ap-thumb.add:hover { color: var(--ap-accent); border-color: var(--ap-accent); }
.ap-thumb.add { align-content: center; gap: 2px; }
.ap-thumb.add small { font-size: 10px; font-weight: 700; }
.ap-thumb.video { width: 140px; background: #111; }
.ap-thumb.video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); pointer-events: none; }
.ap-thumb-dur { position: absolute; left: 5px; bottom: 5px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.65); border-radius: 4px; padding: 1px 5px; }
.ap-thumb.uploading { width: 140px; display: grid; place-items: center; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ap-dim); border-style: dashed; background: repeating-linear-gradient(45deg, #fff, #fff 8px, #f4f7fb 8px, #f4f7fb 16px); }

.ap-check-list { display: flex; flex-direction: column; gap: 6px; }
.ap-issue { display: flex; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--ap-panel-2); border-left: 3px solid var(--ap-dim); font-size: 12.5px; }
.ap-issue.error { border-left-color: var(--ap-red); background: rgba(220, 38, 38, 0.05); }
.ap-issue.warning { border-left-color: var(--ap-amber); background: rgba(232, 162, 58, 0.08); }
.ap-issue.info { border-left-color: var(--ap-green); }
.ap-issue small { display: block; color: var(--ap-muted); margin-top: 2px; }
.ap-score { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ap-score b { font-size: 24px; }
.ap-score.ok b { color: var(--ap-green); }
.ap-score.warn b { color: var(--ap-amber); }
.ap-score.block b { color: var(--ap-red); }

/* Facebook-like preview */
.ap-fb { background: #fff; color: #050505; border-radius: 12px; overflow: hidden; font-family: Helvetica, Arial, sans-serif; font-size: 14px; border: 1px solid #e4e6eb; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.ap-fb-head { display: flex; gap: 8px; align-items: center; padding: 12px 14px 6px; }
.ap-fb-ava { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; display: grid; place-items: center; font-weight: 800; overflow: hidden; flex: none; }
.ap-fb-ava img { width: 100%; height: 100%; object-fit: cover; }
.ap-fb-head b { display: block; font-size: 14.5px; }
.ap-fb-head small { color: #65676b; font-size: 12.5px; }
.ap-fb-text { padding: 4px 14px 10px; white-space: pre-wrap; line-height: 1.35; word-break: break-word; }
.ap-fb-text a { color: #385898; font-weight: 600; cursor: pointer; }
.ap-fb-text .tag { color: #385898; }
.ap-fb-video { background: #000; }
.ap-fb-video video { display: block; width: 100%; max-height: 460px; }
.ap-fb-imgs { display: grid; gap: 2px; background: #e4e6eb; }
.ap-fb-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1 / 1; }
.ap-fb-imgs.n1 img { aspect-ratio: auto; max-height: 420px; }
.ap-fb-imgs.n2 { grid-template-columns: 1fr 1fr; }
.ap-fb-imgs.n3, .ap-fb-imgs.n4 { grid-template-columns: 1fr 1fr; }
.ap-fb-link { border-top: 1px solid #e4e6eb; background: #f0f2f5; padding: 10px 14px; color: #65676b; font-size: 12.5px; word-break: break-all; }
.ap-fb-bar { display: flex; justify-content: space-around; border-top: 1px solid #e4e6eb; margin: 0 14px; padding: 6px 0; color: #65676b; font-weight: 600; font-size: 13.5px; }
.ap-fb-note { color: var(--ap-dim); font-size: 11.5px; margin-top: 6px; text-align: center; }

.ap-pages-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ap-page-opt { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--ap-line-2); background: #fff; cursor: pointer; }
.ap-page-opt.on { border-color: var(--ap-accent); background: rgba(37, 99, 235, 0.06); }
.ap-page-opt.off { opacity: 0.5; cursor: not-allowed; }
.ap-page-opt input { accent-color: var(--ap-accent); }
.ap-page-opt b { display: block; }
.ap-pava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #1877f2, #4f8cff); display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; overflow: hidden; }
.ap-pava img { width: 100%; height: 100%; object-fit: cover; }
.ap-pava.sb { background: linear-gradient(135deg, #3b82f6, #e8a23a); }
.ap-when { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.ap-radio { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--ap-line-2); background: #fff; cursor: pointer; font-weight: 700; }
.ap-radio.on { border-color: var(--ap-accent); background: rgba(37, 99, 235, 0.07); color: var(--ap-accent-2); }
.ap-radio input { accent-color: var(--ap-accent); }

.ap-table { width: 100%; border-collapse: collapse; }
.ap-table th { text-align: left; font-size: 11.5px; color: var(--ap-dim); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px; border-bottom: 1.5px solid var(--ap-line); white-space: nowrap; }
.ap-table td { padding: 10px; border-bottom: 1px solid var(--ap-line); vertical-align: middle; }
.ap-table tr:last-child td { border-bottom: 0; }
.ap-table tbody tr:hover td { background: rgba(37, 99, 235, 0.03); }
.ap-table td.t { max-width: 320px; }
.ap-table td.t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-table td.t small { color: var(--ap-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-table-wrap { overflow-x: auto; }
.ap-err { color: #b91c1c; font-size: 12.5px; }
.ap-err small { display: block; color: var(--ap-muted); }

.ap-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ap-cal-head h3 { margin: 0 8px 0 0; font-size: 17px; text-transform: capitalize; }
.ap-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--ap-line); border: 1.5px solid var(--ap-line); border-radius: 14px; overflow: hidden; }
.ap-cal-dow { background: var(--ap-panel-2); padding: 7px; font-size: 11.5px; font-weight: 800; color: var(--ap-muted); text-align: center; }
.ap-cal-day { background: #fff; min-height: 104px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-cal-day.out { background: #f7f9fc; }
.ap-cal-day.out .ap-cal-n { color: #b4c0ce; }
.ap-cal-day.today .ap-cal-n { background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; }
.ap-cal-n { font-size: 12px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.ap-cal-ev { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-left: 3px solid; background: var(--ap-panel-2); }
.ap-cal-ev.blue { border-color: var(--ap-blue); background: rgba(59, 130, 246, 0.08); }
.ap-cal-ev.green { border-color: var(--ap-green); background: rgba(42, 157, 143, 0.1); }
.ap-cal-ev.amber { border-color: var(--ap-amber); background: rgba(232, 162, 58, 0.12); }
.ap-cal-ev.red { border-color: var(--ap-red); background: rgba(220, 38, 38, 0.07); }
.ap-cal-ev.violet { border-color: var(--ap-violet); background: rgba(124, 108, 240, 0.1); }
.ap-cal-ev.gray { border-color: var(--ap-dim); }
.ap-cal-ev.planned { border-left-style: dashed; opacity: 0.85; }
.ap-cal-more { font-size: 11px; color: var(--ap-muted); padding-left: 4px; }
.ap-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--ap-muted); }
.ap-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; background: var(--c); }

.ap-page-card { display: flex; gap: 12px; align-items: center; }
.ap-page-card .ap-pava { width: 44px; height: 44px; font-size: 18px; }
.ap-times { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ap-times input[type="time"] { width: 110px; }

.ap-switch { position: relative; width: 42px; height: 24px; flex: none; }
.ap-switch input { opacity: 0; width: 0; height: 0; }
.ap-switch span { position: absolute; inset: 0; background: var(--ap-line-2); border-radius: 999px; cursor: pointer; transition: 0.2s; }
.ap-switch span::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.ap-switch input:checked + span { background: var(--ap-green); }
.ap-switch input:checked + span::before { transform: translateX(18px); }

.ap-weekdays { display: flex; gap: 4px; flex-wrap: wrap; }
.ap-weekdays label { cursor: pointer; }
.ap-weekdays input { display: none; }
.ap-weekdays span { display: inline-block; min-width: 38px; text-align: center; padding: 6px 8px; border-radius: 999px; border: 1.5px solid var(--ap-line-2); background: #fff; font-weight: 700; font-size: 12px; color: var(--ap-muted); }
.ap-weekdays input:checked + span { background: rgba(37, 99, 235, 0.1); border-color: var(--ap-accent); color: var(--ap-accent-2); }

.ap-click { cursor: pointer; }
.ap-table td.ap-click:hover b, .ap-table tr.ap-click:hover td.t b { color: var(--ap-accent-2); }
.ap-table tr.hl td { background: rgba(37, 99, 235, 0.08); }
.ap-table tr.off td { opacity: 0.55; }
.ap-pcell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ap-pcell b, .ap-pcell > span { white-space: nowrap; }
.ap-btn.ap-linkbtn { padding: 2px 9px; font-size: 11.5px; color: var(--ap-accent-2); border-width: 1px; }
.ap-nolink { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--ap-dim); background: var(--ap-panel-2); border: 1px dashed var(--ap-line-2); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ap-pd-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.ap-pd-head h3 { white-space: normal; }
.ap-linkbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; border: 1.5px solid var(--ap-line); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
.ap-linkbar-l { font-weight: 700; font-size: 12.5px; color: var(--ap-muted); white-space: nowrap; }
.ap-linkbar code { flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; background: var(--ap-panel-2); border: 0; padding: 4px 8px; border-radius: 8px; color: var(--ap-muted); }
.ap-fb-link a { color: #385898; }

.ap-metrics { display: flex; gap: 14px; font-size: 12.5px; }
.ap-metrics b { font-size: 14px; }
.ap-vtools { margin-top: 8px; gap: 10px; align-items: center; }
.ap-vs-bar { width: 100%; max-width: 320px; height: 8px; border-radius: 999px; background: var(--ap-panel-2); overflow: hidden; }
.ap-vs-bar i { display: block; height: 100%; background: var(--ap-accent); transition: width 0.4s; }

/* Trình tạo video */
.vx-ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.vx .ap-btn { display: inline-flex; align-items: center; gap: 6px; }
.vx .ap-btn.sm .vx-ic, .vx-mini .vx-ic, .vx-link .vx-ic { width: 14px; height: 14px; }
.vx-title b { display: flex; align-items: center; gap: 8px; }
.vx-title b .vx-ic { width: 20px; height: 20px; color: var(--ap-accent); }
.vx-title small { padding-left: 28px; }
.vx-len { display: inline-flex; align-items: center; gap: 5px; }
.vx-len b { color: var(--ap-text); }
.vx-tools button { display: grid; place-items: center; }
.vx-tools .vx-ic { width: 13px; height: 13px; }
.vx-add > span { display: inline-flex; align-items: center; gap: 5px; }
.vx-scene.end .vx-thumb { color: var(--ap-accent); }
.vx-scene.end .vx-thumb > .vx-ic { width: 22px; height: 22px; }
.vx-h .vx-ic { width: 16px; height: 16px; color: var(--ap-accent); }
.vx-link { display: inline-flex; align-items: center; gap: 5px; }
.vx { display: flex; flex-direction: column; gap: 14px; }
.vx-top { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; background: #fff; border: 1px solid var(--ap-line); border-radius: 16px; padding: 10px 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); }
.vx-title b { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.vx-title small { display: block; color: var(--ap-dim); font-size: 12px; margin-top: 1px; }
.vx-aspects { display: flex; gap: 4px; background: var(--ap-panel-2); padding: 4px; border-radius: 12px; margin: 0 auto; }
.vx-asp { display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 6px 12px 6px 10px; border-radius: 9px; cursor: pointer; font: inherit; color: var(--ap-muted); text-align: left; }
.vx-asp:hover { color: var(--ap-text); }
.vx-asp.on { background: #fff; color: var(--ap-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.vx-asp b { display: block; font-size: 13px; }
.vx-asp small { display: block; font-size: 10.5px; color: var(--ap-dim); white-space: nowrap; }
.vx-asp-ic { display: block; flex: none; border: 2px solid currentColor; border-radius: 3px; }
.vx-asp.on .vx-asp-ic { border-color: var(--ap-accent); }
.vx-asp-ic.portrait { width: 11px; height: 19px; }
.vx-asp-ic.feed { width: 14px; height: 17px; }
.vx-asp-ic.square { width: 16px; height: 16px; }
.vx-asp-ic.landscape { width: 22px; height: 13px; }
.vx-top-r { display: flex; align-items: center; gap: 10px; }
.vx-len { font-size: 12.5px; color: var(--ap-muted); font-weight: 600; white-space: nowrap; }

.vx-body { display: grid; grid-template-columns: 210px minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.vx-rail, .vx-insp { background: #fff; border: 1px solid var(--ap-line); border-radius: 16px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); }
.vx-rail { padding: 12px; position: sticky; top: 0; }
.vx-rail-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; }
.vx-rail-h span { font-size: 12px; color: var(--ap-dim); }
.vx-scenes { display: flex; flex-direction: column; gap: 6px; }
.vx-scene { position: relative; display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 12px; border: 1.5px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.vx-scene:hover { background: var(--ap-panel-2); }
.vx-scene.on { border-color: var(--ap-accent); background: rgba(37, 99, 235, 0.06); }
.vx-scene.ghost { cursor: default; }
.vx-thumb { position: relative; width: 56px; height: 56px; flex: none; border-radius: 9px; overflow: hidden; background: var(--ap-panel-2); display: grid; place-items: center; font-size: 22px; }
.vx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-num, .vx-dur { position: absolute; background: rgba(0, 0, 0, 0.66); color: #fff; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 5px; line-height: 1.4; }
.vx-num { top: 3px; left: 3px; }
.vx-dur { bottom: 3px; right: 3px; }
.vx-scene-t { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vx-scene-t i { color: var(--ap-dim); font-style: normal; }
.vx-scene-t small { display: block; color: var(--ap-dim); font-size: 11.5px; }
.vx-scene.end .vx-thumb { background: rgba(37, 99, 235, 0.1); }
.vx-tools { position: absolute; right: 4px; top: 4px; display: none; gap: 2px; }
.vx-scene:hover .vx-tools { display: flex; }
.vx-tools button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--ap-line); background: #fff; cursor: pointer; font-size: 11px; line-height: 1; padding: 0; color: var(--ap-muted); }
.vx-tools button:hover { color: var(--ap-accent); border-color: var(--ap-accent); }
.vx-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 8px; border: 1.5px dashed var(--ap-line-2); border-radius: 12px; cursor: pointer; color: var(--ap-accent); font-weight: 700; font-size: 13px; text-align: center; }
.vx-add small { color: var(--ap-dim); font-weight: 500; font-size: 11px; }
.vx-add:hover { background: rgba(37, 99, 235, 0.05); border-color: var(--ap-accent); }
.vx-ai { margin-top: 10px; width: 100%; border: 1px solid var(--ap-line); border-radius: 10px; padding: 9px 8px; font: inherit; font-weight: 700; font-size: 12.5px; color: var(--ap-text); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: border-color 0.15s, color 0.15s; }
.vx-ai .vx-ic { color: var(--ap-accent); }
.vx-ai:hover { border-color: var(--ap-accent); color: var(--ap-accent); }
.vx-ai:disabled { opacity: 0.7; cursor: wait; }

.vx-stage { position: sticky; top: 0; background: radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.16), transparent 42%), radial-gradient(circle at 85% 90%, rgba(96, 165, 250, 0.2), transparent 45%), linear-gradient(160deg, #f8fbff 0%, #e8f0fc 60%, #dbe7fa 100%); border: 1px solid var(--ap-line); border-radius: 18px; padding: 28px 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 440px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); }
.vx-stage.drop { border-color: var(--ap-accent); background-color: #f3f7ff; }
.vx-frame { position: relative; background: #fff; box-sizing: content-box; border: 9px solid #1c1c1e; border-radius: 36px; overflow: hidden; box-shadow: 0 0 0 1.5px #48484a, 0 40px 70px -22px rgba(15, 40, 80, 0.5), 0 18px 30px -16px rgba(0, 0, 0, 0.3); display: grid; place-items: center; }
.vx-frame.square, .vx-frame.landscape { border-width: 8px; border-radius: 22px; }
.vx-frame.portrait { aspect-ratio: 9 / 16; width: min(100% - 18px, calc(min(58vh, 620px) * 0.5625)); }
.vx-frame.feed { aspect-ratio: 4 / 5; width: min(100% - 18px, calc(min(58vh, 600px) * 0.8)); }
.vx-frame.square { aspect-ratio: 1; width: min(100% - 16px, 56vh, 540px); }
.vx-frame.landscape { aspect-ratio: 16 / 9; width: calc(100% - 16px); }
.vx-frame img, .vx-frame video { width: 100%; height: 100%; object-fit: contain; display: block; }
.vx-frame video { background: #000; }
.vx-busy { position: absolute; top: 10px; right: 10px; background: #fff; border-radius: 999px; padding: 7px; display: none; line-height: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.vx-busy .ap-spin, .vx-wait .ap-spin { border-color: rgba(82, 96, 113, 0.25); border-top-color: var(--ap-accent); }
.vx-wait .ap-spin { width: 26px; height: 26px; border-width: 3px; }
.vx-stage.loading .vx-busy { display: block; }
.vx-wait { color: var(--ap-muted); text-align: center; display: grid; gap: 10px; justify-items: center; padding: 24px; font-size: 13px; line-height: 1.5; }
.vx-wait b { color: var(--ap-text); font-size: 14px; }
.vx-wait small { color: var(--ap-dim); }
.vx-wait .ap-vs-bar { background: rgba(15, 40, 80, 0.1); width: 200px; }
.vx-empty { position: absolute; inset: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; border: 2px dashed var(--ap-line-2); border-radius: 12px; color: var(--ap-muted); font-size: 13px; line-height: 1.5; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.vx-empty:hover { border-color: var(--ap-accent); background: rgba(37, 99, 235, 0.04); }
.vx-empty-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--ap-accent); background: rgba(37, 99, 235, 0.1); }
.vx-empty-ic .vx-ic { width: 28px; height: 28px; stroke-width: 1.6; }
.vx-empty b { color: var(--ap-text); font-size: 15px; }
.vx-empty small { color: var(--ap-dim); font-size: 12px; }
.vx-empty .ap-btn { margin-top: 4px; pointer-events: none; }
.vx-stage-foot { width: 100%; display: flex; align-items: center; gap: 10px; color: var(--ap-muted); font-size: 12.5px; flex-wrap: wrap; font-weight: 600; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(211, 222, 235, 0.7); border-radius: 12px; padding: 8px 12px; }
.vx-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ap-dim); font-weight: 500; }
.vx-live i { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2); }
.vx-ok { color: #1f9d63; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

.vx-insp { overflow: hidden; }
.vx-tabs { display: flex; border-bottom: 1px solid var(--ap-line); padding: 0 6px; }
.vx-tabs button { flex: 1; border: 0; background: none; font: inherit; font-weight: 700; font-size: 13px; color: var(--ap-muted); padding: 13px 4px 11px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.vx-tabs button:hover { color: var(--ap-text); }
.vx-tabs button.on { color: var(--ap-accent); border-bottom-color: var(--ap-accent); }
.vx-panel { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.vx-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.vx-h small { font-weight: 500; color: var(--ap-dim); font-size: 12px; }
.vx-link { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--ap-accent); cursor: pointer; }
.vx-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vx-f > label { font-size: 12px; font-weight: 700; color: var(--ap-muted); display: flex; align-items: center; gap: 6px; }
.vx-f > label i, .vx-h i { font-weight: 500; font-style: normal; color: var(--ap-dim); }
.vx-f > small, .vx-muted { font-size: 11.5px; color: var(--ap-dim); line-height: 1.45; margin: 0; }
.vx-panel input[type="text"], .vx-panel textarea, .vx-panel select { width: 100%; border: 1px solid var(--ap-line); border-radius: 10px; padding: 9px 11px; font: inherit; background: #fff; color: var(--ap-text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.vx-panel input[type="text"]:focus, .vx-panel textarea:focus, .vx-panel select:focus { border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.vx-panel textarea { resize: vertical; line-height: 1.45; }
.vx-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vx-seg { display: flex; background: var(--ap-panel-2); border-radius: 10px; padding: 3px; gap: 2px; }
.vx-seg button { flex: 1; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ap-muted); padding: 7px 6px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.vx-seg button:hover { color: var(--ap-text); }
.vx-seg button.on { background: #fff; color: var(--ap-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.vx-note { font-size: 11.5px; color: var(--ap-dim); background: var(--ap-panel-2); border-radius: 10px; padding: 8px 10px; line-height: 1.35; }
.vx-focus { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 1; max-width: 150px; border-radius: 10px; background-size: cover; background-position: center; overflow: hidden; }
.vx-focus::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); }
.vx-focus button { position: relative; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.vx-focus button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transition: all 0.15s; }
.vx-focus button:hover::after { background: #fff; }
.vx-focus button.on::after { width: 15px; height: 15px; background: var(--ap-accent); box-shadow: 0 0 0 3px #fff; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-chips button { border: 1px solid var(--ap-line); background: #fff; border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; color: var(--ap-muted); cursor: pointer; }
.vx-chips button:hover { color: var(--ap-text); border-color: var(--ap-line-2); }
.vx-chips button.on { border-color: var(--ap-accent); color: var(--ap-accent); background: rgba(37, 99, 235, 0.07); font-weight: 700; }
.vx-val { margin-left: auto; color: var(--ap-text); }
.vx-panel input[type="range"] { width: 100%; accent-color: var(--ap-accent); }
.vx-mini { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ap-line); background: #fff; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ap-text); cursor: pointer; }
.vx-mini.block { justify-content: center; width: 100%; padding: 9px; }
.vx-mini:hover { border-color: var(--ap-accent); color: var(--ap-accent); }
.vx-f > small .vx-mini { padding: 2px 8px; margin-left: 4px; }
.vx-row { display: flex; gap: 8px; align-items: center; }
.vx-row select { flex: 1; }
.vx-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vx-style { display: flex; flex-direction: column; gap: 3px; border: 1.5px solid var(--ap-line); background: #fff; border-radius: 12px; padding: 6px 6px 8px; cursor: pointer; text-align: left; font: inherit; transition: border-color 0.15s, transform 0.15s; }
.vx-style:hover { transform: translateY(-1px); border-color: var(--ap-line-2); }
.vx-style b { font-size: 12.5px; margin-top: 3px; }
.vx-style small { font-size: 10.5px; color: var(--ap-dim); line-height: 1.3; }
.vx-style.on { border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.vx-pals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.vx-pal { aspect-ratio: 1; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ap-line); cursor: pointer; background: linear-gradient(135deg, var(--m) 0 58%, var(--a) 58% 100%); padding: 0; transition: transform 0.15s; }
.vx-pal:hover { transform: scale(1.08); }
.vx-pal.on { box-shadow: 0 0 0 2.5px var(--ap-accent); }
.vx-colors label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; line-height: 1.25; }
.vx-colors small { display: block; font-weight: 500; color: var(--ap-dim); font-size: 11px; }
.vx-colors input[type="color"] { flex: none; width: 36px; height: 36px; border: 1px solid var(--ap-line); border-radius: 10px; padding: 2px; background: #fff; cursor: pointer; }

.vx-mock { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #222; }
.vx-mock i, .vx-mock b { position: absolute; display: block; z-index: 1; }
.vx-mock .mk-img { background: var(--img) center / cover; }
.mk-showcase { background: #111; }
.mk-showcase::before { content: ""; position: absolute; inset: -10%; background: var(--img) center / cover; filter: blur(6px) brightness(0.45); }
.mk-showcase .mk-img { left: 14%; right: 14%; top: 16%; height: 46%; border-radius: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
.mk-showcase .mk-t1 { left: 18%; right: 18%; top: 70%; height: 12%; background: var(--m); border-radius: 5px; }
.mk-showcase .mk-t2 { left: 30%; right: 30%; top: 6%; height: 5%; background: rgba(255, 255, 255, 0.85); border-radius: 3px; }
.mk-promo { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0 6px, transparent 6px 12px), var(--m); }
.mk-promo .mk-img { left: 16%; right: 16%; top: 16%; height: 44%; border: 3px solid #fff; border-radius: 6px; transform: rotate(-4deg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
.mk-promo .mk-t1 { left: 12%; right: 12%; top: 68%; height: 9%; background: var(--a); border-radius: 2px; }
.mk-promo .mk-t2 { left: 24%; right: 24%; top: 81%; height: 6%; background: var(--a); opacity: 0.8; border-radius: 2px; }
.mk-minimal { background: #f5f8fb; }
.mk-minimal .mk-img { left: 16%; right: 16%; top: 14%; height: 48%; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); }
.mk-minimal .mk-t1 { left: 22%; right: 22%; top: 70%; height: 6%; background: #0f172a; border-radius: 2px; }
.mk-minimal .mk-t2 { left: 42%; right: 42%; top: 80%; height: 3%; background: var(--m); border-radius: 2px; }
.mk-bold .mk-img { inset: 0; z-index: 0; }
.mk-bold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.75)); }
.mk-bold .mk-t1 { left: 10%; right: 10%; top: 64%; height: 11%; background: #fff; z-index: 2; }
.mk-bold .mk-t2 { left: 10%; right: 46%; top: 79%; height: 11%; background: var(--a); z-index: 2; }
.mk-magazine { background: var(--m); }
.mk-magazine .mk-img { left: 12%; right: 20%; top: 14%; height: 46%; box-shadow: 6px 6px 0 var(--a); }
.mk-magazine .mk-t1 { left: 10%; right: 14%; top: 70%; height: 12%; background: #fff; border-left: 4px solid var(--a); }
.mk-magazine .mk-t2 { left: 10%; right: 50%; top: 5%; height: 5%; background: rgba(255, 255, 255, 0.85); }
.mk-luxury { background: #0c0c0c; }
.mk-luxury .mk-img { left: 16%; right: 16%; top: 14%; height: 48%; border: 1.5px solid var(--a); }
.mk-luxury .mk-t1 { left: 32%; right: 32%; top: 70%; height: 1.5px; background: var(--a); }
.mk-luxury .mk-t2 { left: 20%; right: 20%; top: 75%; height: 4%; background: var(--a); opacity: 0.85; }

@media (max-width: 1320px) { .vx-body { grid-template-columns: 190px minmax(0, 1fr) 330px; } .vx-asp small { display: none; } }
@media (max-width: 1080px) {
  .vx-body { grid-template-columns: minmax(0, 1fr); }
  .vx-rail, .vx-stage { position: static; }
  .vx-scenes { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .vx-scene { flex-direction: column; align-items: stretch; width: 104px; flex: none; }
  .vx-thumb { width: 100%; height: 80px; }
  .vx-add { width: 104px; flex: none; }
  .vx-aspects { margin: 0; }
}
@media (max-width: 640px) { .vx-2 { grid-template-columns: 1fr; } .vx-top-r { width: 100%; justify-content: flex-end; } }
.ap-table th.ap-num, .ap-table td.ap-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-pst-thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; font-size: 18px; background: #f4f7fb; border: 1px solid var(--ap-line); }
.ap-pst-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-table td.t small .ap-badge { margin-top: 3px; }

.ap-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(15, 23, 42, 0.45) !important; display: grid; place-items: center; padding: 16px; }
.ap-modal-card { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: #ffffff; color: var(--ap-text); border: 1.5px solid var(--ap-line-2); border-radius: 18px; padding: 20px; font-size: 13.5px; box-shadow: 0 24px 60px rgba(15, 40, 80, 0.25); }
.ap-modal-card.wide { width: min(860px, 100%); }
.ap-modal-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.ap-modal-card ul { margin: 8px 0; padding-left: 18px; color: var(--ap-muted); line-height: 1.6; }
.ap-modal-card code { background: #fff; border: 1px solid var(--ap-line); padding: 1px 6px; border-radius: 6px; color: var(--ap-accent-2); }
.ap-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.ap-toast { position: fixed; right: 18px; bottom: 18px; z-index: 9100; background: #ffffff; color: #0f172a; border: 1.5px solid #d3deeb; border-left: 4px solid #2563eb; border-radius: 12px; padding: 10px 14px; font-size: 13px; max-width: 380px; box-shadow: 0 10px 30px rgba(15, 40, 80, 0.18); }
.ap-toast.bad { border-left-color: #dc2626; }
.ap-toast.good { border-left-color: #2a9d8f; }

.ap-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: apSpin 0.7s linear infinite; }
@keyframes apSpin { to { transform: rotate(360deg); } }
.ap-loading { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 40px; color: var(--ap-muted); }
.ap-loading .ap-spin, .ap-btn:not(.primary) .ap-spin { border-color: rgba(82, 96, 113, 0.25); border-top-color: var(--ap-accent); }
.ap-loading .ap-spin { width: 20px; height: 20px; }
.ap-act { display: flex; flex-direction: column; gap: 0; max-height: 320px; overflow: auto; }
.ap-act div { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ap-line); font-size: 12.5px; }
.ap-act div:first-child { border-top: 0; }
.ap-act time { color: var(--ap-dim); white-space: nowrap; font-size: 11.5px; min-width: 88px; }

@media (max-width: 700px) {
  .ap-scroll { padding: 12px 12px 32px; }
  .ap-head { padding: 12px; flex-wrap: wrap; }
  .ap-fact { grid-template-columns: 110px minmax(0, 1fr) 28px; }
  .ap-cal-day { min-height: 70px; }
  .ap-cal-ev { font-size: 10px; }
}
.vx-warn { color: #b45309; font-weight: 700; }

/* Studio ảnh AI */
button.vx-add { font: inherit; background: none; width: 100%; }
.vx-add-ai { border-style: solid; border-color: var(--ap-line); }
.ix .ap-btn { display: inline-flex; align-items: center; gap: 6px; }
.ix .ap-btn .vx-ic { width: 15px; height: 15px; }
.ix.drop .ix-stage { border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.ix label.ap-btn { cursor: pointer; }
.ix .vx-top-r { margin-left: auto; }
.ix-body { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.ix-comp { position: sticky; top: 0; }
.ix-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--ap-muted); }
.ix-steps b { color: var(--ap-text); }
.ix-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 2px dashed var(--ap-line-2); border-radius: 14px; padding: 22px 12px; background: var(--ap-panel-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ix-drop .vx-ic { width: 26px; height: 26px; color: var(--ap-accent); }
.ix-drop b { font-size: 13.5px; }
.ix-drop small { font-size: 11.5px; color: var(--ap-dim); }
.ix-drop:hover, .ix.drop .ix-drop { border-color: var(--ap-accent); background: rgba(37, 99, 235, 0.06); }
.ix-stage { padding: 18px; gap: 12px; min-height: 560px; }
.ix-view { display: grid; place-items: center; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(15, 40, 80, 0.45), 0 0 0 1px rgba(15, 40, 80, 0.06); }
.ix-view img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ix-view.portrait { aspect-ratio: 2 / 3; height: clamp(360px, calc(100vh - 410px), 640px); max-width: 100%; }
.ix-view.square { aspect-ratio: 1; height: clamp(320px, calc(100vh - 430px), 560px); max-width: 100%; }
.ix-view.landscape { aspect-ratio: 3 / 2; width: 100%; max-height: calc(100vh - 410px); }
.ix-info { width: 100%; max-width: 640px; display: grid; gap: 2px; text-align: center; }
.ix-info b { font-size: 15px; }
.ix-info small { color: var(--ap-dim); font-size: 12px; }
.ix-info p { margin: 4px 0 0; font-size: 12.5px; color: var(--ap-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ix-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(211, 222, 235, 0.8); border-radius: 14px; padding: 8px; }
.ix-strip .ix-th { width: 52px; }
.ix-acts .ap-spacer { flex: 1; }
.ix-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 380px; text-align: center; color: var(--ap-muted); font-size: 13px; line-height: 1.5; }
.ix-hero > b { color: var(--ap-text); font-size: 16px; }
.ix-hero .vx-chips { justify-content: center; }
.ix-lib { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 220px); overflow: auto; }
.ix-filter button { padding: 4px 9px; font-size: 11.5px; }
.ix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ix-th { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 9px; overflow: hidden; background: var(--ap-panel-2); cursor: pointer; display: grid; place-items: center; outline: 2px solid transparent; outline-offset: 1px; transition: outline-color 0.15s; }
.ix-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ix-th:hover { outline-color: var(--ap-line-2); }
.ix-th.on { outline-color: var(--ap-accent); }
.ix-th i { position: absolute; top: 3px; left: 3px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 9.5px; font-weight: 700; font-style: normal; border-radius: 5px; padding: 0 4px; line-height: 1.5; }
.ix-th.ai-wait { cursor: default; background: linear-gradient(110deg, #f2f6fb 30%, #f9fbfe 50%, #f2f6fb 70%) 0 0 / 200% 100%; animation: ai-shine 1.4s linear infinite; }
.ix-th.ai-wait .ap-spin { border-color: rgba(82, 96, 113, 0.25); border-top-color: var(--ap-accent); }
@keyframes ai-shine { to { background-position: -200% 0; } }
.ix-none { text-align: center; padding: 16px 0; }
.ix-kl-h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ai-kl-logo { width: 28px; height: 28px; border-radius: 8px; background: #111; color: #fff; display: grid; place-items: center; flex: none; }
.ai-kl-logo .vx-ic { width: 15px; height: 15px; }
.ai-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--ap-accent); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.ai-banner > .vx-ic { color: var(--ap-accent); width: 18px; height: 18px; }
.ai-banner span { flex: 1; min-width: 200px; }
@media (max-width: 1320px) { .ix-body { grid-template-columns: 260px minmax(0, 1fr) 230px; } }
@media (max-width: 1080px) {
  .ix-body { grid-template-columns: minmax(0, 1fr); }
  .ix-comp, .ix-lib { position: static; max-height: none; }
  .ix-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* Studio video / ảnh: toàn màn hình, nền sáng có quầng màu */
.zl-autopost.is-studio { position: relative; isolation: isolate; background: linear-gradient(160deg, #f5f8fe 0%, #eef3fc 55%, #f1effc 100%); }
.zl-autopost.is-studio::before, .zl-autopost.is-studio::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px); opacity: 0.55; }
.zl-autopost.is-studio::before { width: 44vw; height: 44vw; left: -12vw; top: -20vw; background: radial-gradient(circle, #bfdbfe, transparent 65%); animation: vxAuroraA 24s ease-in-out infinite alternate; }
.zl-autopost.is-studio::after { width: 38vw; height: 38vw; right: -10vw; bottom: -18vw; background: radial-gradient(circle, #ddd6fe, transparent 65%); animation: vxAuroraB 28s ease-in-out infinite alternate; }
@keyframes vxAuroraA { to { transform: translate(22vw, 14vh) scale(1.15); } }
@keyframes vxAuroraB { to { transform: translate(-20vw, -12vh) scale(1.2); } }

.is-studio .vx-top, .is-studio .vx-rail, .is-studio .vx-insp { background: rgba(255, 255, 255, 0.92); border-color: rgba(226, 233, 242, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 32px -18px rgba(30, 64, 175, 0.25); }
.is-studio .vx-title b .vx-ic { color: var(--ap-accent); }
.is-studio .vx-title b { font-size: 16px; background: linear-gradient(90deg, #0f172a, #1d4ed8 70%, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.is-studio .vx-title b .vx-ic { -webkit-text-fill-color: initial; }
.is-studio .vx-asp.on { box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25), inset 0 0 0 1.5px rgba(37, 99, 235, 0.35); }

.is-studio .vx-stage { background: radial-gradient(rgba(37, 99, 235, 0.13) 1px, transparent 1.3px) 0 0 / 22px 22px, radial-gradient(ellipse 55% 50% at 50% 45%, rgba(147, 197, 253, 0.45), transparent 70%), linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(234, 241, 252, 0.85)); border: 1px solid rgba(211, 222, 235, 0.9); box-shadow: inset 0 1px 0 #fff, 0 12px 32px -18px rgba(30, 64, 175, 0.25); }
.is-studio .vx-stage.drop, .is-studio .ix.drop .ix-stage { border-color: #60a5fa; background-color: rgba(59, 130, 246, 0.1); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3), 0 0 50px rgba(59, 130, 246, 0.25); }
.is-studio .vx-frame { box-shadow: 0 0 0 1.5px #48484a, 0 40px 70px -26px rgba(15, 40, 80, 0.5), 0 0 80px -16px rgba(59, 130, 246, 0.4), 0 0 140px -30px rgba(139, 92, 246, 0.35); transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-studio .vx-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.22) 48%, transparent 58%) -150% 0 / 250% 100% no-repeat; animation: vxSheen 6s ease-in-out infinite; }
@keyframes vxSheen { 0%, 55% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.is-studio .vx-empty { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #93c5fd, #c4b5fd, #93c5fd) border-box; border: 2px dashed transparent; }
.is-studio .vx-empty-ic { position: relative; background: linear-gradient(135deg, #3b82f6, #7c3aed); color: #fff; box-shadow: 0 12px 30px -8px rgba(59, 130, 246, 0.6); }
.is-studio .vx-empty-ic::before { content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 2px solid rgba(99, 102, 241, 0.45); animation: vxPulse 2.2s ease-out infinite; }
@keyframes vxPulse { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.is-studio .vx-stage-foot, .is-studio .ix-strip { background: rgba(255, 255, 255, 0.9); border-color: rgba(211, 222, 235, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px -14px rgba(30, 64, 175, 0.35); }

.is-studio .ap-btn.primary { position: relative; overflow: hidden; background: linear-gradient(135deg, #3b82f6, #4f46e5 60%, #7c3aed); box-shadow: 0 8px 22px -6px rgba(79, 70, 229, 0.6); transition: transform 0.15s, box-shadow 0.15s; }
.is-studio .ap-btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); transition: left 0.6s; pointer-events: none; }
.is-studio .ap-btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px -6px rgba(79, 70, 229, 0.7); }
.is-studio .ap-btn.primary:hover:not(:disabled)::after { left: 130%; }
.is-studio .vx-scene { transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.is-studio .vx-scene:not(.ghost):hover { transform: translateX(2px); }
.is-studio .vx-scene.on { background: linear-gradient(90deg, rgba(59, 130, 246, 0.12), rgba(124, 58, 237, 0.06)); box-shadow: 0 6px 18px -8px rgba(59, 130, 246, 0.5); }
.is-studio .vx-thumb img, .is-studio .ix-th img { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-studio .vx-scene:hover .vx-thumb img, .is-studio .ix-th:hover img { transform: scale(1.08); }
.is-studio .ix-th { transition: outline-color 0.15s, box-shadow 0.2s; }
.is-studio .ix-th.on { box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.6); }
.is-studio .vx-tabs { position: sticky; top: 0; z-index: 2; background: #fff; }
.is-studio .vx-tabs button { transition: color 0.15s; }
.is-studio .vx-tabs button.on { border-image: linear-gradient(90deg, #3b82f6, #7c3aed) 1; }
.is-studio .vx-style.on, .is-studio .vx-pal.on { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25), 0 8px 18px -8px rgba(79, 70, 229, 0.6); }
.is-studio .vx-rail-h { position: sticky; top: -12px; z-index: 2; background: #fff; margin: -12px -12px 10px; padding: 12px 12px 8px; }

.is-studio .ix-view { box-shadow: 0 36px 70px -28px rgba(15, 40, 80, 0.5), 0 0 0 1px rgba(15, 40, 80, 0.06), 0 0 90px -20px rgba(59, 130, 246, 0.4); }
.is-studio .ix-view img { animation: vxIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes vxIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

@media (min-width: 1081px) {
  .zl-autopost.is-studio .ap-scroll { overflow: hidden; display: flex; flex-direction: column; padding: 14px 16px 16px; }
  .zl-autopost.is-studio #ap-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .is-studio .vx { flex: 1; min-height: 0; gap: 12px; }
  .is-studio .vx-body, .is-studio .ix-body { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 12px; }
  .is-studio .vx-rail, .is-studio .vx-insp, .is-studio .vx-stage, .is-studio .ix-comp, .is-studio .ix-lib { position: relative; top: auto; min-height: 0; max-height: none; overflow: auto; scrollbar-width: thin; }
  .is-studio .vx-stage { container-type: size; justify-content: center; padding: 20px 22px 16px; }
  .is-studio .vx-frame.portrait { width: min(100% - 18px, (100cqh - 92px) * 0.5625); }
  .is-studio .vx-frame.feed { width: min(100% - 18px, (100cqh - 92px) * 0.8); }
  .is-studio .vx-frame.square { width: min(100% - 16px, 100cqh - 90px); }
  .is-studio .vx-frame.landscape { width: min(100% - 16px, (100cqh - 90px) * 1.7778); }
  .is-studio .vx-stage-foot { max-width: 720px; }
  .is-studio .ix-stage { justify-content: flex-start; }
  .is-studio .ix-view { flex: none; }
  .is-studio .ix-view.portrait { height: min(100cqh - 150px, (100cqw - 20px) * 1.5); max-width: none; }
  .is-studio .ix-view.square { height: min(100cqh - 150px, 100cqw - 20px); max-width: none; }
  .is-studio .ix-view.landscape { width: min(100%, (100cqh - 150px) * 1.5); max-height: none; }
  .is-studio .ix-stage:has(.ix-strip) .ix-view.portrait { height: min(100cqh - 230px, (100cqw - 20px) * 1.5); }
  .is-studio .ix-stage:has(.ix-strip) .ix-view.square { height: min(100cqh - 230px, 100cqw - 20px); }
  .is-studio .ix-stage:has(.ix-strip) .ix-view.landscape { width: min(100%, (100cqh - 230px) * 1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .zl-autopost.is-studio::before, .zl-autopost.is-studio::after, .is-studio .vx-frame::after, .is-studio .vx-empty-ic::before, .is-studio .ix-view img { animation: none; }
}