/* ========================================================
   components.css — UI components không thuộc wizard
   Top header, AI buttons, metrics cards, edit modal, AI suggestion cards
   v1.5.4: tách từ style.css.
   ======================================================== */

/* Onboarding tour (v1.5.6) */
.onboarding-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9985;
  background: hsla(0, 0%, 0%, 0.65);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
.onboarding-backdrop.hidden { display: none; }
/* Highlight ring quanh target khi backdrop có-target */
.onboarding-backdrop.has-target::before {
  content: "";
  position: absolute;
  left: calc(var(--target-x) - 8px);
  top: calc(var(--target-y) - 8px);
  width: calc(var(--target-w) + 16px);
  height: calc(var(--target-h) + 16px);
  border: 2px solid var(--ai-purple);
  border-radius: 12px;
  box-shadow: 0 0 30px var(--ai-purple-glow), 0 0 0 9999px hsla(0, 0%, 0%, 0.55);
  pointer-events: none;
  animation: onboarding-pulse 1.6s ease-in-out infinite;
}
@keyframes onboarding-pulse {
  0%, 100% { box-shadow: 0 0 30px var(--ai-purple-glow), 0 0 0 9999px hsla(0, 0%, 0%, 0.55); }
  50%      { box-shadow: 0 0 50px var(--ai-purple-glow), 0 0 0 9999px hsla(0, 0%, 0%, 0.55); }
}

.onboarding-tooltip {
  position: fixed;
  z-index: 9986;
  width: 320px;
  background: var(--bg-secondary);
  border: 1px solid var(--ai-purple-glow);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), var(--shadow-neon-ai);
  animation: onboarding-in 0.3s ease;
}
.onboarding-tooltip.hidden { display: none; }
@keyframes onboarding-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.onboarding-step-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--ai-purple);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.onboarding-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: var(--text-primary);
}
.onboarding-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 16px 0;
}
.onboarding-body kbd {
  display: inline-block;
  padding: 1px 6px;
  background: hsla(0, 0%, 100%, 0.1);
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
}
.onboarding-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.onboarding-skip {
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 10px;
}
.onboarding-skip:hover { color: var(--text-secondary); }
.onboarding-next {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.onboarding-next:hover {
  background: var(--primary-light);
}

/* Keyboard shortcuts help (v1.5.6) */
.shortcuts-modal-overlay {
  position: fixed;
  inset: 0;
  background: hsla(0, 0%, 0%, 0.7);
  backdrop-filter: blur(8px);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shortcuts-modal-overlay.hidden { display: none; }
.shortcuts-modal-overlay .shortcuts-help {
  background: var(--bg-secondary);
  border: 1px solid var(--border-glow);
  border-radius: 16px;
  padding: 24px 32px;
  min-width: 380px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.shortcuts-table {
  width: 100%;
  border-collapse: collapse;
}
.shortcuts-table tr {
  border-bottom: 1px solid var(--border-light);
}
.shortcuts-table tr:last-child { border-bottom: none; }
.shortcuts-table td {
  padding: 10px 0;
  font-size: 13px;
}
.shortcut-keys {
  width: 140px;
  white-space: nowrap;
}
.shortcut-keys kbd {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: hsla(0, 0%, 100%, 0.08);
  border: 1px solid hsla(0, 0%, 100%, 0.15);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text-primary);
}
.shortcut-action {
  color: var(--text-secondary);
}

/* Budget inline editor (v1.5.7) */
.budget-edit-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
}
.budget-edit-btn:hover {
  color: var(--primary);
  background: hsla(250, 85%, 65%, 0.12);
}
.budget-monthly-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.budget-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.budget-editor-row {
  display: flex;
  gap: 8px;
}
.budget-editor input,
.budget-editor select {
  background: var(--bg-glass-input);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-body);
}
.budget-editor input[type="number"] { flex: 1; min-width: 0; }
.budget-editor select { width: 90px; }
.budget-editor input[type="text"] { width: 100%; }
.budget-editor input:focus,
.budget-editor select:focus {
  outline: none;
  border-color: var(--primary);
}
.budget-editor-preview {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 0;
}
.budget-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* Backend status banner (v1.5.5) */
.backend-status-banner {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  font-size: 13px;
  border-bottom: 1px solid transparent;
}
.backend-status-banner.hidden { display: none; }
.backend-status-banner.offline {
  background: hsla(350, 85%, 55%, 0.15);
  border-bottom-color: hsla(350, 85%, 55%, 0.4);
  color: hsl(350, 90%, 80%);
}
.backend-status-banner.warning {
  background: hsla(35, 95%, 55%, 0.12);
  border-bottom-color: hsla(35, 95%, 55%, 0.4);
  color: hsl(35, 95%, 75%);
}
.backend-status-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.backend-status-retry {
  padding: 4px 12px;
  background: hsla(0, 0%, 100%, 0.1);
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 6px;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
  flex-shrink: 0;
}
.backend-status-retry:hover { background: hsla(0, 0%, 100%, 0.18); }
.backend-status-retry:disabled { opacity: 0.5; cursor: wait; }

/* Global AI loader (v1.5.5) */
.ai-loader {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: hsla(223, 20%, 16%, 0.95);
  border: 1px solid var(--ai-purple-glow);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), var(--shadow-neon-ai);
  border-radius: 12px;
  padding: 12px 18px;
  backdrop-filter: blur(20px);
  min-width: 240px;
  animation: ai-loader-in 0.3s ease;
}
.ai-loader.hidden { display: none; }

@keyframes ai-loader-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-loader-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid hsla(280, 90%, 65%, 0.2);
  border-top-color: var(--ai-purple);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.ai-loader-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-loader-message {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.ai-loader-elapsed {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ai-loader-elapsed.slow {
  color: var(--warning);
  font-weight: 600;
}

/* Auto-save indicator (v1.5.5) */
.autosave-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--success);
  margin-top: 6px;
  padding: 2px 8px;
  background: hsla(145, 80%, 45%, 0.1);
  border: 1px solid hsla(145, 80%, 45%, 0.25);
  border-radius: 999px;
  width: fit-content;
}
.autosave-indicator::before {
  content: "✓";
  font-weight: bold;
}
.autosave-indicator.hidden { display: none; }

/* Top Header Actions */
.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.page-title h1 {
  font-size: 28px;
  background: linear-gradient(135deg, #fff, var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-title p {
  color: var(--text-secondary);
  font-size: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition-bounce);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #6366f1);
  color: white;
  box-shadow: var(--shadow-neon-primary);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--primary);
}

.btn-secondary {
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: hsla(0, 0%, 100%, 0.1);
  transform: translateY(-2px);
}

.btn-accent {
  background: linear-gradient(135deg, var(--secondary), #06b6d4);
  color: #0c0f17;
  box-shadow: var(--shadow-neon-secondary);
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--secondary);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
}

/* Upgrade AI-Assisted Research Button */
.btn-ai-research {
  background: var(--ai-gradient);
  color: white;
  box-shadow: var(--shadow-neon-ai);
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.btn-ai-research::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: 0.5s;
}

.btn-ai-research:hover::before {
  left: 100%;
}

.btn-ai-research:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px var(--ai-purple);
}

/* Inline AI button - dùng cạnh label URL trong tab Dữ liệu thực tế */
.btn-ai-inline {
  background: hsla(280, 90%, 65%, 0.12);
  border: 1px solid hsla(280, 90%, 65%, 0.35);
  color: var(--ai-purple);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
}

.btn-ai-inline:hover:not(:disabled) {
  background: hsla(280, 90%, 65%, 0.22);
  border-color: var(--ai-purple);
  box-shadow: 0 0 8px hsla(280, 90%, 65%, 0.4);
}

.btn-ai-inline:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Banner tự động điền ở đầu tab Dữ liệu thực tế */
.research-autofill-banner {
  border: 1px dashed hsla(280, 90%, 65%, 0.35);
  background: linear-gradient(135deg, hsla(280, 90%, 65%, 0.08), hsla(190, 95%, 50%, 0.05));
}

/* === METRICS TAB layout v2 === */

/* TOP ROW: 3 cards equal width (Budget | TopFormat | TopHook) */
.metrics-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.metrics-top-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 140px;
}

.metrics-top-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.metrics-top-value {
  font-size: 22px;
  font-weight: 700;
  color: white;
  line-height: 1.25;
}

.metrics-top-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.metrics-top-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.metrics-top-ai-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed hsla(280, 90%, 65%, 0.30);
  font-size: 12px;
  color: var(--ai-purple);
  line-height: 1.4;
}

.metrics-budget-card .metrics-budget-cta {
  margin-top: auto;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* MAIN ROW: KPI list (left) + AI rationale (right) */
.metrics-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.kpi-list-panel,
.rationale-panel {
  padding: 0;
  overflow: hidden;
}

.kpi-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: hsla(0, 0%, 100%, 0.025);
  border-bottom: 1px solid var(--border-light);
}

.kpi-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.04);
  transition: background 0.15s;
}

.kpi-row:hover {
  background: hsla(0, 0%, 100%, 0.025);
}

.kpi-row-icon {
  font-size: 13px;
  text-align: center;
}

.kpi-row-label {
  font-size: 12px;
  color: var(--text-muted);
}

.kpi-row-value {
  font-size: 14px;
  font-weight: 700;
  color: white;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi-row-ai-cell {
  text-align: right;
  min-width: 0;
}

.kpi-ai-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  background: hsla(280, 90%, 65%, 0.08);
  border: 1px solid hsla(280, 90%, 65%, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.kpi-ai-inline.kpi-ai-same {
  color: var(--text-muted);
  background: hsla(0, 0%, 100%, 0.04);
  border-color: hsla(0, 0%, 100%, 0.10);
}

.kpi-list-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: hsla(280, 90%, 65%, 0.05);
  border-top: 1px solid hsla(280, 90%, 65%, 0.20);
  flex-wrap: wrap;
}

.rationale-content {
  padding: 16px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-height: 720px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.rationale-empty {
  padding: 32px 20px;
  text-align: center;
}

.btn-apply-ai-mini {
  background: var(--ai-gradient);
  color: white;
  border: none;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.2s;
}

.btn-apply-ai-mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px hsla(280, 90%, 65%, 0.55);
}

@media (max-width: 1100px) {
  .metrics-top-grid {
    grid-template-columns: 1fr;
  }
  .metrics-main-grid {
    grid-template-columns: 1fr;
  }
  .kpi-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }
  .kpi-row-ai-cell {
    grid-column: 2 / 4;
    text-align: left;
  }
}

/* Copy Prompt Button - dùng để paste sang Claude/ChatGPT thật */
.btn-copy-prompt {
  background: hsla(190, 95%, 50%, 0.08);
  border: 1px dashed var(--secondary);
  color: var(--secondary);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-copy-prompt:hover {
  background: hsla(190, 95%, 50%, 0.18);
  box-shadow: 0 0 15px var(--secondary-glow);
  transform: translateY(-2px);
}

.btn-copy-prompt i {
  color: var(--secondary);
}

/* Đảm bảo các nút trong step-header không bị wrap chữ và xếp hàng đẹp */
.step-header .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.step-header > div[style*="display:flex"] {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* AI Scanner Simulation Overlay */
.ai-scanner-container {
  position: relative;
  overflow: hidden;
}

.ai-scanner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 15, 23, 0.9);
  backdrop-filter: blur(12px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  animation: fadeIn 0.3s ease-in-out;
}

.ai-scanner-line {
  width: 100%;
  height: 4px;
  background: var(--ai-gradient);
  box-shadow: 0 0 15px var(--secondary);
  position: absolute;
  top: 0;
  left: 0;
  animation: scanEffect 2s linear infinite;
}

.ai-scanner-loader {
  font-size: 40px;
  background: var(--ai-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulseRotate 2s ease-in-out infinite;
  margin-bottom: 20px;
}

.ai-scanner-status {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
  text-align: center;
}

.ai-scanner-substatus {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

@keyframes scanEffect {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

@keyframes pulseRotate {
  0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 5px var(--ai-purple-glow)); }
  50% { transform: scale(1.15) rotate(180deg); filter: drop-shadow(0 0 15px var(--secondary-glow)); }
  100% { transform: scale(1) rotate(360deg); filter: drop-shadow(0 0 5px var(--ai-purple-glow)); }
}

/* AI Strategic Advice Cards */
.ai-suggestion-card {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  background: hsla(280, 90%, 65%, 0.05);
  border: 1px solid hsla(280, 90%, 65%, 0.2);
  box-shadow: var(--shadow-neon-ai);
  animation: slideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.ai-suggestion-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: hsl(280, 90%, 75%);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ai-suggestion-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================================
   EDIT MODAL DIALOG (Phase 3 - Popup chỉnh sửa)
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 18, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.25s ease;
  padding: 20px;
}

.modal-backdrop.hidden {
  display: none;
}

.modal-backdrop.show {
  opacity: 1;
}

.modal-dialog {
  width: min(760px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-glow);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px var(--primary-glow);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

.modal-backdrop.show .modal-dialog {
  transform: scale(1) translateY(0);
}

.modal-header {
  padding: 22px 28px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(180deg, hsla(250, 85%, 65%, 0.05), transparent);
}

.modal-header-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-light);
  letter-spacing: 1px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-header h2 {
  font-size: 22px;
  color: white;
  margin: 0;
  font-family: var(--font-display);
}

.modal-close {
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid var(--border-light);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
  transform: rotate(90deg);
}

.modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

.modal-field {
  margin-bottom: 18px;
}

.modal-field:last-child {
  margin-bottom: 0;
}

.modal-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.modal-field-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: var(--transition-smooth);
}

.modal-field-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  background: hsla(250, 85%, 65%, 0.03);
}

textarea.modal-field-input {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}

input.modal-field-number {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--secondary);
}

select.modal-field-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

/* List editor trong modal */
.modal-list-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-list-row .modal-field-input {
  flex: 1;
}

.modal-list-row .modal-list-del {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: hsla(350, 85%, 55%, 0.1);
  color: var(--danger);
  border: 1px solid hsla(350, 85%, 55%, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.modal-list-row .modal-list-del:hover {
  background: var(--danger);
  color: white;
}

.modal-list-add {
  align-self: flex-start;
  background: hsla(145, 80%, 45%, 0.1);
  color: var(--success);
  border: 1px dashed hsla(145, 80%, 45%, 0.4);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: var(--transition-smooth);
}

.modal-list-add:hover {
  background: var(--success);
  color: white;
  border-color: var(--success);
}

.modal-footer {
  padding: 18px 28px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(0deg, hsla(250, 85%, 65%, 0.04), transparent);
}

/* AI buttons trong modal header (gọn hơn) */
.btn-ai-sm {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
}

/* Tối ưu nội dung - màu cyan để phân biệt với "Đề Xuất mới" tím */
.btn-ai-optimize {
  background: linear-gradient(135deg, var(--secondary), #06b6d4);
  color: #0c0f17;
  border: 1px solid hsla(190, 95%, 50%, 0.4);
  box-shadow: 0 0 12px var(--secondary-glow);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  font-family: var(--font-body);
  transition: var(--transition-bounce);
}

.btn-ai-optimize:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--secondary);
}

.btn-ai-optimize:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Nút "Thay thế toàn bộ" trong header suggestions */
.ai-suggestions-replace-all {
  background: hsla(35, 95%, 55%, 0.12);
  color: var(--warning);
  border: 1px solid hsla(35, 95%, 55%, 0.4);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
  margin-right: 8px;
}

.ai-suggestions-replace-all:hover {
  background: var(--warning);
  color: #0c0f17;
  border-color: var(--warning);
}

.ai-suggestions-actions {
  display: flex;
  align-items: center;
}

/* Panel hiển thị advice từ Claude */
.modal-ai-panel {
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, hsla(280, 90%, 65%, 0.06), hsla(280, 90%, 65%, 0.02));
  animation: slideDown 0.3s ease-out;
}

.modal-ai-panel.hidden {
  display: none;
}

.modal-ai-panel-header {
  padding: 12px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px dashed var(--border-light);
}

.modal-ai-panel-close {
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid var(--border-light);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.modal-ai-panel-close:hover {
  background: hsla(0, 0%, 100%, 0.1);
  color: white;
}

.modal-ai-panel-content {
  padding: 16px 28px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Reuse markdown styles từ ai-suggestion-text */
.modal-ai-panel-content h1,
.modal-ai-panel-content h2,
.modal-ai-panel-content h3 {
  color: hsl(280, 90%, 80%);
  margin: 12px 0 6px 0;
  font-size: 14px;
  font-weight: 700;
}

.modal-ai-panel-content h2 { font-size: 15px; color: var(--secondary); }
.modal-ai-panel-content h3 { font-size: 13px; color: hsl(190, 90%, 75%); }

.modal-ai-panel-content p { margin-bottom: 6px; }
.modal-ai-panel-content strong { color: var(--text-primary); }
.modal-ai-panel-content ul,
.modal-ai-panel-content ol { padding-left: 20px; margin: 4px 0 8px 0; }
.modal-ai-panel-content li { margin-bottom: 3px; }

.modal-ai-panel-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.modal-ai-panel-content th,
.modal-ai-panel-content td {
  border: 1px solid var(--border-light);
  padding: 6px 8px;
}
.modal-ai-panel-content th {
  background: hsla(280, 90%, 65%, 0.12);
  color: hsl(280, 90%, 80%);
}

.modal-ai-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--ai-purple);
}

/* ============================================================
   AI SUGGESTION CARDS - Mỗi đề xuất là 1 card có feasibility
   ============================================================ */
.ai-suggestions-section {
  margin-top: 16px;
}

.ai-suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: hsla(280, 90%, 65%, 0.08);
  border: 1px solid hsla(280, 90%, 65%, 0.2);
  border-radius: 10px;
}

.ai-suggestions-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ai-purple);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-suggestions-add-all {
  background: var(--ai-gradient);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

.ai-suggestions-add-all:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 16px var(--ai-purple-glow);
}

.ai-suggestions-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-suggestion-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--ai-purple);
  border-radius: 10px;
  padding: 14px;
  transition: var(--transition-smooth);
  position: relative;
}

.ai-suggestion-card.added {
  border-left-color: var(--success);
  opacity: 0.6;
}

.ai-suggestion-card:hover {
  border-color: var(--ai-purple-glow);
  transform: translateY(-1px);
}

.ai-suggestion-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-light);
}

.ai-suggestion-card-title {
  font-size: 14px;
  font-weight: 700;
  color: white;
  flex: 1;
  line-height: 1.4;
}

.ai-suggestion-feasibility {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ai-suggestion-feasibility.high {
  background: hsla(145, 80%, 45%, 0.15);
  color: var(--success);
  border: 1px solid hsla(145, 80%, 45%, 0.4);
}

.ai-suggestion-feasibility.mid {
  background: hsla(35, 95%, 55%, 0.15);
  color: var(--warning);
  border: 1px solid hsla(35, 95%, 55%, 0.4);
}

.ai-suggestion-feasibility.low {
  background: hsla(350, 85%, 55%, 0.15);
  color: var(--danger);
  border: 1px solid hsla(350, 85%, 55%, 0.4);
}

.ai-suggestion-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.ai-suggestion-field {
  display: flex;
  gap: 8px;
  line-height: 1.5;
}

.ai-suggestion-field-label {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  min-width: 90px;
  padding-top: 2px;
}

.ai-suggestion-field-value {
  color: var(--text-secondary);
  flex: 1;
}

.ai-suggestion-rationale {
  margin-top: 10px;
  padding: 8px 10px;
  background: hsla(190, 95%, 50%, 0.06);
  border-radius: 6px;
  font-size: 11px;
  color: var(--secondary);
  font-style: italic;
  border-left: 2px solid var(--secondary);
}

.ai-suggestion-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ai-suggestion-add-btn {
  background: hsla(250, 85%, 65%, 0.1);
  border: 1px solid var(--primary);
  color: var(--primary-light);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

.ai-suggestion-add-btn:hover {
  background: var(--primary);
  color: white;
}

.ai-suggestion-add-btn.added {
  background: var(--success);
  color: white;
  border-color: var(--success);
  cursor: default;
}

.ai-suggestion-add-btn.added:hover {
  background: var(--success);
}

.modal-ai-loading .spinner {
  width: 18px;
  height: 18px;
  border: 2px solid hsla(280, 90%, 65%, 0.2);
  border-top-color: var(--ai-purple);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   v7 — Thanh tab dự án (7-tab workspace) + panel placeholder
   ============================================================ */
.project-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.project-tabbar .ptab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: var(--text-muted, #9aa4b2);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.project-tabbar .ptab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.project-tabbar .ptab.active {
  background: linear-gradient(135deg, var(--primary, #7c5cff), var(--secondary, #19c3e6));
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 92, 255, 0.35);
}
.project-tabbar .ptab i { font-size: 13px; }

/* Panel placeholder cho các tab chưa đổ ruột */
.ph-card { padding: 40px; text-align: center; margin-top: 8px; }
.ph-card > i { font-size: 44px; color: var(--primary, #7c5cff); margin-bottom: 14px; display: block; }
.ph-card h3 { color: #fff; margin-bottom: 10px; }
.ph-card p { max-width: 560px; margin: 0 auto; line-height: 1.6; }
.ph-card code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.badge-gate {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.18);
  color: var(--primary, #a78bfa);
  border: 1px solid rgba(124, 92, 255, 0.35);
  vertical-align: middle;
  margin-left: 6px;
}

/* Mobile: thanh tab cuộn ngang */
@media (max-width: 768px) {
  .project-tabbar { flex-wrap: nowrap; overflow-x: auto; }
}

/* ============================================================
   v7 — Cổng 1: board kiểm chứng sự thật
   ============================================================ */
.audit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.audit-statusbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.audit-chip { font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,0.06); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.1); }
.audit-chip.tier-fact { color: #34d399; border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.1); }
.audit-chip.tier-proposed { color: #fbbf24; border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.1); }
.audit-chip.tier-forbidden { color: #f87171; border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.1); }
.audit-chip-total { opacity: 0.8; }
.audit-flag { font-size: 12.5px; padding: 5px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.audit-flag-warn { color: #fbbf24; background: rgba(251,191,36,0.08); }
.audit-flag-ok { color: #34d399; background: rgba(52,211,153,0.08); }

.audit-claim-list { display: flex; flex-direction: column; gap: 10px; }
.audit-card { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-left: 4px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 14px 16px; }
.audit-card.tier-fact { border-left-color: #34d399; }
.audit-card.tier-proposed { border-left-color: #fbbf24; }
.audit-card.tier-forbidden { border-left-color: #f87171; }
.audit-card-body { flex: 1; min-width: 0; }
.audit-claim-text { color: #fff; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.audit-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; color: var(--text-muted, #9aa4b2); margin-bottom: 10px; }
.audit-src { background: rgba(255,255,255,0.06); padding: 1px 8px; border-radius: 6px; }
.audit-why { font-style: italic; }
.audit-aihint { color: var(--ai-purple, #a78bfa); }
.audit-tiers { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tier-btn { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #94a3b8; transition: all 0.12s; }
.tier-btn:hover { background: rgba(255,255,255,0.09); }
.tier-btn.active.tier-fact { background: rgba(52,211,153,0.18); border-color: #34d399; color: #34d399; }
.tier-btn.active.tier-proposed { background: rgba(251,191,36,0.18); border-color: #fbbf24; color: #fbbf24; }
.tier-btn.active.tier-forbidden { background: rgba(248,113,113,0.18); border-color: #f87171; color: #f87171; }
.audit-extra { font-size: 12.5px; color: var(--text-muted, #9aa4b2); }
.audit-ev { display: flex; align-items: center; gap: 6px; }
.audit-ev-input { flex: 1; max-width: 420px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: #e2e8f0; padding: 5px 9px; font-size: 12.5px; }
.audit-ask { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.audit-answer { margin-left: 12px; color: #cbd5e1; }
.audit-forbid { color: #f87171; }
.audit-del { background: none; border: none; color: var(--text-muted, #94a3b8); cursor: pointer; padding: 4px 8px; border-radius: 6px; flex-shrink: 0; }
.audit-del:hover { color: #f87171; background: rgba(248,113,113,0.12); }

/* Modal phiếu xác thực */
.audit-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.audit-sheet-box { background: #14161f; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; width: min(720px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.audit-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); color: #fff; }
.audit-sheet-x { background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; }
.audit-sheet-pre { margin: 0; padding: 18px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.55; color: #d7dde6; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.audit-sheet-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.08); }

/* v4.10.0 — FB Page Insights connect card */
.fb-status-wrap { padding: 4px 0; }
.fb-status-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 16px; color: var(--text-muted, #94a3b8); font-size: 13px;
  background: rgba(255,255,255,0.03); border-radius: 8px;
}
.fb-status-error { padding: 12px; color: #fda4af; background: rgba(244,63,94,0.1); border: 1px solid rgba(244,63,94,0.3); border-radius: 8px; font-size: 13px; }
.fb-status-disconnected {
  display: flex; align-items: center; gap: 16px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(24,119,242,0.1), rgba(24,119,242,0.02));
  border: 1px dashed rgba(24,119,242,0.35);
  border-radius: 10px;
}
.fb-status-disconnected .fb-status-icon {
  width: 56px; height: 56px;
  background: rgba(24,119,242,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #1877f2;
  flex-shrink: 0;
}
.fb-status-disconnected .fb-status-body { flex: 1; }
.fb-status-disconnected .fb-status-body b { color: #fff; font-size: 14px; display: block; margin-bottom: 4px; }
.fb-status-disconnected .fb-status-body p { font-size: 12.5px; color: var(--text-muted, #94a3b8); margin: 0; line-height: 1.5; }
.fb-status-disconnected button { flex-shrink: 0; }
.fb-status-disconnected #fb-connect-btn { background: #1877f2; color: white; border: none; padding: 10px 18px; }
.fb-status-disconnected #fb-connect-btn:hover { background: #166fe5; }

.fb-status-connected {
  padding: 16px;
  background: rgba(46, 204, 113, 0.05);
  border: 1px solid rgba(46, 204, 113, 0.25);
  border-radius: 10px;
}
.fb-status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fb-page-icon { font-size: 32px; color: #1877f2; flex-shrink: 0; }
.fb-page-info { flex: 1; min-width: 0; }
.fb-page-info b { color: #fff; font-size: 14px; display: block; }
.fb-page-info small { color: var(--text-muted, #94a3b8); font-size: 11.5px; }
.fb-status-badge {
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase;
  background: rgba(46,204,113,0.18); color: #2ecc71; border: 1px solid rgba(46,204,113,0.4);
}
.fb-status-badge.fb-status-error { background: rgba(244,63,94,0.18); color: #fda4af; border-color: rgba(244,63,94,0.4); }
.fb-status-badge.fb-status-expired { background: rgba(244,166,35,0.18); color: #f4a623; border-color: rgba(244,166,35,0.4); }
.fb-status-meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 11.5px; color: var(--text-muted, #94a3b8);
  padding: 8px 4px; border-top: 1px dashed rgba(255,255,255,0.08); border-bottom: 1px dashed rgba(255,255,255,0.08);
  margin-bottom: 12px;
}
.fb-status-meta i { color: var(--primary, #7c5cff); margin-right: 4px; }
.fb-expiry-warn { color: #f4a623 !important; font-weight: 600; }
.fb-status-actions { display: flex; gap: 8px; align-items: center; }

/* ============================================================
   v7 — Pha 2: Hồ sơ & Hợp đồng (access + baseline)
   ============================================================ */
.intake-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.intake-card { padding: 20px 22px; }
.intake-card-wide { grid-column: 1 / -1; }
.intake-card h3 { color: #fff; font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intake-card h3 > i { color: var(--primary, #7c5cff); }
.intake-ro { font-size: 11px; font-weight: 600; color: var(--text-muted, #94a3b8); background: rgba(255,255,255,0.06); padding: 2px 8px; border-radius: 999px; }
.intake-sub { font-size: 12.5px; margin-bottom: 12px; line-height: 1.5; }
.intake-dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.intake-dl dt { color: var(--text-muted, #94a3b8); }
.intake-dl dd { color: #e2e8f0; margin: 0; }
/* v3 (Pha H — H2): brand-entry editable trong Hồ sơ (retire wizard 11 bước) */
.intake-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 4px; }
.intake-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted, #94a3b8); }
.intake-label > span { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.intake-label input, .intake-label textarea { background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; color: #e2e8f0; font-size: 13px; padding: 7px 10px; font-family: inherit; }
.intake-label input:focus, .intake-label textarea:focus { outline: none; border-color: var(--primary, #7c5cff); }
.intake-label-wide { grid-column: 1 / -1; }
.intake-access { display: flex; flex-direction: column; gap: 8px; }
.access-toggle { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #e2e8f0; cursor: pointer; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; }
.access-toggle:hover { background: rgba(255,255,255,0.04); }
.access-toggle input { width: 16px; height: 16px; cursor: pointer; }
.access-toggle i { color: var(--secondary, #19c3e6); width: 16px; text-align: center; }
.intake-kpi-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.kpi-pill { font-size: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.intake-warn { font-size: 12.5px; color: #fbbf24; background: rgba(251,191,36,0.08); padding: 8px 12px; border-radius: 8px; display: flex; align-items: center; gap: 7px; line-height: 1.45; }
.intake-baseline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.bl-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-muted, #94a3b8); }
.bl-field input { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; color: #e2e8f0; padding: 8px 10px; font-size: 13.5px; }
.bl-field input:focus { outline: none; border-color: var(--primary, #7c5cff); }
.bl-note { display: block; }
.bl-note input { width: 100%; box-sizing: border-box; }
.intake-contract-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #e2e8f0; padding: 10px 12px; font-size: 13px; line-height: 1.5; font-family: inherit; }
.intake-contract-text:focus { outline: none; border-color: var(--primary, #7c5cff); }
.intake-contract-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.intake-contract-summary { font-size: 12.5px; color: var(--text-muted, #94a3b8); display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.intake-contract-summary > i { color: var(--secondary, #22d3ee); }

/* v1.11 — nạp file hợp đồng (chọn file / đọc thư mục) */
.intake-file-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.intake-contract-folder-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.intake-contract-folder-list:empty { display: none; }
.intake-contract-folder-list code { background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px; }
.intake-file-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; }
.intake-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e2e8f0; }
.intake-file-name > i { color: var(--secondary, #22d3ee); margin-right: 4px; }
.intake-file-meta { color: var(--text-muted, #94a3b8); white-space: nowrap; font-size: 11.5px; }
.intake-contract-paste { margin-top: 14px; }
.intake-contract-paste > summary { cursor: pointer; color: var(--text-muted, #94a3b8); font-size: 12.5px; user-select: none; }
.intake-contract-paste[open] > summary { margin-bottom: 10px; }

@media (max-width: 820px) { .intake-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TAB TỔNG QUAN (Pha 3) — phòng điều khiển read-only
   ============================================================ */
.ov-wrap { display: flex; flex-direction: column; gap: 18px; }
/* Rail workflow — chip mỗi chặng, click nhảy tab */
.ov-rail { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.ov-step { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; flex: 1 1 150px; min-width: 130px; padding: 11px 13px; border-radius: 11px; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-left: 3px solid rgba(255,255,255,0.2); color: #e2e8f0; transition: background .15s, transform .1s; }
.ov-step:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.ov-step-ico { font-size: 14px; opacity: 0.85; }
.ov-step-label { font-size: 13px; font-weight: 700; line-height: 1.25; }
.ov-step-note { font-size: 11px; color: var(--text-muted, #94a3b8); }
.ov-step.ov-done { border-left-color: #34d399; }
.ov-step.ov-done .ov-step-ico { color: #34d399; }
.ov-step.ov-active { border-left-color: #fbbf24; background: rgba(251,191,36,0.07); }
.ov-step.ov-active .ov-step-ico { color: #fbbf24; }
.ov-step.ov-todo { opacity: 0.62; }
.ov-rail-sep { display: flex; align-items: center; color: var(--text-muted, #94a3b8); opacity: 0.5; font-size: 11px; }
@media (max-width: 820px) { .ov-rail-sep { display: none; } }

.ov-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.ov-ok { font-size: 12.5px; color: #34d399; background: rgba(52,211,153,0.08); padding: 8px 12px; border-radius: 8px; display: flex; align-items: center; gap: 7px; line-height: 1.45; }
.ov-est { font-size: 11px; color: var(--text-muted, #94a3b8); font-style: italic; }
.ov-jump { margin-top: 12px; background: none; border: none; color: var(--secondary, #22d3ee); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.ov-jump:hover { text-decoration: underline; }

/* Cổng kiểm soát */
.ov-gates { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ov-gate { text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.08); color: #e2e8f0; display: flex; flex-direction: column; gap: 6px; transition: background .15s; }
.ov-gate:hover { background: rgba(255,255,255,0.05); }
.ov-gate-ok { border-left: 3px solid #34d399; }
.ov-gate-warn { border-left: 3px solid #fbbf24; }
.ov-gate-todo { border-left: 3px solid rgba(255,255,255,0.2); opacity: 0.78; }
.ov-gate-top { display: flex; align-items: center; gap: 8px; }
.ov-gate-name { font-size: 13px; font-weight: 700; }
.ov-gate-reason { font-size: 12px; color: var(--text-muted, #94a3b8); line-height: 1.4; }
.ov-gate-pill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ov-pill-ok { color: #34d399; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); }
.ov-pill-warn { color: #fbbf24; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.35); }
.ov-pill-todo { color: #94a3b8; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.3); }

/* ============================================================
   TAB CHIẾN LƯỢC (v8) — nav 8 bước + body từng bước
   ============================================================ */
.strategy-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.strat-step { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 11px; cursor: pointer; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); color: #cbd5e1; font-size: 12.5px; font-weight: 600; transition: background .18s ease, transform .12s ease, border-color .18s ease, box-shadow .18s ease; }
.strat-step:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); border-color: rgba(255,255,255,0.18); }
.strat-step.active { background: linear-gradient(135deg, rgba(124,92,255,0.22), rgba(124,92,255,0.1)); border-color: rgba(124,92,255,0.6); color: #fff; box-shadow: 0 4px 16px rgba(124,92,255,0.22); }
.strat-step-n { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 11.5px; font-weight: 700; transition: all .18s ease; flex: none; }
.strat-step.active .strat-step-n { background: var(--primary, #7c5cff); color: #fff; box-shadow: 0 0 0 3px rgba(124,92,255,0.25); }
/* "filled" (đã có data) = vòng xanh nhẹ thay vì tô đặc cho đỡ chói */
.strat-step.filled .strat-step-n { background: rgba(52,211,153,0.16); color: #34d399; box-shadow: inset 0 0 0 1.5px rgba(52,211,153,0.55); }
.strat-step.filled.active .strat-step-n { background: var(--primary, #7c5cff); color: #fff; box-shadow: 0 0 0 3px rgba(124,92,255,0.25); }

.strat-body-card { padding: 24px 26px; }
.strat-body-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.strat-body-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; background: linear-gradient(135deg, rgba(124,92,255,0.9), rgba(34,211,238,0.7)); }
.strat-body-head h2 { color: #fff; font-size: 18px; margin: 2px 0 6px; }
.strat-body-desc { font-size: 13.5px; color: #cbd5e1; line-height: 1.55; margin: 0; }
.strat-body-desc b { color: #e9d5ff; font-weight: 700; }
.strat-body-data { font-size: 12.5px; color: #34d399; background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2); padding: 9px 13px; border-radius: 9px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.strat-body-soon { font-size: 12.5px; color: var(--text-muted, #94a3b8); background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.18); padding: 11px 14px; border-radius: 9px; display: flex; align-items: center; gap: 8px; line-height: 1.45; }
.strat-nav-btns { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* Bước 1 — Mục tiêu (2 card) */
.strat-two-card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 900px) { .strat-two-card { grid-template-columns: 1fr; } }
.strat-card { padding: 20px 22px; }
.strat-card h3 { color: #fff; font-size: 15px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.strat-card h3 > i { color: var(--primary, #7c5cff); }
.strat-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.strat-tag-ok { color: #34d399; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); }
.strat-tag-warn { color: #fbbf24; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.35); }
.strat-sub { font-size: 12px; color: var(--text-muted, #94a3b8); line-height: 1.5; margin: 0 0 14px; }
.strat-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted, #94a3b8); margin: 14px 0 7px; }
.strat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.strat-list li { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: #e2e8f0; }
.strat-list li > span { flex: 1; min-width: 0; }
.strat-x { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 2px 5px; border-radius: 6px; flex: none; }
.strat-x:hover { color: #f87171; background: rgba(248,113,113,0.12); }
.strat-empty { font-size: 12px; color: var(--text-muted, #94a3b8); font-style: italic; margin: 0; }
.strat-add { display: flex; gap: 7px; margin-top: 8px; }
.strat-add input { flex: 1; min-width: 0; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; color: #e2e8f0; padding: 7px 10px; font-size: 13px; }
.strat-add input:focus { outline: none; border-color: var(--primary, #7c5cff); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.strat-kpis { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.strat-kpi-row { display: flex; gap: 7px; align-items: center; }
.strat-kpi-row select { flex: none; max-width: 46%; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; color: #e2e8f0; padding: 7px 8px; font-size: 12.5px; }
.strat-kpi-row input { flex: 1; min-width: 0; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; color: #e2e8f0; padding: 7px 10px; font-size: 12.5px; }
.strat-kpi-row select:focus, .strat-kpi-row input:focus { outline: none; border-color: var(--primary, #7c5cff); }
.strat-textarea { width: 100%; box-sizing: border-box; resize: vertical; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #e2e8f0; padding: 9px 11px; font-size: 13px; line-height: 1.5; font-family: inherit; }
.strat-textarea:focus { outline: none; border-color: var(--primary, #7c5cff); }

/* AI-assist (b1/b2) */
.strat-ai-btn { background: rgba(124,92,255,0.14) !important; border-color: rgba(124,92,255,0.4) !important; color: #c4b5fd !important; margin-bottom: 12px; }
.strat-ai-btn:hover { background: rgba(124,92,255,0.22) !important; }
.strat-ai-btn > i { color: #c4b5fd; }
.strat-ai-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.strat-ai-row .strat-ai-btn { margin-bottom: 0; }
.hero-suggest-box { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.hero-suggest-label { font-size: 11.5px; color: var(--text-muted, #94a3b8); }
.hero-suggest-chip { font-size: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(124,92,255,0.1); color: #c4b5fd; border: 1px dashed rgba(124,92,255,0.45); cursor: pointer; }
.hero-suggest-chip:hover { background: rgba(124,92,255,0.22); border-style: solid; }
.hero-review { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.hero-review-item { font-size: 12px; line-height: 1.45; padding: 6px 10px; border-radius: 7px; }
.hero-review-item b { color: #fff; }
.hero-review-item.hr-keep { color: #a7f3d0; background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2); }
.hero-review-item.hr-drop { color: #fde68a; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25); }

/* Bước 3/4 — card đối thủ + chân dung: LƯỚI nhiều cột (tránh dàn trải dọc) */
.comp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 12px 0; }
.comp-card { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 14px; }
/* b4 — insight + tension cạnh nhau */
.aud-insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .aud-insight-grid { grid-template-columns: 1fr; } }
/* b2 — kênh audit tile ngang */
.audit-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.comp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.comp-name { flex: 1; min-width: 0; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; color: #fff; font-weight: 700; font-size: 13.5px; padding: 7px 10px; }
.comp-name:focus { outline: none; border-color: var(--primary, #7c5cff); }
.comp-card .strat-label { margin: 8px 0 4px; }
.comp-card .strat-textarea { font-size: 12.5px; padding: 7px 9px; }

/* Bước 3 — BẢNG đối thủ (mỗi đối thủ 1 card-hàng 4 cột) */
.comp-head-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.comp-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; margin: 14px 0; }
.comp-c { display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; transition: border-color .16s ease, transform .14s ease, box-shadow .16s ease; }
.comp-c:hover { border-color: rgba(124,92,255,0.45); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.28); }
.comp-c-head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: rgba(124,92,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.07); }
.comp-c-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; background: linear-gradient(135deg, var(--primary, #7c5cff), var(--secondary, #22d3ee)); }
.comp-c-name { flex: 1; min-width: 0; background: transparent; border: none; border-radius: 6px; color: #fff; font-weight: 700; font-size: 14px; padding: 5px 6px; }
.comp-c-name:focus { outline: none; background: rgba(0,0,0,0.25); }
.comp-c-del { flex: none; }
.comp-c-field { padding: 9px 13px 0; }
.comp-c-field label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #94a3b8); margin-bottom: 5px; }
.comp-c-field textarea { width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e2e8f0; font-size: 12.5px; padding: 7px 9px; resize: vertical; font-family: inherit; line-height: 1.45; }
.comp-c-field textarea:focus { outline: none; border-color: var(--primary, #7c5cff); }
.comp-c-gap { margin-top: auto; background: rgba(52,211,153,0.06); border-top: 1px solid rgba(52,211,153,0.14); padding: 9px 13px 12px; }
.comp-c-gap label { color: #34d399; }
.comp-c-gap label > i { margin-right: 4px; }
.comp-c-gap textarea { border-color: rgba(52,211,153,0.28); background: rgba(0,0,0,0.2); }
/* v10 — Visual hierarchy 4 section: Doing (gray) · Strength (red hint, rival) · Gap (green, cơ hội) · Why (purple, Differentiation Map) */
.comp-c-doing label > i { margin-right: 4px; color: var(--text-muted, #94a3b8); }
.comp-c-strength { background: rgba(239,68,68,0.04); }
.comp-c-strength label { color: #fca5a5; }
.comp-c-strength label > i { margin-right: 4px; color: #f87171; }
.comp-c-strength textarea { border-color: rgba(239,68,68,0.22); }

/* b3 — Differentiation (A4): "khách chọn ta thay vì X" — accent tím + nhấn mạnh nhất */
.comp-c-why {
  background: linear-gradient(135deg, rgba(124,92,255,0.14), rgba(124,92,255,0.06));
  border-top: 2px solid rgba(124,92,255,0.4);
  padding: 11px 13px 14px;
  margin-top: 6px;
}
.comp-c-why label { color: #c4b5fd; font-size: 11px; display: flex; align-items: center; gap: 5px; }
.comp-c-why label > i { color: #fbbf24; }
.comp-c-why textarea { border-color: rgba(124,92,255,0.45); background: rgba(0,0,0,0.32); color: #fff; font-size: 13px; }
.comp-c-why-tag {
  margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(251,191,36,0.18); color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.4);
}
.comp-c-diff { border-color: rgba(124,92,255,0.45); box-shadow: 0 0 0 1px rgba(124,92,255,0.18); }
.comp-c-diff-badge {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,197,94,0.18); color: #4ade80;
  font-size: 12px;
}

/* v10 — Persona card (b4) mở rộng theo skill persona_insight: 5 trường + priority */
.pers-c { /* inherit từ .comp-c */ }
.pers-c-priority {
  border-color: rgba(124,92,255,0.55);
  box-shadow: 0 0 0 1px rgba(124,92,255,0.22), 0 6px 20px rgba(124,92,255,0.12);
}
.pers-c-priority .comp-c-head {
  background: linear-gradient(135deg, rgba(124,92,255,0.22), rgba(124,92,255,0.08));
}
.pers-prio-toggle {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(0,0,0,0.25); border: 1px solid var(--border-light, rgba(255,255,255,0.15));
  font-size: 14px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.pers-prio-toggle:hover { transform: scale(1.08); border-color: var(--primary, #7c5cff); }
.pers-prio-toggle.is-high {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #fbbf24;
  box-shadow: 0 2px 10px rgba(251,191,36,0.4);
}

/* JTBD 3 lớp — grid */
.pers-jtbd { padding: 9px 13px 0; }
.pers-jtbd-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted, #94a3b8);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 5px;
}
.pers-jtbd-label .fas { color: var(--primary, #7c5cff); }
.pers-jtbd-hint { font-weight: 500; opacity: 0.7; text-transform: none; letter-spacing: 0; margin-left: 2px; }
.pers-jtbd-grid {
  display: grid; gap: 6px;
  grid-template-columns: 1fr;
}
.pers-jtbd-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 9px; border-radius: 7px;
  background: rgba(0,0,0,0.16);
  border-left: 3px solid transparent;
}
.pers-jtbd-cell > span {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted, #94a3b8);
  display: flex; align-items: center; gap: 4px;
}
.pers-jtbd-cell textarea {
  width: 100%; box-sizing: border-box;
  background: transparent; border: none; outline: none;
  color: #e2e8f0; font-size: 12px; padding: 2px 0;
  resize: vertical; font-family: inherit; line-height: 1.4;
}
.pers-jtbd-func { border-left-color: #60a5fa; }
.pers-jtbd-func > span { color: #93c5fd; }
.pers-jtbd-emo { border-left-color: #f472b6; }
.pers-jtbd-emo > span { color: #f9a8d4; }
.pers-jtbd-soc { border-left-color: #fbbf24; }
.pers-jtbd-soc > span { color: #fde047; }

/* Trigger box */
.pers-c-trigger {
  background: rgba(34,211,238,0.06);
  border-top: 1px solid rgba(34,211,238,0.18);
  margin-top: 6px;
  padding-top: 10px;
}
.pers-c-trigger label { color: #67e8f9; }
.pers-c-trigger label > i { color: #22d3ee; margin-right: 4px; }
.pers-c-trigger textarea { border-color: rgba(34,211,238,0.28); }

/* Hard barrier (additional) */
.pers-c-barrier-hard { background: rgba(245,158,11,0.04); }
.pers-c-barrier-hard label { color: #fcd34d; }
.pers-c-barrier-hard label > i { color: #f59e0b; margin-right: 4px; }
.pers-c-barrier-hard textarea { border-color: rgba(245,158,11,0.22); }

/* Touchpoint */
.pers-c-touchpoint {
  background: linear-gradient(135deg, rgba(124,92,255,0.08), rgba(124,92,255,0.02));
  border-top: 1px solid rgba(124,92,255,0.2);
  margin-top: 6px;
  padding: 10px 13px 13px;
}
.pers-c-touchpoint label { color: #c4b5fd; }
.pers-c-touchpoint label > i { color: var(--primary, #7c5cff); margin-right: 4px; }
.pers-c-touchpoint textarea { border-color: rgba(124,92,255,0.3); }
/* b4 — Rào cản nổi bật (vàng: chướng ngại cần gỡ) */
.comp-c-barrier { margin-top: auto; background: rgba(251,191,36,0.06); border-top: 1px solid rgba(251,191,36,0.16); padding: 9px 13px 12px; }
.comp-c-barrier label { color: #fbbf24; }
.comp-c-barrier label > i { margin-right: 4px; }
.comp-c-barrier textarea { border-color: rgba(251,191,36,0.28); background: rgba(0,0,0,0.2); }
/* b4 — Insight & Tension: 2 box accent */
.aud-box { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 13px 15px; }
.aud-box-insight { border-left: 3px solid var(--primary, #7c5cff); }
.aud-box-tension { border-left: 3px solid var(--secondary, #22d3ee); }
.aud-box .strat-label { margin-top: 0; }
.aud-box-insight .strat-label > i { color: #c4b5fd; margin-right: 5px; }
.aud-box-tension .strat-label > i { color: #22d3ee; margin-right: 5px; }

/* b5 — Positioning */
.pos-feed { font-size: 12px; color: #22d3ee; background: rgba(34,211,238,0.07); border: 1px solid rgba(34,211,238,0.2); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.pos-feed-warn { color: #fbbf24; background: rgba(251,191,36,0.07); border-color: rgba(251,191,36,0.22); }
.pos-statement { margin-bottom: 14px; }
.pos-statement .strat-label > i { color: #c4b5fd; margin-right: 5px; }
.pos-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pos-two .strat-label > i { color: var(--secondary, #22d3ee); margin-right: 5px; }
@media (max-width: 760px) { .pos-two { grid-template-columns: 1fr; } }

/* v10 (POS) — Differentiation Map summary read-only ở b5 */
.pos-diffmap {
  background: rgba(124,92,255,0.04);
  border: 1px solid rgba(124,92,255,0.22);
  border-radius: 9px; padding: 12px 14px; margin-bottom: 14px;
}
.pos-diffmap-title { font-size: 13px; color: #fff; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pos-diffmap-title .fas { color: #fbbf24; }
.pos-diffmap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pos-diffmap-list li {
  font-size: 12.5px; line-height: 1.5; padding: 6px 10px; border-radius: 6px;
  background: rgba(0,0,0,0.16); border-left: 3px solid rgba(124,92,255,0.4);
  color: var(--text-secondary, #c7cad1);
}
.pos-diffmap-vs { color: #fbbf24; font-weight: 600; margin-right: 6px; }
.pos-diffmap-vs b { color: #fff; }
.pos-diffmap-empty { color: #6b7280; }

/* v10 (POS) — Onlyness Statement template 4 ô guide */
.pos-onlyness {
  background: linear-gradient(135deg, rgba(124,92,255,0.08), rgba(34,211,238,0.04));
  border: 1px solid rgba(124,92,255,0.3);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.pos-onlyness-title { font-size: 13px; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.pos-onlyness-title .fas { color: #c4b5fd; }
.pos-onlyness-sentence {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 14px; line-height: 1.8; color: #e2e8f0;
}
.pos-onlyness-fixed { color: var(--text-muted, #94a3b8); font-style: italic; }
.pos-onlyness-input {
  background: rgba(0,0,0,0.3); border: 1px dashed rgba(124,92,255,0.4);
  color: #fff; padding: 4px 9px; border-radius: 6px;
  font-size: 13.5px; font-family: inherit; min-width: 140px; outline: none;
}
.pos-onlyness-input:focus { border-color: var(--primary, #7c5cff); border-style: solid; }
.pos-onlyness-input-wide { min-width: 240px; flex: 1; }
.pos-onlyness-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--text-muted, #94a3b8); font-style: italic; }

/* v10 (POS) — Brand Safety inline warning */
.pos-safety-warn {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.4);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 12.5px; color: #fca5a5; line-height: 1.55;
}
.pos-safety-warn .fas { color: #ef4444; margin-right: 4px; }
.pos-safety-warn code {
  background: rgba(239,68,68,0.18); color: #fca5a5;
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.pos-safety-warn a { color: #f87171; text-decoration: underline; }

/* v10 (POS) — Communication Angle box */
.pos-angle-box { margin-bottom: 14px; }
.pos-angle-box .strat-label > i { color: #22d3ee; margin-right: 5px; }

/* v10 (POS) — ToV grid 4 trục + chip NÊN/CẤM + sample */
.pos-tov {
  background: rgba(0,0,0,0.18); border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.pos-tov-title { font-size: 13px; color: #fff; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pos-tov-title .fas { color: var(--primary, #7c5cff); }
.pos-tov-axes { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
@media (max-width: 760px) { .pos-tov-axes { grid-template-columns: 1fr; } }
.pos-tov-axis {}
.pos-tov-axis-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8); text-transform: uppercase;
  margin-bottom: 5px;
}
.pos-tov-slider {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(124,92,255,0.4), rgba(34,211,238,0.4));
  outline: none;
}
.pos-tov-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary, #7c5cff);
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.pos-tov-words { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
@media (max-width: 760px) { .pos-tov-words { grid-template-columns: 1fr; } }
.pos-tov-words-col label {
  display: block; font-size: 11.5px; font-weight: 700;
  color: #fff; margin-bottom: 6px;
}
.pos-tov-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 32px; margin-bottom: 6px; }
.pos-tov-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(124,92,255,0.16); color: #c4b5fd;
  border: 1px solid rgba(124,92,255,0.3);
}
.pos-tov-chip button {
  background: transparent; border: none; color: rgba(255,255,255,0.6);
  cursor: pointer; padding: 0 0 0 3px; font-size: 13px; line-height: 1;
}
.pos-tov-chip button:hover { color: #f87171; }
.pos-tov-allow { background: rgba(34,197,94,0.14); color: #4ade80; border-color: rgba(34,197,94,0.32); }
.pos-tov-deny { background: rgba(239,68,68,0.14); color: #f87171; border-color: rgba(239,68,68,0.32); }
.pos-tov-add { display: flex; gap: 6px; }
.pos-tov-add input {
  flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 12px; outline: none;
}
.pos-tov-add input:focus { border-color: var(--primary, #7c5cff); }
.pos-tov-sample label { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.pos-tov-sample label .fas { color: #fbbf24; }
.pos-tov-sample input {
  width: 100%; box-sizing: border-box;
  background: rgba(0,0,0,0.3); border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  color: #e2e8f0; padding: 8px 12px; border-radius: 7px;
  font-size: 13px; font-style: italic; outline: none;
}
.pos-tov-sample input:focus { border-color: var(--primary, #7c5cff); }

/* v10 (POS) — QC Checklist */
.pos-qc {
  background: rgba(0,0,0,0.18); border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 10px; padding: 12px 14px;
}
.pos-qc-title { font-size: 13px; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.pos-qc-title .fas { color: var(--primary, #7c5cff); }
.pos-qc-progress {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(34,197,94,0.14); color: #4ade80;
}
.pos-qc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pos-qc-list li { font-size: 12.5px; padding: 4px 0; display: flex; align-items: center; gap: 7px; }
.pos-qc-ok { color: #4ade80; }
.pos-qc-ok .fas { color: #4ade80; }
.pos-qc-todo { color: var(--text-muted, #94a3b8); opacity: 0.75; }
.pos-qc-todo .fas { opacity: 0.5; }

/* v10 (BI) — b6 Big Idea 3 trường mới: Format Signature / Bám định vị / Triển khai xuyên Pillar */
.bi-three {
  display: grid; gap: 14px; margin: 14px 0;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1000px) { .bi-three { grid-template-columns: 1fr; } }
.bi-three .aud-box { border-left-width: 3px; border-left-style: solid; }
.bi-fmt { border-left-color: #fbbf24 !important; }
.bi-fmt .strat-label > i { color: #fbbf24; margin-right: 5px; }
.bi-pos { border-left-color: #22d3ee !important; }
.bi-pos .strat-label > i { color: #22d3ee; margin-right: 5px; }
.bi-px { border-left-color: var(--primary, #7c5cff) !important; }
.bi-px .strat-label > i { color: var(--primary, #7c5cff); margin-right: 5px; }

/* v10 (PI) — b7 Pillars enhancements */
.pi-template {
  background: rgba(0,0,0,0.18); border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.pi-template-title { font-size: 13px; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.pi-template-title .fas { color: var(--primary, #7c5cff); }
.pi-template-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pi-template-table th, .pi-template-table td {
  padding: 6px 9px; border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  text-align: center; color: var(--text-secondary, #c7cad1);
}
.pi-template-table th {
  background: rgba(124,92,255,0.14); color: #c4b5fd;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.pi-template-table td:first-child { text-align: left; color: #fff; }
.pi-template-current { background: rgba(124,92,255,0.06); }
.pi-template-current td { color: #fff; }
.pi-template-current td:first-child b { color: #fbbf24; }

.pi-3truc-badge {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,197,94,0.18); color: #4ade80; font-size: 10px;
}
.pil-card-3truc { box-shadow: 0 0 0 1px rgba(34,197,94,0.22); }
.pi-km-link select {
  background: rgba(0,0,0,0.24); border: 1px solid rgba(124,92,255,0.3);
  color: #e2e8f0; padding: 6px 9px; border-radius: 7px;
  font-size: 12px; width: 100%; outline: none;
}
.pi-km-link select:focus { border-color: var(--primary, #7c5cff); }

/* v10 (MA) — Funnel Arc visualize b8 */
.ma-arc {
  background: rgba(0,0,0,0.16); border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.ma-arc-title { font-size: 13px; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ma-arc-title .fas { color: var(--primary, #7c5cff); }
.ma-arc-bar { display: flex; align-items: stretch; gap: 4px; }
.ma-arc-seg {
  padding: 10px 12px; border-radius: 7px;
  min-height: 70px; display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.ma-arc-seg-label { font-size: 12px; font-weight: 700; }
.ma-arc-seg-funnel { font-size: 11px; opacity: 0.85; }
.ma-arc-seg-quota { font-size: 11px; color: var(--text-secondary, #c7cad1); }
.ma-arc-sep { color: var(--text-muted, #94a3b8); align-self: center; font-size: 13px; }

/* v10 (MA) — note field */
.ma-note-field input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.24); border: 1px solid rgba(34,211,238,0.3); border-radius: 7px; color: #e2e8f0; padding: 7px 10px; font-size: 12.5px; outline: none; }
.ma-note-field input:focus { border-color: #22d3ee; }
.ma-note-field label > i { color: #22d3ee; margin-right: 4px; }
.strat-input { width: 100%; box-sizing: border-box; }

/* b4 — review Google Maps thật */
.maps-rev-meta { font-size: 12px; color: #cbd5e1; margin: 12px 0 8px; }
.maps-rev-meta b { color: #fbbf24; }
.maps-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; max-height: 280px; overflow-y: auto; }
.maps-rev { font-size: 12px; color: #cbd5e1; line-height: 1.5; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid rgba(251,191,36,0.5); border-radius: 8px; padding: 8px 11px; font-style: italic; }

/* b6 — Big Idea + Key Messages */
.bigidea-concept { margin-bottom: 6px; }
.bigidea-concept .strat-label > i { color: #fbbf24; margin-right: 5px; }
.km-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.km-item { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 6px 10px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; padding: 9px 11px; border-left-width: 4px; border-left-style: solid; border-left-color: rgba(255,255,255,0.12); }
.km-item > .km-tier-bar { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.km-tier-bar select { background: rgba(0,0,0,0.3); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; padding: 3px 6px; font-size: 11.5px; }
.km-tier-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.km-tier-chip > i { font-size: 11px; }
/* v3 (Sprint 3): Message Hierarchy 3 tầng — màu phân tầng (Primary tím, Secondary xanh, Tertiary xám) */
.km-tier-primary { border-left-color: #fbbf24; }
.km-tier-primary-chip { background: rgba(251,191,36,0.16); color: #fbbf24; border: 1px solid rgba(251,191,36,0.35); }
.km-tier-secondary { border-left-color: #34d399; }
.km-tier-secondary-chip { background: rgba(52,211,153,0.14); color: #34d399; border: 1px solid rgba(52,211,153,0.32); }
.km-tier-tertiary { border-left-color: #94a3b8; }
.km-tier-tertiary-chip { background: rgba(148,163,184,0.14); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); }
.km-item > textarea { grid-column: 1; grid-row: 2; }
.km-del { grid-column: 2; grid-row: 1; align-self: center; }
.km-basis { grid-column: 1 / -1; grid-row: 3; font-size: 11px; color: #34d399; display: inline-flex; align-items: center; gap: 5px; }
.km-basis-warn { color: #fbbf24; }

/* b7/b8 — pillar/phase meta (tỷ trọng/số bài + funnel) */
.pil-meta { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.pil-meta input, .pil-meta select { width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e2e8f0; font-size: 12.5px; padding: 7px 9px; }
.pil-meta input:focus, .pil-meta select:focus { outline: none; border-color: var(--primary, #7c5cff); }
.pil-total { font-size: 12.5px; color: #cbd5e1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; }
.pil-total b { color: #fff; }
.pil-total-ok { color: #34d399; border-color: rgba(52,211,153,0.25); }
.pil-total-warn { color: #fbbf24; border-color: rgba(251,191,36,0.25); }

/* v3 (Pha H — Cổng 4 Đo lường) MVP: bảng KPI vs baseline + actual + status */
.ms-wrap { display: flex; flex-direction: column; gap: 12px; }
.ms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; }
.ms-toolbar-info { font-size: 12.5px; color: #cbd5e1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-toolbar-info > i { color: #67e8f9; }
.ms-toolbar-info b { color: #e2e8f0; }
.ms-last { color: #94a3b8; font-size: 11px; margin-left: 8px; }
.ms-toolbar-actions { display: flex; gap: 8px; flex: none; }
.ms-table-wrap { background: rgba(0,0,0,0.16); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 6px; overflow-x: auto; }
.ms-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; color: #e2e8f0; }
.ms-table thead th { text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
.ms-row td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.ms-row:last-child td { border-bottom: none; }
.ms-metric { min-width: 220px; }
.ms-metric b { display: block; color: #e2e8f0; }
.ms-bl-tag { display: inline-block; margin-top: 3px; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(124,92,255,0.12); color: #c4b5fd; border: 1px solid rgba(124,92,255,0.28); }
.ms-bl-tag-warn { background: rgba(251,191,36,0.1); color: #fbbf24; border-color: rgba(251,191,36,0.28); }
.ms-cell { min-width: 100px; }
.ms-empty { color: #64748b; font-style: italic; }
.ms-actual-cell { min-width: 220px; }
.ms-actual-input, .ms-note-input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; color: #e2e8f0; font-size: 12.5px; padding: 6px 9px; font-family: inherit; margin-bottom: 5px; }
.ms-actual-input { font-weight: 600; }
.ms-note-input { font-size: 11.5px; color: #cbd5e1; }
.ms-actual-input:focus, .ms-note-input:focus { outline: none; border-color: var(--primary, #7c5cff); }
.ms-status-cell { min-width: 180px; }
.ms-status { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.ms-neutral { background: rgba(148,163,184,0.14); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.28); }
.ms-info { background: rgba(56,189,248,0.12); color: #67e8f9; border: 1px solid rgba(56,189,248,0.28); }
.ms-ok { background: rgba(52,211,153,0.14); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.ms-warn { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.ms-danger { background: rgba(248,113,113,0.12); color: #fca5a5; border: 1px solid rgba(248,113,113,0.3); }
.ms-when { font-size: 10.5px; color: #64748b; margin-top: 4px; }
.ms-footer { padding: 10px 14px; }

/* v4.10.2 — Báo cáo chi tiết theo tháng (inline section in Đo lường tab) */
.ms-mr-card-wrap { margin-top: 18px; padding: 16px 18px; }
.ms-mr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ms-mr-head h3 { font-size: 14px; color: #e2e8f0; display: flex; align-items: center; gap: 8px; }
.ms-mr-head h3 i { color: #a78bfa; }
.ms-mr-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ms-mr-label-inline { font-size: 12px; color: #94a3b8; }
.ms-mr-meta { font-size: 11.5px; color: #94a3b8; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.ms-mr-source { display: inline-flex; align-items: center; gap: 5px; }
.ms-mr-warn { color: #fbbf24; }
.ms-mr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ms-mr-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 12px; }
.ms-mr-label { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.ms-mr-val { font-size: 18px; color: #e2e8f0; font-weight: 600; margin-top: 4px; }
.ms-mr-vs-before { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.ms-mr-delta { font-weight: 600; }
.ms-mr-up { color: #34d399; }
.ms-mr-down { color: #fca5a5; }
.ms-mr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.ms-mr-block h4 { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.ms-mr-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.ms-mr-stage { background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 6px 8px; text-align: center; font-size: 11px; color: #cbd5e1; }
.ms-mr-stage-label { display: block; font-size: 9.5px; text-transform: uppercase; color: #64748b; margin-bottom: 2px; }
.ms-mr-stage b { color: #e2e8f0; font-size: 15px; }
.ms-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; color: #cbd5e1; }
.ms-mini-table th, .ms-mini-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: left; }
.ms-mini-table th { color: #94a3b8; font-size: 10.5px; text-transform: uppercase; }
.ms-mr-empty { margin-top: 12px; padding: 10px 12px; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2); border-radius: 6px; color: #fbbf24; font-size: 12px; }
@media (max-width: 720px) { .ms-mr-row { grid-template-columns: 1fr; } }

/* Print friendly: ẩn sidebar/tabbar + tô đen text khi In báo cáo */
@media print {
  body { background: #fff !important; color: #111 !important; }
  .sidebar, .project-tabbar, .ptab, .ms-toolbar-actions, button { display: none !important; }
  .ms-table, .ms-table th, .ms-table td { color: #111 !important; border-color: #999 !important; }
  .ms-status { border: 1px solid #555 !important; color: #111 !important; background: #f4f4f4 !important; }
  .glass-panel { background: #fff !important; border: 1px solid #999 !important; box-shadow: none !important; color: #111 !important; }
}

/* v3 (Sprint 4 — A6 Brand Safety): danh sách claim rủi ro chưa kiểm chứng (Tổng quan) */
.bs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bs-item { display: grid; grid-template-columns: 60px 1fr; gap: 10px; padding: 9px 11px; background: rgba(244,162,35,0.06); border: 1px solid rgba(244,162,35,0.22); border-radius: 8px; }
.bs-step { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; color: #fbbf24; background: rgba(251,191,36,0.14); border-radius: 6px; padding: 4px 0; height: fit-content; }
.bs-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bs-field { font-size: 11.5px; color: #cbd5e1; }
.bs-snippet { font-size: 12.5px; color: #e2e8f0; font-style: italic; line-height: 1.4; overflow-wrap: anywhere; }
.bs-risks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.bs-risk { font-size: 10.5px; color: #fca5a5; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.3); padding: 2px 8px; border-radius: 999px; font-weight: 600; }

/* v3 (Sprint 4 — A1 Golden Thread): thẻ hiển thị "bám vào đâu ở bước trước" — chỉ báo kế thừa */
.gt-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12px; padding: 9px 13px; border-radius: 9px; margin: 0 0 12px; border: 1px solid; }
.gt-box-ok { background: rgba(34,211,238,0.05); border-color: rgba(34,211,238,0.22); color: #67e8f9; }
.gt-box-warn { background: rgba(251,191,36,0.06); border-color: rgba(251,191,36,0.24); color: #fbbf24; }
.gt-head { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.gt-head > i { font-size: 11.5px; }
.gt-src { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.18); padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.06); font-size: 11.5px; color: #e2e8f0; }
.gt-src.gt-ok { color: #67e8f9; border-color: rgba(34,211,238,0.3); }
.gt-src.gt-warn { color: #fbbf24; border-color: rgba(251,191,36,0.3); opacity: .9; }
.gt-src b { color: inherit; opacity: .85; font-weight: 600; margin-right: 2px; }

/* Stacked horizontal bar tổng quan tỷ trọng pillar — màu theo funnelStage (b7) */
.pil-chart { display: flex; align-items: stretch; width: 100%; height: 40px; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.08); margin: 0 0 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.pil-seg { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 8px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.96); white-space: nowrap; transition: filter .14s ease; cursor: default; background: var(--chip-color, #4f8cff); position: relative; }
.pil-seg + .pil-seg { box-shadow: inset 1px 0 0 rgba(0,0,0,0.22); }
.pil-seg:hover { filter: brightness(1.12); }
.pil-seg-lbl { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pil-seg.funnel-awareness     { --chip-color: #4f8cff; }
.pil-seg.funnel-consideration { --chip-color: #f4a623; color: #1c1402; }
.pil-seg.funnel-conversion    { --chip-color: #2ecc71; color: #06210f; }
.pil-seg.funnel-retention     { --chip-color: #b06cff; }

/* Border-left màu funnel cho pillar card (b7) — quét lưới biết ngay phân bố phễu */
.pil-card { border-left-width: 4px !important; border-left-style: solid !important; border-left-color: var(--chip-color, rgba(255,255,255,0.14)) !important; }
.pil-card.funnel-awareness     { --chip-color: #4f8cff; }
.pil-card.funnel-consideration { --chip-color: #f4a623; }
.pil-card.funnel-conversion    { --chip-color: #2ecc71; }
.pil-card.funnel-retention     { --chip-color: #b06cff; }

/* Polish — chiều sâu + hover cho card tab Chiến lược */
.strat-card, .strat-body-card { box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
.comp-card, .audit-ch { transition: border-color .16s ease, background .16s ease; }

/* ============================================================
   P2 — Bước 8 Content Mapping focusPillars: stacked bar + slider rows
   ============================================================ */
.focus-section { margin: 8px 0 4px; padding: 10px; border-radius: 10px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); }
.focus-label { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.78); margin-bottom: 8px; letter-spacing: 0.3px; text-transform: uppercase; }
.focus-label i { color: var(--primary, #7c3aed); margin-right: 6px; }

.focus-stacked-bar { display: flex; align-items: stretch; width: 100%; height: 32px; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.06); margin-bottom: 10px; }
.focus-bar-seg { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 6px; font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); white-space: nowrap; transition: filter .12s ease; }
.focus-bar-seg + .focus-bar-seg { box-shadow: inset 1px 0 0 rgba(0,0,0,0.32); }
.focus-bar-seg:hover { filter: brightness(1.14); }
.focus-bar-lbl { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.focus-stacked-empty { font-size: 12px; color: rgba(255,255,255,0.5); font-style: italic; padding: 6px 0; }

/* P3.9 — slider row: min-width:0 cho flex items để text ellipsis hoạt động; delete luôn visible cuối row */
.focus-slider-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; min-width: 0; }
.focus-slider-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(0,0,0,0.32); }
.focus-slider-name { flex: 1 1 120px; min-width: 0; font-size: 12.5px; color: rgba(255,255,255,0.88); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-slider-row input[type="range"] { flex: 2 1 60px; min-width: 50px; height: 6px; accent-color: var(--primary, #7c3aed); }
.focus-slider-num { width: 48px; flex: none; font-size: 12px; padding: 4px 4px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #fff; text-align: right; }
.focus-slider-num:focus { outline: 1px solid var(--primary, #7c3aed); }
.focus-slider-unit { font-size: 11px; color: rgba(255,255,255,0.5); flex: none; }
.focus-slider-del { padding: 4px 8px; background: transparent; border: none; color: rgba(255,255,255,0.55); cursor: pointer; border-radius: 4px; flex: none; font-size: 13px; }
.focus-slider-del:hover { color: #ff6b6b; background: rgba(255,107,107,0.12); }

.focus-add-row { margin: 8px 0 4px; }
.focus-add-select { width: 100%; padding: 6px 8px; background: rgba(0,0,0,0.28); border: 1px dashed rgba(255,255,255,0.14); border-radius: 6px; color: rgba(255,255,255,0.85); font-size: 12px; cursor: pointer; }
.focus-add-select:hover { border-color: var(--primary, #7c3aed); }
.focus-add-row-text { display: flex; gap: 6px; align-items: center; }
.focus-add-text { flex: 1; padding: 6px 8px; background: rgba(0,0,0,0.28); border: 1px dashed rgba(255,255,255,0.14); border-radius: 6px; color: rgba(255,255,255,0.92); font-size: 12px; }
.focus-add-text:focus { border-color: var(--primary, #7c3aed); border-style: solid; outline: none; }
.focus-add-ct-btn { padding: 6px 10px; flex: none; }
.focus-section-ct { margin-top: 10px; background: rgba(0,0,0,0.14); }

.focus-total { font-size: 11.5px; padding: 6px 8px; border-radius: 6px; margin-top: 8px; }
.focus-total-ok { background: rgba(46,204,113,0.12); color: #2ecc71; border: 1px solid rgba(46,204,113,0.2); }
.focus-total-warn { background: rgba(244,166,35,0.1); color: #f4a623; border: 1px solid rgba(244,166,35,0.2); }
.focus-total i { margin-right: 4px; }
.btn-link.focus-rebal { background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 0 4px; font-size: 11.5px; font-weight: 600; }
.btn-link.focus-rebal:hover { color: #fff; }

.focus-orphan-warn { font-size: 11.5px; color: #f4a623; background: rgba(244,166,35,0.08); padding: 5px 8px; border-radius: 6px; margin-bottom: 8px; }
.focus-orphan-warn i { margin-right: 4px; }

/* ============================================================
   P3 — Modal so sánh pillar AI 2 cột drag-drop
   ============================================================ */
.pcmp-modal { max-width: 1100px; width: 92vw; }
.pcmp-cache-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 10px; background: rgba(124,92,255,0.16); color: rgba(255,255,255,0.78); font-weight: 500; margin-left: 8px; cursor: help; }
.pcmp-cache-badge i { font-size: 9px; }
.pcmp-instruction { padding: 10px 12px; background: rgba(124,92,255,0.08); border: 1px solid rgba(124,92,255,0.2); border-radius: 8px; font-size: 12.5px; color: rgba(255,255,255,0.88); margin-bottom: 14px; }
.pcmp-instruction i { color: var(--primary, #7c5cff); margin-right: 6px; }

.pcmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pcmp-col { background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 10px; min-height: 320px; }
.pcmp-col-head { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.78); letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(255,255,255,0.1); }
.pcmp-col-head i { margin-right: 6px; color: var(--primary, #7c5cff); }

/* Slot pillar cũ (drop target) */
.pcmp-cur-slot { padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,0.24); border: 2px dashed rgba(255,255,255,0.1); margin-bottom: 8px; border-left-width: 4px; border-left-style: solid; transition: all .14s ease; }
.pcmp-cur-slot.pcmp-slot-hover { border-color: var(--primary, #7c5cff); background: rgba(124,92,255,0.1); transform: scale(1.01); }
.pcmp-cur-slot.pcmp-cur-replaced { border-style: solid; border-color: rgba(46,204,113,0.4); background: rgba(46,204,113,0.06); }
.pcmp-cur-slot.funnel-awareness     { border-left-color: #4f8cff; }
.pcmp-cur-slot.funnel-consideration { border-left-color: #f4a623; }
.pcmp-cur-slot.funnel-conversion    { border-left-color: #2ecc71; }
.pcmp-cur-slot.funnel-retention     { border-left-color: #b06cff; }
.pcmp-cur-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.pcmp-cur-head b { color: rgba(255,255,255,0.96); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcmp-cur-empty { font-size: 11.5px; color: rgba(255,255,255,0.42); font-style: italic; }
.pcmp-cur-empty i { margin-right: 4px; }
.pcmp-cur-rep { font-size: 11.5px; color: #2ecc71; display: flex; align-items: center; gap: 6px; padding-top: 4px; }
.pcmp-cur-rep i { font-size: 10px; }
.pcmp-cur-rep b { color: #fff; }
.pcmp-undo { background: transparent; border: none; color: rgba(255,255,255,0.45); cursor: pointer; padding: 2px 6px; border-radius: 4px; margin-left: auto; }
.pcmp-undo:hover { color: #ff6b6b; background: rgba(255,107,107,0.08); }

/* Card pillar AI (draggable) */
.pcmp-ai-card { padding: 10px 12px; background: rgba(124,92,255,0.06); border: 1px solid rgba(124,92,255,0.25); border-left: 4px solid; border-radius: 8px; cursor: grab; transition: all .14s ease; margin-bottom: 8px; }
.pcmp-ai-card.funnel-awareness     { border-left-color: #4f8cff; }
.pcmp-ai-card.funnel-consideration { border-left-color: #f4a623; }
.pcmp-ai-card.funnel-conversion    { border-left-color: #2ecc71; }
.pcmp-ai-card.funnel-retention     { border-left-color: #b06cff; }
.pcmp-ai-card:hover { background: rgba(124,92,255,0.14); transform: translateX(-2px); }
.pcmp-ai-card.pcmp-dragging { opacity: 0.5; cursor: grabbing; }
.pcmp-ai-card.pcmp-ai-assigned { opacity: 0.5; cursor: not-allowed; background: rgba(46,204,113,0.06); border-color: rgba(46,204,113,0.3); }
.pcmp-ai-head { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.pcmp-ai-head b { flex: 1; color: rgba(255,255,255,0.96); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcmp-ai-grip { color: rgba(255,255,255,0.35); cursor: grab; }
.pcmp-ai-purpose { font-size: 11.5px; color: rgba(255,255,255,0.62); line-height: 1.45; margin-bottom: 6px; }
.pcmp-ai-keepnew { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,0.68); cursor: pointer; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,0.08); margin-top: 4px; }
.pcmp-ai-keepnew input { accent-color: var(--primary, #7c5cff); }
.pcmp-ai-status { font-size: 11.5px; color: #2ecc71; padding-top: 4px; border-top: 1px dashed rgba(46,204,113,0.16); margin-top: 4px; }
.pcmp-ai-status i { margin-right: 4px; }

.pcmp-stage-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 12px; background: rgba(0,0,0,0.32); color: rgba(255,255,255,0.88); font-weight: 600; flex: none; }
.pcmp-stage-chip.funnel-awareness     { background: rgba(79,140,255,0.22); color: #4f8cff; }
.pcmp-stage-chip.funnel-consideration { background: rgba(244,166,35,0.22); color: #f4a623; }
.pcmp-stage-chip.funnel-conversion    { background: rgba(46,204,113,0.22); color: #2ecc71; }
.pcmp-stage-chip.funnel-retention     { background: rgba(176,108,255,0.22); color: #b06cff; }

.pcmp-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.pcmp-summary { font-size: 12.5px; color: rgba(255,255,255,0.78); }
.pcmp-summary b { color: #fff; }
.pcmp-actions { display: flex; gap: 10px; }

@media (max-width: 760px) {
  .pcmp-grid { grid-template-columns: 1fr; }
}
.comp-card:hover, .audit-ch:hover { border-color: rgba(124,92,255,0.3); background: rgba(124,92,255,0.04); }
.strat-card h3 { letter-spacing: -0.01em; }
.strategy-nav .strat-step.ov-todo { opacity: 0.7; }

/* Bước 2 — Audit thương hiệu */
/* Legacy 2-col layout (giữ cho backward-compat) */
.strat-audit-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .strat-audit-grid { grid-template-columns: 1fr; } }
.strat-card-wide { grid-column: auto; }

/* v10 layout: Hero FULL WIDTH top → row dưới [Audit kênh 3 col] [Google Maps] 50:50 */
.strat-audit-vstack {
  display: flex; flex-direction: column; gap: 16px;
}
.strat-audit-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch;
}
@media (max-width: 1100px) { .strat-audit-row { grid-template-columns: 1fr; } }

.strat-hero-card { width: 100%; }

/* Audit kênh card: 3 platform columns equal width (override min-width của audit-ch-grid) */
.audit-ch-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.audit-ch-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.audit-ch-grid-cols-1 {
  grid-template-columns: minmax(0, 1fr) !important;
}
@media (max-width: 900px) {
  .audit-ch-grid-cols-3, .audit-ch-grid-cols-2 { grid-template-columns: 1fr !important; }
}

/* Google Maps card stats (lớn hơn vì có không gian riêng) */
.audit-gm-stat-big {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 16px; border-radius: 9px;
  background: rgba(124,92,255,0.06);
  border: 1px solid rgba(124,92,255,0.22);
  flex-wrap: wrap;
}
.audit-gm-rating {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-size: 28px; font-weight: 800; color: #fff;
}
.audit-gm-rating span { font-size: 18px; color: #fbbf24; }
.audit-gm-reviews { font-size: 13.5px; color: var(--text-secondary, #c7cad1); }
.audit-gm-samples {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(34,197,94,0.14); color: #4ade80;
  font-weight: 600; margin-left: auto;
}
.audit-ch { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.audit-ch-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.audit-ch-name { font-size: 13.5px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; margin-right: auto; }
.audit-ch-name > i { color: var(--secondary, #22d3ee); }
.audit-ch-offtag { font-size: 10.5px; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.35); border-radius: 999px; padding: 1px 8px; }
.audit-ch-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted, #94a3b8); cursor: pointer; user-select: none; }
.audit-ch-toggle input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary, #7c5cff); }
.audit-ch.audit-ch-off { opacity: 0.6; }
.audit-ch.audit-ch-off .audit-ch-toggle { color: #fbbf24; }
.audit-ch-url-row {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.22); border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 7px; padding: 5px 10px; margin-bottom: 8px;
}
.audit-ch-url-icon { color: var(--text-muted, #8b90a0); font-size: 11px; }
.audit-ch-url-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #fff; font-size: 12.5px; font-family: 'SF Mono', Monaco, monospace;
}
.audit-ch-url-input::placeholder { color: var(--text-muted, #6b7280); opacity: 0.7; }
.audit-ch-url-open {
  color: var(--primary, #7c5cff); padding: 2px 6px; border-radius: 4px;
  font-size: 11px; transition: background .12s;
}
.audit-ch-url-open:hover { background: rgba(124,92,255,0.18); color: #fff; }
.audit-ch-metrics { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-muted, #94a3b8); margin-bottom: 10px; }
.audit-ch-metrics b { color: #e2e8f0; }
.audit-ch-when { margin-left: auto; font-style: italic; }
.audit-ch-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .audit-ch-notes { grid-template-columns: 1fr; } }
.audit-ch-notes label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--text-muted, #94a3b8); }
.audit-ch-notes textarea { resize: vertical; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; color: #e2e8f0; padding: 7px 9px; font-size: 12.5px; line-height: 1.45; font-family: inherit; }
.audit-ch-notes textarea:focus { outline: none; border-color: var(--primary, #7c5cff); }
.audit-gm { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 11px 13px; margin-top: 4px; display: flex; flex-direction: column; gap: 9px; }
.audit-gm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.audit-gm-title { font-size: 13.5px; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.audit-gm-title > i { color: #fbbf24; }
.audit-gm-stat { font-size: 12.5px; color: #cbd5e1; }
.audit-gm-stat b { color: #fbbf24; }
.audit-gm-note { font-size: 11.5px; color: var(--text-muted, #94a3b8); margin: 0; }

/* Bước 2 — AI phân tích nội dung (D2) */
.audit-ch-ai { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.audit-posts-badge { font-size: 11.5px; color: #22d3ee; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.3); border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 6px; }
.audit-posts-badge.audit-posts-empty { color: var(--text-muted, #94a3b8); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
/* v10 — AI Audit Analysis: compact + collapsible (<details>) */
.audit-analysis {
  background: rgba(124,92,255,0.06);
  border: 1px solid rgba(124,92,255,0.22);
  border-radius: 9px;
  padding: 9px 12px;
  margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.aa-summary-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(124,92,255,0.2);
}
.aa-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(124,92,255,0.14);
  color: #c4b5fd;
}
.aa-chip .fas { font-size: 9px; }
.aa-chip-good { background: rgba(34,197,94,0.14); color: #4ade80; }
.aa-chip-weak { background: rgba(245,158,11,0.14); color: #fbbf24; }

.aa-details { background: rgba(0,0,0,0.18); border-radius: 7px; overflow: hidden; }
.aa-details > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; font-size: 12px;
  color: #e9d5ff; transition: background .12s;
}
.aa-details > summary::-webkit-details-marker { display: none; }
.aa-details > summary::before {
  content: "▸"; font-size: 9px; opacity: 0.6;
  transition: transform .15s; flex-shrink: 0;
}
.aa-details[open] > summary::before { transform: rotate(90deg); }
.aa-details > summary:hover { background: rgba(124,92,255,0.1); }
.aa-details > summary > .fas { color: #c4b5fd; font-size: 11px; }
.aa-details > summary > b { font-weight: 600; flex: 1; }
.aa-count {
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #cbd5e1;
}
.aa-list { margin: 0; padding: 0 12px 10px 32px; list-style: disc; }
.aa-list li {
  font-size: 11.5px; color: #cbd5e1; line-height: 1.5;
  margin-bottom: 4px;
}
.aa-ref {
  display: inline; font-weight: 600; color: #e2e8f0;
  margin-right: 5px;
}
.aa-why { color: #94a3b8; }
.aa-details.aa-good > summary { color: #4ade80; }
.aa-details.aa-good > summary > .fas { color: #4ade80; }
.aa-details.aa-good > summary:hover { background: rgba(34,197,94,0.08); }
.aa-details.aa-weak > summary { color: #fbbf24; }
.aa-details.aa-weak > summary > .fas { color: #fbbf24; }
.aa-details.aa-weak > summary:hover { background: rgba(245,158,11,0.08); }

/* ============================================================
   PHỤ LỤC (panel-appendix) — .apx-* classes
   ============================================================ */
.apx-body { padding: 0 24px 24px; }
.apx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; }
.apx-section { padding: 20px; border-radius: 12px; }
.apx-section-title { font-size: 16px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; color: var(--text-primary, #f0f0f5); }
.apx-section-title .fas { color: var(--primary, #7c5cff); font-size: 15px; }
.apx-row { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-glass, rgba(255,255,255,.06)); align-items: center; }
.apx-row:last-child { border-bottom: none; }
.apx-label { font-size: 12.5px; color: var(--text-muted, #888); min-width: 120px; flex-shrink: 0; }
.apx-value { font-size: 14px; color: var(--text-primary, #f0f0f5); font-weight: 500; }
.apx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.apx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 10px; font-size: 12px; background: rgba(255,255,255,.07); color: var(--text-secondary, #c7cad1); }
.apx-chip.apx-allow { background: rgba(34,197,94,.15); color: #4ade80; }
.apx-chip.apx-deny { background: rgba(239,68,68,.15); color: #f87171; }
.apx-subsection { margin-top: 12px; }
.apx-subsection h3 { font-size: 13px; font-weight: 600; color: var(--text-secondary, #c7cad1); margin: 0 0 6px; }
.apx-onlyness { font-size: 14px; line-height: 1.6; font-style: italic; color: var(--secondary, #22d3ee); }
.apx-msg-list { padding-left: 18px; font-size: 13px; line-height: 1.6; }
.apx-msg-list li { margin: 4px 0; }
.apx-pillars { display: flex; flex-wrap: wrap; gap: 8px; }
.apx-pillar-chip { padding: 6px 12px; border-radius: 10px; font-size: 13px; background: rgba(168,85,247,.12); color: var(--text-primary, #f0f0f5); }
.apx-weight { color: var(--primary, #7c5cff); font-weight: 600; }
.apx-tov-axes { display: flex; flex-direction: column; gap: 10px; }
.apx-tov-axis { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary, #c7cad1); }
.apx-tov-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); position: relative; }
.apx-tov-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary, #7c5cff), var(--secondary, #22d3ee)); }
.apx-checklist { list-style: none; padding: 0; margin: 0; }
.apx-checklist li { padding: 6px 0; font-size: 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-glass, rgba(255,255,255,.04)); }
.apx-qc-ok .fas { color: #22c55e; }
.apx-qc-miss .fas { color: #ef4444; }
.apx-skill-links { display: flex; flex-wrap: wrap; gap: 8px; }
.apx-skill-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 10px; font-size: 13px; cursor: pointer; background: rgba(124,92,255,.1); color: var(--primary, #7c5cff); transition: background .15s; }
.apx-skill-link:hover { background: rgba(124,92,255,.25); }

/* ============================================================
   KIẾN TRÚC HỆ THỐNG (panel-architecture) — .arch-* classes
   ============================================================ */
.arch-body { padding: 0 24px 24px; }
.arch-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.arch-table th { position: sticky; top: 0; z-index: 2; background: var(--bg-secondary, #1a1a2e); padding: 10px 12px; text-align: left; font-weight: 600; color: var(--text-secondary, #c7cad1); border-bottom: 2px solid var(--primary, #7c5cff); white-space: nowrap; }
.arch-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-glass, rgba(255,255,255,.06)); color: var(--text-primary, #f0f0f5); vertical-align: top; }
.arch-table tr:hover td { background: rgba(124,92,255,.06); }
.arch-table code { font-size: 11.5px; background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 4px; }
.arch-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.arch-status-done { background: rgba(34,197,94,.15); color: #22c55e; }
.arch-status-prog { background: rgba(251,191,36,.15); color: #fbbf24; }
.arch-status-plan { background: rgba(96,165,250,.15); color: #60a5fa; }
.arch-group-header td { background: rgba(124,92,255,.08) !important; font-weight: 700; color: var(--primary, #7c5cff); font-size: 13px; padding-top: 14px; }

/* Sơ đồ cây */
.arch-tree { padding: 8px 0; }
.arch-tree ul { list-style: none; padding-left: 0; margin: 0; }
.arch-tree ul ul { padding-left: 24px; border-left: 1px solid var(--border-glass, rgba(255,255,255,.1)); margin-left: 12px; }
.arch-tree li { margin: 2px 0; }
.arch-tree-label {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  font-size: 13px; color: var(--text-primary, #f0f0f5); cursor: default; transition: background .15s;
}
.arch-tree-label:hover { background: rgba(255,255,255,.05); }
.arch-tree-label .fas { font-size: 12px; width: 16px; text-align: center; }
.arch-tree-toggle { cursor: pointer; user-select: none; }
.arch-tree-toggle .fa-caret-right { transition: transform .2s; }
.arch-tree-toggle.open .fa-caret-right { transform: rotate(90deg); }
.arch-tree-file { font-size: 11px; color: var(--text-muted, #888); margin-left: 4px; }
.arch-tree li.collapsed > ul { display: none; }

/* ============================================================
   ROADMAP v6.0 — sub-tab 3 trong Kiến trúc (.arch-rm-*)
   ============================================================ */
.arch-rm { padding: 4px 0 40px; color: var(--text-primary, #f0f0f5); }
.arch-rm-header {
  display: flex; gap: 24px; justify-content: space-between; align-items: flex-start;
  padding: 18px 20px; background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(124,92,255,.02));
  border: 1px solid rgba(124,92,255,.2); border-radius: 14px; margin-bottom: 16px;
  flex-wrap: wrap;
}
.arch-rm-header-main { flex: 1; min-width: 280px; }
.arch-rm-header-main h2 { margin: 0 0 10px; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.arch-rm-header-main h2 .fa-rocket { color: var(--primary, #7c5cff); }
.arch-rm-overall-bar { background: rgba(255,255,255,.06); border-radius: 8px; height: 12px; overflow: hidden; margin-bottom: 8px; }
.arch-rm-overall-bar-fill {
  height: 100%; background: linear-gradient(90deg, #22c55e, #60a5fa, #7c5cff);
  transition: width .3s; border-radius: 8px;
}
.arch-rm-overall-meta { font-size: 13px; color: var(--text-secondary, #c7cad1); }
.arch-rm-overall-meta strong { color: var(--text-primary, #f0f0f5); }
.arch-rm-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.arch-rm-header-actions .btn { font-size: 12px; padding: 6px 12px; }

.arch-rm-decisions {
  background: rgba(34,197,94,.04); border: 1px solid rgba(34,197,94,.2); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 18px;
}
.arch-rm-decisions-title { font-weight: 600; color: #22c55e; margin-bottom: 8px; font-size: 13px; }
.arch-rm-decision { font-size: 13px; color: var(--text-secondary, #c7cad1); margin: 4px 0; }
.arch-rm-decision strong { color: var(--text-primary, #f0f0f5); margin-right: 6px; }

.arch-rm-phases { display: flex; flex-direction: column; gap: 14px; }
.arch-rm-phase {
  background: var(--bg-secondary, rgba(26,26,46,.6)); border: 1px solid var(--border-glass, rgba(255,255,255,.08));
  border-radius: 12px; overflow: hidden;
}
.arch-rm-phase-done { border-color: rgba(34,197,94,.4); }
.arch-rm-phase-in_progress { border-color: rgba(251,191,36,.4); }
.arch-rm-phase-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 18px; cursor: pointer; transition: background .15s;
}
.arch-rm-phase-head:hover { background: rgba(255,255,255,.03); }
.arch-rm-phase-titleblock { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.arch-rm-phase-id {
  font-weight: 700; font-size: 14px; background: rgba(124,92,255,.18); color: var(--primary, #7c5cff);
  padding: 3px 10px; border-radius: 6px; letter-spacing: .5px;
}
.arch-rm-phase-name { font-size: 15px; font-weight: 600; }
.arch-rm-phase-version {
  font-size: 11px; background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 4px;
  font-family: monospace; color: var(--text-secondary, #c7cad1);
}
.arch-rm-phase-status { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.arch-rm-status-done { background: rgba(34,197,94,.15); color: #22c55e; }
.arch-rm-status-in_progress { background: rgba(251,191,36,.15); color: #fbbf24; }
.arch-rm-status-pending { background: rgba(96,165,250,.15); color: #60a5fa; }
.arch-rm-phase-meta {
  font-size: 12px; color: var(--text-secondary, #c7cad1); display: flex; align-items: center; gap: 8px;
}
.arch-rm-phase-meta strong { color: var(--text-primary, #f0f0f5); font-size: 13px; }
.arch-rm-phase-meta .fa-chevron-up, .arch-rm-phase-meta .fa-chevron-down { font-size: 11px; opacity: .6; }
.arch-rm-phase-bar { height: 4px; background: rgba(255,255,255,.04); }
.arch-rm-phase-bar-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #7c5cff); transition: width .3s; }
.arch-rm-phase-goal {
  padding: 10px 18px; font-size: 12.5px; color: var(--text-secondary, #c7cad1);
  background: rgba(255,255,255,.02); border-top: 1px solid var(--border-glass, rgba(255,255,255,.05));
  font-style: italic;
}

.arch-rm-sprints { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.arch-rm-sprint {
  background: rgba(0,0,0,.15); border: 1px solid var(--border-glass, rgba(255,255,255,.06));
  border-radius: 10px; padding: 12px 14px;
}
.arch-rm-sprint-done { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.04); }
.arch-rm-sprint-in_progress { border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.03); }
.arch-rm-sprint-optional { border-style: dashed; opacity: .85; }
.arch-rm-sprint-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.arch-rm-sprint-title { font-size: 13.5px; font-weight: 600; }
.arch-rm-sprint-meta { font-size: 11.5px; color: var(--text-secondary, #c7cad1); font-family: monospace; }
.arch-rm-sprint-bar { height: 3px; background: rgba(255,255,255,.05); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.arch-rm-sprint-bar-fill { height: 100%; background: linear-gradient(90deg, #fbbf24, #22c55e); transition: width .3s; }
.arch-rm-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600; margin-left: 4px; }
.arch-rm-badge-optional { background: rgba(96,165,250,.18); color: #60a5fa; }

.arch-rm-tasks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.arch-rm-task {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px;
  transition: background .15s; border: 1px solid transparent;
}
.arch-rm-task:hover { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
.arch-rm-task-toggle {
  background: transparent; border: none; cursor: pointer; padding: 0; color: var(--text-secondary, #c7cad1);
  font-size: 18px; flex-shrink: 0; line-height: 1; margin-top: 1px; transition: color .15s, transform .15s;
}
.arch-rm-task-toggle:hover { transform: scale(1.15); }
.arch-rm-task-main { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.arch-rm-task-line { display: flex; align-items: flex-start; gap: 6px; }
.arch-rm-task-text { flex: 1; font-size: 12.5px; line-height: 1.5; }
.arch-rm-task-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.arch-rm-task-hours {
  font-size: 11px; font-family: monospace; color: var(--text-muted, #888);
  background: rgba(255,255,255,.04); padding: 1px 6px; border-radius: 4px; flex-shrink: 0;
  margin-left: auto;
}
.arch-rm-task-note {
  font-size: 11.5px; color: var(--text-secondary, #c7cad1); padding: 4px 8px;
  background: rgba(96,165,250,.05); border-left: 2px solid #60a5fa; border-radius: 0 4px 4px 0;
  margin-top: 2px;
}
.arch-rm-task-note .fa-info-circle { color: #60a5fa; margin-right: 4px; }

/* Owner badge + meta chips */
.arch-rm-owner {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 10px;
  background: color-mix(in srgb, var(--owner-color, #94a3b8) 18%, transparent);
  color: var(--owner-color, #94a3b8);
  border: 1px solid color-mix(in srgb, var(--owner-color, #94a3b8) 35%, transparent);
}
.arch-rm-owner i { font-size: 9px; }
.arch-rm-deps, .arch-rm-parallel, .arch-rm-files {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px;
  padding: 2px 6px; border-radius: 4px; cursor: help;
}
.arch-rm-deps { background: rgba(251,191,36,.12); color: #fbbf24; }
.arch-rm-parallel {
  background: rgba(167,139,250,.12); color: #a78bfa; font-weight: 600; font-family: monospace;
}
.arch-rm-files { background: rgba(255,255,255,.05); color: var(--text-secondary, #c7cad1); }

.arch-rm-task-done .arch-rm-task-toggle { color: #22c55e; }
.arch-rm-task-done .arch-rm-task-text { text-decoration: line-through; color: var(--text-muted, #888); }
.arch-rm-task-in_progress .arch-rm-task-toggle { color: #fbbf24; }
.arch-rm-task-in_progress { background: rgba(251,191,36,.04); border-color: rgba(251,191,36,.2) !important; }
.arch-rm-task-in_progress .arch-rm-task-text { color: var(--text-primary, #f0f0f5); font-weight: 500; }
.arch-rm-task-pending .arch-rm-task-toggle { color: rgba(255,255,255,.3); }

/* Coordination panel */
.arch-rm-coord {
  margin-top: 24px; padding: 18px 20px;
  background: linear-gradient(135deg, rgba(6,182,212,.05), rgba(124,92,255,.03));
  border: 1px solid rgba(6,182,212,.25); border-radius: 14px;
}
.arch-rm-coord-title {
  font-size: 15px; font-weight: 600; margin-bottom: 16px; color: #06b6d4;
  display: flex; align-items: center; gap: 8px;
}
.arch-rm-coord-section { margin-bottom: 18px; }
.arch-rm-coord-section:last-child { margin-bottom: 0; }
.arch-rm-coord-section h4 {
  font-size: 13.5px; margin: 0 0 10px; color: var(--text-primary, #f0f0f5); font-weight: 600;
}
.arch-rm-coord-section ul {
  margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--text-secondary, #c7cad1); line-height: 1.7;
}
.arch-rm-coord-section li { margin: 4px 0; }
.arch-rm-coord-section code {
  font-size: 11.5px; background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 4px;
}
.arch-rm-coord-note {
  font-size: 12px; color: var(--text-muted, #888); margin: 6px 0 0; font-style: italic;
}
.arch-rm-coord-owners {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.arch-rm-coord-files {
  display: flex; flex-direction: column; gap: 6px;
}
.arch-rm-coord-file {
  background: rgba(0,0,0,.2); padding: 8px 12px; border-radius: 6px; font-size: 11.5px;
  border-left: 3px solid #06b6d4;
}
.arch-rm-coord-file code {
  font-size: 11.5px; margin-right: 8px; color: #f0f0f5;
}
.arch-rm-coord-prompt {
  background: rgba(0,0,0,.35); border: 1px solid var(--border-glass, rgba(255,255,255,.08));
  border-radius: 6px; padding: 12px 14px; font-size: 11.5px; line-height: 1.6;
  color: var(--text-primary, #f0f0f5); overflow-x: auto; margin: 8px 0 0;
  font-family: monospace; white-space: pre;
}
.arch-rm-task-done .arch-rm-task-toggle { color: #22c55e; }
.arch-rm-task-done .arch-rm-task-text { text-decoration: line-through; color: var(--text-muted, #888); }
.arch-rm-task-in_progress .arch-rm-task-toggle { color: #fbbf24; }
.arch-rm-task-in_progress .arch-rm-task-text { color: var(--text-primary, #f0f0f5); font-weight: 500; }
.arch-rm-task-pending .arch-rm-task-toggle { color: rgba(255,255,255,.3); }

.arch-rm-footer { padding: 12px 0 0; text-align: center; color: var(--text-muted, #888); font-size: 11px; }
.arch-rm-footer i { margin: 0 3px; }

@media (max-width: 720px) {
  .arch-rm-header { flex-direction: column; }
  .arch-rm-phase-head { flex-direction: column; align-items: flex-start; }
  .arch-rm-phase-meta { width: 100%; justify-content: space-between; }
  .arch-rm-sprint-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   ASSET LIBRARY — v4.8.6 Sprint 1.5 (.ast-*)
   ============================================================ */
.intake-card-wide { grid-column: 1 / -1; }
.ast-wrap { display: flex; flex-direction: column; gap: 12px; }
.ast-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border-glass, rgba(255,255,255,.06)); border-radius: 10px;
}
.ast-filter, .ast-search {
  background: rgba(0,0,0,.2); border: 1px solid var(--border-glass, rgba(255,255,255,.08));
  color: var(--text-primary, #f0f0f5); padding: 6px 10px; border-radius: 6px; font-size: 12.5px;
}
.ast-search { flex: 1; min-width: 140px; }
.ast-count {
  margin-left: auto; font-size: 11.5px; color: var(--text-muted, #888);
  font-family: monospace; background: rgba(255,255,255,.04); padding: 3px 8px; border-radius: 4px;
}
.ast-drop-zone {
  border: 2px dashed var(--border-glass, rgba(255,255,255,.12)); border-radius: 10px;
  padding: 20px; text-align: center; color: var(--text-muted, #888); font-size: 13px;
  transition: all .15s; cursor: pointer;
}
.ast-drop-zone:hover, .ast-drop-active {
  border-color: var(--primary, #7c5cff); background: rgba(124,92,255,.05); color: var(--text-primary, #f0f0f5);
}
.ast-empty {
  padding: 40px 20px; text-align: center; color: var(--text-muted, #888); font-size: 13px;
  background: rgba(255,255,255,.02); border-radius: 10px;
}
.ast-empty i { margin-right: 6px; }
.ast-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.ast-card {
  background: var(--bg-secondary, rgba(26,26,46,.6)); border: 1px solid var(--border-glass, rgba(255,255,255,.08));
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.ast-card:hover { border-color: var(--primary, #7c5cff); transform: translateY(-1px); }
.ast-thumb {
  aspect-ratio: 4/3; background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--text-muted, #666); overflow: hidden;
}
.ast-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ast-thumb-video { color: #ec4899; }
.ast-thumb-document { color: #fbbf24; }
.ast-meta { padding: 8px 10px; flex: 1; }
.ast-filename {
  font-size: 12px; font-weight: 500; color: var(--text-primary, #f0f0f5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ast-info { font-size: 11px; color: var(--text-muted, #888); margin-top: 2px; }
.ast-actions {
  display: flex; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--border-glass, rgba(255,255,255,.05));
}
.ast-btn {
  flex: 1; background: rgba(255,255,255,.04); border: 1px solid transparent;
  color: var(--text-secondary, #c7cad1); padding: 4px 0; border-radius: 4px;
  font-size: 11px; cursor: pointer; text-align: center; text-decoration: none;
  transition: all .15s;
}
.ast-btn:hover { background: rgba(124,92,255,.15); color: var(--primary, #7c5cff); }
.ast-btn-danger:hover { background: rgba(239,68,68,.15); color: #ef4444; }

/* ============================================================
   KOL CRM — v4.8.7 Sprint 1.6 (.kol-*)
   ============================================================ */
.kol-wrap { display: flex; flex-direction: column; gap: 12px; }
.kol-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.kol-stat {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 4px 10px;
  background: color-mix(in srgb, var(--kol-c, #94a3b8) 12%, transparent);
  color: var(--kol-c, #94a3b8); border: 1px solid color-mix(in srgb, var(--kol-c, #94a3b8) 30%, transparent);
  border-radius: 10px; font-weight: 500;
}
.kol-stat b { font-weight: 700; margin-left: 4px; }
.kol-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: rgba(255,255,255,.03);
  border: 1px solid var(--border-glass, rgba(255,255,255,.06)); border-radius: 8px;
}
.kol-hint { font-size: 11.5px; color: var(--text-muted, #888); }
.kol-hint i { margin: 0 2px; }
.kol-table-wrap { overflow-x: auto; }
.kol-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kol-table th {
  background: rgba(124,92,255,.08); color: var(--primary, #7c5cff);
  padding: 8px 10px; text-align: left; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--border-glass, rgba(255,255,255,.08));
}
.kol-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border-glass, rgba(255,255,255,.04));
  vertical-align: middle;
}
.kol-table tr:hover td { background: rgba(255,255,255,.02); }
.kol-input {
  width: 100%; background: rgba(0,0,0,.2); border: 1px solid transparent;
  color: var(--text-primary, #f0f0f5); padding: 5px 8px; border-radius: 4px; font-size: 12px;
  transition: border-color .15s;
}
.kol-input:hover { border-color: var(--border-glass, rgba(255,255,255,.1)); }
.kol-input:focus { border-color: var(--primary, #7c5cff); outline: none; }
.kol-input[data-kf="tier"], .kol-input[data-kf="status"], .kol-input[data-kf="language"] { min-width: 80px; }
.kol-actions { white-space: nowrap; }
.kol-btn {
  background: rgba(124,92,255,.1); border: none; color: var(--primary, #7c5cff);
  width: 26px; height: 26px; border-radius: 4px; cursor: pointer; font-size: 11px;
  margin-right: 2px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all .15s;
}
.kol-btn:hover { background: rgba(124,92,255,.25); transform: scale(1.1); }
.kol-btn-danger { background: rgba(239,68,68,.1); color: #ef4444; }
.kol-btn-danger:hover { background: rgba(239,68,68,.25); }
.kol-empty {
  text-align: center; padding: 30px 20px; color: var(--text-muted, #888); font-size: 13px;
}
.kol-empty i { margin-right: 6px; }

/* ============================================================
   WORKSHOP MODAL EXTRAS — v4.8.8 Mini-sprint 1.7
   ============================================================ */
/* Linked assets (.psm-asset-*) */
.psm-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.psm-asset-card {
  background: rgba(0,0,0,.2); border: 1px solid var(--border-glass, rgba(255,255,255,.08));
  border-radius: 8px; padding: 6px; position: relative; transition: border-color .15s;
}
.psm-asset-card:hover { border-color: var(--primary, #7c5cff); }
.psm-asset-thumb {
  aspect-ratio: 1/1; background: rgba(0,0,0,.3); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 28px; color: var(--text-muted, #666); margin-bottom: 4px;
}
.psm-asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.psm-asset-name { font-size: 10.5px; color: var(--text-secondary, #c7cad1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psm-asset-card .btn-link {
  position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.5);
  width: 18px; height: 18px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.psm-asset-stub { padding: 8px; font-size: 11px; color: var(--text-muted, #888); background: rgba(239,68,68,.05); border-radius: 4px; }
.psm-asset-link-bar { display: flex; gap: 6px; margin-top: 6px; }
.psm-asset-link-bar .psm-input { flex: 1; }

/* Comment thread (.psm-comment-*) */
.psm-comment-thread { display: flex; flex-direction: column; gap: 8px; }
.psm-comment-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.psm-comment {
  background: rgba(255,255,255,.03); border-left: 2px solid var(--primary, #7c5cff);
  border-radius: 4px; padding: 8px 12px;
}
.psm-comment-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-bottom: 4px; }
.psm-comment-author { color: var(--text-primary, #f0f0f5); font-weight: 600; }
.psm-comment-role { color: var(--text-muted, #888); font-size: 10.5px; }
.psm-comment-date { color: var(--text-muted, #888); font-size: 10.5px; margin-left: auto; }
.psm-comment-del {
  background: transparent; border: none; color: var(--text-muted, #888);
  cursor: pointer; padding: 0; font-size: 11px;
}
.psm-comment-del:hover { color: #ef4444; }
.psm-comment-body { font-size: 12.5px; color: var(--text-primary, #f0f0f5); line-height: 1.5; }
.psm-comment-mentions { font-size: 10.5px; color: var(--text-muted, #888); margin-top: 4px; }
.psm-mention {
  display: inline-block; background: rgba(124,92,255,.15); color: var(--primary, #7c5cff);
  padding: 1px 6px; border-radius: 3px; font-weight: 500;
}
.psm-comment-form { display: flex; flex-direction: column; gap: 6px; }
.psm-comment-form .psm-input { width: 100%; }
.psm-comment-form button { align-self: flex-end; }

/* Pre-flight modal (.pf-*) */
.pf-modal { max-width: 640px; width: 92vw; }
.pf-body { padding: 20px 24px; }
.pf-summary {
  padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px;
}
.pf-pass { color: #22c55e; }
.pf-fail { color: #ef4444; }
.pf-summary:has(.pf-pass) { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3); }
.pf-summary:has(.pf-fail) { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); }
.pf-group { margin-bottom: 14px; }
.pf-group h4 {
  font-size: 12.5px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px;
}
.pf-group-critical h4 { color: #ef4444; }
.pf-group-warn h4 { color: #fbbf24; }
.pf-group-info h4 { color: #60a5fa; }
.pf-group ul { padding-left: 24px; font-size: 12.5px; color: var(--text-secondary, #c7cad1); line-height: 1.7; }
.pf-group li { margin-bottom: 4px; }
.pf-group li b { color: var(--text-primary, #f0f0f5); }
.pf-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ============================================================
   Customer Strategic Report Modal & Printing
   ============================================================ */
.strategic-report-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 24px; backdrop-filter: blur(4px); }
.strategic-report-box { background: #11131c; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; width: min(1000px, 95vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.strategic-report-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); color: #fff; background: rgba(124,92,255,0.05); }
.strategic-report-head h2 { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.strategic-report-head h2 i { color: var(--primary, #7c5cff); }
.sr-tabs { display: flex; gap: 8px; margin-left: 20px; }
.sr-tab-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary, #c7cad1); padding: 4px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; transition: all 0.15s; }
.sr-tab-btn.active { background: var(--primary, #7c5cff); border-color: var(--primary, #7c5cff); color: #fff; }
.sr-tab-btn:hover:not(.active) { background: rgba(255,255,255,0.1); color: #fff; }
.strategic-report-body { flex: 1; overflow-y: auto; padding: 24px; background: #0f1016; }
.sr-markdown-view { display: none; }
.sr-markdown-view.active { display: block; }
.sr-markdown-pre { margin: 0; padding: 16px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.6; color: #d7dde6; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.sr-html-view { display: none; }
.sr-html-view.active { display: block; }

/* Premium HTML Report styling */
.sr-preview { color: #cbd5e1; font-family: 'Inter', system-ui, sans-serif; line-height: 1.6; font-size: 14px; }
.sr-preview h1 { color: #fff; font-size: 24px; font-weight: 800; text-align: center; margin: 0 0 10px; border-bottom: 2px solid rgba(124,92,255,0.2); padding-bottom: 12px; }
.sr-preview-meta { text-align: center; font-size: 12px; color: var(--text-muted, #94a3b8); margin-bottom: 24px; font-style: italic; }
.sr-preview h2 { color: #fff; font-size: 16px; font-weight: 700; margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 8px; }
.sr-preview h2 i { color: var(--secondary, #22d3ee); }
.sr-preview h3 { color: #fff; font-size: 13.5px; font-weight: 600; margin: 16px 0 8px; }
.sr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .sr-grid-2 { grid-template-columns: 1fr; } }
.sr-info-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 13px; }
.sr-info-table td { padding: 8px 12px; border: 1px solid rgba(255,255,255,0.06); }
.sr-info-table td:first-child { width: 140px; font-weight: 600; color: var(--text-muted, #94a3b8); background: rgba(255,255,255,0.02); }
.sr-info-table td:last-child { color: #fff; }
.sr-badge-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sr-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.sr-badge-active { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.sr-badge-inactive { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.25); text-decoration: line-through; opacity: 0.7; }
.sr-persona-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; border-left: 3px solid var(--primary, #7c5cff); }
.sr-persona-name { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; }
.sr-persona-prio { font-size: 10.5px; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); padding: 1px 6px; border-radius: 999px; }
.sr-text-list { margin: 0; padding-left: 20px; font-size: 13px; }
.sr-text-list li { margin: 4px 0; }
.sr-quote-box { background: rgba(124,92,255,0.04); border-left: 3px solid var(--primary, #7c5cff); border-radius: 6px; padding: 12px 16px; margin: 12px 0; font-style: italic; font-size: 13.5px; color: #e2e8f0; }
.sr-tov-axes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 600px) { .sr-tov-axes { grid-template-columns: 1fr; } }
.sr-tov-axis { font-size: 12px; }
.sr-tov-bar-wrap { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sr-tov-bar { height: 6px; background: rgba(255,255,255,0.1); flex: 1; border-radius: 3px; position: relative; }
.sr-tov-fill { height: 100%; background: var(--primary, #7c5cff); border-radius: 3px; }
.sr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; color: #cbd5e1; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; margin-top: 10px; }
.sr-table th { background: rgba(255,255,255,0.03); color: #fff; font-weight: 700; padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sr-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.sr-table tr:last-child td { border-bottom: none; }
.sr-table-ch { font-weight: 600; color: #fff; white-space: nowrap; }
.sr-table-pil { font-size: 11.5px; padding: 2px 7px; border-radius: 999px; font-weight: 600; display: inline-block; }
.sr-table-date { white-space: nowrap; font-weight: 600; color: var(--secondary, #22d3ee); }

.strategic-report-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.15); }

/* In báo cáo styling */
@media print {
  body > * { display: none !important; }
  .strategic-report-overlay { display: block !important; position: absolute !important; inset: 0 !important; background: #fff !important; padding: 0 !important; overflow: visible !important; backdrop-filter: none !important; }
  .strategic-report-box { display: block !important; border: none !important; background: #fff !important; width: 100% !important; max-height: none !important; box-shadow: none !important; }
  .strategic-report-head { display: block !important; border-bottom: 2px solid #333 !important; background: none !important; padding: 0 0 10px !important; }
  .strategic-report-head h2 { color: #000 !important; font-size: 20px !important; }
  .strategic-report-head h2 i, .sr-tabs { display: none !important; }
  .strategic-report-body { display: block !important; padding: 20px 0 !important; background: #fff !important; overflow: visible !important; }
  .sr-html-view { display: block !important; }
  .sr-markdown-view { display: none !important; }
  .sr-preview { color: #000 !important; font-size: 12pt !important; line-height: 1.5 !important; }
  .sr-preview h1 { color: #000 !important; border-bottom: 2px solid #000 !important; font-size: 22pt !important; }
  .sr-preview-meta { color: #555 !important; font-size: 9pt !important; }
  .sr-preview h2 { color: #000 !important; border-bottom: 1px solid #000 !important; font-size: 14pt !important; page-break-after: avoid; }
  .sr-preview h2 i { display: none !important; }
  .sr-preview h3 { color: #000 !important; font-size: 11pt !important; page-break-after: avoid; }
  .sr-info-table { border: 1px solid #333 !important; }
  .sr-info-table td { border: 1px solid #333 !important; color: #000 !important; }
  .sr-info-table td:first-child { background: #f0f0f0 !important; color: #000 !important; }
  .sr-badge { border: 1px solid #000 !important; padding: 1px 6px !important; font-size: 10pt !important; }
  .sr-badge-active { color: #000 !important; background: #e0f2f1 !important; }
  .sr-badge-inactive { display: none !important; } /* Hide out-of-scope platforms in print report! */
  .sr-persona-card { border: 1px solid #333 !important; border-left: 4px solid #000 !important; background: #fff !important; page-break-inside: avoid; }
  .sr-persona-name { color: #000 !important; font-size: 12pt !important; }
  .sr-persona-prio { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; }
  .sr-quote-box { border-left: 4px solid #000 !important; background: #f9f9f9 !important; color: #000 !important; page-break-inside: avoid; }
  .sr-tov-bar { border: 1px solid #000 !important; background: #f0f0f0 !important; }
  .sr-tov-fill { background: #333 !important; }
  .sr-table { border: 1px solid #333 !important; width: 100% !important; page-break-inside: auto; }
  .sr-table tr { page-break-inside: avoid; page-break-after: auto; }
  .sr-table th { background: #f0f0f0 !important; color: #000 !important; border-bottom: 2px solid #333 !important; }
  .sr-table td { border-bottom: 1px solid #555 !important; color: #000 !important; }
  .sr-table-ch { color: #000 !important; }
  .sr-table-pil { border: 1px solid #555 !important; background: #f4f4f4 !important; color: #000 !important; }
  .sr-table-date { color: #000 !important; }
  .strategic-report-actions { display: none !important; }
}