<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OmiScan — Demo Map</title>
  <link rel="stylesheet" href="assets/shared.css">
  <style>
    body { background: var(--neutral-50); }

    .hero-mini {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      color: white;
      padding: 40px 28px;
      position: relative;
      overflow: hidden;
    }
    .hero-mini::before {
      content: '';
      position: absolute;
      width: 400px;
      height: 400px;
      background: rgba(255,255,255,0.05);
      border-radius: 50%;
      top: -200px;
      right: -100px;
    }
    .hero-content {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
    }
    .hero-content .left { flex: 1; min-width: 300px; }
    .hero-content h1 {
      font-size: 36px;
      font-weight: 700;
      margin: 0 0 8px;
      letter-spacing: -0.5px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .hero-content p {
      margin: 0 0 16px;
      opacity: 0.95;
      font-size: 15px;
      line-height: 1.5;
      max-width: 560px;
    }
    .hero-meta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 13px;
      opacity: 0.9;
    }
    .hero-meta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .stats-block {
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      border-radius: 14px;
      padding: 16px 20px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .stats-block .stat-num { font-size: 28px; font-weight: 700; }
    .stats-block .stat-label { font-size: 12px; opacity: 0.85; }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px;
    }

    .legend {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center;
      padding: 12px 20px;
      background: var(--primary-50);
      border-radius: 10px;
      margin-bottom: 20px;
      font-size: 13px;
    }
    .legend strong { color: var(--primary); }
    .legend .kbd { font-family: 'JetBrains Mono', monospace; background: white; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--neutral-300); font-size: 11px; }

    .quick-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }
    .quick-action {
      background: white;
      border: 1px solid var(--neutral-200);
      border-radius: 12px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: inherit;
      transition: all 0.15s;
    }
    .quick-action:hover {
      border-color: var(--primary);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(15, 77, 138, 0.1);
    }
    .quick-action .qa-emoji { font-size: 28px; }
    .quick-action .qa-info { flex: 1; }
    .quick-action .qa-title { font-weight: 600; font-size: 14px; }
    .quick-action .qa-desc { font-size: 12px; color: var(--neutral-500); margin-top: 2px; }

    footer {
      background: var(--neutral-100);
      padding: 24px 28px;
      border-top: 1px solid var(--neutral-200);
      text-align: center;
      font-size: 13px;
      color: var(--neutral-500);
    }
    footer .footer-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; opacity: 0.7; margin-top: 4px; }
    footer a { color: var(--primary); text-decoration: none; }
  </style>
</head>
<body>

<!-- Top bar OmiGroup style -->
<header class="omi-topbar">
  <a href="index.html" class="brand">
    <span class="emoji">🥗</span>
    <span>OmiScan</span>
    <span class="version-badge">v0.2 · 10/05/2026</span>
  </a>

  <div class="actions">
    <div class="locale-switch">
      <button class="active">VI</button>
      <button>EN</button>
    </div>
    <button class="btn btn-ghost btn-sm" onclick="OmiScan.openQS()">
      🔍 Tìm <span class="qs-kbd" style="margin-left: 4px;">⌘K</span>
    </button>
    <a href="mobile.html#m02" class="btn btn-secondary btn-sm">🔑 Đăng nhập</a>
    <a href="flows.html" class="btn btn-primary btn-sm">▶ Auto-tour</a>
  </div>
</header>

<!-- Hero -->
<section class="hero-mini">
  <div class="hero-content">
    <div class="left">
      <h1><span>🥗</span> OmiScan</h1>
      <p>Hệ thống kiểm tra ghi nhãn thực phẩm bao gói sẵn cho Viện Dinh dưỡng Quốc gia. Sử dụng AI on-device (Gemma 4) và rule engine remote-updatable theo NĐ 37/2026/NĐ-CP và TT 29/2023/TT-BYT.</p>
      <div class="hero-meta">
        <span>🏥 Viện Dinh dưỡng × OmiGroup</span>
        <span>📍 Hà Nội · TPHCM · Đà Nẵng</span>
        <span>📅 Triển khai T1–T8/2026</span>
      </div>
    </div>
    <div class="stats-block">
      <div>
        <div class="stat-num">36</div>
        <div class="stat-label">Màn hình mockup</div>
      </div>
      <div>
        <div class="stat-num">3</div>
        <div class="stat-label">Flows nghiệp vụ</div>
      </div>
      <div>
        <div class="stat-num">23</div>
        <div class="stat-label">Rule v1 NĐ37+TT29</div>
      </div>
    </div>
  </div>
</section>

<div class="container">

  <div class="legend">
    <span>📖 <strong>Hướng dẫn</strong></span>
    <span>Click thẻ để mở màn hình</span>
    <span>·</span>
    <span>Bấm <span class="kbd">⌘ K</span> hoặc <span class="kbd">Ctrl K</span> để tìm nhanh</span>
    <span>·</span>
    <span>Trong demo, các nút có <span style="background:#FEF9C3; padding:1px 6px; border-radius:4px;">👆</span> sẽ tương tác và chuyển màn</span>
  </div>

  <!-- Quick actions -->
  <div class="quick-actions">
    <a href="flows.html#fm02" class="quick-action">
      <span class="qa-emoji">▶️</span>
      <div class="qa-info">
        <div class="qa-title">Auto-tour 8 phút</div>
        <div class="qa-desc">Xem flow chính từ A→Z</div>
      </div>
    </a>
    <a href="mobile.html#m04" class="quick-action">
      <span class="qa-emoji">📷</span>
      <div class="qa-info">
        <div class="qa-title">Demo Camera + Quality Gate</div>
        <div class="qa-desc">5 chỉ số real-time, reason text</div>
      </div>
    </a>
    <a href="cms.html#c04" class="quick-action">
      <span class="qa-emoji">⚙️</span>
      <div class="qa-info">
        <div class="qa-title">Rule editor (form-based)</div>
        <div class="qa-desc">P3 build predicate không cần code</div>
      </div>
    </a>
    <a href="dashboard.html#d04" class="quick-action">
      <span class="qa-emoji">🔍</span>
      <div class="qa-info">
        <div class="qa-title">Submission detail</div>
        <div class="qa-desc">P2 review ảnh + JSON + OCR cross-check</div>
      </div>
    </a>
  </div>

  <!-- Mobile section -->
  <section class="demo-map-section">
    <div class="section-header">
      <div class="section-emoji">📱</div>
      <div class="section-title">
        <h2>Mobile App <span class="count">15 màn hình</span></h2>
        <div class="section-desc">App Flutter cho cán bộ Viện DD chụp nhãn thực phẩm tại siêu thị/cửa hàng — iOS + Android</div>
      </div>
    </div>

    <div class="demo-map-grid">
      <a href="mobile.html#m01" class="demo-map-item">
        <span class="item-emoji">🚀</span>
        <div class="item-info">
          <div class="item-id">S-M01</div>
          <p class="item-title">Splash + Tải mô hình</p>
          <p class="item-desc">Tải Gemma 4 E2B 1.3GB lần đầu</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m02" class="demo-map-item">
        <span class="item-emoji">🔐</span>
        <div class="item-info">
          <div class="item-id">S-M02</div>
          <p class="item-title">Đăng nhập</p>
          <p class="item-desc">Cognito + email Viện DD</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m03" class="demo-map-item">
        <span class="item-emoji">🏠</span>
        <div class="item-info">
          <div class="item-id">S-M03</div>
          <p class="item-title">Trang chủ</p>
          <p class="item-desc">KPI cá nhân + CTA chính</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m04" class="demo-map-item">
        <span class="item-emoji">📷</span>
        <div class="item-info">
          <div class="item-id">S-M04</div>
          <p class="item-title">Camera + Quality Gate</p>
          <p class="item-desc">5 chỉ số real-time, reason text</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m05" class="demo-map-item">
        <span class="item-emoji">✅</span>
        <div class="item-info">
          <div class="item-id">S-M05</div>
          <p class="item-title">Checklist 4 ảnh</p>
          <p class="item-desc">Front, Back, Nutrition, Extras</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m06" class="demo-map-item">
        <span class="item-emoji">👁️</span>
        <div class="item-info">
          <div class="item-id">S-M06</div>
          <p class="item-title">Preview & Confirm</p>
          <p class="item-desc">JSON merge cross-check</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m07" class="demo-map-item">
        <span class="item-emoji">✏️</span>
        <div class="item-info">
          <div class="item-id">S-M07</div>
          <p class="item-title">Edit JSON / Field editor</p>
          <p class="item-desc">Confidence color code</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m08" class="demo-map-item">
        <span class="item-emoji">🎉</span>
        <div class="item-info">
          <div class="item-id">S-M08</div>
          <p class="item-title">Submit confirmation</p>
          <p class="item-desc">Validation result + advisory</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m09" class="demo-map-item">
        <span class="item-emoji">📋</span>
        <div class="item-info">
          <div class="item-id">S-M09</div>
          <p class="item-title">Lịch sử</p>
          <p class="item-desc">Filter + status pill</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m10" class="demo-map-item">
        <span class="item-emoji">🔍</span>
        <div class="item-info">
          <div class="item-id">S-M10</div>
          <p class="item-title">Chi tiết submission</p>
          <p class="item-desc">Read-only sau sync</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m11" class="demo-map-item">
        <span class="item-emoji">🔎</span>
        <div class="item-info">
          <div class="item-id">S-M11</div>
          <p class="item-title">Tra cứu sản phẩm</p>
          <p class="item-desc">Search + quét barcode</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m12" class="demo-map-item">
        <span class="item-emoji">⚙️</span>
        <div class="item-info">
          <div class="item-id">S-M12</div>
          <p class="item-title">Cài đặt</p>
          <p class="item-desc">Account, sync, model</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m13" class="demo-map-item">
        <span class="item-emoji">🔔</span>
        <div class="item-info">
          <div class="item-id">S-M13</div>
          <p class="item-title">Notification center</p>
          <p class="item-desc">Submission đã duyệt, rule mới</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m14" class="demo-map-item">
        <span class="item-emoji">🔄</span>
        <div class="item-info">
          <div class="item-id">S-M14</div>
          <p class="item-title">Offline queue</p>
          <p class="item-desc">Submission chưa sync</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="mobile.html#m15" class="demo-map-item">
        <span class="item-emoji">🔑</span>
        <div class="item-info">
          <div class="item-id">S-M15</div>
          <p class="item-title">Quên / Đổi mật khẩu</p>
          <p class="item-desc">Reset qua email</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
    </div>
  </section>

  <!-- Dashboard section -->
  <section class="demo-map-section">
    <div class="section-header">
      <div class="section-emoji">🖥️</div>
      <div class="section-title">
        <h2>Web Dashboard <span class="count">10 màn hình</span></h2>
        <div class="section-desc">Next.js cho P2 Chuyên viên xử lý dữ liệu + P4 Lãnh đạo Viện DD</div>
      </div>
    </div>

    <div class="demo-map-grid">
      <a href="dashboard.html#d01" class="demo-map-item">
        <span class="item-emoji">🔐</span>
        <div class="item-info">
          <div class="item-id">S-D01</div>
          <p class="item-title">Đăng nhập</p>
          <p class="item-desc">Cognito + MFA optional</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="dashboard.html#d02" class="demo-map-item">
        <span class="item-emoji">📊</span>
        <div class="item-info">
          <div class="item-id">S-D02</div>
          <p class="item-title">Trang chủ Dashboard</p>
          <p class="item-desc">4 KPI + biểu đồ + heatmap</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="dashboard.html#d03" class="demo-map-item">
        <span class="item-emoji">📦</span>
        <div class="item-info">
          <div class="item-id">S-D03</div>
          <p class="item-title">Submissions list</p>
          <p class="item-desc">Filter + search + bulk action</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="dashboard.html#d04" class="demo-map-item">
        <span class="item-emoji">🔍</span>
        <div class="item-info">
          <div class="item-id">S-D04</div>
          <p class="item-title">Submission detail drawer</p>
          <p class="item-desc">4 ảnh + JSON editor + OCR</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="dashboard.html#d05" class="demo-map-item">
        <span class="item-emoji">✅</span>
        <div class="item-info">
          <div class="item-id">S-D05</div>
          <p class="item-title">Queue Review</p>
          <p class="item-desc">P2 review submission flag</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="dashboard.html#d06" class="demo-map-item">
        <span class="item-emoji">🗂️</span>
        <div class="item-info">
          <div class="item-id">S-D06</div>
          <p class="item-title">Bulk action drawer</p>
          <p class="item-desc">Duyệt batch + comment</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="dashboard.html#d07" class="demo-map-item">
        <span class="item-emoji">📈</span>
        <div class="item-info">
          <div class="item-id">S-D07</div>
          <p class="item-title">Reports</p>
          <p class="item-desc">Generate báo cáo Excel/PDF</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="dashboard.html#d08" class="demo-map-item">
        <span class="item-emoji">🗃️</span>
        <div class="item-info">
          <div class="item-id">S-D08</div>
          <p class="item-title">Research dataset</p>
          <p class="item-desc">Dataset đã anonymize</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="dashboard.html#d09" class="demo-map-item">
        <span class="item-emoji">👤</span>
        <div class="item-info">
          <div class="item-id">S-D09</div>
          <p class="item-title">User profile</p>
          <p class="item-desc">MFA, password, ngôn ngữ</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="dashboard.html#d10" class="demo-map-item">
        <span class="item-emoji">🔔</span>
        <div class="item-info">
          <div class="item-id">S-D10</div>
          <p class="item-title">Notifications (Web)</p>
          <p class="item-desc">Filter theo type</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
    </div>
  </section>

  <!-- CMS section -->
  <section class="demo-map-section">
    <div class="section-header">
      <div class="section-emoji">⚙️</div>
      <div class="section-title">
        <h2>Rule CMS <span class="count">9 màn hình</span></h2>
        <div class="section-desc">Next.js cho P3 Cán bộ rule pack + P3.5 Approver — biên soạn rule không cần code</div>
      </div>
    </div>

    <div class="demo-map-grid">
      <a href="cms.html#c01" class="demo-map-item">
        <span class="item-emoji">🔐</span>
        <div class="item-info">
          <div class="item-id">S-C01</div>
          <p class="item-title">Đăng nhập CMS</p>
          <p class="item-desc">Chung Cognito user pool</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="cms.html#c02" class="demo-map-item">
        <span class="item-emoji">🏠</span>
        <div class="item-info">
          <div class="item-id">S-C02</div>
          <p class="item-title">Home CMS</p>
          <p class="item-desc">Rule pack hiện hành + activity</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="cms.html#c03" class="demo-map-item">
        <span class="item-emoji">📋</span>
        <div class="item-info">
          <div class="item-id">S-C03</div>
          <p class="item-title">List rule</p>
          <p class="item-desc">Filter + search 23 rule</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="cms.html#c04" class="demo-map-item">
        <span class="item-emoji">✏️</span>
        <div class="item-info">
          <div class="item-id">S-C04</div>
          <p class="item-title">Rule editor</p>
          <p class="item-desc">Form-based predicate builder</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="cms.html#c05" class="demo-map-item">
        <span class="item-emoji">🧪</span>
        <div class="item-info">
          <div class="item-id">S-C05</div>
          <p class="item-title">Preview test set</p>
          <p class="item-desc">Áp rule trên 50 submission</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="cms.html#c06" class="demo-map-item">
        <span class="item-emoji">📤</span>
        <div class="item-info">
          <div class="item-id">S-C06</div>
          <p class="item-title">Submit for approval</p>
          <p class="item-desc">Modal chọn approver + changelog</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="cms.html#c07" class="demo-map-item">
        <span class="item-emoji">✅</span>
        <div class="item-info">
          <div class="item-id">S-C07</div>
          <p class="item-title">Approval queue</p>
          <p class="item-desc">P3.5 review diff + auto test</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="cms.html#c08" class="demo-map-item">
        <span class="item-emoji">📜</span>
        <div class="item-info">
          <div class="item-id">S-C08</div>
          <p class="item-title">Publish history</p>
          <p class="item-desc">Versions + 1-click rollback</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="cms.html#c09" class="demo-map-item">
        <span class="item-emoji">🔍</span>
        <div class="item-info">
          <div class="item-id">S-C09</div>
          <p class="item-title">Audit log viewer</p>
          <p class="item-desc">Filter ai/khi/action</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
    </div>
  </section>

  <!-- Flows section -->
  <section class="demo-map-section">
    <div class="section-header">
      <div class="section-emoji">🔀</div>
      <div class="section-title">
        <h2>User Flows <span class="count">3 flows nghiệp vụ</span></h2>
        <div class="section-desc">Storyboard chi tiết các luồng cốt lõi với mini-screen từng bước</div>
      </div>
    </div>

    <div class="demo-map-grid">
      <a href="flows.html#fm02" class="demo-map-item">
        <span class="item-emoji">📷</span>
        <div class="item-info">
          <div class="item-id">F-M02</div>
          <p class="item-title">Chụp 1 sản phẩm — Happy path</p>
          <p class="item-desc">P1 chụp 4 ảnh, edit JSON, submit (~75 giây)</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="flows.html#fd01" class="demo-map-item">
        <span class="item-emoji">👁️</span>
        <div class="item-info">
          <div class="item-id">F-D01</div>
          <p class="item-title">P2 review queue</p>
          <p class="item-desc">Sửa OCR mismatch, batch duyệt 23</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="flows.html#fc01" class="demo-map-item">
        <span class="item-emoji">⚙️</span>
        <div class="item-info">
          <div class="item-id">F-C01</div>
          <p class="item-title">P3 publish rule pack</p>
          <p class="item-desc">5 bước từ tạo rule → 4-eyes → publish</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
    </div>
  </section>

  <!-- Documentation section -->
  <section class="demo-map-section">
    <div class="section-header">
      <div class="section-emoji">📚</div>
      <div class="section-title">
        <h2>Tài liệu đặc tả <span class="count">15 sections + văn bản gốc</span></h2>
        <div class="section-desc">Bộ tài liệu SRS đầy đủ — em cập nhật mỗi sprint sau workshop với Viện DD</div>
      </div>
    </div>

    <div class="demo-map-grid">
      <a href="../docs/INDEX.md" class="demo-map-item">
        <span class="item-emoji">📑</span>
        <div class="item-info">
          <div class="item-id">INDEX</div>
          <p class="item-title">Mục lục tài liệu</p>
          <p class="item-desc">15 sections — status tracker</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="../docs/01_executive_summary.md" class="demo-map-item">
        <span class="item-emoji">🎯</span>
        <div class="item-info">
          <div class="item-id">SEC-01</div>
          <p class="item-title">Executive Summary</p>
          <p class="item-desc">5 phút cho lãnh đạo</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="../docs/02_scope.md" class="demo-map-item">
        <span class="item-emoji">📐</span>
        <div class="item-info">
          <div class="item-id">SEC-02</div>
          <p class="item-title">Scope</p>
          <p class="item-desc">Tier A+B, 3.300 sub/tháng</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="../docs/04_legal_framework.md" class="demo-map-item">
        <span class="item-emoji">⚖️</span>
        <div class="item-info">
          <div class="item-id">SEC-04</div>
          <p class="item-title">Khung pháp lý</p>
          <p class="item-desc">NĐ 37/2026 + TT 29/2023</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="../docs/06_rule_engine.md" class="demo-map-item">
        <span class="item-emoji">🛡️</span>
        <div class="item-info">
          <div class="item-id">SEC-06</div>
          <p class="item-title">Rule engine</p>
          <p class="item-desc">DSL + 23 rule v1</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="../docs/07_on_device_ai.md" class="demo-map-item">
        <span class="item-emoji">🧠</span>
        <div class="item-info">
          <div class="item-id">SEC-07</div>
          <p class="item-title">AI on-device</p>
          <p class="item-desc">Gemma 4 + ML Kit cross-check</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="../docs/08_architecture.md" class="demo-map-item">
        <span class="item-emoji">🏗️</span>
        <div class="item-info">
          <div class="item-id">SEC-08</div>
          <p class="item-title">Kiến trúc</p>
          <p class="item-desc">C4 + 10 ADR</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="../docs/11_roadmap.md" class="demo-map-item">
        <span class="item-emoji">🗓️</span>
        <div class="item-info">
          <div class="item-id">SEC-11</div>
          <p class="item-title">Roadmap 8 tuần</p>
          <p class="item-desc">5 GO/NO-GO gate</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
      <a href="../docs/13_cost_estimate.md" class="demo-map-item">
        <span class="item-emoji">💰</span>
        <div class="item-info">
          <div class="item-id">SEC-13</div>
          <p class="item-title">Cost estimate</p>
          <p class="item-desc">TCO 3 năm Base ~1,8 tỷ</p>
        </div>
        <span class="item-arrow">→</span>
      </a>
    </div>
  </section>

</div>

<footer>
  <div><strong>OmiScan</strong> — Demo prototype · Viện Dinh dưỡng Quốc gia × OmiGroup</div>
  <div class="footer-meta">v0.2 · 10/05/2026 · OmiGroup / Omi HealthTech · Apache 2.0</div>
  <div style="margin-top: 10px;">
    <a href="../docs/INDEX.md">📑 Tài liệu</a> ·
    <a href="../docs/legal_sources/37_2026_ND-CP.md">📜 NĐ 37/2026</a> ·
    <a href="../docs/legal_sources/29_2023_TT-BYT.md">📜 TT 29/2023</a>
  </div>
</footer>

<script src="assets/shared.js"></script>
</body>
</html>
