/* ═══════════════════════════════════════════════════════════
   STYLE.CSS — Hệ thống Quản lý Sản xuất theo Tuần
   Nhà May Quân — Phước Thanh Phúc
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   1. RESET & BASE
   ────────────────────────────────────────────── */

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

:root {
  /* Màu sắc chính */
  --c-bg: #ffffff;
  --c-bg-soft: #f8f9fa;
  --c-bg-muted: #f1f3f5;
  --c-text: #1a1a1a;
  --c-text-soft: #495057;
  --c-text-muted: #6c757d;
  --c-border: #dee2e6;
  --c-border-soft: #e9ecef;

  /* Màu accent */
  --c-primary: #1e40af;
  --c-primary-soft: #dbeafe;
  --c-primary-dark: #1e3a8a;
  --c-secondary: #ea580c;
  --c-secondary-soft: #ffedd5;
  --c-success: #16a34a;
  --c-success-soft: #dcfce7;
  --c-warning: #ca8a04;
  --c-warning-soft: #fef9c3;
  --c-danger: #dc2626;
  --c-danger-soft: #fee2e2;

  /* Màu chương */
  --c-ch1: #1e40af;
  --c-ch2: #0891b2;
  --c-ch3: #ea580c;
  --c-ch4: #7c3aed;
  --c-ch5: #16a34a;
  --c-ch6: #be185d;

  /* Typography */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
    monospace;

  /* Sizing */
  --slide-max-width: 1400px;
  --slide-padding: 4rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: var(--font-base);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ──────────────────────────────────────────────
   2. PROGRESS BAR (trên đầu)
   ────────────────────────────────────────────── */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--c-border-soft);
  z-index: 100;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-secondary));
  transition: width 0.4s ease;
}

/* ──────────────────────────────────────────────
   3. CHAPTER INDICATOR (góc trên phải)
   ────────────────────────────────────────────── */

.chapter-indicator {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 90;
  background: var(--c-primary);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ──────────────────────────────────────────────
   4. SLIDES CONTAINER & SLIDE
   ────────────────────────────────────────────── */

.slides-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--slide-padding) var(--slide-padding) calc(var(--slide-padding) + 60px);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  background: var(--c-bg);
}

.slide.active {
  opacity: 1;
  visibility: visible;
}

.slide-inner {
  max-width: var(--slide-max-width);
  margin: 0 auto;
  width: 100%;
}

/* Scrollbar trong slide */
.slide::-webkit-scrollbar {
  width: 10px;
}
.slide::-webkit-scrollbar-track {
  background: var(--c-bg-muted);
}
.slide::-webkit-scrollbar-thumb {
  background: var(--c-text-muted);
  border-radius: 5px;
}

/* ──────────────────────────────────────────────
   5. TYPOGRAPHY chuẩn cho slide
   ────────────────────────────────────────────── */

.slide-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  background: var(--c-primary-soft);
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-text);
  margin-bottom: 1.5rem;
}

.slide-lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--c-text-soft);
  margin-bottom: 2.5rem;
  max-width: 1100px;
}

.section-subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 2.5rem 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--c-border);
}

.slide-note {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--c-bg-soft);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--c-text-soft);
}

.slide-note strong {
  color: var(--c-text);
}

.slide-note-emphasis {
  background: var(--c-primary-soft);
  border-left-color: var(--c-primary);
}

.slide-note-warning {
  background: var(--c-warning-soft);
  border-left-color: var(--c-warning);
}

/* ──────────────────────────────────────────────
   6. SLIDE 1 — COVER (Bìa)
   ────────────────────────────────────────────── */

.slide-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c-bg) 0%, var(--c-primary-soft) 100%);
}

.slide-cover .slide-inner {
  text-align: center;
}

.cover-tag {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-primary);
  background: white;
  padding: 8px 20px;
  border-radius: 30px;
  border: 2px solid var(--c-primary);
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-sm);
}

.cover-title {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-text);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.cover-subtitle {
  font-size: 1.5rem;
  color: var(--c-text-soft);
  font-weight: 500;
  margin-bottom: 2.5rem;
}

.cover-hook {
  font-size: 1.25rem;
  font-style: italic;
  color: var(--c-primary-dark);
  margin-bottom: 3rem;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  display: inline-block;
}

.cover-meta {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}

.meta-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-text-muted);
  letter-spacing: 0.05em;
}

.meta-value {
  font-size: 1rem;
  color: var(--c-text);
  font-weight: 500;
}

/* ──────────────────────────────────────────────
   7. SLIDE 2 — PROBLEM GRID
   ────────────────────────────────────────────── */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.problem-card {
  padding: 1.75rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border-soft);
  transition: transform 0.2s, box-shadow 0.2s;
}

.problem-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.problem-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.problem-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--c-text);
}

.problem-card p {
  font-size: 0.95rem;
  color: var(--c-text-soft);
  line-height: 1.5;
}

/* ──────────────────────────────────────────────
   8. SLIDE 3 — CONSEQUENCE FLOW
   ────────────────────────────────────────────── */

.consequence-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0;
}

.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-md);
  border: 2px solid var(--c-border-soft);
  width: 100%;
  max-width: 900px;
}

.flow-step-danger {
  background: var(--c-danger-soft);
  border-color: var(--c-danger);
}

.flow-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--c-primary);
  min-width: 50px;
  text-align: center;
}

.flow-step-danger .flow-number {
  color: var(--c-danger);
}

.flow-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--c-text);
}

.flow-content p {
  color: var(--c-text-soft);
  font-size: 1rem;
}

.flow-arrow {
  font-size: 1.5rem;
  color: var(--c-text-muted);
  font-weight: bold;
}

/* ──────────────────────────────────────────────
   9. SLIDE 4 — VISION COMPARE
   ────────────────────────────────────────────── */

.vision-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.vision-col {
  padding: 2rem;
  border-radius: var(--radius-md);
}

.vision-before {
  background: var(--c-danger-soft);
  border: 2px solid #fca5a5;
}

.vision-after {
  background: var(--c-success-soft);
  border: 2px solid #86efac;
}

.vision-header {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-align: center;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid currentColor;
}

.vision-before .vision-header {
  color: var(--c-danger);
}

.vision-after .vision-header {
  color: var(--c-success);
}

.vision-list {
  list-style: none;
}

.vision-list li {
  padding: 0.75rem 0;
  padding-left: 1.75rem;
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
}

.vision-before .vision-list li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: var(--c-danger);
  font-weight: bold;
  font-size: 1.2rem;
}

.vision-after .vision-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-success);
  font-weight: bold;
  font-size: 1.2rem;
}

.vision-statement {
  margin-top: 2rem;
  padding: 1.5rem 2rem;
  background: var(--c-primary);
  color: white;
  border-radius: var(--radius-md);
  font-size: 1.15rem;
  text-align: center;
  line-height: 1.6;
}

.vision-statement strong {
  color: white;
  font-weight: 700;
}

/* ──────────────────────────────────────────────
   10. SLIDE 5 — PROBLEM/SOLUTION STATEMENT
   ────────────────────────────────────────────── */

.problem-statement,
.solution-statement {
  display: flex;
  gap: 1.5rem;
  padding: 1.75rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.problem-statement {
  background: var(--c-warning-soft);
  border-left: 6px solid var(--c-warning);
}

.solution-statement {
  background: var(--c-success-soft);
  border-left: 6px solid var(--c-success);
}

.ps-icon,
.ss-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.ps-content,
.ss-content {
  flex: 1;
}

.ps-content p,
.ss-content p {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.highlight {
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 2px 8px;
  border-radius: 4px;
}

.comparison-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.comp-item {
  padding: 8px 14px;
  background: white;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
}

.comp-vs {
  font-weight: 700;
  color: var(--c-warning);
}

.solution-factors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.factor-item {
  padding: 10px 14px;
  background: white;
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

/* ──────────────────────────────────────────────
   11. SLIDE 6 — TOKEN TABLE
   ────────────────────────────────────────────── */

.token-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 1.5rem 0;
  border: 1px solid var(--c-border-soft);
}

.token-table thead {
  background: var(--c-primary);
  color: white;
}

.token-table th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
}

.token-table td {
  padding: 14px 18px;
  border-top: 1px solid var(--c-border-soft);
  font-size: 1rem;
  color: var(--c-text-soft);
}

.token-table tbody tr:hover {
  background: var(--c-bg-soft);
}

.token-badge {
  display: inline-block;
  min-width: 50px;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  text-align: center;
  color: white;
  font-size: 0.95rem;
}

.token-xs { background: #94a3b8; }
.token-sm { background: #60a5fa; }
.token-md { background: #3b82f6; }
.token-lg { background: #2563eb; }
.token-xl { background: #1e40af; }

/* ──────────────────────────────────────────────
   12. SLIDE 7 — FACTORS GRID
   ────────────────────────────────────────────── */

.factors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.factor-card {
  padding: 1.75rem;
  background: white;
  border: 2px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  transition: border-color 0.2s, transform 0.2s;
}

.factor-card:hover {
  border-color: var(--c-primary);
  transform: translateY(-3px);
}

.factor-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.factor-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--c-text);
}

.factor-desc {
  font-size: 1rem;
  color: var(--c-text-soft);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.factor-why {
  padding: 0.75rem 1rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--c-text-soft);
  line-height: 1.5;
}

.factor-why strong {
  color: var(--c-primary);
}

/* ──────────────────────────────────────────────
   13. SLIDE 8 — MULTIPLIER GRID
   ────────────────────────────────────────────── */

.multiplier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.multiplier-card {
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border: 2px solid;
  background: white;
}

.multiplier-urgent {
  border-color: var(--c-danger);
  background: linear-gradient(135deg, white 0%, var(--c-danger-soft) 100%);
}

.multiplier-difficulty {
  border-color: #7c3aed;
  background: linear-gradient(135deg, white 0%, #f3e8ff 100%);
}

.multiplier-customer {
  border-color: var(--c-warning);
  background: linear-gradient(135deg, white 0%, var(--c-warning-soft) 100%);
}

.multiplier-delivery {
  border-color: var(--c-success);
  background: linear-gradient(135deg, white 0%, var(--c-success-soft) 100%);
}

.multiplier-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.multiplier-icon {
  font-size: 1.75rem;
}

.multiplier-name {
  font-size: 1.25rem;
  font-weight: 700;
}

.multiplier-card ul {
  list-style: none;
}

.multiplier-card li {
  padding: 6px 0;
  font-size: 1rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.multiplier-card li:last-child {
  border-bottom: none;
}

.multiplier-card li strong {
  color: var(--c-primary);
  font-weight: 700;
}

/* ──────────────────────────────────────────────
   14. SLIDE 9 — FORMULA
   ────────────────────────────────────────────── */

.formula-section {
  padding: 2rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  border: 2px solid var(--c-border-soft);
}

.formula-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 1.25rem;
}

.formula-display {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: white;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

.formula-result {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-primary-dark);
  padding: 12px 20px;
  background: var(--c-primary);
  color: white;
  border-radius: var(--radius-md);
  min-width: 70px;
  text-align: center;
}

.formula-equals,
.formula-mult {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-text-muted);
}

.formula-term {
  padding: 10px 16px;
  background: white;
  border: 2px solid;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.term-base { border-color: var(--c-primary); color: var(--c-primary); }
.term-urgent { border-color: var(--c-danger); color: var(--c-danger); }
.term-diff { border-color: #7c3aed; color: #7c3aed; }
.term-cust { border-color: var(--c-warning); color: var(--c-warning); }
.term-deliv { border-color: var(--c-success); color: var(--c-success); }
.term-qual { border-color: #be185d; color: #be185d; }

.formula-explain {
  font-size: 1rem;
  color: var(--c-text-soft);
  line-height: 1.6;
  padding: 0 0.5rem;
}

.formula-explain strong {
  color: var(--c-text);
}

.formula-divider {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-text-muted);
  margin: 1rem 0;
}

.formula-summary {
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--c-primary-soft);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
}

/* ──────────────────────────────────────────────
   15. SLIDE 10-11 — EXAMPLE CARDS
   ────────────────────────────────────────────── */

.example-card {
  background: white;
  border: 2px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.example-easy { border-left: 6px solid var(--c-success); }
.example-medium { border-left: 6px solid var(--c-warning); }
.example-hard { border-left: 6px solid var(--c-danger); }

.example-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--c-border-soft);
}

.example-level {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.example-easy .example-level {
  background: var(--c-success);
  color: white;
}
.example-medium .example-level {
  background: var(--c-warning);
  color: white;
}
.example-hard .example-level {
  background: var(--c-danger);
  color: white;
}

.example-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-text);
}

.example-calc {
  background: var(--c-bg-soft);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 1rem;
  border-bottom: 1px dashed var(--c-border);
}

.calc-row:last-child {
  border-bottom: none;
}

.calc-label {
  color: var(--c-text-soft);
}

.calc-value {
  font-weight: 600;
  color: var(--c-text);
  font-family: var(--font-mono);
}

.calc-row-total {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--c-text-muted);
  border-bottom: none;
}

.calc-total {
  color: var(--c-primary);
  font-size: 1.15rem;
  font-weight: 700;
}

.calc-row-final {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--c-success);
  background: var(--c-success-soft);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.75rem;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.calc-final {
  color: var(--c-success);
  font-size: 1.2rem;
  font-weight: 800;
}

.calc-bonus {
  color: var(--c-secondary);
  font-weight: 700;
}

.calc-row-perperson {
  background: var(--c-primary-soft);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}

/* ──────────────────────────────────────────────
   16. SLIDE 11 — HERO
   ────────────────────────────────────────────── */

.hero-scenario {
  padding: 2rem;
  background: linear-gradient(135deg, var(--c-secondary-soft) 0%, var(--c-warning-soft) 100%);
  border-radius: var(--radius-md);
  border: 2px solid var(--c-secondary);
  margin-bottom: 1.5rem;
  position: relative;
}

.hero-badge {
  position: absolute;
  top: -14px;
  right: 20px;
  background: var(--c-secondary);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-sm);
}

.hero-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-secondary);
  margin-bottom: 0.75rem;
}

.hero-story {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-text);
}

.hero-story strong {
  color: var(--c-secondary);
}

.hero-calc {
  padding: 1.5rem;
  background: white;
  border-radius: var(--radius-md);
  border: 2px solid var(--c-secondary);
  box-shadow: var(--shadow-sm);
}

.hero-calc-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-secondary);
  margin-bottom: 1rem;
  text-align: center;
}

.hero-calc .calc-row-final {
  background: linear-gradient(135deg, var(--c-secondary-soft), var(--c-warning-soft));
  border-top-color: var(--c-secondary);
}

.hero-calc .calc-final {
  color: var(--c-secondary);
}

/* ──────────────────────────────────────────────
   17. SLIDE 12 — ANTI-GAMING GRID
   ────────────────────────────────────────────── */

.antigaming-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.antigaming-card {
  padding: 1.5rem;
  background: white;
  border: 2px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  border-top: 6px solid var(--c-primary);
}

.ag-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.antigaming-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--c-text);
}

.ag-rule {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}

.ag-ratio {
  list-style: none;
  margin: 0.5rem 0 0.75rem 0;
  padding-left: 1rem;
}

.ag-ratio li {
  padding: 3px 0;
  font-size: 0.95rem;
  color: var(--c-text-soft);
}

.ag-ratio li::before {
  content: "▸ ";
  color: var(--c-primary);
}

.ag-detail {
  font-size: 0.95rem;
  color: var(--c-text-soft);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.ag-why {
  padding: 0.6rem 0.85rem;
  background: var(--c-primary-soft);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--c-primary-dark);
  font-style: italic;
}

/* ──────────────────────────────────────────────
   18. SLIDE 13 — MASTER-SLAVE DIAGRAM
   ────────────────────────────────────────────── */

.masterslave-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 2rem 0;
}

.ms-master,
.ms-slave {
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border: 2px solid;
}

.ms-master {
  background: linear-gradient(135deg, var(--c-primary-soft) 0%, white 100%);
  border-color: var(--c-primary);
}

.ms-slave {
  background: linear-gradient(135deg, var(--c-success-soft) 0%, white 100%);
  border-color: var(--c-success);
}

.ms-role {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.ms-master .ms-role { color: var(--c-primary); }
.ms-slave .ms-role { color: var(--c-success); }

.ms-who {
  font-size: 1rem;
  color: var(--c-text-soft);
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-border-soft);
}

.ms-tasks > div {
  padding: 6px 0;
  font-size: 0.95rem;
  color: var(--c-text);
  border-bottom: 1px dashed var(--c-border-soft);
}

.ms-tasks > div:last-child {
  border-bottom: none;
}

.ms-tasks > div::before {
  content: "→ ";
  color: var(--c-primary);
  font-weight: bold;
}

.ms-slave .ms-tasks > div::before {
  color: var(--c-success);
}

.ms-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ms-arrow {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 8px 14px;
  background: var(--c-bg-soft);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ms-arrow-down {
  color: var(--c-primary);
  border-left: 4px solid var(--c-primary);
}

.ms-arrow-up {
  color: var(--c-success);
  border-right: 4px solid var(--c-success);
}

.ms-reasons {
  margin-top: 2rem;
}

.ms-reasons h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--c-text);
}

.ms-reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.ms-reason {
  padding: 1rem 1.25rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--c-success);
}

.ms-reason strong {
  display: block;
  color: var(--c-success);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.ms-reason p {
  font-size: 0.95rem;
  color: var(--c-text-soft);
  line-height: 1.5;
}

/* ──────────────────────────────────────────────
   19. SLIDE 14 — TECH ARCHITECTURE
   ────────────────────────────────────────────── */

.tech-arch-diagram {
  margin: 2rem 0;
  position: relative;
}

.arch-layer {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
}

.arch-input {
  background: linear-gradient(135deg, #ffedd5 0%, white 100%);
  border: 2px solid var(--c-secondary);
}

.arch-app {
  background: linear-gradient(135deg, var(--c-primary-soft) 0%, white 100%);
  border: 2px solid var(--c-primary);
}

.arch-db {
  background: linear-gradient(135deg, #f3e8ff 0%, white 100%);
  border: 2px solid #7c3aed;
}

.arch-output {
  background: linear-gradient(135deg, var(--c-success-soft) 0%, white 100%);
  border: 2px solid var(--c-success);
}

.arch-layer-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--c-text);
}

.arch-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.arch-box {
  padding: 0.75rem;
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.arch-box small {
  display: block;
  font-size: 0.75rem;
  color: var(--c-text-muted);
  font-weight: 400;
  margin-top: 4px;
}

.arch-box-paper { border-color: var(--c-warning); }
.arch-box-zalo { border-color: var(--c-success); }
.arch-box-report { border-color: var(--c-primary); }

.arch-app-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.arch-feature {
  padding: 8px 12px;
  background: white;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border-left: 3px solid var(--c-primary);
}

.arch-tables {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.arch-table {
  padding: 0.75rem;
  background: white;
  border: 1px solid #7c3aed;
  border-radius: var(--radius-sm);
  text-align: center;
}

.arch-table strong {
  display: block;
  color: #7c3aed;
  font-family: var(--font-mono);
  font-size: 1rem;
  margin-bottom: 4px;
}

.arch-table span {
  font-size: 0.8rem;
  color: var(--c-text-muted);
}

.arch-side {
  margin: 0.75rem 0;
  display: flex;
  justify-content: flex-end;
}

.arch-side-box {
  padding: 0.85rem 1.25rem;
  background: white;
  border: 2px dashed #7c3aed;
  border-radius: var(--radius-md);
  max-width: 320px;
}

.arch-side-box strong {
  color: #7c3aed;
  font-size: 1rem;
}

.arch-side-box p {
  font-size: 0.875rem;
  color: var(--c-text-soft);
  margin-top: 4px;
}

.arch-arrow {
  text-align: center;
  font-size: 1.25rem;
  color: var(--c-text-muted);
  font-weight: bold;
  padding: 4px 0;
}

.arch-arrow-bidir {
  color: #7c3aed;
}

.tech-stack-reasons {
  margin-top: 2rem;
}

.tech-stack-reasons h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.reason-row {
  padding: 0.85rem 1.25rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.reason-row strong {
  color: var(--c-primary);
}

/* ──────────────────────────────────────────────
   20. SLIDE 15 — LISTEN & DISTRIBUTE STEPS
   ────────────────────────────────────────────── */

.ld-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.ld-step {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  background: white;
  border: 2px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  border-left: 6px solid var(--c-primary);
}

.ld-num {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--c-primary);
  min-width: 50px;
  text-align: center;
  align-self: flex-start;
}

.ld-body {
  flex: 1;
}

.ld-step-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.4rem;
}

.ld-step-desc {
  font-size: 1rem;
  color: var(--c-text-soft);
  margin-bottom: 0.75rem;
}

.ld-step-detail {
  list-style: none;
  margin-bottom: 0.75rem;
}

.ld-step-detail li {
  padding: 4px 0 4px 1.5rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--c-text-soft);
}

.ld-step-detail li::before {
  content: "▪";
  position: absolute;
  left: 0.5rem;
  color: var(--c-primary);
}

.ld-step-detail code {
  font-family: var(--font-mono);
  background: var(--c-bg-muted);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.85em;
  color: var(--c-primary-dark);
}

.ld-tool {
  padding: 0.6rem 0.9rem;
  background: var(--c-primary-soft);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--c-primary-dark);
}

.ld-tool strong {
  color: var(--c-primary);
}

/* ──────────────────────────────────────────────
   21. SLIDE 16 — LOCK MECHANISM
   ────────────────────────────────────────────── */

.lock-rationale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

.lock-problem,
.lock-solution {
  padding: 1.5rem;
  border-radius: var(--radius-md);
}

.lock-problem {
  background: var(--c-danger-soft);
  border: 2px solid #fca5a5;
}

.lock-solution {
  background: var(--c-success-soft);
  border: 2px solid #86efac;
}

.lock-problem h3,
.lock-solution h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.lock-problem h3 { color: var(--c-danger); }
.lock-solution h3 { color: var(--c-success); }

.lock-problem ul,
.lock-solution ul {
  list-style: none;
}

.lock-problem li,
.lock-solution li {
  padding: 5px 0 5px 1.5rem;
  position: relative;
  font-size: 0.95rem;
}

.lock-problem li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: var(--c-danger);
  font-weight: bold;
}

.lock-solution li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-success);
  font-weight: bold;
}

.lock-rules {
  margin-top: 2rem;
}

.lock-rules h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.lock-rule {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  align-items: flex-start;
}

.lock-rule-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.lock-rule strong {
  display: block;
  color: var(--c-primary);
  margin-bottom: 0.25rem;
}

.lock-rule ol {
  margin-left: 1.5rem;
  margin-top: 0.4rem;
}

.lock-rule ol li {
  padding: 3px 0;
  font-size: 0.95rem;
}

/* ──────────────────────────────────────────────
   22. SLIDE 17 — TASK LIFECYCLE
   ────────────────────────────────────────────── */

.task-lifecycle {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0;
}

.lc-step {
  flex: 1;
  min-width: 110px;
  padding: 0.85rem 0.5rem;
  background: white;
  border: 2px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  text-align: center;
}

.lc-step-1 { border-color: #94a3b8; }
.lc-step-2 { border-color: #60a5fa; }
.lc-step-3 { border-color: #3b82f6; }
.lc-step-4 { border-color: var(--c-warning); }
.lc-step-5 { border-color: #c084fc; }
.lc-step-6 { border-color: #f472b6; }
.lc-step-7 { border-color: var(--c-success); background: var(--c-success-soft); }

.lc-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-text-muted);
}

.lc-label {
  font-size: 0.9rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--c-text);
  letter-spacing: 0.05em;
  margin: 4px 0;
}

.lc-desc {
  font-size: 0.78rem;
  color: var(--c-text-muted);
  line-height: 1.3;
}

.lc-arrow {
  align-self: center;
  font-size: 1.25rem;
  color: var(--c-text-muted);
  font-weight: bold;
}

.lc-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.lc-branch {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
}

.lc-branch-blocked {
  background: var(--c-warning-soft);
  border-left: 4px solid var(--c-warning);
}

.lc-branch-rework {
  background: #f3e8ff;
  border-left: 4px solid #7c3aed;
}

.lc-branch-label {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.lc-branch-blocked .lc-branch-label { color: var(--c-warning); }
.lc-branch-rework .lc-branch-label { color: #7c3aed; }

.lc-branch-desc {
  font-size: 0.95rem;
  color: var(--c-text-soft);
  line-height: 1.5;
}

.lifecycle-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.lifecycle-table th {
  background: var(--c-primary);
  color: white;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
}

.lifecycle-table td {
  padding: 10px 16px;
  border-top: 1px solid var(--c-border-soft);
  font-size: 0.95rem;
}

.lifecycle-table tr:hover {
  background: var(--c-bg-soft);
}

/* ──────────────────────────────────────────────
   23. SLIDE 18 — ROLES GRID
   ────────────────────────────────────────────── */

.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.role-card {
  padding: 1.5rem;
  background: white;
  border: 2px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  position: relative;
  border-top: 6px solid;
}

.role-admin { border-top-color: var(--c-primary); }
.role-supervisor { border-top-color: var(--c-warning); }
.role-director { border-top-color: #be185d; }
.role-worker { border-top-color: var(--c-success); }
.role-kcs { border-top-color: #7c3aed; }
.role-trubng { border-top-color: var(--c-secondary); }

.role-icon {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.role-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--c-text);
}

.role-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--c-bg-muted);
  color: var(--c-text-muted);
  margin-bottom: 0.75rem;
}

.role-admin .role-tag,
.role-supervisor .role-tag,
.role-director .role-tag,
.role-trubng .role-tag {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.role-worker .role-tag {
  background: var(--c-success-soft);
  color: var(--c-success);
}

.role-kcs .role-tag {
  background: #f3e8ff;
  color: #7c3aed;
}

.role-card ul {
  list-style: none;
}

.role-card li {
  padding: 4px 0 4px 1rem;
  position: relative;
  font-size: 0.9rem;
  color: var(--c-text-soft);
  line-height: 1.4;
}

.role-card li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--c-primary);
}

/* ──────────────────────────────────────────────
   24. SLIDE 19 — WEEK TIMELINE
   ────────────────────────────────────────────── */

.week-timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.85rem;
  margin: 2rem 0;
}

.week-day {
  padding: 1.25rem 1rem;
  background: white;
  border: 2px solid var(--c-border-soft);
  border-radius: var(--radius-md);
}

.week-day-key {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  box-shadow: var(--shadow-md);
}

.day-label {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c-primary);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--c-border-soft);
}

.week-day-key .day-label {
  border-bottom-color: var(--c-primary);
}

.day-event {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}

.day-desc {
  font-size: 0.85rem;
  color: var(--c-text-soft);
  line-height: 1.45;
}

.day-desc strong {
  color: var(--c-text);
}

.task-types {
  margin-top: 2rem;
}

.task-type-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.85rem 1.25rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-md);
  margin-bottom: 0.6rem;
}

.task-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  min-width: 150px;
  text-align: center;
}

.task-tag-urgent {
  background: var(--c-danger);
  color: white;
}
.task-tag-deadline {
  background: var(--c-warning);
  color: white;
}
.task-tag-week {
  background: var(--c-primary);
  color: white;
}
.task-tag-buffer {
  background: var(--c-text-muted);
  color: white;
}

.task-desc {
  flex: 1;
  font-size: 1rem;
  color: var(--c-text);
}

/* ──────────────────────────────────────────────
   25. SLIDE 20 — TASK LIST MOCKUP
   ────────────────────────────────────────────── */

.tasklist-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

.tasklist-paper,
.tasklist-zalo {
  display: flex;
  flex-direction: column;
  min-width: 0; /* cho phép thu hẹp khi cần */
}

.tasklist-format-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 0.75rem;
  padding: 6px 14px;
  background: var(--c-primary-soft);
  border-radius: 4px;
  display: inline-block;
}

/* Paper mockup */
.paper-mockup {
  background: white;
  padding: 1.5rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-family: Georgia, serif;
}

.paper-header {
  text-align: center;
  border-bottom: 2px solid var(--c-text);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

.paper-company {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.paper-doc-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0.4rem 0;
  text-transform: uppercase;
}

.paper-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.paper-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-bottom: 1rem;
}

.paper-table th,
.paper-table td {
  border: 1px solid var(--c-text);
  padding: 5px 6px;
  text-align: left;
  vertical-align: top;
}

.paper-table thead {
  background: var(--c-bg-soft);
}

.paper-table th {
  font-weight: 700;
  text-align: center;
}

.paper-table tfoot td {
  background: var(--c-bg-soft);
  font-weight: 700;
}

.paper-row-buffer {
  background: var(--c-bg-muted);
  color: var(--c-text-soft);
}

.paper-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}

.paper-tag.tag-urgent { background: var(--c-danger); }
.paper-tag.tag-deadline { background: var(--c-warning); }
.paper-tag.tag-week { background: var(--c-primary); }
.paper-tag.tag-buffer { background: var(--c-text-muted); }

.paper-footer {
  margin-top: 1rem;
}

.paper-sign-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.paper-sign-block {
  font-size: 0.72rem;
  text-align: center;
}

.paper-sign-line {
  margin-top: 1.5rem;
  font-size: 0.7rem;
  color: var(--c-text-muted);
}

.paper-note {
  font-size: 0.72rem;
  text-align: center;
  color: var(--c-text-muted);
  padding-top: 0.5rem;
  border-top: 1px dashed var(--c-text-muted);
}

/* Zalo mockup */
.zalo-mockup {
  background: #e6f2ff;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-base);
  max-width: 100%;
}

.zalo-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #b3d9ff;
  margin-bottom: 0.75rem;
}

.zalo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}

.zalo-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-text);
}

.zalo-time {
  font-size: 0.75rem;
  color: var(--c-text-muted);
}

.zalo-message {
  background: white;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border-top-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}

.zalo-line {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-text);
  padding: 1px 0;
}

.zalo-line-title {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

.zalo-line-separator {
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  text-align: center;
}

.zalo-line-total {
  margin-top: 0.3rem;
  padding: 6px 10px;
  background: var(--c-success-soft);
  border-radius: 4px;
  font-size: 0.9rem;
}

.zalo-line-note {
  font-size: 0.78rem;
  color: var(--c-text-soft);
  font-style: italic;
  margin-top: 0.3rem;
}

/* ──────────────────────────────────────────────
   26. SLIDE 21 — TASKTYPE CARDS
   ────────────────────────────────────────────── */

.tasktype-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.tasktype-card {
  padding: 1.5rem;
  background: white;
  border: 2px solid;
  border-radius: var(--radius-md);
}

.tasktype-urgent { border-color: var(--c-danger); }
.tasktype-deadline { border-color: var(--c-warning); }
.tasktype-week { border-color: var(--c-primary); }
.tasktype-buffer { border-color: var(--c-text-muted); }

.tt-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--c-border-soft);
}

.tt-icon {
  font-size: 2.5rem;
}

.tt-header h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}

.tasktype-urgent h3 { color: var(--c-danger); }
.tasktype-deadline h3 { color: var(--c-warning); }
.tasktype-week h3 { color: var(--c-primary); }
.tasktype-buffer h3 { color: var(--c-text-muted); }

.tt-subtitle {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  font-weight: 500;
}

.tt-detail p {
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  line-height: 1.55;
}

.tt-detail strong {
  color: var(--c-text);
}

/* ──────────────────────────────────────────────
   27. SLIDE 22 — FRIDAY FLOW + ADMIN UI
   ────────────────────────────────────────────── */

.friday-flow {
  margin: 2rem 0;
}

.friday-step {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
  background: white;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--c-primary);
}

.friday-time {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-primary);
  font-family: var(--font-mono);
  min-width: 75px;
  align-self: center;
}

.friday-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--c-text);
}

.friday-content p {
  font-size: 0.95rem;
  color: var(--c-text-soft);
  line-height: 1.5;
}

.admin-ui-mockup {
  margin-top: 1.5rem;
  background: white;
  border: 2px solid var(--c-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.ui-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  background: var(--c-primary);
  color: white;
  font-weight: 600;
}

.ui-actions {
  display: flex;
  gap: 0.5rem;
}

.ui-btn {
  padding: 6px 14px;
  background: white;
  color: var(--c-primary);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.ui-btn-primary {
  background: var(--c-secondary);
  color: white;
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ui-table th {
  background: var(--c-bg-muted);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--c-text-soft);
}

.ui-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--c-border-soft);
}

.ui-table tfoot td {
  background: var(--c-primary-soft);
  font-weight: 600;
}

.ui-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.ui-status-done {
  background: var(--c-success-soft);
  color: var(--c-success);
}

.ui-status-late {
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

/* ──────────────────────────────────────────────
   28. SLIDE 23 — REWARD STRUCTURE + INCOME
   ────────────────────────────────────────────── */

.reward-structure {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.reward-block {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: white;
  border: 2px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  border-left: 6px solid var(--c-primary);
}

.reward-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--c-primary);
  min-width: 50px;
}

.reward-content h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.reward-content p {
  font-size: 0.95rem;
  color: var(--c-text-soft);
  line-height: 1.5;
}

.reward-content p strong {
  color: var(--c-primary);
}

.ranking-tiers {
  list-style: none;
  margin-top: 0.75rem;
}

.ranking-tiers li {
  padding: 6px 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rank-medal {
  font-size: 1.25rem;
  margin-right: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rank-gold {
  background: linear-gradient(135deg, #fde047, #ca8a04);
  box-shadow: 0 2px 8px rgba(202, 138, 4, 0.3);
}

.rank-silver {
  background: linear-gradient(135deg, #e5e7eb, #9ca3af);
  box-shadow: 0 2px 8px rgba(156, 163, 175, 0.3);
}

.rank-bronze {
  background: linear-gradient(135deg, #fdba74, #c2410c);
  box-shadow: 0 2px 8px rgba(194, 65, 12, 0.3);
}

.rank-honor {
  background: linear-gradient(135deg, var(--c-primary-soft), var(--c-primary));
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
}

.income-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.income-example {
  padding: 1.5rem;
  border-radius: var(--radius-md);
  background: white;
  border: 2px solid;
}

.income-top { border-color: var(--c-success); background: linear-gradient(135deg, var(--c-success-soft), white); }
.income-mid { border-color: var(--c-primary); background: linear-gradient(135deg, var(--c-primary-soft), white); }
.income-low { border-color: var(--c-text-muted); background: linear-gradient(135deg, var(--c-bg-soft), white); }

.income-tier {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid currentColor;
}

.income-top .income-tier { color: var(--c-success); }
.income-mid .income-tier { color: var(--c-primary); }
.income-low .income-tier { color: var(--c-text-muted); }

.income-breakdown > div {
  padding: 4px 0;
  font-size: 0.95rem;
  color: var(--c-text-soft);
}

.income-breakdown strong {
  color: var(--c-text);
}

.income-total {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px dashed currentColor;
  font-size: 1.15rem !important;
}

.income-note {
  margin-top: 0.5rem;
  font-size: 0.85rem !important;
  font-style: italic;
  color: var(--c-text-muted) !important;
}

/* ──────────────────────────────────────────────
   29. SLIDE 24 — BENEFIT GRID
   ────────────────────────────────────────────── */

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.benefit-card {
  padding: 1.5rem;
  background: white;
  border: 2px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  transition: transform 0.2s, box-shadow 0.2s;
}

.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-primary);
}

.benefit-role {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--c-primary-soft);
}

.benefit-card ul {
  list-style: none;
}

.benefit-card li {
  padding: 5px 0 5px 1.25rem;
  position: relative;
  font-size: 0.9rem;
  color: var(--c-text-soft);
  line-height: 1.5;
}

.benefit-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-success);
  font-weight: bold;
}

/* ──────────────────────────────────────────────
   30. SLIDE 25 — ROADMAP
   ────────────────────────────────────────────── */

.roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.roadmap-week {
  padding: 1.5rem;
  background: white;
  border: 2px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  border-top: 6px solid;
}

.roadmap-week-1 { border-top-color: var(--c-primary); }
.roadmap-week-2 { border-top-color: var(--c-secondary); }
.roadmap-week-3 { border-top-color: var(--c-warning); }
.roadmap-week-4 { border-top-color: var(--c-success); }

.roadmap-week-num {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roadmap-week-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0.25rem 0 0.75rem;
  color: var(--c-text);
}

.roadmap-week ul {
  list-style: none;
}

.roadmap-week li {
  padding: 5px 0 5px 1rem;
  position: relative;
  font-size: 0.875rem;
  color: var(--c-text-soft);
  line-height: 1.45;
}

.roadmap-week li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--c-primary);
}

.roadmap-week li strong {
  color: var(--c-secondary);
}

/* ──────────────────────────────────────────────
   31. SLIDE 26 — COMMITMENT + FAQ + FINAL
   ────────────────────────────────────────────── */

.slide-final {
  background: linear-gradient(135deg, var(--c-bg) 0%, var(--c-primary-soft) 100%);
}

.commitment-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.commitment-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  align-items: flex-start;
}

.commitment-mark {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-success);
  flex-shrink: 0;
  line-height: 1;
}

.commitment-item div {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-text-soft);
}

.commitment-item strong {
  color: var(--c-text);
}

.faq-subtitle {
  margin-top: 2rem;
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin: 1.5rem 0;
}

.faq-item {
  padding: 1rem 1.25rem;
  background: white;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--c-warning);
}

.faq-q {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.4rem;
}

.faq-a {
  font-size: 0.9rem;
  color: var(--c-text-soft);
  line-height: 1.55;
}

.faq-q strong { color: var(--c-warning); }
.faq-a strong { color: var(--c-success); }

.final-call {
  margin-top: 2.5rem;
  padding: 2rem;
  background: var(--c-primary);
  color: white;
  border-radius: var(--radius-md);
  text-align: center;
}

.final-call h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.final-call p {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.95;
  margin-bottom: 1.5rem;
}

.final-thanks {
  font-size: 1.25rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  line-height: 1.6;
}

.final-thanks strong {
  font-size: 1.5rem;
  display: inline-block;
  margin-top: 0.5rem;
}

/* ──────────────────────────────────────────────
   32. NAVIGATION
   ────────────────────────────────────────────── */

.slide-nav {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--c-border);
  border-radius: 30px;
  box-shadow: var(--shadow-md);
  z-index: 90;
}

.nav-btn {
  padding: 8px 16px;
  background: var(--c-primary);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

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

.nav-btn:active {
  transform: scale(0.97);
}

.nav-btn:disabled {
  background: var(--c-border);
  color: var(--c-text-muted);
  cursor: not-allowed;
}

.slide-counter {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-text);
  min-width: 60px;
  text-align: center;
}

.slide-counter span {
  color: var(--c-primary);
  font-weight: 700;
}

.keyboard-hint {
  position: fixed;
  bottom: 16px;
  right: 20px;
  font-size: 0.78rem;
  color: var(--c-text-muted);
  background: white;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--c-border);
  z-index: 80;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.keyboard-hint:hover,
.keyboard-hint.faded:hover {
  opacity: 1;
}

.keyboard-hint.faded {
  opacity: 0.3;
}

.keyboard-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 2px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-text);
}

/* ──────────────────────────────────────────────
   33. RESPONSIVE — Trên laptop nhỏ
   ────────────────────────────────────────────── */

@media (max-width: 1280px) {
  :root {
    --slide-padding: 3rem;
  }

  .cover-title {
    font-size: 3.5rem;
  }

  .slide-title {
    font-size: 2.1rem;
  }

  .problem-grid,
  .roles-grid,
  .benefit-grid,
  .income-examples {
    grid-template-columns: repeat(2, 1fr);
  }

  .week-timeline {
    grid-template-columns: repeat(3, 1fr);
  }

  .roadmap {
    grid-template-columns: repeat(2, 1fr);
  }

  .arch-boxes,
  .arch-app-features,
  .arch-tables {
    grid-template-columns: repeat(2, 1fr);
  }

  .task-lifecycle {
    flex-direction: column;
  }

  .lc-arrow {
    transform: rotate(90deg);
  }

  .gng-fields {
    grid-template-columns: repeat(2, 1fr);
  }

  .cap-snapshot {
    grid-template-columns: 1fr;
  }

  .cp-weeks {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  :root {
    --slide-padding: 2rem;
    font-size: 16px;
  }

  .cover-title {
    font-size: 2.5rem;
  }

  .slide-title {
    font-size: 1.7rem;
  }

  .problem-grid,
  .roles-grid,
  .benefit-grid,
  .income-examples,
  .factors-grid,
  .multiplier-grid,
  .antigaming-grid,
  .tasktype-grid,
  .tasklist-comparison,
  .vision-compare,
  .lock-rationale,
  .faq-list,
  .commitment-list,
  .lc-branches,
  .formula-display,
  .ms-reason-grid {
    grid-template-columns: 1fr;
  }

  .roadmap,
  .week-timeline {
    grid-template-columns: 1fr;
  }

  .masterslave-diagram {
    grid-template-columns: 1fr;
  }

  .ms-flow {
    flex-direction: row;
  }

  .intake-metaphor {
    flex-direction: column;
  }

  .intake-compare {
    grid-template-columns: 1fr;
  }

  .gng-fields {
    grid-template-columns: 1fr;
  }

  .gng-process {
    flex-direction: column;
    align-items: stretch;
  }

  .gng-connector {
    width: 2px;
    height: 16px;
    align-self: center;
  }

  .gng-step {
    min-width: 0;
  }

  .cp-weeks {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────
   34. INTAKE COMPARISON — Slide 23
   ────────────────────────────────────────────── */

.intake-metaphor {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.intake-card {
  flex: 1;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  text-align: center;
}

.intake-card h3 {
  font-size: 1.15rem;
  margin: 0.5rem 0 0.4rem;
}

.intake-card p {
  font-size: 0.9rem;
  color: var(--c-text-soft);
  line-height: 1.5;
}

.intake-card-icon {
  font-size: 2.2rem;
}

.intake-card-label {
  margin-top: 0.75rem;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  display: inline-block;
}

.intake-card-book {
  background: var(--c-primary-soft);
  border: 2px solid var(--c-primary);
}

.intake-card-book .intake-card-label {
  background: var(--c-primary);
  color: white;
}

.intake-card-walk {
  background: var(--c-secondary-soft);
  border: 2px solid var(--c-secondary);
}

.intake-card-walk .intake-card-label {
  background: var(--c-secondary);
  color: white;
}

.intake-vs {
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--c-text-muted);
  flex-shrink: 0;
}

.intake-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.intake-col {
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
}

.intake-col-header {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--c-border-soft);
}

.intake-col ul {
  list-style: none;
  padding: 0;
}

.intake-col li {
  padding: 0.35rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--c-border-soft);
}

.intake-col li:last-child {
  border-bottom: none;
}

.intake-col-contract {
  background: var(--c-primary-soft);
}

.intake-col-contract .intake-col-header {
  border-bottom-color: var(--c-primary);
}

.intake-col-walkin {
  background: var(--c-secondary-soft);
}

.intake-col-walkin .intake-col-header {
  border-bottom-color: var(--c-secondary);
}

/* ──────────────────────────────────────────────
   35. CAPACITY SNAPSHOT & GO/NO-GO — Slide 24
   ────────────────────────────────────────────── */

.cap-snapshot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.cap-group {
  padding: 1rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
}

.cap-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.cap-group-name {
  font-size: 0.95rem;
}

.cap-group-pct {
  font-size: 0.85rem;
  font-weight: 700;
}

.cap-track {
  position: relative;
  height: 28px;
  background: var(--c-bg-muted);
  border-radius: 14px;
  overflow: hidden;
}

.cap-used {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
  border-radius: 14px 0 0 14px;
  transition: width 0.6s ease;
}

.cap-order {
  position: absolute;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #f59e0b,
    #f59e0b 4px,
    #fbbf24 4px,
    #fbbf24 8px
  );
  border-radius: 0;
  width: 0;
  transition: width 0.6s ease, left 0.6s ease;
  opacity: 0.9;
}

.cap-buffer-line {
  position: absolute;
  top: 0;
  right: 20%;
  width: 2px;
  height: 100%;
  background: var(--c-danger);
  opacity: 0.6;
}

.cap-buffer-line::after {
  content: "buffer 20%";
  position: absolute;
  top: -18px;
  right: -28px;
  font-size: 0.6rem;
  color: var(--c-danger);
  white-space: nowrap;
  font-weight: 600;
}

.cap-nums {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--c-text-muted);
}

.cap-free {
  font-weight: 600;
  color: var(--c-success);
}

/* Capacity Legend */
.cap-legend {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  padding: 0.5rem 0;
  font-size: 0.75rem;
  color: var(--c-text-muted);
}

.cap-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cap-legend-swatch {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 3px;
}

.cap-legend-used {
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

.cap-legend-new {
  background: repeating-linear-gradient(
    45deg,
    #f59e0b,
    #f59e0b 3px,
    #fbbf24 3px,
    #fbbf24 6px
  );
}

.cap-legend-buffer {
  background: var(--c-danger);
  width: 3px;
  height: 14px;
}

/* Go/No-Go Form */
.gng-form {
  margin: 1rem 0;
  padding: 1.25rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
}

.gng-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.gng-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}

.gng-field select,
.gng-field input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: var(--font-base);
  background: white;
  color: var(--c-text);
  transition: border-color 0.2s;
}

.gng-field select:focus,
.gng-field input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}

.gng-btn {
  display: block;
  width: 100%;
  padding: 0.7rem;
  background: var(--c-primary);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  font-family: var(--font-base);
}

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

.gng-btn:active {
  transform: scale(0.98);
}

.gng-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gng-btn-reset {
  margin-top: 0.5rem;
  background: var(--c-text-muted);
  font-size: 0.85rem;
  padding: 0.5rem;
}

.gng-btn-reset:hover {
  background: var(--c-text-soft);
}

/* Process Steps */
.gng-process {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 1.25rem 0;
  padding: 1rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.gng-step {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--c-border);
  background: white;
  min-width: 140px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.gng-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-border);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s;
}

.gng-step-body {
  flex: 1;
  min-width: 0;
}

.gng-step-title {
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.gng-step-detail {
  font-size: 0.72rem;
  color: var(--c-text-muted);
  margin-top: 0.2rem;
  line-height: 1.4;
}

.gng-connector {
  width: 24px;
  height: 2px;
  background: var(--c-border);
  flex-shrink: 0;
  transition: background 0.3s;
}

/* Step states */
.gng-step.active {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

.gng-step.active .gng-step-num {
  background: var(--c-primary);
}

.gng-step.pass {
  border-color: var(--c-success);
  background: var(--c-success-soft);
}

.gng-step.pass .gng-step-num {
  background: var(--c-success);
}

.gng-step.warn {
  border-color: var(--c-warning);
  background: var(--c-warning-soft);
}

.gng-step.warn .gng-step-num {
  background: var(--c-warning);
}

.gng-step.fail {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

.gng-step.fail .gng-step-num {
  background: var(--c-danger);
}

.gng-connector.done {
  background: var(--c-success);
  height: 3px;
}

/* Result area */
.gng-result,
.cp-result {
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--c-border);
  background: var(--c-bg-soft);
  min-height: 60px;
  transition: border-color 0.3s, background 0.3s;
}

.gng-result-idle {
  text-align: center;
  color: var(--c-text-muted);
  font-size: 0.9rem;
}

.gng-result.go,
.cp-result.go {
  border-color: var(--c-success);
  background: var(--c-success-soft);
}

.gng-result.nogo,
.cp-result.nogo {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

.gng-result.partial,
.cp-result.partial {
  border-color: var(--c-warning);
  background: var(--c-warning-soft);
}

.result-verdict {
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.result-verdict.go {
  color: var(--c-success);
}

.result-verdict.nogo {
  color: var(--c-danger);
}

.result-verdict.partial {
  color: var(--c-warning);
}

.result-details {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-text-soft);
}

.result-details strong {
  color: var(--c-text);
}

/* ──────────────────────────────────────────────
   36. CAPACITY PLANNING WEEKS — Slide 25
   ────────────────────────────────────────────── */

.cp-weeks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}

.cp-week {
  padding: 1rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  transition: border-color 0.3s;
}

.cp-week.highlight {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.cp-week-head {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.cp-week-head small {
  font-weight: 400;
  color: var(--c-text-muted);
}

.cp-week-bar {
  position: relative;
  height: 32px;
  background: var(--c-bg-muted);
  border-radius: 16px;
  overflow: hidden;
}

.cp-week-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
  border-radius: 16px 0 0 16px;
  transition: width 0.6s ease;
}

.cp-week-new {
  position: absolute;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #f59e0b,
    #f59e0b 4px,
    #fbbf24 4px,
    #fbbf24 8px
  );
  width: 0;
  transition: width 0.6s ease, left 0.6s ease;
  opacity: 0.9;
}

.cp-week-info {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--c-text-muted);
}

/* ──────────────────────────────────────────────
   37. PRINT — phòng khi anh muốn in slide làm handout
   ────────────────────────────────────────────── */

@media print {
  .progress-bar,
  .chapter-indicator,
  .slide-nav,
  .keyboard-hint {
    display: none !important;
  }

  body,
  html {
    overflow: visible;
    height: auto;
  }

  .slides-container {
    height: auto;
    overflow: visible;
  }

  .slide {
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
    page-break-after: always;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 2rem;
  }

  .slide-cover,
  .slide-final {
    background: white !important;
  }
}