Spaces:

thucdangvan020999
/

gpt5-v2

Running

File size: 67,711 Bytes

af76c9c

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<title>Vietnam Economic Growth Report 2025 — Interactive Research Dashboard</title>
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-HH8GJxQn3D1a3bQSDK5dXkqX7jsa9HqVibw9H2rXx3+JqZ+oR+W3NNAJbCaf3WnC7wS9tX4SxN7M3g7Kp3i2HQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
  :root {
    --bg: #0b0c10;
    --surface: #11131a;
    --card: #151924;
    --text: #e6e8ef;
    --muted: #a6adbb;
    --primary: #2dd4bf;
    --primary-600:#14b8a6;
    --accent: #60a5fa;
    --warning: #fde047;
    --danger: #fb7185;
    --success: #34d399;
    --shadow: 0 10px 24px rgba(0,0,0,0.35);
    --radius: 14px;
    --gap: clamp(0.75rem, 1.5vw, 1.25rem);
    --fs-900: clamp(2rem, 3.8vw, 3rem);
    --fs-800: clamp(1.5rem, 2.8vw, 2.25rem);
    --fs-700: clamp(1.25rem, 2.2vw, 1.75rem);
    --fs-600: clamp(1.125rem, 1.8vw, 1.375rem);
    --fs-500: clamp(1rem, 1.6vw, 1.15rem);
    --fs-400: clamp(0.95rem, 1.4vw, 1rem);
    --fs-300: clamp(0.85rem, 1.2vw, 0.95rem);
    --ring: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent);
    --grid-max: 1440px;
  }

  [data-theme="light"] {
    --bg: #f7f8fb;
    --surface: #ffffff;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
    --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
  }

  html, body {
    height: 100%;
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Inter, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background: radial-gradient(1200px 600px at 100% -10%, rgba(96,165,250,.06), transparent 60%) ,
                radial-gradient(1200px 600px at -10% 100%, rgba(45,212,191,.07), transparent 60%), var(--bg);
    line-height: 1.55;
  }

  /* Top progress bar */
  .reading-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform-origin: left;
    transform: scaleX(0);
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }

  header.appbar {
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: saturate(180%) blur(10px);
    background: color-mix(in oklab, var(--surface) 85%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--muted) 15%, transparent);
  }
  .appbar-inner {
    max-width: var(--grid-max);
    margin: 0 auto;
    padding: .75rem clamp(.75rem, 3vw, 1.5rem);
    display: flex;
    align-items: center;
    gap: .75rem;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 700;
    letter-spacing: .2px;
    font-size: var(--fs-500);
  }
  .brand i { color: var(--primary); }
  .spacer { flex: 1; }
  .toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .search {
    position: relative;
    width: min(52vw, 420px);
    min-width: 180px;
  }
  .search input {
    width: 100%;
    padding: .7rem 2.2rem .7rem 2.2rem;
    border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    font-size: var(--fs-400);
    outline: none;
    transition: border .2s, box-shadow .2s;
  }
  .search input:focus { box-shadow: var(--ring); border-color: color-mix(in oklab, var(--primary) 35%, var(--muted)); }
  .search i {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
  }
  .search .count {
    position: absolute;
    right: .7rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .75rem;
    color: var(--muted);
  }
  .icon-btn {
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
    background: var(--card);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .08s ease, background .2s, border-color .2s;
  }
  .icon-btn:hover { background: color-mix(in oklab, var(--card) 75%, var(--surface)); }
  .icon-btn:active { transform: translateY(1px); }

  .export-menu {
    position: relative;
  }
  .menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    background: var(--surface);
    border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: .25rem;
    display: none;
  }
  .menu.open { display: block; }
  .menu button {
    width: 100%;
    padding: .75rem .85rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--fs-400);
    background: transparent;
    border: 0;
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
  }
  .menu button:hover { background: color-mix(in oklab, var(--card) 80%, transparent); }

  .layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    max-width: var(--grid-max);
    margin: 0 auto;
    padding: clamp(0.75rem, 2vw, 1.25rem);
  }

  /* Sticky TOC */
  nav.toc {
    position: sticky;
    top: 72px;
    align-self: start;
    background: var(--surface);
    border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
    border-radius: var(--radius);
    padding: .75rem;
    display: grid;
    gap: .25rem;
    height: fit-content;
    max-height: calc(100vh - 96px);
    overflow: auto;
  }
  .toc h4 {
    margin: .25rem .5rem .5rem;
    color: var(--muted);
    font-size: .85rem;
    letter-spacing: .4px;
    text-transform: uppercase;
  }
  .toc a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .6rem;
    align-items: center;
    padding: .5rem .6rem;
    color: var(--text);
    text-decoration: none;
    border-radius: 8px;
    font-size: var(--fs-400);
  }
  .toc a .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: color-mix(in oklab, var(--muted) 60%, transparent);
  }
  .toc a.active {
    background: color-mix(in oklab, var(--primary) 8%, transparent);
    outline: 1px dashed color-mix(in oklab, var(--primary) 30%, transparent);
  }
  .toc a.active .dot { background: var(--primary); }
  .toc small {
    color: var(--muted);
    font-size: .7rem;
  }

  /* Hero */
  .hero {
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 12%, transparent), transparent 45%), var(--surface);
    border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
    border-radius: var(--radius);
    padding: clamp(1rem, 3vw, 1.75rem);
    display: grid;
    gap: var(--gap);
  }
  .hero header h1 {
    font-size: var(--fs-900);
    margin: 0;
    letter-spacing: -0.02em;
  }
  .hero header p {
    margin: .35rem 0 0;
    color: var(--muted);
    font-size: var(--fs-500);
  }
  .kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
  }
  .card {
    container-type: inline-size;
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
    border-radius: calc(var(--radius) - 2px);
    padding: clamp(.85rem, 2.2vw, 1.25rem);
    box-shadow: var(--shadow);
    display: grid;
    gap: .65rem;
  }
  .card .label {
    color: var(--muted);
    font-size: var(--fs-300);
    letter-spacing: .2px;
    text-transform: uppercase;
  }
  .card .value {
    font-weight: 800;
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  }
  .trend {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    color: var(--success);
    font-size: .9rem;
  }
  .trend.down { color: var(--danger); }
  @container (min-width: 360px) {
    .card .value { font-size: clamp(1.5rem, 2.2cqi, 2rem); }
  }

  /* Content grid */
  .content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
  }
  .section {
    background: var(--surface);
    border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
    border-radius: var(--radius);
    padding: clamp(1rem, 2.5vw, 1.5rem);
    display: grid;
    gap: clamp(.75rem, 1.2vw, 1rem);
  }
  .section header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .section h2 {
    margin: 0;
    font-size: var(--fs-800);
  }
  .section .actions {
    display: flex;
    gap: .5rem;
  }
  .section.collapsible > .content {
    display: grid;
    gap: .75rem;
  }
  .section.collapsible[data-collapsed="true"] > .content {
    display: none;
  }

  .grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
  }
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
  }

  /* Chart cards */
  .chart {
    display: grid;
    gap: .5rem;
  }
  .chart header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
  }
  .chart-title {
    font-weight: 700;
    font-size: var(--fs-600);
  }
  .chart .legend {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
  }
  .legend .item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--muted);
  }
  .legend .swatch {
    width: 12px; height: 12px; border-radius: 3px;
  }
  .viz {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, transparent), transparent);
    border-radius: 12px;
    border: 1px dashed color-mix(in oklab, var(--muted) 18%, transparent);
    overflow: hidden;
  }
  .viz svg, .viz canvas { width: 100%; height: 100%; display: block; }
  .tooltip {
    position: absolute;
    background: color-mix(in oklab, var(--card) 92%, transparent);
    color: var(--text);
    border: 1px solid color-mix(in oklab, var(--muted) 30%, transparent);
    padding: .4rem .55rem;
    font-size: .85rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -120%);
    transition: opacity .1s ease;
    white-space: nowrap;
  }
  .dl-chart {
    border: 0; background: transparent; color: var(--muted); cursor: pointer;
  }
  .dl-chart:hover { color: var(--text); }

  /* Table */
  .table {
    overflow: auto;
    border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
  }
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-400);
  }
  thead tr {
    background: color-mix(in oklab, var(--card) 75%, transparent);
  }
  th, td {
    padding: .75rem .85rem;
    text-align: left;
    border-bottom: 1px solid color-mix(in oklab, var(--muted) 15%, transparent);
    vertical-align: top;
  }
  th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  th.sortable .sort {
    margin-left: .35rem; color: var(--muted);
  }
  tbody tr:hover {
    background: color-mix(in oklab, var(--card) 85%, transparent);
  }
  .filters {
    display: flex; flex-wrap: wrap; gap: .5rem;
  }
  .chip {
    padding: .4rem .6rem;
    font-size: .85rem;
    background: color-mix(in oklab, var(--card) 85%, transparent);
    border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
    color: var(--text);
    border-radius: 999px;
    cursor: pointer;
  }
  .chip.active {
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    border-color: color-mix(in oklab, var(--primary) 50%, var(--muted));
  }

  /* References */
  .ref-list {
    display: grid;
    gap: .5rem;
  }
  .ref {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem;
    align-items: start;
  }
  .ref a { color: var(--accent); text-decoration: none; }
  .ref a:hover { text-decoration: underline; }

  /* Back to top */
  .to-top {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 999;
    display: none;
  }
  .to-top.show { display: block; }

  /* Breakpoints */
  @media (min-width: 768px) {
    .kpis { grid-template-columns: repeat(3, 1fr); }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 1024px) {
    .layout {
      grid-template-columns: 280px 1fr;
      align-items: start;
    }
  }
  @media (min-width: 1440px) {
    .hero { grid-template-columns: 1.2fr 1fr; align-items: center; }
  }

  /* Highlights from search */
  mark {
    background: color-mix(in oklab, var(--warning) 55%, transparent);
    color: inherit;
    padding: 0 .2em;
    border-radius: 3px;
  }

  /* Small helpers */
  .muted { color: var(--muted); }
  .ok { color: var(--success); }
  .warn { color: var(--warning); }
  .bad { color: var(--danger); }
  .note {
    padding: .6rem .75rem;
    background: color-mix(in oklab, var(--card) 85%, transparent);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
  }
</style>
</head>
<body>
<div class="reading-progress" id="readingProgress"></div>

<header class="appbar" id="top">
  <div class="appbar-inner">
    <div class="brand">
      <i class="fa-solid fa-chart-line"></i>
      Vietnam Economic Growth Report 2025
    </div>
    <div class="spacer"></div>
    <div class="toolbar">
      <div class="search" role="search">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input id="searchInput" type="search" placeholder="Search the report (e.g., inflation, FDI, GDP)..." aria-label="Search report" />
        <span class="count" id="searchCount">0</span>
      </div>
      <button class="icon-btn" id="clearSearch" title="Clear search"><i class="fa-solid fa-eraser"></i></button>
      <button class="icon-btn" id="themeToggle" title="Toggle theme"><i class="fa-solid fa-sun"></i></button>
      <div class="export-menu">
        <button class="icon-btn" id="exportBtn" title="Export & share"><i class="fa-solid fa-arrow-down-to-line"></i></button>
        <div class="menu" id="exportMenu" role="menu" aria-label="Export options">
          <button data-action="print"><i class="fa-solid fa-file-pdf"></i>Export as PDF (Print)</button>
          <button data-action="copy-summary"><i class="fa-solid fa-clipboard"></i>Copy Executive Summary</button>
          <button data-action="download-csv"><i class="fa-solid fa-table"></i>Download Key Data (CSV)</button>
          <button data-action="share-link"><i class="fa-solid fa-link"></i>Copy Link to Section</button>
        </div>
      </div>
    </div>
  </div>
</header>

<main class="layout" id="main">
  <nav class="toc" aria-label="Table of contents">
    <h4>Contents</h4>
    <a href="#exec-summary"><span class="dot"></span>Executive Summary<small></small></a>
    <a href="#methodology"><span class="dot"></span>Methodology<small></small></a>
    <a href="#findings"><span class="dot"></span>Findings<small></small></a>
    <a href="#indicators"><span class="dot"></span>Key Indicators<small></small></a>
    <a href="#sectoral"><span class="dot"></span>Sectoral Analysis<small></small></a>
    <a href="#risks"><span class="dot"></span>Challenges & Risks<small></small></a>
    <a href="#historical"><span class="dot"></span>Historical Comparison<small></small></a>
    <a href="#outlook"><span class="dot"></span>Outlook & Projections<small></small></a>
    <a href="#conclusion"><span class="dot"></span>Conclusion<small></small></a>
    <a href="#references"><span class="dot"></span>References<small></small></a>
    <a href="#appendices"><span class="dot"></span>Appendices<small></small></a>
  </nav>

  <div class="content-grid">
    <section class="hero" id="exec-summary">
      <header>
        <div>
          <h1>Vietnam’s Economy 2025: Strong Momentum, Prudent Optimism</h1>
          <p>GDP expanded 7.96% y/y in Q2; H1 growth reached 7.52%—the strongest first-half since 2011—driven by services and manufacturing. Inflation remains contained, unemployment low, and FDI inflows robust despite external headwinds.</p>
        </div>
      </header>
      <div class="kpis">
        <div class="card" data-animate="counter">
          <div class="label">GDP Growth (H1 2025)</div>
          <div class="value" data-target="7.52">7.52%</div>
          <div class="trend"><i class="fa-solid fa-arrow-trend-up"></i> Highest H1 since 2011</div>
        </div>
        <div class="card" data-animate="counter">
          <div class="label">Q2 2025 GDP (y/y)</div>
          <div class="value" data-target="7.96">7.96%</div>
          <div class="trend"><i class="fa-solid fa-bolt"></i> Broad-based in industry & services</div>
        </div>
        <div class="card" data-animate="counter">
          <div class="label">Inflation (Jun 2025)</div>
          <div class="value" data-target="3.57">3.57%</div>
          <div class="trend"><i class="fa-solid fa-gauge"></i> Within 3–4.5% target</div>
        </div>
        <div class="card" data-animate="counter">
          <div class="label">Unemployment (Q1 2025)</div>
          <div class="value" data-target="2.20">2.20%</div>
          <div class="trend ok"><i class="fa-solid fa-user-check"></i> Historically low</div>
        </div>
        <div class="card" data-animate="counter">
          <div class="label">FDI Total (H1 2025)</div>
          <div class="value" data-target="21.51">US$21.51b</div>
          <div class="trend"><i class="fa-solid fa-globe"></i> +32.6% y/y</div>
        </div>
        <div class="card" data-animate="counter">
          <div class="label">Retail Sales (Q1 2025)</div>
          <div class="value" data-target="66.83">US$66.83b</div>
          <div class="trend"><i class="fa-solid fa-store"></i> +9.9% y/y</div>
        </div>
      </div>
      <div class="note">
        Summary: Vietnam’s robust start to 2025 is anchored in resilient domestic fundamentals—low unemployment, contained inflation, and strong FDI—while external risks from trade tensions and tariffs weigh on the outlook. Government targets (8.3–8.5%) exceed most international forecasts (5.2–6.6%), calling for cautious optimism.
      </div>
    </section>

    <section class="section collapsible" id="methodology" data-collapsed="false">
      <header>
        <h2>Methodology</h2>
        <div class="actions">
          <button class="icon-btn toggle-section" title="Collapse/Expand"><i class="fa-solid fa-chevron-up"></i></button>
        </div>
      </header>
      <div class="content">
        <p>This dashboard synthesizes publicly available statistics and reputable institutional forecasts to present a concise and interactive view of Vietnam’s 2025 economic performance.</p>
        <ul>
          <li>Scope: Macroeconomic indicators (GDP growth, inflation, unemployment), capital flows (FDI), and sectoral context (services, manufacturing, retail).</li>
          <li>Sources: IMF, ADB, World Bank, Vietnam GSO, Trading Economics, Vietnam Investment Review, and other cited outlets (see References).</li>
          <li>Processing: Figures are normalized to percent or USD where applicable; H1 denotes first half of calendar year. Forecasts are labeled distinctly from actuals.</li>
          <li>Visualization: Custom SVG charts (no frameworks) with responsive scaling, tooltips, and export-to-PNG utilities.</li>
          <li>Quality: Cross-checked figures against at least two sources where possible; discrepancies noted in footnotes if relevant.</li>
        </ul>
      </div>
    </section>

    <section class="section" id="findings">
      <header>
        <h2>Key Findings</h2>
      </header>
      <div class="grid-2">
        <div class="card">
          <h3 style="margin:0;font-size:var(--fs-700)">Growth Momentum</h3>
          <p>Q2 growth accelerated to 7.96% y/y, lifting H1 2025 to 7.52%—a post-2011 high. Services and manufacturing were principal drivers, underpinned by resilient domestic demand and export competitiveness.</p>
        </div>
        <div class="card">
          <h3 style="margin:0;font-size:var(--fs-700)">Macro Stability</h3>
          <p>Inflation at 3.57% in June remains within the 3–4.5% comfort zone; unemployment at 2.20% reflects a tight labor market. Policy space remains available should global shocks intensify.</p>
        </div>
      </div>
    </section>

    <section class="section" id="indicators">
      <header>
        <h2>Key Economic Indicators 2025</h2>
        <div class="actions">
          <button class="icon-btn" data-jump="#dataset"><i class="fa-solid fa-table"></i></button>
        </div>
      </header>
      <div class="grid-2">
        <div class="card chart" id="chart-gdp">
          <header>
            <div class="chart-title">GDP Growth: 2025 Quarterly & H1</div>
            <div>
              <button class="dl-chart" title="Download chart as PNG" data-download="chart-gdp"><i class="fa-solid fa-download"></i></button>
            </div>
          </header>
          <div class="legend">
            <div class="item"><span class="swatch" style="background: var(--accent)"></span>Actual (y/y)</div>
            <div class="item"><span class="swatch" style="background: var(--primary)"></span>H1 Average</div>
          </div>
          <div class="viz" data-chart="bar"></div>
        </div>

        <div class="card chart" id="chart-inflation">
          <header>
            <div class="chart-title">Inflation: 2025 Actuals vs Forecasts</div>
            <div>
              <button class="dl-chart" title="Download chart as PNG" data-download="chart-inflation"><i class="fa-solid fa-download"></i></button>
            </div>
          </header>
          <div class="legend">
            <div class="item"><span class="swatch" style="background: var(--accent)"></span>Actual</div>
            <div class="item"><span class="swatch" style="background: var(--warning)"></span>IMF 2025</div>
            <div class="item"><span class="swatch" style="background: var(--primary)"></span>ADB 2025</div>
          </div>
          <div class="viz" data-chart="lines"></div>
        </div>

        <div class="card chart" id="chart-unemp">
          <header>
            <div class="chart-title">Unemployment Gauge (Q1 2025)</div>
            <div>
              <button class="dl-chart" title="Download chart as PNG" data-download="chart-unemp"><i class="fa-solid fa-download"></i></button>
            </div>
          </header>
          <div class="viz" data-chart="donut"></div>
        </div>

        <div class="card chart" id="chart-fdi">
          <header>
            <div class="chart-title">FDI Inflows 2025</div>
            <div>
              <button class="dl-chart" title="Download chart as PNG" data-download="chart-fdi"><i class="fa-solid fa-download"></i></button>
            </div>
          </header>
          <div class="legend">
            <div class="item"><span class="swatch" style="background: var(--accent)"></span>Registered (Jan–May)</div>
            <div class="item"><span class="swatch" style="background: var(--primary)"></span>Disbursed (Jan–May)</div>
            <div class="item"><span class="swatch" style="background: var(--success)"></span>Total (H1)</div>
          </div>
          <div class="viz" data-chart="columns"></div>
        </div>
      </div>
    </section>

    <section class="section" id="sectoral">
      <header><h2>Sectoral Analysis</h2></header>
      <div class="grid-2">
        <div class="card">
          <h3 style="margin:0;font-size:var(--fs-700)">Primary Growth Drivers</h3>
          <ol>
            <li><strong>Services sector</strong> remained the largest GDP contributor.</li>
            <li><strong>Manufacturing</strong> continued its recovery and expansion.</li>
            <li><strong>Export industries</strong> acted as the economy’s backbone despite global frictions.</li>
            <li><strong>Banking sector</strong> projected earnings +17% in 2025 with system-wide credit +15%.</li>
          </ol>
        </div>
        <div class="card">
          <h3 style="margin:0;font-size:var(--fs-700)">Retail Performance</h3>
          <p>Retail sales reached 1.708 quadrillion VND (US$66.83b) in Q1 2025, up 9.9% y/y, supported by low unemployment and steady real incomes amid controlled inflation.</p>
        </div>
      </div>
    </section>

    <section class="section" id="risks">
      <header><h2>Challenges and Risk Factors</h2></header>
      <div class="grid-2">
        <div class="card">
          <ul>
            <li><strong>Global trade tensions</strong> and <strong>US tariffs</strong> weigh on export-oriented firms.</li>
            <li><strong>Geopolitical instability</strong> raises uncertainty and risk premiums.</li>
            <li><strong>FDI overdependence</strong> and inflation vigilance flagged by experts.</li>
            <li><strong>Macro stability</strong> must be preserved: avoid excess public debt and overheating.</li>
          </ul>
        </div>
        <div class="card">
          <h3 style="margin:0;font-size:var(--fs-700)">Policy Watch</h3>
          <p>Authorities aim to diversify export markets, bolster domestic demand, and maintain policy flexibility to cushion global shocks if necessary.</p>
        </div>
      </div>
    </section>

    <section class="section" id="historical">
      <header>
        <h2>Historical Comparison</h2>
      </header>
      <div class="grid-2">
        <div class="card chart" id="chart-historical">
          <header>
            <div class="chart-title">Q1 GDP Growth 2020–2025 (y/y)</div>
            <div>
              <button class="dl-chart" title="Download chart as PNG" data-download="chart-historical"><i class="fa-solid fa-download"></i></button>
            </div>
          </header>
          <div class="legend">
            <div class="item"><span class="swatch" style="background: var(--accent)"></span>Q1 Growth</div>
          </div>
          <div class="viz" data-chart="line"></div>
        </div>
        <div class="card">
          <h3 style="margin:0;font-size:var(--fs-700)">Context</h3>
          <p>After a 7.1% expansion in 2024, growth started stronger in 2025. While external headwinds may temper full-year performance, long-term fundamentals remain resilient.</p>
          <ul>
            <li>2024 GDP growth: <strong>7.1%</strong></li>
            <li>2025 growth: potential moderation vs H1 pace due to external factors</li>
            <li>Structural strengths: competitive exports, FDI pipeline, stable labor market</li>
          </ul>
        </div>
      </div>
    </section>

    <section class="section" id="outlook">
      <header><h2>Economic Outlook and Projections</h2></header>
      <div class="grid-2">
        <div class="card">
          <h3 style="margin:0;font-size:var(--fs-700)">Near-term Prospects (2025)</h3>
          <p>Solid baseline growth expected amid uncertainty. Government’s 8.3–8.5% target is ambitious relative to international forecasts (IMF 5.2%, World Bank 5.8%, ADB 6.6%). Parliamentary guidance indicates a <em>7% to at least 8%</em> range, reflecting confidence but recognizing risks.</p>
        </div>
        <div class="card chart" id="chart-forecasts">
          <header>
            <div class="chart-title">2025 GDP Growth Forecasts vs Target</div>
            <div>
              <button class="dl-chart" title="Download chart as PNG" data-download="chart-forecasts"><i class="fa-solid fa-download"></i></button>
            </div>
          </header>
          <div class="legend">
            <div class="item"><span class="swatch" style="background: var(--accent)"></span>Institutional Forecasts</div>
            <div class="item"><span class="swatch" style="background: var(--warning)"></span>Gov Target Range</div>
          </div>
          <div class="viz" data-chart="range"></div>
        </div>
      </div>

      <div class="grid-3" style="margin-top:var(--gap)">
        <div class="card">
          <h3 style="margin:0;font-size:var(--fs-700)">Supporting Factors</h3>
          <ul>
            <li>Robust FDI inflows signal investor confidence.</li>
            <li>Low unemployment supports consumption.</li>
            <li>Inflation control preserves purchasing power.</li>
            <li>Export competitiveness remains intact.</li>
            <li>Parliamentary support for higher growth ambitions.</li>
          </ul>
        </div>
        <div class="card">
          <h3 style="margin:0;font-size:var(--fs-700)">Risk Mitigation</h3>
          <ul>
            <li>Diversify export markets and supply chains.</li>
            <li>Strengthen domestic demand via targeted fiscal measures.</li>
            <li>Maintain macro stability and policy buffers.</li>
          </ul>
        </div>
        <div class="card">
          <h3 style="margin:0;font-size:var(--fs-700)">Takeaway</h3>
          <p>Cautious optimism is warranted: upside from FDI and services could offset external headwinds, but achieving 8%+ will require benign external conditions and effective policy execution.</p>
        </div>
      </div>
    </section>

    <section class="section" id="dataset">
      <header>
        <h2>Interactive Dataset</h2>
      </header>
      <div class="filters" style="margin-bottom:.5rem">
        <button class="chip active" data-filter="all">All</button>
        <button class="chip" data-filter="GDP">GDP</button>
        <button class="chip" data-filter="Inflation">Inflation</button>
        <button class="chip" data-filter="Unemployment">Unemployment</button>
        <button class="chip" data-filter="FDI">FDI</button>
        <button class="chip" data-filter="Retail">Retail</button>
        <div class="spacer"></div>
        <button class="chip" id="resetTable"><i class="fa-solid fa-rotate-left"></i>&nbsp;Reset</button>
      </div>
      <div class="table">
        <table id="dataTable">
          <thead>
            <tr>
              <th class="sortable" data-sort="text">Indicator <i class="sort fa-solid fa-sort"></i></th>
              <th class="sortable" data-sort="text">Period <i class="sort fa-solid fa-sort"></i></th>
              <th class="sortable" data-sort="number">Value <i class="sort fa-solid fa-sort"></i></th>
              <th>Notes / Source</th>
            </tr>
          </thead>
          <tbody>
            <tr data-type="GDP"><td>GDP Growth</td><td>Q1 2025</td><td data-value="6.9">6.9%</td><td>y/y growth</td></tr>
            <tr data-type="GDP"><td>GDP Growth</td><td>Q2 2025</td><td data-value="7.96">7.96%</td><td>y/y growth</td></tr>
            <tr data-type="GDP"><td>GDP Growth</td><td>H1 2025</td><td data-value="7.52">7.52%</td><td>Highest H1 since 2011</td></tr>

            <tr data-type="Inflation"><td>Inflation</td><td>May 2025</td><td data-value="3.24">3.24%</td><td>IMF/ADB range 2.9–4.0%</td></tr>
            <tr data-type="Inflation"><td>Inflation</td><td>Jun 2025</td><td data-value="3.57">3.57%</td><td>Highest since start of year</td></tr>
            <tr data-type="Inflation"><td>Inflation Forecast (IMF)</td><td>2025</td><td data-value="2.9">2.9%</td><td>IMF projection</td></tr>
            <tr data-type="Inflation"><td>Inflation Forecast (ADB)</td><td>2025</td><td data-value="4.0">4.0%</td><td>ADB projection</td></tr>

            <tr data-type="Unemployment"><td>Unemployment</td><td>Q1 2025</td><td data-value="2.2">2.20%</td><td>Down from 2.22% in Q4 2024</td></tr>

            <tr data-type="FDI"><td>FDI Registered</td><td>Jan–May 2025</td><td data-value="18.4">US$18.4b</td><td>+51% y/y</td></tr>
            <tr data-type="FDI"><td>FDI Disbursed</td><td>Jan–May 2025</td><td data-value="8.9">US$8.9b</td><td></td></tr>
            <tr data-type="FDI"><td>FDI Total</td><td>H1 2025</td><td data-value="21.51">US$21.51b</td><td>+32.6% y/y</td></tr>

            <tr data-type="Retail"><td>Retail Sales</td><td>Q1 2025</td><td data-value="66.83">US$66.83b</td><td>1.708 quadrillion VND; +9.9% y/y</td></tr>
          </tbody>
        </table>
      </div>
    </section>

    <section class="section collapsible" id="conclusion" data-collapsed="false">
      <header>
        <h2>Conclusion</h2>
        <div class="actions">
          <button class="icon-btn toggle-section" title="Collapse/Expand"><i class="fa-solid fa-chevron-up"></i></button>
        </div>
      </header>
      <div class="content">
        <p>Vietnam’s 2025 performance underscores resilience and growth potential. With low unemployment, contained inflation, and strong FDI inflows, the economy is well-positioned for sustained development. The ambitious government target (~8%+) contrasts with more conservative international projections, suggesting a balanced stance of aspiration and prudence.</p>
        <p>The government’s determination to reach 8% in 2025 aims to set the stage for higher growth in subsequent years; execution and external conditions will be pivotal.</p>
      </div>
    </section>

    <section class="section" id="references">
      <header><h2>Sources and Citations</h2></header>
      <div class="ref-list">
        <div class="ref"><span>1.</span> <a href="https://tradingeconomics.com/vietnam/gdp-growth-annual" target="_blank" rel="noopener">Trading Economics - Vietnam GDP Annual Growth Rate</a></div>
        <div class="ref"><span>2.</span> <a href="https://www.imf.org/en/Countries/VNM" target="_blank" rel="noopener">International Monetary Fund - Vietnam Country Profile</a></div>
        <div class="ref"><span>3.</span> <a href="https://www.worldeconomics.com/GDP/Vietnam.gdp" target="_blank" rel="noopener">World Economics - Vietnam GDP Estimates</a></div>
        <div class="ref"><span>4.</span> <a href="https://www.gso.gov.vn/en/" target="_blank" rel="noopener">Government of Vietnam - General Statistics Office</a></div>
        <div class="ref"><span>5.</span> <a href="https://en.wikipedia.org/wiki/Economy_of_Vietnam" target="_blank" rel="noopener">Wikipedia - Economy of Vietnam</a></div>
        <div class="ref"><span>6.</span> <a href="https://www.imf.org/en/Countries/VNM" target="_blank" rel="noopener">IMF - Vietnam and the IMF</a></div>
        <div class="ref"><span>7.</span> <a href="https://www.focus-economics.com/countries/vietnam" target="_blank" rel="noopener">FocusEconomics - Vietnam Economic Indicators</a></div>
        <div class="ref"><span>8.</span> <a href="https://www.gso.gov.vn/en/data-and-statistics/" target="_blank" rel="noopener">National Statistics Office of Vietnam - Economic Reports</a></div>
        <div class="ref"><span>9.</span> <a href="https://vietnamnet.vn/" target="_blank" rel="noopener">VietnamNet - Economic News and Analysis</a></div>
        <div class="ref"><span>10.</span> <a href="https://www.imf.org/en/Publications/CR" target="_blank" rel="noopener">IMF - Article IV Mission Reports</a></div>
        <div class="ref"><span>11.</span> <a href="https://www.vietnam-briefing.com/" target="_blank" rel="noopener">Vietnam Briefing - Economic Analysis</a></div>
        <div class="ref"><span>12.</span> <a href="https://vir.com.vn/" target="_blank" rel="noopener">Vietnam Investment Review - FDI Statistics</a></div>
        <div class="ref"><span>13.</span> <a href="https://tradingeconomics.com/vietnam/foreign-direct-investment" target="_blank" rel="noopener">Trading Economics - Vietnam FDI</a></div>
        <div class="ref"><span>14.</span> <a href="https://www.whitecase.com/" target="_blank" rel="noopener">White & Case - Regional Economic Outlook</a></div>
        <div class="ref"><span>15.</span> <a href="https://vneconomictimes.com/" target="_blank" rel="noopener">Vietnam Economic Times</a></div>
        <div class="ref"><span>16.</span> <a href="https://www.adb.org/countries/viet-nam/main" target="_blank" rel="noopener">Asian Development Bank - Vietnam Country Partnership</a></div>
        <div class="ref"><span>17.</span> <a href="https://www.mpi.gov.vn/en/" target="_blank" rel="noopener">Ministry of Planning and Investment - Vietnam</a></div>
      </div>
    </section>

    <section class="section collapsible" id="appendices" data-collapsed="true">
      <header>
        <h2>Appendices</h2>
        <div class="actions">
          <button class="icon-btn toggle-section" title="Collapse/Expand"><i class="fa-solid fa-chevron-down"></i></button>
        </div>
      </header>
      <div class="content">
        <details open>
          <summary><strong>Appendix A:</strong> Historical Q1 GDP Growth (2020–2025)</summary>
          <ul>
            <li>2020: 3.21%</li>
            <li>2021: 4.85%</li>
            <li>2022: 5.42%</li>
            <li>2023: 3.46%</li>
            <li>2024: 5.98%</li>
            <li>2025: 6.93% (Q1)</li>
          </ul>
        </details>
        <details>
          <summary><strong>Appendix B:</strong> Forecast & Target Notes</summary>
          <p>Forecasts reflect baseline assumptions by institutions (IMF, ADB, World Bank). Government target range (8.3–8.5%) and parliamentary guidance (7% to ≥8%) are policy aspirations and may differ from realized outcomes depending on global conditions and policy implementation.</p>
        </details>
      </div>
    </section>
  </div>
</main>

<button class="icon-btn to-top" id="toTop" title="Back to top"><i class="fa-solid fa-arrow-up"></i></button>

<script>
/* Theme persistence */
(function initTheme() {
  const saved = localStorage.getItem('theme');
  const prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
  const theme = saved || (prefersLight ? 'light' : 'dark');
  document.documentElement.setAttribute('data-theme', theme);
  updateThemeIcon(theme);
})();
function updateThemeIcon(theme) {
  const icon = document.querySelector('#themeToggle i');
  if (!icon) return;
  icon.className = 'fa-solid ' + (theme === 'light' ? 'fa-moon' : 'fa-sun');
}
document.getElementById('themeToggle').addEventListener('click', () => {
  const curr = document.documentElement.getAttribute('data-theme') || 'dark';
  const next = curr === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
  updateThemeIcon(next);
});

/* Export menu */
const exportBtn = document.getElementById('exportBtn');
const exportMenu = document.getElementById('exportMenu');
exportBtn.addEventListener('click', () => exportMenu.classList.toggle('open'));
document.addEventListener('click', (e) => {
  if (!exportMenu.contains(e.target) && e.target !== exportBtn) exportMenu.classList.remove('open');
});
exportMenu.addEventListener('click', async (e) => {
  const btn = e.target.closest('button');
  if (!btn) return;
  const action = btn.dataset.action;
  if (action === 'print') {
    window.print();
  } else if (action === 'copy-summary') {
    const exec = document.querySelector('#exec-summary .note')?.textContent?.trim();
    await navigator.clipboard.writeText(exec || '');
    toast('Executive Summary copied to clipboard.');
  } else if (action === 'download-csv') {
    downloadCSV();
  } else if (action === 'share-link') {
    const active = document.querySelector('.toc a.active')?.getAttribute('href') || '#top';
    const url = location.origin + location.pathname + active;
    await navigator.clipboard.writeText(url);
    toast('Sharable link copied.');
  }
  exportMenu.classList.remove('open');
});

function downloadCSV() {
  const rows = [['Indicator','Period','Value','Notes']];
  document.querySelectorAll('#dataTable tbody tr').forEach(tr => {
    if (tr.style.display === 'none') return;
    const cells = [...tr.children].map(td => td.textContent.trim());
    rows.push(cells);
  });
  const csv = rows.map(r => r.map(v => `"${v.replace(/"/g,'""')}"`).join(',')).join('\n');
  const blob = new Blob([csv], {type:'text/csv'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'vietnam_economic_indicators_2025.csv';
  document.body.appendChild(a);
  a.click();
  a.remove();
}

/* Smooth jump via buttons */
document.querySelectorAll('[data-jump]').forEach(btn => {
  btn.addEventListener('click', () => {
    const target = document.querySelector(btn.dataset.jump);
    if (target) target.scrollIntoView({behavior:'smooth', block:'start'});
  });
});

/* Collapsible sections */
document.querySelectorAll('.toggle-section').forEach(btn => {
  btn.addEventListener('click', () => {
    const section = btn.closest('.section.collapsible');
    const collapsed = section.getAttribute('data-collapsed') === 'true';
    section.setAttribute('data-collapsed', collapsed ? 'false' : 'true');
    btn.innerHTML = `<i class="fa-solid fa-chevron-${collapsed ? 'up' : 'down'}"></i>`;
  });
});

/* Table sorting & filtering */
const dataTable = document.getElementById('dataTable');
const ths = dataTable.querySelectorAll('th.sortable');
let sortState = { index: 0, dir: 1 };
ths.forEach((th, i) => {
  th.addEventListener('click', () => {
    const type = th.dataset.sort || 'text';
    sortState.dir = sortState.index === i ? sortState.dir * -1 : 1;
    sortState.index = i;
    sortTable(i, type, sortState.dir);
    ths.forEach(x => x.querySelector('.sort').className = 'sort fa-solid fa-sort');
    th.querySelector('.sort').className = 'sort fa-solid ' + (sortState.dir === 1 ? 'fa-sort-up' : 'fa-sort-down');
    localStorage.setItem('tableSort', JSON.stringify(sortState));
  });
});
function sortTable(col, type, dir) {
  const rows = Array.from(dataTable.tBodies[0].rows);
  rows.sort((a,b) => {
    const A = a.cells[col].dataset.value || a.cells[col].textContent.trim();
    const B = b.cells[col].dataset.value || b.cells[col].textContent.trim();
    if (type === 'number') return (parseFloat(A) - parseFloat(B)) * dir;
    return A.localeCompare(B) * dir;
  });
  rows.forEach(r => dataTable.tBodies[0].appendChild(r));
}
(function restoreSort(){
  try {
    const saved = JSON.parse(localStorage.getItem('tableSort'));
    if (!saved) return;
    sortState = saved;
    const th = ths[sortState.index];
    sortTable(sortState.index, th.dataset.sort || 'text', sortState.dir);
    th.querySelector('.sort').className = 'sort fa-solid ' + (sortState.dir === 1 ? 'fa-sort-up' : 'fa-sort-down');
  } catch {}
})();

const filterChips = document.querySelectorAll('.filters .chip[data-filter]');
filterChips.forEach(chip => chip.addEventListener('click', () => {
  filterChips.forEach(c => c.classList.remove('active'));
  chip.classList.add('active');
  const type = chip.dataset.filter;
  dataTable.querySelectorAll('tbody tr').forEach(tr => {
    tr.style.display = (type === 'all' || tr.dataset.type === type) ? '' : 'none';
  });
  localStorage.setItem('tableFilter', type);
}));
document.getElementById('resetTable').addEventListener('click', () => {
  filterChips.forEach(c => c.classList.remove('active'));
  document.querySelector('.filters .chip[data-filter="all"]').classList.add('active');
  dataTable.querySelectorAll('tbody tr').forEach(tr => tr.style.display = '');
  localStorage.removeItem('tableFilter');
  localStorage.removeItem('tableSort');
});
(function restoreFilter(){
  const saved = localStorage.getItem('tableFilter');
  if (!saved) return;
  const chip = document.querySelector(`.filters .chip[data-filter="${saved}"]`);
  if (chip) chip.click();
})();

/* Search with highlight */
const searchInput = document.getElementById('searchInput');
const searchCount = document.getElementById('searchCount');
const clearSearch = document.getElementById('clearSearch');
let currentSearch = '';
function clearMarks(root=document) {
  root.querySelectorAll('mark').forEach(m => m.replaceWith(document.createTextNode(m.textContent)));
}
function highlightTerm(term) {
  if (!term) return 0;
  const rx = new RegExp(term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'ig');
  let count = 0;
  document.querySelectorAll('main .section, .hero').forEach(sec => {
    clearMarks(sec);
    const walker = document.createTreeWalker(sec, NodeFilter.SHOW_TEXT, {
      acceptNode: n => n.nodeValue.trim().length > 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
    });
    const nodes = [];
    while (walker.nextNode()) nodes.push(walker.currentNode);
    nodes.forEach(node => {
      const frag = document.createDocumentFragment();
      let lastIdx = 0;
      const text = node.nodeValue;
      text.replace(rx, (m, idx) => {
        const before = text.slice(lastIdx, idx);
        if (before) frag.appendChild(document.createTextNode(before));
        const mark = document.createElement('mark');
        mark.textContent = m;
        frag.appendChild(mark);
        lastIdx = idx + m.length;
        count++;
      });
      if (count && lastIdx) {
        const after = text.slice(lastIdx);
        if (after) frag.appendChild(document.createTextNode(after));
        node.parentNode.replaceChild(frag, node);
      }
    });
  });
  return count;
}
searchInput.addEventListener('input', () => {
  const term = searchInput.value.trim();
  currentSearch = term;
  clearMarks(document);
  const hits = highlightTerm(term);
  searchCount.textContent = hits;
  if (hits > 0) {
    const first = document.querySelector('mark');
    first?.scrollIntoView({behavior:'smooth', block:'center'});
  }
  localStorage.setItem('searchTerm', term);
});
clearSearch.addEventListener('click', () => {
  searchInput.value = '';
  currentSearch = '';
  clearMarks(document);
  searchCount.textContent = '0';
  localStorage.removeItem('searchTerm');
});
(function restoreSearch(){
  const term = localStorage.getItem('searchTerm');
  if (!term) return;
  searchInput.value = term;
  const hits = highlightTerm(term);
  searchCount.textContent = hits;
})();

/* TOC active link + progress bar */
const sections = [...document.querySelectorAll('main .section, #exec-summary')];
const tocLinks = [...document.querySelectorAll('.toc a')];
const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const id = '#' + entry.target.id;
      tocLinks.forEach(a => a.classList.toggle('active', a.getAttribute('href') === id));
      localStorage.setItem('lastSection', id);
    }
  });
}, { rootMargin: '-40% 0px -50% 0px', threshold: 0.01 });
sections.forEach(s => io.observe(s));

(function restoreLastSection(){
  const id = localStorage.getItem('lastSection');
  if (id && document.querySelector(id)) {
    // Do not auto-scroll on load to avoid jarring UX
  }
})();

const readingProgress = document.getElementById('readingProgress');
document.addEventListener('scroll', () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const p = Math.max(0, Math.min(1, scrollTop / (scrollHeight || 1)));
  readingProgress.style.transform = `scaleX(${p})`;
  document.getElementById('toTop').classList.toggle('show', scrollTop > 500);
});

/* Back to top */
document.getElementById('toTop').addEventListener('click', () => {
  window.scrollTo({top: 0, behavior: 'smooth'});
});

/* KPI counters animation */
const counters = document.querySelectorAll('.card[data-animate="counter"] .value');
const ioCounters = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      animateCounter(entry.target);
      ioCounters.unobserve(entry.target);
    }
  });
}, { threshold: 0.5 });
counters.forEach(el => ioCounters.observe(el));
function animateCounter(el) {
  const raw = el.dataset.target;
  const isMoney = el.textContent.includes('US$');
  const suffix = el.textContent.trim().endsWith('%') ? '%' : (isMoney ? 'b' : '');
  const target = parseFloat(raw);
  const duration = 1200;
  const start = performance.now();
  function frame(t) {
    const k = Math.min(1, (t - start) / duration);
    const v = target * (0.2 + 0.8 * easeOutCubic(k));
    el.textContent = (isMoney ? 'US$' : '') + v.toFixed(target < 10 ? 2 : 1) + (suffix ? (suffix === 'b' ? 'b' : '%') : '');
    if (k < 1) requestAnimationFrame(frame);
    else el.textContent = (isMoney ? 'US$' : '') + target + (suffix ? (suffix === 'b' ? 'b' : '%') : '');
  }
  requestAnimationFrame(frame);
}
function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); }

/* Lightweight SVG chart utilities (no frameworks) */
function createSVG(w, h) {
  const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
  svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
  svg.setAttribute('preserveAspectRatio', 'none');
  return svg;
}
function linePath(points) {
  return points.map((p,i) => (i?'L':'M') + p[0] + ' ' + p[1]).join(' ');
}
function addTooltip(viz) {
  let tip = viz.querySelector('.tooltip');
  if (!tip) {
    tip = document.createElement('div');
    tip.className = 'tooltip';
    viz.appendChild(tip);
  }
  return tip;
}
function svgText(svg, x, y, text, opts={}) {
  const t = document.createElementNS('http://www.w3.org/2000/svg','text');
  t.setAttribute('x', x);
  t.setAttribute('y', y);
  t.textContent = text;
  for (const k in opts) t.setAttribute(k, opts[k]);
  svg.appendChild(t);
}

/* Chart: Bar (GDP Q1/Q2/H1) */
function renderGDPBar(container) {
  const viz = container.querySelector('.viz');
  viz.innerHTML = '';
  const w = 800, h = 450, pad = {l:60,r:20,t:30,b:50};
  const svg = createSVG(w, h);
  viz.appendChild(svg);

  const data = [
    {label:'Q1 2025', val:6.9, color:'var(--accent)'},
    {label:'Q2 2025', val:7.96, color:'var(--accent)'},
    {label:'H1 2025', val:7.52, color:'var(--primary)'}
  ];
  const max = Math.ceil(Math.max(...data.map(d=>d.val)) + 1);
  // axes
  const axis = document.createElementNS('http://www.w3.org/2000/svg','g');
  axis.setAttribute('stroke','currentColor');
  axis.setAttribute('opacity','0.4');
  const ySteps = 6;
  for (let i=0;i<=ySteps;i++){
    const y = pad.t + (h-pad.t-pad.b) * (i/ySteps);
    const line = document.createElementNS('http://www.w3.org/2000/svg','line');
    line.setAttribute('x1', pad.l);
    line.setAttribute('x2', w - pad.r);
    line.setAttribute('y1', y);
    line.setAttribute('y2', y);
    axis.appendChild(line);
    const val = Math.round((max) * (1 - i/ySteps)*10)/10;
    svgText(svg, pad.l-8, y+4, val+'%', { 'text-anchor':'end', 'font-size':'12' });
  }
  svg.appendChild(axis);

  const barW = (w-pad.l-pad.r) / data.length * 0.5;
  const tip = addTooltip(viz);

  data.forEach((d, i) => {
    const xCenter = pad.l + (w-pad.l-pad.r) * ((i+0.5)/data.length);
    const x = xCenter - barW/2;
    const y = pad.t + (h-pad.t-pad.b) * (1 - d.val/max);
    const rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
    rect.setAttribute('x', x);
    rect.setAttribute('y', y);
    rect.setAttribute('width', barW);
    rect.setAttribute('height', (h-pad.t-pad.b) * (d.val/max));
    rect.setAttribute('fill', getComputedStyle(document.documentElement).getPropertyValue(d.color.replace(/[^\w-]/g,'')) || d.color);
    rect.setAttribute('rx','8');
    rect.style.filter = 'drop-shadow(0 6px 10px rgba(0,0,0,.15))';
    rect.addEventListener('mousemove', (e)=> {
      tip.textContent = `${d.label}: ${d.val}%`;
      tip.style.left = e.offsetX + 'px';
      tip.style.top = e.offsetY + 'px';
      tip.style.opacity = 1;
    });
    rect.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
    svg.appendChild(rect);
    svgText(svg, xCenter, h-pad.b+18, d.label, {'text-anchor':'middle','font-size':'12'});
  });
}

/* Chart: Inflation actual vs forecasts */
function renderInflationLines(container) {
  const viz = container.querySelector('.viz');
  viz.innerHTML = '';
  const w = 800, h = 450, pad = {l:50,r:20,t:20,b:40};
  const svg = createSVG(w, h);
  viz.appendChild(svg);
  const actual = [
    {label:'May', val:3.24},
    {label:'Jun', val:3.57}
  ];
  const forecasts = [
    {label:'IMF', val:2.9, color:'var(--warning)'},
    {label:'ADB', val:4.0, color:'var(--primary)'}
  ];
  const labels = ['May','Jun','IMF','ADB'];
  const allVals = [...actual.map(d=>d.val), ...forecasts.map(d=>d.val)];
  const min = Math.min(...allVals, 0), max = Math.max(...allVals) + 0.5;

  // gridlines
  const ySteps = 6;
  const axis = document.createElementNS('http://www.w3.org/2000/svg','g');
  axis.setAttribute('stroke','currentColor');
  axis.setAttribute('opacity','0.35');
  for (let i=0;i<=ySteps;i++){
    const y = pad.t + (h-pad.t-pad.b) * (i/ySteps);
    const line = document.createElementNS('http://www.w3.org/2000/svg','line');
    line.setAttribute('x1', pad.l);
    line.setAttribute('x2', w - pad.r);
    line.setAttribute('y1', y);
    line.setAttribute('y2', y);
    axis.appendChild(line);
    const val = (max - (max-min) * (i/ySteps)).toFixed(1);
    svgText(svg, pad.l-6, y+4, val+'%', {'text-anchor':'end','font-size':'12'});
  }
  svg.appendChild(axis);

  // X positions
  const x = (idx) => pad.l + (w-pad.l-pad.r) * (idx/(labels.length-1));
  const y = (val) => pad.t + (h-pad.t-pad.b) * (1 - (val-min)/(max-min));
  const tip = addTooltip(viz);

  // actual line
  const points = actual.map((d,i)=>[x(i), y(d.val)]);
  const path = document.createElementNS('http://www.w3.org/2000/svg','path');
  path.setAttribute('d', linePath(points));
  path.setAttribute('fill','none');
  path.setAttribute('stroke','var(--accent)');
  path.setAttribute('stroke-width','3');
  svg.appendChild(path);
  actual.forEach((d,i)=>{
    const cx = x(i), cy = y(d.val);
    const c = document.createElementNS('http://www.w3.org/2000/svg','circle');
    c.setAttribute('cx', cx); c.setAttribute('cy', cy); c.setAttribute('r', 5);
    c.setAttribute('fill','var(--accent)');
    c.addEventListener('mousemove', (e) => {
      tip.textContent = `${d.label} 2025: ${d.val}%`;
      tip.style.left = e.offsetX + 'px';
      tip.style.top = e.offsetY + 'px';
      tip.style.opacity = 1;
    });
    c.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
    svg.appendChild(c);
    svgText(svg, cx, h-pad.b+16, d.label, {'text-anchor':'middle','font-size':'12'});
  });

  // forecasts points
  forecasts.forEach((d, i) => {
    const cx = x(i + actual.length), cy = y(d.val);
    const c = document.createElementNS('http://www.w3.org/2000/svg','rect');
    c.setAttribute('x', cx-6); c.setAttribute('y', cy-6); c.setAttribute('width', 12); c.setAttribute('height', 12); c.setAttribute('rx','2');
    c.setAttribute('fill', getComputedStyle(document.documentElement).getPropertyValue(d.color.replace(/[^\w-]/g,'')) || d.color);
    c.addEventListener('mousemove', (e) => {
      tip.textContent = `${d.label} 2025 Forecast: ${d.val}%`;
      tip.style.left = e.offsetX + 'px';
      tip.style.top = e.offsetY + 'px';
      tip.style.opacity = 1;
    });
    c.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
    svg.appendChild(c);
    svgText(svg, cx, h-pad.b+16, d.label, {'text-anchor':'middle','font-size':'12'});
  });
}

/* Chart: Donut (Unemployment) */
function renderUnempDonut(container) {
  const viz = container.querySelector('.viz');
  viz.innerHTML = '';
  const w = 450, h = 450;
  const svg = createSVG(w, h);
  viz.appendChild(svg);
  const center = {x: w/2, y: h/2};
  const radius = 150;
  const val = 2.2; // %
  const max = 10; // gauge cap
  // bg circle
  const bg = document.createElementNS('http://www.w3.org/2000/svg','circle');
  bg.setAttribute('cx', center.x);
  bg.setAttribute('cy', center.y);
  bg.setAttribute('r', radius);
  bg.setAttribute('fill','none');
  bg.setAttribute('stroke','color-mix(in oklab, var(--muted) 25%, transparent)');
  bg.setAttribute('stroke-width','26');
  svg.appendChild(bg);

  // arc
  const angle = Math.min(360, (val/max)*360);
  const large = angle > 180 ? 1 : 0;
  const start = polar(center.x, center.y, radius, -90);
  const end = polar(center.x, center.y, radius, -90 + angle);
  const d = `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${large} 1 ${end.x} ${end.y}`;
  const path = document.createElementNS('http://www.w3.org/2000/svg','path');
  path.setAttribute('d', d);
  path.setAttribute('fill','none');
  path.setAttribute('stroke','var(--success)');
  path.setAttribute('stroke-width','26');
  path.setAttribute('stroke-linecap','round');
  svg.appendChild(path);

  svgText(svg, center.x, center.y, val.toFixed(2)+'%', {'text-anchor':'middle','font-size':'34','font-weight':'700'});
  svgText(svg, center.x, center.y+26, 'Unemployment (Q1 2025)', {'text-anchor':'middle','font-size':'14', 'opacity':'0.75'});

  function polar(cx, cy, r, deg) {
    const rad = (deg) * Math.PI/180;
    return {x: cx + r*Math.cos(rad), y: cy + r*Math.sin(rad)};
  }
}

/* Chart: FDI columns */
function renderFDIColumns(container) {
  const viz = container.querySelector('.viz');
  viz.innerHTML = '';
  const w = 800, h = 450, pad = {l:70,r:20,t:30,b:60};
  const svg = createSVG(w, h);
  viz.appendChild(svg);
  const data = [
    {label:'Registered (Jan–May)', val:18.4, color:'var(--accent)'},
    {label:'Disbursed (Jan–May)', val:8.9, color:'var(--primary)'},
    {label:'Total (H1)', val:21.51, color:'var(--success)'}
  ];
  const max = Math.ceil(Math.max(...data.map(d=>d.val)) + 2);
  // grid
  const ySteps = 6;
  const axis = document.createElementNS('http://www.w3.org/2000/svg','g');
  axis.setAttribute('stroke','currentColor');
  axis.setAttribute('opacity','0.35');
  for (let i=0;i<=ySteps;i++){
    const y = pad.t + (h-pad.t-pad.b) * (i/ySteps);
    const line = document.createElementNS('http://www.w3.org/2000/svg','line');
    line.setAttribute('x1', pad.l);
    line.setAttribute('x2', w - pad.r);
    line.setAttribute('y1', y);
    line.setAttribute('y2', y);
    axis.appendChild(line);
    const val = Math.round((max) * (1 - i/ySteps)*10)/10;
    svgText(svg, pad.l-8, y+4, '$' + val + 'b', {'text-anchor':'end','font-size':'12'});
  }
  svg.appendChild(axis);

  const barW = (w-pad.l-pad.r) / data.length * 0.4;
  const tip = addTooltip(viz);
  data.forEach((d, i) => {
    const xCenter = pad.l + (w-pad.l-pad.r) * ((i+0.5)/data.length);
    const x = xCenter - barW/2;
    const y = pad.t + (h-pad.t-pad.b) * (1 - d.val/max);
    const rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
    rect.setAttribute('x', x);
    rect.setAttribute('y', y);
    rect.setAttribute('width', barW);
    rect.setAttribute('height', (h-pad.t-pad.b) * (d.val/max));
    rect.setAttribute('fill', getComputedStyle(document.documentElement).getPropertyValue(d.color.replace(/[^\w-]/g,'')) || d.color);
    rect.setAttribute('rx','8');
    rect.style.filter = 'drop-shadow(0 6px 10px rgba(0,0,0,.15))';
    rect.addEventListener('mousemove', (e)=> {
      tip.textContent = `${d.label}: US$${d.val}b`;
      tip.style.left = e.offsetX + 'px';
      tip.style.top = e.offsetY + 'px';
      tip.style.opacity = 1;
    });
    rect.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
    svg.appendChild(rect);
    svgText(svg, xCenter, h-pad.b+30, d.label, {'text-anchor':'middle','font-size':'12'});
  });
}

/* Chart: Historical Line */
function renderHistorical(container) {
  const viz = container.querySelector('.viz');
  viz.innerHTML = '';
  const w = 800, h = 450, pad = {l:60,r:20,t:20,b:50};
  const svg = createSVG(w, h);
  viz.appendChild(svg);
  const data = [
    {year:2020, val:3.21},
    {year:2021, val:4.85},
    {year:2022, val:5.42},
    {year:2023, val:3.46},
    {year:2024, val:5.98},
    {year:2025, val:6.93}
  ];
  const min = 0, max = Math.ceil(Math.max(...data.map(d=>d.val)) + 1);
  const x = (i)=> pad.l + (w-pad.l-pad.r) * (i/(data.length-1));
  const y = (v)=> pad.t + (h-pad.t-pad.b) * (1 - (v-min)/(max-min));
  // grid
  const ySteps = 6;
  const axis = document.createElementNS('http://www.w3.org/2000/svg','g');
  axis.setAttribute('stroke','currentColor');
  axis.setAttribute('opacity','0.35');
  for (let i=0;i<=ySteps;i++){
    const yy = pad.t + (h-pad.t-pad.b) * (i/ySteps);
    const line = document.createElementNS('http://www.w3.org/2000/svg','line');
    line.setAttribute('x1', pad.l);
    line.setAttribute('x2', w - pad.r);
    line.setAttribute('y1', yy);
    line.setAttribute('y2', yy);
    axis.appendChild(line);
    const val = Math.round((max) * (1 - i/ySteps)*10)/10;
    svgText(svg, pad.l-8, yy+4, val+'%', {'text-anchor':'end','font-size':'12'});
  }
  svg.appendChild(axis);
  // line
  const pts = data.map((d,i)=>[x(i), y(d.val)]);
  const path = document.createElementNS('http://www.w3.org/2000/svg','path');
  path.setAttribute('d', linePath(pts));
  path.setAttribute('fill','none');
  path.setAttribute('stroke','var(--accent)');
  path.setAttribute('stroke-width','3');
  svg.appendChild(path);
  const tip = addTooltip(viz);
  data.forEach((d,i)=>{
    const cx=x(i), cy=y(d.val);
    const c = document.createElementNS('http://www.w3.org/2000/svg','circle');
    c.setAttribute('cx', cx); c.setAttribute('cy', cy); c.setAttribute('r', 5);
    c.setAttribute('fill','var(--accent)');
    c.addEventListener('mousemove', (e)=>{
      tip.textContent = `Q1 ${d.year}: ${d.val}%`;
      tip.style.left = e.offsetX + 'px'; tip.style.top = e.offsetY + 'px'; tip.style.opacity = 1;
    });
    c.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
    svg.appendChild(c);
    svgText(svg, cx, h-pad.b+18, d.year, {'text-anchor':'middle','font-size':'12'});
  });
}

/* Chart: Forecasts vs Target range */
function renderForecasts(container) {
  const viz = container.querySelector('.viz');
  viz.innerHTML = '';
  const w = 800, h = 450, pad = {l:90,r:40,t:30,b:40};
  const svg = createSVG(w, h);
  viz.appendChild(svg);
  const items = [
    {label:'IMF', val:5.2},
    {label:'World Bank', val:5.8},
    {label:'ADB', val:6.6}
  ];
  const targetRange = [8.3, 8.5];
  const max = Math.max(targetRange[1], ...items.map(i=>i.val)) + 1;
  const min = 0;
  const y = (i)=> pad.t + (h-pad.t-pad.b) * (i/(items.length-1));
  const x = (v)=> pad.l + (w-pad.l-pad.r) * ((v - min)/(max - min));

  // target band
  const band = document.createElementNS('http://www.w3.org/2000/svg','rect');
  band.setAttribute('x', x(targetRange[0]));
  band.setAttribute('y', pad.t);
  band.setAttribute('width', x(targetRange[1]) - x(targetRange[0]));
  band.setAttribute('height', h - pad.t - pad.b);
  band.setAttribute('fill', 'color-mix(in oklab, var(--warning) 25%, transparent)');
  band.setAttribute('rx','8');
  svg.appendChild(band);

  // grid x
  const xSteps = 8;
  const axis = document.createElementNS('http://www.w3.org/2000/svg','g');
  axis.setAttribute('stroke','currentColor'); axis.setAttribute('opacity','0.35');
  for (let i=0;i<=xSteps;i++){
    const xx = pad.l + (w-pad.l-pad.r) * (i/xSteps);
    const line = document.createElementNS('http://www.w3.org/2000/svg','line');
    line.setAttribute('x1', xx); line.setAttribute('x2', xx);
    line.setAttribute('y1', pad.t); line.setAttribute('y2', h - pad.b);
    axis.appendChild(line);
    const val = (min + (max-min) * (i/xSteps)).toFixed(1);
    svgText(svg, xx, h - pad.b + 18, val+'%', {'text-anchor':'middle','font-size':'12'});
  }
  svg.appendChild(axis);

  // points
  const tip = addTooltip(viz);
  items.forEach((it, i) => {
    const cx = x(it.val), cy = y(i);
    const g = document.createElementNS('http://www.w3.org/2000/svg','g');
    const mark = document.createElementNS('http://www.w3.org/2000/svg','circle');
    mark.setAttribute('cx', cx); mark.setAttribute('cy', cy); mark.setAttribute('r', 7);
    mark.setAttribute('fill','var(--accent)');
    const label = document.createElementNS('http://www.w3.org/2000/svg','text');
    label.setAttribute('x', pad.l - 10); label.setAttribute('y', cy + 4);
    label.setAttribute('text-anchor','end'); label.setAttribute('font-size','13');
    label.textContent = it.label;
    g.appendChild(mark); g.appendChild(label);
    g.addEventListener('mousemove', (e)=> {
      tip.textContent = `${it.label}: ${it.val}%`;
      tip.style.left = e.offsetX + 'px';
      tip.style.top = e.offsetY + 'px';
      tip.style.opacity = 1;
    });
    g.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
    svg.appendChild(g);
  });

  // target text
  svgText(svg, x(targetRange[0]), pad.t + 18, `Gov target ${targetRange[0]}–${targetRange[1]}%`, {'font-size':'12'});
}

/* Render all charts */
function renderAllCharts() {
  renderGDPBar(document.getElementById('chart-gdp'));
  renderInflationLines(document.getElementById('chart-inflation'));
  renderUnempDonut(document.getElementById('chart-unemp'));
  renderFDIColumns(document.getElementById('chart-fdi'));
  renderHistorical(document.getElementById('chart-historical'));
  renderForecasts(document.getElementById('chart-forecasts'));
}
renderAllCharts();

/* Resize observer to re-render charts on container resize for crispness */
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(renderAllCharts, 200);
});

/* Download chart as PNG (convert SVG inside .viz) */
document.querySelectorAll('.dl-chart').forEach(btn => {
  btn.addEventListener('click', () => {
    const wrap = document.getElementById(btn.dataset.download).querySelector('.viz');
    const svg = wrap.querySelector('svg');
    if (!svg) { toast('No SVG to export'); return; }
    const s = new XMLSerializer().serializeToString(svg);
    const svgBlob = new Blob([s], {type:'image/svg+xml;charset=utf-8'});
    const url = URL.createObjectURL(svgBlob);
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = 1600; canvas.height = 900; // upscale for clarity
      const ctx = canvas.getContext('2d');
      // background for contrast
      ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--surface') || '#fff';
      ctx.fillRect(0,0,canvas.width,canvas.height);
      ctx.drawImage(img,0,0,canvas.width,canvas.height);
      canvas.toBlob(blob => {
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = btn.dataset.download + '.png';
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(url);
      });
    };
    img.src = url;
  });
});

/* Simple toast */
let toastTimer;
function toast(msg) {
  let el = document.getElementById('toast');
  if (!el) {
    el = document.createElement('div');
    el.id = 'toast';
    Object.assign(el.style, {
      position:'fixed', left:'50%', bottom:'24px', transform:'translateX(-50%)',
      background:'var(--card)', color:'var(--text)', padding:'10px 14px',
      border:'1px solid rgba(128,128,128,.3)', borderRadius:'10px', boxShadow:'var(--shadow)',
      zIndex:10000, opacity:'0', transition:'opacity .2s'
    });
    document.body.appendChild(el);
  }
  el.textContent = msg;
  el.style.opacity = '1';
  clearTimeout(toastTimer);
  toastTimer = setTimeout(()=> el.style.opacity = '0', 1600);
}

/* Preserve scroll to section in URL hash and TOC clicks */
document.querySelectorAll('.toc a').forEach(a => {
  a.addEventListener('click', (e) => {
    // allow default, but also store preference
    localStorage.setItem('lastSection', a.getAttribute('href'));
  });
});

/* Accessibility: keyboard focus for skip */
document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
    e.preventDefault();
    searchInput.focus();
  }
});
</script>
</body>
</html>