/* BICA Dashboard Kết quả Kinh doanh — Executive design v2
   Light theme, Facebook blue scale, gold section-underline
*/

:root {
  /* Primary scale (Facebook blue) */
  --blue-50:  #eff5ff;
  --blue-100: #dbe8fe;
  --blue-200: #b4cffd;
  --blue-300: #8baefb;
  --blue-400: #5d8df7;
  --blue-500: #3674f3;
  --blue-600: #1877f2;        /* PRIMARY */
  --blue-700: #155fc8;
  --blue-800: #154a9c;
  --blue-900: #143e7e;

  --primary: var(--blue-600);
  --primary-dark: var(--blue-700);
  --primary-deep: var(--blue-900);
  --primary-soft: rgba(24, 119, 242, 0.08);
  --primary-soft-2: rgba(24, 119, 242, 0.14);

  /* 1 màu nhấn warm — cam ấm bổ sung xanh (complementary) */
  --accent: #ea7c3f;
  --accent-soft: rgba(234, 124, 63, 0.1);
  --accent-strong: #c25f24;

  /* Surfaces */
  --bg: #ffffff;
  --bg-alt: #f5f7fb;          /* page bg dịu hơn */
  --bg-soft: #eef2f8;
  --bg-elevate: #ffffff;

  /* Text — slate scale */
  --text: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;
  --text-4: #94a3b8;
  --text-5: #cbd5e1;

  /* Borders */
  --border: #e5e9f0;
  --border-strong: #cdd5e0;

  /* Status — muted tones (không neon) */
  --success: #16a34a;
  --success-soft: #dcfce7;
  --success-strong: #15803d;
  --warning: #d97706;
  --warning-soft: #fef3c7;
  --warning-strong: #92400e;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --danger-strong: #991b1b;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .05);
  --shadow: 0 4px 14px rgba(15, 23, 42, .06);

  /* Radius */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 10px;
  --r-xl: 14px;

  --transition: all .18s cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body {
  background: var(--bg-alt); color: var(--text); line-height: 1.5; font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';   /* Inter alt-styles */
}
.num, [class*="-val"], [class*="-num"], .kpi-value, td.num,
.board-rank-val, .funnel-val, .gauge-val { font-variant-numeric: tabular-nums; }
code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.92em; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--bg-alt); }

a { color: var(--primary); text-decoration: none; }

.app { display: flex; min-height: 100vh; }

/* ===================================================== */
/* ============== SIDEBAR ============================== */
/* ===================================================== */
.sidebar {
  width: 230px; background: var(--bg); border-right: 1px solid var(--border);
  padding: 18px 14px 16px; display: flex; flex-direction: column;
  position: fixed; height: 100vh; z-index: 20;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; }
.brand-box {
  width: 38px; height: 38px; border-radius: 8px;
  background: linear-gradient(135deg, #0d2347, #1a3461);
  color: #fff; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -.5px;
}
.brand-text strong { display: block; font-weight: 800; font-size: 16px; color: var(--text); line-height: 1.15; letter-spacing: -.02em; }
.brand-text small { display: block; font-size: 10px; color: var(--text-4); font-weight: 600; letter-spacing: .08em; margin-top: 2px; }

.nav { flex: 1; overflow-y: auto; padding-top: 4px; }
.nav-group { margin-bottom: 18px; }
.nav-group-label {
  font-size: 10px; color: var(--text-4); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 0 10px 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  color: var(--text-3); font-size: 13.5px; font-weight: 500;
  transition: var(--transition); position: relative;
  margin-bottom: 1px;
}
.nav-item i { width: 18px; text-align: center; font-size: 14px; color: var(--text-4); }
.nav-item:hover { background: var(--bg-soft); color: var(--text); }
.nav-item:hover i { color: var(--text-2); }
.nav-item.active {
  background: var(--primary-soft); color: var(--primary); font-weight: 600;
}
.nav-item.active i { color: var(--primary); }
.nav-item.active::before {
  content: ''; position: absolute; left: -14px; top: 7px; bottom: 7px;
  width: 3px; background: var(--primary); border-radius: 0 3px 3px 0;
}
.nav-item-sm { padding: 6px 10px; font-size: 12.5px; }
.nav-item.muted { color: var(--text-4); cursor: default; opacity: .55; }
.nav-item.muted:hover { background: transparent; }
.nav-flag { font-size: 16px; line-height: 1; width: 18px; text-align: center; }
.nav-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge {
  font-size: 10.5px; font-weight: 600;
  color: var(--text-3); background: var(--bg-soft);
  padding: 2px 7px; border-radius: 999px; min-width: 22px; text-align: center;
}
.nav-item.active .nav-badge { background: var(--primary); color: #fff; }
.nav-badge.muted { background: transparent; color: var(--text-4); }
.nav-group-label { display: flex; align-items: center; gap: 6px; }
.nav-group-label i { font-size: 11px; color: var(--text-3); }

/* Nested market → projects */
.nav-market { margin-bottom: 2px; }
.nav-item-toggle { cursor: pointer; }
.nav-chev {
  margin-left: 4px; font-size: 10px; color: var(--text-4);
  transition: transform .18s ease; padding: 4px 6px; border-radius: 5px;
}
.nav-chev:hover { background: var(--bg-soft); color: var(--primary); }
.nav-market.expanded .nav-chev { transform: rotate(180deg); }
.nav-children {
  max-height: 0; overflow: hidden; transition: max-height .25s ease;
  margin-left: 14px; border-left: 1.5px solid var(--border); padding-left: 8px;
}
.nav-market.expanded .nav-children { max-height: 600px; margin-top: 2px; padding-top: 2px; }
.nav-child { font-size: 12.5px; padding: 6px 8px; }
.nav-child i { font-size: 12px; }

.nav-footer-info {
  margin: 14px 10px 6px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-3); line-height: 1.55;
}

.brand-footer {
  padding: 10px 6px 4px; border-top: 1px solid var(--border);
  font-size: 10px; color: var(--text-4); margin-top: 8px;
}

/* ===================================================== */
/* ============== MAIN AREA ============================ */
/* ===================================================== */
.main { flex: 1; margin-left: 230px; padding: 22px 32px 40px; min-width: 0; }

/* HEADER */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px; gap: 16px;
}
.page-title h1 {
  font-size: 20px; font-weight: 700; color: var(--text);
  letter-spacing: -.01em; line-height: 1.25;
}
.page-subtitle {
  font-size: 12.5px; color: var(--text-3); margin-top: 4px;
}
.page-actions { display: flex; gap: 8px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-3); cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }

/* ===================================================== */
/* ============== TOOLBAR (sticky) ====================== */
/* ===================================================== */
/* Team grid — sub-teams inside project view */
.team-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-bottom: 22px;
}
@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; }
}
.team-card {
  display: block; padding: 14px 16px; border-radius: 11px;
  background: #fff; border: 1px solid var(--border);
  text-decoration: none; color: var(--text);
  transition: var(--transition);
}
.team-card:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(24,119,242,.08); transform: translateY(-1px); }
.team-card.empty { opacity: .5; cursor: default; }
.team-card.empty:hover { transform: none; box-shadow: none; border-color: var(--border); }
.team-card-head {
  display: flex; gap: 10px; align-items: center;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.team-card-head .team-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.team-name { font-weight: 700; font-size: 14px; color: var(--text); }
.team-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.team-card-metrics {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; font-size: 11px;
}
.team-card-metrics > div {
  display: grid; grid-template-rows: 28px auto; gap: 4px;
  align-items: end;
}
.team-card-metrics .lbl {
  color: var(--text-3); font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.25; align-self: start;
}
.team-card-metrics .val {
  font-weight: 700; font-size: 13.5px; color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.team-card-metrics .val.positive { color: #16a34a; }
.team-card-metrics .val.amber { color: #d97706; }
.team-card-metrics .val.negative { color: #ef4444; }
.empty-state {
  padding: 18px 22px; background: var(--bg-soft); border-radius: 9px;
  color: var(--text-3); font-size: 13px; text-align: center;
}

/* Modal — click KPI Chi phí test */
.modal-bg {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .42); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; animation: fadeIn .2s ease;
}
.modal-box {
  background: #fff; border-radius: 14px;
  max-width: 920px; width: 100%; max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}
.modal-box.modal-box-wide { max-width: 920px; }
.modal-box.modal-box-wide.cols-7  { max-width: 1080px; }
.modal-box.modal-box-wide.cols-6  { max-width: 940px; }
.modal-box.modal-box-wide.cols-5  { max-width: 820px; }
.modal-box.modal-box-wide.cols-4  { max-width: 700px; }
.mkt-rank-table tr.row-total {
  border-top: 2px solid var(--border); background: var(--bg-soft); font-weight: 700;
}
.mkt-rank-table tr.row-total td { padding-top: 10px; padding-bottom: 10px; }
.mkt-rank-table td.muted-col { color: var(--text-3); }
.mkt-rank-table th.muted-col { color: var(--text-3); }
@media (max-width: 1280px) {
  .modal-box.modal-box-wide { max-width: 96vw; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.modal-head h3 i { color: var(--primary); margin-right: 6px; }
.modal-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text-2); font-size: 14px; cursor: pointer; transition: var(--transition);
}
.modal-close:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.modal-body { padding: 18px 22px; overflow: auto; }
.modal-body h4 { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; }

/* Product performance modal — click row product → so sánh ai chạy SP này */
.modal-help { padding: 0 22px; margin: -4px 0 12px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.prod-perf-summary {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; margin: 0 22px 12px;
}
.prod-perf-summary > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prod-perf-summary .lbl { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }
.prod-perf-summary strong { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.prod-perf-summary strong.positive { color: #16a34a; }
.prod-perf-summary strong.amber { color: #d97706; }
.prod-perf-summary strong.negative { color: #ef4444; }

.prod-perf-insight { padding: 0 22px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.ppi-row { padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.ppi-row.good { background: #f0fdf4; border-left: 3px solid #16a34a; }
.ppi-row.bad { background: #fef2f2; border-left: 3px solid #ef4444; }

.prod-perf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: auto; }
.prod-perf-table thead { background: var(--bg-soft); position: sticky; top: 0; z-index: 1; }
.prod-perf-table th {
  padding: 10px 10px; text-align: left; font-size: 11px; font-weight: 700;
  color: var(--text-2); text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 2px solid var(--border);
  white-space: nowrap; vertical-align: middle;
}
.prod-perf-table th.num { text-align: right; }
.prod-perf-table td {
  padding: 9px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle;
  white-space: nowrap;
}
.prod-perf-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.prod-perf-table td.num-cell, .prod-perf-table td.emp-cell, .prod-perf-table td.prod-perf-accs { vertical-align: middle; }
.prod-perf-table tbody tr.row-group-first td { border-top: 2px solid var(--border); }
.prod-perf-table tbody tr.row-group-first:first-child td { border-top: none; }
.prod-perf-table tbody tr:hover td { background: rgba(24,119,242,0.04); }
.prod-perf-table .positive { color: #16a34a; font-weight: 600; }
.prod-perf-table .amber { color: #d97706; font-weight: 600; }
.prod-perf-table .negative { color: #ef4444; font-weight: 600; }
.prod-perf-accs code { font-size: 10.5px; padding: 1px 5px; background: var(--bg-soft); border-radius: 3px; margin-right: 3px; display: inline-block; margin-bottom: 2px; }

.fmt-chip { display: inline-block; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; font-weight: 600; margin-right: 3px; }
.fmt-chip.cd { background: rgba(24,119,242,0.12); color: #1877f2; }
.fmt-chip.ib { background: rgba(234,124,63,0.12); color: #ea7c3f; }

/* Hover + cursor cho product row clickable */
tr.product-row-clickable { cursor: pointer; }
tr.product-row-clickable:hover { background: linear-gradient(90deg, rgba(24,119,242,0.04), transparent); }
.cpl-modal-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
}
.cpl-modal-summary > div { display: flex; flex-direction: column; gap: 4px; }
.cpl-modal-summary .lbl { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }
.cpl-modal-summary .val { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* Highlight cột tương ứng với metric trong modal generic */
.mkt-rank-table th.col-highlight, .mkt-rank-table td.col-highlight {
  background: rgba(24, 119, 242, .07);
  box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary);
}
.mkt-rank-table th.col-highlight { background: rgba(24, 119, 242, .14); color: var(--primary); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.mkt-kpi-card.kpi-test { border-left: 3px solid #ea7c3f; transition: var(--transition); }
.mkt-kpi-card.kpi-test:hover { background: rgba(234, 124, 63, .04); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(234, 124, 63, .12); }
.mkt-kpi-card.kpi-test .kpi-label i { color: #ea7c3f; margin-right: 4px; }

/* Floating Sync FAB — góc dưới trái, always visible */
.sync-fab {
  position: fixed; left: 22px; bottom: 22px; z-index: 100;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--primary); color: #fff;
  border: none; box-shadow: 0 8px 24px rgba(24,119,242,.32);
  font-family: inherit; cursor: pointer; transition: all .2s ease;
}
.sync-fab:hover { background: var(--primary-deep); box-shadow: 0 10px 30px rgba(24,119,242,.42); transform: translateY(-1px); }
.sync-fab:disabled { cursor: wait; opacity: .9; }
.sync-fab i { font-size: 16px; }
.sync-fab-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.sync-fab-label { font-size: 13px; font-weight: 700; }
.sync-fab-time { font-size: 10.5px; font-weight: 500; opacity: .9; }
.sync-fab.spinning i { animation: spin 1.1s linear infinite; }
.sync-fab.stale-mild { background: #f59e0b; box-shadow: 0 8px 24px rgba(245,158,11,.32); }
.sync-fab.stale-mild:hover { background: #d97706; }
.sync-fab.stale-bad { background: #ef4444; box-shadow: 0 8px 24px rgba(239,68,68,.4); animation: pulse-bad 2s infinite; }
.sync-fab.stale-bad:hover { background: #dc2626; }
@keyframes pulse-bad { 50% { box-shadow: 0 0 0 10px rgba(239,68,68,.16), 0 8px 24px rgba(239,68,68,.4); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast nhỏ ở góc dưới phải */
.toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  background: #1e293b; color: #fff; padding: 12px 16px; border-radius: 9px;
  font-size: 13px; font-weight: 500; max-width: 340px;
  box-shadow: 0 12px 28px rgba(15,23,42,.18);
  display: flex; gap: 10px; align-items: center;
  transform: translateY(20px); opacity: 0; transition: all .25s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: #16a34a; }
.toast.error { background: #ef4444; }
.toast i { font-size: 16px; }

/* Breadcrumb inline — gộp chung 1 row toolbar */
.breadcrumb-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500;
}
.breadcrumb-inline .breadcrumb-home {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--primary); color: #fff;
  text-decoration: none; font-size: 13px;
  transition: var(--transition);
}
.breadcrumb-inline .breadcrumb-home:hover { background: var(--primary-deep); }
.breadcrumb-inline .breadcrumb-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border);
  color: var(--text-2); font-family: inherit; font-size: 12px;
  cursor: pointer; transition: var(--transition);
}
.breadcrumb-inline .breadcrumb-back:hover { background: var(--bg-soft); color: var(--primary); border-color: var(--primary); }
.toolbar-row-main {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.breadcrumb-home {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--primary); color: #fff;
  text-decoration: none; transition: var(--transition);
}
.breadcrumb-home:hover { background: var(--primary-deep); }
.breadcrumb-sep { color: var(--text-4); font-size: 10px; }
.breadcrumb-trail {
  display: inline-flex; align-items: center; gap: 10px;
  flex: 1; color: var(--text-2);
}
.breadcrumb-trail a {
  color: var(--text-2); text-decoration: none;
  padding: 4px 8px; border-radius: 6px; transition: var(--transition);
}
.breadcrumb-trail a:hover { background: rgba(24,119,242,.08); color: var(--primary); }
.breadcrumb-trail .sep { color: var(--text-4); font-size: 10px; }
.breadcrumb-trail span:last-child { color: var(--text); font-weight: 600; }
.breadcrumb-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border);
  color: var(--text-2); font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: var(--transition);
}
.breadcrumb-back:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.toolbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(244, 245, 249, .82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  margin: -10px -32px 24px; padding: 10px 32px;
  display: flex; flex-direction: column; gap: 8px;
  border-bottom: 1px solid transparent;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.toolbar.scrolled {
  background: rgba(255, 255, 255, .88);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
}
.toolbar-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-height: 32px;
}
.toolbar-divider {
  width: 1px; height: 18px; background: var(--border); margin: 0 4px;
}

/* Preset chips — nhỏ + nhã */
.preset-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.preset-chip {
  padding: 5px 12px; border-radius: 7px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-3); font-size: 12.5px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: var(--transition);
  white-space: nowrap;
}
.preset-chip:hover { color: var(--primary); background: var(--primary-soft); }
.preset-chip.active {
  background: var(--bg); color: var(--primary);
  border-color: var(--border); font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* Date range pill — kiểu booking */
.date-range-input {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 7px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-3); font-size: 12.5px; box-shadow: var(--shadow-xs);
  transition: var(--transition);
}
.date-range-input:hover, .date-range-input:focus-within { border-color: var(--primary); }
.date-range-input > i { color: var(--text-4); font-size: 11px; }
.date-range-input input {
  background: transparent; border: none; outline: none; font-family: inherit;
  color: var(--text); font-size: 12.5px; font-weight: 600;
  width: 86px; text-align: center; cursor: pointer;
}
.date-range-input input::placeholder { color: var(--text-4); font-weight: 400; }
.sep-arrow { color: var(--text-4); font-size: 10px !important; }

/* Flatpickr — tinh chỉnh airbnb theme cho phù hợp BICA */
.flatpickr-calendar.airbnb {
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, .15) !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  font-size: 13px;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
  background: var(--primary-soft) !important;
  border-color: var(--primary-soft) !important;
  box-shadow: none !important;
  color: var(--primary) !important;
}
.flatpickr-day:hover { background: var(--bg-soft) !important; }
.flatpickr-day.today {
  border-color: var(--primary) !important;
  color: var(--primary);
}
.flatpickr-day.today.selected {
  background: var(--primary) !important;
  color: #fff !important;
}
.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-weekday {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.flatpickr-monthDropdown-months {
  background: transparent !important;
}

/* Market chips — compact với cờ quốc gia */
.market-chips { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.market-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-2); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: var(--transition);
  box-shadow: var(--shadow-xs);
}
.market-chip:hover { border-color: var(--primary); color: var(--primary); }
.market-chip.active {
  background: var(--primary-soft); border-color: var(--primary); color: var(--primary);
}
.market-chip .chip-flag {
  font-size: 14px; line-height: 1;
  filter: saturate(1.05);
}
.market-chip .chip-code {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 18px; border-radius: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: -.02em;
  background: var(--text-2); color: #fff; margin-left: 2px;
}
.market-chip.active .chip-code { background: var(--primary); }
.market-chip.inactive { opacity: .5; background: transparent; box-shadow: none; }
.market-chip.inactive .chip-code { background: var(--text-4); }

/* Project dropdown */
.project-dropdown {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 5px 11px; border-radius: 7px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-2); font-size: 12.5px; font-weight: 500;
  cursor: pointer; box-shadow: var(--shadow-xs); transition: var(--transition);
}
.project-dropdown:hover { border-color: var(--primary); color: var(--primary); }
.project-dropdown > i:first-child { color: var(--text-4); font-size: 11px; }
.project-dropdown > i:last-child { color: var(--text-4); font-size: 9px; margin-left: 2px; }
.project-dropdown #project-count { font-weight: 700; color: var(--primary); }

/* ===================================================== */
/* ============== SECTION TITLE w/ underline =========== */
/* ===================================================== */
.section-title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px; position: relative;
}
.section-title > i { color: var(--primary); font-size: 15px; }
.section-title .section-text {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-2);
}
.section-title .section-underline {
  flex: 1; height: 2px; margin-left: 4px;
  background: linear-gradient(90deg, var(--gold), rgba(245, 180, 0, 0));
}
/* Title inline cho cards nhỏ */
.section-title-inline {
  font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 14px;
  display: flex; justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap;
}
.section-title-inline i { color: var(--primary); margin-right: 6px; }

/* ===================================================== */
/* ============== KPI CARDS (executive style) ========== */
/* ===================================================== */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.kpi-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--shadow-xs);
  transition: var(--transition); position: relative;
}
.kpi-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }

.kpi-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px;
}
.kpi-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .07em;
}
.kpi-label .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, var(--primary));
  box-shadow: 0 0 0 3px rgba(24, 119, 242, .12);
}
.kpi-icon {
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--accent-soft, var(--primary-soft));
  color: var(--accent, var(--primary));
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

.kpi-value {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.kpi-value .num {
  font-size: 30px; font-weight: 700; color: var(--accent, var(--text));
  line-height: 1; letter-spacing: -.02em;
}
.kpi-value .unit {
  font-size: 13px; color: var(--text-3); font-weight: 500;
}
.kpi-value .unit small { color: var(--text-4); font-size: 10px; font-weight: 600; letter-spacing: .05em; }

.kpi-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px;
}
.kpi-meta .delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 700; font-size: 12px;
}
.kpi-meta .delta.up { color: var(--success); }
.kpi-meta .delta.down { color: var(--danger); }
.kpi-meta .delta.flat { color: var(--text-4); }
.kpi-meta .sep { color: var(--text-4); }
.kpi-meta .status-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.kpi-meta .status-chip.amber {
  background: #fef3c7; color: #92400e;
}
.kpi-meta .status-chip.green {
  background: #dcfce7; color: #166534;
}
.kpi-meta .status-chip.red {
  background: #fee2e2; color: #991b1b;
}

/* KPI color variants — define accent + accent-soft */
/* ===================================================== */
/* ============== KPI HERO (3 lớn) + STRIP (6 mini) ==== */
/* ===================================================== */

/* HERO — 3 card lớn ngang nhau */
.kpi-hero-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 10px;
}
@media (max-width: 900px) { .kpi-hero-grid { grid-template-columns: 1fr; } }

.kpi-hero {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 22px 12px; box-shadow: var(--shadow-xs); position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 110px; gap: 14px; align-items: stretch;
}
.kpi-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--primary);
}
.kpi-hero[data-pos="cost"]::before { background: var(--accent); }

.kpi-hero-main {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0;
}
.kpi-hero-label {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.kpi-hero-value {
  font-size: 36px; font-weight: 800; color: var(--text); line-height: 1.05;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
}
.kpi-hero-value .unit { font-size: 14px; color: var(--text-3); font-weight: 600; }
.kpi-hero-value .unit small { font-size: 10px; color: var(--text-4); margin-left: 3px; letter-spacing: .05em; }
.kpi-hero-meta {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  flex-wrap: wrap;
}
.kpi-hero-delta { font-weight: 700; }
.kpi-hero-delta.up { color: var(--success-strong); }
.kpi-hero-delta.down { color: var(--danger-strong); }
.kpi-hero-delta.flat { color: var(--text-4); }
.kpi-hero-status {
  font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 600;
}
.kpi-hero-status.green { background: var(--success-soft); color: var(--success-strong); }
.kpi-hero-status.amber { background: var(--warning-soft); color: var(--warning-strong); }
.kpi-hero-status.red   { background: var(--danger-soft);  color: var(--danger-strong); }

.kpi-hero-spark {
  position: relative; width: 100%; height: 64px; align-self: end;
}
.kpi-hero-spark canvas { width: 100% !important; height: 100% !important; }

/* STRIP — 6 mini chip 1 row */
.kpi-strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-bottom: 22px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 4px; box-shadow: var(--shadow-xs);
}
@media (max-width: 1100px) { .kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }

.kpi-mini {
  padding: 10px 12px; border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 3px;
  position: relative; transition: var(--transition);
}
.kpi-mini:hover { background: var(--bg-soft); }
.kpi-mini + .kpi-mini::before {
  content: ''; position: absolute; left: -4px; top: 8px; bottom: 8px;
  width: 1px; background: var(--border);
}
.kpi-mini-label {
  font-size: 10px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.kpi-mini-value {
  font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
  display: flex; align-items: baseline; gap: 3px;
}
.kpi-mini-value .unit { font-size: 11px; color: var(--text-3); font-weight: 600; }
.kpi-mini-delta {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 3px;
}
.kpi-mini-delta.up { color: var(--success); }
.kpi-mini-delta.down { color: var(--danger); }
.kpi-mini-delta .status-dot {
  width: 6px; height: 6px; border-radius: 50%; margin-left: 4px;
}
.kpi-mini-delta .status-dot.green { background: var(--success); }
.kpi-mini-delta .status-dot.amber { background: var(--warning); }
.kpi-mini-delta .status-dot.red   { background: var(--danger); }

/* KPI 3 tier — tone đồng nhất xanh, phân nhóm bằng intensity */
.kpi-card[data-tier="money"]   { --accent: var(--blue-700); --accent-soft: var(--blue-50); }
.kpi-card[data-tier="effic"]   { --accent: var(--blue-600); --accent-soft: var(--blue-50); }
.kpi-card[data-tier="orders"]  { --accent: var(--text-3);   --accent-soft: var(--bg-soft); }
/* Backward compat — legacy data-color giờ trỏ về tier mặc định */
.kpi-card[data-color]           { --accent: var(--blue-600); --accent-soft: var(--blue-50); }

/* ===================================================== */
/* ============== MARKET SUMMARY CARDS ================= */
/* ===================================================== */
.market-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.market-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 18px 14px; position: relative; box-shadow: var(--shadow-xs);
  transition: var(--transition); display: block; color: inherit;
}
.market-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, var(--primary)); border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.market-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); transform: translateY(-1px); }

.market-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  flex-wrap: wrap;
}
.market-flag { font-size: 22px; line-height: 1; }
.market-code {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  background: var(--text); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .04em;
}
.market-head strong { font-size: 16px; font-weight: 700; color: var(--text); }
.market-head small { color: var(--text-4); font-size: 11px; font-weight: 600; }
.market-projects {
  margin-left: auto; font-size: 11px; color: var(--text-3); font-weight: 500;
  background: var(--bg-soft); padding: 3px 10px; border-radius: 999px;
}

.market-metrics { display: flex; flex-direction: column; gap: 6px; }
.market-metric {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
}
.market-metric .lbl { color: var(--text-3); }
.market-metric .val {
  font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}
.market-metric.empty .val { color: var(--text-4); }

/* ===================================================== */
/* ============== PHÂN TÍCH TRỰC QUAN (Cấp 0) ========== */
/* ===================================================== */

/* Chart tabs (overview + market dùng chung) */
.chart-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.chart-tab {
  padding: 8px 14px; background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-3);
  border-bottom: 2px solid transparent; transition: var(--transition); margin-bottom: -1px;
}
.chart-tab:hover { color: var(--text); }
.chart-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }

/* Row "Visual at-a-glance" — gauge group + heatmap (above the fold) */
.board-row-glance {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin: 20px 0;
}
@media (max-width: 1100px) { .board-row-glance { grid-template-columns: 1fr; } }

/* Gauge row — 3 gauge inline trong 1 card */
.gauge-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px;
}
.gauge-card {
  padding: 10px 8px; border-radius: var(--r); background: var(--bg-alt);
  border: 1px solid var(--border);
}
.gauge-card[data-color]           { --gc: var(--blue-600); }
/* Khi value qua threshold, JS sẽ override --gc inline */

.gauge-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
  gap: 6px;
}
.gauge-title {
  font-size: 10.5px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .07em;
}
.gauge-target {
  font-size: 10px; color: var(--text-3); background: var(--bg);
  padding: 2px 7px; border-radius: 999px; font-weight: 600;
  border: 1px solid var(--border); white-space: nowrap;
}
.gauge-wrap {
  position: relative; width: 100%; height: 110px;
  display: flex; align-items: flex-end; justify-content: center;
}
.gauge-wrap canvas { max-width: 100%; max-height: 110px; }
.gauge-center {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center;
}
.gauge-val {
  font-size: 22px; font-weight: 800; color: var(--gc); line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.gauge-sub {
  font-size: 10px; color: var(--text-3); font-weight: 600; margin-top: 2px;
}
.gauge-scale {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 9.5px; color: var(--text-4); font-variant-numeric: tabular-nums;
}

/* Share control bar — tabs chọn dimension cho 3 donut */
.share-control-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.share-control-label {
  font-size: 11px; color: var(--text-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.share-tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: var(--shadow-xs);
}
.share-tab {
  padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  cursor: pointer; transition: var(--transition);
  background: transparent; border: none; font-family: inherit;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.share-tab i { font-size: 11px; }
.share-tab:hover { color: var(--text); }
.share-tab.active {
  background: var(--primary); color: var(--text-on-primary, #fff);
}
.share-tab.active i { color: #fff; }

/* Insight box — strip cảnh báo tự động dưới 3 donut */
.insight-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 18px; margin-bottom: 22px;
}
.insight-head {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em;
  display: flex; align-items: center; gap: 7px; margin-bottom: 12px;
}
.insight-head i { color: var(--accent); font-size: 13px; }
.insight-head #insight-dim-label { color: var(--primary); font-weight: 700; }
.insight-list { display: flex; flex-direction: column; gap: 8px; }
.insight-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; border-radius: var(--r);
  font-size: 13px; color: var(--text); line-height: 1.5;
  background: var(--bg-alt); border-left: 3px solid var(--text-4);
}
.insight-item.warn { background: var(--warning-soft); border-left-color: var(--warning); }
.insight-item.good { background: var(--success-soft); border-left-color: var(--success); }
.insight-item.info { background: var(--primary-soft); border-left-color: var(--primary); }
.insight-item > i { font-size: 14px; padding-top: 2px; flex-shrink: 0; color: var(--text-4); }
.insight-item.warn > i { color: var(--warning-strong); }
.insight-item.good > i { color: var(--success-strong); }
.insight-item.info > i { color: var(--primary); }
.insight-item b { color: var(--text); font-weight: 800; }
.insight-item strong { color: var(--text); font-weight: 700; }
.insight-item .flag { font-size: 14px; }

/* Donut grid — chuẩn 3 donut/hàng */
.donut-grid, .donut-grid.donut-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 14px;
}
@media (max-width: 1100px) {
  .donut-grid, .donut-grid.donut-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px)  {
  .donut-grid, .donut-grid.donut-grid-3 { grid-template-columns: 1fr; }
}

.donut-card {
  padding: 16px 18px 14px; display: flex; flex-direction: column;
}
.donut-head {
  display: flex; flex-direction: column; gap: 5px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.donut-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px; letter-spacing: -.005em;
  line-height: 1.2;
}
.donut-title i {
  color: var(--primary); font-size: 12px;
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--primary-soft);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.donut-top { font-size: 11px; color: var(--text-3); font-weight: 500; padding-left: 32px; }
.donut-top strong { color: var(--text); font-weight: 700; }

.donut-body {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  flex: 1;
}

.donut-wrap {
  position: relative; width: 160px; height: 160px;
}
.donut-wrap canvas { max-width: 100% !important; max-height: 100% !important; }
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center;
}
.donut-center .donut-total {
  font-size: 22px; font-weight: 800; color: var(--text); line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.donut-center .donut-total .unit {
  font-size: 11px; color: var(--text-3); font-weight: 600; margin-left: 3px;
  letter-spacing: 0;
}
.donut-center .donut-sub {
  font-size: 9.5px; color: var(--text-4); margin-top: 5px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}

.donut-legend {
  width: 100%; display: flex; flex-direction: column; gap: 1px;
  font-size: 12px;
}
.donut-legend-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  padding: 5px 0; border-bottom: 1px dashed var(--border);
}
.donut-legend-row:last-child { border-bottom: none; }
.donut-legend-row .lg-dot {
  width: 10px; height: 10px; border-radius: 3px;
}
.donut-legend-row .lg-name {
  color: var(--text-2); font-weight: 600; display: flex; gap: 5px; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px;
}
.donut-legend-row .lg-name .flag { font-size: 14px; }
.donut-legend-row .lg-val {
  display: inline-block;
  text-align: right; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; font-size: 12px;
  white-space: nowrap;
}
.donut-legend-row .lg-pct {
  text-align: right; color: var(--primary); font-weight: 800;
  font-variant-numeric: tabular-nums; font-size: 12px;
  min-width: 40px;
  background: var(--primary-soft); padding: 1px 7px; border-radius: 999px;
}

/* Row "Trend + Funnel" */
.board-row-trend {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 20px;
}
@media (max-width: 1100px) { .board-row-trend { grid-template-columns: 1fr; } }

/* Market × KPI heatmap */
.market-heatmap {
  display: grid; gap: 4px; margin-top: 8px; overflow-x: auto;
}
.hm-cell-mkt {
  padding: 8px 6px; border-radius: 6px; text-align: center;
  font-size: 12px; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 44px; justify-content: center;
}
.hm-cell-mkt .hm-val { font-weight: 800; font-size: 13px; }
.hm-cell-mkt .hm-lbl { font-size: 9.5px; opacity: .85; }
.hm-cell-mkt.hm-head {
  background: transparent; color: var(--text-3); font-weight: 700;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  min-height: auto; padding: 4px;
}
.hm-cell-mkt.hm-rowhead {
  background: transparent; color: var(--text); font-weight: 700;
  text-align: left; padding: 8px 4px 8px 8px;
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  justify-content: flex-start;
}
.hm-cell-mkt.hm-rowhead .hm-flag { font-size: 16px; }
.hm-cell-mkt.lvl-good { background: #dcfce7; color: #15803d; }
.hm-cell-mkt.lvl-mid  { background: #fef3c7; color: #92400e; }
.hm-cell-mkt.lvl-bad  { background: #fee2e2; color: #991b1b; }
.hm-cell-mkt.lvl-empty { background: var(--bg-alt); color: var(--text-4); }

/* Order funnel */
.order-funnel {
  display: flex; flex-direction: column; gap: 4px; margin-top: 8px;
}
.funnel-row {
  display: grid; grid-template-columns: 130px 1fr 80px; gap: 10px;
  align-items: center; font-size: 13px;
}
.funnel-lbl { color: var(--text-2); font-weight: 600; }
.funnel-lbl small { display: block; font-size: 10px; color: var(--text-4); font-weight: 500; margin-top: 1px; }
.funnel-bar {
  height: 28px; border-radius: 6px; position: relative;
  background: var(--bg-alt); overflow: hidden;
}
.funnel-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--fc, var(--primary)) 0%, color-mix(in srgb, var(--fc) 70%, white) 100%);
  display: flex; align-items: center; padding: 0 10px;
  font-weight: 700; color: #fff; font-size: 12px;
  transition: width .5s ease;
}
.funnel-val {
  text-align: right; font-weight: 800; font-size: 14px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.funnel-conv {
  text-align: right; font-size: 11px; color: var(--text-3); font-weight: 600;
  margin-top: 2px;
}

/* ===================================================== */
/* ============== MARKET VIEW (Cấp 1) ================== */
/* ===================================================== */

/* Market hero */
.market-hero {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 22px; margin-bottom: 18px; display: flex;
  align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
}
.hero-left { display: flex; align-items: center; gap: 14px; }
.hero-flag { font-size: 44px; line-height: 1; filter: saturate(1.1); }
.hero-info .hero-title {
  font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 8px;
}
.hero-currency {
  font-size: 11px; color: var(--text-3); font-weight: 700;
  background: var(--primary-soft); padding: 2px 7px; border-radius: 4px;
  letter-spacing: .04em;
}
.hero-stats {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px;
  font-size: 12.5px; color: var(--text-3);
}
.hero-stats span i { color: var(--text-4); margin-right: 4px; }
.hero-right { display: flex; align-items: center; gap: 10px; }
.hero-pill {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--bg-alt);
}
.hero-pill-lbl { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.hero-pill-val { font-size: 18px; font-weight: 800; color: var(--c, var(--text)); }
.hero-pill-val.positive { color: var(--success); }
.hero-pill-val.negative { color: var(--danger); }
.hero-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--bg); color: var(--text-3); font-size: 12.5px; font-weight: 500;
  transition: var(--transition);
}
.hero-back:hover { color: var(--primary); border-color: var(--primary); }

/* Project grid v2 (Cấp 1) */
.project-grid-v2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 880px) { #project-grid { grid-template-columns: 1fr; } }
.project-card-v2 {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 20px; box-shadow: var(--shadow-xs); display: block; color: inherit;
  border-left: 3px solid var(--c, var(--primary)); transition: var(--transition);
}
.project-card-v2 { --c: var(--primary); }
.project-card-v2:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: var(--primary); }
.project-card-v2.empty { opacity: .55; pointer-events: none; }
.project-card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.project-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c); display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.project-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
/* Cờ quốc gia inline trong card/table — tone giống admin column flags */
.card-flag { font-size: 15px; margin-right: 6px; vertical-align: -1px; }
.row-flag { font-size: 13px; margin-right: 4px; vertical-align: -1px; opacity: 0.9; }
.project-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
/* Grid metric: 6 cột bằng nhau cố định, label luôn 2-line cố định để 2 cards trên cùng hàng align số */
.project-card-metrics {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 12px;
}
.project-card-metrics > div {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.project-card-metrics .lbl {
  color: var(--text-3); font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.25; font-weight: 600;
  min-height: 26px;
  display: flex; align-items: flex-start;
  word-break: keep-all; white-space: normal;
}
.project-card-metrics .val {
  font-weight: 700; font-size: 14px; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-card-metrics .val.positive { color: #16a34a; }
.project-card-metrics .val.amber { color: #d97706; }
.project-card-metrics .val.negative { color: #ef4444; }

/* Channel split (Web/Mess vs Sàn) */
.channel-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .channel-split { grid-template-columns: 1fr; } }
.channel-block {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--shadow-xs);
  border-top: 3px solid var(--c, var(--primary));
}
.channel-block-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.channel-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c); display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.channel-title { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.channel-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.channel-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.channel-metrics > div { display: flex; flex-direction: column; gap: 2px; }
.channel-metrics .lbl { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.channel-metrics .val { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.channel-metrics .val.positive { color: var(--success); }
.channel-metrics .val.negative { color: var(--danger); }
.channel-breakdown { display: flex; flex-direction: column; gap: 5px; }
.channel-row {
  display: grid; grid-template-columns: 1fr 70px 60px; gap: 8px; padding: 5px 0;
  font-size: 12.5px; border-bottom: 1px dashed var(--border);
}
.channel-row:last-child { border-bottom: none; }
.ch-name { color: var(--text-2); }
.ch-name i { margin-right: 6px; }
.ch-spend { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }
.ch-roas { text-align: right; font-variant-numeric: tabular-nums; color: var(--primary); font-weight: 700; }
.channel-empty { color: var(--text-4); font-size: 12px; padding: 6px 0; }

/* ===================================================== */
/* ============== DRILL-DOWN levels (2-3) ============== */
/* ===================================================== */
.view { animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Level header (cấp 1-3) */
.mkt-level-header { margin-bottom: 18px; }
.mkt-level-header h2 { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.mkt-level-header p { color: var(--text-3); margin-top: 4px; font-size: 13px; }
.mkt-level-header .badge {
  display: inline-block; font-size: 10px; padding: 2px 7px; vertical-align: middle;
  background: var(--primary-soft); color: var(--primary); border-radius: 4px;
  margin-left: 6px; font-weight: 700;
}

/* KPI compact cho cấp 1-3 */
.mkt-kpi-grid-compact {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.mkt-kpi-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px; position: relative; box-shadow: var(--shadow-xs);
}
.mkt-kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, var(--primary)); border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.mkt-kpi-card.kpi-spend   { --accent: var(--blue-700); }
.mkt-kpi-card.kpi-revenue { --accent: var(--blue-700); }
.mkt-kpi-card.kpi-profit  { --accent: var(--blue-700); }
.mkt-kpi-card.kpi-roas    { --accent: var(--blue-600); }
.mkt-kpi-card.kpi-orders  { --accent: var(--text-3); }
.mkt-kpi-card.kpi-alerts  { --accent: var(--accent); }
.kpi-label {
  font-size: 11px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700; margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}
.kpi-value { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.kpi-value.positive { color: var(--success); }
.kpi-value.negative { color: var(--danger); }
.kpi-value.amber { color: #d97706; }
.kpi-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* Section card chung (cho tables / charts) */
.section-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-xs);
}

/* Project grid */
.mkt-project-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.mkt-project-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--shadow-xs); display: block; color: inherit;
  border-left: 3px solid var(--accent, var(--primary)); transition: var(--transition);
}
.mkt-project-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.mkt-project-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mkt-project-name { font-weight: 700; font-size: 15px; flex: 1; }
.mkt-project-badge { background: var(--bg-soft); color: var(--text-3); padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.mkt-project-card-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mkt-project-card-kpis > div { display: flex; flex-direction: column; gap: 2px; }
.mkt-project-card-kpis .lbl { font-size: 10px; color: var(--text-4); text-transform: uppercase; letter-spacing: .04em; }
.mkt-project-card-kpis .val { font-size: 13px; font-weight: 700; color: var(--text); }
.mkt-project-card-kpis .val.positive { color: var(--success); }
.mkt-project-card-kpis .val.negative { color: var(--danger); }
.mkt-market-card-foot, .mkt-market-card { display: none; } /* legacy unused */

/* Chart row */
.mkt-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 1024px) { .mkt-chart-row { grid-template-columns: 1fr; } }

/* Tabs */
.mkt-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px; overflow-x: auto;
}
.mkt-tab {
  padding: 9px 16px; cursor: pointer; color: var(--text-3); font-weight: 500;
  border-bottom: 2px solid transparent; font-size: 13px; transition: var(--transition);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.mkt-tab:hover { color: var(--text); }
.mkt-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.mkt-tab-panel { display: none; }
.mkt-tab-panel.active { display: block; }

/* Ranking table */
.mkt-rank-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mkt-rank-table th, .mkt-rank-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.mkt-rank-table th { font-weight: 700; color: var(--text-3); text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; background: var(--bg-alt); }
.mkt-rank-table th.num, .mkt-rank-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mkt-rank-table td { color: var(--text-2); }
.mkt-rank-table td.num.positive { color: var(--success); font-weight: 700; }
.mkt-rank-table td.num.negative { color: var(--danger); font-weight: 700; }
.mkt-rank-table td.num.amber { color: #d97706; font-weight: 700; }

/* Tight table — cột rank + tên gọn để chừa đất cho số */
.mkt-rank-table-tight th.col-rank { width: 30px; text-align: center; padding-left: 6px; padding-right: 6px; }
.mkt-rank-table-tight td:first-child { color: var(--text-4); font-weight: 600; }
.mkt-rank-table-tight th.col-name { width: 11%; max-width: 130px; }
.mkt-rank-table-tight td.col-name {
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mkt-rank-table-tight td, .mkt-rank-table-tight th { padding: 8px 8px; font-size: 12.5px; }
.mkt-rank-table-tight th.col-acc { width: 60px; max-width: 60px; }
.mkt-rank-table-tight td.col-acc { font-weight: 700; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-rank-table-tight td.col-camp { font-variant-numeric: tabular-nums; min-width: 70px; }
.mkt-rank-table-tight td.col-camp strong { color: var(--primary); font-size: 13px; }
/* Sản phẩm: tên dài → ellipsis 200px, thêm cột Mã */
.mkt-rank-table-tight th.col-name + th.col-code,
.mkt-rank-table-tight th.col-code { width: 80px; }
.mkt-rank-table-tight td.col-code { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11.5px; }
.mkt-rank-table-tight td.col-code code { background: var(--primary-soft); color: var(--primary); padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.mkt-rank-table-tight td.col-name-sp,
.mkt-rank-table-tight th.col-name-sp,
.mkt-rank-table-tight td.col-name {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mkt-rank-table-tight th.col-emps { width: 180px; }
.mkt-rank-table-tight td.col-emps {
  font-size: 12px; color: var(--text-2);
}
.emps-cell { line-height: 1.55; }
.emps-cell .emps-preview { white-space: nowrap; }
.emps-cell .emps-full { white-space: normal; word-break: break-word; }
.emps-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid transparent; font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.emps-toggle:hover { background: var(--primary); color: #fff; }
.emps-toggle-close { font-weight: 500; font-size: 10.5px; }

/* Sortable header */
.mkt-rank-table th.sortable { cursor: pointer; user-select: none; position: relative; }
.mkt-rank-table th.sortable:hover { background: var(--primary-soft); color: var(--primary); }
.mkt-rank-table th.sortable .sort-arrow {
  display: inline-block; margin-left: 5px; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--text-4); opacity: .4;
  vertical-align: middle; transition: all .15s ease;
}
.mkt-rank-table th.sortable:hover .sort-arrow { opacity: .8; border-top-color: var(--primary); }
.mkt-rank-table th.sortable.sort-asc .sort-arrow {
  border-top: none; border-bottom: 5px solid var(--primary); opacity: 1;
}
.mkt-rank-table th.sortable.sort-desc .sort-arrow {
  border-top-color: var(--primary); opacity: 1;
}
.mkt-rank-table tbody tr:hover { background: var(--bg-soft); }
.mkt-rank-table code { background: var(--primary-soft); color: var(--primary-dark); padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.mkt-link { color: var(--primary); font-weight: 600; }
.mkt-link:hover { text-decoration: underline; }
.mkt-camp-name { font-size: 10.5px !important; word-break: break-all; }

/* Table container */
.table-container { overflow-x: auto; }

/* Breadcrumb (mini, ẩn ở Cấp 0) */
.mkt-breadcrumb { display: none; }

/* ===================================================== */
/* ============== ALERTS STRIP ========================= */
/* ===================================================== */
.mkt-alerts-strip { border-left: 3px solid var(--warning); }
.mkt-alerts-strip.has-critical { border-left-color: var(--danger); }
.alerts-toggle {
  width: 100%; background: transparent; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0; font-family: inherit; color: var(--text); text-align: left;
  font-weight: 700; font-size: 14px;
}
.alerts-toggle:hover { color: var(--primary); }
.alerts-toggle > span:first-child i { color: var(--warning); margin-right: 6px; }
.mkt-alerts-strip.has-critical .alerts-toggle > span:first-child i { color: var(--danger); }
.alerts-toggle-right { display: inline-flex; align-items: center; gap: 8px; }
.alerts-chevron { color: var(--text-4); transition: transform .25s; font-size: 11px; }
.mkt-alerts-strip:not(.collapsed) .alerts-chevron { transform: rotate(180deg); color: var(--primary); }

.mkt-alerts-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 460px; overflow-y: auto;
  margin-top: 14px; padding-right: 2px;
}
.mkt-alerts-strip.collapsed .mkt-alerts-list {
  max-height: 0; overflow: hidden; margin-top: 0; opacity: 0; pointer-events: none;
  transition: max-height .2s, opacity .15s, margin-top .15s;
}

.mkt-alert-item, .alert-group-row {
  display: flex; gap: 10px; padding: 9px 12px; border-radius: var(--r);
  background: var(--warning-soft); border: 1px solid rgba(245, 158, 11, .25);
  text-decoration: none; color: inherit; transition: var(--transition); font-size: 13px;
}
a.mkt-alert-item:hover, .alert-group-row:hover { transform: translateX(2px); border-color: var(--primary); }
.mkt-alert-item.critical, .alert-group-row.critical { background: var(--danger-soft); border-color: rgba(220, 38, 38, .25); }
.mkt-alert-item > i { color: var(--warning); padding-top: 2px; }
.mkt-alert-item.critical > i { color: var(--danger); }
.mkt-alert-body { flex: 1; }
.mkt-alert-msg { color: var(--text); }
.mkt-alert-meta { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.mkt-alert-meta code { background: var(--primary-soft); color: var(--primary-dark); padding: 0 5px; border-radius: 3px; font-size: 10.5px; }
.mkt-alert-item .ag-arrow { color: var(--text-4); align-self: center; font-size: 11px; }

.alert-group-row {
  display: grid; grid-template-columns: 30px 1fr auto 14px;
  align-items: center;
}
.ag-flag { font-size: 1.3rem; text-align: center; }
.ag-flag i { font-size: 16px; }
.ag-name { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ag-stats { display: flex; gap: 5px; }
.ag-arrow { color: var(--text-4); font-size: 11px; }

/* Status badges nhỏ trong alert */
.badge-danger { background: var(--danger-soft); color: var(--danger-strong); border: 1px solid rgba(220,38,38,.25); padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.badge-warning { background: var(--warning-soft); color: var(--warning-strong); border: 1px solid rgba(245,158,11,.25); padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }

/* ===================================================== */
/* Responsive */
/* ===================================================== */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .main { margin-left: 0; padding: 16px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .market-grid { grid-template-columns: 1fr; }
}

@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* ============ AUTH OVERLAY (login / change-pw / admin) ============ */
.auth-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.auth-card {
  background: #fff; border-radius: 16px; padding: 32px; min-width: 360px; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 14px;
}
.auth-card-wide { max-width: 980px; width: 100%; max-height: 86vh; overflow: auto; }
.auth-logo { display:flex; justify-content:center; margin-bottom:8px; }
.auth-card h2 { margin:0; font-size:22px; font-weight:800; color: var(--text); }
.auth-card h3 { margin: 12px 0 4px; font-size: 16px; font-weight:700; }
.auth-sub { margin:0 0 8px; color: var(--text-3); font-size:13px; }
.auth-card label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color: var(--text-2); }
.auth-card label.auth-check { flex-direction:row; align-items:center; gap:8px; font-weight:500; }
.auth-card input[type=text], .auth-card input[type=password], .auth-card select {
  padding: 10px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; font-family:inherit;
  background:#fff; color: var(--text);
}
.auth-card select[multiple] { padding: 6px; height: auto; }
.auth-card input:focus, .auth-card select:focus { outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.auth-card .btn-primary {
  background: var(--primary); color:#fff; border:none; padding: 11px 18px; border-radius:8px;
  font-weight:700; cursor:pointer; font-size:14px;
}
.auth-card .btn-primary:hover { background: #1d4ed8; }
.auth-card .btn-secondary {
  background:#f1f5f9; color: var(--text); border:1px solid #e2e8f0; padding: 11px 18px; border-radius:8px;
  font-weight:600; cursor:pointer; font-size:14px;
}
.auth-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.auth-err { color:#dc2626; font-size:13px; min-height:18px; font-weight:500; }

/* Admin table */
.admin-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.admin-actions { display:flex; gap:8px; margin: 8px 0 12px; }
.admin-table { width:100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #e2e8f0; }
.admin-table th { background:#f8fafc; font-weight:700; color: var(--text-2); }
.admin-table tr:hover td { background:#f8fafc; }
.admin-table .row-actions { display:flex; gap:6px; }
.admin-table .row-actions button {
  background:#fff; border:1px solid #e2e8f0; border-radius:6px; padding:4px 10px; cursor:pointer; font-size:12px; font-weight:600;
}
.admin-table .row-actions button:hover { background:#f1f5f9; }
.admin-table .row-actions .danger { color:#dc2626; border-color:#fecaca; }
.admin-table .badge-role { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; background:#e0e7ff; color:#3730a3; }
.admin-table .badge-role.super_admin { background:#fecaca; color:#991b1b; }
.admin-table .badge-role.project_lead { background:#fed7aa; color:#9a3412; }
.admin-table .badge-role.project_accountant { background:#e0f2fe; color:#075985; }
.admin-table .badge-role.team_lead { background:#bbf7d0; color:#166534; }
.admin-table .badge-role.disabled { background:#e2e8f0; color:#64748b; }
/* Click-to-edit role badge */
.admin-table .badge-role-btn {
  border: 1px dashed transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit;
  transition: all .12s;
}
.admin-table .badge-role-btn:hover {
  border-color: currentColor;
  filter: brightness(0.96);
  transform: translateY(-1px);
}
.admin-table .badge-role-btn .role-caret { font-size: 9px; opacity: 0.6; }
.admin-table .badge-role-btn:hover .role-caret { opacity: 1; }

/* User dropdown trong sidebar */
.user-menu { position:relative; padding: 12px; border-top:1px solid #e2e8f0; margin-top: auto; }
.user-menu-trigger { display:flex; align-items:center; gap:8px; cursor:pointer; padding: 8px; border-radius:8px; }
.user-menu-trigger:hover { background:#f1f5f9; }
.user-menu-avatar { width:32px; height:32px; border-radius:50%; background: var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.user-menu-name { flex:1; min-width:0; }
.user-menu-name strong { display:block; font-size:13px; font-weight:700; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-menu-name small { display:block; font-size:11px; color: var(--text-3); }
.user-menu-dropdown {
  position:absolute; bottom: 100%; left: 12px; right: 12px; background:#fff; border-radius:10px; padding: 6px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18); border:1px solid #e2e8f0; display:none;
}
.user-menu.open .user-menu-dropdown { display:block; }
.user-menu-dropdown button { display:block; width:100%; text-align:left; padding:8px 12px; background:none; border:none; cursor:pointer; font-size:13px; border-radius:6px; color: var(--text); }
.user-menu-dropdown button:hover { background:#f1f5f9; }
.user-menu-dropdown button .ic { width:16px; display:inline-block; margin-right:6px; color: var(--text-3); }

/* Settings button + popup menu trong sidebar */
.sidebar-bottom { margin-top: auto; padding: 12px; border-top: 1px solid #e2e8f0; position: relative; }
.settings-btn {
  width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:#f1f5f9; border:1px solid #e2e8f0; border-radius:10px;
  font-size:13px; font-weight:600; color: var(--text); cursor:pointer;
}
.settings-btn:hover { background:#e2e8f0; }
.settings-btn i { font-size:14px; color: var(--text-2); }
.settings-popup {
  position:absolute; bottom:100%; left:12px; right:12px; margin-bottom:6px;
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18); padding:6px; display:none; z-index:50;
}
.settings-popup.open { display:block; }
.settings-popup .pop-user { padding:10px 12px; border-bottom:1px solid #f1f5f9; }
.settings-popup .pop-user strong { display:block; font-size:13px; color: var(--text); }
.settings-popup .pop-user small { display:block; font-size:11px; color: var(--text-3); margin-top:2px; }
.settings-popup button {
  display:block; width:100%; text-align:left; padding:9px 12px; background:none; border:none;
  cursor:pointer; font-size:13px; border-radius:6px; color: var(--text); font-family:inherit;
}
.settings-popup button:hover { background:#f1f5f9; }
.settings-popup button i { width:16px; margin-right:8px; color: var(--text-3); }

/* === Admin redesign: shell + grid + chips === */
.admin-shell {
  background:#fff; border-radius:16px; width:min(1100px, 96vw); height:min(86vh, 800px);
  display:flex; flex-direction:column; overflow:hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.admin-view { display:flex; flex-direction:column; height:100%; }
.admin-head {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 20px 24px; border-bottom: 1px solid #e2e8f0; background:#f8fafc;
}
.admin-head h2 { margin:0; font-size:20px; font-weight:800; color: var(--text); }
.admin-sub { color: var(--text-3); font-size:12px; margin-top:2px; display:block; }
.admin-head-actions { display:flex; gap:8px; align-items:center; }
.admin-search {
  padding: 8px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:13px;
  font-family:inherit; min-width:280px; background:#fff;
}
.admin-search:focus { outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.btn-close {
  width:32px; height:32px; border-radius:8px; background:#f1f5f9; border:1px solid #e2e8f0;
  cursor:pointer; font-size:14px; color: var(--text-2); font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.btn-close:hover { background:#e2e8f0; }
#admin-edit-back { width:auto; padding:0 14px; font-size:13px; }

/* User grid card layout */
.admin-grid { flex:1; overflow-y:auto; padding: 16px 24px; display:grid; gap: 12px; }

/* ============================================================
   Admin Toolbar (new universal search + filter chips)
   ============================================================ */
.atb-wrap {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 12px 14px 10px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 0; z-index: 50;
}
/* Search row */
.atb-search-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.atb-search-box {
  flex: 1; min-width: 260px;
  position: relative;
  display: flex; align-items: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 38px 10px 38px;
  transition: all .14s;
}
.atb-search-box:focus-within {
  background: #fff;
  border-color: var(--primary, #1877f2);
  box-shadow: 0 0 0 4px rgba(24,119,242,.08);
}
.atb-search-box.has-value { background: #fff; border-color: var(--primary, #1877f2); }
.atb-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--primary, #1877f2); font-size: 14px;
}
.atb-search-box input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; font-family: inherit; color: var(--text, #0f172a);
  padding: 0;
}
.atb-search-box input::placeholder { color: #94a3b8; }
.atb-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: #e2e8f0; border: none; width: 22px; height: 22px;
  border-radius: 50%; cursor: pointer;
  color: #64748b; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.atb-search-clear:hover { background: #cbd5e1; color: #1e293b; }
.atb-stats {
  font-size: 12.5px; color: var(--text-3, #64748b);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.atb-stats i { color: var(--primary, #1877f2); margin-right: 2px; }
.atb-stats b { color: var(--text, #0f172a); font-weight: 700; font-size: 14px; }
.atb-stats-sep { color: #cbd5e1; margin: 0 2px; }
.atb-hint {
  margin-left: 8px; padding: 2px 8px;
  background: #fef3c7; color: #92400e;
  border-radius: 999px; font-size: 11px; font-weight: 500;
}
.atb-hint code { background: #fff; padding: 0 4px; border-radius: 3px; font-weight: 600; }

/* Filter row */
.atb-filter-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px dashed #e2e8f0;
}
.atb-filter-lbl {
  font-size: 12px; font-weight: 600; color: var(--text-3, #64748b);
  display: flex; align-items: center; gap: 4px;
  padding-right: 4px;
}
.atb-filter-lbl i { color: var(--primary, #1877f2); }
.atb-select-wrap {
  position: relative;
}
.atb-select {
  appearance: none; -webkit-appearance: none;
  padding: 6px 30px 6px 12px;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 999px;
  font-size: 12.5px; font-family: inherit;
  color: var(--text, #0f172a);
  cursor: pointer;
  transition: all .12s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  max-width: 200px;
}
.atb-select:hover { border-color: var(--primary, #1877f2); background-color: #f8fafc; }
.atb-select:focus { outline: none; border-color: var(--primary, #1877f2); box-shadow: 0 0 0 3px rgba(24,119,242,.1); }
.atb-select:has(option:checked:not([value=""])) {
  background-color: #eff6ff;
  border-color: var(--primary, #1877f2);
  color: var(--primary, #1877f2);
  font-weight: 600;
}
.atb-reset {
  margin-left: auto;
  background: #fff; border: 1px solid #fca5a5; color: #dc2626;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .12s;
}
.atb-reset:hover { background: #fef2f2; border-color: #dc2626; }

/* Active filter chips row */
.atb-active-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 6px;
  animation: atbFadeIn .15s ease-out;
}
@keyframes atbFadeIn { from { opacity: 0; transform: translateY(-2px) } to { opacity: 1; transform: translateY(0) } }
.atb-active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg, var(--primary, #1877f2), #2563eb);
  color: #fff;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  box-shadow: 0 2px 6px rgba(24,119,242,.25);
}
.atb-active-chip:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 2px 8px rgba(220,38,38,.3);
  transform: translateY(-1px);
}
.atb-active-chip i { font-size: 10px; opacity: 0.85; }

/* Mobile responsive */
@media (max-width: 768px) {
  .atb-wrap { padding: 10px; }
  .atb-search-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .atb-stats { justify-content: space-between; }
  .atb-filter-row { gap: 6px; }
  .atb-select { max-width: 140px; font-size: 12px; }
  .atb-reset { margin-left: 0; }
}

/* Loading skeleton (admin grid) */
.admin-skeleton { display: grid; gap: 12px; padding: 16px 0; }
.admin-skeleton .sk-row {
  height: 56px; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%; border-radius: 10px;
  animation: sk-shimmer 1.4s ease infinite;
}
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Quick preset cards (wizard step 1) */
.quick-presets {
  background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
  border: 1px solid #fde68a; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 22px;
}
.quick-presets-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: #92400e; }
.quick-presets-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preset-card {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #fde68a; border-radius: 10px;
  padding: 12px 14px; cursor: pointer; text-align: left;
  transition: all .15s ease;
}
.preset-card:hover { border-color: #f59e0b; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, .15); }
.preset-icon { font-size: 26px; line-height: 1; }
.preset-main { flex: 1; min-width: 0; }
.preset-main strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.preset-main small { font-size: 11px; color: var(--text-3); line-height: 1.4; }
.quick-presets-sep {
  text-align: center; font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 14px; margin-bottom: 4px;
}
@media (max-width: 768px) { .quick-presets-row { grid-template-columns: 1fr; } }

/* Quick picker list inside modal */
.qp-list { display: flex; flex-direction: column; gap: 4px; max-height: 480px; overflow-y: auto; }
.qp-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; text-align: left; transition: all .12s ease;
}
.qp-item:hover { border-color: var(--primary); background: #eff6ff; }
.qp-icon { font-size: 20px; line-height: 1; }
.qp-main { flex: 1; min-width: 0; }
.qp-main strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.qp-main small { font-size: 11px; color: var(--text-3); }
.preset-mode-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
  margin-bottom: 12px;
}
.preset-mode-bar .btn-secondary {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
.preset-mode-bar .btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

/* Project / team chips trong user table */
.user-table td.cell-scope { padding: 8px 10px; max-width: 280px; }
.user-table td.cell-scope .cell-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; margin: 2px 3px 2px 0; border-radius: 12px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}
.user-table td.cell-scope .cell-chip.chip-proj { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.user-table td.cell-scope .cell-chip.chip-team { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.user-table td.cell-scope .cell-chip.chip-emp  { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.user-table td.cell-scope .cell-chip.more { background: #fff; color: var(--text-3); }
.user-table td.cell-scope .cell-all { font-size: 11px; font-weight: 700; color: #059669; }
.user-table td.cell-scope .cell-empty { color: var(--text-3); font-size: 12px; }
.user-table td.editable { cursor: pointer; transition: background .12s ease; }
.user-table td.editable:hover { background: #f8fafc; }
.user-table td.cell-name strong { display: block; color: var(--text); }
.user-table td.cell-name .cell-name-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
/* Scope cell inner: chip row + edit button hover */
.scope-cell-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 28px; }
.edit-pencil {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; margin-left: 4px; border: 1px dashed var(--border);
  background: #fff; color: var(--text-3); border-radius: 14px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  opacity: 0; transition: all .15s ease;
}
.user-table tr.user-row:hover .edit-pencil { opacity: 1; }
.edit-pencil:hover {
  background: var(--primary); color: #fff; border-color: var(--primary);
  border-style: solid; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(24,119,242,.25);
}
.edit-pencil .ed-text { white-space: nowrap; }
/* Action button (xoá) */
.user-table td.cell-act button.danger {
  background: #fff; border: 1px solid var(--border); color: #dc2626;
  padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
  opacity: 0; transition: all .15s ease;
}
.user-table tr.user-row:hover td.cell-act button.danger { opacity: 1; }
.user-table td.cell-act button.danger:hover { background: #fef2f2; border-color: #dc2626; }

/* Cảnh báo lần cuối — áp cho mọi role trừ super_admin */
.user-table td.cell-last .last-warn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700;
}
.user-table td.cell-last .last-warn.amber { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.user-table td.cell-last .last-warn.red   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.user-table td.cell-last .last-ok { color: var(--text); font-variant-numeric: tabular-nums; }
.user-table td.cell-last .last-ago { font-weight: 600; font-size: 10.5px; opacity: 0.85; margin-left: 2px; }

/* Dropdown filter lần đăng nhập — viền cam nhạt để nổi */
.atb-select-wrap.atb-select-last select.atb-select { border-color: #fcd34d; background: #fffbeb; }
.atb-select-wrap.atb-select-last select.atb-select:focus { border-color: #f59e0b; }

/* ============================================================
   INSIGHT KHÁCH HÀNG — demographics / region / placement / alerts
   ============================================================ */
.tab-badge-new {
  background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff;
  font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 8px;
  margin-left: 6px; letter-spacing: .04em;
}
.insight-kpi-strip {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px;
  background: linear-gradient(135deg, #f0f9ff, #fff); padding: 14px 18px;
  border: 1px solid #bfdbfe; border-radius: 12px; margin-bottom: 18px;
}
@media (max-width: 1280px) { .insight-kpi-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .insight-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.insight-kpi-strip > div { display: flex; flex-direction: column; gap: 3px; }
.insight-kpi-strip .lbl { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }
.insight-kpi-strip .val { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.insight-kpi-strip .val small { font-weight: 500; color: var(--text-3); font-size: 11px; }

.insight-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-xs);
}
/* Test spend modal — 3 bảng phải thẳng cột với nhau (NV / SP / TKQC) */
.test-modal-tbl { table-layout: fixed; width: 100%; }
.test-modal-tbl th, .test-modal-tbl td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.test-modal-tbl td:first-child strong { font-weight: 600; }

/* Wrapper bảng trong insight-card — horizontal scroll mượt khi nội dung rộng */
.ins-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Hint scroll: fade gradient ở rìa phải nếu có overflow */
  background:
    linear-gradient(90deg, #fff 30%, transparent),
    linear-gradient(90deg, transparent, #fff 70%) right,
    linear-gradient(90deg, rgba(15,23,42,0.06), transparent),
    linear-gradient(90deg, transparent, rgba(15,23,42,0.06)) right;
  background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.ins-table-scroll::-webkit-scrollbar { height: 6px; }
.ins-table-scroll::-webkit-scrollbar-thumb { background: rgba(24,119,242,0.4); border-radius: 3px; }
.ins-table-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
@media (max-width: 980px) {
  .insight-card { padding: 14px 14px; }
}
.insight-card h3 {
  margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.insight-card h3 i { color: var(--primary); }
.insight-card .ins-help { margin: 4px 0 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }

/* Blended overall banner — anchor reality check on top of pixel-only matrix */
.ins-blended-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; margin: 8px 0 14px;
  background: linear-gradient(90deg, rgba(24,119,242,0.06), rgba(24,119,242,0.02));
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
  flex-wrap: wrap;
}
.ins-blended-banner > i { color: var(--primary); padding-top: 2px; }
.ins-blended-banner > span { flex: 1 1 100%; }
.ins-blended-banner > small { flex: 1 1 100%; color: var(--text-3); font-size: 11.5px; padding-left: 22px; margin-top: 2px; }
.ins-blended-banner b { color: var(--text); font-weight: 600; }

/* Alerts list */
.insight-alerts { display: flex; flex-direction: column; gap: 8px; }
.ins-alert {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  border-radius: 8px; border-left: 3px solid var(--border); background: var(--bg-soft);
}
.ins-alert i { font-size: 18px; margin-top: 1px; }
.ins-alert.critical { border-left-color: #dc2626; background: #fef2f2; }
.ins-alert.critical i { color: #dc2626; }
.ins-alert.warning  { border-left-color: #f59e0b; background: #fffbeb; }
.ins-alert.warning i  { color: #f59e0b; }
.ins-alert.positive { border-left-color: #16a34a; background: #f0fdf4; }
.ins-alert.positive i { color: #16a34a; }
.ins-alert-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.ins-alert-action { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* Age × Gender matrix */
.insight-table-wrap { overflow-x: auto; }
.insight-matrix { width: 100%; border-collapse: separate; border-spacing: 4px; }
.insight-matrix th {
  font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .04em; padding: 6px 10px; text-align: left;
}
.insight-matrix thead th { text-align: center; }
.insight-matrix tbody th { width: 80px; }
.insight-matrix .ins-cell {
  padding: 10px 12px; border-radius: 8px; font-variant-numeric: tabular-nums;
  background: rgba(24, 119, 242, .05); min-width: 140px;
}
.insight-matrix .ins-cell.empty { background: #f8fafc; color: var(--text-3); text-align: center; }
.insight-matrix .ins-cell.total { background: #fafbfc; }
.insight-matrix .ins-cell-spend { font-size: 14px; color: var(--text); }
.insight-matrix .ins-cell-spend small { color: var(--text-3); font-weight: 500; margin-left: 4px; }
.insight-matrix .ins-cell-meta { font-size: 10.5px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }

/* KPI strip dynamic columns */
.insight-kpi-strip .val.positive { color: #16a34a; }
.insight-kpi-strip .val.negative { color: #dc2626; }
.insight-kpi-strip .val.amber { color: #d97706; }

/* HEALTH OVERVIEW — score + summary issues/wins (compact) */
.health-overview {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 14px; box-shadow: var(--shadow-xs);
  align-items: center;
}
.health-score-circle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--score-color)15, #fff);
  border: 2.5px solid var(--score-color); border-radius: 50%;
  width: 80px; height: 80px;
}
.health-score-circle .hs-num { font-size: 22px; font-weight: 800; color: var(--score-color); line-height: 1; }
.health-score-circle .hs-num span { font-size: 10px; color: var(--text-3); font-weight: 600; }
.health-score-circle .hs-label {
  font-size: 8.5px; font-weight: 700; color: var(--score-color);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; text-align: center;
}
.health-summary h3 {
  margin: 0 0 6px; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.health-summary h3 small { font-size: 11px; color: var(--text-3); font-weight: 500; }
.health-summary h3 i { color: var(--primary); }
.health-stats { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.hs-tag { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.hs-tag.excellent { background: #dcfce7; color: #15803d; }
.hs-tag.ok        { background: #fef3c7; color: #92400e; }
.hs-tag.weak      { background: #fee2e2; color: #991b1b; }
.health-issues, .health-wins { font-size: 12px; line-height: 1.5; }
.health-issues strong { color: #dc2626; margin-right: 4px; font-size: 11.5px; }
.health-wins strong   { color: #16a34a; margin-right: 4px; font-size: 11.5px; }

/* KPI panel chi tiết — bảng compact 5 cột */
.kpi-panel-grid { display: flex; flex-direction: column; }
.kpi-row {
  display: grid; grid-template-columns: minmax(170px, 1.3fr) 110px 90px 200px minmax(220px, 2fr);
  gap: 12px; padding: 9px 12px; align-items: center;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid #cbd5e1;
  font-size: 12px; transition: background .12s;
}
.kpi-row:hover { background: #f8fafc; }
.kpi-row.excellent { border-left-color: #16a34a; }
.kpi-row.ok        { border-left-color: #f59e0b; }
.kpi-row.weak      { border-left-color: #dc2626; background: #fef9f9; }
.kpi-row.neutral   { border-left-color: #cbd5e1; }
.kpi-row .kr-name { display: flex; align-items: center; gap: 8px; }
.kpi-row .kr-name strong { font-size: 13px; color: var(--text); }
.kpi-row .kr-icon { font-size: 16px; }
.kpi-row .kr-value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-row .kr-badge {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 10px;
  font-size: 10.5px; font-weight: 800; white-space: nowrap;
}
.kpi-row .kr-bench { font-size: 10.5px; color: var(--text-3); font-style: italic; }
.kpi-row .kr-hint { font-size: 11.5px; line-height: 1.45; color: var(--text); }
.kpi-row.weak .kr-hint      { color: #991b1b; font-weight: 500; }
.kpi-row.ok .kr-hint        { color: #78350f; }
.kpi-row.excellent .kr-hint { color: #14532d; }
@media (max-width: 1100px) {
  .kpi-row {
    grid-template-columns: 1fr 90px;
    grid-template-areas: "name value" "status status" "bench bench" "hint hint";
    row-gap: 6px;
  }
  .kpi-row .kr-name { grid-area: name; }
  .kpi-row .kr-value { grid-area: value; text-align: right; }
  .kpi-row .kr-status { grid-area: status; }
  .kpi-row .kr-bench { grid-area: bench; }
  .kpi-row .kr-hint { grid-area: hint; padding-top: 4px; border-top: 1px dashed var(--border); }
}

/* Drill-down NV / SP */
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .dd-grid { grid-template-columns: 1fr; } }
.dd-block {
  border-radius: 8px; padding: 12px 14px;
  background: #fafbfc; border: 1px solid var(--border);
}
.dd-block.weak { border-left: 3px solid #dc2626; background: #fef9f9; }
.dd-block.top  { border-left: 3px solid #16a34a; background: #f0fdf4; }
.dd-block-title { font-size: 12px; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.dd-block.weak .dd-block-title { color: #991b1b; }
.dd-block.top .dd-block-title  { color: #15803d; }
.dd-row {
  padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,.05);
}
.dd-row:last-child { border-bottom: none; }
.dd-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.dd-stats { font-size: 11px; color: var(--text-3); margin-top: 2px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.dd-issues { margin-top: 4px; }
.dd-issue {
  display: inline-block; padding: 1px 7px; margin: 2px 4px 0 0;
  background: #fee2e2; color: #991b1b; border-radius: 8px;
  font-size: 10.5px; font-weight: 700;
}

/* SUB-TABS bên trong Insight tab — nhẹ hơn mkt-tabs chính */
.insight-subtabs {
  display: flex; gap: 4px;
  background: #fff; padding: 4px;
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-xs);
}
.ins-subtab {
  flex: 1; padding: 9px 14px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 7px; transition: all .15s ease; white-space: nowrap;
}
.ins-subtab:hover { background: #f1f5f9; color: var(--text); }
.ins-subtab.active {
  background: linear-gradient(135deg, var(--primary), #2563eb);
  color: #fff;
  box-shadow: 0 2px 8px rgba(24, 119, 242, .25);
}
.ins-subtab.active .st-badge { background: rgba(255,255,255,.25); color: #fff; }
.st-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; padding: 0 6px; height: 18px; border-radius: 9px;
  background: var(--accent, #ea7c3f); color: #fff;
  font-size: 10px; font-weight: 800;
}
.ins-subpanel[hidden] { display: none; }
@media (max-width: 768px) {
  .insight-subtabs { flex-wrap: wrap; }
  .ins-subtab { flex: 1 1 calc(50% - 4px); font-size: 11.5px; padding: 7px 8px; }
}

/* DIAGNOSE ENGINE — top vấn đề ưu tiên cards */
.diagnose-list { display: flex; flex-direction: column; gap: 12px; }
.dx-card {
  background: #fff; padding: 14px 18px; border-radius: 8px;
  border: 1px solid var(--border);
}
.dx-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  flex-wrap: wrap;
}
.dx-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #1e293b; color: #fff;
  font-size: 11px; font-weight: 800;
}
.dx-badge {
  font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 10px;
  letter-spacing: .04em;
}
.dx-impact { font-size: 11px; color: var(--text-3); }
.dx-impact b { color: var(--text); }
.dx-who {
  font-size: 11px; color: var(--text-3); margin-left: auto;
  padding: 2px 8px; background: #f1f5f9; border-radius: 8px;
}
.dx-who i { color: var(--primary); margin-right: 3px; }
.dx-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin: 4px 0 8px; }
.dx-evidence {
  font-size: 12px; color: var(--text); line-height: 1.55;
  background: #f8fafc; padding: 8px 12px; border-radius: 6px; margin-bottom: 8px;
}
.dx-evidence b { color: var(--primary); }
.dx-section { margin: 6px 0; }
.dx-section-title { font-size: 11.5px; font-weight: 700; color: var(--text-3); margin-bottom: 2px; }
.dx-list { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.6; color: var(--text); }
.dx-list li { margin: 1px 0; }
.dx-list-action li { color: #15803d; font-weight: 500; }
.dx-impact-num {
  font-size: 11.5px; color: #15803d; font-weight: 600;
  margin-top: 8px; padding: 6px 10px; background: #f0fdf4; border-radius: 6px;
  border-left: 2px solid #16a34a;
}

/* FUNNEL GRID — clean row layout với CSS grid */
.funnel-grid { width: 100%; font-variant-numeric: tabular-nums; }
.fg-header, .fg-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 90px 100px 110px 80px minmax(260px, 2fr);
  gap: 14px; align-items: center;
  padding: 10px 12px;
}
.fg-header {
  background: #f8fafc; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.fg-header .num { text-align: right; }
.fg-row {
  border-bottom: 1px solid var(--border);
  border-left: 3px solid #cbd5e1;
  transition: background .12s;
  font-size: 12px;
}
.fg-row:hover { background: #f8fafc; }
.fg-row.excellent { border-left-color: #16a34a; }
.fg-row.ok        { border-left-color: #f59e0b; }
.fg-row.weak      { border-left-color: #dc2626; background: #fef9f9; }
.fg-row.neutral   { border-left-color: #cbd5e1; }

.fg-stage { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fg-icon  { font-size: 20px; line-height: 1; flex-shrink: 0; }
.fg-stage-text { min-width: 0; }
.fg-name  { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.fg-src   { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
.fg-val   { font-size: 13px; }
.fg-val strong { color: var(--text); }
.fg-cvr   { font-size: 12px; text-align: right; }
.fg-cvr span { font-size: 13.5px; }
.fg-prev  { font-size: 10px; color: var(--text-3); margin-top: 1px; }
.fg-bench { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.fg-status .fg-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 10px;
  white-space: nowrap;
}
.fg-status .fg-badge.neutral { background: #f1f5f9; color: #64748b; }
.fg-hint { font-size: 11.5px; line-height: 1.45; color: var(--text); }
.fg-row.weak .fg-hint      { color: #991b1b; font-weight: 500; }
.fg-row.ok .fg-hint        { color: #78350f; }
.fg-row.excellent .fg-hint { color: #14532d; }

@media (max-width: 1100px) {
  .fg-header, .fg-row {
    grid-template-columns: 1fr 80px 80px;
    grid-template-areas:
      "stage val cvr"
      "bench bench status"
      "hint hint hint";
    row-gap: 6px;
  }
  .fg-stage { grid-area: stage; }
  .fg-val { grid-area: val; }
  .fg-cvr { grid-area: cvr; }
  .fg-bench { grid-area: bench; }
  .fg-status { grid-area: status; }
  .fg-hint { grid-area: hint; padding-top: 4px; border-top: 1px dashed var(--border); }
  .fg-header { display: none; }
}

/* FUNNEL (legacy — giữ class cũ phòng dùng) */
.funnel-cone { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.funnel-step {
  display: flex; align-items: center; gap: 14px;
  transition: all .15s ease;
}
.funnel-bar-wrap {
  flex: 1; min-width: 0;
  display: flex; justify-content: center;
}
.funnel-bar {
  height: 38px; border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; color: #fff; font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: all .2s ease;
  min-width: 120px;
}
.funnel-step:hover .funnel-bar { transform: scale(1.01); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.funnel-bar-label { font-size: 12.5px; opacity: .95; }
.funnel-bar-value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.funnel-meta {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  min-width: 130px; font-size: 11px;
}
.funnel-source {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 700;
}
.funnel-source.fb  { background: #dbeafe; color: #1e40af; }
.funnel-source.pos { background: #dcfce7; color: #15803d; }
.funnel-sub { color: var(--text-3); font-size: 10px; }
.funnel-cvr { color: var(--text); font-weight: 600; font-size: 11px; }
.funnel-cvr.low  { color: #dc2626; }
.funnel-cvr.high { color: #16a34a; }
.funnel-step.highlight .funnel-bar {
  outline: 2px solid #f59e0b; outline-offset: 2px;
  animation: funnel-pulse 1.4s ease-in-out infinite;
}
@keyframes funnel-pulse {
  0%,100% { outline-color: #f59e0b; } 50% { outline-color: #fbbf24; }
}
.funnel-summary-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--bg-soft); border-radius: 8px;
}
@media (max-width: 1000px) { .funnel-summary-row { grid-template-columns: repeat(3, 1fr); } }
.funnel-summary-row > div { display: flex; flex-direction: column; gap: 2px; }
.funnel-summary-row .lbl { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; font-weight: 600; }
.funnel-summary-row .val { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* Group section headers trong user-table */
.user-table tr.group-header td {
  background: linear-gradient(90deg, #f8fafc, #fff);
  padding: 14px 12px 6px; font-size: 11px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .06em;
  border-top: 2px solid var(--border); border-bottom: 1px solid var(--border);
}
.user-table tr.group-header.group-admin td  { color: #b45309; background: linear-gradient(90deg, #fffbeb, #fff); }
.user-table tr.group-header.group-leader td { color: #1e40af; background: linear-gradient(90deg, #eff6ff, #fff); }
.user-table tr.group-header.group-emp td    { color: #5b21b6; background: linear-gradient(90deg, #f5f3ff, #fff); }
.user-table tr.group-header .group-count {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  background: rgba(0,0,0,.06); border-radius: 10px; font-weight: 600; font-size: 11px;
}

/* Inline scope popover */
.inline-pop {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  z-index: 10001; display: flex; flex-direction: column; max-height: 70vh;
}
/* Modal mode: full-screen backdrop + center modal — không bị crop trên list dài */
.ipop-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: ipopFadeIn .14s ease-out;
}
@keyframes ipopFadeIn { from { opacity: 0 } to { opacity: 1 } }
.inline-pop.ipop-modal {
  width: 100%; max-width: 540px; max-height: 85vh;
  animation: ipopSlideUp .18s ease-out;
}
@keyframes ipopSlideUp { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.ipop-head {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.ipop-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--text-3); padding: 4px 8px;
}
.ipop-close:hover { color: var(--text); }
.ipop-search {
  margin: 10px 14px 6px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.ipop-body { flex: 1; overflow-y: auto; padding: 4px 14px 8px; }
.ipop-tabs {
  display: flex; gap: 4px; padding: 4px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.ipop-tabs button {
  background: none; border: none; padding: 6px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-3); cursor: pointer; border-radius: 6px;
}
.ipop-tabs button.active { color: var(--primary); background: #eff6ff; }
.ipop-list { display: flex; flex-direction: column; gap: 2px; }
.ipop-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 6px; cursor: pointer; transition: background .1s;
}
.ipop-item:hover { background: #f8fafc; }
.ipop-item.selected { background: #eff6ff; }
.ipop-item input[type=checkbox] { margin: 0; }
/* NV được auto-include qua team → highlight nhẹ, không cho check riêng */
.ipop-item.auto-included {
  background: #f0fdf4; cursor: default; opacity: 0.92;
}
.ipop-item.auto-included:hover { background: #ecfdf5; }
.ipop-auto-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: #d1fae5; color: #047857; font-weight: 600;
  white-space: nowrap; margin-left: auto;
}
/* Project/Team kế thừa qua team/NV — highlight cam, vẫn cho tick để promote thành direct */
.ipop-item.inherit-included {
  background: linear-gradient(90deg, #fff7ed 0%, #ffedd5 100%);
  border-left: 3px solid #ea580c;
  padding-left: 9px;
}
.ipop-item.inherit-included:hover { background: linear-gradient(90deg, #ffedd5 0%, #fed7aa 100%); }
.ipop-item.inherit-included.selected {
  background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 100%);
  border-left-color: var(--primary, #1877f2);
}
.ipop-item.inherit-included .ipop-main strong::before {
  content: '◐';
  color: #ea580c;
  margin-right: 4px;
  font-size: 14px;
}
.ipop-item.inherit-included.selected .ipop-main strong::before { content: '✓'; color: var(--primary, #1877f2); }
.ipop-inherit-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: #fed7aa; color: #9a3412; font-weight: 600;
  white-space: nowrap; margin-left: auto;
  cursor: help;
}
/* Preview banner — tóm tắt scope đang được apply */
.ipop-preview {
  margin: 8px 14px 6px; padding: 8px 12px;
  background: linear-gradient(90deg, #eff6ff, #f8fafc);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
}
.ipop-preview > i { color: var(--primary); margin-right: 4px; }
.ipop-preview b { color: var(--text); font-weight: 600; }
.ipop-market-filter {
  margin: 10px 14px 0;
  padding: 8px 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-left: 3px solid var(--primary, #1877f2);
  border-radius: 6px;
  font-size: 12px;
  color: #1e3a8a;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.ipop-market-filter > i { color: var(--primary, #1877f2); margin-right: 2px; }
.ipop-market-filter b { color: #0c1e3d; }
.ipop-mk-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #93c5fd;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
}
.ipop-mk-edit {
  margin-left: auto;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--primary, #1877f2);
  color: var(--primary, #1877f2);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.ipop-mk-edit:hover { background: var(--primary, #1877f2); color: #fff; }
.ipop-flag { font-size: 14px; line-height: 1; }
.ipop-main { flex: 1; min-width: 0; font-size: 12.5px; }
.ipop-main strong { color: var(--text); }
.ipop-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--border);
}
.ipop-status { flex: 1; font-size: 12px; color: var(--text-3); }
.ipop-footer .btn-primary { background: var(--primary); color: #fff; border: none; padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ipop-footer .btn-secondary { background: #fff; border: 1px solid var(--border); padding: 7px 14px; border-radius: 6px; font-size: 12px; cursor: pointer; }

/* === Inline role editor popover === */
.ipop-backdrop.transparent { background: rgba(15,23,42,.18); backdrop-filter: none; padding: 0; }
.inline-pop.role-pop {
  max-height: none;
  animation: ipopSlideUp .14s ease-out;
}
.role-pop .role-pop-list { display: flex; flex-direction: column; padding: 6px; gap: 4px; }
.role-pop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #fff; border: 1.5px solid transparent; border-radius: 8px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: all .12s;
}
.role-pop-item:hover {
  background: var(--primary-soft, #eff6ff);
  border-color: var(--primary, #1877f2);
}
.role-pop-item.is-current {
  background: linear-gradient(135deg, #fffbf0 0%, #fff7e6 100%);
  border-color: var(--accent, #ea7c3f);
}
.role-pop-item.disabled {
  background: repeating-linear-gradient(135deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px);
  cursor: not-allowed;
  opacity: 0.65;
}
.role-pop-item.disabled:hover { background: repeating-linear-gradient(135deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px); border-color: transparent; transform: none; }
.role-pop-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.role-pop-main { flex: 1; min-width: 0; }
.role-pop-main strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; font-weight: 700; }
.role-pop-main small { display: block; font-size: 11px; color: var(--text-3); line-height: 1.35; }
.role-pop-arrow { color: var(--primary, #1877f2); font-size: 12px; opacity: 0; transition: opacity .12s; }
.role-pop-item:hover .role-pop-arrow { opacity: 1; }
.role-pop-lock { color: #94a3b8; font-size: 11px; }
.role-pop-foot {
  padding: 9px 14px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-3);
  background: #f8fafc; border-radius: 0 0 12px 12px;
}
.role-pop-foot i { color: var(--primary, #1877f2); margin-right: 4px; }
.role-pop-foot b { color: var(--text); font-weight: 600; }
.role-pop-status {
  margin: 6px 12px 0;
  padding: 8px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.role-pop-status.loading { background: #eff6ff; color: #1d4ed8; }
.role-pop-status.ok { background: #dcfce7; color: #166534; }
.role-pop-status.err { background: #fee2e2; color: #991b1b; }
.user-card {
  background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px;
  display:grid; grid-template-columns: auto 1fr auto; gap:16px; align-items:center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.user-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(37,99,235,0.08); }
.user-card.disabled { opacity:0.55; background:#f8fafc; }
.user-card-avatar {
  width:48px; height:48px; border-radius:50%; background: var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px;
}
.user-card-avatar.super_admin { background:#dc2626; }
.user-card-avatar.project_lead { background:#ea580c; }
.user-card-avatar.project_accountant { background:#0284c7; }
.user-card-avatar.team_lead { background:#16a34a; }
.user-card-avatar.employee { background:#0891b2; }
.user-card-avatar.viewer { background:#64748b; }
.user-card-main { min-width:0; }
.user-card-name { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.user-card-name strong { font-size:15px; color: var(--text); }
.user-card-name code { background:#f1f5f9; padding:2px 6px; border-radius:4px; font-size:12px; color: var(--text-2); font-family: 'JetBrains Mono', monospace; }
.user-card-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:12px; }
.user-card-meta .badge-role { padding:3px 10px; border-radius:10px; font-weight:700; font-size:11px; }
.user-card-meta .badge-role.super_admin { background:#fecaca; color:#991b1b; }
.user-card-meta .badge-role.project_lead { background:#fed7aa; color:#9a3412; }
.user-card-meta .badge-role.project_accountant { background:#e0f2fe; color:#075985; }
.user-card-meta .badge-role.team_lead { background:#bbf7d0; color:#166534; }
.user-card-meta .badge-role.employee { background:#cffafe; color:#0e7490; }
.user-card-meta .badge-role.viewer { background:#e2e8f0; color:#475569; }
.user-card-meta .badge-disabled { background:#fee2e2; color:#991b1b; padding:3px 10px; border-radius:10px; font-weight:700; }
.user-card-meta .last-login { color: var(--text-3); }
.user-card-scope { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.user-card-scope .scope-pill { background:#eff6ff; color:#1e40af; padding:3px 10px; border-radius:10px; font-size:11px; font-weight:600; }
.user-card-scope .scope-pill.all { background:#fef3c7; color:#92400e; }
.user-card-actions { display:flex; gap:6px; }
.user-card-actions button {
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:7px 14px;
  cursor:pointer; font-size:12px; font-weight:600; color: var(--text-2);
}
.user-card-actions button:hover { background:#f1f5f9; border-color: var(--primary); color: var(--primary); }
.user-card-actions .danger:hover { background:#fef2f2; border-color:#fecaca; color:#dc2626; }

/* Form layout */
.admin-form { flex:1; overflow-y:auto; padding: 20px 24px; display:flex; flex-direction:column; gap:14px; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-checks { grid-template-columns: auto auto 1fr; align-items:center; }
.scope-section {
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:16px;
}
.scope-header h3 { margin:0; font-size:14px; font-weight:700; color: var(--text); }
.scope-header small { display:block; margin: 4px 0 12px; font-size:12px; color: var(--text-3); }
.scope-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; min-height: 32px; }
.scope-empty { color: var(--text-4); font-size:13px; font-style:italic; padding:6px; }
.scope-chip {
  display:inline-flex; align-items:center; gap:6px; padding: 5px 10px; border-radius:14px;
  background:#fff; border:1px solid #cbd5e1; font-size:12px; font-weight:600;
}
.scope-chip.kind-market { background:#fef3c7; border-color:#fde68a; color:#92400e; }
.scope-chip.kind-project { background:#dbeafe; border-color:#bfdbfe; color:#1e40af; }
.scope-chip.kind-team { background:#dcfce7; border-color:#bbf7d0; color:#166534; }
.scope-chip.kind-employee { background:#cffafe; border-color:#a5f3fc; color:#0e7490; }
.scope-chip .x {
  background:rgba(0,0,0,0.1); color: inherit; border:none; border-radius:50%;
  width:16px; height:16px; cursor:pointer; font-size:11px; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.scope-chip .x:hover { background: rgba(220,38,38,0.2); }

/* Scope picker modal */
.scope-picker {
  background:#fff; border-radius:14px; width:min(560px, 92vw); max-height:80vh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.scope-tabs { display:flex; gap:0; border-bottom: 1px solid #e2e8f0; padding: 0 16px; }
.scope-tab {
  background:none; border:none; padding: 12px 16px; font-size:13px; font-weight:600;
  color: var(--text-3); cursor:pointer; border-bottom: 2px solid transparent; font-family:inherit;
}
.scope-tab:hover { color: var(--text); }
.scope-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.scope-picker > .admin-search { margin: 12px 16px; }
.scope-picker-list { flex:1; overflow-y:auto; padding: 0 16px 16px; }
.scope-picker-item {
  display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius:8px; cursor:pointer;
  border:1px solid transparent;
}
.scope-picker-item:hover { background:#f8fafc; border-color:#e2e8f0; }
.scope-picker-item.selected { background:#eff6ff; border-color: var(--primary); }
.scope-picker-item .icon { width: 28px; text-align:center; font-size:16px; }
.scope-picker-item .main { flex:1; min-width:0; }
.scope-picker-item .main strong { display:block; font-size:13px; color: var(--text); }
.scope-picker-item .main small { display:block; font-size:11px; color: var(--text-3); margin-top: 2px; }
.scope-picker-item input[type=checkbox] { width:16px; height:16px; cursor:pointer; }

/* Picker wide tree view */
.scope-picker-wide { width:min(820px, 96vw); max-height:90vh; height: 720px; }
.picker-toolbar { display:flex; gap:8px; padding: 12px 20px; flex-wrap:wrap; align-items:center; border-bottom:1px solid #f1f5f9; background:#fafbfc; }
.picker-toolbar .admin-search { flex:1; min-width: 220px; }
.picker-filter {
  padding: 8px 10px; border:1px solid #e2e8f0; border-radius:8px; font-size:13px;
  font-family:inherit; background:#fff; cursor:pointer; min-width:160px;
}
.picker-toolbar .btn-secondary { padding: 7px 12px; font-size:12px; }
.picker-summary {
  padding: 8px 20px; background:#eff6ff; border-bottom:1px solid #dbeafe;
  font-size:13px; color: #1e40af; font-weight:600;
}
.picker-summary:empty { display:none; }
.scope-tree { flex:1; overflow-y:auto; padding: 12px 20px; }
.tree-node { user-select:none; }
.tree-row {
  display:flex; align-items:center; gap:8px; padding: 7px 10px; border-radius:8px;
  cursor:pointer; border:1px solid transparent;
}
.tree-row:hover { background:#f8fafc; border-color:#e2e8f0; }
.tree-row.picked { background:#dbeafe; border-color:#93c5fd; }
.tree-row.parent-picked { background:#eff6ff; border-color: transparent; opacity:0.7; }
.tree-row.parent-picked .tree-checkbox { opacity:0.4; }
.tree-row .tree-toggle { width:18px; text-align:center; color: var(--text-3); flex-shrink:0; cursor:pointer; }
.tree-row .tree-toggle:hover { color: var(--text); }
.tree-row .tree-toggle.no-children { visibility:hidden; }
.tree-row .tree-checkbox { width:18px; height:18px; cursor:pointer; flex-shrink:0; }
.tree-row .tree-icon { font-size:16px; width:24px; text-align:center; flex-shrink:0; }
.tree-row .tree-label { flex:1; min-width:0; }
.tree-row .tree-label strong { display:block; font-size:13px; color: var(--text); font-weight:600; }
.tree-row .tree-label small { display:block; font-size:11px; color: var(--text-3); margin-top:1px; }
.tree-row .tree-count { font-size:11px; color: var(--text-3); background:#f1f5f9; padding: 2px 8px; border-radius:10px; }
.tree-children { padding-left: 28px; border-left: 2px dashed #e2e8f0; margin-left: 12px; }
.tree-children.collapsed { display:none; }
.picker-footer {
  display:flex; justify-content:space-between; gap:8px;
  padding: 14px 20px; border-top:1px solid #e2e8f0; background:#fafbfc;
}

/* Refresh button */
.refresh-btn { margin-bottom: 8px; position: relative; }
.refresh-btn .refresh-ts { display:block; font-size:10px; font-weight:500; color: var(--text-3); width:100%; text-align:left; padding-left: 24px; margin-top: 2px; }
.refresh-btn.loading i { animation: spin 1s linear infinite; }
.refresh-btn.loading { background:#dbeafe; color: var(--primary); }

/* Toast notification */
.toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#16a34a; color:#fff; padding: 10px 20px; border-radius:8px;
  font-size:13px; font-weight:600; z-index:10000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  opacity:0; transition: opacity .2s, transform .2s;
}
.toast.show { opacity:1; transform: translateX(-50%) translateY(-4px); }
.toast.error { background:#dc2626; }

/* ============ WIZARD admin user ============ */
.wizard-progress {
  display:flex; align-items:center; gap:8px; padding: 16px 24px; background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
}
.wiz-step { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-3); }
.wiz-step .wiz-num {
  width:28px; height:28px; border-radius:50%; background:#e2e8f0; color:#475569;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.wiz-step.active .wiz-num { background: var(--primary); color:#fff; }
.wiz-step.done .wiz-num { background:#16a34a; color:#fff; }
.wiz-step.active .wiz-lbl { color: var(--text); font-weight:700; }
.wiz-step.done .wiz-lbl { color: #166534; }
.wiz-line { flex:1; height:2px; background:#e2e8f0; min-width:30px; }
.wiz-step.done + .wiz-line { background:#86efac; }

.wizard-summary {
  padding: 10px 24px; background:#eff6ff; color:#1e40af;
  font-size:13px; display:flex; gap:12px; flex-wrap:wrap; border-bottom:1px solid #dbeafe;
}
.wizard-summary:empty { display:none; }
.wizard-summary .sum-tag {
  background:#fff; padding: 3px 10px; border-radius:10px; font-weight:600; font-size:12px;
  border:1px solid #dbeafe;
}

.wizard-body { flex:1; overflow-y:auto; padding: 24px; }
.wizard-body h3 { margin: 0 0 8px; font-size:18px; font-weight:800; color: var(--text); }
.wizard-body .wiz-help { margin: 0 0 18px; font-size:13px; color: var(--text-3); }

/* Card grid (market/role/project/team) */
.choice-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.choice-card {
  background:#fff; border:2px solid #e2e8f0; border-radius:12px; padding:16px;
  cursor:pointer; transition: all 0.15s; text-align:left; font-family:inherit;
  display:flex; gap:12px; align-items:flex-start;
}
.choice-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.1); }
.choice-card.selected { border-color: var(--primary); background:#eff6ff; }
.choice-card.selected::after {
  content: '✓'; position: absolute; right: 12px; top: 12px;
  background: var(--primary); color:#fff; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.choice-card { position:relative; }
.choice-card .choice-icon { font-size:26px; line-height:1; flex-shrink:0; }
.choice-card .choice-main { flex:1; min-width:0; padding-right:28px; }
.choice-card .choice-main strong { display:block; font-size:14px; font-weight:700; color: var(--text); margin-bottom:3px; }
.choice-card .choice-main small { display:block; font-size:12px; color: var(--text-3); line-height:1.4; }

/* Role chỉnh sửa — disabled (ngoài quyền actor) */
.choice-card.disabled {
  background: repeating-linear-gradient(135deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px);
  border-color: #e2e8f0;
  cursor: not-allowed;
  opacity: 0.72;
}
.choice-card.disabled:hover {
  border-color: #e2e8f0;
  transform: none;
  box-shadow: none;
}
.choice-card.disabled .choice-icon { filter: grayscale(0.6); opacity: 0.7; }
.choice-card.disabled .choice-main strong { color: #64748b; }
.role-lock-hint {
  display: inline-flex !important;
  align-items: center; gap: 5px;
  margin-top: 4px;
  font-size: 11px !important;
  color: #94a3b8 !important;
  font-weight: 500;
}
.role-lock-hint i { font-size: 10px; }
.role-current-badge {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: linear-gradient(135deg, var(--primary, #1877f2), var(--accent, #ea7c3f));
  color: #fff;
  border-radius: 999px;
  vertical-align: middle;
}

/* Employee/team list (có search) */
.choice-search { margin-bottom: 12px; padding: 10px 14px; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; font-family:inherit; width:100%; }
.choice-search:focus { outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.choice-list { display:flex; flex-direction:column; gap:6px; max-height:420px; overflow-y:auto; }
.choice-item {
  display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius:8px;
  border:1px solid #e2e8f0; cursor:pointer; background:#fff;
}
.choice-item:hover { background:#f8fafc; border-color: var(--primary); }
.choice-item.selected { background:#eff6ff; border-color: var(--primary); }
.choice-item .ci-icon { font-size:16px; }
.choice-item .ci-main { flex:1; min-width:0; }
.choice-item .ci-main strong { display:block; font-size:13px; color: var(--text); }
.choice-item .ci-main small { display:block; font-size:11px; color: var(--text-3); }
.choice-item input[type=checkbox] { width:18px; height:18px; }

.wiz-info-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; max-width:600px; }
.wiz-info-grid > label.full { grid-column: 1 / -1; }
.wiz-info-grid label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color: var(--text-2); }
.wiz-info-grid input[type=text], .wiz-info-grid input[type=password] {
  padding: 10px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; font-family:inherit;
}
.wiz-info-grid input:focus { outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.wiz-info-grid .auth-check { flex-direction:row; align-items:center; font-weight:500; }

.wizard-footer { display:flex; justify-content:space-between; padding:16px 24px; border-top:1px solid #e2e8f0; background:#fafbfc; }
.wizard-footer-right { display:flex; gap:8px; }

/* Admin trang full-page (không phải modal popup) */
.admin-fullpage {
  position: fixed; inset: 0; z-index: 9999;
  background: #f8fafc;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.admin-fullpage .admin-shell {
  width: 100%; height: 100%; max-width: none; max-height: none;
  border-radius: 0; box-shadow: none;
}
.admin-fullpage .admin-head {
  padding: 16px 32px;
}
.admin-fullpage .admin-head h2 { font-size: 22px; }
.admin-fullpage .admin-grid {
  padding: 20px 32px;
  max-width: 1400px; margin: 0 auto; width: 100%;
}
.admin-fullpage .admin-form,
.admin-fullpage .wizard-body,
.admin-fullpage .wizard-progress,
.admin-fullpage .wizard-summary,
.admin-fullpage .wizard-footer {
  max-width: 1100px; margin-left: auto; margin-right: auto; width: 100%;
}
.admin-fullpage .wizard-body { padding: 32px; }

/* ============================================================
   ADMIN PANEL REDESIGN — đồng bộ design dashboard
   ============================================================ */

/* Override admin-fullpage: bg dịu, không dark overlay */
.admin-fullpage {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-alt);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.admin-fullpage .admin-shell {
  width: 100%; height: 100%; max-width: none; max-height: none;
  border-radius: 0; box-shadow: none; background: transparent;
}

/* Header bar — slim, refined */
.admin-fullpage .admin-head {
  padding: 16px 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  max-width: none;
}
.admin-fullpage .admin-head h2 {
  font-size: 18px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em; margin: 0;
}
.admin-fullpage .admin-sub {
  font-size: 12px; color: var(--text-3); margin-top: 2px;
  font-weight: 500;
}
.admin-fullpage .admin-head-actions { gap: 10px; }

.admin-fullpage .btn-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-3); font-size: 14px;
}
.admin-fullpage .btn-close:hover {
  background: var(--bg-soft); color: var(--text);
  border-color: var(--border-strong);
}
.admin-fullpage #admin-edit-back {
  padding: 7px 14px; font-size: 12px; font-weight: 600;
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  border-radius: 8px; width: auto;
}
.admin-fullpage #admin-edit-back:hover { background: var(--bg-soft); color: var(--primary); }

/* Buttons polish */
.admin-fullpage .btn-primary {
  background: var(--primary); color: #fff; border: none;
  padding: 9px 16px; border-radius: 8px;
  font-weight: 600; font-size: 13px; cursor: pointer;
  box-shadow: var(--shadow-xs); transition: background .15s;
}
.admin-fullpage .btn-primary:hover { background: var(--primary-dark); }
.admin-fullpage .btn-secondary {
  background: var(--bg); color: var(--text-2); border: 1px solid var(--border);
  padding: 9px 16px; border-radius: 8px;
  font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s;
}
.admin-fullpage .btn-secondary:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); }

/* Search input */
.admin-fullpage .admin-search {
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; min-width: 260px; background: var(--bg);
  color: var(--text); font-weight: 500;
}
.admin-fullpage .admin-search::placeholder { color: var(--text-4); font-weight: 500; }
.admin-fullpage .admin-search:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* === LIST VIEW: card user gọn lại === */
.admin-fullpage .admin-grid {
  padding: 20px 32px;
  max-width: 1200px; margin: 0 auto; width: 100%;
  gap: 10px;
}
.admin-fullpage .user-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; box-shadow: var(--shadow-xs);
  grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  transition: border-color .15s, box-shadow .15s;
}
.admin-fullpage .user-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.admin-fullpage .user-card.disabled { opacity: 0.55; background: var(--bg-soft); }

.admin-fullpage .user-card-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: #fff;
  box-shadow: var(--shadow-xs);
}
.admin-fullpage .user-card-avatar.super_admin { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.admin-fullpage .user-card-avatar.project_lead { background: linear-gradient(135deg, #ea580c, #9a3412); }
.admin-fullpage .user-card-avatar.project_accountant { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.admin-fullpage .user-card-avatar.team_lead { background: linear-gradient(135deg, #16a34a, #166534); }
.admin-fullpage .user-card-avatar.employee { background: linear-gradient(135deg, #0891b2, #155e75); }
.admin-fullpage .user-card-avatar.viewer { background: linear-gradient(135deg, #64748b, #334155); }

.admin-fullpage .user-card-name { gap: 6px; }
.admin-fullpage .user-card-name strong { font-size: 14px; font-weight: 700; color: var(--text); }
.admin-fullpage .user-card-name code {
  background: var(--bg-soft); padding: 1px 6px; border-radius: 4px;
  font-size: 11px; color: var(--text-3);
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
}

.admin-fullpage .user-card-meta { margin-top: 5px; gap: 6px; font-size: 11px; }
.admin-fullpage .user-card-meta .badge-role {
  padding: 2px 8px; border-radius: 4px; font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.02em;
}
.admin-fullpage .badge-role.super_admin { background: var(--danger-soft); color: var(--danger-strong); }
.admin-fullpage .badge-role.project_lead { background: var(--warning-soft); color: var(--warning-strong); }
.admin-fullpage .badge-role.project_accountant { background: #e0f2fe; color: #075985; }
.admin-fullpage .badge-role.team_lead { background: var(--success-soft); color: var(--success-strong); }
.admin-fullpage .badge-role.employee { background: #e0f2fe; color: #0c4a6e; }
.admin-fullpage .badge-role.viewer { background: var(--bg-soft); color: var(--text-3); }
.admin-fullpage .badge-disabled {
  background: var(--bg-soft); color: var(--text-3); padding: 2px 8px; border-radius: 4px;
  font-weight: 600; font-size: 10.5px;
}
.admin-fullpage .user-card-meta .last-login { color: var(--text-4); font-weight: 500; }

.admin-fullpage .user-card-scope { gap: 4px; margin-top: 6px; }
.admin-fullpage .user-card-scope .scope-pill {
  background: var(--blue-50); color: var(--primary-deep);
  padding: 2px 8px; border-radius: 10px;
  font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--blue-100);
}
.admin-fullpage .user-card-scope .scope-pill.all {
  background: var(--warning-soft); color: var(--warning-strong);
  border-color: #fde68a;
}

.admin-fullpage .user-card-actions { gap: 6px; }
.admin-fullpage .user-card-actions button {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 12px; font-size: 11.5px; font-weight: 600; color: var(--text-3);
  transition: all .15s;
}
.admin-fullpage .user-card-actions button:hover {
  background: var(--primary-soft); border-color: var(--primary);
  color: var(--primary);
}
.admin-fullpage .user-card-actions .danger:hover {
  background: var(--danger-soft); border-color: var(--danger);
  color: var(--danger);
}

/* === WIZARD: progress bar refined === */
.admin-fullpage .wizard-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 18px 32px;
  background: var(--bg); border-bottom: 1px solid var(--border);
  max-width: none;
}
.admin-fullpage .wiz-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-4);
  font-weight: 600; padding: 0 4px;
}
.admin-fullpage .wiz-step .wiz-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-soft); color: var(--text-4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
  border: 1.5px solid var(--border);
  transition: all .2s;
}
.admin-fullpage .wiz-step.active .wiz-num {
  background: var(--primary); color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.admin-fullpage .wiz-step.done .wiz-num {
  background: var(--success); color: #fff;
  border-color: var(--success);
}
.admin-fullpage .wiz-step.active .wiz-lbl { color: var(--text); font-weight: 700; }
.admin-fullpage .wiz-step.done .wiz-lbl { color: var(--success-strong); font-weight: 600; }
.admin-fullpage .wiz-line {
  width: 36px; height: 1.5px; background: var(--border);
  margin: 0 2px;
}
.admin-fullpage .wiz-step.done + .wiz-line { background: var(--success); }

/* Summary tags */
.admin-fullpage .wizard-summary {
  padding: 10px 32px; background: var(--bg);
  border-bottom: 1px solid var(--border);
  color: var(--text-2); font-size: 12px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  max-width: none;
}
.admin-fullpage .wizard-summary:empty { display: none; }
.admin-fullpage .wizard-summary .sum-tag {
  background: var(--blue-50); padding: 3px 10px; border-radius: 12px;
  font-weight: 600; font-size: 11px; color: var(--primary-deep);
  border: 1px solid var(--blue-100);
}

/* Wizard body — content centered, generous */
.admin-fullpage .wizard-body {
  padding: 28px 32px; max-width: 920px;
  margin: 0 auto; width: 100%; flex: 1; overflow-y: auto;
}
.admin-fullpage .wizard-body h3 {
  margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--text);
  letter-spacing: -0.005em;
}
.admin-fullpage .wizard-body .wiz-help {
  margin: 0 0 20px; font-size: 12.5px; color: var(--text-3);
  font-weight: 500; line-height: 1.5;
}

/* Choice cards — refined */
.admin-fullpage .choice-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.admin-fullpage .choice-card {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 14px;
  cursor: pointer; transition: all .15s;
  gap: 11px; align-items: flex-start;
  font-family: inherit; text-align: left;
  box-shadow: var(--shadow-xs);
}
.admin-fullpage .choice-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-soft);
  transform: none;
  box-shadow: var(--shadow-sm);
}
.admin-fullpage .choice-card.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-sm);
}
.admin-fullpage .choice-card.selected::after {
  content: '✓'; position: absolute; right: 10px; top: 10px;
  background: var(--primary); color: #fff;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 700;
}
.admin-fullpage .choice-card .choice-icon {
  font-size: 22px; line-height: 1; flex-shrink: 0;
}
.admin-fullpage .choice-card .choice-main { padding-right: 24px; }
.admin-fullpage .choice-card .choice-main strong {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  margin-bottom: 2px; letter-spacing: -0.005em;
}
.admin-fullpage .choice-card .choice-main small {
  font-size: 11.5px; color: var(--text-3); line-height: 1.4;
  font-weight: 500;
}

/* Choice list (search-based) */
.admin-fullpage .choice-search {
  margin-bottom: 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; width: 100%; background: var(--bg);
  color: var(--text); font-weight: 500;
}
.admin-fullpage .choice-search::placeholder { color: var(--text-4); }
.admin-fullpage .choice-search:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.admin-fullpage .choice-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 480px; overflow-y: auto;
  padding: 4px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 10px;
}
.admin-fullpage .choice-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  border: 1px solid transparent; cursor: pointer;
  background: var(--bg); transition: all .12s;
}
.admin-fullpage .choice-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.admin-fullpage .choice-item.selected {
  background: var(--primary-soft); border-color: var(--primary);
  box-shadow: var(--shadow-xs);
}
.admin-fullpage .choice-item input[type=checkbox] {
  width: 16px; height: 16px; accent-color: var(--primary);
  cursor: pointer;
}
.admin-fullpage .choice-item .ci-icon { font-size: 14px; }
.admin-fullpage .choice-item .ci-main strong {
  font-size: 13px; color: var(--text); font-weight: 600;
}
.admin-fullpage .choice-item .ci-main small {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
  font-weight: 500;
}
.admin-fullpage .choice-item .ci-main code {
  background: var(--bg-soft); padding: 1px 5px; border-radius: 3px;
  font-size: 10.5px; color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}

/* Wizard info form */
.admin-fullpage .wiz-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 640px;
}
.admin-fullpage .wiz-info-grid > label.full { grid-column: 1 / -1; }
.admin-fullpage .wiz-info-grid label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  letter-spacing: 0.005em;
}
.admin-fullpage .wiz-info-grid input[type=text],
.admin-fullpage .wiz-info-grid input[type=password] {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; background: var(--bg); color: var(--text);
  font-family: inherit; font-weight: 500;
}
.admin-fullpage .wiz-info-grid input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.admin-fullpage .wiz-info-grid input[readonly] {
  background: var(--bg-soft); color: var(--text-3);
}
.admin-fullpage .wiz-info-grid .auth-check {
  flex-direction: row; align-items: center; font-weight: 500;
  font-size: 12.5px; color: var(--text-2);
}
.admin-fullpage .wiz-info-grid .auth-check input[type=checkbox] {
  width: 16px; height: 16px; accent-color: var(--primary);
}

/* Footer */
.admin-fullpage .wizard-footer {
  display: flex; justify-content: space-between;
  padding: 14px 32px; background: var(--bg);
  border-top: 1px solid var(--border);
  max-width: none;
  box-shadow: 0 -1px 3px rgba(15,23,42,.03);
}
.admin-fullpage .wizard-footer-right { gap: 8px; }

/* Error text */
.admin-fullpage .auth-err {
  padding: 0 32px; font-size: 12.5px; font-weight: 600;
  color: var(--danger); min-height: 18px;
}


/* ============ USER TABLE — compact Excel style ============ */
.admin-fullpage .admin-grid { padding: 16px 28px; max-width: 1400px; margin: 0 auto; gap: 0; }
.user-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; box-shadow: var(--shadow-xs);
  font-size: 12.5px;
}
.user-table th, .user-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: middle;
}
.user-table thead th {
  background: var(--bg-soft); font-weight: 700; font-size: 11px;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1.5px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
.user-table tbody tr:last-child td { border-bottom: none; }
.user-table tbody tr.user-row:hover td { background: var(--bg-alt); }
.user-table tbody tr.disabled td { opacity: 0.55; }

.user-table .cell-user { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.user-row-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: var(--shadow-xs);
}
.user-row-avatar.super_admin { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.user-row-avatar.project_lead { background: linear-gradient(135deg, #ea580c, #9a3412); }
.user-row-avatar.project_accountant { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.user-row-avatar.team_lead { background: linear-gradient(135deg, #16a34a, #166534); }
.user-row-avatar.employee { background: linear-gradient(135deg, #0891b2, #155e75); }
.user-row-avatar.viewer { background: linear-gradient(135deg, #64748b, #334155); }
.user-row-name { min-width: 0; line-height: 1.3; }
.user-row-name strong { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.user-row-name code {
  display: inline-block; font-size: 10.5px; color: var(--text-3);
  font-family: 'JetBrains Mono', monospace; background: var(--bg-soft);
  padding: 1px 5px; border-radius: 3px; margin-top: 1px;
}

.user-table .cell-role { white-space: nowrap; }
.user-table .badge-role {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
}

.user-table .cell-tick {
  text-align: center; width: 36px;
  color: var(--success); font-weight: 700; font-size: 13px;
  position: relative;
}
.user-table .cell-tick:empty::before { content: ''; }
/* Trạng thái: bật/tắt/kế thừa */
.user-table .cell-tick.mk-off { color: #cbd5e1; }
.user-table .cell-tick.mk-inherit { color: #f59e0b; }   /* ◐ vàng cam: kế thừa qua project */
/* Click-to-toggle market — hover nhẹ, KHÔNG đổi icon để tránh click nhầm */
.user-table .cell-tick.clickable {
  cursor: pointer;
  transition: background .14s, box-shadow .14s;
  border-radius: 6px;
}
.user-table .cell-tick.clickable:hover {
  background: #f1f5f9;
  box-shadow: inset 0 0 0 1.5px #cbd5e1;
}
.user-table .cell-tick.clickable.mk-on:not(.mk-inherit):hover { background: #fef2f2; box-shadow: inset 0 0 0 1.5px #fca5a5; }
.user-table .cell-tick.clickable.mk-inherit:hover { background: #fff7ed; box-shadow: inset 0 0 0 1.5px #fdba74; }
.user-table .cell-tick.clickable.mk-off:hover { background: #ecfdf5; box-shadow: inset 0 0 0 1.5px #86efac; }
.user-table .cell-tick.mk-saving { opacity: 0.5; pointer-events: none; }
/* Cell đang được mở popover → highlight ring */
.user-table .cell-tick.mk-active-pop {
  background: #dbeafe;
  box-shadow: inset 0 0 0 2px var(--primary, #1877f2);
}

/* === Market toggle confirm popover === */
.mk-confirm-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: transparent;   /* không che mờ — gọn nhẹ */
}
.mk-confirm-pop {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  padding: 14px;
  animation: mkPopIn .15s ease-out;
  z-index: 10001;
}
@keyframes mkPopIn { from { opacity: 0; transform: translateY(-6px) scale(.97) } to { opacity: 1; transform: translateY(0) scale(1) } }
.mk-confirm-arrow {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 13px; height: 13px;
  background: #fff;
  border-top: 1px solid var(--border, #e2e8f0);
  border-left: 1px solid var(--border, #e2e8f0);
}
.mk-confirm-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border, #e2e8f0);
}
.mk-confirm-flag { font-size: 26px; line-height: 1; }
.mk-confirm-head-text { flex: 1; min-width: 0; }
.mk-confirm-head-text strong { display: block; font-size: 14px; color: var(--text, #0f172a); font-weight: 700; }
.mk-confirm-head-text small { display: block; font-size: 12px; color: var(--text-3, #64748b); margin-top: 1px; }
.mk-confirm-head-text small b { color: var(--text, #0f172a); font-weight: 600; }

.mk-confirm-children {
  margin: 10px 0 4px;
  padding: 10px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 12px;
  color: #78350f;
  display: flex; gap: 8px;
}
.mk-confirm-children > i { color: #d97706; font-size: 14px; padding-top: 1px; }
.mk-confirm-children b { font-weight: 700; }
.mk-confirm-children ul { margin: 4px 0 0; padding-left: 16px; line-height: 1.6; }
.mk-confirm-children li { font-size: 11.5px; }

.mk-confirm-actions {
  display: flex; gap: 8px; margin-top: 12px;
}
.mk-btn-cancel {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--text, #0f172a);
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.mk-btn-cancel:hover { background: #f8fafc; border-color: #cbd5e1; }
.mk-btn-cancel:focus { outline: 2px solid var(--primary, #1877f2); outline-offset: 1px; }
.mk-btn-confirm {
  flex: 1.4;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.mk-btn-confirm.primary {
  background: linear-gradient(135deg, var(--primary, #1877f2), #2563eb);
  color: #fff;
  box-shadow: 0 2px 6px rgba(24,119,242,.25);
}
.mk-btn-confirm.primary:hover { box-shadow: 0 4px 12px rgba(24,119,242,.35); transform: translateY(-1px); }
.mk-btn-confirm.danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  box-shadow: 0 2px 6px rgba(220,38,38,.25);
}
.mk-btn-confirm.danger:hover { box-shadow: 0 4px 12px rgba(220,38,38,.35); transform: translateY(-1px); }

/* === Toast (undo) === */
.mk-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: 12px;
  background: #0f172a; color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  z-index: 10005;
  opacity: 0;
  transition: all .2s;
  max-width: 90vw;
  font-size: 13px;
}
.mk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mk-toast > i { font-size: 18px; }
.mk-toast.added > i { color: #4ade80; }
.mk-toast.removed > i { color: #fb923c; }
.mk-toast b { font-weight: 700; }
.mk-toast small { display: block; font-size: 11px; opacity: 0.75; margin-top: 1px; }
.mk-toast-undo {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
  white-space: nowrap;
}
.mk-toast-undo:hover { background: rgba(255,255,255,.22); }

.user-table .cell-scope {
  font-size: 11px; max-width: 200px;
  display: table-cell;
}
.user-table .cell-chip {
  display: inline-block; background: var(--blue-50); color: var(--primary-deep);
  padding: 1px 7px; border-radius: 10px; font-size: 10.5px;
  font-weight: 600; margin-right: 3px; margin-bottom: 2px;
  border: 1px solid var(--blue-100);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle;
}
.user-table .cell-chip.more {
  background: var(--bg-soft); color: var(--text-3); border-color: var(--border);
}
.user-table .cell-empty { color: var(--text-5); font-size: 11px; }
.user-table .cell-all {
  background: var(--warning-soft); color: var(--warning-strong);
  padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600;
  border: 1px solid #fde68a;
}

.user-table .cell-status { text-align: center; width: 32px; }
.user-table .dot-active { color: var(--success); font-size: 14px; }
.user-table .badge-disabled {
  background: var(--bg-soft); color: var(--text-3);
  padding: 2px 6px; border-radius: 4px; font-size: 11px;
}

.user-table .cell-last { font-size: 11px; color: var(--text-3); white-space: nowrap; }

.user-table .cell-act { text-align: right; white-space: nowrap; }
.user-table .cell-act button {
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 4px 7px; font-size: 13px; cursor: pointer; margin-left: 2px;
  transition: all .12s;
}
.user-table .cell-act button:hover {
  background: var(--primary-soft); border-color: var(--primary);
}
.user-table .cell-act .danger:hover {
  background: var(--danger-soft); border-color: var(--danger);
}

/* === USER TABLE — siêu compact, fit 70+ user trong 1 view === */
.admin-fullpage .admin-grid { padding: 14px 24px; max-width: 1280px; }
.user-table { font-size: 11.5px; }
.user-table th, .user-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
}
.user-table thead th {
  padding: 7px 8px; font-size: 10px;
  font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Columns sizing — siêu nhỏ */
.user-table .cell-no { width: 28px; text-align: center; color: var(--text-4); font-variant-numeric: tabular-nums; font-size: 11px; }
.user-table .cell-username { width: 110px; }
.user-table .cell-username code {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: var(--bg-soft); padding: 2px 6px; border-radius: 3px;
  color: var(--text); font-weight: 500;
}
.user-table .cell-name { font-weight: 600; color: var(--text); font-size: 12px; }
.user-table .cell-role { width: 90px; white-space: nowrap; }
.user-table .badge-role {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
}
.user-table .cell-tick { width: 32px; text-align: center; color: var(--success); font-weight: 700; font-size: 12.5px; }
.user-table .cell-tick:empty::after { content: ''; }

.user-table .cell-scope-mini { width: 140px; }
.user-table .scope-mini {
  display: inline-block; background: var(--blue-50);
  color: var(--primary-deep); padding: 1px 7px; border-radius: 8px;
  font-size: 10.5px; font-weight: 700; margin-right: 3px;
  border: 1px solid var(--blue-100);
}
.user-table .cell-all {
  background: var(--warning-soft); color: var(--warning-strong);
  padding: 1px 8px; border-radius: 8px; font-size: 10.5px; font-weight: 700;
  border: 1px solid #fde68a;
}
.user-table .cell-empty { color: var(--text-5); }

.user-table .cell-status { width: 28px; text-align: center; }
.user-table .dot-active { color: var(--success); font-size: 11px; }

.user-table .cell-last { width: 120px; font-size: 10.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.user-table .cell-act { width: 60px; text-align: right; white-space: nowrap; }
.user-table .cell-act button {
  background: transparent; border: 1px solid transparent;
  border-radius: 5px; padding: 3px 6px; font-size: 12px;
  cursor: pointer; margin-left: 1px;
}
.user-table .cell-act button:hover { background: var(--primary-soft); }
.user-table .cell-act .danger:hover { background: var(--danger-soft); }

/* Wizard inline actions — ngay sau content, không sticky bottom */
.admin-fullpage .wizard-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.admin-fullpage .wizard-actions #wizard-prev { margin-right: auto; }
.admin-fullpage #admin-user-err {
  padding: 0; margin-top: 12px;
  font-size: 12.5px; font-weight: 600;
  color: var(--danger); min-height: 0;
}
.admin-fullpage #admin-user-err:empty { margin-top: 0; }

/* === FILTER ROW + SORTABLE HEADER === */
.user-table th.sortable { cursor: pointer; user-select: none; }
.user-table th.sortable:hover { background: var(--bg-soft); color: var(--text); }
.user-table th.col-filter-active { background: var(--primary-soft) !important; color: var(--primary) !important; }

.user-table thead tr.filter-row th {
  padding: 5px 6px; background: var(--bg);
  border-bottom: 1.5px solid var(--border);
  position: sticky; top: 28px; z-index: 1;
}
.user-table .filter-input, .user-table .filter-select {
  width: 100%; padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 5px; font-size: 11px; font-family: inherit;
  background: var(--bg); color: var(--text); font-weight: 500;
}
.user-table .filter-input::placeholder { color: var(--text-4); font-size: 10.5px; }
.user-table .filter-input:focus, .user-table .filter-select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.user-table .filter-active-dot { color: var(--primary); font-size: 12px; }
.user-table .filter-clear {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid #fecaca; border-radius: 5px;
  padding: 3px 8px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.user-table .filter-clear:hover { background: var(--danger); color: #fff; }

/* Search box trong header bar — nâng cấp UX */
.admin-fullpage .admin-search {
  min-width: 320px; transition: min-width .2s;
}
.admin-fullpage .admin-search:focus { min-width: 380px; }

/* === EXCEL-LIKE TABLE — override tất cả styling cũ === */
.admin-fullpage .admin-grid { padding: 16px 24px; max-width: 1280px; gap: 0; display: block; }

.user-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100%;
  font-size: 13px;
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.user-table th, .user-table td {
  padding: 6px 10px !important;
  border-bottom: 1px solid var(--border) !important;
  border-right: none !important;
  line-height: 18px;
  vertical-align: middle;
  height: 32px;
  box-sizing: border-box;
}
.user-table thead th {
  background: var(--bg-soft);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1.5px solid var(--border-strong) !important;
  padding: 8px 10px !important;
  white-space: nowrap;
  text-align: left;
}
.user-table thead th.cell-tick { text-align: center; }
.user-table tbody tr { height: 32px; }
.user-table tbody tr.user-row:hover td { background: var(--bg-alt); }
.user-table tbody tr.disabled td { opacity: 0.5; }
.user-table tbody tr:last-child td { border-bottom: none !important; }

/* Filter row */
.user-table thead tr.filter-row th {
  background: var(--bg);
  padding: 4px 6px !important;
  height: 30px;
  border-bottom: 1.5px solid var(--border-strong) !important;
}
.user-table .filter-input, .user-table .filter-select {
  width: 100%; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px; font-family: inherit;
  background: var(--bg); color: var(--text);
  height: 24px; line-height: 16px;
  box-sizing: border-box;
}
.user-table .filter-input::placeholder { color: var(--text-4); font-size: 11px; }
.user-table .filter-input:focus, .user-table .filter-select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

/* Cell sizes */
.user-table .cell-no { width: 36px !important; text-align: center; color: var(--text-4); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.user-table .cell-username { width: 130px !important; }
.user-table .cell-username code {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background: var(--bg-soft); padding: 2px 7px; border-radius: 3px;
  color: var(--text); font-weight: 500; display: inline-block;
}
.user-table .cell-name { font-size: 13px; font-weight: 500; color: var(--text); }
.user-table .cell-role { width: 110px !important; }
.user-table .cell-role .badge-role {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
}
.user-table .cell-tick { width: 36px !important; text-align: center; color: var(--success); font-weight: 700; font-size: 13px; }
.user-table .cell-scope-mini { width: 130px !important; }
.user-table .cell-scope-mini .scope-mini {
  display: inline-block; background: var(--blue-50); color: var(--primary-deep);
  padding: 1px 7px; border-radius: 8px; font-size: 11px;
  font-weight: 600; margin-right: 3px;
  border: 1px solid var(--blue-100);
}
.user-table .cell-all {
  background: var(--warning-soft); color: var(--warning-strong);
  padding: 2px 8px; border-radius: 8px; font-size: 11px;
  font-weight: 600; border: 1px solid #fde68a;
}
.user-table .cell-status { width: 30px !important; text-align: center; }
.user-table .dot-active { color: var(--success); font-size: 11px; }
.user-table .cell-last { width: 130px !important; font-size: 11.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.user-table .cell-act { width: 70px !important; text-align: right; white-space: nowrap; }
.user-table .cell-act button {
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  padding: 3px 7px; font-size: 13px; cursor: pointer; margin-left: 1px;
}
.user-table .cell-act button:hover { background: var(--primary-soft); border-color: var(--blue-200); }
.user-table .cell-act .danger:hover { background: var(--danger-soft); border-color: #fecaca; }

/* Sort hint */
.user-table th.sortable { cursor: pointer; user-select: none; }
.user-table th.sortable:hover { background: var(--bg); color: var(--text); }

/* Breadcrumb back to dashboard */
.admin-breadcrumb { display: flex; align-items: center; gap: 12px; }
.bc-back {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.bc-back:hover {
  background: var(--primary-soft); border-color: var(--primary);
  color: var(--primary);
}
.bc-back i { font-size: 11px; }
.bc-sep { color: var(--text-4); font-size: 14px; font-weight: 300; }
.bc-title h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.bc-title small { font-size: 12px; color: var(--text-3); margin-top: 1px; display: block; }

/* === REFRESH BUTTON — compact 1 dòng === */
.sidebar-bottom { padding: 10px; gap: 6px; }
.sidebar-bottom .settings-btn,
.sidebar-bottom .refresh-btn {
  padding: 7px 10px; font-size: 12px; gap: 8px;
  border-radius: 8px;
}
.refresh-btn {
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.refresh-btn i { font-size: 12px; }
.refresh-btn > span {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text);
}
.refresh-btn .refresh-ts {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: auto;
  padding-left: 0;
  text-align: right;
  margin-top: 0;
  width: auto;
  white-space: nowrap;
}
.refresh-btn:hover { background: #e8effa; border-color: var(--blue-200); }
.refresh-btn:hover .refresh-ts { color: var(--primary); }
.refresh-btn.loading { background: var(--blue-50); border-color: var(--blue-200); }
.refresh-btn.loading > span { color: var(--primary); }

/* Group chip cho project name — hiển thị dự án mẹ (XDP, AVB, AVER, BAHA, LIGHT) */
.project-group-chip {
  display: inline-block;
  padding: 1px 8px;
  background: var(--blue-50);
  color: var(--primary);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
  margin-right: 4px;
}


/* ============================================================
   BIRD'S-EYE CEO COCKPIT
   ============================================================ */

/* --- Tài chính row: 4 ô lớn --- */
.ceo-fin-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 6px;
}
.ceo-fin-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
}
.ceo-fin-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--primary);
}
.ceo-fin-revenue::before { background: #15803d; }
.ceo-fin-profit::before  { background: #1877f2; }
.ceo-fin-profit.bad::before { background: #b91c1c; }
.ceo-fin-margin::before  { background: #1d4ed8; }
.ceo-fin-roas::before    { background: #ea7c3f; }
.ceo-fin-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.ceo-fin-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1;
}
.ceo-fin-card.bad .ceo-fin-value { color: #b91c1c; }
.ceo-fin-value small {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 4px;
}
.ceo-fin-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ceo-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
}
.ceo-kpi-delta.positive { color: #15803d; background: rgba(21,128,61,.1); }
.ceo-kpi-delta.negative { color: #b91c1c; background: rgba(185,28,28,.1); }
.ceo-kpi-delta.neutral  { color: var(--text-3); background: rgba(100,116,139,.08); }
.ceo-fin-sub {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}

/* --- Note dưới tài chính --- */
.ceo-fin-note {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fef9e7;
  border: 1px solid #facc15;
  border-radius: 8px;
  font-size: 12.5px;
  color: #713f12;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.ceo-fin-note i { color: #ca8a04; margin-top: 2px; flex-shrink: 0; }

/* --- Group summary cards (5 ô) --- */
.ceo-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.ceo-group-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .15s, transform .15s;
}
.ceo-group-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.ceo-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.ceo-group-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
}
.ceo-group-leader {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ceo-group-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.ceo-group-rev .lbl,
.ceo-group-roas .lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-3);
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 2px;
}
.ceo-group-rev strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}
.ceo-group-roas {
  text-align: right;
  padding: 6px 12px;
  border-radius: 8px;
}
.ceo-group-roas strong {
  font-size: 18px;
  font-weight: 800;
}
.ceo-group-roas.good  { background: rgba(21,128,61,.1);  color: #15803d; }
.ceo-group-roas.warn  { background: rgba(180,83,9,.1);   color: #b45309; }
.ceo-group-roas.bad   { background: rgba(185,28,28,.1);  color: #b91c1c; }
.ceo-group-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.ceo-group-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.ceo-group-stats .lbl {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 500;
}
.ceo-group-stats .val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ceo-group-stats .val.good { color: #15803d; }
.ceo-group-stats .val.bad  { color: #b91c1c; }
.ceo-group-stats .val.warn { color: #b45309; }
.ceo-group-foot {
  font-size: 11.5px;
  color: var(--text-3);
  display: flex;
  gap: 14px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.ceo-group-foot i { margin-right: 4px; color: var(--primary); }

/* --- Bảng dự án sortable: tận dụng .mkt-rank-table có sẵn --- */
.ceo-proj-row:hover { background: var(--blue-50); }
#table-ceo-projects th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
#table-ceo-projects th.sortable .sort-arrow {
  display: inline-block;
  margin-left: 3px;
  color: var(--primary);
  font-size: 10px;
}

/* --- Action items --- */
.ceo-action {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.ceo-action:hover { background: var(--blue-50); }
.ceo-action:last-child { border-bottom: 0; }
.ceo-action-ico {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.ceo-action.crit .ceo-action-ico { background: rgba(185,28,28,.12); color: #b91c1c; }
.ceo-action.warn .ceo-action-ico { background: rgba(180,83,9,.12); color: #b45309; }
.ceo-action.info .ceo-action-ico { background: rgba(24,119,242,.10); color: #1877f2; }
.ceo-action-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.ceo-action-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.ceo-action-stat {
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}
.ceo-action-stat small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  margin-top: 2px;
}

/* --- Mobile --- */
@media (max-width: 980px) {
  .ceo-fin-row { grid-template-columns: repeat(2, 1fr); }
  .ceo-fin-value { font-size: 24px; }
  .ceo-group-grid { grid-template-columns: 1fr; }
}

/* === Sync indicator (non-clickable, replace sync button) === */
.sync-indicator { cursor: default !important; }
.sync-indicator:hover { transform: none !important; box-shadow: 0 6px 18px rgba(24,119,242,.32) !important; }
.sync-indicator i { animation: none !important; }

/* Sidebar refresh status (non-clickable) */
.refresh-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--blue-50);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.refresh-status i { color: #15803d; font-size: 12px; }
.refresh-status > span { font-weight: 600; flex: 0 0 auto; }
.refresh-status .refresh-ts {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: auto;
  white-space: nowrap;
}

/* ============================================================
   HÌNH THỨC ADS — CD vs IB (Module 1+2+3+5)
   ============================================================ */
.format-compare-card { padding: 18px; }
.format-compare-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: center;
}
.format-donut-wrap {
  position: relative;
  height: 280px;
}
.format-donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  width: 60%;
}
.format-donut-center .fdc-main {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.format-donut-center .fdc-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  font-weight: 600;
  white-space: nowrap;
}
.format-compare-table-wrap { overflow-x: auto; }
.format-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.format-compare-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #f8fafc;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.format-compare-table th.num { text-align: right; }
.format-compare-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.format-compare-table td.num { text-align: right; }
.format-compare-table tr.row-cd { background: rgba(24,119,242,.04); }
.format-compare-table tr.row-ib { background: rgba(234,124,63,.04); }
.format-compare-table td.cd-win { background: rgba(21,128,61,.12); color: #14532d; font-weight: 700; }
.format-compare-table td.ib-win { background: rgba(21,128,61,.12); color: #14532d; font-weight: 700; }

/* Matrix product × format: thêm visual phân biệt CD vs IB columns */
#table-product-format th.cd-col,
#table-product-format td.cd-col { background: rgba(24,119,242,.05); }
#table-product-format th.ib-col,
#table-product-format td.ib-col { background: rgba(234,124,63,.05); }
#table-product-format td.win-badge { color: #15803d; font-weight: 800; }

/* IB Fanpage table */
#table-ib-fanpage td.col-name strong { color: var(--text); }
#table-ib-fanpage td.col-name small { font-size: 10px; }

@media (max-width: 980px) {
  .format-compare-grid { grid-template-columns: 1fr; }
  .format-donut-wrap { height: 180px; }
}

/* === Market view: CD/IB strip === */
.market-format-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.format-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.format-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 15px;
}
.format-card-head .format-pct {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
}
.format-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.format-card-metrics > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dashed var(--border);
  padding: 6px 0;
}
.format-card-metrics .lbl {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 500;
}
.format-card-metrics .val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.format-card-metrics .val.negative { color: #b91c1c; }
.format-card-metrics .val.amber    { color: #d97706; }
.format-card-metrics .val.positive { color: #15803d; }
@media (max-width: 980px) {
  .market-format-strip { grid-template-columns: 1fr; }
  .format-card-metrics { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION — comprehensive (≤768px)
   Mục tiêu: cầm ĐT vẫn dùng được, scroll mượt, số liệu thẳng hàng
   ═══════════════════════════════════════════════════════════════ */

/* Smooth scroll iOS/Android cho mọi container scroll */
.table-container,
.modal-body,
.modal-box,
.insight-table-wrap,
.mkt-rank-table,
.prod-perf-table,
.prod-perf-summary,
.insight-kpi-strip {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Scrollbar visible mobile — user biết có thể scroll ngang */
@media (max-width: 980px) {
  .table-container::-webkit-scrollbar,
  .modal-body::-webkit-scrollbar {
    height: 6px; width: 6px;
  }
  .table-container::-webkit-scrollbar-thumb,
  .modal-body::-webkit-scrollbar-thumb {
    background: rgba(24,119,242,0.4); border-radius: 3px;
  }
  .table-container::-webkit-scrollbar-track,
  .modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
}

/* ─── MODAL — fit mobile screen, no overflow ─── */
@media (max-width: 768px) {
  .modal-bg { padding: 8px; align-items: flex-start; }
  .modal-box, .modal-box.modal-box-wide,
  .modal-box.modal-box-wide.cols-7,
  .modal-box.modal-box-wide.cols-6,
  .modal-box.modal-box-wide.cols-5,
  .modal-box.modal-box-wide.cols-4 {
    max-width: 100% !important;
    max-height: 95vh;
    margin: 0;
    border-radius: 10px;
  }
  .modal-head { padding: 12px 14px; gap: 8px; }
  .modal-head h3 {
    font-size: 14px !important;
    line-height: 1.35;
    word-break: break-word;
  }
  .modal-head h3 code { font-size: 11px !important; display: block; margin-top: 4px; }
  .modal-close { width: 32px; height: 32px; flex-shrink: 0; }
  .modal-help { padding: 0 14px; font-size: 11.5px; margin: -2px 0 10px; }
  .modal-body { padding: 12px 14px; }
}

/* ─── PROD PERF MODAL — summary grid + table cho mobile ─── */
@media (max-width: 768px) {
  .prod-perf-summary {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 10px;
    padding: 10px 12px;
    margin: 0 14px 10px;
  }
  .prod-perf-summary > div { gap: 2px; }
  .prod-perf-summary .lbl { font-size: 9.5px; line-height: 1.3; }
  .prod-perf-summary strong { font-size: 13px; }
  .prod-perf-insight { padding: 0 14px; margin: 0 0 10px; }
  .ppi-row { padding: 7px 10px; font-size: 12px; line-height: 1.45; }
  /* Table horizontal scroll smooth */
  .prod-perf-table {
    font-size: 11.5px;
    min-width: 720px;   /* force scroll thay vì wrap nát */
  }
  .prod-perf-table th, .prod-perf-table td { padding: 7px 8px; }
  .prod-perf-table .emp-cell { min-width: 110px; }
  .prod-perf-table .prod-perf-accs code { font-size: 9.5px; padding: 1px 4px; }
}
@media (max-width: 480px) {
  .prod-perf-summary { grid-template-columns: repeat(2, 1fr); }
  .modal-head h3 { font-size: 13px !important; }
  .modal-head h3 i { font-size: 16px; }
}

/* ─── CPL / Test Spend modal summary — responsive ─── */
@media (max-width: 768px) {
  .cpl-modal-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 10px; padding: 10px 12px;
  }
  .cpl-modal-summary .lbl { font-size: 9.5px; }
  .cpl-modal-summary strong, .cpl-modal-summary .val { font-size: 13px; }
}

/* ─── ALL TABLES — horizontal scroll mượt + sticky header ─── */
@media (max-width: 980px) {
  .table-container {
    overflow-x: auto;
    overflow-y: visible;
    /* Smooth scroll snap optional */
  }
  .mkt-rank-table {
    min-width: 720px;
    font-size: 12px;
  }
  .mkt-rank-table th,
  .mkt-rank-table td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }
  .mkt-rank-table th.num,
  .mkt-rank-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  /* Tight variant cho insight tables */
  .mkt-rank-table-tight { min-width: 600px; font-size: 11.5px; }
  .mkt-rank-table-tight th, .mkt-rank-table-tight td { padding: 6px 8px !important; }
}

/* ─── KPI GRID — chuyển sang 2 cột mobile ─── */
@media (max-width: 768px) {
  .mkt-kpi-grid,
  .mkt-kpi-grid-compact {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .mkt-kpi-card {
    padding: 10px 12px !important;
    min-height: auto;
  }
  .mkt-kpi-card .kpi-label { font-size: 10.5px !important; }
  .mkt-kpi-card .kpi-value { font-size: 17px !important; line-height: 1.2; }
  .mkt-kpi-card .kpi-sub { font-size: 10.5px !important; line-height: 1.3; }
}
@media (max-width: 480px) {
  .mkt-kpi-grid,
  .mkt-kpi-grid-compact { grid-template-columns: repeat(2, 1fr) !important; }
  .mkt-kpi-card .kpi-value { font-size: 16px !important; }
}

/* ─── INSIGHT KPI STRIP — 2 cột mobile ─── */
@media (max-width: 480px) {
  .insight-kpi-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .insight-kpi-strip .val { font-size: 13px !important; }
  .insight-kpi-strip .lbl { font-size: 9.5px !important; }
}

/* ─── INSIGHT MATRIX (Tuổi × Giới) — h-scroll ─── */
@media (max-width: 768px) {
  .insight-table-wrap { overflow-x: auto; }
  .insight-matrix { min-width: 560px; font-size: 11.5px; }
  .insight-matrix th, .insight-matrix td { padding: 6px 8px; }
  .ins-cell-spend strong { font-size: 12px; }
  .ins-cell-meta { font-size: 10px; }
  .ins-blended-banner { font-size: 11px; padding: 8px 12px; }
  .ins-blended-banner > small { font-size: 10px; padding-left: 16px; }
}

/* ─── SIDEBAR — toggle button mobile (overlay drawer pattern) ─── */
@media (max-width: 1100px) {
  /* Đã có .sidebar { transform: translateX(-100%) } */
  .sidebar.open { transform: translateX(0); box-shadow: 0 10px 40px rgba(0,0,0,0.18); z-index: 9999; }
  /* Backdrop khi sidebar open */
  body.sidebar-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.5);
    z-index: 9998;
  }
}
/* Toggle button — FLOATING top-left, luôn nổi trên mọi content.
   Anh Vinh 2026-07-08: mặc định sidebar ẨN → nút này là entry point duy nhất để mở lại. */
.sidebar-toggle-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  position: fixed; top: 16px; left: 16px;
  width: 36px; height: 36px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer;
  font-size: 15px; color: var(--text-2);
  transition: transform .22s ease, background .15s, border-color .15s, color .15s, left .22s ease;
  z-index: 25;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
.sidebar-toggle-btn:hover {
  background: var(--bg-soft); border-color: var(--primary); color: var(--primary);
  transform: scale(1.05);
}
/* Khi sidebar đang MỞ (không collapsed) → nút vào TRONG sidebar, góc trên phải như nút đóng */
@media (min-width: 1101px) {
  body:not(.sidebar-collapsed) .sidebar-toggle-btn {
    left: 182px;   /* sidebar 230 - btn 36 - padding 12 = 182 → nằm gọn trong sidebar top-right */
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
    z-index: 25;
  }
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  body.sidebar-collapsed .main { margin-left: 0; padding-left: 68px; transition: margin-left .22s ease, padding-left .22s ease; }
  .sidebar { transition: transform .22s ease; }
  .main { transition: margin-left .22s ease, padding-left .22s ease; }
  /* Sidebar mở → chừa chỗ trên cùng cho nút toggle không đè brand box */
  body:not(.sidebar-collapsed) .brand { padding-right: 44px; }
}
/* Mobile: nút ở góc trên, khi drawer mở → vào trong drawer top-right */
@media (max-width: 1100px) {
  .sidebar-toggle-btn { top: 12px; left: 12px; }
  body.sidebar-open .sidebar-toggle-btn {
    left: 182px;
    background: var(--primary-soft); border-color: var(--primary); color: var(--primary);
    z-index: 10000;
  }
  body.sidebar-open .brand { padding-right: 44px; }
}

/* ─── HEADER — wrap & gọn cho mobile ─── */
@media (max-width: 768px) {
  .breadcrumb-bar {
    flex-wrap: wrap; gap: 8px; padding: 8px 12px !important;
  }
  .mkt-toolbar {
    flex-wrap: wrap; gap: 6px; padding: 8px 12px !important;
  }
  .preset-chip { padding: 5px 10px !important; font-size: 11.5px !important; }
}

/* ─── PROJECT/TEAM CARDS — metric grid 3 cột mobile ─── */
@media (max-width: 640px) {
  .project-card-metrics,
  .team-card-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px 6px !important;
  }
  .project-card-metrics .lbl,
  .team-card-metrics .lbl { font-size: 9.5px !important; min-height: 24px !important; }
  .project-card-metrics .val,
  .team-card-metrics .val { font-size: 13px !important; }
}

/* ─── FUNNEL GRID + DD GRID — cell padding gọn mobile ─── */
@media (max-width: 640px) {
  .funnel-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
  .dx-card { padding: 10px 12px !important; }
}

/* ─── ALERTS — gọn padding ─── */
@media (max-width: 640px) {
  .ins-alert { padding: 8px 10px !important; gap: 8px; }
  .ins-alert-title { font-size: 12px !important; }
  .ins-alert-action { font-size: 11.5px !important; }
}

/* ─── NUMBER ALIGNMENT — đảm bảo mọi cột số align phải + monospace ─── */
.mkt-rank-table .num,
.prod-perf-table .num,
.insight-matrix .num,
table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
/* Header cột số cũng align phải, không xuống dòng */
.mkt-rank-table th.num,
.prod-perf-table th.num {
  text-align: right;
  white-space: nowrap;
}

/* ─── INPUT/BUTTON touch target 44px theo Apple HIG ─── */
@media (pointer: coarse) {
  button, .preset-chip, .mkt-tab, .nav-item, .market-chip {
    min-height: 38px;
  }
}

/* ============================================================
   DARK THEME — toggle qua [data-theme="dark"] trên <html>
   Lưu vào localStorage.bica.theme
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Surfaces — tone slate-900/800 dịu mắt, không đen tuyền */
  --bg: #0f172a;
  --bg-alt: #0b1220;
  --bg-soft: #1e293b;
  --bg-elevate: #1e293b;

  /* Text — invert slate scale, vẫn giữ thứ bậc */
  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --text-4: #64748b;
  --text-5: #475569;

  /* Borders */
  --border: #334155;
  --border-strong: #475569;

  /* Primary giữ Facebook blue nhưng đẩy nhạt 1 chút cho contrast trên nền tối */
  --primary: #3b8af7;
  --primary-dark: #1877f2;
  --primary-soft: rgba(59, 138, 247, 0.18);
  --primary-soft-2: rgba(59, 138, 247, 0.28);

  /* Accent + status — tăng alpha soft */
  --accent-soft: rgba(234, 124, 63, 0.22);
  --success-soft: rgba(22, 163, 74, 0.22);
  --success-strong: #4ade80;
  --warning-soft: rgba(217, 119, 6, 0.22);
  --warning-strong: #fbbf24;
  --danger-soft: rgba(220, 38, 38, 0.22);
  --danger-strong: #fca5a5;

  /* Shadows mạnh hơn để card nổi trên nền tối */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, .45);
  --shadow: 0 4px 16px rgba(0, 0, 0, .55);
}

/* Smooth transition khi toggle theme */
:root[data-theme="dark"] body,
:root[data-theme="dark"] body * {
  transition: background-color .25s ease, color .2s ease, border-color .2s ease;
}

/* Patches cho hardcoded colors phổ biến */
:root[data-theme="dark"] .user-table td.cell-last .last-warn.amber {
  background: rgba(217, 119, 6, .25); color: #fcd34d; border-color: rgba(217, 119, 6, .45);
}
:root[data-theme="dark"] .user-table td.cell-last .last-warn.red {
  background: rgba(220, 38, 38, .25); color: #fca5a5; border-color: rgba(220, 38, 38, .45);
}
:root[data-theme="dark"] .atb-select-wrap.atb-select-last select.atb-select {
  border-color: #b45309; background: rgba(217, 119, 6, .18); color: var(--text);
}
:root[data-theme="dark"] .atb-search-box,
:root[data-theme="dark"] .atb-select,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--bg-soft); color: var(--text); border-color: var(--border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--text-4); }

/* Card surfaces — chỗ hardcoded bg #fff/section-card */
:root[data-theme="dark"] .section-card,
:root[data-theme="dark"] .kpi-card,
:root[data-theme="dark"] .insight-card,
:root[data-theme="dark"] .mkt-card,
:root[data-theme="dark"] .admin-fullpage,
:root[data-theme="dark"] .user-menu-dropdown,
:root[data-theme="dark"] .ipop,
:root[data-theme="dark"] .mk-confirm-pop,
:root[data-theme="dark"] .role-pop {
  background: var(--bg-elevate);
  border-color: var(--border);
  color: var(--text);
}

/* Bảng */
:root[data-theme="dark"] table { color: var(--text); }
:root[data-theme="dark"] table thead { background: var(--bg-soft); }
:root[data-theme="dark"] table tr:hover { background: rgba(59, 138, 247, .08); }

/* Group header trong admin grid */
:root[data-theme="dark"] .user-table .group-header td {
  background: var(--bg-soft); color: var(--text-2);
}

/* Chip / badge giữ contrast */
:root[data-theme="dark"] .cell-chip { background: var(--bg-soft); color: var(--text-2); border-color: var(--border); }
:root[data-theme="dark"] .badge-role { filter: brightness(1.1); }

/* Nút theme trong header — icon đổi giữa moon/sun, hover nhẹ */
#btn-theme i { transition: transform .25s ease, color .2s ease; }
#btn-theme:hover i { transform: rotate(-15deg); }
:root[data-theme="dark"] #btn-theme i { color: #fbbf24; }

/* Empty state khi filter ra 0 kết quả — toolbar vẫn hiển thị phía trên */
.user-table tr.empty-row td.empty-cell { padding: 0; background: transparent; }
.empty-state {
  padding: 56px 24px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.empty-state .empty-icon { font-size: 38px; color: var(--text-4); opacity: 0.6; }
.empty-state .empty-title { font-size: 15px; font-weight: 700; color: var(--text-2); }
.empty-state .empty-sub { font-size: 13px; color: var(--text-3); max-width: 380px; line-height: 1.55; }
.empty-state .empty-reset {
  margin-top: 8px; background: var(--primary); color: #fff; border: none;
  padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background .15s ease;
}
.empty-state .empty-reset:hover { background: var(--primary-dark); }

/* ════════════════════════════════════════════════════════════════════════════
   INSIGHT Nỗi đau / Test view
   ════════════════════════════════════════════════════════════════════════════ */
#insights-nd-root { padding: 16px 24px 60px; max-width: 1400px; }

.insights-hero {
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, var(--bg-elevate) 0%, var(--bg-soft) 100%);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hero-stat {
  padding: 16px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.hero-stat-label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.hero-stat-value { font-size: 24px; font-weight: 800; color: var(--text); }
.hero-stat-value small { font-size: 13px; color: var(--text-3); font-weight: 600; }
.hero-stat.has-data { border-color: #16a34a; background: rgba(22, 163, 74, 0.06); }
.hero-stat.has-data .hero-stat-value { color: #16a34a; }
.hero-stat.no-data { border-color: #f59e0b; background: rgba(245, 158, 11, 0.06); opacity: 0.85; }

.insights-empty {
  text-align: center;
  padding: 40px 24px;
  background: var(--bg-elevate);
  border-radius: 14px;
  border: 2px dashed var(--border);
  margin-bottom: 24px;
}
.insights-empty .empty-icon { font-size: 48px; color: #f59e0b; margin-bottom: 12px; }
.insights-empty h2 { margin: 0 0 12px; font-size: 22px; color: var(--text); }
.insights-empty > p { color: var(--text-2); max-width: 720px; margin: 0 auto 24px; line-height: 1.6; }
.insights-empty code { background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--primary); }

.insights-guide {
  text-align: left;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background: var(--bg-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.insights-guide h3 { margin: 0 0 12px; font-size: 15px; color: var(--text); }
.guide-formula { font-size: 14px; color: var(--text-2); margin: 0 0 16px; }
.guide-formula code { display: inline-block; padding: 6px 10px; background: var(--bg); border-radius: 6px; font-size: 12px; color: var(--text); border: 1px solid var(--border); }
.guide-examples {
  width: 100%; border-collapse: collapse; margin-bottom: 16px;
  font-size: 13px;
}
.guide-examples th, .guide-examples td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border);
}
.guide-examples th { background: var(--bg); color: var(--text-2); font-weight: 700; font-size: 12px; }
.guide-examples code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--text); }
.guide-examples b { color: var(--primary); }

.guide-codes { margin-top: 16px; }
.guide-codes summary { cursor: pointer; padding: 8px 12px; background: var(--bg); border-radius: 6px; font-size: 13px; color: var(--text); }
.dict-block { margin-top: 14px; }
.dict-block h4 { margin: 0 0 6px; font-size: 13px; color: var(--text); }
.dict-block h4 small { color: var(--text-3); font-weight: 500; }
.dict-block ul { margin: 0; padding-left: 20px; }
.dict-block li { padding: 4px 0; font-size: 13px; color: var(--text-2); }
.dict-block li b { color: var(--primary); margin-right: 6px; }
.dict-block li small { color: var(--text-3); font-style: italic; margin-left: 6px; }

.insights-section {
  margin-bottom: 32px;
  background: var(--bg-elevate);
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.insights-section h2 { margin: 0 0 4px; font-size: 18px; color: var(--text); display: flex; align-items: center; gap: 10px; }
.insights-section h2 i { color: var(--primary); }
.section-sub { margin: 0 0 16px; font-size: 13px; color: var(--text-3); }

.insights-table-wrap { overflow-x: auto; }
.insights-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.insights-table th, .insights-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border);
}
.insights-table th {
  background: var(--bg);
  color: var(--text-2);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.insights-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.insights-table tbody tr:hover { background: var(--bg-soft); }

.roas-good { color: #16a34a; }
.roas-ok   { color: #eab308; }
.roas-bad  { color: #dc2626; }

.ind-tag { display: inline-block; padding: 2px 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; font-size: 11px; font-weight: 700; color: var(--text-2); }
.emp-chip { display: inline-block; padding: 2px 8px; background: rgba(59, 130, 246, 0.1); color: var(--primary); border-radius: 8px; font-size: 12px; font-weight: 600; }
.pain-chip { display: inline-block; padding: 2px 8px; background: rgba(244, 114, 182, 0.12); color: #db2777; border-radius: 8px; font-size: 11px; font-weight: 700; }
.test-chip { display: inline-block; padding: 2px 8px; background: rgba(168, 85, 247, 0.12); color: #9333ea; border-radius: 8px; font-size: 11px; font-weight: 700; }
.ver-pill { display: inline-block; padding: 3px 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; font-size: 12px; margin-right: 6px; margin-bottom: 4px; }
.ver-pill.winner { background: rgba(22, 163, 74, 0.15); border-color: #16a34a; color: #16a34a; }
.muted-row { text-align: center; color: var(--text-3); font-style: italic; padding: 16px; }

@media (max-width: 800px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  #insights-nd-root { padding: 12px; }
  .insights-section { padding: 14px; }
}

/* Pain tab in project view */
code.pain-code { background: rgba(244, 114, 182, 0.15); color: #db2777; padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 12px; }
small.pain-ind { display: inline-block; margin-left: 8px; padding: 1px 6px; background: var(--bg-soft); border-radius: 8px; font-size: 10px; font-weight: 600; color: var(--text-3); }

.pain-empty-card {
  margin-top: 12px;
  padding: 28px 24px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(244, 114, 182, 0.04));
  border: 2px dashed rgba(245, 158, 11, 0.35);
  border-radius: 14px;
  text-align: center;
}
.pain-empty-icon { font-size: 36px; color: #f59e0b; margin-bottom: 12px; }
.pain-empty-card h3 { margin: 0 0 10px; font-size: 18px; color: var(--text); }
.pain-empty-card p { margin: 6px auto; max-width: 680px; color: var(--text-2); line-height: 1.55; font-size: 14px; }
.pain-empty-card code { background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; color: #db2777; }
.pain-empty-cta { font-weight: 600; color: var(--text) !important; }
.pain-empty-source { font-size: 12px; color: var(--text-3) !important; margin-top: 14px !important; }

.pain-guide-table {
  margin: 18px auto;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pain-guide-table th, .pain-guide-table td { padding: 8px 14px; border-bottom: 1px solid var(--border); }
.pain-guide-table th { background: var(--bg-soft); font-size: 11px; text-transform: uppercase; color: var(--text-2); }
.pain-guide-table tr:last-child td { border-bottom: none; }
.pain-guide-table code { background: transparent; padding: 0; color: var(--text-2); font-size: 11px; }
.pain-guide-table code b { color: #db2777; }

/* Tab "Tài chính (P&L)" ẨN VĨNH VIỄN khỏi tab bar — chỉ vào được qua KPI card P&L */
.mkt-tab.pl-hidden-tab { display: none !important; }

/* RBAC: ẨN card P&L + panel finance cho team_lead/employee — chỉ super_admin + project_lead xem được */
/* Ẩn HOÀN TOÀN P&L (Tài chính) cho team_lead/employee — theo spec
   KHÔNG ẩn .kpi-payroll (Bảng lương) — leader xem team, NV xem cá nhân */
body.rbac-no-finance .mkt-kpi-card.kpi-pl,
body.rbac-no-finance [data-panel="finance"] { display: none !important; }

/* KPI card BẢNG LƯƠNG — tone xanh dương (blue-600) đồng bộ brand */
.mkt-kpi-card.kpi-payroll { border-left: 3px solid #2563eb; transition: var(--transition); cursor: pointer; }
.mkt-kpi-card.kpi-payroll:hover { background: rgba(37, 99, 235, .04); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(37, 99, 235, .12); }
.mkt-kpi-card.kpi-payroll .kpi-label i { color: #2563eb; margin-right: 4px; }
.mkt-kpi-card.kpi-payroll-unset { border-left-color: #94a3b8; }
.mkt-kpi-card.kpi-payroll-unset .kpi-label i { color: #94a3b8; }
.mkt-kpi-card.kpi-payroll-loading { border-left-color: #cbd5e1; cursor: default; opacity: .7; }
/* Ẩn số lương ở KPI strip — chỉ hiện icon lock */
.mkt-kpi-card.kpi-payroll .kpi-value.kpi-payroll-hidden {
  color: #94a3b8;
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mkt-kpi-card.kpi-payroll .kpi-value.kpi-payroll-hidden i { font-size: 22px; }
.mkt-kpi-card.kpi-payroll:hover .kpi-value.kpi-payroll-hidden { color: #2563eb; }

/* ═════════════════════════════════════════
   PAYROLL MODAL — Bảng lương MKTer
   ═════════════════════════════════════════ */
/* ═══════════ PAYROLL MODAL (Bảng lương) — layout thoáng, hierarchy rõ ═══════════ */
.payroll-modal { max-width: min(1360px, 96vw) !important; width: 96vw; }
.payroll-modal .opex-modal-body { padding: 22px 24px; background: var(--bg, #fff); }

/* Header row: month picker (left) + fallback hint (right, grows) */
.payroll-month-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px dashed var(--border); }
.payroll-month-header .opex-month-picker { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.payroll-month-header .opex-month-picker label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.payroll-month-header .opex-month-picker select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; background: var(--bg-elevate, #fff); color: var(--text-1); font-weight: 600; cursor: pointer; min-width: 130px; }
.payroll-month-header .opex-month-picker select:hover { border-color: var(--primary, #2563eb); }
.payroll-month-header .opex-month-hint { flex: 1; padding: 8px 12px; border-radius: 7px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.payroll-month-header .opex-month-hint.ok { background: rgba(16, 185, 129, .08); color: #047857; }
.payroll-month-header .opex-month-hint.fallback { background: rgba(245, 158, 11, .08); color: #92400e; }
.payroll-month-header .opex-month-hint.empty { background: rgba(245, 158, 11, .12); color: #92400e; }

/* Grid 2 cột (legacy, giữ để không break các UI khác) */
.payroll-form-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; align-items: flex-start; }
@media (max-width: 1100px) { .payroll-form-grid { grid-template-columns: 1fr; } }

/* NEW LAYOUT: Preview full-width hero, tiers 2 cols */
.payroll-preview-section { background: linear-gradient(135deg, rgba(37, 99, 235, .04) 0%, rgba(37, 99, 235, .01) 100%); border-color: rgba(37, 99, 235, .25); }
.payroll-preview-section > h4 { margin-bottom: 14px; font-size: 14.5px; }
.payroll-tiers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .payroll-tiers-grid { grid-template-columns: 1fr; } }
.payroll-tiers-grid > .payroll-section { margin-bottom: 0; }

/* Section = card độc lập, chỉn chu */
.payroll-section {
  background: var(--bg-elevate, #fff); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.payroll-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.payroll-section-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.payroll-section-head h4 i { color: #2563eb; font-size: 15px; }
.payroll-section > h4 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.payroll-section > h4 i { color: #2563eb; font-size: 15px; }

/* Table inside section — dùng cho NV list + tiers */
.payroll-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.payroll-table thead th {
  padding: 8px 10px; text-align: left; font-weight: 600; font-size: 11.5px;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .4px;
  background: var(--bg-soft, #f8fafc); border-bottom: 1px solid var(--border);
}
.payroll-table thead th:first-child { border-radius: 6px 0 0 0; }
.payroll-table thead th:last-child { border-radius: 0 6px 0 0; }
.payroll-table tbody td { padding: 8px 6px; border-bottom: 1px solid rgba(226, 232, 240, .6); vertical-align: middle; }
.payroll-table tbody tr:last-child td { border-bottom: none; }
.payroll-table tbody tr:hover { background: rgba(37, 99, 235, .02); }
.payroll-table input, .payroll-table select {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; font-family: inherit; background: var(--bg-elevate, #fff); color: var(--text-1);
  transition: border-color .15s, box-shadow .15s;
}
.payroll-table input:focus, .payroll-table select:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.payroll-table select { cursor: pointer; }
.payroll-table .opex-input-suffix { position: relative; display: block; }
.payroll-table .opex-input-suffix input { padding-right: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.payroll-table .opex-input-suffix .opex-suffix-badge {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; color: var(--text-3); font-weight: 600; pointer-events: none;
}

/* Empty state row */
.payroll-table .empty-row td { text-align: center; color: var(--text-4); padding: 20px 8px; font-size: 12.5px; font-style: italic; }

/* Cell: input Đến DT + toggle ∞ inline */
.pl-tier-to { display: flex; align-items: center; gap: 6px; }
.pl-tier-to .opex-input-suffix { flex: 1; }
.pl-tier-inf { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--text-3); cursor: pointer; background: var(--bg-elevate, #fff); user-select: none; transition: all .15s; flex-shrink: 0; }
.pl-tier-inf input { display: none; }
.pl-tier-inf:hover { border-color: #2563eb; color: #2563eb; }
.pl-tier-inf.active { background: rgba(37, 99, 235, .1); border-color: #2563eb; color: #2563eb; }

/* Buttons */
.pl-btn-add {
  background: rgba(37, 99, 235, .08); color: #2563eb;
  border: 1px solid rgba(37, 99, 235, .3); padding: 6px 12px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: all .15s;
}
.pl-btn-add:hover { background: rgba(37, 99, 235, .18); border-color: #2563eb; }
.pl-btn-add i { font-size: 10px; }

.pl-btn-del {
  background: transparent; border: 1px solid transparent; color: #94a3b8; cursor: pointer;
  width: 30px; height: 30px; border-radius: 6px; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
}
.pl-btn-del:hover { background: rgba(239, 68, 68, .1); color: #dc2626; border-color: rgba(239, 68, 68, .2); }

.pl-btn-danger {
  background: transparent; color: #dc2626; border: 1px solid rgba(239, 68, 68, .3);
  padding: 8px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s;
}
.pl-btn-danger:hover { background: rgba(239, 68, 68, .08); border-color: #dc2626; }

.payroll-hint {
  font-size: 12px; color: var(--text-3); margin: 10px 0 0; line-height: 1.55;
  padding: 8px 12px; background: var(--bg-soft, #f8fafc); border-radius: 6px; border-left: 3px solid rgba(37, 99, 235, .3);
}
.payroll-hint code { background: rgba(37, 99, 235, .1); color: #1d4ed8; padding: 2px 6px; border-radius: 4px; font-size: 11.5px; font-weight: 600; font-family: 'Fira Code', monospace; }

.payroll-notes-field { margin-top: 14px; }
.payroll-notes-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.payroll-notes-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; resize: vertical; background: var(--bg-elevate, #fff); color: var(--text-1); }
.payroll-notes-field textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

/* Preview column — sticky */
.payroll-col-right { position: sticky; top: 8px; }
.payroll-preview-empty { padding: 40px 20px; text-align: center; color: var(--text-4); font-size: 13px; background: var(--bg-soft, #f8fafc); border-radius: 8px; border: 1px dashed var(--border); }
.payroll-preview-empty i { font-size: 28px; margin-bottom: 10px; color: var(--text-4); }

.payroll-preview-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); }
.payroll-preview-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px;
  background: var(--bg-elevate, #fff);
}
.payroll-preview-table thead th {
  background: #2563eb; color: #fff; font-weight: 600; padding: 9px 6px;
  text-align: right; font-size: 10.5px; letter-spacing: .3px; text-transform: uppercase;
  white-space: nowrap; position: sticky; top: 0;
}
.payroll-preview-table thead th:first-child { text-align: left; padding-left: 12px; }
.payroll-preview-table tbody td { padding: 9px 6px; border-bottom: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payroll-preview-table tbody td:first-child { text-align: left; padding-left: 12px; }
.payroll-preview-table tbody tr:hover { background: rgba(37, 99, 235, .03); }
.payroll-preview-table tbody td.pl-zero { color: var(--text-4); }
.payroll-preview-table tbody td.positive { color: #059669; font-weight: 700; }
.payroll-preview-table tbody td.negative { color: #dc2626; font-weight: 700; }
.payroll-preview-table tbody td.pl-total { font-weight: 700; color: #2563eb; font-size: 12.5px; }
.payroll-preview-table tfoot td { background: rgba(37, 99, 235, .08); font-weight: 700; padding: 10px 6px; border-top: 2px solid #2563eb; text-align: right; font-variant-numeric: tabular-nums; }
.payroll-preview-table tfoot td:first-child { text-align: left; padding-left: 12px; }
.payroll-preview-table tfoot td.pl-total { color: #2563eb; font-size: 13.5px; }

/* ═════════════════════════════════════════
   PAYROLL CONFIG VIEW (fullscreen, thay modal popup)
   ═════════════════════════════════════════ */
body.payroll-config-view-active section.view[data-view="project"] > *:not(#payroll-config-container) { display: none !important; }
body.payroll-config-view-active #breadcrumb-bar,
body.payroll-config-view-active #page-context-header,
body.payroll-config-view-active #payroll-view-container { display: none !important; }

#payroll-config-container { display: flex; flex-direction: column; min-height: 100vh; padding: 0; }
.pl-cfg-view-header { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--bg-elevate, #fff); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.pl-cfg-view-title { flex: 1; margin: 0; font-size: 18px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-cfg-view-title i { color: #2563eb; }
.pl-cfg-view-title span { color: var(--text-3); font-weight: 500; font-size: 14px; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-cfg-view-header-actions { display: flex; align-items: center; gap: 12px; }
.pl-cfg-view-header-actions .opex-month-picker { display: flex; align-items: center; gap: 8px; }
.pl-cfg-view-header-actions .opex-month-picker label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pl-cfg-view-header-actions .opex-month-picker select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--bg-elevate, #fff); font-weight: 600; cursor: pointer; }

/* ═══ Month Picker v2 (prev / [icon month/year ▾] / next) ═══ */
.month-picker-v2 {
  display: inline-flex; align-items: stretch;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s, box-shadow .15s;
  vertical-align: middle;
}
.month-picker-v2:hover { border-color: #93c5fd; box-shadow: 0 2px 8px rgba(37, 99, 235, .08); }
.month-picker-v2:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }

.mp-nav-btn {
  width: 34px;
  padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: #64748b;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  font-size: 12px;
}
.mp-nav-btn:hover { background: rgba(37, 99, 235, .08); color: #2563eb; }
.mp-nav-btn:active { background: rgba(37, 99, 235, .16); }
.mp-nav-btn:disabled { opacity: .3; cursor: not-allowed; background: transparent !important; color: #94a3b8 !important; }

.mp-select-wrap {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  transition: background .15s;
  min-width: 130px;
}
.mp-select-wrap:hover { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }

.mp-icon {
  color: #2563eb;
  font-size: 14px;
  flex-shrink: 0;
}

.mp-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: transparent; border: none; outline: none;
  font-size: 14.5px; font-weight: 700; color: #0f172a;
  padding: 0; margin: 0;
  cursor: pointer;
  flex: 1;
  min-width: 60px;
  font-family: inherit;
  letter-spacing: .2px;
}
.mp-select::-ms-expand { display: none; }
.mp-select option { font-weight: 600; color: #0f172a; padding: 6px 8px; }

.mp-caret {
  color: #64748b;
  font-size: 10px;
  transition: transform .2s;
  flex-shrink: 0;
  pointer-events: none;
}
.mp-select-wrap:hover .mp-caret { color: #2563eb; }

/* Trong OPEX modal, month picker có label riêng bên trên */
.opex-month-picker-label {
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  margin-right: 4px;
}
.opex-month-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

@media (max-width: 640px) {
  .mp-select-wrap { padding: 7px 10px; min-width: 100px; }
  .mp-nav-btn { width: 30px; }
  .mp-select { font-size: 13.5px; }
}

.pl-cfg-view-body { flex: 1; padding: 20px 24px 100px; max-width: 1400px; margin: 0 auto; width: 100%; }

.pl-cfg-view-footer { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--bg-soft, #f8fafc); position: sticky; bottom: 0; z-index: 10; }
.pl-cfg-view-footer .btn-primary,
.pl-cfg-view-footer .btn-secondary { padding: 9px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s ease; }
.pl-cfg-view-footer .btn-primary { background: #2563eb; color: #fff; border: 1px solid #2563eb; }
.pl-cfg-view-footer .btn-primary:hover { background: #1d4ed8; }
.pl-cfg-view-footer .btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.pl-cfg-view-footer .btn-secondary { background: var(--bg-elevate, #fff); color: var(--text-2); border: 1px solid var(--border); }
.pl-cfg-view-footer .btn-secondary:hover { background: var(--bg-soft); border-color: var(--text-3); }

/* Title tabs (chuyển giữa chức danh để cấu hình thang HH+KPI của title đó) */
.pl-tier-panel { padding: 16px 18px; }
.pl-title-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.pl-title-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg-soft, #f8fafc); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .15s; }
.pl-title-tab:hover { background: rgba(37, 99, 235, .04); border-color: rgba(37, 99, 235, .3); color: var(--text-1); }
.pl-title-tab.active { background: rgba(37, 99, 235, .1); border-color: #2563eb; color: #2563eb; box-shadow: 0 2px 6px rgba(37, 99, 235, .1); }
.pl-title-tab-base { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .3px; }
.pl-title-tab-base-individual { background: rgba(148, 163, 184, .2); color: var(--text-3); }
.pl-title-tab-base-team { background: rgba(37, 99, 235, .15); color: #1d4ed8; }
.pl-title-tab.active .pl-title-tab-base-individual { background: rgba(255, 255, 255, .6); color: var(--text-2); }
.pl-title-tab.active .pl-title-tab-base-team { background: rgba(37, 99, 235, .25); color: #1d4ed8; }
.pl-title-tab-mult { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .3px; background: rgba(245, 158, 11, .18); color: #b45309; }
.pl-title-tab.active .pl-title-tab-mult { background: rgba(245, 158, 11, .3); color: #92400e; }

/* Modal hint (thay cho preview cũ) — nhắc chỗ xem bảng lương */
.payroll-modal-hint { padding: 12px 16px; background: rgba(37, 99, 235, .06); border-left: 3px solid #2563eb; border-radius: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; }
.payroll-modal-hint i { color: #2563eb; margin-right: 6px; }
.payroll-modal-hint b { color: var(--text-1); font-weight: 700; }

/* Title base toggle inline (Cá nhân | Cả team) */
.pl-title-base-toggle { display: inline-flex; gap: 4px; }
.pl-base-radio { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 11.5px; font-weight: 600; color: var(--text-3); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: var(--bg-elevate, #fff); transition: all .15s; user-select: none; }
.pl-base-radio input { display: none; }
.pl-base-radio i { font-size: 10px; }
.pl-base-radio:hover { border-color: #2563eb; color: #2563eb; }
.pl-base-radio.active { background: rgba(37, 99, 235, .1); border-color: #2563eb; color: #2563eb; }

/* Title badge trong preview + view table */
/* ─── Editable cells (manager only) — cell KHÔNG đổi kích thước ─── */
.pl-cell-editable {
  cursor: pointer; position: relative;
  transition: background .12s, box-shadow .12s;
  border-radius: 4px;
}
.pl-cell-editable:hover {
  background: rgba(37, 99, 235, .06);
}
.pl-cell-editable:focus {
  outline: 2px solid rgba(37, 99, 235, .35);
  outline-offset: -2px;
}
/* Trạng thái cell đang mở popover — highlight rõ nhưng KHÔNG resize */
.pl-cell-editing {
  background: rgba(37, 99, 235, .12) !important;
  box-shadow: inset 0 0 0 2px #3b82f6;
}
.pl-cell-value {
  display: inline-block; vertical-align: middle;
}
/* Icon bút LUÔN HIỆN — visual cue rõ ràng cell edit được */
.pl-edit-icon-visible {
  display: inline-block; vertical-align: middle;
  font-size: 10px; color: #cbd5e1; margin-left: 8px;
  transition: color .15s, transform .15s;
}
.pl-cell-editable:hover .pl-edit-icon-visible {
  color: #2563eb; transform: scale(1.15);
}
.pl-cell-editing .pl-edit-icon-visible { color: #2563eb; }

/* ─── FLOATING POPOVER — thay thế inline editor ─── */
.pl-edit-popover-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: transparent;
}
.pl-edit-popover {
  position: fixed; z-index: 10001;
  width: 320px; background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08);
  border: 1px solid rgba(148, 163, 184, .3);
  overflow: visible;
  opacity: 0; transform: scale(.96) translateY(-4px);
  transition: opacity .15s ease-out, transform .15s ease-out;
}
.pl-edit-popover.pl-pop-visible { opacity: 1; transform: scale(1) translateY(0); }
/* Arrow trỏ vào cell */
.pl-pop-arrow {
  position: absolute; width: 14px; height: 14px;
  background: #fff; border: 1px solid rgba(148, 163, 184, .3);
  transform: rotate(45deg);
  left: calc(var(--arrow-left, 50%) - 7px);
  top: -7px;
  border-right: none; border-bottom: none;
  border-radius: 3px 0 0 0;
}
.pl-edit-popover.pl-pop-above .pl-pop-arrow {
  top: auto; bottom: -7px;
  border: 1px solid rgba(148, 163, 184, .3);
  border-left: none; border-top: none;
  border-radius: 0 0 3px 0;
}
.pl-pop-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(to bottom, #f8fafc, #fff);
  border-radius: 12px 12px 0 0;
}
.pl-pop-title {
  font-size: 13px; font-weight: 700; color: #0f172a;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 3px;
}
.pl-pop-title i { color: #2563eb; font-size: 12px; }
.pl-pop-emp {
  font-size: 12px; color: #475569; font-weight: 500;
}
.pl-pop-emp small { color: #94a3b8; font-weight: 400; margin-left: 2px; }
.pl-pop-body {
  padding: 14px 16px 6px;
}
.pl-pop-label {
  display: block; font-size: 11px; font-weight: 600; color: #64748b;
  text-transform: uppercase; letter-spacing: .3px;
  margin-bottom: 6px;
}
.pl-pop-input-wrap {
  position: relative; display: flex; align-items: center;
}
.pl-pop-input {
  width: 100%; padding: 10px 12px;
  border: 2px solid #cbd5e1; border-radius: 8px;
  font-size: 15px; font-weight: 600; color: #0f172a;
  background: #fff; box-sizing: border-box;
  font-family: inherit; font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.pl-pop-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.pl-pop-input-num { text-align: right; padding-right: 32px; }
.pl-pop-suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 13px; font-weight: 600;
  pointer-events: none;
}
.pl-pop-current {
  margin-top: 8px; font-size: 12px; color: #64748b;
}
.pl-pop-current b { color: #0f172a; font-weight: 600; }
.pl-pop-footer {
  padding: 10px 16px 14px;
  display: flex; justify-content: flex-end; gap: 8px;
}
.pl-pop-btn {
  padding: 8px 16px; border-radius: 8px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.pl-pop-btn:disabled { opacity: .6; cursor: wait; }
.pl-pop-cancel {
  background: #f1f5f9; color: #475569;
}
.pl-pop-cancel:hover:not(:disabled) { background: #e2e8f0; color: #0f172a; }
.pl-pop-save {
  background: #2563eb; color: #fff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .3);
}
.pl-pop-save:hover:not(:disabled) {
  background: #1d4ed8;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .4);
}

/* ─── Modal Áp dụng thay đổi tháng nào ─── */
.pl-apply-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
  z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: opex-drill-fade .18s ease-out;
}
.pl-apply-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .35); overflow: hidden;
  animation: opex-drill-slide .22s ease-out;
}
.pl-apply-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
}
.pl-apply-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 10px; }
.pl-apply-close {
  width: 30px; height: 30px; border: none; background: #f1f5f9; color: #64748b;
  border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pl-apply-close:hover { background: #fee2e2; color: #dc2626; }
.pl-apply-summary {
  padding: 12px 20px; background: linear-gradient(to right, #f8fafc, #eff6ff);
  border-bottom: 1px solid #e2e8f0;
}
.pl-apply-summary > div { font-size: 14px; color: #0f172a; }
.pl-apply-choices { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.pl-apply-choice {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 10px;
  cursor: pointer; text-align: left; transition: all .15s; font: inherit;
}
.pl-apply-choice:hover {
  background: #eff6ff; border-color: #3b82f6;
  transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59, 130, 246, .18);
}
.pl-apply-choice-icon { font-size: 24px; flex-shrink: 0; }
.pl-apply-choice-body { flex: 1; }
.pl-apply-choice-body strong { display: block; font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 3px; }
.pl-apply-choice-body strong small { font-weight: 500; color: #64748b; font-size: 11px; margin-left: 4px; }
.pl-apply-choice-body small { display: block; font-size: 11.5px; color: #64748b; line-height: 1.5; }
.pl-apply-choice-body small b { color: #1e40af; }
.pl-apply-footer {
  padding: 10px 20px 16px; display: flex; justify-content: flex-end;
}
.pl-apply-cancel {
  padding: 8px 16px; background: #fff; color: #475569; border: 1px solid #cbd5e1;
  border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px;
  transition: background .15s;
}
.pl-apply-cancel:hover { background: #f1f5f9; }

.pl-title-badge { display: inline-block; padding: 3px 8px; font-size: 11px; font-weight: 600; border-radius: 12px; background: rgba(148, 163, 184, .15); color: var(--text-2); white-space: nowrap; }
.pl-title-badge.pl-title-team { background: rgba(37, 99, 235, .12); color: #2563eb; }
.pl-title-badge small { font-weight: 500; opacity: .8; }

/* ═════════════════════════════════════════
   PAYROLL FULLSCREEN VIEW (body.payroll-view-active)
   ═════════════════════════════════════════ */
body.payroll-view-active section.view[data-view="project"] > *:not(#payroll-view-container) { display: none !important; }
body.payroll-view-active #breadcrumb-bar,
body.payroll-view-active #page-context-header { display: none !important; }

#payroll-view-container { padding: 8px 0 40px; }
.payroll-view-header { display: flex; align-items: center; gap: 14px; padding: 14px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.payroll-view-title { flex: 1; margin: 0; font-size: 20px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.payroll-view-title i { color: #2563eb; }
.payroll-view-title span { color: var(--text-3); font-weight: 500; font-size: 14px; margin-left: 6px; }

.payroll-fallback-hint { background: rgba(245, 158, 11, .08); border-left: 3px solid #f59e0b; padding: 10px 14px; border-radius: 6px; font-size: 13px; color: var(--text-2); margin-bottom: 20px; }
.payroll-fallback-hint i { color: #f59e0b; margin-right: 6px; }

.payroll-view-section { margin-bottom: 30px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.payroll-view-section h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-1); }
.payroll-view-section h3 i { color: #2563eb; }

/* ─── Payroll section head — h3 bên trái + month picker bên phải ─── */
.pl-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.pl-section-head h3 { margin: 0 !important; }
.pl-data-stamp {
  font-weight: 500 !important; color: #64748b !important; font-size: 11.5px !important;
  padding: 3px 9px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
}
.pl-data-stamp i { color: #64748b !important; font-size: 10px !important; }

/* ─── Month picker — segmented pills iOS-style ─── */
.pl-month-picker { display: inline-flex; align-items: center; gap: 6px; }
.pl-mp-seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: #f1f5f9; border-radius: 9px;
}
.pl-mp-pill {
  position: relative; padding: 6px 12px; min-width: 44px;
  background: transparent; border: 0; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: #64748b;
  cursor: pointer; transition: all .15s; letter-spacing: .2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.pl-mp-pill:hover:not(.pl-mp-pill-active) { color: #0f172a; background: rgba(255,255,255,.55); }
.pl-mp-pill-active {
  background: #fff; color: #0f172a;
  box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 0.5px rgba(15,23,42,.05);
}
.pl-mp-pill-active.pl-mp-pill-now { color: #1d4ed8; }
.pl-mp-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.15);
  display: inline-block;
}
.pl-mp-more {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: #f1f5f9; border: 0; border-radius: 9px;
  color: #64748b; cursor: pointer; transition: all .15s;
}
.pl-mp-more:hover { background: #e2e8f0; color: #0f172a; }

/* Popup chọn tháng xa hơn */
.pl-mp-popup-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000; padding: 20px;
  animation: pl-mp-fade .15s ease-out;
}
@keyframes pl-mp-fade { from { opacity: 0 } to { opacity: 1 } }
.pl-mp-popup {
  background: #fff; border-radius: 16px; max-width: 340px; width: 100%;
  box-shadow: 0 20px 60px rgba(15,23,42,.25);
  max-height: 70vh; display: flex; flex-direction: column;
  animation: pl-mp-slide .2s ease-out;
}
@keyframes pl-mp-slide { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.pl-mp-popup-head {
  padding: 16px 20px 12px; font-weight: 700; font-size: 15px; color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
  display: flex; align-items: center; gap: 8px;
}
.pl-mp-popup-head i { color: #2563eb; }
.pl-mp-popup-body { padding: 6px; overflow-y: auto; }
.pl-mp-popup-row {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: transparent; border: 0; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: #0f172a; text-align: left; cursor: pointer;
  transition: background .12s;
}
.pl-mp-popup-row:hover { background: #f8fafc; }
.pl-mp-popup-row-active { background: #eff6ff; color: #1d4ed8; font-weight: 700; }
.pl-mp-popup-row-active:hover { background: #dbeafe; }
.pl-mp-popup-lbl { flex: 1; }
.pl-mp-popup-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(16,185,129,.12); color: #059669;
}
.pl-mp-popup-row-active i.fas.fa-check { color: #2563eb; }

@media (max-width: 640px) {
  .pl-section-head { flex-direction: column; align-items: stretch; }
  .pl-month-picker { justify-content: center; }
  .pl-mp-seg { flex: 1; justify-content: space-between; }
  .pl-mp-pill { flex: 1; }
}

/* ─── Summary strip trên bảng lương — style đồng bộ ranking panel ─── */
.payroll-summary-strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  padding: 14px 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .04) 0%, rgba(59, 130, 246, .02) 100%);
  border: 1px solid rgba(37, 99, 235, .15); border-radius: 10px;
}
.payroll-summary-strip .ps-cell {
  display: flex; flex-direction: column; gap: 4px;
}
.payroll-summary-strip .ps-label {
  font-size: 10.5px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .03em;
}
.payroll-summary-strip .ps-value {
  font-size: 18px; font-weight: 700; color: var(--text-1);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.payroll-summary-strip .ps-value.ps-primary { color: #2563eb; }
.payroll-summary-strip .ps-value.ps-positive { color: #059669; }
.payroll-summary-strip .ps-value.ps-amber { color: #d97706; }
.payroll-summary-strip .ps-value.ps-negative { color: #dc2626; }
@media (max-width: 900px) {
  .payroll-summary-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .payroll-summary-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Bảng lương chi tiết — kế thừa mkt-rank-table, chỉ override số cột riêng */
.payroll-detail-table { table-layout: auto; }
/* STT column */
.payroll-detail-table .col-rank { width: 34px; text-align: center; color: var(--text-4); font-weight: 600; padding-left: 8px; padding-right: 8px; }
/* Cột tên NV */
.payroll-detail-table .col-name { min-width: 180px; max-width: 240px; }
.payroll-detail-table .col-name .pl-name-flag { font-size: 14px; margin-right: 2px; }
.payroll-detail-table .col-name .mkt-link { color: #2563eb; font-weight: 600; text-decoration: none; }
.payroll-detail-table .col-name small { font-size: 10.5px; color: var(--text-4); font-weight: 500; }
/* Cột chức danh — badge + pen luôn trên 1 dòng, không xô lệch */
.payroll-detail-table .col-title {
  text-align: center; min-width: 110px; max-width: 170px;
  white-space: nowrap;
}
.payroll-detail-table .col-title .pl-title-badge { font-size: 11px; padding: 3px 7px; white-space: nowrap; }
/* Badge + pen icon căn giữa dọc theo cùng baseline, khoảng cách đều */
.payroll-detail-table .col-title .pl-cell-value { vertical-align: middle; }
.payroll-detail-table .col-title .pl-edit-icon-visible { vertical-align: middle; margin-left: 6px; }
/* Cột tiền compact — lương cứng/phụ cấp không cần nhiều đất */
.payroll-detail-table .col-money-tight { min-width: 72px; max-width: 90px; padding-left: 6px !important; padding-right: 6px !important; font-size: 12px; }
/* Badge cho NV thử việc: ×85% dưới lương thực nhận */
.payroll-detail-table .pl-base-multiplier {
  font-size: 10px; color: #d97706; font-weight: 500; font-variant-numeric: tabular-nums;
  display: inline-block; margin-top: 2px;
  padding: 1px 4px; background: rgba(217, 119, 6, .08); border-radius: 4px; cursor: help;
}
/* Cột TỔNG cuối — nổi bật */
.payroll-detail-table .col-total {
  font-weight: 700 !important; color: #2563eb !important; font-size: 14px !important;
  background: rgba(37, 99, 235, .04);
}
/* Cột actions (xoá NV) — chỉ hiện cho manager */
.payroll-detail-table .col-actions { width: 40px; text-align: center; padding-left: 4px !important; padding-right: 6px !important; }
.payroll-detail-table .pl-row-del {
  background: transparent; border: 1px solid transparent; color: var(--text-4);
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s ease; font-size: 12px;
}
.payroll-detail-table .pl-row-del:hover {
  background: rgba(239, 68, 68, .1); color: #dc2626; border-color: rgba(239, 68, 68, .25);
}
.payroll-detail-table .pl-row-del:disabled { cursor: wait; opacity: .6; }
.payroll-detail-table .pl-row-del i { pointer-events: none; }
.payroll-detail-table thead th.col-total { background: rgba(37, 99, 235, .1); color: #1e40af !important; }
/* Body cells — inherit mkt-rank-table style + adjust padding */
.payroll-detail-table tbody td { padding: 10px 10px; vertical-align: middle; }
.payroll-detail-table tbody td.num { font-variant-numeric: tabular-nums; }
.payroll-detail-table tbody td.positive { color: #059669; font-weight: 600; }
.payroll-detail-table tbody td.negative { color: #dc2626; font-weight: 600; }
/* Footer TỔNG row */
.payroll-detail-table tfoot td {
  background: rgba(37, 99, 235, .06); font-weight: 700; padding: 12px 10px;
  border-top: 2px solid rgba(37, 99, 235, .3); font-variant-numeric: tabular-nums;
  text-align: right;
}
.payroll-detail-table tfoot td.col-rank, .payroll-detail-table tfoot td.col-name { text-align: left; }
.payroll-detail-table tfoot td.col-total { font-size: 15px; color: #1e40af; }
/* Row unmapped / violation */
.payroll-detail-table tbody tr.payroll-row-violation { background: rgba(239, 68, 68, .04); }
.payroll-detail-table tbody tr.payroll-row-unmapped { background: rgba(245, 158, 11, .04); }

/* Goals card */
.payroll-goals-card { background: rgba(37, 99, 235, .03); border: 1px solid rgba(37, 99, 235, .15); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.payroll-goals-card h4 { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-1); }
.payroll-goals-card h4 i { color: #2563eb; }
.payroll-goals-card h4 small { color: var(--text-4); font-weight: 500; font-size: 11px; margin-left: 4px; }
.payroll-goals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.payroll-goal-item { display: flex; gap: 8px; padding: 8px 10px; background: var(--bg); border-radius: 6px; border-left: 3px solid #94a3b8; }
.payroll-goal-item.payroll-goal-up { border-left-color: #10b981; }
.payroll-goal-item.payroll-goal-warn { border-left-color: #f59e0b; }
.payroll-goal-item .pg-icon { font-size: 16px; opacity: .8; }
.payroll-goal-item.payroll-goal-up .pg-icon { color: #10b981; }
.payroll-goal-item.payroll-goal-warn .pg-icon { color: #f59e0b; }
.payroll-goal-item .pg-body { flex: 1; }
.payroll-goal-item .pg-title { font-size: 11.5px; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.payroll-goal-item .pg-title strong { color: #2563eb; }
.payroll-goal-item .pg-detail { font-size: 11px; color: var(--text-3); line-height: 1.45; margin-bottom: 4px; }
.payroll-goal-item .pg-detail b { color: var(--text-2); font-weight: 600; }
.payroll-goal-item .pg-detail .pg-need { color: #2563eb; font-weight: 700; }
.payroll-goal-item .pg-delta { font-size: 11.5px; font-weight: 600; padding-top: 4px; border-top: 1px dashed rgba(148, 163, 184, .3); }
.payroll-goal-item .pg-delta small { font-weight: 500; color: var(--text-3); font-size: 10.5px; }
.payroll-goal-item .pg-delta.pg-plus { color: #059669; }
.payroll-goal-item .pg-delta.pg-minus { color: #dc2626; }

/* Reference tables */
.payroll-reference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 4px; }
@media (max-width: 900px) { .payroll-reference-grid { grid-template-columns: 1fr; } }
.payroll-reference-box { background: var(--bg-soft, #f8fafc); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
.payroll-reference-box h4 { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.payroll-reference-box h4 i { color: #2563eb; }
.payroll-ref-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.payroll-ref-table thead th { padding: 6px 8px; background: rgba(37, 99, 235, .06); color: var(--text-2); font-weight: 600; font-size: 11px; text-align: right; }
.payroll-ref-table thead th:first-child { text-align: left; }
.payroll-ref-table tbody td { padding: 5px 8px; border-top: 1px solid rgba(148, 163, 184, .15); text-align: right; font-variant-numeric: tabular-nums; }
.payroll-ref-table tbody td:first-child { text-align: left; }
.payroll-ref-table tbody strong { color: #2563eb; }

/* Per-title reference blocks (mỗi title 1 block: điều kiện + 2 bảng) */
.payroll-ref-title-block { margin: 0 0 24px; padding: 14px; background: white; border: 1px solid var(--border); border-radius: 8px; }
.payroll-ref-title-block + .payroll-ref-title-block { margin-top: 16px; }
.pl-ref-title-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--text-1); padding-bottom: 10px; border-bottom: 2px solid rgba(37, 99, 235, .12); }
.payroll-ref-conds { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: rgba(37, 99, 235, .04); border-left: 3px solid #2563eb; border-radius: 6px; margin-bottom: 12px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.pl-ref-cond i { width: 16px; margin-right: 4px; }
.pl-ref-cond b { color: var(--text-1); font-weight: 700; }
.payroll-reference-box h5 { margin: 0 0 8px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; color: var(--text-2); text-transform: uppercase; letter-spacing: .3px; }
.payroll-reference-box h5 i { color: #2563eb; }

/* ═══════════ Điều kiện thưởng KPI trong config view (COGS threshold + bonus multiplier) ═══════════ */
.pl-title-conditions { background: linear-gradient(135deg, rgba(245, 158, 11, .04) 0%, rgba(37, 99, 235, .04) 100%); border: 1px solid rgba(37, 99, 235, .15); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.pl-cond-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 6px; }
@media (max-width: 900px) { .pl-cond-grid { grid-template-columns: 1fr; } }
.pl-cond-item { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.pl-cond-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 8px; line-height: 1.5; }
.pl-cond-label i { margin-right: 6px; }
.pl-cond-label small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-3); margin-top: 3px; }
.pl-cond-item .opex-input-suffix { max-width: 160px; }
.pl-cond-hint { margin-top: 6px; font-size: 11px; color: var(--text-4); font-style: italic; }
.pl-cond-hint code { background: rgba(148, 163, 184, .18); padding: 1px 5px; border-radius: 3px; font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--text-2); }

/* ═══════════ Bảng chi tiết lương: badge vi phạm + bonus breakdown ═══════════ */
.pl-badge-violation { display: inline-block; margin-top: 3px; padding: 1px 6px; background: rgba(220, 38, 38, .12); color: #b91c1c; font-size: 10px; font-weight: 700; border-radius: 3px; letter-spacing: .3px; }
.pl-badge-unmapped { display: inline-block; margin-top: 3px; padding: 1px 6px; background: rgba(245, 158, 11, .15); color: #b45309; font-size: 10px; font-weight: 700; border-radius: 3px; letter-spacing: .3px; cursor: help; }
.payroll-row-unmapped td { background: rgba(245, 158, 11, .03); }
.pl-hh-bonus { display: inline-block; margin-top: 2px; color: #059669; font-size: 11px; font-weight: 600; }
.pl-hh-noBonus { display: inline-block; margin-top: 2px; color: var(--text-4); font-size: 10.5px; font-style: italic; }
.payroll-row-violation td { background: rgba(220, 38, 38, .03); }

/* ═══════════ Auto-sync alert: NV có DT/Ads chưa config lương ═══════════ */
.payroll-unmapped-alert { display: flex; gap: 12px; padding: 14px 16px; background: rgba(245, 158, 11, .08); border-left: 4px solid #f59e0b; border-radius: 8px; margin-bottom: 16px; }
.payroll-unmapped-alert > i { color: #f59e0b; font-size: 20px; margin-top: 2px; flex-shrink: 0; }
.pl-unm-body { flex: 1; }
.pl-unm-body b { display: block; font-size: 13px; color: var(--text-1); margin-bottom: 8px; }
.pl-unm-list { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pl-unm-chip { display: inline-block; padding: 4px 10px; background: white; border: 1px solid rgba(245, 158, 11, .3); border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: help; }
.pl-unm-more { font-size: 11.5px; color: var(--text-3); font-style: italic; align-self: center; }
.pl-unm-cta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #f59e0b; color: white; border: none; border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s; }
.pl-unm-cta:hover { background: #d97706; }

/* ═════════════════════════════════════════
   COGS DRILL MODAL — chi tiết giá vốn SP × Ngày
   ═════════════════════════════════════════ */
.cogs-drill-modal { max-width: min(1200px, 95vw) !important; width: 95vw; }
.cogs-drill-modal .opex-modal-body { padding: 20px 22px; }

/* Summary strip */
.cogs-drill-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cogs-sum-item { padding: 10px 14px; background: var(--bg-soft, #f8fafc); border: 1px solid var(--border); border-radius: 8px; }
.cs-label { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; margin-bottom: 4px; }
.cs-value { font-size: 17px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.cogs-sum-highlight { background: rgba(37, 99, 235, .06); border-color: rgba(37, 99, 235, .2); }
.cogs-sum-warn { background: rgba(220, 38, 38, .06); border-color: rgba(220, 38, 38, .25); }

/* Legend */
.cogs-drill-legend { padding: 8px 12px; background: var(--bg-soft, #f8fafc); border-radius: 6px; font-size: 11.5px; color: var(--text-3); margin-bottom: 12px; }
.cogs-drill-legend span { font-weight: 700; padding: 1px 6px; border-radius: 4px; }

/* Main table */
.cogs-drill-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.cogs-drill-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--bg-elevate, #fff); }
.cogs-drill-table thead th { position: sticky; top: 0; padding: 10px 8px; text-align: right; font-weight: 600; font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; background: var(--bg-soft, #f8fafc); border-bottom: 1px solid var(--border); }
.cogs-drill-table thead th:nth-child(1), .cogs-drill-table thead th:nth-child(2) { text-align: left; }
.cogs-drill-table tbody td { padding: 10px 8px; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(226, 232, 240, .6); }
.cogs-drill-table tbody td:nth-child(1), .cogs-drill-table tbody td:nth-child(2) { text-align: left; }
.cogs-drill-row:hover { background: rgba(37, 99, 235, .03); }
.cogs-expand-btn { background: transparent; border: 1px solid var(--border); width: 26px; height: 26px; border-radius: 5px; color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; transition: all .15s; }
.cogs-expand-btn:hover { background: rgba(37, 99, 235, .08); border-color: #2563eb; color: #2563eb; }

/* %COGS color classes */
.cogs-pct-good { color: #059669; font-weight: 600; background: rgba(16, 185, 129, .08); }
.cogs-pct-ok { color: var(--text-1); font-weight: 500; }
.cogs-pct-warn { color: #d97706; font-weight: 700; background: rgba(245, 158, 11, .08); }
.cogs-pct-danger { color: #dc2626; font-weight: 700; background: rgba(220, 38, 38, .1); }

/* Detail sub-table */
.cogs-drill-detail td { background: rgba(37, 99, 235, .02); padding: 14px 20px !important; }
.cogs-detail-inner { background: var(--bg-elevate, #fff); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
.cogs-detail-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cogs-detail-table thead th { padding: 6px 8px; text-align: right; font-weight: 600; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; background: rgba(37, 99, 235, .04); border-bottom: 1px solid var(--border); }
.cogs-detail-table thead th:first-child { text-align: left; }
.cogs-detail-table tbody td { padding: 6px 8px; text-align: right; border-bottom: 1px solid rgba(226, 232, 240, .4); font-variant-numeric: tabular-nums; }
.cogs-detail-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--text-2); }
.cogs-detail-table tbody tr:last-child td { border-bottom: none; }
.cogs-drill-table .empty-row td { text-align: center; color: var(--text-4); font-style: italic; padding: 30px 8px; }

/* ═════════════════════════════════════════
   MOTIVATIONAL HERO CARD — Tạo động lực NV
   ═════════════════════════════════════════ */
.payroll-view-section-hero { background: linear-gradient(135deg, rgba(37, 99, 235, .03) 0%, rgba(59, 130, 246, .02) 100%); border-color: rgba(37, 99, 235, .2); }
.payroll-view-section-hero h3 i { color: #2563eb; }

.payroll-goals-hero { background: linear-gradient(135deg, #fff 0%, #eff6ff 100%); border-color: rgba(37, 99, 235, .2); padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(37, 99, 235, .06); }
.payroll-goals-hero.payroll-hero-top { background: linear-gradient(135deg, #fff 0%, #fef3c7 100%); border-color: rgba(245, 158, 11, .3); }
.payroll-goals-hero.payroll-hero-great { background: linear-gradient(135deg, #fff 0%, #d1fae5 100%); border-color: rgba(16, 185, 129, .3); }
.payroll-goals-hero.payroll-hero-good { background: linear-gradient(135deg, #fff 0%, #ecfccb 100%); border-color: rgba(132, 204, 22, .3); }
.payroll-goals-hero.payroll-hero-ok { background: linear-gradient(135deg, #fff 0%, #dbeafe 100%); border-color: rgba(59, 130, 246, .3); }
.payroll-goals-hero.payroll-hero-push { background: linear-gradient(135deg, #fff 0%, #dbeafe 100%); border-color: rgba(37, 99, 235, .3); }

.payroll-hero-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.payroll-hero-emoji { font-size: 26px; flex-shrink: 0; line-height: 1; }
.payroll-hero-title { font-size: 13.5px; font-weight: 700; color: var(--text-1); line-height: 1.25; margin-bottom: 2px; }
.payroll-hero-sub { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.payroll-hero-sub b { color: var(--text-1); font-weight: 700; }

.payroll-hero-income { margin-left: auto; padding: 6px 10px; background: rgba(37, 99, 235, .08); border-radius: 6px; border: 1px solid rgba(37, 99, 235, .15); text-align: right; }
.pl-income-label { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; margin-bottom: 1px; }
.pl-income-value { font-size: 15px; font-weight: 800; color: #2563eb; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }

/* KPI Progress Bar */
.payroll-hero-progress { margin-top: 10px; padding: 8px 12px; background: rgba(255, 255, 255, .6); border-radius: 8px; }
.pl-prog-label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-2); font-weight: 600; margin-bottom: 5px; }
.pl-prog-bar-outer { position: relative; height: 8px; background: rgba(148, 163, 184, .2); border-radius: 100px; overflow: visible; }
.pl-prog-bar-inner { height: 100%; border-radius: 100px; transition: width .6s cubic-bezier(.65, 0, .35, 1); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.pl-prog-marker { position: absolute; top: -18px; transform: translateX(-50%); font-size: 10px; color: var(--text-3); font-weight: 700; letter-spacing: .3px; }
.pl-prog-marker::after { content: ''; display: block; position: absolute; left: 50%; top: 14px; width: 2px; height: 12px; background: var(--text-3); transform: translateX(-50%); border-radius: 1px; }

/* Opportunity blocks */
.payroll-hero-opportunities { margin-top: 10px; }
.pl-opp-title { font-size: 11.5px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.pl-opp-title i { color: #f59e0b; }

.payroll-hero-tip { margin-top: 8px; padding: 8px 10px; background: rgba(59, 130, 246, .08); border-left: 3px solid #3b82f6; border-radius: 6px; font-size: 11px; color: var(--text-2); line-height: 1.45; }
.payroll-hero-tip i { color: #3b82f6; margin-right: 6px; }
.payroll-hero-tip b { color: var(--text-1); }

/* Override goal-item để đồng bộ với hero style */
.payroll-goals-hero .payroll-goal-item { background: rgba(255, 255, 255, .75); border-left-width: 4px; }
.payroll-goals-hero .payroll-goal-item .pg-body .pg-title { font-size: 13.5px; color: var(--text-1); }
.payroll-goals-hero .payroll-goal-item .pg-body .pg-title b.pg-need { color: #2563eb; font-size: 15px; font-weight: 800; }
.payroll-goals-hero .payroll-goal-item .pg-delta { padding-top: 8px; margin-top: 6px; font-size: 13px; }
.payroll-goals-hero .payroll-goal-item .pg-delta.pg-plus { color: #047857; }
.payroll-goals-hero .payroll-goal-item .pg-delta.pg-plus b { color: #059669; font-size: 15px; font-weight: 800; }
.payroll-goals-hero .payroll-goal-item .pg-delta i { margin-right: 4px; }

/* ═══════════ Lịch sử lương — biểu đồ cột stacked 6 tháng ═══════════ */
.pl-history-loading { padding: 40px; text-align: center; color: var(--text-3); font-size: 13px; }
.pl-history-loading i { margin-right: 8px; color: #2563eb; }
.pl-history-chart-empty { padding: 24px; text-align: center; color: var(--text-3); background: rgba(37, 99, 235, .04); border-left: 3px solid #2563eb; border-radius: 8px; font-size: 13px; }
.pl-history-chart-empty i { color: #2563eb; margin-right: 6px; }

.pl-history-chart { background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }

.pl-history-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(37, 99, 235, .12); font-size: 12px; color: var(--text-2); }
.pl-hist-legend-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pl-hist-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.pl-hist-swatch-base { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); }
.pl-hist-swatch-allow { background: linear-gradient(180deg, #a5b4fc 0%, #818cf8 100%); }
.pl-hist-swatch-kpi { background: linear-gradient(180deg, #34d399 0%, #10b981 100%); }
.pl-hist-legend-hint { margin-left: auto; font-size: 11.5px; color: var(--text-4); font-weight: 500; font-style: italic; }

.pl-history-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 20px 4px 6px; align-items: end; }
.pl-hist-col { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.pl-hist-col-current .pl-hist-total { color: #2563eb; }
.pl-hist-col-current .pl-hist-label { font-weight: 800; color: #2563eb; }
.pl-hist-total { font-size: 12px; font-weight: 700; color: var(--text-1); text-align: center; min-height: 18px; letter-spacing: -.3px; }
.pl-hist-total-empty { color: var(--text-4); font-weight: 500; }
.pl-hist-bar-wrap { width: 100%; max-width: 56px; min-height: var(--chart-h, 180px); display: flex; flex-direction: column-reverse; align-items: stretch; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(15, 23, 42, .06); background: rgba(255, 255, 255, .5); }
.pl-hist-seg { transition: opacity .15s; position: relative; }
.pl-hist-seg:hover { opacity: .85; cursor: help; }
.pl-hist-seg-base { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); }
.pl-hist-seg-allow { background: linear-gradient(180deg, #a5b4fc 0%, #818cf8 100%); border-top: 1px solid rgba(255,255,255,.4); }
.pl-hist-seg-kpi { background: linear-gradient(180deg, #34d399 0%, #10b981 100%); border-top: 1px solid rgba(255,255,255,.4); }
.pl-hist-empty-mark { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: var(--text-4); background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(148, 163, 184, .12) 6px, rgba(148, 163, 184, .12) 8px); border-radius: 6px; }
.pl-hist-label { font-size: 12px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 4px; padding-top: 4px; }
.pl-hist-cur-tag { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: #2563eb; color: white; letter-spacing: .3px; text-transform: uppercase; }

.pl-history-footnote { margin-top: 14px; padding: 10px 12px; background: rgba(245, 158, 11, .08); border-left: 3px solid #f59e0b; border-radius: 6px; font-size: 11.5px; color: var(--text-2); line-height: 1.55; }
.pl-history-footnote i { color: #f59e0b; margin-right: 4px; }

@media (max-width: 640px) {
  .pl-history-cols { gap: 6px; }
  .pl-hist-bar-wrap { max-width: 40px; min-height: 140px; }
  .pl-hist-total { font-size: 10.5px; }
  .pl-hist-label { font-size: 11px; }
  .pl-history-legend { font-size: 11px; gap: 10px; }
  .pl-hist-legend-hint { display: none; }
}

@media (max-width: 640px) {
  .payroll-hero-head { flex-direction: column; align-items: flex-start; }
  .payroll-hero-income { margin-left: 0; width: 100%; text-align: center; }
  .payroll-hero-emoji { font-size: 32px; }
  .payroll-hero-title { font-size: 15px; }
  .pl-income-value { font-size: 20px; }
}

/* ═════════════════════════════════════════════════
   SALARY PLANNER — NV/manager đặt mục tiêu lương
   ═════════════════════════════════════════════════ */
.pl-planner-card {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 60%, #fff 100%);
  border: 1.5px solid #fbbf24;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 6px 18px rgba(251, 191, 36, .12);
}
.pl-planner-head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 16px;
}
.pl-planner-head-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .3);
}
.pl-planner-head-title {
  font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 3px;
}
.pl-planner-head-sub {
  font-size: 12.5px; color: #64748b; line-height: 1.5;
}
.pl-planner-roleplay {
  margin-bottom: 10px; padding: 8px 10px;
  background: rgba(37, 99, 235, .06); border: 1px solid rgba(37, 99, 235, .2);
  border-radius: 8px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pl-planner-roleplay label {
  font-size: 11px; font-weight: 700; color: #1e40af;
  white-space: nowrap; margin: 0;
}
.pl-planner-roleplay label i { margin-right: 3px; }
.pl-planner-roleplay select {
  flex: 1 1 220px; min-width: 200px; padding: 5px 8px;
  border: 1.5px solid #93c5fd; border-radius: 6px;
  background: #fff; font-size: 12.5px; font-weight: 600; color: #0f172a;
  font-family: inherit; cursor: pointer; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.pl-planner-roleplay select:focus {
  border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}
.pl-planner-roleplay-hint {
  flex: 1 1 100%; font-size: 10.5px; color: #475569;
}
/* Mode toggle — "Cho tháng này" (MTD) vs "Cho tháng mới" (30d ref) */
.pl-planner-mode-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 10px;
}
.pl-mode-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid #e2e8f0; background: #fff;
  color: #475569; cursor: pointer; font-family: inherit;
  text-align: left; transition: all .15s;
}
.pl-mode-pill i {
  font-size: 16px; color: #94a3b8; flex-shrink: 0;
}
.pl-mode-pill span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pl-mode-pill b { font-size: 12.5px; color: #0f172a; font-weight: 700; }
.pl-mode-pill small { font-size: 10.5px; color: #64748b; line-height: 1.2; }
.pl-mode-pill:hover:not(.active) {
  border-color: #93c5fd; background: #f0f9ff;
}
.pl-mode-pill.active {
  border-color: #2563eb; background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .12);
}
.pl-mode-pill.active i { color: #2563eb; }
.pl-mode-pill.active b { color: #1d4ed8; }
@media (max-width: 720px) {
  .pl-planner-mode-toggle { grid-template-columns: 1fr; }
}

.pl-planner-input-grid {
  display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px;
  margin-bottom: 10px;
}
.pl-planner-input-cell {
  padding: 8px 10px; background: #fff; border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 8px;
}
.pl-planner-input-cell label {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: #64748b; letter-spacing: .3px; margin-bottom: 4px;
}
.pl-planner-role b { font-size: 12.5px; color: #0f172a; }
.pl-planner-role small { color: #64748b; font-size: 11px; display: block; margin-top: 1px; }
.pl-title-badge {
  display: inline-block; padding: 1px 6px; border-radius: 8px;
  background: rgba(37, 99, 235, .1); color: #2563eb; font-weight: 600; font-size: 10.5px;
}
.pl-planner-cur { font-size: 15px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; line-height: 1.15; }
.pl-planner-cur-sub { display: block; margin-top: 2px; font-size: 10.5px; color: #64748b; }
.pl-planner-input-target { background: linear-gradient(135deg, #fef3c7 0%, #fff 100%); border-color: #fbbf24; }
.pl-planner-target-wrap {
  position: relative; display: flex; align-items: center;
}
.pl-planner-target-wrap input {
  width: 100%; padding: 6px 26px 6px 10px;
  border: 2px solid #f59e0b; border-radius: 6px;
  font-size: 15px; font-weight: 700; color: #0f172a;
  background: #fff; text-align: right; font-variant-numeric: tabular-nums;
  font-family: inherit; outline: none; box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.pl-planner-target-wrap input:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .2);
}
.pl-planner-target-suffix {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: #d97706; font-weight: 700; font-size: 12px; pointer-events: none;
}
.pl-planner-target-quick {
  display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap;
}
.pl-planner-target-quick button {
  padding: 3px 8px; border: 1px solid #cbd5e1; background: #fff; color: #475569;
  border-radius: 5px; font-size: 10.5px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .12s;
}
.pl-planner-target-quick button:hover {
  border-color: #f59e0b; background: #fef3c7; color: #d97706;
}

/* Recommendation block — compact */
.pl-planner-recommend {
  padding: 10px 12px; border-radius: 10px;
  margin-bottom: 12px;
}
.pl-planner-recommend-ok {
  background: linear-gradient(135deg, #ecfdf5 0%, #fff 100%);
  border: 1px solid #86efac;
}
.pl-planner-recommend-done {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  display: flex; align-items: center; gap: 10px;
}
.pl-planner-recommend-done i { font-size: 20px; color: #f59e0b; }
.pl-planner-recommend-done b { display: block; font-size: 12.5px; color: #0f172a; margin-bottom: 2px; }
.pl-planner-recommend-done small { color: #475569; font-size: 11px; }
.pl-planner-recommend-warn {
  background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
  border: 1px solid #fca5a5;
}
.pl-recommend-warn-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #dc2626; margin-bottom: 6px;
}
.pl-recommend-warn-head i { font-size: 14px; }
.pl-recommend-warn-body { font-size: 11.5px; color: #475569; line-height: 1.5; }
.pl-recommend-warn-body ul { margin: 6px 0 0; padding-left: 18px; }
.pl-recommend-warn-body li { margin-bottom: 3px; }

.pl-recommend-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.pl-recommend-head-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}
.pl-recommend-head b { display: block; font-size: 12.5px; color: #0f172a; }
.pl-recommend-head small { display: block; color: #64748b; font-size: 11px; line-height: 1.4; }
.pl-recommend-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 10px;
}
.pl-recommend-item {
  padding: 8px 10px; background: #fff;
  border: 1px solid rgba(148, 163, 184, .3); border-radius: 8px;
}
.pl-recommend-item-dt { border-left: 3px solid #2563eb; }
.pl-recommend-item-ads { border-left: 3px solid #f59e0b; }
.pl-recommend-item-salary { border-left: 3px solid #10b981; }
.pl-r-label {
  font-size: 10px; font-weight: 600; color: #64748b;
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px;
}
.pl-r-label i { margin-right: 3px; }
.pl-r-value {
  font-size: 14px; font-weight: 700; color: #0f172a;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.pl-r-bar {
  height: 4px; background: #e2e8f0; border-radius: 2px; margin-top: 4px; overflow: hidden;
}
.pl-r-bar-fill {
  height: 100%; border-radius: 2px; transition: width .3s;
}
.pl-r-bar-fill.ok { background: linear-gradient(90deg, #34d399, #10b981); }
.pl-r-bar-fill.need { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.pl-r-delta {
  margin-top: 4px; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; gap: 3px;
}
.pl-r-delta.ok { color: #10b981; }
.pl-r-delta.up { color: #2563eb; }
.pl-r-delta.down { color: #f59e0b; }
.pl-recommend-item small {
  display: block; margin-top: 3px; font-size: 10.5px; color: #94a3b8;
}

.pl-recommend-actions {
  background: rgba(37, 99, 235, .05); border-left: 3px solid #2563eb;
  border-radius: 6px; padding: 8px 10px;
}
.pl-recommend-actions-title {
  font-size: 11px; font-weight: 700; color: #1e40af; margin-bottom: 4px;
}
.pl-recommend-actions-title i { margin-right: 3px; }
.pl-recommend-actions ul {
  margin: 0; padding-left: 18px; font-size: 11.5px; color: #0f172a; line-height: 1.55;
}
.pl-recommend-actions li i { width: 12px; margin-right: 2px; }

/* Matrix v2 — CSS Grid, compact cell-card format */
.pl-planner-matrix-title {
  margin-bottom: 8px; padding: 8px 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 8px; border-left: 3px solid #2563eb;
}
.pl-planner-matrix-title-main {
  font-size: 12.5px; color: #0f172a; font-weight: 700; margin-bottom: 2px;
}
.pl-planner-matrix-title-main i { color: #2563eb; margin-right: 5px; }
.pl-planner-matrix-title-sub { font-size: 11px; color: #475569; line-height: 1.5; }
.pl-planner-matrix-title-sub b { color: inherit; font-weight: 700; }

.pl-mv2-scroll { overflow-x: auto; padding-bottom: 4px; padding-top: 12px; }
.pl-mv2-grid {
  display: grid; gap: 5px; min-width: 620px;
}
.pl-matrix-empty {
  padding: 20px; text-align: center; color: var(--text-3); font-size: 12px;
  background: #f8fafc; border-radius: 8px;
}

/* Corner cell — legend */
.pl-mv2-corner {
  padding: 6px 8px; background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px solid #e2e8f0; border-radius: 8px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.pl-mv2-corner-title {
  font-size: 10px; font-weight: 700; color: #64748b; line-height: 1.25;
}
.pl-mv2-corner-legend {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 4px; font-size: 9.5px; color: #475569;
}
.pl-mv2-corner-legend span {
  display: flex; align-items: center; gap: 4px;
}
.pl-mv2-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
}
.pl-mv2-dot-best { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.pl-mv2-dot-hit { background: linear-gradient(135deg, #34d399, #10b981); }
.pl-mv2-dot-miss { background: #e2e8f0; }

/* Column header (HH tier) */
.pl-mv2-col-head {
  padding: 6px 6px; text-align: center;
  background: linear-gradient(180deg, #dbeafe, #bfdbfe);
  border: 1px solid #93c5fd; border-radius: 8px;
}
.pl-mv2-col-icon {
  width: 18px; height: 18px; margin: 0 auto 2px;
  background: rgba(37, 99, 235, .15); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: #1e40af; font-size: 9px;
}
.pl-mv2-col-rate { font-size: 12px; font-weight: 700; color: #1e40af; line-height: 1.15; }
.pl-mv2-col-dt {
  font-size: 10px; color: #1e3a8a; margin-top: 1px;
  font-variant-numeric: tabular-nums; font-weight: 600;
}

/* Row header (KPI tier) */
.pl-mv2-row-head {
  padding: 6px 8px;
  border-radius: 8px;
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid transparent;
}
.pl-mv2-row-icon {
  width: 18px; height: 18px; margin-bottom: 2px;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 9px;
}
.pl-mv2-row-rate { font-size: 12px; font-weight: 700; line-height: 1.15; }
.pl-mv2-row-ads { font-size: 10px; margin-top: 1px; font-weight: 500; opacity: .85; }

.pl-mv2-row-top { background: linear-gradient(135deg, #dcfce7, #bbf7d0); border-color: #86efac; }
.pl-mv2-row-top .pl-mv2-row-icon { background: rgba(16, 185, 129, .18); color: #065f46; }
.pl-mv2-row-top .pl-mv2-row-rate, .pl-mv2-row-top .pl-mv2-row-ads { color: #065f46; }

.pl-mv2-row-good { background: linear-gradient(135deg, #ecfeff, #cffafe); border-color: #67e8f9; }
.pl-mv2-row-good .pl-mv2-row-icon { background: rgba(6, 182, 212, .18); color: #155e75; }
.pl-mv2-row-good .pl-mv2-row-rate, .pl-mv2-row-good .pl-mv2-row-ads { color: #155e75; }

.pl-mv2-row-ok { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fcd34d; }
.pl-mv2-row-ok .pl-mv2-row-icon { background: rgba(245, 158, 11, .18); color: #92400e; }
.pl-mv2-row-ok .pl-mv2-row-rate, .pl-mv2-row-ok .pl-mv2-row-ads { color: #92400e; }

.pl-mv2-row-low { background: linear-gradient(135deg, #fee2e2, #fecaca); border-color: #fca5a5; }
.pl-mv2-row-low .pl-mv2-row-icon { background: rgba(239, 68, 68, .18); color: #991b1b; }
.pl-mv2-row-low .pl-mv2-row-rate, .pl-mv2-row-low .pl-mv2-row-ads { color: #991b1b; }

/* Cell — kịch bản compact */
.pl-mv2-cell {
  position: relative;
  padding: 8px 6px; text-align: center;
  background: #fff;
  border: 1.5px solid #e2e8f0; border-radius: 8px;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  display: flex; flex-direction: column; justify-content: center;
}
.pl-mv2-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .07);
}
.pl-mv2-cell-total {
  font-size: 13px; font-weight: 700; color: #0f172a;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.pl-mv2-cell-hint {
  margin-top: 3px; font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}

.pl-mv2-cell-miss { background: #f8fafc; border-color: #e2e8f0; }
.pl-mv2-cell-miss .pl-mv2-cell-total { color: #94a3b8; }
.pl-mv2-cell-miss .pl-mv2-cell-hint { color: #94a3b8; }

.pl-mv2-cell-hit {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #34d399;
}
.pl-mv2-cell-hit .pl-mv2-cell-total { color: #065f46; }
.pl-mv2-cell-hit .pl-mv2-cell-hint { color: #059669; }

.pl-mv2-cell-best {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 60%, #fff 100%);
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .18), 0 4px 12px rgba(245, 158, 11, .2);
  transform: scale(1.02);
}
.pl-mv2-cell-best:hover { transform: scale(1.03) translateY(-1px); }
.pl-mv2-cell-best .pl-mv2-cell-total { color: #92400e; font-size: 14px; }
.pl-mv2-cell-best .pl-mv2-cell-hint { color: #b45309; }
.pl-mv2-best-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 2px 5px rgba(245, 158, 11, .35);
  display: flex; align-items: center; gap: 3px;
}
.pl-mv2-best-badge i { font-size: 8px; }

.pl-planner-matrix-note {
  margin-top: 8px; padding: 8px 10px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-left: 3px solid #10b981;
  border-radius: 6px; font-size: 11.5px; color: #065f46; line-height: 1.5;
}

/* ── Collapsed <details> summary ── */
.payroll-view-section-plain {
  background: transparent; border: none; padding: 0; box-shadow: none;
}
.pl-planner-details { border-radius: 14px; }
.pl-planner-details[open] .pl-planner-summary-chevron i { transform: rotate(180deg); }
.pl-planner-details[open] .pl-planner-summary {
  border-radius: 14px 14px 0 0;
}
.pl-planner-summary {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border: 1.5px solid #fbbf24; border-radius: 14px;
  list-style: none; user-select: none;
  transition: background .15s, box-shadow .15s;
}
.pl-planner-summary::-webkit-details-marker { display: none; }
.pl-planner-summary::marker { content: ''; }
.pl-planner-summary:hover {
  background: linear-gradient(135deg, #ffedd5 0%, #fde68a 100%);
  box-shadow: 0 4px 14px rgba(251, 191, 36, .2);
}
.pl-planner-summary-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .3);
}
.pl-planner-summary-text { flex: 1; min-width: 0; }
.pl-planner-summary-title {
  font-size: 15.5px; font-weight: 700; color: #0f172a; margin-bottom: 3px;
}
.pl-planner-summary-sub { font-size: 12.5px; color: #92400e; line-height: 1.5; }
.pl-planner-summary-chevron {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(245, 158, 11, .18); color: #b45309;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pl-planner-summary-chevron i { transition: transform .2s; font-size: 13px; }
.pl-planner-details-body {
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #fbbf24; border-top: none;
  border-radius: 0 0 14px 14px;
}
/* Khi mở, planner-card bên trong không cần border/bg riêng nữa (details-body đã có) */
.pl-planner-details-body .pl-planner-card {
  padding: 0; background: transparent; border: none; box-shadow: none; border-radius: 0;
}

@media (max-width: 720px) {
  .pl-planner-input-grid { grid-template-columns: 1fr; }
  .pl-recommend-grid { grid-template-columns: 1fr; }
  .pl-planner-card { padding: 16px; }
  .pl-planner-summary { padding: 14px 16px; }
  .pl-planner-summary-icon { width: 38px; height: 38px; font-size: 17px; }
  .pl-planner-summary-title { font-size: 14px; }
  .pl-planner-summary-sub { font-size: 11.5px; }
  .pl-planner-details-body { padding: 16px; }
  .pl-mv2-row-head { padding: 8px 10px; }
  .pl-mv2-row-rate { font-size: 12.5px; }
  .pl-mv2-cell { padding: 12px 8px; }
  .pl-mv2-cell-total { font-size: 14px; }
  .pl-mv2-cell-best .pl-mv2-cell-total { font-size: 16px; }
  .pl-mv2-best-badge { font-size: 9px; padding: 2px 8px; }
}

/* ═══ 3 KỊCH BẢN KHẢ THI (replace matrix) ═══ */
.pl-scenarios-wrap {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px;
}
.pl-scenarios-header {
  padding: 10px 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd; border-radius: 10px;
}
.pl-scenarios-title { font-size: 14px; font-weight: 700; color: #1e3a8a; margin-bottom: 3px; }
.pl-scenarios-title i { margin-right: 6px; color: #2563eb; }
.pl-scenarios-sub { font-size: 11.5px; color: #1e40af; line-height: 1.5; }

.pl-scenario-card {
  border: 1.5px solid #e2e8f0; border-radius: 12px;
  padding: 12px 14px; background: #fff;
  transition: box-shadow .15s, transform .15s;
}
.pl-scenario-card:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.pl-scenario-card-best {
  border-width: 2px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, .18);
}
.pl-scenario-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; margin-bottom: 8px;
  font-size: 11px; font-weight: 600;
  border: 1.5px solid; border-radius: 999px;
  background: #fff;
}
.pl-scenario-badge b { font-weight: 700; margin-right: 2px; }

.pl-scenario-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 10px;
  margin-bottom: 8px;
}
.pl-scenario-cell {
  background: rgba(255, 255, 255, .6); border-radius: 8px;
  padding: 8px 10px; border: 1px solid rgba(148, 163, 184, .25);
}
.pl-scenario-cell label {
  display: block; font-size: 10.5px; color: #64748b;
  font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  margin-bottom: 4px;
}
.pl-scenario-cell label i { margin-right: 4px; color: #94a3b8; }
.pl-scenario-cell b { font-size: 15px; font-weight: 700; color: #0f172a; display: block; }
.pl-scenario-cell small { font-size: 10.5px; color: #64748b; display: block; margin-top: 2px; }
.pl-scenario-cell small.ok { color: #059669; font-weight: 600; }
.pl-scenario-cell small.need { color: #2563eb; font-weight: 600; }
.pl-scenario-cell .pl-r-bar { height: 4px; margin: 4px 0 2px; }

.pl-scenario-actions {
  padding: 8px 10px; background: rgba(15, 23, 42, .03);
  border-radius: 8px; border-left: 3px solid #cbd5e1;
  display: flex; flex-direction: column; gap: 4px;
}
.pl-scenario-card-best .pl-scenario-actions {
  border-left-color: #10b981; background: rgba(16, 185, 129, .06);
}
.pl-scenario-action {
  font-size: 12px; color: #334155; line-height: 1.5;
}
.pl-scenario-action i { margin-right: 5px; width: 14px; text-align: center; }
.pl-scenario-action b { color: #0f172a; font-weight: 700; }

@media (max-width: 720px) {
  .pl-scenario-grid { grid-template-columns: 1fr; gap: 6px; }
  .pl-scenario-cell b { font-size: 14px; }
}

/* ═══ Collapsible sections (bảng lương / history / coaching) ═══ */
.pl-collapse-details { border-radius: 12px; }
.pl-collapse-details[open] .pl-collapse-summary-chevron i { transform: rotate(180deg); }
.pl-collapse-details[open] .pl-collapse-summary {
  border-radius: 12px 12px 0 0;
}
.pl-collapse-summary {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #cbd5e1; border-radius: 12px;
  list-style: none; user-select: none;
  transition: background .15s, box-shadow .15s;
}
.pl-collapse-summary::-webkit-details-marker { display: none; }
.pl-collapse-summary::marker { content: ''; }
.pl-collapse-summary:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}
.pl-collapse-summary-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #64748b, #475569);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(100, 116, 139, .25);
}
.pl-collapse-summary-text { flex: 1; min-width: 0; }
.pl-collapse-summary-title {
  font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pl-collapse-summary-sub { font-size: 11.5px; color: #64748b; line-height: 1.4; }
.pl-collapse-summary-chevron {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(100, 116, 139, .12); color: #475569;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pl-collapse-summary-chevron i { transition: transform .2s; font-size: 12px; }
.pl-collapse-details-body {
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #cbd5e1; border-top: none;
  border-radius: 0 0 12px 12px;
}
.pl-leader-tag {
  display: inline-block; padding: 1px 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af;
  border-radius: 999px; letter-spacing: .3px;
}

/* KPI card P&L — style theo trạng thái lãi/lỗ/chưa cấu hình */
.mkt-kpi-card.kpi-pl { border-left: 3px solid #14b8a6; transition: var(--transition); cursor: pointer; }
.mkt-kpi-card.kpi-pl:hover { background: rgba(20, 184, 166, .04); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(20, 184, 166, .12); }
.mkt-kpi-card.kpi-pl .kpi-label i { color: #14b8a6; margin-right: 4px; }
.mkt-kpi-card.kpi-pl.kpi-pl-loss { border-left-color: #ef4444; }
.mkt-kpi-card.kpi-pl.kpi-pl-loss:hover { background: rgba(239, 68, 68, .04); box-shadow: 0 6px 14px rgba(239, 68, 68, .12); }
.mkt-kpi-card.kpi-pl.kpi-pl-loss .kpi-label i { color: #ef4444; }
.mkt-kpi-card.kpi-pl.kpi-pl-unset { border-left-color: #94a3b8; }
.mkt-kpi-card.kpi-pl.kpi-pl-unset .kpi-label i { color: #94a3b8; }
.mkt-kpi-card.kpi-pl .kpi-value.plus { color: #059669; }
.mkt-kpi-card.kpi-pl .kpi-value.minus { color: #dc2626; }

/* P&L fullscreen view — khi body.pl-view-active: ẨN mọi section khác trong project view, CHỈ show panel finance */
body.pl-view-active section.view[data-view="project"] > *:not(.mkt-tabs):not(.mkt-tab-panel),
body.pl-view-active section.view[data-view="project"] > .section-title,
body.pl-view-active #project-kpi,
body.pl-view-active #project-teams,
body.pl-view-active #alerts-strip-project,
body.pl-view-active #project-tabs,
body.pl-view-active section.view[data-view="project"] .mkt-tab-panel:not([data-panel="finance"]) {
  display: none !important;
}
body.pl-view-active [data-panel="finance"] { display: block !important; }

.pl-view-header {
  display: none;
  align-items: center; gap: 14px; margin: 8px 0 20px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
body.pl-view-active .pl-view-header { display: flex; }
.pl-view-actions { margin-left: auto; display: flex; gap: 8px; }
.pl-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-2);
  cursor: pointer; transition: var(--transition);
}
.pl-back-btn:hover { background: var(--bg-elevate); color: var(--text-1); border-color: var(--primary); }
.pl-view-title {
  margin: 0; font-size: 20px; font-weight: 700; color: var(--text-1);
  display: flex; align-items: center; gap: 10px;
}
.pl-view-title i { color: #14b8a6; }
.pl-view-title #pl-view-project { color: var(--primary); }

/* Collapsible waterfall khoản mục — mặc định thu gọn, click summary để xổ */
.pl-details { padding: 0; }
.pl-details > summary.pl-details-summary {
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--text-1);
  border-radius: inherit;
  transition: background .15s;
}
.pl-details > summary.pl-details-summary::-webkit-details-marker { display: none; }
.pl-details > summary.pl-details-summary::marker { content: ''; }
.pl-details > summary.pl-details-summary:hover { background: var(--bg-soft); }
.pl-details > summary.pl-details-summary i:first-child { color: #14b8a6; }
.pl-details-chevron {
  margin-left: auto;
  color: var(--text-3);
  transition: transform .2s;
  font-size: 13px;
}
.pl-details[open] > summary.pl-details-summary .pl-details-chevron { transform: rotate(180deg); }
.pl-details > #pl-body { padding: 4px 18px 18px; }

/* Tồn kho là snapshot HIỆN TẠI — ẨN thanh date filter (preset chips + date range picker) */
body.inv-hide-date-toolbar #toolbar { display: none !important; }

/* === TAB TÀI CHÍNH — KPI cards + bảng P&L === */
.finance-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.finance-kpi-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
/* Đảo layout: SỐ LỚN LÊN TRÊN, tên + chú thích XUỐNG DƯỚI (anh Vinh 2026-07-18) */
.finance-kpi-card .value { order: 1; font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.finance-kpi-card .label { order: 2; font-size: 12px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.finance-kpi-card .sub { order: 3; font-size: 11px; color: var(--text-3); }
.finance-kpi-card.kpi-profit-pos .value { color: #16a34a; }
.finance-kpi-card.kpi-profit-neg .value { color: #dc2626; }
.finance-kpi-card.kpi-revenue .value { color: #2563eb; }
.finance-kpi-card.kpi-cogs .value { color: #d97706; }
.finance-kpi-card.kpi-ads .value { color: #db2777; }
.finance-kpi-card.kpi-variable .value { color: #60a5fa; }
.finance-kpi-card.kpi-fixed .value { color: #93c5fd; }

/* Doughnut chart phân bổ P&L — nằm dưới KPI cards */
.finance-pl-chart-wrap {
  margin: 20px 0 16px; padding: 16px 18px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
}
.finance-pl-chart-title {
  font-size: 13px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 12px;
}
.finance-pl-chart-title i { color: #2563eb; margin-right: 6px; }
.finance-pl-chart-box { height: 320px; position: relative; }
@media (max-width: 720px) { .finance-pl-chart-box { height: 380px; } .finance-pl-chart-row { grid-template-columns: 1fr !important; } }

/* Legend HTML style Kho — card per item với dot màu + tên + số + % */
.finance-pl-legend { display: flex; flex-direction: column; gap: 6px; }
/* Grid cột cố định để tất cả rows thẳng hàng (anh Vinh 2026-07-18):
   [dot 12px] [label 1fr] [% 70px] [số VND 140px] [chevron 14px] */
.fpl-leg-item {
  display: grid; grid-template-columns: 12px 1fr 70px 140px 14px; align-items: center; gap: 14px;
  padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; transition: background .15s;
}
.fpl-leg-item:hover { background: rgba(59,130,246,.04); }

/* Items có drill: hint tối giản — cursor + chevron phải */
.fpl-leg-clickable { cursor: pointer; transition: background .15s; }
.fpl-leg-clickable:hover { background: rgba(59,130,246,.06); border-color: rgba(59,130,246,.35); }
.fpl-leg-clickable::after {
  content: '\f105';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: var(--text-4); font-size: 12px;
  text-align: right;
  transition: color .15s;
}
.fpl-leg-clickable:hover::after { color: var(--primary); }
.fpl-leg-dot { width: 12px; height: 12px; border-radius: 50%; }
.fpl-leg-labelbox { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fpl-leg-label { color: var(--text-2); font-weight: 500; line-height: 1.3; }
.fpl-leg-sub { color: var(--text-4); font-weight: 400; font-size: 10.5px; line-height: 1.25; }
.fpl-leg-val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.fpl-leg-pct { color: var(--text-3); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.fpl-leg-total { border-top: 2px solid var(--primary); border-radius: 8px; background: linear-gradient(90deg, rgba(37,99,235,.08), rgba(37,99,235,.02)); margin-top: 4px; }
.fpl-leg-total .fpl-leg-label, .fpl-leg-total .fpl-leg-val, .fpl-leg-total .fpl-leg-pct { color: var(--primary); }
/* Profit/Loss row: lãi xanh, lỗ đỏ (áp cho label + val + pct + sub Margin) */
.fpl-leg-profit .fpl-leg-label, .fpl-leg-profit .fpl-leg-val, .fpl-leg-profit .fpl-leg-pct, .fpl-leg-profit .fpl-leg-sub { color: #10b981 !important; }
.fpl-leg-loss   .fpl-leg-label, .fpl-leg-loss   .fpl-leg-val, .fpl-leg-loss   .fpl-leg-pct, .fpl-leg-loss   .fpl-leg-sub { color: #ef4444 !important; }
.fpl-leg-profit .fpl-leg-label i, .fpl-leg-loss .fpl-leg-label i { color: inherit !important; }

.finance-warning {
  background: #fef3c7; border: 1px solid #fbbf24; color: #92400e;
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.finance-warning i { color: #d97706; }

.finance-legend {
  display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-2);
  margin-top: 10px; padding: 8px 12px; background: var(--bg-soft); border-radius: 6px;
}

/* ─── Finance table controls: search + expand toggle ─── */
.finance-table-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 10px; padding: 8px 10px; background: var(--bg-soft);
  border-radius: 8px; border: 1px solid var(--border-soft, #e2e8f0);
}
.finance-search-wrap {
  position: relative; flex: 1 1 260px; max-width: 340px; display: flex; align-items: center;
}
.finance-search-icon {
  position: absolute; left: 10px; color: #94a3b8; font-size: 12px; pointer-events: none;
}
.finance-search-input {
  width: 100%; padding: 7px 32px 7px 30px; border: 1px solid #cbd5e1;
  border-radius: 6px; font-size: 13px; background: #fff; color: var(--text-1);
  transition: border-color .15s, box-shadow .15s;
}
.finance-search-input:focus {
  outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.finance-search-input::placeholder { color: #94a3b8; }
.finance-search-clear {
  position: absolute; right: 6px; width: 22px; height: 22px; border: none; background: transparent;
  color: #94a3b8; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; transition: background .15s, color .15s;
}
.finance-search-clear:hover { background: #f1f5f9; color: #475569; }
.finance-visible-info {
  font-size: 12px; color: var(--text-2); font-weight: 500;
}
.finance-visible-info b { color: var(--text-1); font-weight: 700; }

.finance-expand-wrap {
  display: flex; justify-content: center; margin: 10px 0 4px;
}
.finance-expand-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; background: #fff; border: 1px solid #cbd5e1;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: #334155;
  cursor: pointer; transition: all .15s;
}
/* Attribute [hidden] cần win vì specificity ngang .finance-expand-btn — dùng !important */
.finance-expand-btn[hidden] { display: none !important; }
.finance-expand-btn:hover {
  background: #eff6ff; border-color: #3b82f6; color: #1d4ed8;
  transform: translateY(-1px); box-shadow: 0 2px 6px rgba(59,130,246,.15);
}
.finance-expand-btn .finance-expand-count { font-weight: 700; color: #3b82f6; }
.finance-expand-btn:hover .finance-expand-count { color: #1d4ed8; }
.finance-expand-icon { font-size: 11px; transition: transform .2s; }

.finance-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.finance-legend .badge-margin-good { width: 12px; height: 12px; border-radius: 3px; background: #16a34a; display: inline-block; }
.finance-legend .badge-margin-thin { width: 12px; height: 12px; border-radius: 3px; background: #f59e0b; display: inline-block; }
.finance-legend .badge-margin-loss { width: 12px; height: 12px; border-radius: 3px; background: #dc2626; display: inline-block; }
.finance-legend .badge-no-cost { width: 12px; height: 12px; border-radius: 3px; background: #94a3b8; display: inline-block; }

/* ─── OPEX Drill Modal — Chi phí biến đổi / cố định breakdown ─── */
.opex-drill-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
  z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: opex-drill-fade .2s ease-out;
}
@keyframes opex-drill-fade { from { opacity: 0; } to { opacity: 1; } }
.opex-drill-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 780px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(15,23,42,.35);
  animation: opex-drill-slide .25s ease-out;
}
@keyframes opex-drill-slide { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.opex-drill-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
.opex-drill-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 10px; }
.opex-drill-close {
  width: 32px; height: 32px; border: none; background: #f1f5f9; color: #64748b;
  border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.opex-drill-close:hover { background: #fee2e2; color: #dc2626; }
.opex-drill-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 16px 20px; background: linear-gradient(to right, #f8fafc, #eff6ff);
  border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
.opex-drill-sum-item { padding: 8px 4px; }
.opex-drill-sum-label { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.opex-drill-sum-value { font-size: 20px; font-weight: 800; color: #0f172a; margin-top: 2px; }
.opex-drill-sum-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.opex-drill-table-wrap {
  flex: 1 1 auto; overflow: auto; padding: 4px 20px;
}
.opex-drill-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.opex-drill-table thead th {
  position: sticky; top: 0; background: #fff; padding: 10px 8px; text-align: left;
  font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 2px solid #e2e8f0;
}
.opex-drill-table thead th.num { text-align: right; }
.opex-drill-table tbody td { padding: 12px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.opex-drill-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.opex-drill-name { font-weight: 700; color: #0f172a; font-size: 13.5px; }
.opex-drill-note { font-size: 11px; color: #64748b; margin-top: 2px; }
.opex-drill-formula { font-size: 11px; color: #94a3b8; font-family: ui-monospace, "SF Mono", monospace; margin-top: 3px; }
.opex-drill-value { font-weight: 700; color: #0f172a; }
.opex-drill-share { color: #475569; font-weight: 600; }
.opex-drill-pct { color: #64748b; font-weight: 500; }
.opex-drill-row-zero { background: #fafafa; opacity: .65; }
.opex-drill-row-zero .opex-drill-name { color: #94a3b8; font-weight: 500; }
.opex-drill-total-row {
  background: #eff6ff;
}
.opex-drill-total-row td {
  padding: 12px 8px; border-top: 2px solid #3b82f6; border-bottom: none;
  color: #1e40af; font-size: 14px;
}
.opex-drill-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; background: #f8fafc; border-top: 1px solid #e2e8f0; flex-shrink: 0;
}
.opex-drill-footer-hint { font-size: 12px; color: #64748b; }
.opex-drill-footer-hint b { color: #1e293b; }
.opex-drill-btn-close {
  padding: 8px 18px; background: #1e293b; color: #fff; border: none; border-radius: 8px;
  font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s;
}
.opex-drill-btn-close:hover { background: #0f172a; }
@media (max-width: 600px) {
  .opex-drill-summary { grid-template-columns: 1fr; }
  .opex-drill-modal { max-height: 96vh; }
}

/* Hover feedback cho card có drill */
.finance-kpi-card[data-open-opex-drill] { transition: transform .15s, box-shadow .15s; }
.finance-kpi-card[data-open-opex-drill]:hover {
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(59,130,246,.18);
}

.fin-profit-pos { color: #16a34a; font-weight: 600; }
.fin-profit-neg { color: #dc2626; font-weight: 600; }
.fin-margin-good { background: rgba(22, 163, 74, 0.08); color: #15803d; font-weight: 700; }
.fin-margin-thin { background: rgba(245, 158, 11, 0.10); color: #b45309; font-weight: 600; }
.fin-margin-loss { background: rgba(220, 38, 38, 0.10); color: #b91c1c; font-weight: 700; }
.fin-cost-badge { font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 600; }
.fin-cost-badge.has { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.fin-cost-badge.miss { background: rgba(148, 163, 184, 0.18); color: #475569; }
.fin-cost-badge.partial { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.fin-combo-hint { color: var(--text-3); margin-left: 6px; font-size: 11px; opacity: 0.7; }
.combo-row-clickable { cursor: pointer; }
.combo-row-clickable:hover { background: rgba(37, 99, 235, 0.06); }
/* Icon 🎁 báo SP đã cộng LN từ SP bán kèm — hover xem chi tiết */
.fin-combo-credited {
  color: #f59e0b; margin-left: 5px; font-size: 11px; cursor: help;
}
.fin-combo-credited:hover { color: #d97706; }
.combo-row-clickable:hover .fin-combo-hint { opacity: 1; color: #2563eb; }

/* Modal combo breakdown */
.combo-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.65);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
  animation: comboFadeIn 0.15s ease-out;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
@keyframes comboFadeIn { from { opacity: 0; } to { opacity: 1; } }
.combo-modal {
  background: var(--bg-elevate); border-radius: 14px; max-width: 720px; width: 92vw; max-height: 80vh;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); display: flex; flex-direction: column;
  position: relative; z-index: 1;
}
.combo-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-soft);
}
.combo-modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.combo-modal-head h3 code { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; padding: 2px 8px; border-radius: 5px; margin-left: 4px; font-size: 15px; }
.combo-modal-close {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  width: 32px; height: 32px; border-radius: 6px; font-size: 16px; cursor: pointer;
}
.combo-modal-close:hover { background: var(--bg-soft); color: var(--text); }
.combo-modal-body { padding: 16px 20px; overflow: auto; }
.combo-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.combo-tbl th { background: var(--bg-soft); padding: 8px 10px; border-bottom: 2px solid var(--border); text-align: left; font-weight: 600; color: var(--text-2); }
.combo-tbl th.num { text-align: right; }
.combo-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.combo-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.combo-tbl tbody tr:hover { background: rgba(37, 99, 235, 0.04); }
.combo-tbl code { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.combo-tot td { background: var(--bg-soft); border-top: 2px solid var(--border); }
.combo-foot-note { margin: 14px 0 0; padding: 10px 12px; background: rgba(37, 99, 235, 0.06); border-radius: 6px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.combo-foot-note i { color: #2563eb; }
.combo-foot-note code { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; padding: 1px 6px; border-radius: 4px; }
.combo-empty { padding: 24px; text-align: center; color: var(--text-2); }
.combo-empty code { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; padding: 2px 6px; border-radius: 4px; }

/* === P&L KẾ TOÁN === */
.section-title-inline { display: flex; align-items: center; gap: 8px; }
.pl-cfg-btn {
  margin-left: auto; background: var(--bg-soft); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 6px; color: var(--text-2); cursor: pointer;
  font-size: 12.5px; font-weight: 600;
}
.pl-cfg-btn:hover { background: rgba(37, 99, 235, 0.08); color: #2563eb; border-color: rgba(37, 99, 235, 0.3); }
.pl-cfg-btn i { margin-right: 4px; }

.pl-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.pl-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pl-table td:nth-child(1) { color: var(--text-2); }
.pl-table td.num { text-align: right; font-weight: 600; }
.pl-table td.pct { text-align: right; color: var(--text-3); font-weight: 500; font-size: 12px; min-width: 60px; }
.pl-table tr.pl-subtotal td { background: var(--bg-soft); font-weight: 700; }
.pl-table tr.pl-gross td { color: #15803d; }
.pl-table tr.pl-final td { background: rgba(22, 163, 74, 0.08); font-size: 15px; padding: 12px; border-top: 2px solid var(--border); }
.pl-table tr.pl-final-loss td { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }
.pl-table tr.pl-cost td:nth-child(2) { color: #dc2626; }
.pl-table td.num.neg::before { content: '−'; }
.pl-header td { font-weight: 700; font-size: 15px; color: var(--text); background: var(--bg-elevate); padding: 12px; border-bottom: 2px solid var(--border); }
.pl-nested-note { padding: 6px 12px 6px 32px; font-size: 11.5px; color: var(--text-3); }

.pl-empty-config {
  padding: 32px; text-align: center; color: var(--text-2); background: var(--bg-soft); border-radius: 8px;
}
.pl-empty-config h4 { margin: 0 0 8px; color: var(--text); }
.pl-empty-config button {
  margin-top: 14px; background: #2563eb; color: white; border: none;
  padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.pl-empty-config button:hover { background: #1d4ed8; }

/* Modal cấu hình chi phí */
.opex-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.65);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.opex-modal {
  background: var(--bg-elevate); border-radius: 14px; max-width: 720px; width: 92vw;
  max-height: 88vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
}
.opex-modal-head,
.opex-modal-header {
  padding: 16px 22px; border-bottom: 1px solid var(--border); background: var(--bg-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.opex-modal-head h3,
.opex-modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-1); }
.opex-modal-head h3 i,
.opex-modal-header h3 i { color: var(--primary, #2563eb); }
.opex-modal-close {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  font-size: 18px; line-height: 1; color: var(--text-3); cursor: pointer;
  transition: all .15s ease; flex-shrink: 0;
}
.opex-modal-close:hover { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .3); color: #dc2626; }
.opex-modal-body { padding: 20px; overflow: auto; }
.opex-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.opex-form-col h4 { margin: 0 0 12px; font-size: 13px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; }
.opex-form-col .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.opex-form-col .field label { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.opex-form-col .field .field-hint { font-size: 10.5px; color: var(--text-3); }
.opex-form-col .field input, .opex-form-col .field textarea {
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
  font-size: 13.5px; background: var(--bg-elevate); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.opex-form-col .field input[readonly] { background: rgba(16, 185, 129, .04); color: var(--text-1); font-weight: 600; cursor: not-allowed; border-color: rgba(16, 185, 129, .2); }

/* Salary field với toggle Đồng bộ bảng lương */
.opex-salary-field { position: relative; padding: 10px 12px; border: 1px dashed rgba(16, 185, 129, .3); border-radius: 8px; background: rgba(16, 185, 129, .02); }
.opex-salary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.opex-salary-head label[for] { margin-bottom: 0; }
.opex-sync-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: white; border: 1px solid var(--border); border-radius: 12px; font-size: 11px; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all .15s; user-select: none; }
.opex-sync-toggle input { display: none; }
.opex-sync-toggle i { font-size: 10px; }
.opex-sync-toggle:hover { border-color: rgba(16, 185, 129, .4); color: #059669; }
.opex-sync-toggle.active { background: #10b981; color: white; border-color: #10b981; }
.opex-sync-toggle.active i { color: white; }
#opex-salary-hint { font-size: 11px; color: var(--text-3); line-height: 1.5; }
#opex-salary-hint b { color: #059669; font-weight: 700; }

.opex-form-col .field input:focus, .opex-form-col .field textarea:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
/* Input với suffix badge (₫ / %) — badge nằm trong biên input, right-aligned */
.opex-input-suffix { position: relative; display: block; }
.opex-input-suffix > input { width: 100%; padding-right: 34px !important; text-align: right; }
.opex-suffix-badge {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12.5px; font-weight: 700; color: var(--text-3);
  pointer-events: none; user-select: none;
}
.opex-input-suffix > input:focus + .opex-suffix-badge { color: #2563eb; }

/* Ô gộp giá trị + % — VND lớn phía trên, % nhỏ phía dưới (2 cột: Giá vốn, Chi phí Ads) */
.fin-cell-stack { line-height: 1.25; padding-top: 6px !important; padding-bottom: 6px !important; }
.fin-cell-stack .fin-cell-main { display: block; font-variant-numeric: tabular-nums; }
.fin-cell-stack .fin-cell-sub {
  display: block; font-size: 11px; color: var(--text-3); margin-top: 2px;
  font-variant-numeric: tabular-nums; font-weight: 500;
}
.fin-cell-stack .fin-cell-sub.positive { color: #059669; }
.fin-cell-stack .fin-cell-sub.amber { color: #d97706; }
.fin-cell-stack .fin-cell-sub.negative { color: #dc2626; }
.opex-modal-foot,
.opex-modal-footer {
  padding: 14px 22px; border-top: 1px solid var(--border); background: var(--bg-soft);
  display: flex; gap: 10px; align-items: center;
}
.opex-modal-footer .btn-primary,
.opex-modal-footer .btn-secondary { padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s ease; }
.opex-modal-footer .btn-primary { background: var(--primary, #2563eb); color: #fff; border: 1px solid var(--primary, #2563eb); }
.opex-modal-footer .btn-primary:hover { background: #1d4ed8; }
.opex-modal-footer .btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.opex-modal-footer .btn-secondary { background: var(--bg-elevate, #fff); color: var(--text-2); border: 1px solid var(--border); }
.opex-modal-footer .btn-secondary:hover { background: var(--bg-soft); border-color: var(--text-3); }
.opex-apply-all {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--text-2);
}
.opex-apply-all input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #2563eb; }
.opex-apply-all strong { color: #dc2626; }

/* Month picker ở đầu modal cấu hình OPEX */
.opex-month-picker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  padding: 10px 12px; background: var(--bg-soft); border-radius: 8px; border: 1px solid var(--border);
}
.opex-month-picker label { font-size: 13px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.opex-month-picker select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-elevate); color: var(--text-1); font-size: 13px; cursor: pointer;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.opex-btn-copy { font-size: 12px !important; padding: 6px 12px !important; margin-left: auto; }
.opex-month-hint {
  display: block; margin-bottom: 12px; padding: 8px 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.5;
}
.opex-month-hint i { margin-right: 4px; }
.opex-month-hint.ok { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.opex-month-hint.fallback { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.opex-month-hint.empty { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }

/* Hint fallback ở đầu waterfall table (khi P&L đang dùng config tháng trước) */
.pl-fallback-hint {
  padding: 10px 14px; margin-bottom: 12px; border-radius: 6px;
  background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd;
  font-size: 12.5px; line-height: 1.5;
}
.pl-fallback-hint i { margin-right: 6px; }

/* Lịch sử cấu hình các tháng — collapsible panel trong modal OPEX */
.opex-history-panel {
  margin-top: 20px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-soft);
}
.opex-history-panel > summary {
  list-style: none; cursor: pointer; padding: 10px 14px;
  font-size: 13px; font-weight: 600; color: var(--text-1);
  display: flex; align-items: center; gap: 8px;
}
.opex-history-panel > summary::-webkit-details-marker { display: none; }
.opex-history-panel > summary i { color: #2563eb; }
.opex-history-panel > summary small { color: var(--text-3); font-weight: 500; margin-left: 4px; }
.opex-history-panel[open] > summary { border-bottom: 1px solid var(--border); }
.opex-history-empty { padding: 20px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.opex-history-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.opex-history-table th, .opex-history-table td {
  padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.opex-history-table th { background: var(--bg-elevate); color: var(--text-2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.opex-history-table td.num, .opex-history-table th.num { text-align: right; }
.opex-history-table tbody tr:hover { background: var(--bg-elevate); }
.opex-history-table tr.opex-hist-editing { background: rgba(37, 99, 235, 0.06); }
.opex-hist-badge {
  display: inline-block; padding: 2px 6px; background: #2563eb; color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 4px; margin-left: 4px;
}
.opex-hist-month { font-weight: 700; color: var(--text-1); }
.opex-hist-note { color: var(--text-3); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opex-hist-actions { text-align: right; white-space: nowrap; }
.opex-hist-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 8px; cursor: pointer; font-size: 11px; color: var(--text-2);
  margin-left: 4px; transition: all .15s;
}
.opex-hist-btn:hover { background: var(--bg-elevate); }
.opex-hist-btn-edit:hover { color: #2563eb; border-color: #2563eb; }
.opex-hist-btn-del:hover { color: #dc2626; border-color: #dc2626; }
.opex-btn { padding: 8px 18px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 13.5px; border: 1px solid var(--border); }
.opex-btn-primary { background: #2563eb; color: white; border-color: #2563eb; }
.opex-btn-primary:hover { background: #1d4ed8; }
.opex-btn-secondary { background: transparent; color: var(--text-2); }
.opex-btn-secondary:hover { background: var(--bg-soft); color: var(--text); }
.opex-close-x { background: transparent; border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 6px; cursor: pointer; color: var(--text-2); font-size: 16px; }
.opex-close-x:hover { background: var(--bg-soft); }
.opex-btn-danger { background: transparent; color: #dc2626; border-color: rgba(220,38,38,.3); padding: 6px 10px; font-size: 12px; }
.opex-btn-danger:hover { background: rgba(220,38,38,.08); border-color: #dc2626; }

/* ─── FX modal (Cấu hình tỷ giá) ─── */
.fx-banner {
  padding: 12px 14px; border-radius: 8px; margin-bottom: 18px;
  font-size: 13px; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px;
}
.fx-banner i { margin-top: 2px; font-size: 15px; flex-shrink: 0; }
.fx-banner-active { background: rgba(22,163,74,.08); color: #15803d; border: 1px solid rgba(22,163,74,.2); }
.fx-banner-active i { color: #16a34a; }
.fx-banner-fallback { background: rgba(245,158,11,.08); color: #b45309; border: 1px solid rgba(245,158,11,.25); }
.fx-banner-fallback i { color: #f59e0b; }
.fx-banner-default { background: rgba(59,130,246,.06); color: var(--text-2); border: 1px solid var(--border); }
.fx-banner-default i { color: var(--primary); }
.fx-warn { padding: 10px 12px; background: rgba(148,163,184,.12); border-radius: 6px; color: var(--text-3); font-size: 12.5px; margin-top: 8px; }
.fx-warn i { margin-right: 6px; }

.fx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fx-form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.fx-form-grid label span small { font-weight: 400; margin-left: 4px; }
.fx-form-grid input[type="text"] {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; font-family: inherit; color: var(--text); font-weight: 700;
  background: var(--bg);
}
.fx-form-grid input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.fx-form-grid input[readonly], .fx-form-grid input:disabled { background: var(--bg-soft); color: var(--text-3); cursor: not-allowed; font-weight: 500; }

.fx-month-picker { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg-soft); border-radius: 6px; }
.fx-month-picker strong { flex: 1; text-align: center; font-size: 13px; color: var(--text); }
.fx-month-picker .mp-nav-btn { background: transparent; border: 1px solid var(--border); border-radius: 5px; width: 26px; height: 26px; cursor: pointer; color: var(--text-2); font-size: 11px; }
.fx-month-picker .mp-nav-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--primary); color: var(--primary); }
.fx-month-picker .mp-nav-btn:disabled { opacity: .35; cursor: not-allowed; }

.fx-history-section h4 { font-size: 13.5px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 6px; }
.fx-history-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fx-history-table thead th { padding: 8px 10px; background: var(--bg-soft); font-weight: 600; text-align: left; color: var(--text-2); border-bottom: 1px solid var(--border); }
.fx-history-table thead th.num { text-align: right; }
.fx-history-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.fx-history-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fx-history-table tbody tr:hover { background: var(--bg-soft); }
.fx-del-btn { margin-left: 4px; }
/* Checkbox đồng bộ sang các dự án cùng thị trường */
.fx-sync-toggle {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 4px; padding: 12px 14px;
  background: rgba(59,130,246,.05); border: 1px dashed rgba(59,130,246,.3);
  border-radius: 8px; cursor: pointer; transition: var(--transition);
}
.fx-sync-toggle:hover { background: rgba(59,130,246,.08); border-color: var(--primary); }
.fx-sync-toggle input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.fx-sync-text { flex: 1; }
.fx-sync-text strong { display: block; font-size: 13px; color: var(--text-1); font-weight: 600; margin-bottom: 4px; }
.fx-sync-text strong i { color: var(--primary); margin-right: 4px; }
.fx-sync-text small { font-size: 12px; color: var(--text-3); font-weight: 400; line-height: 1.5; }
.fx-sync-text small code { background: var(--bg-soft); padding: 1px 6px; border-radius: 3px; font-size: 11px; margin: 0 2px; color: var(--text-2); }
@media (max-width: 640px) {
  .fx-form-grid { grid-template-columns: 1fr; }
}

.opex-ffm-toggle { display: flex; gap: 8px; margin-top: 4px; }
.opex-radio {
  flex: 1; display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--text-2); font-weight: 500;
}
.opex-radio input[type="radio"] { margin: 0; }
.opex-radio:hover { background: var(--bg-soft); }
.opex-radio.active { background: rgba(37, 99, 235, 0.08); border-color: #2563eb; color: #1d4ed8; font-weight: 600; }

.fin-total-row td {
  background: var(--bg-soft);
  border-top: 2px solid var(--border);
  font-size: 13.5px;
  padding: 12px 10px;
  position: sticky; bottom: 0;
}
.fin-total-row td strong { font-weight: 700; }

/* Toggle SP thực bán / Camp drive */
.finance-view-toggle {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg-soft); border-radius: 8px;
  margin-bottom: 14px;
}
.finance-view-toggle .toggle-label { font-size: 12px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.finance-view-toggle .toggle-group { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.finance-view-toggle .toggle-btn {
  border: none; background: transparent; color: var(--text-2); cursor: pointer;
  padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 5px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.15s;
}
.finance-view-toggle .toggle-btn:hover { color: var(--text); background: rgba(0,0,0,0.04); }
.finance-view-toggle .toggle-btn.active { background: var(--primary, #2563eb); color: white; }
.finance-view-toggle .toggle-hint { font-size: 11px; color: var(--text-3); margin-left: auto; }


/* ─── Return Rate cell + modal (v2 mature window 2026-07-09) ─── */
.ret-cell-inner { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.2; }
.ret-badge {
  display: inline-block; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}
.ret-badge-mature { background: rgba(16, 185, 129, .12); color: #059669; }
.ret-badge-manual { background: rgba(245, 158, 11, .15); color: #b45309; }
.ret-badge-insufficient { background: rgba(148, 163, 184, .18); color: #475569; }

.rr-modal-backdrop .opex-modal { max-width: 520px; }
.rr-summary { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px; background: var(--bg-soft); border-radius: 10px; margin-bottom: 16px; }
.rr-summary-rate { text-align: center; }
.rr-rate-value { font-size: 32px; font-weight: 700; color: var(--text-1); line-height: 1; }
.rr-rate-src { margin-top: 6px; }
.rr-window-info { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.rr-window-info strong { color: var(--text-1); font-weight: 700; }
.rr-lock-msg {
  padding: 12px 14px; background: rgba(16, 185, 129, .08); border-left: 3px solid #10b981;
  border-radius: 6px; font-size: 13px; color: var(--text-1); line-height: 1.5;
}
.rr-lock-msg i { color: #059669; margin-right: 4px; }
.rr-manual-frozen { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(0,0,0,.1); }
.rr-readonly-msg {
  padding: 12px 14px; background: rgba(148, 163, 184, .12); border-radius: 6px;
  font-size: 13px; color: var(--text-2); line-height: 1.5;
}
.rr-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; margin-top: 12px; }
.rr-form input[type=text] { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; box-sizing: border-box; }
.rr-form input[type=text]:focus { outline: none; border-color: #2563eb; }
.rr-manual-note { margin-top: 8px; padding: 8px 10px; background: var(--bg-soft); border-radius: 6px; font-size: 12.5px; color: var(--text-2); }
.opex-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-primary, .btn-secondary, .btn-danger {
  padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-soft); }
.btn-danger { background: transparent; color: #dc2626; border-color: rgba(220, 38, 38, .3); margin-right: auto; }
.btn-danger:hover { background: rgba(220, 38, 38, .08); }

/* ─── Feedback Floating Action Button (2026-07-10) ─── */
.fb-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 9500;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px 12px 16px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff; border: none; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 25px rgba(99, 102, 241, .35), 0 4px 8px rgba(0,0,0,.15);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fb-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(99, 102, 241, .45), 0 6px 12px rgba(0,0,0,.2); }
.fb-fab:active { transform: translateY(0); }
.fb-fab i { font-size: 16px; }
.fb-fab-label { white-space: nowrap; }
.fb-fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
/* Khi FAB có tin mới (data-has-unread="1") → pulse ring lan toả + rung nhẹ. */
.fb-fab[data-has-unread="1"] { animation: fbFabShake 2.6s ease-in-out infinite; }
.fb-fab[data-has-unread="1"]::before {
  content: ''; position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid #ef4444; opacity: 0; pointer-events: none;
  animation: fbFabRing 1.8s ease-out infinite;
}
.fb-fab[data-has-unread="1"] .fb-fab-badge { animation: fbBadgePulse 1.4s ease-in-out infinite; }
@keyframes fbFabRing {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes fbFabShake {
  0%, 88%, 100% { transform: translateX(0); }
  90% { transform: translateX(-3px) rotate(-2deg); }
  92% { transform: translateX(3px)  rotate(2deg); }
  94% { transform: translateX(-2px) rotate(-1deg); }
  96% { transform: translateX(2px)  rotate(1deg); }
  98% { transform: translateX(0)    rotate(0);    }
}
@keyframes fbBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,.6), 0 2px 6px rgba(0,0,0,.25); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(239,68,68,0), 0 2px 6px rgba(0,0,0,.25); }
}
@media (max-width: 640px) {
  .fb-fab-label { display: none; }
  .fb-fab { padding: 14px 16px; }
}

/* ─── Feedback modal ─── */
.fb-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .6); backdrop-filter: blur(3px);
  z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.fb-modal {
  background: var(--bg-elevate, #fff); border-radius: 14px; max-width: 860px; width: 100%;
  max-height: 88vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
}
.fb-modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border, #e5e7eb);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-soft, #f8fafc);
}
.fb-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-1, #111); display: flex; align-items: center; gap: 8px; }
.fb-modal-head h3 i { color: #6366f1; }
.fb-close { background: transparent; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; color: var(--text-3, #64748b); }
.fb-close:hover { background: rgba(239, 68, 68, .08); color: #dc2626; border-color: rgba(239, 68, 68, .3); }

.fb-tabs { display: flex; gap: 4px; padding: 0 20px; background: var(--bg-soft, #f8fafc); border-bottom: 1px solid var(--border, #e5e7eb); }
.fb-tab { padding: 10px 14px; border: none; background: transparent; font-size: 13px; font-weight: 600; color: var(--text-3, #64748b); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fb-tab.active { color: #6366f1; border-bottom-color: #6366f1; }
.fb-tab-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 700; }

.fb-body { padding: 18px 20px; overflow: auto; }
.fb-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2, #334155); margin: 12px 0 6px; }
.fb-form label:first-child { margin-top: 0; }
.fb-form input[type=text], .fb-form textarea, .fb-form select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border, #d1d5db); border-radius: 8px;
  font-size: 14px; font-family: inherit; box-sizing: border-box; background: #fff; color: var(--text-1, #111);
}
.fb-form textarea { min-height: 120px; resize: vertical; }
.fb-form input:focus, .fb-form textarea:focus, .fb-form select:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }

.fb-image-uploader { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.fb-image-thumb { position: relative; width: 90px; height: 90px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border, #e5e7eb); background: #f1f5f9; }
.fb-image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fb-image-remove { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: none; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0; }
.fb-image-add { width: 90px; height: 90px; border: 2px dashed var(--border, #cbd5e1); background: transparent; border-radius: 8px; cursor: pointer; color: var(--text-3, #64748b); font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.fb-image-add:hover { border-color: #6366f1; color: #6366f1; }

.fb-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.fb-btn { padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.fb-btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.fb-btn-primary:hover { filter: brightness(1.05); }
.fb-btn-secondary { background: transparent; color: var(--text-2, #334155); border-color: var(--border, #d1d5db); }
.fb-btn-secondary:hover { background: var(--bg-soft, #f8fafc); }
.fb-btn-danger { background: transparent; color: #dc2626; border-color: rgba(220, 38, 38, .3); }
.fb-btn-danger:hover { background: rgba(220, 38, 38, .08); }

/* ─── List view ─── */
.fb-list { display: flex; flex-direction: column; gap: 8px; }
.fb-item {
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 12px 14px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.fb-item:hover { border-color: #6366f1; background: rgba(99, 102, 241, .04); }
.fb-item-head { display: flex; align-items: center; gap: 10px; }
.fb-item-title { font-weight: 600; color: var(--text-1, #111); flex: 1; font-size: 14px; }
.fb-item-meta { font-size: 11.5px; color: var(--text-3, #64748b); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.fb-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.fb-status-open { background: rgba(59, 130, 246, .12); color: #1d4ed8; }
.fb-status-done { background: rgba(16, 185, 129, .12); color: #059669; }
.fb-status-rejected { background: rgba(148, 163, 184, .18); color: #475569; }
.fb-item-unread {
  border-left: 4px solid #ef4444; padding-left: 10px;
  background: linear-gradient(90deg, rgba(239,68,68,.08), rgba(239,68,68,0) 60%);
}
.fb-item-unread .fb-item-title { color: #b91c1c; }
.fb-item-unread .fb-item-title::before {
  content: '● MỚI';
  display: inline-block; margin-right: 8px; padding: 2px 7px;
  background: #ef4444; color: #fff; border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  vertical-align: middle; animation: fbBadgePulse 1.4s ease-in-out infinite;
}

.fb-empty { padding: 40px 20px; text-align: center; color: var(--text-3, #64748b); font-size: 13px; }

/* ─── Detail view ─── */
.fb-detail-back { background: transparent; border: none; color: #6366f1; cursor: pointer; font-size: 13px; font-weight: 600; padding: 0 0 12px; display: inline-flex; align-items: center; gap: 6px; }
.fb-detail-title { font-size: 17px; font-weight: 700; color: var(--text-1, #111); margin: 4px 0 8px; }
.fb-detail-meta { font-size: 12px; color: var(--text-3, #64748b); margin-bottom: 14px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fb-detail-content { font-size: 14px; color: var(--text-1, #111); line-height: 1.6; white-space: pre-wrap; padding: 14px; background: var(--bg-soft, #f8fafc); border-radius: 8px; margin-bottom: 14px; }
.fb-detail-images { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.fb-detail-images img { max-width: 200px; max-height: 200px; border-radius: 8px; border: 1px solid var(--border, #e5e7eb); cursor: pointer; }

.fb-response { margin-top: 20px; padding: 14px; background: rgba(99, 102, 241, .06); border-left: 3px solid #6366f1; border-radius: 8px; }
.fb-response-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; color: var(--text-3, #64748b); }
.fb-response-head strong { color: #6366f1; font-size: 13px; }
.fb-response-body { font-size: 13.5px; color: var(--text-1, #111); line-height: 1.6; white-space: pre-wrap; }

/* ─── Feedback thread (chat 2-chiều) ─── */
.fb-thread { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.fb-thread-title { font-size: 12.5px; font-weight: 700; color: var(--text-2, #334155); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.fb-thread-title i { color: #6366f1; }
.fb-msg { padding: 10px 14px; border-radius: 10px; max-width: 88%; word-wrap: break-word; }
.fb-msg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 11.5px; color: var(--text-3, #64748b); gap: 10px; }
.fb-msg-head strong { font-size: 12.5px; }
.fb-msg-body { font-size: 13.5px; color: var(--text-1, #111); line-height: 1.55; white-space: pre-wrap; }
.fb-msg-admin { align-self: flex-start; background: rgba(99, 102, 241, .08); border-left: 3px solid #6366f1; }
.fb-msg-admin .fb-msg-head strong { color: #4f46e5; }
.fb-msg-author { align-self: flex-end; background: rgba(16, 185, 129, .08); border-right: 3px solid #10b981; text-align: left; }
.fb-msg-author .fb-msg-head strong { color: #059669; }

/* Optimistic UI states: tin nhắn vừa gửi (đang chờ ACK server) & tin nhắn gửi lỗi. */
.fb-msg-pending { opacity: .58; }
.fb-msg-pending .fb-msg-head span::after { content: ' · gửi…'; opacity: .8; }
.fb-msg-failed { border: 1px solid rgba(239, 68, 68, .55); background: rgba(239, 68, 68, .06) !important; }
.fb-msg-failed .fb-msg-head span::after { content: ' · ⚠ gửi lỗi — bấm để thử lại'; color: #dc2626; font-weight: 600; }
/* Slide-in animation cho tin nhắn mới (mượt như Messenger) */
@keyframes fb-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fb-msg-new { animation: fb-msg-in .18s ease-out; }
.fb-msg-pending.fb-msg-new { animation: fb-msg-in .18s ease-out; }

.fb-admin-actions { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border, #e5e7eb); }
.fb-admin-actions label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2, #334155); margin-bottom: 6px; }
.fb-admin-actions textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border, #d1d5db); border-radius: 8px; font-size: 13.5px; box-sizing: border-box; font-family: inherit; min-height: 80px; resize: vertical; }
.fb-admin-btn-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ─── Compose bar chat-style (2026-07-13) ─── */
.fb-detail-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fb-detail-delete {
  background: transparent; border: 1px solid rgba(220, 38, 38, .28);
  color: #dc2626; border-radius: 8px; width: 32px; height: 32px; cursor: pointer;
  font-size: 12px; display: inline-flex; align-items: center; justify-content: center;
}
.fb-detail-delete:hover { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .5); }

.fb-compose { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border, #e5e7eb); }
.fb-compose-row {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--bg-soft, #f8fafc); padding: 6px; border-radius: 24px;
  border: 1px solid var(--border, #e5e7eb);
}
.fb-compose-row:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.fb-compose-select {
  height: 36px; padding: 0 10px; border-radius: 18px;
  border: 1px solid var(--border, #d1d5db); background: #fff; font-size: 12.5px; font-weight: 600;
  color: var(--text-2, #334155); cursor: pointer; flex-shrink: 0;
}
.fb-compose-input {
  flex: 1; border: none; background: transparent; outline: none;
  padding: 8px 4px; font-size: 14px; font-family: inherit; resize: none;
  max-height: 140px; min-height: 20px; line-height: 1.45; color: var(--text-1, #111);
}
.fb-compose-input::placeholder { color: var(--text-3, #94a3b8); }
.fb-compose-send {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fb-compose-send:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(99, 102, 241, .45); }
.fb-compose-send:active { transform: scale(0.96); }
.fb-compose-hint { font-size: 11px; color: var(--text-3, #94a3b8); margin-top: 6px; text-align: right; padding-right: 10px; }

/* Nút đính kèm ảnh */
.fb-compose-attach {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: transparent; color: var(--text-3, #64748b); cursor: pointer;
  font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s, color .15s;
}
.fb-compose-attach:hover { background: rgba(99,102,241,.10); color: #6366f1; }

/* Preview ảnh sắp gửi */
.fb-compose-images { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px 8px; }
.fb-compose-images:empty { display: none; }
.fb-msg-img-thumb {
  position: relative; width: 76px; height: 76px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border, #e5e7eb); background: #f8fafc;
}
.fb-msg-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-msg-img-remove {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: none; cursor: pointer; font-size: 14px;
  line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
}
.fb-msg-img-remove:hover { background: var(--danger, #ef4444); }

/* Ảnh trong message thread */
.fb-msg-images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fb-msg-images img {
  max-width: 160px; max-height: 160px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border, #e5e7eb); object-fit: cover; transition: transform .15s;
}
.fb-msg-images img:hover { transform: scale(1.03); border-color: #6366f1; }

.fb-status-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border, #e5e7eb); }
/* Variant: chips ở đầu detail (cạnh nút xoá) — inline, không border-top, chip nhỏ hơn */
.fb-detail-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fb-status-chips-top { margin-top: 0; padding-top: 0; border-top: none; gap: 6px; }
.fb-status-chips-top .fb-chip { padding: 5px 10px; font-size: 12px; }
.fb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border, #d1d5db); background: #fff; color: var(--text-2, #334155);
  cursor: pointer; transition: all .15s ease;
}
.fb-chip:hover { transform: translateY(-1px); }
.fb-chip-done:hover     { background: rgba(16, 185, 129, .1);  border-color: #10b981; color: #059669; }
.fb-chip-rejected:hover { background: rgba(148, 163, 184, .18); border-color: #94a3b8; color: #475569; }
.fb-chip-open:hover     { background: rgba(59, 130, 246, .1);  border-color: #3b82f6; color: #1d4ed8; }
@media (max-width: 640px) {
  .fb-compose-hint { display: none; }
  .fb-compose-select { max-width: 110px; }
}

.fb-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 10000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 20px; }
.fb-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Modal Thêm nhân viên (2026-07-13) */
.emp-picker { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; padding: 8px; background: var(--bg-soft, #f8fafc); border: 1px solid var(--border, #e5e7eb); border-radius: 8px; }
.emp-pick-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.emp-pick-item:hover { background: rgba(99,102,241,.06); }
.emp-pick-item input[type=checkbox] { margin: 0; }
.emp-pick-item strong { color: #4f46e5; font-family: ui-monospace, monospace; font-size: 12px; min-width: 40px; }
.emp-pick-item span { flex: 1; color: var(--text-1, #111); }
.emp-pick-item em { color: var(--text-3, #94a3b8); font-style: normal; font-size: 11px; }