:root {
      --primary: #0F2942;
      --primary-hover: #173E63;
      --accent: #0284C7;
      --accent-light: #E0F2FE;
      --bg: #F8FAFC;
      --card-bg: #FFFFFF;
      --border: #E2E8F0;
      --border-focus: #38BDF8;
      --text: #0F172A;
      --text-muted: #64748B;
      --success: #10B981;
      --success-bg: #ECFDF5;
      --warning: #F59E0B;
      --warning-bg: #FFFBEB;
      --danger: #EF4444;
      --danger-bg: #FEF2F2;
      --purple: #8B5CF6;
      --purple-bg: #F5F3FF;
      --radius: 10px;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
      /* Shrinks all text together on narrower screens so more rows/columns fit
         without a manual browser zoom; 1 at >=1600px wide, down to 0.82 min. */
      /* Type weights -- light, like the reference the user picked on 2026-10-12:
         running text / table cells / inputs 400, labels / buttons / tabs medium,
         titles / column headers / totals / big numbers strong. Change them here only. */
      --fw-medium: 500;
      --fw-strong: 600;
      --font-scale: clamp(0.82, 1 + (100vw - 1600px) / 4000px, 1);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { max-width: 100%; overflow-x: hidden; }
    body {
      background: var(--bg);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: var(--text);
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
    }
    /* Header */
    header {
      background: linear-gradient(135deg, #1B4A7A 0%, #25598F 50%, #17426E 100%);
      color: #fff;
      padding: 6px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .brand-logo {
      background: linear-gradient(135deg, #0284C7, #06B6D4);
      color: white;
      font-weight: var(--fw-strong);
      font-size: calc(15px * var(--font-scale));
      padding: 6px 10px;
      border-radius: 6px;
      letter-spacing: 0.5px;
    }
    .brand-title {
      font-size: calc(15px * var(--font-scale));
      line-height: 1.25;
      font-weight: var(--fw-strong);
      letter-spacing: -0.2px;
    }
    .brand-sub {
      font-size: calc(10.5px * var(--font-scale));
      line-height: 1.25;
      color: #B6C6DA;
      display: block;
    }
    .user-panel {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: calc(13px * var(--font-scale));
    }
    .user-badge {
      background: rgba(255,255,255,0.12);
      padding: 4px 10px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      backdrop-filter: blur(4px);
    }
    .campus-badge {
      background: #0284C7;
      color: #fff;
      font-weight: var(--fw-medium);
      font-size: calc(11px * var(--font-scale));
      padding: 2px 6px;
      border-radius: 4px;
    }
    /* App Layout */
    .app-container {
      max-width: 100%;
      margin: 0 auto;
      padding: 16px;
    }
    /* Toolbar */
    .toolbar {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 16px;
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      box-shadow: var(--shadow-sm);
    }
    .toolbar-left, .toolbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    /* Never wider than the toolbar: with many tabs (admin) the tab bar scrolls
       sideways instead of pushing the last tabs off-screen. */
    .toolbar-left { min-width: 0; max-width: 100%; }
    .toolbar-left .tabs-nav { max-width: 100%; }
    .period-select-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .period-to-wrap { display: inline-flex; align-items: center; gap: 8px; }
    .period-to-wrap[hidden] { display: none; }
    .period-label {
      font-weight: var(--fw-medium);
      font-size: calc(13px * var(--font-scale));
      color: var(--text-muted);
    }
    select, input, textarea {
      font-family: inherit;
      font-size: calc(13px * var(--font-scale));
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 7px 10px;
      background: #fff;
      color: var(--text);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    select:focus, input:focus, textarea:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
    }
    b, strong, th { font-weight: var(--fw-strong); }
    /* Navigation Tabs */
    .tabs-nav {
      display: flex;
      gap: 4px;
      background: #E2E8F0;
      padding: 3px;
      border-radius: 8px;
      overflow-x: auto;
    }
    .tab-btn {
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-weight: var(--fw-medium);
      font-size: calc(12.5px * var(--font-scale));
      padding: 7px 12px;
      border-radius: 6px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .tab-btn:hover { background: rgba(255,255,255,0.5); }
    .tab-btn.active {
      background: #fff;
      color: var(--primary);
      box-shadow: var(--shadow-sm);
    }
    /* Desktop tab bar in the style the user picked on 2026-10-13: flat tabs, the open
       one underlined, a small down chevron after each name (decoration only -- one
       tab is still one screen). The phone menu below keeps its own list look. */
    @media (min-width: 769px) {
      .tabs-nav { background: transparent; padding: 0; gap: 2px; }
      .tab-btn { border-radius: 6px 6px 0 0; border-bottom: 3px solid transparent; padding: 8px 10px 6px; }
      .tab-btn::after {
        content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px;
        border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
        transform: translateY(-3px) rotate(45deg); opacity: 0.6;
      }
      .tab-btn:hover { background: var(--accent-light); }
      .tab-btn.active { background: transparent; box-shadow: none; color: var(--primary); border-bottom-color: var(--accent); }
    }
    /* Phone menu (max-width 768px): a three-line button replaces the sideways tab
       bar; the tabs drop down under it. The thin line running round the button
       plays three laps when the page opens, then rests (user's pick, after the
       menu button of kidsclub.edu.vn). */
    .nav-mobile-bar, .nav-backdrop { display: none; }
    .nav-menu-btn {
      position: relative; flex: none; width: 40px; height: 36px; padding: 0; border: 0; border-radius: 6px;
      background: transparent; cursor: pointer; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 5px;
    }
    .nav-menu-btn .line {
      display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--primary);
      transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .nav-menu-pulse { position: absolute; inset: 0; pointer-events: none; }
    .nav-menu-pulse .bar { position: absolute; background: var(--accent); opacity: 0; }
    .nav-menu-pulse .top { top: 0; left: 0; width: 100%; height: 2px; transform-origin: left; animation: nav-run-x 2s linear 3; }
    .nav-menu-pulse .right { top: 0; right: 0; width: 2px; height: 100%; transform-origin: top; animation: nav-run-y 2s linear 0.5s 3; }
    .nav-menu-pulse .bottom { bottom: 0; left: 0; width: 100%; height: 2px; transform-origin: right; animation: nav-run-x 2s linear 1s 3; }
    .nav-menu-pulse .left { top: 0; left: 0; width: 2px; height: 100%; transform-origin: bottom; animation: nav-run-y 2s linear 1.5s 3; }
    @keyframes nav-run-x {
      0% { transform: scaleX(0); opacity: 1; } 25% { transform: scaleX(1); opacity: 1; }
      50% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(1); opacity: 0; }
    }
    @keyframes nav-run-y {
      0% { transform: scaleY(0); opacity: 1; } 25% { transform: scaleY(1); opacity: 1; }
      50% { transform: scaleY(1); opacity: 0; } 100% { transform: scaleY(1); opacity: 0; }
    }
    .toolbar.nav-open .nav-menu-btn .line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .toolbar.nav-open .nav-menu-btn .line:nth-child(2) { opacity: 0; }
    .toolbar.nav-open .nav-menu-btn .line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-menu-current { font-weight: var(--fw-strong); font-size: calc(14px * var(--font-scale)); color: var(--primary); cursor: pointer; }
    @media (prefers-reduced-motion: reduce) {
      .nav-menu-pulse .bar { animation: none; }
      .nav-menu-btn .line { transition: none; }
    }
    @media (max-width: 768px) {
      .nav-mobile-bar { display: flex; align-items: center; gap: 10px; width: 100%; }
      .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(15, 41, 66, 0.35); }
      .nav-backdrop[hidden] { display: none; }
      .toolbar.nav-open { position: relative; z-index: 61; }
      .toolbar-left { flex-direction: column; align-items: stretch; gap: 0; }
      .toolbar .tabs-nav {
        display: grid; grid-template-columns: 1fr; gap: 2px; width: 100%; padding: 0 3px; background: transparent;
        max-height: 0; opacity: 0; overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
      }
      .toolbar.nav-open .tabs-nav { max-height: 70vh; opacity: 1; padding: 8px 3px 3px; overflow-y: auto; }
      .toolbar .tab-btn {
        text-align: left; white-space: normal; min-height: 42px; padding: 10px 12px;
        font-size: calc(13.5px * var(--font-scale)); border-radius: 8px;
      }
      .toolbar .tab-btn[hidden] { display: none; }
      .toolbar .tab-btn.active { background: var(--accent-light); color: var(--primary); box-shadow: none; }
    }
    /* Line icons from the sprite at the top of index.html: one colour, the text's own. */
    .icon {
      width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.22em;
    }
    .btn-icon { padding: 7px 9px; line-height: 1; }
    .btn-icon .icon { width: 1.3em; height: 1.3em; vertical-align: middle; }
    /* A small icon-only action right after a value (rename, change AO, clear a date). */
    .btn-icon.btn-quiet {
      padding: 4px; border: 0; background: transparent; color: var(--text-muted); vertical-align: middle;
    }
    .btn-icon.btn-quiet:hover, .btn-icon.btn-quiet:focus-visible { background: var(--accent-light); color: var(--accent); }
    .btn-icon.btn-quiet.btn-quiet-danger:hover, .btn-icon.btn-quiet.btn-quiet-danger:focus-visible { background: var(--danger-bg); color: var(--danger); }
    .btn-icon.btn-quiet .icon { width: 1.15em; height: 1.15em; }
    /* Buttons */
    .btn {
      border: none;
      border-radius: 6px;
      padding: 7px 14px;
      font-size: calc(13px * var(--font-scale));
      font-weight: var(--fw-medium);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s;
      font-family: inherit;
    }
    .btn:active { transform: scale(0.97); }
    /* .btn's display:inline-flex otherwise beats the browser's own
       [hidden] { display: none } -- e.g. "Chuyển sang CMS" stayed visible
       on already-pushed leads. */
    .btn[hidden] { display: none; }
    .btn-primary {
      background: linear-gradient(135deg, #0284C7, #0369A1);
      color: #fff;
    }
    .btn-primary:hover { background: linear-gradient(135deg, #0369A1, #075985); box-shadow: 0 2px 8px rgba(2,132,199,0.3); }
    .btn-success {
      background: linear-gradient(135deg, #10B981, #059669);
      color: #fff;
    }
    .btn-success:hover { background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
    .btn-secondary {
      background: #F1F5F9;
      color: #334155;
      border: 1px solid var(--border);
    }
    .btn-secondary:hover { background: #E2E8F0; }
    .btn-outline {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
    }
    .btn-outline:hover { background: #F8FAFC; }
    .btn-danger {
      background: linear-gradient(135deg, #EF4444, #DC2626);
      color: #fff;
    }
    .btn-danger:hover { box-shadow: 0 2px 8px rgba(239,68,68,0.3); }
    .btn-warning {
      background: linear-gradient(135deg, #F59E0B, #D97706);
      color: #fff;
    }
    .btn-warning:hover { box-shadow: 0 2px 8px rgba(245,158,11,0.3); }
    .btn-purple {
      background: linear-gradient(135deg, #8B5CF6, #7C3AED);
      color: #fff;
    }
    .btn-purple:hover { box-shadow: 0 2px 8px rgba(139,92,246,0.3); }
    .btn-sm {
      font-size: calc(12px * var(--font-scale));
      padding: 4px 10px;
    }
    /* Cards */
    .card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-sm);
      transition: box-shadow 0.2s;
    }
    .card:hover { box-shadow: var(--shadow-md); }
    .card-title {
      font-size: calc(15px * var(--font-scale));
      font-weight: var(--fw-strong);
      color: var(--primary);
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    /* Status Badge & Auto-save */
    .sync-status[hidden] { display: none; }
    .sync-status {
      font-size: calc(12px * var(--font-scale));
      font-weight: 500;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--success);
    }
    .dot.saving {
      background: var(--warning);
      animation: pulse 1s infinite;
    }
    @keyframes pulse {
      0% { opacity: 0.4; }
      50% { opacity: 1; }
      100% { opacity: 0.4; }
    }
    @keyframes slideIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Smart Matrix Spreadsheet */
    .sheet-wrapper {
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fff;
    }
    .sheet-table {
      width: 100%;
      border-collapse: collapse;
      font-size: calc(12.5px * var(--font-scale));
      min-width: 1050px;
    }
    .sheet-table th, .sheet-table td {
      border: 1px solid #E2E8F0;
      padding: 6px 8px;
      text-align: right;
    }
    .sheet-table th {
      background: #F1F5F9;
      font-weight: var(--fw-strong);
      color: var(--primary);
      text-align: center;
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .sheet-table th.prog-header {
      background: #0F2942;
      color: #fff;
      font-size: calc(13px * var(--font-scale));
      padding: 8px;
    }
    .sheet-table th.sub-header {
      background: #1E3A5F;
      color: #E2E8F0;
      font-size: calc(11.5px * var(--font-scale));
    }
    /* Marketing KPI by channel (2026-10-16): the program's Tổng column group stands out,
       figures the user cannot type are greyed, Facebook's own come from Ads. */
    .intake-controls.mk-filter label { flex: 0 1 240px; }
    #marketingKpiTable td { white-space: nowrap; }
    #marketingKpiTable th.prog-header { text-align: left; padding-left: 16px; }
    #marketingKpiTable .cell-input { min-width: 96px; }
    #marketingKpiTable th.mk-total-head { background: #0F2942; }
    #marketingKpiTable td.mk-readonly { color: var(--text-muted); background: #F8FAFC; }
    #marketingKpiTable td.mk-auto { color: #1D4ED8; background: #EFF6FF; }
    #marketingKpiTable td.mk-total { border-right: 2px solid #CBD5E1; }
    .sheet-table td.campus-col {
      text-align: left;
      font-weight: var(--fw-strong);
      background: #F8FAFC;
      color: var(--primary);
      position: sticky;
      left: 0;
      z-index: 5;
    }
    .sheet-table tr:hover td {
      background: #F0F7FF;
    }
    .sheet-table tr.total-row {
      background: #E2E8F0 !important;
      font-weight: var(--fw-strong);
    }
    .sheet-table tr.total-row td {
      background: #E2E8F0 !important;
      color: var(--primary);
      font-size: calc(13px * var(--font-scale));
      border-top: 2px solid #CBD5E1;
    }
    .cell-input {
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      text-align: right;
      font-size: calc(12.5px * var(--font-scale));
      padding: 4px;
      border-radius: 4px;
      font-family: inherit;
      -moz-appearance: textfield;
    }
    .cell-input::-webkit-outer-spin-button,
    .cell-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .cell-input:hover {
      border-color: #CBD5E1;
      background: #fff;
    }
    .cell-input:focus {
      background: #fff;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }
    .weekly-breakdown {
      font-size: calc(10.5px * var(--font-scale));
      color: #6B7280;
      white-space: nowrap;
      margin-top: 2px;
    }
    .pct-cell {
      font-weight: var(--fw-strong);
      font-size: calc(11.5px * var(--font-scale));
      padding: 4px 6px;
      border-radius: 4px;
      display: inline-block;
      min-width: 48px;
      text-align: center;
    }
    .pct-good { background: var(--success-bg); color: var(--success); }
    .pct-mid { background: var(--warning-bg); color: var(--warning); }
    .pct-low { background: var(--danger-bg); color: var(--danger); }
    /* Ma Trận pace colors: % judged against day-of-month progress (reports.js paceClass) */
    .pace-1 { background: #FEE2E2; color: #B91C1C; }
    .pace-2 { background: #FFEDD5; color: #C2410C; }
    .pace-3 { background: #FEF9C3; color: #A16207; }
    .pace-4 { background: #DCFCE7; color: #15803D; }
    .pace-5 { background: #15803D; color: #FFFFFF; }
    .pace-none { background: #F1F5F9; color: #64748B; }
    .pace-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; font-size: 12px; color: var(--text-muted); }
    .pace-legend .pct-cell { font-size: 11px; padding: 2px 8px; }

    /* Summary Dashboard Cards */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 14px;
      margin-bottom: 16px;
    }
    .kpi-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 18px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .kpi-card-header {
      font-size: calc(12px * var(--font-scale));
      font-weight: var(--fw-medium);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      justify-content: space-between;
    }
    .kpi-card-val {
      font-size: calc(22px * var(--font-scale));
      font-weight: var(--fw-strong);
      color: var(--primary);
      margin: 8px 0;
    }
    .kpi-card-sub {
      font-size: calc(12px * var(--font-scale));
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
    }
    .progress-bar-bg {
      height: 6px;
      background: #E2E8F0;
      border-radius: 3px;
      overflow: hidden;
      margin-top: 6px;
    }
    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), #06B6D4);
      border-radius: 3px;
      transition: width 0.4s ease;
    }

    /* Mobile Accordion Cards */
    .mobile-cards {
      display: none;
    }
    .mobile-campus-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .mobile-card-header {
      padding: 12px 14px;
      background: #F8FAFC;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }
    .mobile-card-title {
      font-weight: var(--fw-strong);
      color: var(--primary);
      font-size: calc(15px * var(--font-scale));
    }
    .mobile-card-body {
      padding: 12px 14px;
      display: none;
    }
    .mobile-card-body.open {
      display: block;
    }
    .prog-block {
      border: 1px solid #E2E8F0;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 10px;
      background: #FAFBFD;
    }
    .prog-block-title {
      font-weight: var(--fw-strong);
      font-size: calc(13px * var(--font-scale));
      color: var(--accent);
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
    }
    .form-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .form-grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    .form-grid-4 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 8px;
    }
    .form-field label {
      display: block;
      font-size: calc(11px * var(--font-scale));
      font-weight: var(--fw-medium);
      color: var(--text-muted);
      margin-bottom: 3px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .form-field input, .form-field select, .form-field textarea {
      width: 100%;
      padding: 8px;
      font-size: calc(13px * var(--font-scale));
    }

    /* Weekly Tracker */
    .weekly-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 16px;
    }
    .weekly-grid > div { min-width: 0; }
    .forecast-box {
      width: 100%;
      height: 220px;
      resize: vertical;
      line-height: 1.6;
    }

    /* Data Table for Leads & Payments */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: calc(12.5px * var(--font-scale));
    }
    .data-table th, .data-table td {
      border: 1px solid #E2E8F0;
      padding: 5px 7px;
      text-align: left;
      line-height: 1.3;
    }
    .data-table th {
      background: linear-gradient(180deg, #F8FAFC, #EDF2F7);
      font-weight: var(--fw-strong);
      color: var(--primary);
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 5;
      font-size: calc(11.5px * var(--font-scale));
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .sortable-th { cursor: pointer; user-select: none; }
    .sortable-th:hover { background: #E2E8F0; }
    .sortable-th::after { content: ''; display: inline-block; width: 0.8em; opacity: 0.4; }
    .sortable-th.sorted-asc::after { content: '▲'; opacity: 1; }
    .sortable-th.sorted-desc::after { content: '▼'; opacity: 1; }
    .data-table tr:nth-child(even) { background: #FAFBFD; }
    .data-table tr:hover td { background: #EDF5FF; }
    .data-table td.num-col { text-align: right; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
    .data-table td.action-col { text-align: center; white-space: nowrap; }
    .data-table-wrapper {
      overflow-x: auto;
      max-width: 100%;
      border: 1px solid var(--border);
      border-radius: 8px;
      max-height: 520px;
      overflow-y: auto;
    }

    /* Entry Form Card */
    .entry-form {
      background: linear-gradient(135deg, #F0F7FF 0%, #F5F3FF 100%);
      border: 1px solid #D4E4F7;
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 16px;
    }
    .entry-form-title {
      font-size: calc(14px * var(--font-scale));
      font-weight: var(--fw-strong);
      color: var(--primary);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .entry-form .form-actions {
      margin-top: 12px;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    /* Filter Bar */
    .filter-bar {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 12px;
      padding: 10px 14px;
      background: #F8FAFC;
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .filter-bar label {
      font-size: calc(12px * var(--font-scale));
      font-weight: var(--fw-medium);
      color: var(--text-muted);
    }
    .filter-bar select, .filter-bar input {
      font-size: calc(12.5px * var(--font-scale));
      padding: 6px 10px;
      max-width: 100%;   /* long option text must not push the bar off a phone screen */
      min-width: 0;
    }

    /* Status Badges */
    .status-badge {
      font-size: calc(11px * var(--font-scale));
      font-weight: var(--fw-medium);
      padding: 3px 8px;
      border-radius: 10px;
      white-space: nowrap;
    }
    .status-nsu { background: var(--success-bg); color: var(--success); }
    .status-follow { background: var(--warning-bg); color: var(--warning); }
    .status-pending { background: var(--accent-light); color: var(--accent); }
    .status-none { background: #F1F5F9; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
    /* Visitors: Tình trạng by outcome group (services/visit_status.status_tone) and the lead's stage. */
    .tone-deposit, .stage-contract { background: var(--success-bg); color: var(--success); }
    .tone-trial, .stage-appointment { background: #F5F3FF; color: #7C3AED; }
    .tone-care { background: var(--warning-bg); color: var(--warning); }
    .tone-failed { background: var(--danger-bg); color: var(--danger); }
    .tone-visit, .stage-visit { background: var(--accent-light); color: var(--accent); }
    .stage-lead, .stage-coupon { background: #F1F5F9; color: #475569; }

    /* Stats Row */
    .stats-row {
      display: flex;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .stat-chip {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 120px;
      box-shadow: var(--shadow-sm);
    }
    .stat-chip-label {
      font-size: calc(11px * var(--font-scale));
      font-weight: var(--fw-medium);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .stat-chip-value {
      font-size: calc(20px * var(--font-scale));
      font-weight: var(--fw-strong);
      color: var(--primary);
      margin-top: 2px;
    }

    /* Overview: compact per-campus cash progress */
    .campus-progress-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 10px;
    }
    .campus-progress-card {
      background: #FAFBFD;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
    }
    .campus-progress-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: var(--fw-strong);
      font-size: calc(13px * var(--font-scale));
      color: var(--primary);
    }
    .campus-progress-nums {
      font-size: calc(11.5px * var(--font-scale));
      color: var(--text-muted);
      margin: 4px 0 6px;
      font-variant-numeric: tabular-nums;
    }

    /* Overview: báo cáo theo nguồn, one colored table per chương trình */
    .source-report-block { margin-bottom: 18px; }
    .source-report-table {
      width: 100%;
      min-width: 1000px;
      border-collapse: collapse;
      font-size: calc(12.5px * var(--font-scale));
      font-variant-numeric: tabular-nums;
    }
    .source-report-table th, .source-report-table td {
      border: 1px solid color-mix(in srgb, var(--sr-color) 35%, #fff);
      padding: 4px 6px;
      text-align: right;
    }
    .source-report-table thead th {
      background: var(--sr-color);
      color: #fff;
      text-align: center;
      font-weight: var(--fw-strong);
    }
    .source-report-table thead th.sr-program { font-size: calc(15px * var(--font-scale)); min-width: 220px; }
    .source-report-table td.sr-source { text-align: left; font-weight: var(--fw-medium); }
    .source-report-table .sr-share { color: var(--text-muted); font-weight: 500; }
    .source-report-table td.sr-target { background: color-mix(in srgb, var(--sr-light) 60%, #fff); }
    .source-report-table td.sr-target .cell-input { min-width: 70px; }
    .source-report-table tr.sr-subtotal td { background: var(--sr-light); font-weight: var(--fw-strong); }
    .source-report-table tr.sr-total td { background: var(--sr-color); color: #fff; font-weight: var(--fw-strong); }
    .source-report-table .sr-pct-empty { color: var(--text-muted); }

    /* Removable "cơ sở phụ" chips (Nhân Sự form) */
    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 6px 0;
      min-height: 26px;
    }
    .campus-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--accent-light, #E0F2FE);
      border: 1px solid var(--accent, #0284C7);
      color: var(--primary);
      border-radius: 999px;
      padding: 3px 6px 3px 10px;
      font-size: calc(12px * var(--font-scale));
      font-weight: var(--fw-medium);
    }
    .campus-chip-remove {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--primary);
      font-size: 14px;
      font-weight: var(--fw-strong);
      line-height: 1;
      padding: 2px 4px;
      border-radius: 50%;
    }
    .campus-chip-remove:hover {
      background: var(--accent, #0284C7);
      color: #fff;
    }

    /* Chat / DeepSeek */
    .chat-container {
      height: 380px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #F8FAFC;
      overflow-y: auto;
      padding: 14px;
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .bubble {
      max-width: 80%;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: calc(13.5px * var(--font-scale));
      line-height: 1.5;
      white-space: pre-wrap;
      animation: slideIn 0.2s ease;
    }
    .bubble.user {
      align-self: flex-end;
      background: linear-gradient(135deg, #0284C7, #0369A1);
      color: #fff;
      border-bottom-right-radius: 2px;
    }
    .bubble.bot {
      align-self: flex-start;
      background: #fff;
      border: 1px solid var(--border);
      border-bottom-left-radius: 2px;
      box-shadow: var(--shadow-sm);
    }
    .bubble.loading {
      color: var(--text-muted);
      font-style: italic;
    }

    /* Modal / Toast */
    /* "Đang tải" (core.js busyRender): a bar on top for every request, the
       spinner in the middle for the ones that open a window or save. Shown as a
       popover so it also sits above an open <dialog>. */
    #busyLayer {
      display: none; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
      margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; pointer-events: none; z-index: 5000;
    }
    #busyLayer.busy-open { display: block; }
    #busyLayer.busy-blocking { background: rgba(15, 41, 66, 0.16); }
    .busy-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; background: var(--accent-light); }
    .busy-bar::before {
      content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 3px;
      background: var(--accent); animation: busy-slide 1.1s ease-in-out infinite;
    }
    .busy-spinner {
      display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      align-items: center; gap: 12px; padding: 14px 20px; border-radius: 10px; background: #fff; color: var(--text);
      font-weight: var(--fw-medium); font-size: calc(13.5px * var(--font-scale)); box-shadow: var(--shadow-lg);
    }
    #busyLayer.busy-blocking .busy-spinner { display: flex; }
    .busy-ring {
      width: 22px; height: 22px; border: 3px solid var(--accent-light); border-top-color: var(--accent);
      border-radius: 50%; animation: busy-spin 0.8s linear infinite;
    }
    @keyframes busy-slide { from { left: -40%; } to { left: 100%; } }
    @keyframes busy-spin { to { transform: rotate(360deg); } }
    html.ui-busy, html.ui-busy * { cursor: progress !important; }
    /* A window is opening / a save is on its way: further clicks do nothing. */
    html.ui-blocked * { pointer-events: none !important; }
    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: linear-gradient(135deg, #0F2942, #1a3a5c);
      color: #fff;
      padding: 10px 18px;
      border-radius: 8px;
      font-size: calc(13px * var(--font-scale));
      font-weight: var(--fw-medium);
      box-shadow: var(--shadow-lg);
      z-index: 1000;
      display: none;
      animation: fadeIn 0.2s;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Login Modal */
    #loginOverlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }
    .login-box {
      background: #fff;
      border-radius: 14px;
      padding: 28px;
      width: 100%;
      max-width: 380px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }
    .login-logo {
      text-align: center;
      margin-bottom: 20px;
    }
    .login-logo-img { height: 96px; width: auto; }
    /* BRIS logo (blue) sits on a white tile so it stays readable on the dark header. */
    .brand-logo-img { height: 30px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; box-sizing: content-box; }
    .login-title {
      font-size: calc(20px * var(--font-scale));
      font-weight: var(--fw-strong);
      color: var(--primary);
      text-align: center;
      margin-bottom: 4px;
    }
    .login-desc {
      font-size: calc(13px * var(--font-scale));
      color: var(--text-muted);
      text-align: center;
      margin-bottom: 20px;
    }

    /* Count badge */
    .count-badge {
      background: var(--accent);
      color: #fff;
      font-size: calc(10px * var(--font-scale));
      font-weight: var(--fw-strong);
      padding: 1px 6px;
      border-radius: 10px;
      margin-left: 4px;
    }

    /* Responsive */
    @media (max-width: 900px) {
      /* Only the Ma Trận grid has a phone replacement (.mobile-cards); every other
         sheet table (Marketing KPI, Báo Cáo Theo Kỳ) stays and scrolls sideways. */
      .matrix-sheet-wrapper { display: none; }
      .weekly-sheet-wrapper { display: block; width: 100%; max-width: 100%; overflow-x: auto; box-sizing: border-box; }
      .weekly-sheet-wrapper .sheet-table { min-width: 900px; }
      .mobile-cards { display: block; }
      .weekly-grid { grid-template-columns: 1fr; }
      .toolbar { flex-direction: column; align-items: stretch; }
      .toolbar-left, .toolbar-right { justify-content: space-between; width: 100%; min-width: 0; overflow: hidden; }
      .tabs-nav { width: 100%; max-width: 100%; overflow-x: auto; }
      .form-grid-3, .form-grid-4 { grid-template-columns: 1fr 1fr; }
      .stats-row { flex-direction: column; }
      /* label + select side by side instead of one tall column */
      .filter-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
    }
    @media (max-width: 600px) {
      header { padding: 6px 10px; gap: 8px; flex-wrap: wrap; position: static; }
      .app-container { padding: 8px; }
      .brand { gap: 6px; min-width: 0; }
      .brand-logo-img { height: 28px; padding: 2px 4px; }
      .brand-title { font-size: calc(13px * var(--font-scale)); }
      .brand-sub { display: none; }
      .user-panel { gap: 5px; margin-left: auto; }
      .user-badge { padding: 3px 6px; }
      #userName { display: none; }
      .toolbar { padding: 8px; }
      .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
      .tabs-nav { gap: 2px; }
      .tab-btn { font-size: calc(11px * var(--font-scale)); padding: 6px 8px; }
      .entry-form, .card { min-width: 0; padding: 12px; }
      .data-table { min-width: 920px; }
      .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    }
    .ai-table-wrap { max-width: 100%; overflow: auto; max-height: 300px; }
    .ai-table-wrap table { border-collapse: collapse; font-size: calc(13px * var(--font-scale)); }
    .ai-table-wrap th, .ai-table-wrap td { padding: 6px 9px; border: 1px solid #ccd6e0; white-space: nowrap; }
    .bubble.bot details { margin: 10px 0; }
    .bubble.bot pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(12px * var(--font-scale)); }
    .bubble.bot p { white-space: pre-wrap; }
    .ai-warning { color: #8f4e00; }

/* Marketing Report donut (campaign-report.js renderCampaignSourceDonut) */
.donut-chart-wrap { max-width: 860px; margin: 4px auto 16px; }
.donut-chart-wrap svg { width: 100%; height: auto; display: block; }
.donut-chart-title { text-align: center; font-weight: var(--fw-strong); font-size: 15px; color: var(--primary); letter-spacing: 0.3px; text-transform: uppercase; }
.donut-pct { font-size: 15px; font-weight: var(--fw-strong); fill: var(--primary); }
.donut-label { font-size: 11.5px; fill: var(--text-muted); }
.donut-center-value { font-size: 30px; font-weight: var(--fw-strong); fill: var(--primary); }
.donut-center-label { font-size: 12px; font-weight: var(--fw-strong); fill: var(--text-muted); letter-spacing: 1px; }

/* Báo Cáo Theo Nguồn: MKT Lead is the subtotal of the sources under it */
.source-report-table tr.sr-parent td { font-weight: var(--fw-strong); background: color-mix(in srgb, var(--sr-light) 55%, transparent); }
.source-report-table tr.sr-child td.sr-source { padding-left: 26px; }
.source-report-table tr.sr-child td.sr-source > span:first-child::before { content: '└ '; color: var(--text-muted); }

/* Language picker (i18n.js): header + login box */
.lang-toggle {
  font: inherit; font-size: 12px; font-weight: var(--fw-medium); letter-spacing: 0.4px; min-width: 34px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg);
  color: var(--text); cursor: pointer;
}
.lang-toggle:hover { border-color: var(--border-focus); }
header .lang-toggle { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); color: #fff; }
header .lang-toggle:hover, header .notif-bell-btn:hover { background: rgba(255,255,255,0.22); border-radius: 6px; }
/* Workspaces (core.js): Admin's picker, and the workspace name of a workspace account. */
header .workspace-picker {
  font: inherit; font-size: 12px; max-width: 180px; padding: 4px 6px; border-radius: 6px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); color: #fff; cursor: pointer;
}
header .workspace-picker option { color: var(--text); }
header .workspace-picker[hidden] { display: none; }
.workspace-badge { background: #F59E0B; color: #1F2937; font-weight: var(--fw-medium); font-size: calc(11px * var(--font-scale)); padding: 2px 6px; border-radius: 4px; }
.workspace-badge[hidden] { display: none; }
/* The header's own "online" dot: no ring, so it sits calmly on the dark bar. */
.user-badge .presence-dot { margin-right: 0; }
.user-badge .presence-dot.on { background: #4ADE80; box-shadow: none; }
.login-box { position: relative; }
.login-lang { position: absolute; top: 12px; right: 12px; }

/* Báo cáo tuần — "Tất cả 6 cơ sở" view (reports.js renderWeeklyAllCampuses) */
.sheet-table tr.weekly-campus-row td { font-weight: var(--fw-strong); background: #EEF3F8; }
.sheet-table tr.weekly-program-row td:first-child { padding-left: 22px; color: var(--text-muted); }
.sheet-table tr.weekly-grand-row td { font-weight: var(--fw-strong); background: var(--primary); color: #fff; }
.weekly-forecast-all { display: grid; gap: 8px; max-height: 520px; overflow: auto; }
.weekly-forecast-all[hidden] { display: none; }
.weekly-forecast-campus { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; white-space: pre-wrap; }
.weekly-forecast-campus strong { display: block; margin-bottom: 4px; }

/* "Nguồn: CMS" notes on reports whose month comes from the CMS mirror */
.source-note { margin: 6px 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  background: var(--accent-light); color: var(--primary); border: 1px solid #BAE6FD; }
.source-note[hidden] { display: none; }
.source-note.source-note-error { background: var(--danger-bg); color: var(--danger); border-color: #FECACA; }

/* Performance sub-tabs + "Tình trạng sau Visit" (performance-report.js) */
/* Sub-tabs = segmented control: same text size as the main tabs, the active
   one filled with the accent colour so it stands out from the main tab bar. */
.perf-subtabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 14px; padding: 4px;
  background: #EEF2F7; border: 1px solid var(--border); border-radius: 10px; max-width: 100%; }
.perf-subtab { border: none; background: transparent; padding: 7px 14px; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-size: calc(12.5px * var(--font-scale)); font-weight: var(--fw-medium); line-height: 1.3;
  color: var(--text-muted); white-space: nowrap; transition: background 0.15s, color 0.15s; }
.perf-subtab:hover { background: #fff; color: var(--primary); }
.perf-subtab.active { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(15, 41, 66, 0.25); }
#perfVisitPanel[hidden], #perfFunnelPanel[hidden] { display: none; }
.vs-title { margin: 6px 0 6px; font-size: 13px; color: var(--primary); }
.visit-status-table { font-size: calc(12px * var(--font-scale)); }
.visit-status-table th, .visit-status-table td { text-align: center; padding: 5px 8px; white-space: nowrap; }
.visit-status-table .vs-label { text-align: left; white-space: normal; min-width: 220px; max-width: 360px; }
.visit-status-table tr.vs-group td { font-weight: var(--fw-strong); background: #CDE2BB; }
.visit-status-table tr.vs-reason td.vs-label { padding-left: 22px; color: #334155; }
.visit-status-table td.vs-zero { color: #CBD5E1; }
.vs-role { font-size: 10px; font-weight: var(--fw-medium); color: var(--text-muted); }

/* Overview > "Visit – Contract – Cash in" (dashboard.js loadPersonSourceReport) */
.dash-subtabs { margin: 0 0 12px; }
#dashPersonPanel[hidden], #dashOverviewPanel[hidden] { display: none; }
.pvc-block { margin-bottom: 18px; }
.contrib-block { margin-bottom: 26px; }
/* Lead Detail > Chat từ quảng cáo (lead-ad-chat.js) */
.lead-ad-chat { margin-top: 12px; }
.lead-ad-chat[hidden] { display: none; }
.lead-ad-chat-item { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin: 4px 0; background: #F8FAFC; }
.lead-ad-chat-ad { font-weight: var(--fw-medium); font-size: calc(12.5px * var(--font-scale)); }
.lead-ad-chat-msg { margin: 4px 0 0; padding: 4px 8px; border-left: 3px solid #93C5FD; color: var(--text); font-size: calc(12px * var(--font-scale)); white-space: pre-wrap; }
.lead-ad-chat select { display: block; width: 100%; margin: 4px 0; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
/* Marketing Report > Hiệu quả Ads Facebook (ads-performance.js) */
#adsPerfPanel[hidden], #mktLeadPanel[hidden], #mktAdsSubtab[hidden] { display: none; }
.ads-quick { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ads-howto { margin: 6px 0 8px; }
.ads-howto summary { cursor: pointer; font-size: calc(12.5px * var(--font-scale)); font-weight: var(--fw-medium); color: var(--primary); }
.ads-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.ads-summary-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: #F8FAFC; }
.ads-summary-title { font-weight: var(--fw-strong); color: var(--primary); margin-bottom: 6px; }
.ads-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
.ads-summary-grid span { display: block; font-size: calc(11px * var(--font-scale)); color: var(--text-muted); }
.ads-summary-grid b { font-variant-numeric: tabular-nums; }
.ads-cur { font-size: calc(10.5px * var(--font-scale)); color: var(--text-muted); font-weight: var(--fw-medium); }
.ads-perf-table { font-size: calc(12px * var(--font-scale)); }
.ads-perf-table th, .ads-perf-table td { white-space: nowrap; padding: 5px 7px; }
.ads-perf-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ads-perf-table .ads-name { white-space: normal; min-width: 260px; max-width: 420px; }
.ads-perf-table tr.ads-level-campaign td { background: #F1F5F9; font-weight: var(--fw-medium); }
.ads-perf-table tr.ads-level-adset td { background: #FAFBFC; }
.ads-toggle { border: 0; background: transparent; cursor: pointer; width: 18px; color: var(--primary); font-size: 12px; }
.ads-toggle-gap { display: inline-block; width: 18px; }
.ads-level-tag { display: inline-block; font-size: 10px; font-weight: var(--fw-strong); color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 3px; padding: 0 4px; margin-right: 4px; }
.ads-id { font-size: 10.5px; color: var(--text-muted); font-weight: 400; margin-left: 22px; }
.ads-pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: var(--fw-strong); cursor: help; }
.ads-pill.ads-good { background: #DCFCE7; color: #166534; }
.ads-pill.ads-ok { background: #FEF9C3; color: #854D0E; }
.ads-pill.ads-bad { background: #FEE2E2; color: #991B1B; }
.ads-pill.ads-waste { background: #991B1B; color: #fff; }
.ads-pill.ads-little_data { background: #F1F5F9; color: #64748B; }
.ads-better { color: #16A34A; font-weight: var(--fw-medium); }
.ads-worse { color: var(--danger); font-weight: var(--fw-medium); }
.ads-flat { color: var(--text-muted); }
.ads-perf-table td.ads-na { text-align: center; color: var(--text-muted); font-style: italic; }
/* Marketing KPI > Facebook Ads sync status (marketing-kpi.js loadAdsSyncStatus) */
.ads-sync-card { margin-bottom: 16px; }
.ads-sync-card[hidden] { display: none; }
.ads-sync-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ads-sync-spacer { flex: 1 1 auto; }
.ads-sync-table td.ads-success { color: var(--success); font-weight: var(--fw-strong); }
.ads-sync-table td.ads-failed { color: var(--danger); font-weight: var(--fw-strong); }
.ads-webhook-warn { margin: 8px 0; padding: 8px 12px; border-left: 3px solid #d97706; background: #fffbeb; color: #92400e; border-radius: 4px; font-size: calc(13px * var(--font-scale)); }
.ads-webhook-seen { margin: 8px 0 12px; font-size: calc(13px * var(--font-scale)); }
.ads-webhook-seen summary { cursor: pointer; color: var(--primary, #1d4ed8); }
.ads-webhook-seen table { min-width: 0; width: 100%; }
.ads-webhook-seen td:first-child { white-space: normal; word-break: break-word; font-family: ui-monospace, monospace; }
.ads-sync-table td.ads-msg { white-space: normal; max-width: 420px; font-size: calc(12px * var(--font-scale)); }
.weekly-pa-table td, .weekly-pa-table th { text-align: center; }
.weekly-pa-table tr.weekly-pa-site td { background: #E2E8F0; font-weight: var(--fw-strong); text-align: left; color: var(--primary); }
/* Performance > KPI FOM/PA (pa-kpi.js); colours follow the team's sheet */
#perfVccPanel[hidden], #perfKpiPanel[hidden], #dashCashPanel[hidden], #dashSourcePanel[hidden] { display: none; }
.kpi-avg-cost { margin: 6px 0 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #F8FAFC; }
.kpi-avg-title { font-size: calc(12px * var(--font-scale)); font-weight: var(--fw-strong); color: var(--primary); margin-bottom: 6px; }
.kpi-avg-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.kpi-avg-row label { display: flex; flex-direction: column; gap: 3px; font-size: calc(12px * var(--font-scale)); font-weight: var(--fw-medium); color: var(--text-muted); }
.kpi-avg-row input { width: 130px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-weight: 400; }
.kpi-site { margin-bottom: 22px; }
.kpi-site-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kpi-table { font-size: calc(11.5px * var(--font-scale)); }
.kpi-table th, .kpi-table td { text-align: center; padding: 3px 5px; white-space: nowrap; }
.kpi-table th { font-size: calc(10.5px * var(--font-scale)); white-space: normal; }
.kpi-table .kpi-name { text-align: left; min-width: 150px; font-weight: var(--fw-strong); position: sticky; left: 0; background: var(--card-bg, #fff); z-index: 1; }
.kpi-table .kpi-no { width: 32px; }
.kpi-table th.kpi-prog { color: #fff; font-size: calc(12px * var(--font-scale)); }
.kpi-table th.kpi-prog-BE, .kpi-table th.kpi-prog-FTK { background: #5B9BD5; }
.kpi-table th.kpi-prog-KDG { background: #ED7D31; }
.kpi-table th.kpi-prog-PRI { background: #70AD47; }
.kpi-table th.kpi-prog-SEC { background: #548235; }
.kpi-table th.kpi-prog-TOTAL { background: #16877F; }
.kpi-input { width: 64px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 5px; font: inherit; text-align: right; }
.kpi-input.kpi-cash { width: 118px; }
.kpi-input:disabled { background: transparent; border-color: transparent; color: var(--text); }
.kpi-input::placeholder { color: #94A3B8; }
.kpi-table td.kpi-actual { color: #1F4E79; font-weight: var(--fw-medium); }
.kpi-table td.kpi-total-cell { background: #F1F8F7; font-weight: var(--fw-strong); }
.kpi-table tr.kpi-site-row td { background: #FFF4D1; font-weight: var(--fw-strong); }
.kpi-table tr.kpi-other-row td { color: var(--text-muted); font-style: italic; }
.kpi-table tr.kpi-left-row td { background: #F8FAFC; font-weight: var(--fw-strong); }
.kpi-table tr.kpi-grand-row td { background: #16877F; color: #fff; font-weight: var(--fw-strong); }
.kpi-table tr.kpi-grand-row td.kpi-total-cell { background: #11706A; }
.kpi-left-bad { color: var(--danger) !important; }
.kpi-left-ok { color: #16A34A; }
/* Hiệu suất lead > Lead theo nguồn — từng FOM/PA (colours follow the Excel sheet) */
.source-pa-heading { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 22px 0 4px; }
.source-pa-heading label { display: flex; flex-direction: column; gap: 3px; font-size: calc(12px * var(--font-scale)); font-weight: var(--fw-medium); color: var(--text-muted); }
.source-pa-heading select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-weight: 400; color: var(--text); min-width: 240px; }
.source-pa-table { font-size: calc(11.5px * var(--font-scale)); }
.source-pa-table th, .source-pa-table td { text-align: center; padding: 3px 6px; white-space: nowrap; }
.source-pa-table .spa-name { text-align: left; position: sticky; left: 0; z-index: 1; background: inherit; min-width: 130px; font-weight: var(--fw-strong); }
.source-pa-table thead .spa-name { background: #FFF4D1; }
.source-pa-table th.spa-lead, .source-pa-table th.spa-lead-sub { background: #2F3E50; color: #fff; }
.source-pa-table th.spa-visit, .source-pa-table th.spa-visit-sub { background: #2E5597; color: #fff; }
.source-pa-table th.spa-rate1, .source-pa-table th.spa-rate1-sub { background: #548235; color: #fff; }
.source-pa-table th.spa-contract, .source-pa-table th.spa-contract-sub { background: #C55A11; color: #fff; }
.source-pa-table th.spa-rate2, .source-pa-table th.spa-rate2-sub { background: #C00000; color: #fff; }
.source-pa-table th.spa-cash, .source-pa-table th.spa-cash-sub { background: #BF8F00; color: #fff; }
.source-pa-table .spa-total-col { border-right: 2px solid #94A3B8; font-weight: var(--fw-strong); }
.source-pa-table td.spa-zero { color: #CBD5E1; }
.source-pa-table td.spa-na { color: #94A3B8; }
.source-pa-table tr.spa-campus td { background: #E2E8F0; font-weight: var(--fw-strong); text-align: left; color: var(--primary); position: static; }
.source-pa-table tr.spa-band0 td { background: #DCE6F2; }
.source-pa-table tr.spa-band1 td { background: #FFF2CC; }
.source-pa-table tr.spa-band2 td { background: #FCE4D6; }
.source-pa-table tr.spa-band3 td { background: #E2EFDA; }
.source-pa-table tr.spa-grand td { background: #F4B183; font-weight: var(--fw-strong); }
.intake-controls label[hidden] { display: none; }
.contrib-chart { overflow-x: auto; margin: 4px 0 2px; }
.contrib-chart svg { display: block; }
.contrib-grid { stroke: #E2E8F0; stroke-width: 1; }
.contrib-axis { font-size: 10px; fill: var(--text-muted); }
.contrib-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.contrib-legend-item i, .contrib-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border-radius: 2px; }
.contrib-table th { white-space: normal; min-width: 88px; }
.contrib-table tr.contrib-pct td { color: var(--text-muted); font-style: italic; }
.contrib-table tr.contrib-target td { color: #2E6B2E; }
.pvc-table { font-size: calc(11.5px * var(--font-scale)); }
.pvc-table th, .pvc-table td { text-align: center; padding: 4px 6px; white-space: nowrap; }
.pvc-table .pvc-label { text-align: left; position: sticky; left: 0; background: var(--card-bg); z-index: 1; min-width: 190px; }
.pvc-table th.pvc-label { background: #FFF4D1; font-weight: var(--fw-strong); }
.pvc-table th.pvc-metric { background: #0F2942; color: #fff; }
.pvc-table .pvc-start { border-left: 2px solid #94A3B8; font-weight: var(--fw-strong); }
.pvc-table td.pvc-zero { color: #CBD5E1; }
.pvc-table tr.pvc-total td { font-weight: var(--fw-strong); background: #E3EEDA; }
.pvc-table tr.pvc-total td.pvc-label { background: #E3EEDA; }
    .pay-cms-note { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #paymentsCms[hidden], #paymentsCrmCard[hidden], #paymentStatsRow[hidden] { display: none; }
    .weekly-grid[hidden] { display: none; }   /* the weekly KPI / forecast block, off since 2026-10-13 */
    /* Source report: % of the Ma Trận's KPI Cash per source, % of the month per week. */
    .sr-cash-share { display: inline-flex; align-items: center; gap: 2px; }
    .sr-cash-share .cell-input { width: 54px; text-align: right; }
    .sr-cash-amount { display: block; font-size: calc(11px * var(--font-scale)); color: var(--text-muted); }
    .sr-week-shares {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 6px; padding: 6px 10px;
      background: var(--sr-light); border-radius: 6px; font-size: calc(12px * var(--font-scale));
    }
    .sr-week-shares .sr-week-title { font-weight: var(--fw-strong); color: var(--sr-color); }
    .sr-week-shares label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
    .sr-week-shares input { width: 62px; padding: 3px 6px; text-align: right; }
    .sr-week-shares b { font-weight: var(--fw-strong); color: var(--text); }
    .sr-week-note { color: var(--text-muted); }
    .sr-week-note.sr-week-over { color: var(--danger); font-weight: var(--fw-medium); }

/* Nhân Sự & Cơ Sở: sections picked from a left navigation (users.js showUsersPanel). */
.users-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.users-nav {
  position: sticky; top: 64px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.users-nav-item {
  font: inherit; font-size: calc(13px * var(--font-scale)); font-weight: var(--fw-medium); text-align: left;
  padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer;
  border-left: 3px solid transparent;
}
.users-nav-item:hover { background: #F1F5F9; color: var(--text); }
.users-nav-item.active { background: var(--accent-light); color: var(--primary); border-left-color: var(--accent); }
.users-nav-item[hidden], .users-panel-off { display: none !important; }
.users-panels { min-width: 0; }
@media (max-width: 768px) {
  .users-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .users-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; -webkit-overflow-scrolling: touch; }
  .users-nav-item { flex: none; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .users-nav-item.active { border-left-color: transparent; border-bottom-color: var(--accent); }
}

/* 3CX call lines folded under the note written after the call (lead-detail.js groupPbxCalls, 2026-10-16). */
.pbx-toggle { margin-left: 6px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 10px; background: #F1F5F9;
  color: var(--text-muted); font: inherit; font-size: calc(11.5px * var(--font-scale)); cursor: pointer; white-space: nowrap; }
.pbx-toggle:hover { color: var(--primary); border-color: #CBD5E1; }
.pbx-toggle[aria-expanded="true"] { background: #E0F2FE; color: var(--primary); }
tr.pbx-sub td { background: #F8FAFC; color: var(--text-muted); font-size: calc(12px * var(--font-scale)); }
tr.pbx-sub td:first-child { padding-left: 22px; }
tr.pbx-sub[hidden] { display: none; }

/* Chat queue: CMS/CSF summary behind the CMS badge (chat-leads.js showCmsPeek, 2026-10-19). */
button.cms-peek-badge { font-family: inherit; cursor: pointer; }
.cms-peek { position: absolute; z-index: 1200; width: min(380px, calc(100vw - 16px)); max-height: 60vh; overflow: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(15, 41, 66, .18);
  padding: 10px 12px; font-size: calc(12.5px * var(--font-scale)); line-height: 1.45; }
.cms-peek[hidden] { display: none; }
.cms-peek strong { color: var(--primary); font-weight: var(--fw-strong); }
.cms-peek ul { list-style: none; padding: 0; margin: 6px 0 0; }
.cms-peek-facts li { color: var(--text-muted); }
.cms-peek-sub { margin-top: 8px; font-weight: var(--fw-medium); color: var(--primary); }
.cms-peek-notes li { padding: 5px 0; border-top: 1px solid #EEF2F6; }
.cms-peek-when { display: block; font-size: calc(11px * var(--font-scale)); color: var(--text-muted); }

/* Customer summary card above Activity History / in "Gọi lần lượt" (lead-detail.js leadSummaryCardHtml, 2026-10-20). */
.lead-summary-card { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: #F8FAFC;
  font-size: calc(13px * var(--font-scale)); line-height: 1.45; }
.lead-summary-card:empty { display: none; }
.lead-summary-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; }
.lead-summary-row > span:last-child { overflow-wrap: anywhere; }
.lead-summary-label { color: var(--text-muted); font-weight: var(--fw-medium); }
.lead-summary-row.is-overdue > span:last-child { color: #B91C1C; font-weight: var(--fw-medium); }
.lead-summary-row.is-missing > span:last-child { color: #B45309; }
.call-queue-summary { margin-bottom: 8px; }
@media (max-width: 640px) { .lead-summary-row { grid-template-columns: 1fr; gap: 0; } }
.call-queue-summary .lead-summary-row { grid-template-columns: 100px minmax(0, 1fr); }
/* The card on a lead's name in the lists (lead-detail.js showLeadPeek). */
.lead-peek { width: min(460px, calc(100vw - 16px)); }
.lead-peek .lead-summary-card { margin: 6px 0 0; }
.lead-peek .lead-summary-row { grid-template-columns: 110px minmax(0, 1fr); }
[data-lead-peek] { cursor: pointer; }