/* ===== CSS Variables ===== */
    :root {
      /* Brand — Vietnam flag colors */
      --c-primary:        #DA251D;
      --c-primary-light:  #e84e47;
      --c-primary-dark:   #b01e18;

      /* Accent */
      --c-accent:         #FFCD00;
      --c-accent-hover:   #e6b800;
      --c-accent-light:   #fff8e1;

      /* Semantic Status */
      --c-success:        #10b981;
      --c-success-bg:     #d1fae5;
      --c-warning:        #f59e0b;
      --c-warning-bg:     #fef3c7;
      --c-danger:         #ef4444;
      --c-danger-bg:      #fee2e2;

      /* Neutrals */
      --c-bg:             #f8f9fa;
      --c-surface:        #ffffff;
      --c-border:         #e2e8f0;
      --c-text:           #1a1a2e;
      --c-text-secondary: #64748b;
      --c-text-muted:     #94a3b8;

      /* Sidebar */
      --c-sidebar:        #1a1a2e;
      --c-sidebar-text:   #94a3b8;
      --c-sidebar-active: #DA251D;

      /* Typography */
      --font-family: 'Segoe UI', 'Meiryo', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
      --fs-xs: 11px;
      --fs-sm: 13px;
      --fs-base: 14px;
      --fs-lg: 18px;
      --fs-xl: 24px;

      /* Spacing */
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-5: 20px;
      --sp-6: 24px;
      --sp-8: 32px;

      /* Radius */
      --radius-sm: 4px;
      --radius-md: 6px;
      --radius-lg: 8px;

      /* Shadow */
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
      --shadow-md: 0 4px 6px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.06);

      /* Layout */
      --sidebar-width: 220px;
      --header-height: 56px;
    }

    /* ===== Reset ===== */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
      font-family: var(--font-family);
      font-size: 14px;
      color: var(--c-text);
      background: var(--c-bg);
    }

    /* ===== Sidebar ===== */
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: var(--sidebar-width);
      height: 100vh;
      background: var(--c-sidebar);
      display: flex;
      flex-direction: column;
      z-index: 100;
    }

    .sidebar-logo {
      padding: var(--sp-6) var(--sp-5);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .sidebar-logo h1 {
      color: var(--c-surface);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }

    .sidebar-logo h1 span {
      color: var(--c-primary);
    }

    .sidebar-nav {
      list-style: none;
      padding: var(--sp-4) 0;
      flex: 1;
      overflow-y: auto;
    }

    .sidebar-nav li {
      margin: var(--sp-1) var(--sp-2);
    }

    .sidebar-nav a {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-3) var(--sp-4);
      border-radius: var(--radius-md);
      color: var(--c-sidebar-text);
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
      transition: background 0.15s, color 0.15s;
      cursor: pointer;
    }

    .sidebar-nav a:hover {
      background: rgba(255,255,255,0.06);
      color: var(--c-surface);
    }

    .sidebar-nav a.active {
      background: var(--c-sidebar-active);
      color: var(--c-surface);
    }

    .sidebar-nav a i {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    /* ===== Header ===== */
    .header {
      position: fixed;
      top: 0;
      left: var(--sidebar-width);
      right: 0;
      min-height: var(--header-height);
      background: var(--c-surface);
      border-bottom: 1px solid var(--c-border);
      display: flex;
      align-items: center;
      padding: var(--sp-2) var(--sp-5);
      gap: var(--sp-3);
      z-index: 90;
    }

    .date-sep {
      font-size: 12px;
      color: var(--c-text-secondary);
      margin: 0 2px;
    }

    .header-filters {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      flex: 1;
      flex-wrap: wrap;
    }

    .header-user {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      margin-left: var(--sp-3);
      padding-left: var(--sp-3);
      border-left: 1px solid var(--c-border);
      white-space: nowrap;
    }

    .header-user__greeting {
      font-size: 12px;
      color: var(--c-text-secondary);
      font-weight: 600;
    }

    .header-user__logout {
      height: 28px;
      padding: 0 var(--sp-3);
      border: 1px solid var(--c-primary);
      border-radius: var(--radius-sm);
      background: var(--c-primary);
      color: var(--c-surface);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .header-user__logout:hover {
      background: var(--c-primary-dark);
      color: var(--c-surface);
    }

    .filter-group {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .filter-group label {
      font-size: 10px;
      font-weight: 600;
      color: var(--c-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      white-space: nowrap;
    }

    .filter-group input[type="date"],
    .filter-group select {
      height: 28px;
      padding: 0 var(--sp-2);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-family: var(--font-family);
      color: var(--c-text);
      background: var(--c-surface);
      outline: none;
      transition: border-color 0.15s;
    }

    .filter-group input[type="date"]:focus,
    .filter-group select:focus {
      border-color: var(--c-primary);
    }

    .filter-group select {
      min-width: 100px;
      max-width: 160px;
    }

    .btn-group-sm { display:flex;gap:0; }
    .btn-group-sm .btn-sm { padding:4px 10px;font-size:11px;border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-text-secondary);cursor:pointer; }
    .btn-group-sm .btn-sm.active { background:var(--c-primary);color:#fff;border-color:var(--c-primary); }
    .btn-group-sm .btn-sm:first-child { border-radius:4px 0 0 4px; }
    .btn-group-sm .btn-sm:last-child { border-radius:0 4px 4px 0; }

    .btn-apply {
      height: 28px;
      padding: 0 var(--sp-4);
      background: var(--c-primary);
      color: var(--c-surface);
      border: none;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      font-family: var(--font-family);
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
    }

    .btn-apply:hover {
      background: var(--c-primary-dark);
    }

    /* ===== Mobile hamburger ===== */
    .sidebar-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--sp-1);
      color: var(--c-text);
    }
    .sidebar-toggle svg { width: 22px; height: 22px; }

    @media (max-width: 768px) {
      .sidebar { width: 220px; transform: translateX(-100%); transition: transform 0.25s; z-index: 200; }
      .sidebar.open { transform: translateX(0); }
      .sidebar-toggle { display: block; }
      .header { left: 0; }
      .main { margin-left: 0; }
    }

    /* ===== Main Content ===== */
    .main {
      margin-left: var(--sidebar-width);
      margin-top: var(--header-height);
      padding: var(--sp-6);
      min-height: calc(100vh - var(--header-height));
    }

    .module {
      display: none;
    }

    .module.active {
      display: block;
    }

    .module-header {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--sp-2);
    }

    .btn-export {
      margin-left: auto;
      padding: 4px 12px;
      font-size: 11px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius-sm);
      background: var(--c-surface);
      color: var(--c-text-secondary);
      cursor: pointer;
      white-space: nowrap;
    }

    .btn-export:hover {
      background: var(--c-bg);
      color: var(--c-text);
    }

    /* ===== KPI Cards ===== */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-4);
      margin-bottom: var(--sp-6);
    }

    .kpi-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-lg);
      padding: var(--sp-5);
      box-shadow: var(--shadow-sm);
      transition: box-shadow 0.2s;
    }

    .kpi-card:hover {
      box-shadow: var(--shadow-md);
    }

    .kpi-card__label {
      font-size: 11px;
      font-weight: 600;
      color: var(--c-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: var(--sp-2);
    }

    .kpi-card__value {
      font-size: 22px;
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: var(--sp-1);
    }

    .kpi-card__subtitle {
      font-size: 11px;
      color: var(--c-text-muted);
      margin-bottom: var(--sp-2);
    }

    .kpi-card__trend {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-1);
      font-size: 11px;
      font-weight: 600;
      padding: 2px var(--sp-2);
      border-radius: var(--radius-sm);
    }

    .kpi-card__trend.up {
      color: var(--c-success);
      background: var(--c-success-bg);
    }

    .kpi-card__trend.down {
      color: var(--c-danger);
      background: var(--c-danger-bg);
    }

    .kpi-card__trend.neutral {
      color: var(--c-text-muted);
      background: var(--c-bg);
    }

    /* ===== Chart containers ===== */
    .charts-row {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: var(--sp-4);
    }

    .chart-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-lg);
      padding: var(--sp-5);
      box-shadow: var(--shadow-sm);
    }

    .chart-card__title {
      font-size: 14px;
      font-weight: 600;
      color: var(--c-text);
      margin-bottom: var(--sp-4);
    }

    .chart-wrapper {
      position: relative;
      width: 100%;
    }

    .chart-wrapper.trend {
      height: 320px;
    }

    .chart-wrapper.donut {
      height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ===== Chapter Tabs ===== */
    .chapter-tabs {
      display: flex;
      gap: var(--sp-1);
      margin-bottom: var(--sp-6);
      border-bottom: 2px solid var(--c-border);
      padding-bottom: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    .chapter-tab {
      display: flex;
      align-items: center;
      gap: var(--sp-1);
      padding: var(--sp-2) var(--sp-3);
      border: none;
      background: none;
      font-size: 12px;
      font-weight: 600;
      color: var(--c-text-secondary);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: color 0.15s, border-color 0.15s;
      font-family: var(--font-family);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .chapter-tab:hover {
      color: var(--c-text);
    }

    .chapter-tab.active {
      color: var(--c-primary);
      border-bottom-color: var(--c-primary);
    }

    .chapter-tab .tab-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--c-bg);
      font-size: 11px;
      font-weight: 700;
    }

    .chapter-tab.active .tab-num {
      background: var(--c-primary);
      color: white;
    }

    .chapter {
      display: none;
    }

    .chapter.active {
      display: block;
    }

    /* ===== Brand Lens ===== */
    .brand-lens-bar {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-3) var(--sp-4);
      background: var(--c-bg);
      border-radius: var(--radius-md);
      margin-bottom: var(--sp-4);
      border: 1px solid var(--c-border);
    }

    .brand-lens-bar label {
      font-size: 12px;
      font-weight: 600;
      color: var(--c-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }

    .brand-lens-bar.active {
      border-color: var(--c-primary);
      background: rgba(218, 37, 29, 0.04);
    }

    /* ===== So What Panel ===== */
    .so-what-panel {
      background: var(--c-bg);
      border-radius: var(--radius-lg);
      padding: var(--sp-5);
      margin-top: var(--sp-6);
      border-left: 3px solid var(--c-primary);
    }

    .so-what-panel h3 {
      font-size: 14px;
      font-weight: 600;
      color: var(--c-text);
      margin-bottom: var(--sp-3);
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }

    .so-what-panel p {
      font-size: 13px;
      color: var(--c-text-secondary);
      line-height: 1.6;
      margin: 0;
    }

    /* ===== Chapter-specific grid layouts ===== */
    .charts-grid-2x2 {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--sp-4);
      margin-bottom: var(--sp-4);
    }
    .charts-grid-2x2 > * { min-width: 0; }

    @media (max-width: 768px) {
      .chapter-tabs { overflow-x: auto; }
      .charts-grid-2x2 { grid-template-columns: minmax(0, 1fr); }
    }

    /* ===== Loading / Error states ===== */
    .loading-overlay {
      display: none;
      position: fixed;
      top: var(--header-height);
      left: var(--sidebar-width);
      right: 0;
      bottom: 0;
      background: rgba(248,249,250,0.7);
      z-index: 50;
      align-items: center;
      justify-content: center;
    }

    .loading-overlay.active {
      display: flex;
    }

    .spinner {
      width: 32px;
      height: 32px;
      border: 3px solid var(--c-border);
      border-top-color: var(--c-primary);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }

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

    .error-toast {
      position: fixed;
      bottom: var(--sp-6);
      right: var(--sp-6);
      background: var(--c-danger);
      color: var(--c-surface);
      padding: var(--sp-3) var(--sp-5);
      border-radius: var(--radius-md);
      font-size: 13px;
      font-weight: 500;
      box-shadow: var(--shadow-md);
      z-index: 200;
      transform: translateY(100px);
      opacity: 0;
      transition: transform 0.3s, opacity 0.3s;
    }

    .error-toast.show {
      transform: translateY(0);
      opacity: 1;
    }

    /* ===== Placeholder modules ===== */
    .module-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 400px;
      background: var(--c-surface);
      border: 2px dashed var(--c-border);
      border-radius: var(--radius-lg);
      color: var(--c-text-muted);
      font-size: 16px;
      font-weight: 500;
    }

    /* ===== KPI Grid — 3 columns variant ===== */
    .kpi-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-4);
      margin-bottom: var(--sp-6);
    }

    @media (max-width: 1200px) {
      .kpi-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .kpi-grid-3 {
        grid-template-columns: 1fr;
      }
    }

    /* ===== Chart containers — full width variant ===== */
    .charts-row-single {
      margin-bottom: var(--sp-4);
    }

    .chart-wrapper.bar-h {
      height: 360px;
    }

    .chart-wrapper.stacked {
      height: 360px;
    }

    /* ===== Responsive ===== */
    @media (max-width: 1200px) {
      .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .charts-row {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      :root {
        --sidebar-width: 0px;
      }
      .kpi-grid {
        grid-template-columns: 1fr;
      }
      .header-filters {
        flex-wrap: wrap;
      }
    }

    /* Nav divider / collapsible sections */
    .nav-divider { padding: 16px 20px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--c-sidebar-text); opacity: 0.5; }
    .sidebar-section { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
    .sidebar-section:hover { opacity: 0.8; }
    .section-chevron { width: 14px; height: 14px; transition: transform 0.2s; }
    .sidebar-section.collapsed .section-chevron { transform: rotate(-90deg); }
    li.section-hidden { display: none; }

    /* Explorer table */
    #explorer-data-table th:hover { background: var(--c-bg); }
    .bg-success-light{background:#d4edda}.bg-warning-light{background:#fff3cd}.bg-danger-light{background:#f8d7da}