Spaces:

thucdangvan020999
/

gpt5-mini-v2

Running

File size: 57,716 Bytes

c9d5be0
1423d2c

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Vietnam Economic Growth Report — 2025 Dashboard</title>

  <!-- Icon library -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

  <style>
    /* ---------------------------
       CSS Variables & Base
       --------------------------- */
    :root{
      --bg:#0f1724;
      --card:#0b1320;
      --muted:#9aa6b2;
      --accent:#0ea5a4;
      --accent-2:#6ee7b7;
      --glass: rgba(255,255,255,0.03);
      --glass-2: rgba(255,255,255,0.02);
      --success: #10b981;
      --danger:#f97373;
      --max-width:1200px;
      --radius:12px;
      --ff-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color-scheme: dark;
    }
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--ff-sans);
      background:linear-gradient(180deg,#071025 0%, #071427 50%, #04121a 100%);
      color: #e6eef3;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      font-size:clamp(14px, 1.6vw, 16px);
      line-height:1.45;
      scroll-behavior:smooth;
      padding:24px;
    }

    /* ---------------------------
       Layout
       --------------------------- */
    .app {
      max-width: var(--max-width);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    header{
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:space-between;
      background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
      padding:14px;
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,0.03);
      box-shadow: 0 6px 18px rgba(3,8,15,0.6);
    }
    .brand{
      display:flex;
      gap:12px;
      align-items:center;
    }
    .logo{
      width:56px;height:56px;
      border-radius:10px;
      background:linear-gradient(135deg,var(--accent),#065f66);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:20px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    }
    .title{
      display:flex;flex-direction:column;
    }
    .title h1{margin:0;font-size:clamp(18px,2.4vw,22px)}
    .title p{margin:0;color:var(--muted);font-size:13px}

    .header-actions{display:flex;gap:8px;align-items:center;}
    .btn {
      background:var(--glass);
      border:1px solid rgba(255,255,255,0.04);
      color:inherit;
      padding:8px 12px;border-radius:10px;
      display:inline-flex;align-items:center;gap:8px;
      cursor:pointer;font-size:14px;
    }
    .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#00201f;border:none}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04)}
    .btn.small{padding:6px 8px;font-size:13px;border-radius:8px}
    .icon {opacity:0.9}

    /* ---------------------------
       Top progress bar
       --------------------------- */
    .reading-progress{
      position:fixed;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));
      transform-origin:left center;transform:scaleX(0); z-index:999;
      border-bottom:1px solid rgba(255,255,255,0.02)
    }

    /* ---------------------------
       Content Grid
       --------------------------- */
    .content {
      display:grid;
      grid-template-columns: 1fr;
      gap:16px;
    }

    /* TOC & Main container */
    .panel {
      display:grid;
      grid-template-columns: 260px 1fr;
      gap:16px;
    }
    .toc{
      position:sticky; top:86px;
      align-self:start;
      background:var(--glass);
      padding:12px;border-radius:12px;
      border:1px solid rgba(255,255,255,0.03);
      height:calc(100vh - 110px);
      overflow:auto;
    }
    .toc h3{margin:0 0 8px 0;font-size:14px}
    .toc ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
    .toc a{
      color:var(--muted);text-decoration:none;padding:8px;border-radius:8px;display:flex;align-items:center;gap:8px;
    }
    .toc a.active{background:linear-gradient(90deg, rgba(14,165,164,0.12), rgba(110,231,183,0.04));color:var(--accent-2)}
    .toc .search{
      display:flex;gap:8px;margin-bottom:8px;
    }
    .toc input{
      background:transparent;border:1px solid rgba(255,255,255,0.03);padding:8px;border-radius:8px;color:inherit;width:100%;
    }

    main.report{
      padding:14px;
      border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
      border:1px solid rgba(255,255,255,0.03);
    }
    section.card{
      background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
      border-radius:12px;padding:14px;margin-bottom:14px;
      border:1px solid rgba(255,255,255,0.02);
    }
    .kpi-grid{
      display:grid;
      grid-template-columns: repeat(2,1fr);
      gap:10px;
    }
    .kpi{
      background:var(--card);
      border-radius:10px;padding:12px;border:1px solid rgba(255,255,255,0.02);
      display:flex;align-items:center;justify-content:space-between;
      gap:12px;
    }
    .kpi .meta{display:flex;flex-direction:column}
    .kpi .value{font-weight:700;font-size:clamp(18px,2.4vw,22px)}
    .spark{
      width:100px;height:36px; display:block;
    }

    /* Charts layout */
    .charts{
      display:grid;gap:12px;
      grid-template-columns: 1fr;
    }
    .chart{
      padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
      border-radius:10px;border:1px solid rgba(255,255,255,0.02);
    }
    .chart h4{margin:0 0 8px 0;font-size:15px}
    .svg-wrap{width:100%;height:220px;aspect-ratio:4/1;display:block}

    /* Table */
    .table-wrap{overflow:auto;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
    table{width:100%;border-collapse:collapse;font-size:14px}
    th,td{padding:10px;text-align:left;border-bottom:1px dashed rgba(255,255,255,0.02)}
    th{cursor:pointer;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
    th.sorted.asc::after{content:" ▲";font-size:12px;color:var(--muted)}
    th.sorted.desc::after{content:" ▼";font-size:12px;color:var(--muted)}
    tr:hover td{background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01))}

    /* Collapsible */
    .collapsible{border-radius:10px;overflow:hidden;}
    .collapsible .summary{
      display:flex;align-items:center;justify-content:space-between;padding:10px;background:transparent;cursor:pointer;
    }
    .collapsible .body{padding:12px;border-top:1px solid rgba(255,255,255,0.02);display:none}

    /* references */
    .refs{font-size:13px;color:var(--muted);display:grid;gap:6px}
    .cite{display:flex;gap:8px;align-items:flex-start}

    /* Footer */
    footer{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;color:var(--muted);font-size:13px}

    /* Mobile-first adjustments */
    @media (min-width:768px){
      .app{padding:30px}
      .content{grid-template-columns:1fr}
      .panel{grid-template-columns: 280px 1fr}
      .charts{grid-template-columns: repeat(2,1fr)}
      .kpi-grid{grid-template-columns: repeat(4,1fr)}
    }
    @media (min-width:1024px){
      .panel{grid-template-columns: 300px 1fr}
      .charts{grid-template-columns: 1fr 1fr 1fr}
      .kpi-grid{grid-template-columns: repeat(4,1fr)}
    }

    /* container query example */
    .chart:where(.chart){
      container-type: inline-size;
    }
    @container (min-width:425px){
      .chart .svg-wrap{height:260px}
    }

    /* utility */
    .muted{color:var(--muted)}
    .tag{background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:8px;font-size:13px}
    .small{font-size:13px;color:var(--muted)}
    .flex{display:flex;gap:8px;align-items:center}
    .right{margin-left:auto}
    .hidden{display:none}

    /* highlight for search results */
    mark{background:linear-gradient(90deg,#ffe8b3,#ffefc9);color:#302900;padding:2px 4px;border-radius:4px}
  </style>
</head>
<body>
  <div class="reading-progress" id="readingProgress" aria-hidden="true"></div>

  <div class="app">
    <header>
      <div class="brand">
        <div class="logo" aria-hidden="true">VN</div>
        <div class="title">
          <h1>Vietnam Economic Growth Report — 2025</h1>
          <p class="muted">Interactive dashboard & insights • Updated 2025 Q2</p>
        </div>
      </div>

      <div class="header-actions">
        <button class="btn small ghost" id="toggleTheme" title="Toggle theme"><i class="fa-solid fa-circle-half-stroke icon"></i> Theme</button>
        <button class="btn small" id="copySummary" title="Copy Executive Summary"><i class="fa-solid fa-copy icon"></i> Copy Summary</button>
        <button class="btn primary" id="exportCSV" title="Export dataset as CSV"><i class="fa-solid fa-download icon"></i> Export CSV</button>
        <button class="btn ghost" id="printBtn" title="Print / Export PDF"><i class="fa-solid fa-print icon"></i> Print</button>
      </div>
    </header>

    <div class="content">
      <div class="panel">
        <nav class="toc" aria-label="Table of contents">
          <div class="search">
            <input id="globalSearch" placeholder="Search report..." aria-label="Search report" />
            <button class="btn small" id="clearSearch" title="Clear search"><i class="fa-solid fa-xmark"></i></button>
          </div>
          <h3>Contents</h3>
          <ul id="tocList">
            <li><a href="#executive" data-target="executive"><i class="fa-solid fa-star"></i> Executive Summary</a></li>
            <li><a href="#methodology" data-target="methodology"><i class="fa-solid fa-wrench"></i> Methodology</a></li>
            <li><a href="#indicators" data-target="indicators"><i class="fa-solid fa-chart-line"></i> Key Indicators</a></li>
            <li><a href="#sectoral" data-target="sectoral"><i class="fa-solid fa-industry"></i> Sectoral Analysis</a></li>
            <li><a href="#retail" data-target="retail"><i class="fa-solid fa-cart-shopping"></i> Retail Performance</a></li>
            <li><a href="#challenges" data-target="challenges"><i class="fa-solid fa-triangle-exclamation"></i> Challenges & Risks</a></li>
            <li><a href="#historical" data-target="historical"><i class="fa-solid fa-calendar-lines-pen"></i> Historical Comparison</a></li>
            <li><a href="#outlook" data-target="outlook"><i class="fa-solid fa-eye"></i> Outlook & Projections</a></li>
            <li><a href="#references" data-target="references"><i class="fa-solid fa-book"></i> Sources & References</a></li>
            <li><a href="#appendix" data-target="appendix"><i class="fa-solid fa-table-list"></i> Appendix (Data)</a></li>
          </ul>

          <div style="margin-top:12px">
            <div class="tag">Last viewed: <span id="lastViewed" class="small muted">—</span></div>
          </div>
        </nav>

        <main class="report" id="report">
          <!-- Executive Summary -->
          <section id="executive" class="card" tabindex="0">
            <div style="display:flex;gap:12px;align-items:flex-start">
              <div>
                <h2 style="margin:0">Executive Summary</h2>
                <p class="muted small" style="margin-top:4px">Compact overview of Vietnam's economic performance in 2025</p>
              </div>
              <div class="right small muted">Updated: Q2 2025</div>
            </div>

            <div style="display:flex;flex-direction:column;gap:8px;margin-top:10px">
              <p id="execSummaryText">
                Vietnam's economy shows robust growth in 2025. GDP expanded 7.96% year-on-year in Q2 and 7.52% in H1, the strongest mid-year performance since 2011. Growth is led by services and manufacturing, with strong FDI inflows, controlled inflation, and low unemployment supporting domestic demand despite external trade tensions and tariff pressures.
              </p>

              <div style="display:flex;gap:8px;flex-wrap:wrap">
                <span class="tag">GDP H1: 7.52%</span>
                <span class="tag">Q2 YoY: 7.96%</span>
                <span class="tag">Inflation (Jun): 3.57%</span>
                <span class="tag">Unemployment Q1: 2.20%</span>
              </div>

              <div class="collapsible" id="execNotes">
                <div class="summary">
                  <div class="muted">Summary & Quick Actions</div>
                  <div class="flex">
                    <button class="btn small" id="copyExec"><i class="fa-solid fa-copy"></i> Copy</button>
                    <button class="btn small" id="exportExecJSON"><i class="fa-solid fa-file-export"></i> Export JSON</button>
                    <button class="btn small" data-toggle="exec" id="toggleExecDetails"><i class="fa-solid fa-chevron-down"></i></button>
                  </div>
                </div>
                <div class="body" id="execBody">
                  <p class="muted small">Key drivers include strong FDI inflows (US$21.51bn in H1), resilient services and manufacturing activity, and supportive fiscal measures. Risks remain from global trade tensions and policy uncertainties abroad.</p>
                  <div style="display:flex;gap:8px;margin-top:8px">
                    <button class="btn small ghost" id="focusGDP">Highlight GDP</button>
                    <button class="btn small ghost" id="focusFDI">Highlight FDI</button>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <!-- Methodology -->
          <section id="methodology" class="card" tabindex="0">
            <h3>Methodology</h3>
            <p class="muted small">This dashboard consolidates official statistics (General Statistics Office), international institution forecasts (World Bank, IMF, ADB), and third-party aggregators. Charts are derived from extracted time series and reported quarter/year figures. Projections represent cited sources and government targets.</p>

            <div style="display:flex;gap:8px;margin-top:10px;flex-wrap:wrap">
              <div class="tag">Sources cross-checked</div>
              <div class="tag">Data normalized & rounded</div>
              <div class="tag">Interactive — explore filters</div>
            </div>
          </section>

          <!-- Key Indicators -->
          <section id="indicators" class="card" tabindex="0">
            <h3>Key Economic Indicators — 2025</h3>

            <div class="kpi-grid" style="margin-top:12px">
              <div class="kpi">
                <div class="meta">
                  <div class="small muted">GDP Q2 (YoY)</div>
                  <div class="value">7.96%</div>
                  <div class="small muted">H1: 7.52% • Q1: 6.9%</div>
                </div>
                <svg class="spark" id="sparkGDP" viewBox="0 0 100 36" preserveAspectRatio="none"></svg>
              </div>

              <div class="kpi">
                <div class="meta">
                  <div class="small muted">Inflation (Jun)</div>
                  <div class="value">3.57%</div>
                  <div class="small muted">May: 3.24%</div>
                </div>
                <svg class="spark" id="sparkInflation" viewBox="0 0 100 36" preserveAspectRatio="none"></svg>
              </div>

              <div class="kpi">
                <div class="meta">
                  <div class="small muted">Unemployment (Q1)</div>
                  <div class="value">2.20%</div>
                  <div class="small muted">Q4 2024: 2.22%</div>
                </div>
                <svg class="spark" id="sparkUnemp" viewBox="0 0 100 36" preserveAspectRatio="none"></svg>
              </div>

              <div class="kpi">
                <div class="meta">
                  <div class="small muted">FDI H1 (US$)</div>
                  <div class="value">21.51B</div>
                  <div class="small muted">Registered (5m): $18.4B</div>
                </div>
                <svg class="spark" id="sparkFDI" viewBox="0 0 100 36" preserveAspectRatio="none"></svg>
              </div>
            </div>

            <div class="charts" style="margin-top:12px">
              <div class="chart" aria-hidden="false">
                <h4>GDP Historical (2020–2025) — YoY</h4>
                <div class="svg-wrap" id="chartGDP"></div>
                <div class="small muted" style="margin-top:8px">2025 Q1–Q2 performance vs historical trend</div>
              </div>

              <div class="chart">
                <h4>2025 Forecasts vs Government Target</h4>
                <div class="svg-wrap" id="chartForecast"></div>
                <div class="small muted" style="margin-top:8px">Comparative outlook (World Bank, ADB, IMF, Government)</div>
              </div>

              <div class="chart">
                <h4>FDI Inflows — Recent Trend</h4>
                <div class="svg-wrap" id="chartFDI"></div>
                <div class="small muted" style="margin-top:8px">First 5 months registered & disbursed capital</div>
              </div>
            </div>

            <div style="display:flex;gap:8px;margin-top:12px;align-items:center">
              <div class="tag">Interactive charts — hover for details</div>
              <div class="small muted right">Tip: Click forecast bars to filter appendix table</div>
            </div>
          </section>

          <!-- Sectoral Analysis -->
          <section id="sectoral" class="card" tabindex="0">
            <h3>Sectoral Analysis</h3>
            <p class="muted small">Services and manufacturing are the primary growth engines. Export-oriented industries remain crucial while the banking sector shows earnings momentum.</p>

            <div style="display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px">
              <div class="chart">
                <h4>Sector Contribution (Simplified)</h4>
                <div class="svg-wrap" id="chartSectors"></div>
                <div class="small muted" style="margin-top:8px">Proportional contribution to GDP growth (illustrative)</div>
              </div>

              <div class="chart">
                <h4>Banking Sector — Earnings & Credit Growth (2025)</h4>
                <div class="svg-wrap" id="chartBanking"></div>
                <div class="small muted" style="margin-top:8px">Projected 17% earnings increase driven by ~15% credit growth</div>
              </div>
            </div>
          </section>

          <!-- Retail -->
          <section id="retail" class="card" tabindex="0">
            <h3>Retail Performance</h3>
            <p class="muted small">Retail sales reached 1.708 quadrillion VND (~US$66.83B) in Q1 2025 — a 9.9% YoY increase.</p>

            <div class="chart" style="margin-top:12px">
              <h4>Retail Sales (Q1 2025) Breakdown</h4>
              <div style="display:flex;gap:12px;align-items:center">
                <div style="flex:1">
                  <svg class="svg-wrap" id="chartRetail"></svg>
                </div>
                <div style="width:220px">
                  <div class="small muted">Top drivers</div>
                  <ul style="margin:8px 0 0 0;padding:0;list-style:none;display:grid;gap:6px">
                    <li><strong>Domestic consumption</strong> — robust demand & low unemployment</li>
                    <li><strong>E-commerce</strong> — accelerated growth</li>
                    <li><strong>Services</strong> — tourism & hospitality improvements</li>
                  </ul>
                  <div style="margin-top:10px" class="small muted">Retail figure sourced from report and converted to USD at quoted rate.</div>
                </div>
              </div>
            </div>
          </section>

          <!-- Challenges -->
          <section id="challenges" class="card" tabindex="0">
            <h3>Challenges & Risk Factors</h3>
            <ul class="muted" style="margin-top:8px">
              <li>Global trade tensions & US tariffs impacting exports</li>
              <li>Geopolitical instability increasing uncertainty</li>
              <li>Potential overdependence on FDI — inflationary pressures</li>
              <li>Macroeconomic trade-offs: growth vs stability and public debt</li>
            </ul>

            <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap">
              <button class="btn small ghost" id="riskMitigate">View Risk Mitigation Strategies</button>
              <button class="btn small" id="downloadPolicy">Download Policy Note (sample)</button>
            </div>
            <div class="collapsible" id="mitigation" style="margin-top:8px">
              <div class="summary">
                <div class="muted">Government mitigation measures</div>
                <div class="right small muted">Click to expand</div>
              </div>
              <div class="body">
                <ol class="muted small">
                  <li>Diversify export markets</li>
                  <li>Strengthen domestic demand & social spending buffers</li>
                  <li>Enhance monetary resilience & fiscal space</li>
                  <li>Attract quality FDI while reducing vulnerability</li>
                </ol>
              </div>
            </div>
          </section>

          <!-- Historical Comparison -->
          <section id="historical" class="card" tabindex="0">
            <h3>Historical Comparison</h3>
            <p class="muted small">Annual and quarterly context for 2020–2025.</p>
            <div style="display:flex;gap:12px;margin-top:10px;flex-direction:column">
              <div class="table-wrap">
                <table id="historyTable" aria-label="Historical GDP table">
                  <thead>
                    <tr>
                      <th data-key="year">Year / Quarter</th>
                      <th data-key="gdp">GDP YoY (%)</th>
                      <th data-key="note">Note</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr><td>2020 Q1</td><td>3.21</td><td class="small muted">Pandemic impact</td></tr>
                    <tr><td>2021 Q1</td><td>4.85</td><td class="small muted"></td></tr>
                    <tr><td>2022 Q1</td><td>5.42</td><td class="small muted"></td></tr>
                    <tr><td>2023 Q1</td><td>3.46</td><td class="small muted"></td></tr>
                    <tr><td>2024 Q1</td><td>5.98</td><td class="small muted"></td></tr>
                    <tr><td>2025 Q1</td><td>6.93</td><td class="small muted"></td></tr>
                    <tr><td>Q2 2025</td><td>7.96</td><td class="small muted">Reported</td></tr>
                  </tbody>
                </table>
              </div>

              <div class="small muted">2024 annual growth: 7.1% • Government target 2025: 8.3–8.5%</div>
            </div>
          </section>

          <!-- Outlook -->
          <section id="outlook" class="card" tabindex="0">
            <h3>Economic Outlook & Projections</h3>
            <p class="muted small">Near-term prospects remain solid but face external headwinds. Government targets are ambitious relative to international institutions.</p>

            <div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap">
              <div class="tag">Support: FDI, low unemployment</div>
              <div class="tag">Risks: trade & tariffs</div>
              <div class="tag">Policy: fiscal & monetary buffers</div>
            </div>
          </section>

          <!-- References -->
          <section id="references" class="card" tabindex="0">
            <h3>Sources & References</h3>
            <div class="refs" style="margin-top:8px">
              <div class="cite"><i class="fa-solid fa-link icon"></i><a href="https://tradingeconomics.com/vietnam/gdp-growth-annual" target="_blank" rel="noopener">Trading Economics — Vietnam GDP Annual Growth Rate</a></div>
              <div class="cite"><i class="fa-solid fa-link icon"></i><a href="https://www.imf.org/en/Countries/VNM" target="_blank" rel="noopener">International Monetary Fund — Vietnam</a></div>
              <div class="cite"><i class="fa-solid fa-link icon"></i><a href="https://www.adb.org/countries/viet-nam/main" target="_blank" rel="noopener">Asian Development Bank — Vietnam</a></div>
              <div class="cite"><i class="fa-solid fa-link icon"></i><a href="https://www.gso.gov.vn/en/" target="_blank" rel="noopener">General Statistics Office — Vietnam</a></div>
              <div class="cite"><i class="fa-solid fa-link icon"></i><a href="https://vneconomictimes.com/" target="_blank" rel="noopener">Vietnam Economic Times</a></div>
              <div class="cite"><i class="fa-solid fa-link icon"></i><a href="https://vietnam-briefing.com/" target="_blank" rel="noopener">Vietnam Briefing</a></div>
            </div>
          </section>

          <!-- Appendix -->
          <section id="appendix" class="card" tabindex="0">
            <h3>Appendix — Dataset & Interactive Table</h3>
            <p class="muted small">Filterable, sortable dataset extracted from report. Click headers to sort. Use filter to focus on particular metrics.</p>

            <div style="display:flex;gap:8px;margin-top:10px;align-items:center">
              <label class="small muted">Filter:</label>
              <select id="datasetFilter" class="small">
                <option value="all">All</option>
                <option value="gdp">GDP</option>
                <option value="inflation">Inflation</option>
                <option value="fdi">FDI</option>
                <option value="retail">Retail</option>
              </select>
              <button class="btn small" id="downloadCSV">Download CSV</button>
              <button class="btn small ghost" id="copyJSON">Copy JSON</button>
              <div style="margin-left:auto" class="small muted">Saved view: <span id="savedView">none</span></div>
            </div>

            <div class="table-wrap" style="margin-top:10px">
              <table id="dataTable">
                <thead>
                  <tr>
                    <th data-key="metric">Metric</th>
                    <th data-key="period">Period</th>
                    <th data-key="value">Value</th>
                    <th data-key="unit">Unit</th>
                    <th data-key="note">Note</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- Rows populated by JS -->
                </tbody>
              </table>
            </div>

            <div style="display:flex;gap:8px;margin-top:8px">
              <button class="btn small" id="saveView">Save View</button>
              <button class="btn small ghost" id="resetView">Reset</button>
            </div>
          </section>

          <footer>
            <div class="muted small">Vietnam Economic Growth Report • Dashboard • 2025</div>
            <div class="muted small">Built with HTML, CSS & Vanilla JS — Interactive • Exportable</div>
          </footer>
        </main>
      </div>
    </div>
  </div>

  <script>
    /* ============================
       Data extracted from report
       ============================ */
    const dataset = [
      { metric: 'GDP YoY', period: '2020 Q1', value: 3.21, unit: '%', tag:'gdp', note:'Pandemic period' },
      { metric: 'GDP YoY', period: '2021 Q1', value: 4.85, unit: '%', tag:'gdp', note:'' },
      { metric: 'GDP YoY', period: '2022 Q1', value: 5.42, unit: '%', tag:'gdp', note:'' },
      { metric: 'GDP YoY', period: '2023 Q1', value: 3.46, unit: '%', tag:'gdp', note:'' },
      { metric: 'GDP YoY', period: '2024 Q1', value: 5.98, unit: '%', tag:'gdp', note:'' },
      { metric: 'GDP YoY', period: '2025 Q1', value: 6.93, unit: '%', tag:'gdp', note:'' },
      { metric: 'GDP YoY', period: '2025 Q2', value: 7.96, unit: '%', tag:'gdp', note:'Reported' },
      { metric: 'GDP H1', period: '2025 H1', value: 7.52, unit: '%', tag:'gdp', note:'Highest since 2011' },

      { metric: 'Inflation', period: 'May 2025', value: 3.24, unit: '%', tag:'inflation', note:'' },
      { metric: 'Inflation', period: 'June 2025', value: 3.57, unit: '%', tag:'inflation', note:'Highest so far in 2025' },
      { metric: 'Inflation Forecast (IMF)', period: '2025', value: 2.9, unit: '%', tag:'inflation', note:'IMF forecast' },
      { metric: 'Inflation Forecast (ADB)', period: '2025', value: 4.0, unit: '%', tag:'inflation', note:'ADB forecast' },

      { metric: 'Unemployment', period: 'Q1 2025', value: 2.20, unit:'%', tag:'unemployment', note:'Down from 2.22' },

      { metric: 'FDI Registered (5m)', period: 'First 5 months 2025', value: 18.4, unit:'B USD', tag:'fdi', note:'+51% YoY' },
      { metric: 'FDI Disbursed (5m)', period: 'First 5 months 2025', value: 8.9, unit:'B USD', tag:'fdi', note:'' },
      { metric: 'FDI Total H1', period: '2025 H1', value: 21.51, unit:'B USD', tag:'fdi', note:'+32.6% YoY' },

      { metric: 'Retail Sales', period: 'Q1 2025', value: 1708, unit:'trillion VND', tag:'retail', note:'1.708 quadrillion VND (US$66.83B) • +9.9% YoY' },

      { metric: 'Forecast (World Bank)', period: '2025', value: 5.8, unit:'%', tag:'forecast', note:'' },
      { metric: 'Forecast (ADB)', period: '2025', value: 6.6, unit:'%', tag:'forecast', note:'' },
      { metric: 'Forecast (IMF)', period: '2025', value: 5.2, unit:'%', tag:'forecast', note:'' },
      { metric: 'Government Target', period: '2025', value: 8.4, unit:'%', tag:'forecast', note:'Range 8.3–8.5' },

      { metric: 'Banking Earnings (proj)', period: '2025', value: 17, unit:'%', tag:'banking', note:'Earnings increase' },
      { metric: 'Credit Growth (proj)', period: '2025', value: 15, unit:'%', tag:'banking', note:'System-wide credit' },
    ];

    /* Utilities */
    function el(sel){ return document.querySelector(sel) }
    function els(sel){ return Array.from(document.querySelectorAll(sel)) }

    // Save last viewed section in localStorage
    const lastViewedEl = el('#lastViewed');
    const savedSection = localStorage.getItem('lastSection');
    lastViewedEl.textContent = savedSection || '—';

    // Reading progress
    const readingProgress = el('#readingProgress');
    document.addEventListener('scroll', () => {
      const total = document.documentElement.scrollHeight - window.innerHeight;
      const pct = total > 0 ? (window.scrollY / total) : 0;
      readingProgress.style.transform = `scaleX(${Math.min(1, pct)})`;
    }, { passive:true });

    // TOC active link via IntersectionObserver
    const tocLinks = els('.toc a');
    const sections = tocLinks.map(a => document.getElementById(a.dataset.target));
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        const id = entry.target.id;
        const link = el(`.toc a[data-target="${id}"]`);
        if(entry.isIntersecting){
          tocLinks.forEach(l=>l.classList.remove('active'));
          link && link.classList.add('active');
          localStorage.setItem('lastSection', id);
          lastViewedEl.textContent = id;
        }
      });
    }, { root: null, rootMargin: '0px 0px -60% 0px', threshold: [0,0.25,0.5,0.9] });
    sections.forEach(s=>s && observer.observe(s));

    // Smooth scroll when clicking TOC — also close mobile TOC in future
    tocLinks.forEach(a=>{
      a.addEventListener('click', (e)=>{
        e.preventDefault();
        const target = document.getElementById(a.dataset.target);
        target && target.scrollIntoView({behavior:'smooth', block:'start'});
      });
    });

    // Collapsibles
    els('.collapsible').forEach(block=>{
      const summary = block.querySelector('.summary');
      const body = block.querySelector('.body');
      summary.addEventListener('click', ()=>{
        const open = body.style.display === 'block';
        body.style.display = open ? 'none' : 'block';
        const iconBtn = summary.querySelector('button[data-toggle]') || summary.querySelector('i.fa-chevron-down');
        // toggle icon if exists
        const che = summary.querySelector('i.fa-chevron-down, i.fa-chevron-up');
        if(che) che.classList.toggle('fa-chevron-down');
        if(che) che.classList.toggle('fa-chevron-up');
      });
    });

    // Small helper to draw sparklines
    function drawSpark(svgEl, points, color='rgba(110,231,183,0.9)'){
      const svg = svgEl;
      while(svg.firstChild) svg.removeChild(svg.firstChild);
      const w = 100, h = 36;
      // normalize points
      const max = Math.max(...points), min = Math.min(...points);
      const range = max - min || 1;
      const path = [];
      points.forEach((p,i)=>{
        const x = (i/(points.length-1))*w;
        const y = h - ((p - min)/range)*h;
        path.push(`${i===0?'M':'L'} ${x.toFixed(2)} ${y.toFixed(2)}`);
      });
      const p = document.createElementNS('http://www.w3.org/2000/svg','path');
      p.setAttribute('d', path.join(' '));
      p.setAttribute('stroke', color);
      p.setAttribute('fill','none');
      p.setAttribute('stroke-width','2');
      p.setAttribute('stroke-linejoin','round');
      p.setAttribute('stroke-linecap','round');
      svg.appendChild(p);
      // end point circle
      const last = points[points.length-1];
      const x = w; const y = h - ((last - min)/range)*h;
      const c = document.createElementNS('http://www.w3.org/2000/svg','circle');
      c.setAttribute('cx', x); c.setAttribute('cy', y);
      c.setAttribute('r', 2.6); c.setAttribute('fill', color);
      svg.appendChild(c);
    }

    // Draw sparklines using dataset
    drawSpark(el('#sparkGDP'), [3.21,4.85,5.42,3.46,5.98,6.93,7.96], 'rgba(14,165,164,0.95)');
    drawSpark(el('#sparkInflation'), [2.5,2.9,3.1,3.24,3.57], '#f59e0b');
    drawSpark(el('#sparkUnemp'), [2.7,2.5,2.3,2.22,2.20], '#60a5fa');
    drawSpark(el('#sparkFDI'), [10,12,14,18.4,21.51], '#a78bfa');

    /* ============================
       SVG Chart Helpers
       ============================ */
    function createSVG(width=800, height=260){
      const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
      svg.setAttribute('width','100%');
      svg.setAttribute('viewBox',`0 0 ${width} ${height}`);
      svg.setAttribute('preserveAspectRatio','xMidYMid meet');
      svg.style.display = 'block';
      return svg;
    }

    function drawLineChart(containerId, dataPoints, labels, options={}){
      const container = el('#' + containerId);
      const svg = createSVG(800,260);
      container.innerHTML = '';
      container.appendChild(svg);
      const width = 800, height = 260, pad = 40;
      const max = Math.max(...dataPoints), min = Math.min(...dataPoints);
      const range = (max - min) || 1;
      // axes gridlines
      const g = document.createElementNS('http://www.w3.org/2000/svg','g');
      g.setAttribute('class','grid');
      for(let i=0;i<=4;i++){
        const y = pad + (i*(height - pad*2)/4);
        const line = document.createElementNS('http://www.w3.org/2000/svg','line');
        line.setAttribute('x1', pad); line.setAttribute('x2', width - pad);
        line.setAttribute('y1', y); line.setAttribute('y2', y);
        line.setAttribute('stroke','rgba(255,255,255,0.02)');
        line.setAttribute('stroke-width','1');
        svg.appendChild(line);
        const label = document.createElementNS('http://www.w3.org/2000/svg','text');
        const val = (max - (i*(range/4))).toFixed(2);
        label.setAttribute('x', 8);
        label.setAttribute('y', y+4);
        label.setAttribute('fill','rgba(255,255,255,0.35)');
        label.setAttribute('font-size','11');
        label.textContent = val;
        svg.appendChild(label);
      }
      // path
      const path = [];
      dataPoints.forEach((v,i)=>{
        const x = pad + (i/(dataPoints.length-1))*(width - pad*2);
        const y = pad + ((max - v)/range)*(height - pad*2);
        path.push(`${i===0?'M':'L'} ${x} ${y}`);
      });
      const p = document.createElementNS('http://www.w3.org/2000/svg','path');
      p.setAttribute('d', path.join(' '));
      p.setAttribute('fill','none');
      p.setAttribute('stroke', options.color || 'url(#gradLine)');
      p.setAttribute('stroke-width','3');
      p.setAttribute('stroke-linecap','round');
      p.setAttribute('stroke-linejoin','round');
      svg.appendChild(p);

      // points & tooltips
      dataPoints.forEach((v,i)=>{
        const x = pad + (i/(dataPoints.length-1))*(width - pad*2);
        const y = pad + ((max - v)/range)*(height - pad*2);
        const c = document.createElementNS('http://www.w3.org/2000/svg','circle');
        c.setAttribute('cx', x); c.setAttribute('cy', y);
        c.setAttribute('r', 4);
        c.setAttribute('fill', options.pointColor || 'rgba(14,165,164,0.95)');
        c.style.cursor = 'pointer';
        svg.appendChild(c);
        c.addEventListener('mouseenter', (ev)=>{
          showTooltip(ev.clientX, ev.clientY, `${labels[i]} — ${v}${options.unit||''}`);
        });
        c.addEventListener('mouseleave', hideTooltip);
      });

      // x labels
      labels.forEach((lab,i)=>{
        const x = pad + (i/(labels.length-1))*(width - pad*2);
        const t = document.createElementNS('http://www.w3.org/2000/svg','text');
        t.setAttribute('x', x);
        t.setAttribute('y', height - 8);
        t.setAttribute('text-anchor','middle');
        t.setAttribute('fill','rgba(255,255,255,0.4)');
        t.setAttribute('font-size','11');
        t.textContent = lab;
        svg.appendChild(t);
      });
    }

    function drawBarChart(containerId, items, options={}){
      const container = el('#' + containerId);
      const svg = createSVG(800,260);
      container.innerHTML = '';
      container.appendChild(svg);
      const width = 800, height = 260, pad = 40;
      const max = Math.max(...items.map(i=>i.value));
      const barW = (width - pad*2) / items.length;
      items.forEach((it, idx)=>{
        const x = pad + idx * barW + barW*0.12;
        const h = ((it.value/max) * (height - pad*2));
        const y = height - pad - h;
        const rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
        rect.setAttribute('x', x);
        rect.setAttribute('y', y);
        rect.setAttribute('width', Math.max(12, barW*0.76));
        rect.setAttribute('height', h);
        rect.setAttribute('fill', options.color || 'rgba(14,165,164,0.9)');
        rect.setAttribute('rx','6');
        rect.style.cursor = 'pointer';
        svg.appendChild(rect);

        rect.addEventListener('mouseenter', (ev)=>{
          showTooltip(ev.clientX, ev.clientY, `${it.label}: ${it.value}${it.unit||''} ${it.note?('• ' + it.note):''}`);
        });
        rect.addEventListener('mouseleave', hideTooltip);
        rect.addEventListener('click', ()=> {
          // filtering action: filter appendix table by forecast if clicked on forecasts
          if(it.filterTag){
            document.getElementById('datasetFilter').value = it.filterTag;
            populateTable();
            // scroll to appendix
            document.getElementById('appendix').scrollIntoView({behavior:'smooth'});
          }
        });

        const txt = document.createElementNS('http://www.w3.org/2000/svg','text');
        txt.setAttribute('x', x + Math.max(12, barW*0.76)/2);
        txt.setAttribute('y', height - pad + 16);
        txt.setAttribute('text-anchor','middle');
        txt.setAttribute('fill','rgba(255,255,255,0.5)');
        txt.setAttribute('font-size','12');
        txt.textContent = it.label;
        svg.appendChild(txt);
      });

      // add baseline labels
      const baseline = document.createElementNS('http://www.w3.org/2000/svg','text');
      baseline.setAttribute('x', pad);
      baseline.setAttribute('y', 18);
      baseline.setAttribute('fill','rgba(255,255,255,0.4)');
      baseline.setAttribute('font-size','11');
      baseline.textContent = options.title||'';
      svg.appendChild(baseline);
    }

    function drawDonut(containerId, parts){
      const container = el('#' + containerId);
      const svg = createSVG(420,260);
      container.innerHTML = '';
      container.appendChild(svg);
      const cx = 200, cy = 120, r = 70;
      const total = parts.reduce((s,p)=>s+p.value,0);
      let start = -Math.PI/2;
      parts.forEach((p, i)=>{
        const slice = (p.value/total) * Math.PI*2;
        const end = start + slice;
        const x1 = cx + r*Math.cos(start);
        const y1 = cy + r*Math.sin(start);
        const x2 = cx + r*Math.cos(end);
        const y2 = cy + r*Math.sin(end);
        const large = slice > Math.PI ? 1 : 0;
        const path = document.createElementNS('http://www.w3.org/2000/svg','path');
        const d = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
        path.setAttribute('d', d);
        path.setAttribute('fill', p.color);
        path.style.cursor = 'pointer';
        svg.appendChild(path);
        path.addEventListener('mouseenter', (e)=> showTooltip(e.clientX,e.clientY, `${p.label}: ${p.value}%`));
        path.addEventListener('mouseleave', hideTooltip);
        start = end;
      });
      const center = document.createElementNS('http://www.w3.org/2000/svg','circle');
      center.setAttribute('cx',cx); center.setAttribute('cy',cy); center.setAttribute('r',40);
      center.setAttribute('fill', 'rgba(7,10,15,0.9)');
      svg.appendChild(center);

      // legend
      parts.forEach((p,i)=>{
        const y = 20 + i*20;
        const rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
        rect.setAttribute('x', 340); rect.setAttribute('y', y-10); rect.setAttribute('width', 12); rect.setAttribute('height', 12);
        rect.setAttribute('fill', p.color); svg.appendChild(rect);
        const t = document.createElementNS('http://www.w3.org/2000/svg','text');
        t.setAttribute('x', 360); t.setAttribute('y', y); t.setAttribute('fill','rgba(255,255,255,0.8)');
        t.setAttribute('font-size','12'); t.textContent = `${p.label} • ${p.value}%`;
        svg.appendChild(t);
      });
    }

    // Tooltip layer
    let tooltip;
    function ensureTooltip(){
      if(tooltip) return;
      tooltip = document.createElement('div');
      tooltip.style.position = 'fixed';
      tooltip.style.zIndex = 9999;
      tooltip.style.background = 'rgba(0,0,0,0.8)';
      tooltip.style.padding = '8px 10px';
      tooltip.style.borderRadius = '8px';
      tooltip.style.color = '#fff';
      tooltip.style.fontSize = '13px';
      tooltip.style.pointerEvents = 'none';
      tooltip.style.boxShadow = '0 8px 20px rgba(0,0,0,0.6)';
      document.body.appendChild(tooltip);
    }
    function showTooltip(x,y,html){
      ensureTooltip();
      tooltip.innerHTML = html;
      const w = tooltip.offsetWidth;
      tooltip.style.left = (x + 12) + 'px';
      tooltip.style.top = (y + 12) + 'px';
      tooltip.style.opacity = '1';
      tooltip.style.transform = 'translateY(0)';
    }
    function hideTooltip(){
      if(tooltip) tooltip.style.opacity = '0';
    }

    /* Build charts */
    // GDP historical 2020-2025
    const gdpLabels = ['2020 Q1','2021 Q1','2022 Q1','2023 Q1','2024 Q1','2025 Q1','2025 Q2'];
    const gdpPoints = [3.21,4.85,5.42,3.46,5.98,6.93,7.96];
    drawLineChart('chartGDP', gdpPoints, gdpLabels, {unit:' %', color:'rgba(14,165,164,0.95)', pointColor:'rgba(14,165,164,0.95)'});

    // Forecast bar chart
    const forecastItems = [
      { label:'World Bank', value:5.8, unit:'%', color:'#60a5fa', note:'WB' , filterTag:'forecast'},
      { label:'ADB', value:6.6, unit:'%', color:'#a78bfa', note:'ADB' , filterTag:'forecast' },
      { label:'IMF', value:5.2, unit:'%', color:'#f59e0b', note:'IMF' , filterTag:'forecast' },
      { label:'Government', value:8.4, unit:'%', color:'#10b981', note:'Target 8.3–8.5', filterTag:'forecast' }
    ];
    drawBarChart('chartForecast', forecastItems, { title:'Forecasts' });

    // FDI trend (simple bars)
    const fdiItems = [
      { label:'Registered (5m)', value:18.4, unit:'B USD', color:'#06b6d4', note:'+51%YoY' },
      { label:'Disbursed (5m)', value:8.9, unit:'B USD', color:'#7c3aed', note:'' },
      { label:'Total H1', value:21.51, unit:'B USD', color:'#06b6d4', note:'+32.6%YoY' },
    ];
    drawBarChart('chartFDI', fdiItems);

    // Sectors donut
    const sectorsSimplified = [
      { label:'Services', value:45, color:'#06b6d4' },
      { label:'Manufacturing', value:30, color:'#10b981' },
      { label:'Exports (goods)', value:15, color:'#a78bfa' },
      { label:'Agriculture & others', value:10, color:'#f59e0b' }
    ];
    drawDonut('chartSectors', sectorsSimplified);

    // Banking chart (simple bar)
    const bankingItems = [
      { label:'Earnings proj', value:17, unit:'%', color:'#06b6d4' },
      { label:'Credit growth', value:15, unit:'%', color:'#10b981' }
    ];
    drawBarChart('chartBanking', bankingItems);

    // Retail donut / radial
    (function drawRetail(){
      const container = el('#chartRetail');
      const svg = createSVG(420,260);
      svg.setAttribute('viewBox','0 0 420 260');
      container.innerHTML = '';
      container.appendChild(svg);
      // dummy segmentation
      const parts = [
        {label:'Consumption', value:55, color:'#06b6d4'},
        {label:'E-commerce', value:20, color:'#a78bfa'},
        {label:'Services', value:15, color:'#10b981'},
        {label:'Others', value:10, color:'#f59e0b'}
      ];
      drawDonut('chartRetail', parts);
    })();

    /* ============================
       Data Table — Appendix
       ============================ */
    const dataTableBody = el('#dataTable tbody');

    function populateTable(){
      const filter = el('#datasetFilter').value;
      const rows = dataset.filter(r => (filter === 'all') ? true : (r.tag === filter || r.metric.toLowerCase().includes(filter)));
      dataTableBody.innerHTML = '';
      rows.forEach(r=>{
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${escapeHTML(r.metric)}</td>
                        <td>${escapeHTML(r.period)}</td>
                        <td>${escapeHTML(r.value)}</td>
                        <td>${escapeHTML(r.unit)}</td>
                        <td class="small muted">${escapeHTML(r.note)}</td>`;
        dataTableBody.appendChild(tr);
      });
    }
    populateTable();

    // Filter change
    el('#datasetFilter').addEventListener('change', ()=>{
      populateTable();
      el('#savedView').textContent = 'unsaved';
    });

    // CSV & JSON export
    function toCSV(rows){
      const keys = ['metric','period','value','unit','note'];
      const csv = [keys.join(',')].concat(rows.map(r=> keys.map(k=> `"${String(r[k]||'').replace(/"/g,'""')}"`).join(','))).join('\n');
      return csv;
    }
    function downloadBlob(filename, content, type='text/csv'){
      const blob = new Blob([content], {type});
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = filename;
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
    }

    el('#exportCSV').addEventListener('click', ()=>{
      downloadBlob('vietnam_economic_dataset.csv', toCSV(dataset), 'text/csv');
    });
    el('#downloadCSV').addEventListener('click', ()=>{
      const filter = el('#datasetFilter').value;
      const rows = dataset.filter(r => (filter === 'all') ? true : (r.tag === filter || r.metric.toLowerCase().includes(filter)));
      downloadBlob(`vietnam_dataset_${filter}.csv`, toCSV(rows), 'text/csv');
    });

    el('#copyJSON').addEventListener('click', async ()=>{
      const filter = el('#datasetFilter').value;
      const rows = dataset.filter(r => (filter === 'all') ? true : (r.tag === filter || r.metric.toLowerCase().includes(filter)));
      await navigator.clipboard.writeText(JSON.stringify(rows, null, 2));
      showToast('Copied dataset JSON to clipboard');
    });

    el('#exportExecJSON').addEventListener('click', async ()=>{
      const exec = { summary: el('#execSummaryText').textContent, tags:['gdp','fdi','inflation'] };
      downloadBlob('exec_summary.json', JSON.stringify(exec, null, 2), 'application/json');
    });

    // Copy Executive summary text
    el('#copySummary').addEventListener('click', async ()=>{
      const text = el('#execSummaryText').textContent;
      await navigator.clipboard.writeText(text);
      showToast('Executive summary copied to clipboard');
    });
    el('#copyExec').addEventListener('click', async ()=>{
      const text = el('#execSummaryText').textContent;
      await navigator.clipboard.writeText(text);
      showToast('Executive summary copied to clipboard');
    });

    // Print
    el('#printBtn').addEventListener('click', ()=> window.print());

    // Save view to localStorage
    el('#saveView').addEventListener('click', ()=>{
      const filter = el('#datasetFilter').value;
      localStorage.setItem('savedView', filter);
      el('#savedView').textContent = filter;
      showToast('View saved');
    });
    el('#resetView').addEventListener('click', ()=>{
      el('#datasetFilter').value = 'all';
      populateTable();
      localStorage.removeItem('savedView');
      el('#savedView').textContent = 'none';
      showToast('View reset');
    });
    const sv = localStorage.getItem('savedView');
    if(sv){ el('#datasetFilter').value = sv; el('#savedView').textContent = sv; populateTable(); }

    // Sortable tables (history table & data table)
    function makeTableSortable(table){
      const headers = table.querySelectorAll('th');
      headers.forEach(th=>{
        th.addEventListener('click', ()=>{
          const key = th.dataset.key;
          if(!key) return;
          const tbody = table.tBodies[0];
          const rows = Array.from(tbody.querySelectorAll('tr'));
          const asc = !th.classList.contains('asc');
          headers.forEach(h => h.classList.remove('sorted','asc','desc'));
          th.classList.add('sorted', asc ? 'asc':'desc');
          rows.sort((a,b)=>{
            const aVal = a.querySelector(`td:nth-child(${Array.from(headers).indexOf(th)+1})`).textContent.trim();
            const bVal = b.querySelector(`td:nth-child(${Array.from(headers).indexOf(th)+1})`).textContent.trim();
            const aNum = parseFloat(aVal);
            const bNum = parseFloat(bVal);
            if(!isNaN(aNum) && !isNaN(bNum)) return asc ? aNum - bNum : bNum - aNum;
            return asc ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
          });
          rows.forEach(r=> tbody.appendChild(r));
          // save sort preference
          localStorage.setItem(`sort_${table.id}`, JSON.stringify({key,asc}));
        });
      });
    }
    makeTableSortable(el('#historyTable'));
    makeTableSortable(el('#dataTable'));

    // Restore last sort for dataTable
    const savedSort = localStorage.getItem('sort_dataTable');
    if(savedSort){
      const s = JSON.parse(savedSort);
      const th = el(`#dataTable th[data-key="${s.key}"]`);
      th && th.click();
      if(!s.asc) th && th.click(); // toggle to saved direction
    }

    // Search functionality: find text across sections and highlight
    const searchInput = el('#globalSearch');
    searchInput.addEventListener('input', debounce((e)=>{
      const q = e.target.value.trim().toLowerCase();
      handleSearch(q);
    }, 300));
    el('#clearSearch').addEventListener('click', ()=>{
      searchInput.value = '';
      handleSearch('');
    });

    function handleSearch(q){
      // clear marks
      els('mark').forEach(m => m.replaceWith(document.createTextNode(m.textContent)));
      if(!q){
        // show all sections
        sections.forEach(s=>s.style.display='block');
        return;
      }
      // search across text in each section; hide those without matches
      sections.forEach(s=>{
        const text = s.textContent.toLowerCase();
        if(text.includes(q)){
          s.style.display='block';
          // highlight matches in this section
          highlightSection(s, q);
        } else {
          s.style.display='none';
        }
      });
    }

    function highlightSection(section, q){
      const walker = document.createTreeWalker(section, NodeFilter.SHOW_TEXT, null);
      const nodes = [];
      while(walker.nextNode()) nodes.push(walker.currentNode);
      nodes.forEach(node=>{
        const idx = node.nodeValue.toLowerCase().indexOf(q);
        if(idx >= 0 && node.nodeValue.trim() !== ''){
          const span = document.createElement('span');
          const before = node.nodeValue.slice(0, idx);
          const match = node.nodeValue.slice(idx, idx + q.length);
          const after = node.nodeValue.slice(idx + q.length);
          const mark = document.createElement('mark');
          mark.textContent = match;
          span.appendChild(document.createTextNode(before));
          span.appendChild(mark);
          span.appendChild(document.createTextNode(after));
          node.parentNode.replaceChild(span, node);
        }
      });
    }

    // Toasts for user feedback
    let toastTimer;
    function showToast(msg, duration=1800){
      let t = document.getElementById('__toast');
      if(!t){
        t = document.createElement('div');
        t.id = '__toast';
        t.style.position = 'fixed';
        t.style.right = '18px';
        t.style.bottom = '18px';
        t.style.background = 'rgba(0,0,0,0.8)';
        t.style.padding = '10px 14px';
        t.style.borderRadius = '10px';
        t.style.color = '#fff';
        t.style.zIndex = 99999;
        document.body.appendChild(t);
      }
      t.textContent = msg;
      t.style.opacity = '1';
      clearTimeout(toastTimer);
      toastTimer = setTimeout(()=> t.style.opacity = '0', duration);
    }

    // Misc actions: focus buttons highlight portions
    el('#focusGDP').addEventListener('click', ()=> {
      document.getElementById('indicators').scrollIntoView({behavior:'smooth'});
      showToast('Focused on Key Indicators');
    });
    el('#focusFDI').addEventListener('click', ()=> {
      document.getElementById('indicators').scrollIntoView({behavior:'smooth'});
      showToast('Focused on FDI chart');
    });

    // Risk mitigation toggle
    el('#riskMitigate').addEventListener('click', ()=> {
      const elMit = el('#mitigation');
      const body = elMit.querySelector('.body');
      body.style.display = body.style.display === 'block' ? 'none' : 'block';
    });

    // Download sample policy (generate small TXT)
    el('#downloadPolicy').addEventListener('click', ()=>{
      const content = `Sample Policy Note\n\nFocus areas:\n- Diversify exports\n- Support domestic demand\n- Strengthen macro buffers\n\nGenerated: ${new Date().toLocaleString()}`;
      downloadBlob('policy_note.txt', content, 'text/plain');
    });

    // Toggle theme (light/dark) — saved in localStorage
    const themeToggle = el('#toggleTheme');
    let dark = localStorage.getItem('theme') !== 'light';
    function applyTheme(){
      if(dark){
        document.documentElement.style.setProperty('--bg','#071427');
        document.documentElement.style.setProperty('--card','#0b1320');
      } else {
        document.documentElement.style.setProperty('--bg','#f6f9fb');
        document.documentElement.style.setProperty('--card','#ffffff');
        document.documentElement.style.setProperty('--muted','#475569');
        document.documentElement.style.setProperty('--accent','#0b948f');
        document.body.style.color = '#0b1720';
      }
      // minimal change; full theming would entail more adjustments
    }
    themeToggle.addEventListener('click', ()=>{
      dark = !dark;
      localStorage.setItem('theme', dark ? 'dark':'light');
      applyTheme();
      showToast('Theme toggled');
    });
    applyTheme();

    // Copy dataset via main exportCSV
    el('#exportCSV').addEventListener('click', ()=>{
      showToast('CSV exported');
    });

    // Simple debounce
    function debounce(fn, wait=200){ let t; return (...args)=>{ clearTimeout(t); t = setTimeout(()=>fn(...args), wait) } }

    // Escape HTML
    function escapeHTML(s){ return String(s).replace(/[&<>"']/g, m=> ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m])); }

    /* Initialize dataset table rows (append more detailed rows) */
    // Populate the appendix data table (already in populateTable)
    // Save some user preferences in localStorage
    window.addEventListener('beforeunload', ()=>{
      const last = localStorage.getItem('lastSection');
      if(last) localStorage.setItem('lastSection', last);
    });

    // Accessibility: keyboard nav for TOC
    let tocIndex = 0;
    document.addEventListener('keydown', (e)=>{
      if(e.key === 'j'){ tocIndex = Math.min(tocLinks.length-1, tocIndex+1); tocLinks[tocIndex].focus(); }
      if(e.key === 'k'){ tocIndex = Math.max(0, tocIndex-1); tocLinks[tocIndex].focus(); }
    });

    // initial small animations: reveal current TOC link
    setTimeout(()=> {
      const curr = document.querySelector('.toc a.active');
      if(curr) curr.scrollIntoView({block:'center'});
    }, 600);

    // add aria labels
    els('.chart').forEach(c=> c.setAttribute('role','region'));

    // Expose some functions for debugging in console
    window.__report = { dataset, populateTable, drawLineChart, drawBarChart };

  </script>
</body>
</html>