/* css/workshop.css — Xưởng Nội Dung (v1.8)
   Quy trình sản xuất bài theo tầng (topic→format→detail→done) + lịch tháng.
   Dùng biến token từ tokens.css. Grid/chip/modal bổ sung ở Phase 3. */

/* ---- Tổng quan panel ---- */
#panel-content-workshop { padding-bottom: 40px; }

/* ---- Thống kê tầng (toolbar Phase 1) ---- */
.workshop-stage-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.workshop-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  color: var(--text-secondary, #c7cad1);
}
.workshop-stage-pill b { color: var(--text-primary, #fff); }

/* Màu theo tầng — dùng chung cho pill + badge */
.stage-topic  { --stage-color: var(--text-muted, #8b90a0); }
.stage-format { --stage-color: var(--warning, #f4a623); }
.stage-detail { --stage-color: var(--secondary, #4f8cff); }
.stage-done   { --stage-color: var(--success, #2ecc71); }

.workshop-stage-pill.stage-topic i  { color: var(--text-muted, #8b90a0); }
.workshop-stage-pill.stage-format i { color: var(--warning, #f4a623); }
.workshop-stage-pill.stage-detail i { color: var(--secondary, #4f8cff); }
.workshop-stage-pill.stage-done i   { color: var(--success, #2ecc71); }

/* ---- Badge tầng (gắn trên từng bài) ---- */
.workshop-stage-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: var(--stage-color, var(--text-muted, #8b90a0));
}

/* ---- Toolbar: bộ lọc tầng + actions (Phase 2) ---- */
.workshop-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ws-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary, #c7cad1);
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  transition: all .15s ease;
}
.ws-filter-btn:hover { border-color: var(--primary, #7c5cff); }
.ws-filter-btn.active {
  color: #fff;
  background: var(--primary, #7c5cff);
  border-color: var(--primary, #7c5cff);
}
.ws-filter-count {
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
}
.ws-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Cards pipeline (Phase 2) ---- */
.ws-cards { display: flex; flex-direction: column; gap: 14px; }
.ws-card {
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  border-left: 4px solid var(--stage-color, var(--text-muted, #8b90a0));
  border-radius: 12px;
  padding: 14px 16px;
}
.ws-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ws-card-head .ws-date { width: 78px; text-align: center; font-weight: 700; }
.ws-card-head .ws-channel { width: 150px; }
.ws-card-head .ws-del { margin-left: auto; }
.ws-card-body { display: flex; flex-direction: column; gap: 10px; }
.ws-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.ws-field-grow { width: 100%; }
.ws-field-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #8b90a0);
}
.ws-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary, #fff);
  background: var(--bg-input, rgba(0,0,0,0.25));
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  font-family: inherit;
  resize: vertical;
}
.ws-input:focus { outline: none; border-color: var(--primary, #7c5cff); }
.ws-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.ws-done-tag { color: var(--success, #2ecc71); font-weight: 600; font-size: 14px; }
.btn-link {
  background: none;
  border: none;
  color: var(--text-muted, #8b90a0);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
}
.btn-link:hover { color: var(--text-primary, #fff); }

/* ---- View toggle (Danh sách / Lưới tháng) — Phase 3 ---- */
.ws-view-toggle {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
}
.ws-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  color: var(--text-secondary, #c7cad1);
  background: var(--bg-elevated, rgba(255,255,255,0.04));
}
.ws-view-btn.active { color: #fff; background: var(--primary, #7c5cff); }

/* ---- Lưới tháng "thật" (Phase 3, polish v1.8.6) ---- */
.mg-topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.mg-month-label { font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.mg-month-label i { color: var(--primary, #7c5cff); }
.mg-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.mg-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary, #c7cad1); }
.mg-legend-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--chip-color, #4f8cff); }
.mg-legend-dot.funnel-awareness { --chip-color: #4f8cff; }
.mg-legend-dot.funnel-consideration { --chip-color: #f4a623; }
.mg-legend-dot.funnel-conversion { --chip-color: #2ecc71; }
.mg-legend-dot.funnel-retention { --chip-color: #b06cff; }

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* minmax(0,...) → 7 cột đều, không tràn vì chip dài */
  gap: 6px;
}
.mg-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted, #8b90a0);
  padding: 2px 0 6px;
}
.mg-weekday.mg-weekend { color: var(--secondary, #4f8cff); }
.mg-cell {
  min-width: 0;              /* cho phép cột co về 1fr (CSS grid min-width:auto gotcha) */
  min-height: 80px;
  border-radius: 10px;
  padding: 6px;
  background: var(--bg-elevated, rgba(255,255,255,0.03));
  border: 1px solid var(--border-light, rgba(255,255,255,0.07));
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color .15s ease, background .15s ease;
}
.mg-cell:hover { border-color: var(--primary, #7c5cff); }
.mg-cell.mg-weekend { background: rgba(124,92,255,0.045); }
.mg-cell.has-posts { background: var(--bg-card, rgba(255,255,255,0.05)); border-color: var(--border-light, rgba(255,255,255,0.13)); }
.mg-cell.mg-empty { background: transparent; border: none; min-height: 0; pointer-events: none; }
.mg-cell.mg-today { border-color: var(--primary, #7c5cff); box-shadow: inset 0 0 0 1px var(--primary, #7c5cff); }
.mg-daynum { font-size: 12px; font-weight: 700; color: var(--text-muted, #8b90a0); padding: 0 2px; }
.mg-cell.has-posts .mg-daynum { color: var(--text-secondary, #c7cad1); }
.mg-cell.mg-today .mg-daynum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary, #7c5cff); color: #fff;
}

/* P5.B — unscheduled section: AI auto schedule button */
.mg-unsched-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.mg-unsched-head .mg-unsched-title { margin: 0; flex: 1; }
.mg-auto-schedule-btn { flex: none; }

/* P6 — Tháo lịch button + drop zone trên unscheduled */
.mg-detach-all-btn { margin-left: auto; flex: none; }
.mg-detach-all-btn:not(:disabled) { background: rgba(244,166,35,0.12); border-color: rgba(244,166,35,0.32); color: #f4a623; }
.mg-detach-all-btn:not(:disabled):hover { background: rgba(244,166,35,0.22); color: #fff; }
.mg-unscheduled { transition: all .14s ease; border: 2px dashed transparent; padding: 12px; border-radius: 8px; }
.mg-unscheduled.mg-unsched-drop-hover { border-color: #f4a623; background: rgba(244,166,35,0.08); transform: scale(1.005); }

/* P7.C — Navigation tháng */
.mg-month-nav { display: inline-flex; align-items: center; gap: 6px; }
.mg-nav-btn { background: rgba(124,92,255,0.12); border: 1px solid rgba(124,92,255,0.3); color: rgba(255,255,255,0.85); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s ease; }
.mg-nav-btn:hover:not(:disabled) { background: rgba(124,92,255,0.24); color: #fff; }
.mg-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.mg-month-select { background: rgba(0,0,0,0.32); color: #fff; border: 1px solid rgba(255,255,255,0.12); padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mg-month-select:focus { outline: 1px solid var(--primary, #7c5cff); }

/* P7.A — Unscheduled chia cột pillar */
.mg-pillar-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mg-pillar-col { background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 8px; min-height: 80px; }
.mg-pillar-col-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mg-pillar-col-name { flex: 1; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-pillar-col-count { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600; }
.mg-pillar-col-match { display: inline-block; padding: 1px 5px; margin-left: 4px; border-radius: 8px; background: rgba(46,204,113,0.18); color: #2ecc71; font-weight: 700; font-size: 10.5px; }
.mg-pillar-col-chips { display: flex; flex-direction: column; gap: 4px; }
.mg-pillar-col-chips .mg-chip { width: 100%; justify-content: flex-start; }

/* P5.A — Workshop toolbar window selector */
.ws-bulk-group { display: inline-flex; gap: 4px; align-items: center; background: rgba(124,92,255,0.08); border: 1px solid rgba(124,92,255,0.2); border-radius: 8px; padding: 2px 2px 2px 6px; }
.ws-window-select { background: transparent; border: none; color: rgba(255,255,255,0.85); font-size: 12px; padding: 4px 6px; cursor: pointer; }
.ws-window-select:focus { outline: 1px solid var(--primary, #7c5cff); border-radius: 4px; }
.ws-bulk-group .btn { margin: 0; }

/* ============================================================
   B/S4 — Workshop audit sidebar
   ============================================================ */
.workshop-layout { display: grid; grid-template-columns: 1fr 280px; gap: 16px; }
#workshop-audit-sidebar { background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 14px; max-height: 80vh; overflow-y: auto; position: sticky; top: 16px; align-self: start; }
.ws-audit-head { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.86); display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ws-audit-head i { color: var(--primary, #7c5cff); }
.ws-audit-empty { font-size: 12px; color: rgba(255,255,255,0.4); font-style: italic; padding: 10px; }
.ws-audit-phase { font-size: 11.5px; color: rgba(255,255,255,0.6); padding: 6px 8px; background: rgba(124,92,255,0.06); border-radius: 6px; margin-bottom: 12px; }
.ws-audit-phase i { color: var(--primary, #7c5cff); margin-right: 4px; }
.ws-audit-phase.ws-audit-warn { background: rgba(244,166,35,0.08); color: #f4a623; }
.ws-audit-phase.ws-audit-warn i { color: #f4a623; }

.ws-audit-section { margin-bottom: 14px; }
.ws-audit-section-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(255,255,255,0.5); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ws-audit-section-head i { color: var(--primary, #7c5cff); }
.ws-audit-meta { margin-left: auto; font-size: 10px; color: rgba(255,255,255,0.4); font-weight: 400; text-transform: none; letter-spacing: 0; }

.ws-audit-row { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; cursor: pointer; transition: all .12s ease; margin-bottom: 3px; font-size: 11.5px; color: rgba(255,255,255,0.86); }
.ws-audit-row:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.ws-audit-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ws-audit-label { flex: 0 0 70px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-audit-bar { flex: 1; height: 6px; background: rgba(0,0,0,0.3); border-radius: 3px; overflow: hidden; min-width: 40px; }
.ws-audit-fill { display: block; height: 100%; transition: width .3s ease; }
.ws-audit-pct { flex: none; width: 38px; text-align: right; font-weight: 600; font-size: 11px; }
.ws-audit-target { flex: none; width: 32px; text-align: right; font-size: 10px; color: rgba(255,255,255,0.4); }
.ws-audit-row.ws-audit-low .ws-audit-pct { color: #ef4444; }
.ws-audit-row.ws-audit-high .ws-audit-pct { color: #f4a623; }
.ws-audit-row.ws-audit-ok .ws-audit-pct { color: #2ecc71; }

.ws-audit-alert { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 11.5px; background: transparent; border: 1px solid transparent; color: rgba(255,255,255,0.86); margin-bottom: 4px; transition: all .12s ease; text-align: left; }
.ws-audit-alert:disabled { opacity: 0.45; cursor: default; }
.ws-audit-alert:not(:disabled):hover { transform: translateX(-2px); }
.ws-audit-alert b { color: #fff; }
.ws-audit-alert.alert-critical { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }
.ws-audit-alert.alert-critical b { color: #fff; }
.ws-audit-alert.alert-warn { background: rgba(244,166,35,0.08); border-color: rgba(244,166,35,0.22); color: #f4a623; }
.ws-audit-alert.alert-warn b { color: #fff; }
.ws-audit-alert.alert-ok { background: rgba(46,204,113,0.06); border-color: rgba(46,204,113,0.2); color: #2ecc71; }

.ws-audit-clear { width: 100%; padding: 8px 10px; background: rgba(124,92,255,0.16); border: 1px solid rgba(124,92,255,0.3); color: #fff; border-radius: 6px; font-size: 11.5px; cursor: pointer; margin-top: 10px; display: flex; align-items: center; gap: 6px; justify-content: center; }
.ws-audit-clear:hover { background: rgba(124,92,255,0.28); }

@media (max-width: 1100px) { .workshop-layout { grid-template-columns: 1fr; } #workshop-audit-sidebar { position: static; max-height: none; } }

/* P4 — drag-drop calendar */
.mg-cell.mg-cell-drop-hover { border-color: #2ecc71 !important; box-shadow: 0 0 0 2px rgba(46,204,113,0.32) inset; background: rgba(46,204,113,0.08); }
.mg-chip[draggable="true"] { cursor: grab; }
.mg-chip[draggable="true"]:active { cursor: grabbing; }
.mg-chip.mg-chip-dragging { opacity: 0.4; }
.mg-tip { margin-left: auto; font-size: 11.5px; color: rgba(255,255,255,0.5); }
.mg-tip i { margin-right: 4px; color: var(--primary, #7c5cff); }

/* ============================================================
   B/S2 — Post Sub-tab Modal (PSM) — Xưởng v1.9 full editor
   ============================================================ */
.psm-modal { max-width: 1100px; width: 94vw; }
.psm-modal .ws-modal-body { padding: 0; }

/* Header row (compact, sticky) */
.psm-head-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0; z-index: 2;
}
.psm-input {
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.1);
  color: #fff; padding: 7px 10px; border-radius: 6px; font-size: 13px;
  outline: none; transition: border-color .14s ease;
  font-family: inherit;
}
.psm-input:focus { border-color: var(--primary, #7c5cff); }
.psm-input::placeholder { color: rgba(255,255,255,0.32); }
.psm-input-date { width: 84px; flex: none; }
.psm-input-channel { width: 130px; flex: none; }
.psm-head-row .psm-input { font-size: 12.5px; padding: 6px 10px; min-width: 0; flex: 1 1 100px; }
.psm-head-row select.psm-input { flex: 0 1 130px; }
.psm-head-row .ws-del { margin-left: auto; flex: none; }

/* Tabs */
.psm-tabs {
  display: flex; gap: 2px; padding: 0 20px; background: rgba(0,0,0,0.24);
  border-bottom: 1px solid rgba(255,255,255,0.06); overflow-x: auto;
}
.psm-tab {
  background: transparent; border: none; color: rgba(255,255,255,0.55);
  padding: 12px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all .12s ease;
  white-space: nowrap;
}
.psm-tab:hover { color: rgba(255,255,255,0.9); }
.psm-tab.active { color: var(--primary, #7c5cff); border-bottom-color: var(--primary, #7c5cff); background: rgba(124,92,255,0.08); }
.psm-tab.disabled { opacity: 0.35; cursor: not-allowed; }
.psm-tab i { margin-right: 6px; }

/* Tab content */
.psm-tab-content { padding: 20px; max-height: 62vh; overflow-y: auto; }
.psm-tab-body { display: flex; flex-direction: column; gap: 14px; }

/* Field */
.psm-field { display: flex; flex-direction: column; gap: 6px; }
.psm-field > .psm-input { width: 100%; box-sizing: border-box; }
.psm-field > textarea.psm-input { resize: vertical; min-height: 60px; }
.psm-field-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.psm-field-head label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.78); letter-spacing: 0.2px; white-space: nowrap; }
.psm-field-head label i { margin-right: 4px; color: var(--primary, #7c5cff); }
.psm-field-head .ws-ai-btn, .psm-field-head .psm-ai-btn { margin-left: auto; }
.psm-field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.psm-field-meta { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: -2px; }
.psm-hint { font-size: 11.5px; color: rgba(255,255,255,0.55); font-style: italic; }
.psm-empty, .psm-empty-row { font-size: 12px; color: rgba(255,255,255,0.4); font-style: italic; padding: 8px 4px; text-align: center; }

.psm-framework-select { width: auto; padding: 4px 8px; font-size: 11px; }
.psm-caption-body { min-height: 240px !important; font-family: inherit; }

/* v4.10.6 — caption row 2 cột: textarea | cột cờ TRÊN/DƯỚI (slot độc lập) */
.psm-caption-row {
  display: grid;
  grid-template-columns: 1fr 52px;
  gap: 8px;
  align-items: stretch;
}
.psm-lang-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
}
.psm-lang-flag {
  width: 52px !important;
  padding: 4px 2px !important;
  font-size: 16px;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}
.psm-lang-flag:hover { border-color: rgba(124,92,255,0.4); }
.psm-lang-divider {
  flex: 1;
  align-self: center;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(124,92,255,0.25), transparent);
  margin: 4px 0;
  min-height: 24px;
}

/* v4.10.8 — banner auto-sync caption khi đổi cờ */
.psm-langsync-banner {
  display: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(124,92,255,0.18), rgba(255,166,35,0.10));
  border: 1px solid rgba(124,92,255,0.35);
  color: rgba(255,255,255,0.92);
  font-size: 11.5px;
  font-style: italic;
  margin-bottom: 4px;
  animation: psm-pulse 1.6s ease-in-out infinite;
}
.psm-langsync-banner.active { display: block; }
.psm-langsync-banner i { margin-right: 6px; color: var(--primary, #7c5cff); }
@keyframes psm-pulse {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}

/* v4.9.4 — placeholder gen ảnh (Sắp ra mắt) */
.psm-imggen-field {
  background: linear-gradient(135deg, rgba(124,92,255,0.08), rgba(255,166,35,0.04));
  border: 1px dashed rgba(124,92,255,0.3);
  border-radius: 10px;
  padding: 10px 12px;
}
.psm-soon-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c5cff, #f4a623);
  color: white;
  margin-left: 8px;
}
.psm-imggen-bar { display: flex; flex-direction: column; gap: 8px; }
.psm-imggen-btn {
  align-self: flex-start;
  background: rgba(124,92,255,0.15);
  border: 1px solid rgba(124,92,255,0.4);
  color: #cfc7ff;
}
.psm-imggen-btn:hover { background: rgba(124,92,255,0.25); border-color: #7c5cff; }
.psm-imggen-btn i { color: #f4a623; }

.psm-ai-btn {
  background: rgba(124,92,255,0.16); color: var(--primary, #b4a0ff);
  border: 1px solid rgba(124,92,255,0.35); padding: 5px 12px;
  font-size: 11.5px; font-weight: 600; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.psm-ai-btn:hover { background: rgba(124,92,255,0.28); color: #fff; }

/* Video — shotlist table */
.psm-shotlist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.psm-shotlist-table th { text-align: left; padding: 6px 8px; font-weight: 600; color: rgba(255,255,255,0.6); border-bottom: 1px solid rgba(255,255,255,0.08); }
.psm-shotlist-table td { padding: 4px 4px; vertical-align: top; }
.psm-shotlist-table td:nth-child(2) { width: 90px; }
.psm-shotlist-table td:nth-child(4) { width: 36px; }
.psm-shotlist-table .psm-input { width: 100%; padding: 5px 8px; font-size: 11.5px; }
.psm-shotlist-table tr:hover td { background: rgba(255,255,255,0.02); }

/* Hashtag */
.psm-hashtag-section { background: rgba(0,0,0,0.16); padding: 12px; border-radius: 8px; }
.psm-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; min-height: 24px; }
.psm-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; padding: 3px 6px 3px 10px; border-radius: 12px;
  background: rgba(124,92,255,0.14); color: rgba(255,255,255,0.92);
  border: 1px solid rgba(124,92,255,0.3);
}
.psm-tag-del { background: transparent; border: none; color: rgba(255,255,255,0.55); cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1; }
.psm-tag-del:hover { color: #ff6b6b; }
.psm-tag-add { display: flex; gap: 6px; align-items: center; }
.psm-tag-add .psm-input { flex: 1; }
.psm-tag-color { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; }
.psm-tag-color-branded { background: #10B981; }
.psm-tag-color-niche { background: #EC4899; }
.psm-tag-color-community { background: #F59E0B; }

/* Variants */
.psm-variant-list { display: flex; flex-direction: column; gap: 6px; }
.psm-variant-row { display: flex; gap: 6px; align-items: flex-start; }
.psm-variant-row .psm-input { flex: 1; min-height: 50px; }

/* QC */
.psm-qc-head { display: flex; align-items: center; gap: 14px; padding: 12px; background: rgba(0,0,0,0.18); border-radius: 8px; flex-wrap: wrap; }
.psm-score-total { display: flex; align-items: baseline; gap: 4px; padding: 6px 14px; border-radius: 8px; font-size: 22px; font-weight: 800; }
.psm-score-total b { font-size: 28px; }
.psm-score-total span { font-size: 12px; color: rgba(255,255,255,0.5); }
.psm-score-ok { color: #2ecc71; background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.3); }
.psm-score-warn { color: #f4a623; background: rgba(244,166,35,0.12); border: 1px solid rgba(244,166,35,0.3); }
.psm-score-empty { color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.1); }
.psm-qc-meta { font-size: 12px; color: rgba(255,255,255,0.6); }
.psm-qc-head .psm-ai-btn { margin-left: auto; }
.psm-score-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.psm-score-lbl { flex: 0 0 80px; font-size: 12px; color: rgba(255,255,255,0.7); }
.psm-score-bar { flex: 1; height: 8px; background: rgba(0,0,0,0.32); border-radius: 4px; overflow: hidden; }
.psm-score-fill { height: 100%; background: linear-gradient(90deg, #f4a623, #2ecc71); transition: width .3s ease; }
.psm-score-pct { flex: none; width: 30px; text-align: right; font-size: 12px; font-weight: 600; }
.psm-claim-item { padding: 8px 10px; border-radius: 6px; margin-bottom: 4px; font-size: 12px; border-left: 3px solid; }
.psm-claim-CRITICAL { background: rgba(239,68,68,0.08); border-left-color: #ef4444; }
.psm-claim-WARNING  { background: rgba(244,166,35,0.08); border-left-color: #f4a623; }
.psm-claim-NOTICE   { background: rgba(124,92,255,0.06); border-left-color: #7c5cff; }
.psm-claim-level { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,0.1); font-weight: 700; letter-spacing: 0.5px; }
.psm-claim-suggest { font-size: 11.5px; color: rgba(255,255,255,0.65); font-style: italic; margin-top: 4px; }
.psm-override { padding: 8px 12px; background: rgba(244,166,35,0.08); border: 1px solid rgba(244,166,35,0.22); border-radius: 6px; font-size: 12px; color: #f4a623; }
.psm-override i { margin-right: 4px; }
.psm-override-toggle { font-size: 12px; color: rgba(255,255,255,0.5); }
.psm-override-toggle summary { cursor: pointer; padding: 6px 0; }
.psm-override-toggle textarea { width: 100%; margin: 8px 0; }

/* Approval */
.psm-stamp { padding: 12px; border-radius: 8px; background: rgba(0,0,0,0.16); margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.psm-stamp-empty label { font-weight: 600; color: rgba(255,255,255,0.78); }
.psm-stamp-empty .psm-input { width: 100%; box-sizing: border-box; }
.psm-stamp-empty .psm-stamp-btn { align-self: flex-start; }
.psm-stamp-done { background: rgba(46,204,113,0.08); border: 1px solid rgba(46,204,113,0.22); color: #2ecc71; }
.psm-stamp-done b { color: #fff; }
.psm-stamp-note { font-size: 11.5px; color: rgba(255,255,255,0.7); font-style: italic; margin-top: 4px; }
.psm-stamp-undo { background: transparent; border: none; color: rgba(255,255,255,0.5); text-decoration: underline; cursor: pointer; margin-left: auto; font-size: 11.5px; }

/* Footer (sticky) */
.psm-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255,255,255,0.06);
  position: sticky; bottom: 0;
}
.psm-footer-spacer { flex: 1; }
.mg-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;              /* chip co lại + ellipsis thay vì kéo giãn cột */
  text-align: left;
  font-size: 11px;
  line-height: 1.3;
  padding: 4px 7px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  color: #fff;
  background: var(--chip-color, #4f8cff);
  border-left: 3px solid rgba(255,255,255,0.5);
}
.mg-chip i { flex-shrink: 0; }
.mg-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-chip:hover { filter: brightness(1.12); }
.mg-chip.funnel-awareness     { --chip-color: #4f8cff; }
.mg-chip.funnel-consideration { --chip-color: #f4a623; color: #1c1402; }
.mg-chip.funnel-conversion    { --chip-color: #2ecc71; color: #06210f; }
.mg-chip.funnel-retention     { --chip-color: #b06cff; }

.mg-unscheduled {
  margin-top: 16px;
  padding: 12px;
  border-radius: 10px;
  border: 1px dashed var(--warning, #f4a623);
  background: rgba(244,166,35,0.06);
}
.mg-unsched-title { font-size: 13px; font-weight: 600; color: var(--warning, #f4a623); margin-bottom: 8px; }
.mg-unsched-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-unsched-chips .mg-chip { width: auto; max-width: 220px; }

/* ---- Post panel modal (Phase 3) ---- */
.ws-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.ws-modal {
  width: 100%;
  max-width: 620px;
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ws-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.1));
}
.ws-modal-head h3 { margin: 0; font-size: 17px; }
.ws-modal-close {
  background: none;
  border: none;
  color: var(--text-muted, #8b90a0);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.ws-modal-close:hover { color: #fff; }
.ws-modal-body { padding: 16px 18px; }
.ws-modal-body .ws-card { border: none; padding: 0; }

@media (max-width: 720px) {
  /* Vẫn giữ 7 ngày/hàng, chỉ thu nhỏ ô cho vừa màn nhỏ */
  .mg-cell { min-height: 52px; padding: 3px; }
  .mg-daynum { font-size: 10px; }
  .mg-chip span { display: none; } /* màn rất nhỏ: chỉ còn icon kênh + màu phễu */
}

/* ---- Danh sách card 2 dòng (v4.9.6) ---- */
.ws-rows { display: flex; flex-direction: column; gap: 8px; }
.ws-rows-grouped { gap: 8px; margin-bottom: 14px; }
.ws-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  border-left: 4px solid var(--stage-color, var(--text-muted, #8b90a0));
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.ws-row:hover {
  background: rgba(124, 92, 255, 0.05);
  border-color: rgba(124, 92, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}
.ws-row-line1, .ws-row-line2 { display: flex; align-items: center; gap: 8px; }
.ws-row-line1 { /* Dòng chính — topic là trái tim */ }
.ws-row-line2 {
  padding-left: 4px;
  font-size: 12px;
  opacity: 0.92;
}
.ws-row .workshop-stage-badge { flex-shrink: 0; }
.ws-row .ws-input { padding: 6px 8px; }
.ws-row-date { width: 92px; flex-shrink: 0; text-align: center; font-size: 12px; font-weight: 500; }
.ws-row-topic {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border-color: transparent;
  padding: 4px 6px !important;
}
.ws-row-topic:hover, .ws-row-topic:focus {
  background: rgba(255,255,255,0.04);
  border-color: rgba(124,92,255,0.3);
}
.ws-row-funnel { flex: 1 1 0; min-width: 110px; max-width: 160px; }
.ws-row-format { flex: 1 1 0; min-width: 110px; max-width: 160px; }

/* v4.9.5 — Day-of-week badge */
.ws-row-dow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(124, 92, 255, 0.12);
  color: #cfc7ff;
  border: 1px solid rgba(124, 92, 255, 0.25);
}
.ws-row-dow.ws-row-dow-empty {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.08);
  font-size: 12px;
}
.ws-row-dow.ws-date-past { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.08); }
.ws-row-dow.ws-date-today { background: rgba(244, 166, 35, 0.2); color: #f4a623; border-color: rgba(244, 166, 35, 0.5); animation: ws-pulse 1.8s ease-in-out infinite; }
.ws-row-dow.ws-date-soon { background: rgba(46, 204, 113, 0.18); color: #2ecc71; border-color: rgba(46, 204, 113, 0.4); }
@keyframes ws-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 166, 35, 0.5); } 50% { box-shadow: 0 0 0 4px rgba(244, 166, 35, 0); } }

/* v4.9.5 — Pillar chip mini (hash-based hue) */
.ws-row-pillar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: hsl(var(--p-hue, 270), 65%, 22%);
  color: hsl(var(--p-hue, 270), 85%, 80%);
  border: 1px solid hsl(var(--p-hue, 270), 70%, 50%);
  box-shadow: inset 0 0 0 1px hsla(var(--p-hue, 270), 70%, 60%, 0.15);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Dot màu thay vì 🏛 — pop hơn + ko cần emoji rendering */
.ws-row-pillar::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--p-hue, 270), 85%, 65%);
  box-shadow: 0 0 6px hsl(var(--p-hue, 270), 85%, 55%);
}

/* v4.9.5 — Month divider khi sort by date */
.ws-month-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 4px 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(124,92,255,0.18), rgba(124,92,255,0.02));
  border-left: 3px solid var(--primary, #7c5cff);
}
.ws-month-divider:first-child { margin-top: 0; }
.ws-month-divider i { color: var(--primary, #7c5cff); }
.ws-month-divider b { font-weight: 700; }
.ws-month-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}

/* v4.9.9 — Badge ưu tiên format theo tháng */
.ws-pref-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid;
  margin-left: 4px;
}
.ws-pref-badge .ws-pref-icon { font-size: 12px; }
.ws-pref-badge.pref-none {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
}
.ws-pref-badge.pref-none:hover { background: rgba(124,92,255,0.1); border-color: rgba(124,92,255,0.35); color: #cfc7ff; }
.ws-pref-badge.pref-reel {
  background: rgba(236, 72, 153, 0.15);
  border-color: rgba(236, 72, 153, 0.45);
  color: #fda4d3;
}
.ws-pref-badge.pref-photo {
  background: rgba(34, 211, 238, 0.15);
  border-color: rgba(34, 211, 238, 0.45);
  color: #93e5f5;
}
.ws-pref-badge.pref-mixed {
  background: rgba(167, 139, 250, 0.15);
  border-color: rgba(167, 139, 250, 0.45);
  color: #c4b5fd;
}
.ws-pref-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.ws-pref-stat {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Popover chọn format pref */
.ws-pref-popover {
  position: absolute;
  z-index: 1100;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.14));
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-pref-popover-title {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  padding: 4px 6px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.ws-pref-popover-title i { margin-right: 6px; color: var(--primary, #7c5cff); }
.ws-pref-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}
.ws-pref-opt:hover { background: rgba(124,92,255,0.08); border-color: rgba(124,92,255,0.3); }
.ws-pref-opt.active { background: rgba(124,92,255,0.12); border-color: rgba(124,92,255,0.5); }
.ws-pref-opt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.ws-pref-opt-body { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.ws-pref-opt-body b { font-size: 13px; color: var(--text-primary, #fff); font-weight: 600; }
.ws-pref-opt-body small { font-size: 11px; color: rgba(255,255,255,0.5); }
.ws-pref-opt-check { color: var(--primary, #7c5cff); flex-shrink: 0; }
.ws-pref-opt-clear { opacity: 0.7; }
.ws-pref-opt-clear:hover { opacity: 1; }

/* v4.9.5 — Sort dropdown */
.ws-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
}
.ws-sort-wrap:hover { border-color: rgba(124,92,255,0.3); }
.ws-sort-icon { color: rgba(255,255,255,0.5); font-size: 12px; }
.ws-sort-select {
  background: transparent;
  border: none;
  color: var(--text-primary, #fff);
  font-size: 12px;
  padding: 4px 4px;
  cursor: pointer;
  outline: none;
}
.ws-sort-select option { background: var(--bg-panel, #16181f); }
.ws-row-channel-selector { position: relative; display: inline-block; flex-shrink: 0; }
.ws-row-channel-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-input, rgba(0,0,0,0.25));
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  cursor: pointer; transition: all 0.15s ease;
}
.ws-row-channel-btn:hover { border-color: var(--primary, #7c5cff); background: rgba(124, 92, 255, 0.1); }
.ws-row-channel-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 6px; background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.14));
  border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  padding: 6px; display: flex; gap: 6px; z-index: 100;
}
.ws-row-channel-opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent;
  background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.12s ease;
}
.ws-row-channel-opt:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.ws-row-channel-opt.active { background: rgba(124, 92, 255, 0.15); border-color: var(--primary, #7c5cff); }
.ws-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.btn-xs { padding: 6px 9px; font-size: 12px; line-height: 1; }

/* ---- AI sửa từng trường ✨ (Phase 5) ---- */
.ws-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-ai-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--primary, #7c5cff);
}
.ws-ai-btn:hover { background: rgba(124,92,255,0.15); }
.ws-ai-btn:disabled { opacity: 0.5; cursor: wait; }

.ws-ai-popover {
  position: absolute;
  z-index: 1100;
  width: 320px;
  max-width: calc(100vw - 16px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.14));
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* v4.9.3 — popover rộng hơn cho option dài (visual brief 60-150 từ) */
.ws-ai-popover.ws-ai-popover-wide { width: 520px; }
.ws-ai-popover-title { font-size: 12px; color: var(--text-muted, #8b90a0); padding: 2px 4px; }
.ws-ai-opt {
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  color: var(--text-primary, #fff);
  cursor: pointer;
  white-space: pre-wrap;
  word-break: break-word;
}
.ws-ai-opt:hover { border-color: var(--primary, #7c5cff); background: rgba(124,92,255,0.12); }

/* ---- Modal đề xuất chủ đề (bulk topics) ---- */
.ws-topic-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.ws-topic-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-elevated, rgba(255,255,255,0.03));
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
}
.ws-topic-main { flex: 1; }
.ws-topic-item .ws-add-topic { white-space: nowrap; flex-shrink: 0; }

/* ---- Cài đặt hợp đồng (v1.9 — step 8 / Lộ trình) ---- */
.contract-card {
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contract-card-head { display: flex; flex-direction: column; gap: 2px; }
.contract-card-head h3 { margin: 0; font-size: 15px; }
.contract-hint { font-size: 12px; color: var(--text-muted, #8b90a0); }
.contract-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.contract-field { display: flex; flex-direction: column; gap: 4px; }
.contract-field-full { width: 100%; }
.contract-field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #8b90a0);
}
.contract-field input,
.contract-field textarea {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary, #fff);
  background: var(--bg-input, rgba(0,0,0,0.25));
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  font-family: inherit;
  resize: vertical;
}
.contract-field input:focus,
.contract-field textarea:focus { outline: none; border-color: var(--primary, #7c5cff); }
.contract-kpi { display: flex; flex-direction: column; gap: 8px; }
.contract-kpi-label { font-size: 12px; font-weight: 600; color: var(--text-secondary, #c7cad1); }
.contract-kpi-list { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.contract-kpi-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, #c7cad1);
  cursor: pointer;
}
.contract-kpi-item input { accent-color: var(--primary, #7c5cff); }

/* ---- Lộ trình chiến dịch (v1.9 — component dùng chung) ---- */
.roadmap-wrap { display: flex; flex-direction: column; gap: 18px; }
.roadmap-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.roadmap-toolbar-info h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.rm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rm-status {
  font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  background: var(--bg-elevated, rgba(255,255,255,0.06)); color: var(--text-muted, #8b90a0);
}
.rm-status-proposed { background: rgba(124,92,255,0.2); color: var(--primary, #7c5cff); }
.rm-status-locked { background: rgba(46,204,113,0.18); color: var(--success, #2ecc71); }

.roadmap-timeline { display: flex; flex-direction: column; gap: 14px; }
.rm-phase-card {
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  border-left: 4px solid var(--primary, #7c5cff);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.rm-phase-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-phase-num {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--primary, #7c5cff);
}
.rm-phase-head .rm-monthspan { width: 150px; font-weight: 700; }
.rm-phase-head .rm-label { flex: 1; min-width: 160px; font-weight: 600; }
.rm-phase-head .rm-del { margin-left: auto; }
.rm-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rm-field-row { display: flex; flex-wrap: wrap; gap: 10px; }
.rm-field label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted, #8b90a0);
}
.rm-input {
  width: 100%; padding: 7px 10px; border-radius: 8px; font-size: 14px;
  color: var(--text-primary, #fff); background: var(--bg-input, rgba(0,0,0,0.25));
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  font-family: inherit; resize: vertical;
}
.rm-input:focus { outline: none; border-color: var(--primary, #7c5cff); }
.rm-funnel-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-funnel-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  color: var(--text-secondary, #c7cad1);
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
}
.rm-funnel-chip.on { color: #fff; background: var(--primary, #7c5cff); border-color: var(--primary, #7c5cff); }
.rm-funnel-chip input { accent-color: #fff; }

/* B/S5 — Repurpose modal: 1 bài → N variant cross-platform */
.psm-divider {
  border: none; border-top: 1px solid var(--border-light, rgba(255,255,255,0.1));
  margin: 16px 0 12px;
}
.psm-section-title {
  margin: 0 0 8px; font-size: 14px; font-weight: 600;
  color: var(--text-primary, #fff); display: flex; align-items: center; gap: 8px;
}
.psm-section-title .fas { color: var(--primary, #7c5cff); }
.psm-repurpose-locked { opacity: .7; font-style: italic; }
.psm-repurpose-btn { display: inline-flex; align-items: center; gap: 8px; }

/* Badge "AI" — dùng prefix trước nút/heading để intern nhận biết đây là chức năng AI */
.ai-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 999px; text-transform: uppercase;
  background: linear-gradient(135deg, #7c5cff 0%, #a472ff 100%);
  color: #fff; line-height: 1.4;
  box-shadow: 0 2px 6px rgba(124, 92, 255, 0.35);
}
.ai-tag .fas { font-size: 10px; }
.btn .ai-tag { margin-right: 2px; }

/* Modal Repurpose — rộng hơn modal mặc định để hiển thị grid variant */
.rpz-modal { max-width: 760px; }
.rpz-source {
  background: rgba(124,92,255,0.08); border: 1px solid rgba(124,92,255,0.25);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 13.5px; color: var(--text-primary, #fff);
}
.rpz-source-meta {
  display: block; margin-top: 4px; font-size: 12px;
  color: var(--text-muted, #8b90a0); font-weight: 400;
}
.rpz-platforms {
  display: grid; gap: 8px; grid-template-columns: 1fr; margin: 12px 0 16px;
}
@media (min-width: 560px) {
  .rpz-platforms { grid-template-columns: 1fr 1fr; }
}
.rpz-pl-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 9px; cursor: pointer;
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  transition: border-color .12s, background .12s;
}
.rpz-pl-row:hover { border-color: var(--primary, #7c5cff); }
.rpz-pl-row input[type="checkbox"] { accent-color: var(--primary, #7c5cff); }
.rpz-pl-label { display: flex; flex-direction: column; line-height: 1.3; }
.rpz-pl-label b { font-size: 13.5px; color: var(--text-primary, #fff); }
.rpz-pl-channel {
  font-size: 11.5px; font-style: normal; margin-top: 2px;
  color: var(--text-muted, #8b90a0);
}
.rpz-footer { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-light, rgba(255,255,255,0.08)); }
.rpz-summary {
  background: rgba(80,200,120,0.08); border-left: 3px solid #50c878;
  padding: 8px 12px; border-radius: 6px; margin-bottom: 10px;
  font-size: 13px; color: var(--text-primary, #fff);
}
.rpz-summary .fas { color: #50c878; margin-right: 4px; }
.rpz-preview { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.rpz-v-card {
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 10px; padding: 12px 14px;
}
.rpz-v-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.rpz-v-platform {
  font-weight: 700; color: var(--primary, #7c5cff);
  padding: 2px 8px; border-radius: 6px; background: rgba(124,92,255,0.14);
}
.rpz-v-format { color: var(--text-secondary, #c7cad1); }
.rpz-v-timing { color: var(--text-muted, #8b90a0); margin-left: auto; }
.rpz-v-timing .fas { margin-right: 3px; }
.rpz-v-offset {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: rgba(255,200,80,0.14); color: #ffc850; font-weight: 600;
}
.rpz-v-caption {
  font-size: 13px; line-height: 1.5; color: var(--text-primary, #fff);
  white-space: pre-wrap; margin-bottom: 8px;
}
.rpz-v-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.rpz-v-why {
  font-size: 12px; font-style: italic; color: var(--text-muted, #8b90a0);
  padding-top: 6px; border-top: 1px dashed var(--border-light, rgba(255,255,255,0.08));
}
.rpz-v-why .fas { color: #ffc850; margin-right: 4px; }

/* ============================================================
   Báo cáo code (panel-code-reports) — dashboard nội bộ
   ============================================================ */
.cr-category-nav {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px;
}
.cr-cat-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 500;
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  color: var(--text-secondary, #c7cad1);
  transition: all .15s;
}
.cr-cat-btn:hover { border-color: var(--cr-cat-color, #7c5cff); color: #fff; }
.cr-cat-btn.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cr-cat-color, #7c5cff) 22%, transparent), color-mix(in srgb, var(--cr-cat-color, #7c5cff) 8%, transparent));
  border-color: var(--cr-cat-color, #7c5cff);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cr-cat-color, #7c5cff) 30%, transparent);
}
.cr-cat-btn .fas { color: var(--cr-cat-color, #7c5cff); }
.cr-cat-btn.active .fas { color: #fff; }
.cr-cat-count {
  font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.85);
  min-width: 22px; text-align: center;
}
.cr-cat-btn.active .cr-cat-count { background: rgba(255,255,255,0.18); }
.cr-cat-desc {
  margin: 0 0 14px; font-size: 13px;
  color: var(--text-muted, #8b90a0);
}
.cr-body { min-height: 200px; }
.cr-file-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.cr-file-card {
  text-align: left; padding: 16px 18px;
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 12px; cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; gap: 8px;
  color: var(--text-primary, #fff);
}
.cr-file-card:hover {
  border-color: var(--primary, #7c5cff);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.cr-file-card-head {
  display: flex; justify-content: space-between; align-items: center;
}
.cr-file-date {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 6px;
  background: rgba(124,92,255,0.14); color: rgba(124,92,255,0.95);
}
.cr-file-arrow { color: var(--text-muted, #8b90a0); transition: transform .15s; }
.cr-file-card:hover .cr-file-arrow { color: var(--primary, #7c5cff); transform: translateX(3px); }
.cr-file-title {
  margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35;
  color: var(--text-primary, #fff);
}
.cr-file-summary {
  margin: 0; font-size: 13px; line-height: 1.5;
  color: var(--text-secondary, #c7cad1);
}
.cr-file-name {
  font-size: 10.5px; opacity: 0.55;
  margin-top: auto; padding-top: 6px;
  border-top: 1px dashed var(--border-light, rgba(255,255,255,0.08));
}
.cr-empty {
  padding: 36px 20px; text-align: center;
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  border: 1px dashed var(--border-light, rgba(255,255,255,0.12));
  border-radius: 12px;
  color: var(--text-muted, #8b90a0);
}
.cr-empty h3 { margin: 8px 0 4px; color: var(--text-primary, #fff); }
.cr-empty .fas { font-size: 28px; opacity: 0.5; margin-bottom: 6px; }
.cr-empty-err { border-color: rgba(255, 80, 80, 0.4); color: #ffaaaa; }
.cr-empty-err .fas { color: #ff6b6b; opacity: 1; }
.cr-empty code { background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* Detail view — markdown rendered */
.cr-detail {
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 12px; overflow: hidden;
}
.cr-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.08));
  background: rgba(0,0,0,0.16);
  flex-wrap: wrap; gap: 10px;
}
.cr-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-detail-cat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.cr-detail-path {
  font-size: 11.5px; opacity: 0.65;
  background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 4px;
}
.cr-detail-md { padding: 22px 28px; line-height: 1.7; color: var(--text-primary, #fff); }
.cr-detail-md h1 { font-size: 26px; margin: 0 0 14px; border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.1)); padding-bottom: 10px; }
.cr-detail-md h2 { font-size: 20px; margin: 22px 0 10px; color: var(--primary, #7c5cff); }
.cr-detail-md h3 { font-size: 16px; margin: 18px 0 8px; }
.cr-detail-md h4 { font-size: 14px; margin: 14px 0 6px; opacity: 0.85; }
.cr-detail-md p { margin: 0 0 12px; }
.cr-detail-md ul, .cr-detail-md ol { margin: 0 0 12px; padding-left: 24px; }
.cr-detail-md li { margin-bottom: 5px; }
.cr-detail-md code {
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  background: rgba(0,0,0,0.35); padding: 1px 6px; border-radius: 4px;
  font-size: 0.92em; color: #ffc850;
}
.cr-detail-md pre {
  background: rgba(0,0,0,0.45); padding: 14px 18px; border-radius: 8px;
  overflow-x: auto; margin: 0 0 14px;
  border-left: 3px solid var(--primary, #7c5cff);
}
.cr-detail-md pre code { background: transparent; padding: 0; color: #d4d8e0; }
.cr-detail-md blockquote {
  border-left: 3px solid var(--primary, #7c5cff);
  padding: 6px 14px; margin: 0 0 12px;
  background: rgba(124,92,255,0.06);
  color: var(--text-secondary, #c7cad1);
  border-radius: 0 8px 8px 0;
}
.cr-detail-md table {
  width: 100%; border-collapse: collapse; margin: 0 0 14px;
  font-size: 13.5px;
}
.cr-detail-md th, .cr-detail-md td {
  padding: 8px 12px; border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  text-align: left; vertical-align: top;
}
.cr-detail-md th {
  background: rgba(124,92,255,0.14);
  font-weight: 600;
}
.cr-detail-md tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.cr-detail-md a { color: var(--primary, #7c5cff); }
.cr-detail-md hr { border: none; border-top: 1px solid var(--border-light, rgba(255,255,255,0.1)); margin: 18px 0; }

/* === Stat cards (4 ô tổng quan) === */
.cr-stat-cards {
  display: grid; gap: 14px; margin: 18px 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cr-stat-card {
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.cr-stat-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted, #8b90a0);
}
.cr-sprint-code {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  background: rgba(124,92,255,0.18); color: #c4b5fd;
  text-transform: none; letter-spacing: 0.02em;
}
.cr-stat-big {
  font-size: 38px; font-weight: 800; line-height: 1.1;
  color: var(--text-primary, #fff);
}
.cr-stat-big-text { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.25; }
.cr-stat-sub { font-size: 12.5px; color: var(--text-secondary, #c7cad1); margin-top: 4px; }
.cr-stat-note { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted, #8b90a0); line-height: 1.55; }
.cr-stat-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.cr-progress-circle {
  --prog-deg: 0deg;
  width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(#22d3ee var(--prog-deg), rgba(255,255,255,0.08) var(--prog-deg));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cr-progress-circle span {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--bg-panel, #16181f);
}
.cr-sprint-bar {
  width: 100%; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.cr-sprint-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #34d399);
}
.cr-stat-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.cr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 6px;
  text-transform: uppercase;
}
.cr-chip-green { background: rgba(34,197,94,0.16); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.cr-chip-purple { background: rgba(168,85,247,0.16); color: #c084fc; border: 1px solid rgba(168,85,247,0.3); }
.cr-chip-amber { background: rgba(245,158,11,0.16); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.cr-chip-blue { background: rgba(59,130,246,0.16); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }

/* === Filter bar (4 view + status) === */
.cr-filter-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin: 8px 0 16px; flex-wrap: wrap;
}
.cr-filter-left, .cr-filter-right { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-view-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 500;
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  color: var(--text-secondary, #c7cad1);
  transition: all .15s;
}
.cr-view-btn:hover { color: #fff; border-color: rgba(124,92,255,0.4); }
.cr-view-btn.active {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  border-color: #22d3ee; color: #0a1620; font-weight: 700;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.3);
}
.cr-view-btn.active .fas { color: #0a1620; }
.cr-status-btn {
  padding: 8px 16px; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 500;
  background: transparent;
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  color: var(--text-secondary, #c7cad1);
  transition: all .12s;
}
.cr-status-btn:hover { color: #fff; }
.cr-status-btn.active { background: rgba(124,92,255,0.18); border-color: var(--primary, #7c5cff); color: #fff; }

/* === Phase card === */
.cr-phase-card {
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 14px; padding: 20px 22px; margin-bottom: 14px;
  position: relative;
}
.cr-phase-card.cr-st-done { border-left: 3px solid #22c55e; }
.cr-phase-card.cr-st-prog { border-left: 3px solid #22d3ee; }
.cr-phase-card.cr-st-pend { border-left: 3px solid #6b7280; opacity: 0.85; }
.cr-phase-card.cr-st-legacy { border-left: 3px solid #f59e0b; }
.cr-phase-head {
  display: flex; gap: 14px; align-items: flex-start;
  padding-bottom: 12px;
}
.cr-phase-mark {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,197,94,0.16); color: #4ade80;
  border: 1px solid rgba(34,197,94,0.3);
}
.cr-st-prog .cr-phase-mark { background: rgba(34,211,238,0.16); color: #22d3ee; border-color: rgba(34,211,238,0.3); }
.cr-st-pend .cr-phase-mark { background: rgba(107,114,128,0.18); color: #9ca3af; border-color: rgba(107,114,128,0.3); }
.cr-st-legacy .cr-phase-mark { background: rgba(245,158,11,0.16); color: #fbbf24; border-color: rgba(245,158,11,0.3); }
.cr-phase-titles { flex: 1; min-width: 0; }
.cr-phase-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-muted, #8b90a0); text-transform: uppercase;
  margin-bottom: 4px;
}
.cr-phase-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--text-primary, #fff); }
.cr-phase-sub { margin: 0; font-size: 13px; color: var(--text-secondary, #c7cad1); line-height: 1.5; }
.cr-phase-badge {
  flex-shrink: 0; align-self: flex-start;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: rgba(34,197,94,0.12); color: #4ade80;
  border: 1px solid rgba(34,197,94,0.3);
}
.cr-phase-badge.cr-st-prog { background: rgba(34,211,238,0.12); color: #22d3ee; border-color: rgba(34,211,238,0.3); }
.cr-phase-badge.cr-st-pend { background: rgba(107,114,128,0.18); color: #9ca3af; border-color: rgba(107,114,128,0.3); }
.cr-phase-badge.cr-st-legacy { background: rgba(245,158,11,0.12); color: #fbbf24; border-color: rgba(245,158,11,0.3); }

.cr-phase-tasks-title {
  margin: 4px 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-muted, #8b90a0); text-transform: uppercase;
}
.cr-phase-tasks-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.cr-phase-task {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px;
  background: rgba(0,0,0,0.16);
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  border-radius: 9px;
  font-size: 13px; line-height: 1.45;
}
.cr-phase-task .fas { color: #4ade80; margin-top: 2px; flex-shrink: 0; font-size: 11px; }
.cr-phase-task.cr-task-pending .fas { color: #9ca3af; }
.cr-task-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cr-task-title { color: var(--text-primary, #fff); }
.cr-task-file {
  font-size: 10.5px; padding: 1px 8px; border-radius: 5px;
  background: rgba(124,92,255,0.16); color: #c4b5fd;
  font-family: 'SF Mono', Monaco, monospace;
  align-self: flex-start;
  word-break: break-all;
}

/* === Module card === */
.cr-module-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.cr-module-card {
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.cr-module-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cr-module-title { margin: 0; font-size: 16px; font-weight: 700; color: #fff; font-family: 'SF Mono', Monaco, monospace; }
.cr-module-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--text-secondary, #c7cad1); line-height: 1.4; }
.cr-module-size {
  flex-shrink: 0;
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(124,92,255,0.14); color: #c4b5fd;
  white-space: nowrap;
}
.cr-mod-section {
  padding-top: 10px;
  border-top: 1px dashed var(--border-light, rgba(255,255,255,0.08));
}
.cr-mod-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-muted, #8b90a0); text-transform: uppercase;
  margin-bottom: 6px;
}
.cr-mod-section-title .fas { color: var(--primary, #7c5cff); margin-right: 4px; }
.cr-mod-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--text-secondary, #c7cad1); line-height: 1.55; }
.cr-mod-list li { margin-bottom: 4px; }
.cr-mod-status-text { color: #4ade80; }
.cr-mod-prio {
  display: inline-block;
  font-size: 9.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  margin-right: 4px;
  letter-spacing: 0.04em;
}
.cr-prio-high { background: rgba(239,68,68,0.16); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.cr-prio-medium { background: rgba(245,158,11,0.16); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.cr-prio-low { background: rgba(107,114,128,0.18); color: #9ca3af; border: 1px solid rgba(107,114,128,0.3); }
.cr-mod-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-light, rgba(255,255,255,0.06)); }
.cr-mod-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; padding: 8px 10px; }

/* === Legacy view === */
.cr-legacy-summary {
  background: rgba(34,197,94,0.08); border-left: 3px solid #22c55e;
  padding: 12px 16px; border-radius: 0 10px 10px 0; margin-bottom: 14px;
  font-size: 13.5px; color: var(--text-primary, #fff);
}
.cr-legacy-summary .fas { color: #4ade80; margin-right: 6px; }
.cr-legacy-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.cr-legacy-card {
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 12px; padding: 16px 18px;
}
.cr-legacy-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cr-legacy-card h4 { margin: 4px 0 6px; font-size: 14px; color: #fff; }
.cr-legacy-card p { margin: 0; font-size: 12.5px; color: var(--text-secondary, #c7cad1); line-height: 1.55; }
.cr-legacy-status { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; }
.cr-legacy-status.cr-st-done { background: rgba(34,197,94,0.14); color: #4ade80; }

/* === Old category chips (cho view files) === */
.cr-cat-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}

/* ============================================================
   Pha 5 — Triển khai (panel-deploy)
   2 sub-tab: Bài đang chạy · Đội & Phân vai
   ============================================================ */
.deploy-nav {
  display: flex; gap: 8px; margin: 16px 0 14px; flex-wrap: wrap;
}
.deploy-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 500;
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  color: var(--text-secondary, #c7cad1);
  transition: all .15s;
}
.deploy-tab:hover { color: #fff; border-color: rgba(124,92,255,0.4); }
.deploy-tab.active {
  background: linear-gradient(135deg, #7c5cff 0%, #a472ff 100%);
  border-color: #7c5cff; color: #fff;
  box-shadow: 0 4px 14px rgba(124,92,255,0.35);
}

/* Đội — team grid */
.dep-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.dep-toolbar-info { color: var(--text-secondary, #c7cad1); font-size: 13.5px; }
.dep-team-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.dep-team-card {
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 12px; padding: 16px 18px;
}
.dep-team-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dep-team-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #7c5cff, #a472ff);
  color: #fff; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.dep-team-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dep-team-name {
  background: transparent; border: 1px dashed transparent;
  color: #fff; font-size: 15px; font-weight: 600; padding: 4px 6px; border-radius: 6px;
  width: 100%;
}
.dep-team-name:hover, .dep-team-name:focus {
  border-color: var(--border-light, rgba(255,255,255,0.18)); outline: none;
  background: rgba(0,0,0,0.2);
}
.dep-team-role {
  background: var(--bg-input, rgba(0,0,0,0.25)); color: var(--text-secondary, #c7cad1);
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  font-size: 12px; padding: 4px 8px; border-radius: 6px;
}
.dep-team-fields { display: flex; flex-direction: column; gap: 6px; }
.dep-team-fields label {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.16); padding: 7px 10px; border-radius: 7px;
  font-size: 12.5px; color: var(--text-muted, #8b90a0);
}
.dep-team-fields label .fas { color: var(--primary, #7c5cff); font-size: 11px; flex-shrink: 0; }
.dep-team-fields input {
  flex: 1; background: transparent; border: none; color: #fff; font-size: 12.5px; outline: none;
}

/* Filter bar (Bài đang chạy) */
.dep-filter-bar {
  background: rgba(0,0,0,0.16);
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 12px 14px;
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.dep-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dep-filter-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-muted, #8b90a0); text-transform: uppercase;
  min-width: 90px;
}
.dep-filter-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.dep-chip {
  font-size: 11.5px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  color: var(--text-secondary, #c7cad1);
  transition: all .12s;
}
.dep-chip:hover { color: #fff; }
.dep-chip.active { background: rgba(124,92,255,0.22); border-color: var(--primary, #7c5cff); color: #fff; font-weight: 600; }
.dep-chip-overdue { background: rgba(239,68,68,0.1); color: #f87171; border-color: rgba(239,68,68,0.3); }
.dep-chip-overdue.active { background: rgba(239,68,68,0.25); color: #fff; border-color: #f87171; }
.dep-chip-count { font-weight: 700; margin-left: 3px; }
.dep-filter-summary { margin-left: auto; font-size: 12.5px; color: var(--text-muted, #8b90a0); }
.dep-filter-summary b { color: #fff; }

/* Status chips inline-color */
.dep-chip.ds-idea     { background: rgba(148,163,184,0.16); color: #cbd5e1; border-color: rgba(148,163,184,0.3); }
.dep-chip.ds-shoot    { background: rgba(245,158,11,0.16); color: #fbbf24; border-color: rgba(245,158,11,0.3); }
.dep-chip.ds-edit     { background: rgba(168,85,247,0.16); color: #c084fc; border-color: rgba(168,85,247,0.3); }
.dep-chip.ds-ready    { background: rgba(34,211,238,0.16); color: #22d3ee; border-color: rgba(34,211,238,0.3); }
.dep-chip.ds-sched    { background: rgba(59,130,246,0.16); color: #60a5fa; border-color: rgba(59,130,246,0.3); }
.dep-chip.ds-posted   { background: rgba(34,197,94,0.16); color: #4ade80; border-color: rgba(34,197,94,0.3); }
.dep-chip.active.ds-idea { background: rgba(148,163,184,0.34); }
.dep-chip.active.ds-shoot { background: rgba(245,158,11,0.34); }
.dep-chip.active.ds-edit { background: rgba(168,85,247,0.34); }
.dep-chip.active.ds-ready { background: rgba(34,211,238,0.34); }
.dep-chip.active.ds-sched { background: rgba(59,130,246,0.34); }
.dep-chip.active.ds-posted { background: rgba(34,197,94,0.34); }

/* Post rows */
.dep-post-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}
.dep-post-row {
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s;
}
.dep-post-row:hover { border-color: rgba(124,92,255,0.4); }
.dep-post-row.dep-overdue { border-color: rgba(239,68,68,0.45); box-shadow: 0 0 0 1px rgba(239,68,68,0.15); }
.dep-post-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.dep-post-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dep-post-date {
  font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 6px;
  background: rgba(124,92,255,0.16); color: #c4b5fd;
}
.dep-post-channel {
  font-size: 11px; padding: 2px 8px; border-radius: 5px;
  background: rgba(0,0,0,0.3); color: #fff; font-weight: 600;
}
.dep-post-channel.dep-ch-instagram { background: linear-gradient(135deg, #c4377a, #f09433); }
.dep-post-channel.dep-ch-facebook  { background: #1877f2; }
.dep-post-channel.dep-ch-tiktok    { background: #000; border: 1px solid #444; }
.dep-post-format { font-size: 11.5px; color: var(--text-muted, #8b90a0); }
.dep-overdue-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(239,68,68,0.18); color: #f87171;
  border: 1px solid rgba(239,68,68,0.3);
}
.dep-overdue-badge .fas { font-size: 9px; margin-right: 2px; }

.dep-status-badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dep-status-badge.ds-idea   { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.dep-status-badge.ds-shoot  { background: rgba(245,158,11,0.18); color: #fbbf24; }
.dep-status-badge.ds-edit   { background: rgba(168,85,247,0.18); color: #c084fc; }
.dep-status-badge.ds-ready  { background: rgba(34,211,238,0.18); color: #22d3ee; }
.dep-status-badge.ds-sched  { background: rgba(59,130,246,0.18); color: #60a5fa; }
.dep-status-badge.ds-posted { background: rgba(34,197,94,0.18); color: #4ade80; }

.dep-post-topic { margin: 0; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.35; }

.dep-post-fields {
  display: grid; gap: 8px;
  grid-template-columns: 1fr 1fr;
}
.dep-field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.dep-field-wide { grid-column: 1 / -1; }
.dep-field > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-muted, #8b90a0); text-transform: uppercase;
}
.dep-field > span .fas { color: var(--primary, #7c5cff); margin-right: 4px; font-size: 9.5px; }
.dep-field input, .dep-field select {
  background: var(--bg-input, rgba(0,0,0,0.25));
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  border-radius: 7px; padding: 6px 10px; font-size: 13px;
  color: #fff; font-family: inherit; outline: none;
  transition: border-color .12s;
}
.dep-field input:focus, .dep-field select:focus { border-color: var(--primary, #7c5cff); }

.dep-post-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-light, rgba(255,255,255,0.06)); }
.dep-post-actions .btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }

/* ============================================================
   Tab "Dự án đang chạy" — multi-project overview (UI redesign 02/06)
   ============================================================ */
/* Hide legacy per-project content trong panel-client-view (giữ DOM để code cũ không error). */
.cv-legacy-hide { display: none !important; }

.clients-overview-wrap { padding-top: 4px; }
.clients-overview-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}
.cv-card {
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  transition: all .15s;
}
.cv-card:hover {
  border-color: var(--primary, #7c5cff);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.cv-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cv-card-titles h3 { margin: 0 0 4px; font-size: 17px; color: #fff; }
.cv-card-niche { margin: 0; font-size: 12.5px; color: var(--text-muted, #8b90a0); }

.cv-card-progress {}
.cv-progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.cv-progress-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted, #8b90a0); text-transform: uppercase; }
.cv-progress-pct { font-size: 20px; font-weight: 800; color: #fff; }
.cv-progress-bar {
  height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden;
}
.cv-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #34d399);
  transition: width .25s;
}
.cv-progress-meta { font-size: 12px; color: var(--text-secondary, #c7cad1); margin-top: 5px; }

.cv-card-stats {
  display: grid; gap: 8px;
  grid-template-columns: repeat(5, 1fr);
}
.cv-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px; background: rgba(0,0,0,0.2); border-radius: 8px;
  border: 1px solid var(--border-light, rgba(255,255,255,0.06));
}
.cv-stat-val { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; }
.cv-stat-lab { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted, #8b90a0); text-transform: uppercase; }
.cv-stat-green { color: #4ade80; }
.cv-stat-amber { color: #fbbf24; }
.cv-stat-red   { color: #f87171; }
.cv-stat-blue  { color: #60a5fa; }
.cv-stat-warn { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.06); }

.cv-card-gates {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.cv-gate {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 5px 8px; border-radius: 6px;
  background: rgba(0,0,0,0.16);
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  color: var(--text-secondary, #c7cad1);
}
.cv-gate-dot { width: 6px; height: 6px; border-radius: 50%; background: #6b7280; }
.cv-gate.cvg-done { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3); color: #4ade80; }
.cv-gate.cvg-done .cv-gate-dot { background: #4ade80; }
.cv-gate.cvg-stuck { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #fbbf24; }
.cv-gate.cvg-stuck .cv-gate-dot { background: #fbbf24; }
.cv-gate.cvg-notyet { opacity: 0.55; }

.cv-card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--border-light, rgba(255,255,255,0.08));
}
.cv-cadence { font-size: 12px; color: var(--text-muted, #8b90a0); }
.cv-cadence .fas { color: var(--primary, #7c5cff); margin-right: 4px; }
.cv-card-open { display: inline-flex; align-items: center; gap: 5px; }
.cv-card-foot-actions { display: flex; gap: 6px; align-items: center; }
.cv-card-del {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171; border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
  transition: all .12s;
}
.cv-card-del:hover { background: rgba(239,68,68,0.22); color: #fff; }

/* v10: nút xoá nhỏ trong sidebar card khách */
.sidebar-client-card {
  display: flex; align-items: center; gap: 6px;
}
.sidebar-client-info { flex: 1; min-width: 0; }
.sidebar-client-del {
  background: transparent; border: none;
  color: var(--text-muted, #8b90a0);
  font-size: 12px; padding: 5px 7px; border-radius: 5px;
  cursor: pointer; opacity: 0; transition: all .12s;
}
.sidebar-client-card:hover .sidebar-client-del { opacity: 0.7; }
.sidebar-client-del:hover { opacity: 1 !important; color: #f87171; background: rgba(239,68,68,0.12); }

/* v10: Hidden trash modal */
.trash-modal { max-width: 640px; }
.trash-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.trash-item {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px; padding: 12px 16px;
}
.trash-item-main { flex: 1; min-width: 0; }
.trash-item-main h4 { margin: 0 0 4px; font-size: 14.5px; color: #fff; }
.trash-item-meta {
  margin: 0 0 5px; font-size: 12px;
  display: flex; gap: 12px; flex-wrap: wrap;
  color: var(--text-secondary, #c7cad1);
}
.trash-meta-date { color: var(--text-muted, #8b90a0); }
.trash-meta-date .fas { color: #fbbf24; margin-right: 3px; font-size: 10px; }
.trash-item-id {
  font-size: 10.5px; opacity: 0.6;
  background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 4px;
}
.trash-item-actions { flex-shrink: 0; }
.trash-restore { display: inline-flex; align-items: center; gap: 5px; }

/* ============================================================
   Bảng Điều Khiển v10 — operational dashboard cross-project
   ============================================================ */
.dashboard-grid-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }

.dashboard-section { margin: 24px 0 18px; }
.dashboard-section-title {
  margin: 0 0 12px; font-size: 17px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 8px;
}
.dashboard-section-title .fas { color: var(--primary, #7c5cff); }

/* Alert center */
.dashboard-alerts { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 24px; }
.db-alert {
  padding: 14px 16px; border-radius: 12px;
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
}
.db-alert-danger {
  border-color: rgba(239,68,68,0.4);
  background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.02));
}
.db-alert-warn {
  border-color: rgba(245,158,11,0.4);
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.02));
}
.db-alert-ok {
  border-color: rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.06);
  padding: 12px 16px;
  font-size: 13.5px; color: var(--text-primary, #fff);
}
.db-alert-ok .fas { color: #4ade80; margin-right: 6px; }
.db-alert-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; gap: 10px;
}
.db-alert-head > span:first-child { font-size: 14px; color: #fff; }
.db-alert-danger .db-alert-head .fas { color: #f87171; margin-right: 4px; }
.db-alert-warn .db-alert-head .fas { color: #fbbf24; margin-right: 4px; }
.db-alert-cta {
  font-size: 11.5px; color: var(--text-muted, #8b90a0);
  padding: 3px 9px; border-radius: 6px;
  background: rgba(0,0,0,0.2);
}
.db-alert-list { list-style: none; margin: 0; padding: 0; }
.db-alert-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 12.5px;
  border-top: 1px dashed var(--border-light, rgba(255,255,255,0.06));
}
.db-alert-list li:first-child { border-top: none; }
.db-alert-brand {
  font-weight: 600; color: #fff;
  padding: 1px 7px; border-radius: 5px;
  background: rgba(124,92,255,0.16);
  flex-shrink: 0;
}
.db-alert-info { flex: 1; color: var(--text-secondary, #c7cad1); }
.db-alert-go {
  background: transparent; border: 1px solid var(--border-light, rgba(255,255,255,0.2));
  color: var(--primary, #7c5cff);
  font-size: 11.5px; padding: 3px 10px; border-radius: 5px; cursor: pointer;
  transition: all .12s;
}
.db-alert-go:hover { background: var(--primary, #7c5cff); color: #fff; }

/* Week calendar 7 ngày */
.dashboard-week-calendar {
  display: grid; gap: 10px;
  grid-template-columns: repeat(7, 1fr);
}
@media (max-width: 1100px) {
  .dashboard-week-calendar { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.db-day {
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 160px;
}
.db-day-today { border-color: var(--primary, #7c5cff); box-shadow: 0 0 0 1px rgba(124,92,255,0.25); }
.db-day-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.06));
  background: rgba(0,0,0,0.16);
  border-radius: 10px 10px 0 0;
}
.db-day-dow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-muted, #8b90a0); text-transform: uppercase;
}
.db-day-today .db-day-dow { color: var(--primary, #7c5cff); }
.db-day-date { font-size: 11.5px; color: var(--text-secondary, #c7cad1); }
.db-day-count {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(124,92,255,0.18); color: #c4b5fd;
}
.db-day-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto; max-height: 220px; }
.db-day-empty { text-align: center; opacity: 0.3; padding: 12px 0; font-size: 12px; }
.db-post {
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  border-radius: 7px; padding: 6px 8px;
  cursor: pointer; transition: all .12s;
  font-size: 11.5px;
}
.db-post:hover { border-color: var(--primary, #7c5cff); transform: translateY(-1px); }
.db-post-top { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-bottom: 3px; }
.db-post-channel {
  font-size: 9.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(124,92,255,0.18); color: #c4b5fd;
}
.db-post-pic {
  font-size: 10px; color: var(--text-muted, #8b90a0);
}
.db-post-pic .fas { font-size: 8px; margin-right: 2px; }
.db-post-topic { color: #fff; line-height: 1.35; margin-bottom: 3px; }
.db-post-brand { font-size: 10px; color: var(--text-muted, #8b90a0); }
.db-day-more {
  font-size: 10.5px; text-align: center;
  color: var(--text-muted, #8b90a0); opacity: 0.7;
  padding: 4px 0;
}

/* Quick-launch project strip */
.dashboard-project-strip {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.db-strip-card {
  background: var(--bg-panel, #16181f);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; transition: all .15s;
}
.db-strip-card:hover { border-color: var(--primary, #7c5cff); transform: translateY(-2px); }
.db-strip-card h4 { margin: 0; font-size: 15px; color: #fff; }
.db-strip-niche { margin: 0; font-size: 12px; color: var(--text-muted, #8b90a0); }
.db-strip-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-secondary, #c7cad1);
}
.db-strip-meta .fas { color: var(--primary, #7c5cff); margin-right: 3px; font-size: 10px; }
.db-strip-open {
  margin-top: auto; align-self: flex-end;
  display: inline-flex; align-items: center; gap: 5px;
}

/* ============================================================
   THƯ VIỆN TRI THỨC (panel-skills) — .sk-* classes
   ============================================================ */
.sk-toolbar { padding: 0 24px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.sk-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-cat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border-glass, rgba(255,255,255,.08));
  background: var(--bg-glass-panel, rgba(30,30,50,.55)); color: var(--text-secondary, #c7cad1);
  font-size: 12px; cursor: pointer; transition: all .2s;
}
.sk-cat-pill:hover { border-color: var(--pill-color, var(--primary)); color: var(--text-primary, #f0f0f5); }
.sk-cat-pill.active { background: var(--pill-color, var(--primary)); color: #fff; border-color: transparent; }
.sk-cat-count { opacity: .6; font-size: 11px; }
.sk-search-wrap {
  position: relative; max-width: 360px;
}
.sk-search-wrap .fas { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted, #888); font-size: 13px; }
.sk-search {
  width: 100%; padding: 8px 12px 8px 34px; border-radius: 8px;
  background: var(--bg-glass-input, rgba(30,30,50,.6)); border: 1px solid var(--border-glass, rgba(255,255,255,.08));
  color: var(--text-primary, #f0f0f5); font-size: 13px; outline: none; transition: border-color .2s;
}
.sk-search:focus { border-color: var(--primary, #7c5cff); }
.sk-body { padding: 0 24px 24px; }
.sk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}
.sk-card {
  padding: 16px; border-radius: 12px; cursor: pointer; transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 8px;
}
.sk-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.sk-card-head { display: flex; align-items: center; gap: 8px; }
.sk-cat-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
  background: color-mix(in srgb, var(--pill-color, var(--primary)) 20%, transparent);
  color: var(--pill-color, var(--primary));
}
.sk-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary, #f0f0f5); margin: 0; }
.sk-card-desc { font-size: 12.5px; color: var(--text-secondary, #c7cad1); line-height: 1.5; margin: 0; flex: 1; }
.sk-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sk-tag {
  padding: 2px 8px; border-radius: 8px; font-size: 11px;
  background: rgba(255,255,255,.06); color: var(--text-muted, #888);
}
.sk-detail { max-width: 900px; }
.sk-detail .sk-back { margin-bottom: 16px; }
.sk-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sk-detail-body {
  background: var(--bg-glass-panel, rgba(30,30,50,.55)); border-radius: 12px;
  padding: 24px; border: 1px solid var(--border-glass, rgba(255,255,255,.08));
  color: var(--text-primary, #f0f0f5); line-height: 1.7; font-size: 14px;
}
.sk-detail-body h1 { font-size: 22px; margin: 24px 0 12px; color: var(--primary, #7c5cff); }
.sk-detail-body h2 { font-size: 18px; margin: 20px 0 10px; color: var(--secondary, #22d3ee); }
.sk-detail-body h3 { font-size: 15px; margin: 16px 0 8px; }
.sk-detail-body code { background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.sk-detail-body pre { background: rgba(0,0,0,.3); padding: 16px; border-radius: 8px; overflow-x: auto; }
.sk-detail-body pre code { background: none; padding: 0; }
.sk-detail-body table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.sk-detail-body th, .sk-detail-body td { padding: 8px 12px; border: 1px solid var(--border-glass, rgba(255,255,255,.08)); text-align: left; font-size: 13px; }
.sk-detail-body th { background: rgba(255,255,255,.05); font-weight: 600; }
.sk-detail-body ul, .sk-detail-body ol { padding-left: 20px; }
.sk-detail-body li { margin: 4px 0; }
.sk-detail-body hr { border: none; border-top: 1px solid var(--border-glass, rgba(255,255,255,.08)); margin: 20px 0; }
.sk-loading, .sk-empty {
  text-align: center; padding: 48px 24px; color: var(--text-muted, #888);
}
.sk-empty h3 { color: var(--text-secondary, #c7cad1); margin: 12px 0 6px; }
.sk-empty p { font-size: 13px; }

/* ============================================================
   v4.10.1 — Pha 5 Triển khai · Sub-tab "Đăng FB"
   Compose form (left 2/3) + scheduled & log sidebar (right 1/3)
   ============================================================ */
.fb-pub-grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 14px; align-items: start;
}
@media (max-width: 1100px) { .fb-pub-grid { grid-template-columns: 1fr; } }

.fb-pub-compose { padding: 18px 20px 22px; }
.fb-pub-sidebar { display: flex; flex-direction: column; gap: 14px; }
.fb-pub-side-card { padding: 14px 16px; }

/* Page header — show connection */
.fb-pub-page-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(24,119,242,0.12) 0%, rgba(24,119,242,0.04) 100%);
  border: 1px solid rgba(24,119,242,0.25);
  margin-bottom: 16px;
}
.fb-pub-page-header > i.fab.fa-facebook { color: #1877f2; font-size: 26px; }
.fb-pub-page-info { flex: 1; min-width: 0; }
.fb-pub-page-name { font-weight: 700; color: #fff; font-size: 14.5px; }
.fb-pub-page-meta { color: var(--text-secondary, #c7cad1); font-size: 12px; }
.fb-pub-status-dot { width: 10px; height: 10px; border-radius: 50%; }
.fb-pub-status-dot.ok { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.6); }
.fb-pub-status-dot.warn { background: #f59e0b; }

.fb-pub-section-title {
  margin: 0 0 14px; padding: 0; font-size: 14px;
  color: var(--text-secondary, #c7cad1); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.fb-pub-section-title i { color: var(--primary, #7c5cff); }

/* Form rows */
.fb-pub-row { margin-bottom: 14px; }
.fb-pub-label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: #fff;
}
.fb-pub-hint { color: var(--text-secondary, #c7cad1); font-size: 11.5px; font-weight: 400; }
.fb-pub-input {
  width: 100%; padding: 9px 12px; font-size: 13.5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #fff;
  font-family: inherit; box-sizing: border-box;
}
.fb-pub-input:focus { outline: none; border-color: var(--primary, #7c5cff); }
.fb-pub-textarea { resize: vertical; line-height: 1.55; }
.fb-pub-meta-row {
  display: flex; justify-content: space-between; margin-top: 4px; align-items: center;
}

/* Mode tabs */
.fb-pub-mode-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-pub-mode-tab {
  padding: 7px 13px; font-size: 12.5px; cursor: pointer;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  color: var(--text-secondary, #c7cad1); transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.fb-pub-mode-tab:hover { color: #fff; border-color: rgba(124,92,255,0.4); }
.fb-pub-mode-tab.active {
  background: rgba(124,92,255,0.18);
  border-color: var(--primary, #7c5cff); color: #fff;
}

/* Photo preview */
.fb-pub-preview-img {
  margin-top: 8px; max-width: 240px; max-height: 180px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  object-fit: cover; display: block;
}

/* Schedule toggle */
.fb-pub-schedule-toggle { display: flex; gap: 14px; margin-bottom: 8px; }
.fb-pub-schedule-toggle label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer; color: #fff;
}
.fb-pub-schedule-toggle input[type=radio] { accent-color: var(--primary, #7c5cff); }
.fb-pub-dt { max-width: 280px; }

/* Actions */
.fb-pub-actions {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 18px; flex-wrap: wrap;
}
.fb-pub-result { flex: 1 1 100%; }
.fb-pub-ok {
  padding: 10px 14px; border-radius: 8px;
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35);
  color: #86efac; font-size: 13px;
}
.fb-pub-ok i { color: #22c55e; }
.fb-pub-ok-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; color: #67e8f9; text-decoration: none;
  font-weight: 600;
}
.fb-pub-ok-link:hover { text-decoration: underline; }
.fb-pub-ok-meta { margin-top: 6px; font-size: 11.5px; color: var(--text-secondary, #c7cad1); }
.fb-pub-ok-meta code { background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 4px; font-size: 11px; }

.fb-pub-err {
  padding: 10px 14px; border-radius: 8px;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.35);
  color: #fca5a5; font-size: 13px;
}
.fb-pub-err i { color: #ef4444; margin-right: 4px; }
.fb-pub-err p { margin: 8px 0; font-size: 12.5px; color: var(--text-secondary, #c7cad1); }

/* Sidebar — scheduled + log */
.fb-pub-side-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.fb-pub-side-head h3 {
  margin: 0; font-size: 13.5px; font-weight: 600; color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
}
.fb-pub-side-head h3 i { color: var(--primary, #7c5cff); font-size: 13px; }

.fb-pub-loading, .fb-pub-empty {
  padding: 16px 12px; text-align: center;
  color: var(--text-secondary, #c7cad1); font-size: 12.5px;
}
.fb-pub-empty i { display: block; font-size: 24px; margin-bottom: 8px; opacity: 0.5; }

.fb-pub-sched-item {
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  margin-bottom: 8px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px;
  align-items: center;
}
.fb-pub-sched-when {
  grid-column: 1 / 2; font-size: 12px; font-weight: 600;
  color: var(--secondary, #22d3ee);
}
.fb-pub-sched-preview {
  grid-column: 1 / -1; font-size: 12.5px;
  color: var(--text-primary, #e9ebf0); line-height: 1.4;
}
.fb-pub-sched-cancel {
  grid-column: 2 / 3; grid-row: 1 / 2;
  font-size: 11px; padding: 4px 9px;
}

.fb-pub-log-item {
  padding: 8px 12px; border-radius: 8px;
  border-left: 3px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
  margin-bottom: 6px;
}
.fb-pub-log-item.ok { border-left-color: #22c55e; }
.fb-pub-log-item.err { border-left-color: #ef4444; }
.fb-pub-log-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: #fff;
}
.fb-pub-log-item.err .fb-pub-log-head { color: #fca5a5; }
.fb-pub-log-when {
  margin-left: auto; font-size: 11px; font-weight: 400;
  color: var(--text-secondary, #c7cad1);
}
.fb-pub-log-prev {
  font-size: 11.5px; color: var(--text-secondary, #c7cad1);
  margin-top: 4px; line-height: 1.4;
}
.fb-pub-log-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; font-size: 11px; color: #67e8f9;
  text-decoration: none; font-weight: 600;
}
.fb-pub-log-link:hover { text-decoration: underline; }

/* Badge on the "Đăng FB" sub-tab when có scheduled posts */
.dep-tab-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px;
  background: rgba(255,255,255,0.2); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  margin-left: 4px;
}
.dep-tab-badge:empty { display: none; }
.deploy-tab.active .dep-tab-badge { background: rgba(0,0,0,0.25); }