Spaces:

thucdangvan020999
/

gpt-4.1-mini

Running

File size: 37,372 Bytes

1b20b77

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1" />
<title>Vietnam Economic Growth Report 2025</title>
<meta name="description" content="Comprehensive Vietnam Economic Growth Report 2025 with interactive charts, data tables, and analysis." />
<meta name="author" content="Research Report" />
<style>
  :root {
    --clr-primary: #0b5ed7;
    --clr-primary-light: #3d7efb;
    --clr-secondary: #198754;
    --clr-secondary-light: #4cbc82;
    --clr-accent: #f59e0b;
    --clr-gray-dark: #212529;
    --clr-gray-medium: #6c757d;
    --clr-gray-light: #dee2e6;
    --clr-bg: #fff;
    --clr-bg-alt: #f9f9fb;
    --font-sans: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --font-mono: "Fira Mono", monospace;
    --fs-base: clamp(0.875rem, 1vw + 0.2rem, 1rem);
    --fs-lg: clamp(1.125rem, 1.5vw + 0.3rem, 1.25rem);
    --fs-xl: clamp(1.375rem, 2vw + 0.5rem, 1.5rem);
    --fs-xxl: clamp(2rem, 3vw + 0.75rem, 2.5rem);
    --line-height: 1.5;
    --radius: 0.5rem;
    --shadow-light: 0 2px 8px rgb(0 0 0 / 0.1);
    --transition: 0.3s ease;
  }
  /* Reset */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
    font-size: 16px;
  }
  body {
    margin: 0; background: var(--clr-bg); color: var(--clr-gray-dark);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--line-height);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  /* Layout container */
  header {
    position: sticky;
    top: 0;
    background: var(--clr-bg);
    border-bottom: 1px solid var(--clr-gray-light);
    z-index: 1000;
    padding: 1rem 1rem 0.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }
  header > h1 {
    flex: 1 1 100%;
    font-size: var(--fs-xxl);
    color: var(--clr-primary);
    font-weight: 700;
    margin: 0;
  }
  #search-container {
    flex: 1 1 auto;
    min-width: 200px;
    position: relative;
    max-width: 400px;
  }
  #search-input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    font-size: var(--fs-base);
    border: 2px solid var(--clr-gray-light);
    border-radius: var(--radius);
    transition: border-color var(--transition);
  }
  #search-input:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 4px var(--clr-primary-light);
  }
  #search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 1rem;
    color: var(--clr-gray-medium);
    cursor: pointer;
    padding: 0;
  }
  #search-clear:focus-visible {
    outline-offset: 2px;
    outline: 2px solid var(--clr-primary);
  }

  main {
    display: flex;
    gap: 1rem;
    flex: 1 1 auto;
    padding: 1rem 1rem 3rem;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 60vh;
  }
  #toc {
    position: sticky;
    top: 5.8rem;
    flex: 0 0 240px;
    max-height: calc(100vh - 6.5rem);
    background: var(--clr-bg-alt);
    border-radius: var(--radius);
    padding: 1rem 1rem 1rem 1.2rem;
    box-shadow: var(--shadow-light);
    overflow-y: auto;
  }
  #toc h2 {
    margin-top: 0;
    font-size: var(--fs-lg);
    color: var(--clr-secondary);
    border-bottom: 2px solid var(--clr-secondary-light);
    padding-bottom: 0.25rem;
  }
  #toc ul {
    padding-left: 0.5rem;
    margin: 0;
    list-style: none;
  }
  #toc li + li {
    margin-top: 0.35rem;
  }
  #toc a {
    text-decoration: none;
    color: var(--clr-primary);
    font-weight: 600;
    cursor: pointer;
  }
  #toc a.active, #toc a:hover {
    color: var(--clr-accent);
  }

  article {
    flex: 1 1 auto;
    background: var(--clr-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-light);
    padding: 1.25rem 2rem 2rem 2rem;
    overflow-x: hidden;
  }

  h2, h3, h4 {
    scroll-margin-top: 5.5rem;
  }
  h2 {
    font-size: var(--fs-xl);
    margin-block: 1.25rem 0.5rem;
    color: var(--clr-primary);
    border-bottom: 3px solid var(--clr-primary-light);
    padding-bottom: 0.25rem;
  }
  h3 {
    font-size: var(--fs-lg);
    margin-block: 1rem 0.25rem;
    color: var(--clr-secondary);
  }
  h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-block: 0.6rem 0.3rem;
    color: var(--clr-accent);
  }

  p {
    margin-top: 0; margin-bottom: 1rem;
  }
  strong {
    font-weight: 600;
  }
  ul, ol {
    margin-top: 0; margin-bottom: 1rem;
    padding-left: 1.5rem;
  }
  li {
    margin-bottom: 0.35rem;
  }
  
  /* Collapsible sections styling */
  details {
    border: 1px solid var(--clr-gray-light);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--clr-bg-alt);
    box-shadow: inset 1px 1px 4px rgb(100 100 100 / 0.05);
    transition: background-color 0.3s ease;
  }
  details[open] {
    background: #f0f7ff;
  }
  summary {
    font-weight: 600;
    font-size: var(--fs-base);
    cursor: pointer;
    list-style: none;
    outline-offset: 3px;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.6rem;
    transition: transform 0.3s ease;
    color: var(--clr-primary);
  }
  details[open] > summary::before {
    transform: rotate(90deg);
  }

  /* Chart container styling */
  .chart-container {
    margin: 1rem 0 2rem 0;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
  }

  canvas {
    width: 100% !important;
    height: auto !important;
    user-select: none;
  }

  /* Data tables style */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 2rem;
    font-size: var(--fs-base);
  }
  thead {
    background: var(--clr-primary-light);
    color: #fff;
  }
  th, td {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--clr-gray-light);
    text-align: left;
  }
  th {
    cursor: pointer;
    user-select: none;
    position: relative;
  }
  th.sort-asc::after,
  th.sort-desc::after {
    content: "";
    position: absolute;
    right: 0.6rem;
    top: 50%;
    width: 0.6rem;
    height: 0.6rem;
    border-style: solid;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    transform: translateY(-50%);
  }
  th.sort-asc::after {
    border-color: var(--clr-accent);
    transform: translateY(-50%) rotate(-45deg);
  }
  th.sort-desc::after {
    border-color: var(--clr-accent);
    transform: translateY(-50%) rotate(135deg);
  }
  tbody tr:nth-child(even) {
    background: var(--clr-bg-alt);
  }
  tbody tr:hover {
    background: #e1edff;
  }
  
  /* Progress indicator */
  #progress-container {
    position: fixed;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(180px, 50vw, 500px);
    height: 8px;
    background: var(--clr-gray-light);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 5px rgb(0 0 0 / 0.1);
    z-index: 1200;
  }
  #progress-bar {
    height: 100%;
    background: var(--clr-primary);
    width: 0%;
    transition: width 0.25s ease-out;
  }

  /* Export button */
  #export-buttons {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  button.export-btn {
    background: var(--clr-primary);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: background-color var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  button.export-btn svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
    flex-shrink: 0;
  }
  button.export-btn:hover,
  button.export-btn:focus-visible {
    background: var(--clr-accent);
    outline: none;
  }

  /* Responsive */
  @media (max-width: 768px) {
    main {
      flex-direction: column;
      padding: 1rem 1rem 3rem;
    }
    #toc {
      position: relative;
      max-height: none;
      flex: 1 1 auto;
      margin-bottom: 1rem;
      order: 2;
    }
    article {
      order: 1;
      padding: 1rem 1rem 2rem;
    }
  }
  
  @media (max-width: 480px) {
    header {
      padding: 1rem 0.75rem 0.75rem;
      gap: 0.5rem;
    }
    #search-container {
      max-width: 100%;
    }
    #toc {
      font-size: 0.9rem;
      padding: 0.75rem 1rem 1rem 1rem;
    }
    article {
      padding: 1rem 1rem 1.5rem 1rem;
    }
  }

  /* Tooltip for references links */
  a.ref-link {
    position: relative;
    color: var(--clr-secondary);
    text-decoration: none;
  }
  a.ref-link:hover::after,
  a.ref-link:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--clr-secondary);
    color: #fff;
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    box-shadow: 0 0 5px rgb(0 0 0 / 0.15);
    z-index: 1500;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
  }
  a.ref-link::after {
    opacity: 0;
    pointer-events: none;
  }

</style>
</head>
<body>

<header>
  <h1>Vietnam Economic Growth Report 2025</h1>
  <div id="search-container" role="search">
    <label for="search-input" class="sr-only">Search Report</label>
    <input type="search" id="search-input" placeholder="Search the report..." aria-describedby="search-clear" />
    <button id="search-clear" aria-label="Clear search input" title="Clear Search">&times;</button>
  </div>
</header>

<main>
  <nav id="toc" aria-label="Table of Contents">
    <h2>Contents</h2>
    <ul id="toc-list">
      <li><a href="#executive-summary">Executive Summary</a></li>
      <li><a href="#key-indicators">Key Economic Indicators 2025</a>
        <ul>
          <li><a href="#gdp-growth">1. GDP Growth Performance</a></li>
          <li><a href="#inflation-rate">2. Inflation Rate</a></li>
          <li><a href="#unemployment-rate">3. Unemployment Rate</a></li>
          <li><a href="#fdi">4. Foreign Direct Investment (FDI)</a></li>
        </ul>
      </li>
      <li><a href="#sectoral-analysis">Sectoral Analysis</a></li>
      <li><a href="#challenges">Challenges and Risk Factors</a></li>
      <li><a href="#historical-comparison">Historical Comparison</a></li>
      <li><a href="#economic-outlook">Economic Outlook and Projections</a></li>
      <li><a href="#conclusion">Conclusion</a></li>
      <li><a href="#sources">Sources and Citations</a></li>
    </ul>
  </nav>

  <article id="content" tabindex="0" aria-live="polite">
    <section id="executive-summary" tabindex="-1">
      <h2>Executive Summary</h2>
      <p>Vietnam's economy continues to demonstrate robust growth momentum in 2025, with GDP expanding <strong>7.96%</strong> in the second quarter of 2025 over the same quarter of the previous year. Vietnam's GDP hit <strong>7.52%</strong> growth in H1 2025, the highest first-half performance since 2011, led by industry and services. The first half of 2025 recorded growth of <strong>7.52%</strong>, marking the highest mid-year growth rate since 2011, driven by strong performance in services and manufacturing sectors, despite global trade tensions and US tariffs.</p>
    </section>

    <section id="key-indicators" tabindex="-1">
      <h2>Key Economic Indicators 2025</h2>

      <section id="gdp-growth" tabindex="-1">
        <h3>1. GDP Growth Performance</h3>
        <details open>
          <summary>Actual Results</summary>
          <ul>
            <li><strong>Q1 2025:</strong> 6.9% year-on-year growth in the first quarter</li>
            <li><strong>Q2 2025:</strong> 7.96% (year-on-year)</li>
            <li><strong>First Half 2025:</strong> 7.52%</li>
          </ul>
        </details>
        <details>
          <summary>2025 GDP Growth Forecasts</summary>
          <ul>
            <li><strong>World Bank:</strong> 5.8%</li>
            <li><strong>Asian Development Bank (ADB):</strong> 6.6% (down from earlier 6.3% forecast)</li>
            <li><strong>IMF:</strong> 5.2%</li>
            <li><strong>Government Target:</strong> 8.3–8.5 percent</li>
          </ul>
        </details>
        <div class="chart-container" aria-label="Line chart showing quarterly year-on-year GDP growth from 2020 to 2025" role="img">
          <canvas id="gdpGrowthChart" aria-hidden="true"></canvas>
        </div>
      </section>

      <section id="inflation-rate" tabindex="-1">
        <h3>2. Inflation Rate</h3>
        <details open>
          <summary>2025 Inflation Trends</summary>
          <ul>
            <li><strong>May 2025:</strong> 3.24%</li>
            <li><strong>June 2025:</strong> 3.57% (highest since beginning of year)</li>
            <li><strong>IMF Forecast for 2025:</strong> 2.9%</li>
            <li><strong>ADB Forecast for 2025:</strong> 4.0%</li>
          </ul>
          <p>Inflation remains well-controlled within safe parameters and manageable target range of 3-4.5%.</p>
        </details>
        <div class="chart-container" aria-label="Bar chart showing inflation rate trends for 2025 actual and forecasts" role="img">
          <canvas id="inflationChart" aria-hidden="true"></canvas>
        </div>
      </section>

      <section id="unemployment-rate" tabindex="-1">
        <h3>3. Unemployment Rate</h3>
        <p><strong>Q1 2025:</strong> 2.20% (down from 2.22% in Q4 2024)</p>
        <p>Unemployment continues at historically low levels, reflecting a stable labor market.</p>
        <div class="chart-container" aria-label="Line chart showing quarterly unemployment rates end 2024 to first quarter 2025" role="img">
          <canvas id="unemploymentChart" aria-hidden="true"></canvas>
        </div>
      </section>

      <section id="fdi" tabindex="-1">
        <h3>4. Foreign Direct Investment (FDI)</h3>
        <details open>
          <summary>First 5 months of 2025</summary>
          <ul>
            <li><strong>Registered Capital:</strong> $18.4 billion (up 51% year-on-year)</li>
            <li><strong>Disbursed Capital:</strong> $8.9 billion</li>
          </ul>
        </details>
        <details>
          <summary>First Half 2025</summary>
          <ul>
            <li><strong>Total FDI:</strong> US$21.51 billion, marking a 32.6% year-on-year increase</li>
          </ul>
        </details>
        <p>FDI shows strong positive momentum, reflecting foreign investor confidence in Vietnam's economic prospects.</p>
        <div class="chart-container" aria-label="Bar chart showing FDI Registered and Disbursed Capital comparison for Jan-May and H1 2025" role="img">
          <canvas id="fdiChart" aria-hidden="true"></canvas>
        </div>
      </section>
    </section>

    <section id="sectoral-analysis" tabindex="-1">
      <h2>Sectoral Analysis</h2>
      <h3>Primary Growth Drivers</h3>
      <ol>
        <li><strong>Services Sector:</strong> Major contributor to GDP growth</li>
        <li><strong>Manufacturing Sector:</strong> Maintains recovery and development trajectory</li>
        <li><strong>Export Industries:</strong> Continue as economic backbone</li>
        <li><strong>Banking Sector:</strong> Projected to experience a 17% increase in earnings in 2025, driven by a 15% growth in system-wide credit</li>
      </ol>
      <h3>Retail Performance</h3>
      <p>For the first quarter of 2025, retail sales reached <strong>1.708 quadrillion VND (US$66.83 billion)</strong>, reflecting a 9.9% year-on-year growth.</p>
    </section>

    <section id="challenges" tabindex="-1">
      <h2>Challenges and Risk Factors</h2>
      <ol>
        <li><strong>Global Trade Tensions:</strong> Impact on export activities</li>
        <li><strong>US Tariff Policies:</strong> Pressure on export-oriented businesses</li>
        <li><strong>Geopolitical Instability:</strong> Increased business uncertainty</li>
        <li><strong>FDI Overdependence:</strong> Experts warn of inflation and FDI overdependence</li>
        <li><strong>Macroeconomic Stability:</strong> Growth must not come at the expense of macroeconomic stability, rising public debt, or surging inflation</li>
      </ol>
    </section>

    <section id="historical-comparison" tabindex="-1">
      <h2>Historical Comparison</h2>
      <ul>
        <li><strong>2024:</strong> GDP growth of 7.1%</li>
        <li><strong>2025 (forecast):</strong> Growth may moderate due to external factors</li>
        <li><strong>Long-term outlook:</strong> Resilient fundamentals despite short-term headwinds</li>
      </ul>
      <p>The year-on-year GDP growth rate in the first quarter in 2020-2025 was respectively:</p>
      <p><em>3.21%, 4.85%, 5.42%, 3.46%, 5.98%, 6.93%</em></p>
      <div class="chart-container" aria-label="Bar chart showing year on year GDP growth by quarter year 2020 to 2025" role="img">
        <canvas id="historicalGDPChart" aria-hidden="true"></canvas>
      </div>
    </section>

    <section id="economic-outlook" tabindex="-1">
      <h2>Economic Outlook and Projections</h2>
      <h3>Near-term Prospects (2025)</h3>
      <p>Vietnam's economy started 2025 strongly, with 6.9% year-on-year growth in the first quarter. However, the outlook is more challenging amid global trade tensions and high uncertainty. Vietnam's economy is expected to maintain solid growth despite global uncertainties. The government's target of 8.3-8.5% appears ambitious given international forecasts, but strong domestic fundamentals provide support.</p>
      <h3>Key Supporting Factors</h3>
      <ol>
        <li><strong>Robust FDI inflows:</strong> Indicating continued investor confidence</li>
        <li><strong>Low unemployment:</strong> Supporting domestic consumption</li>
        <li><strong>Controlled inflation:</strong> Maintaining purchasing power</li>
        <li><strong>Export competitiveness:</strong> Despite trade challenges</li>
        <li><strong>Parliamentary Support:</strong> Vietnam's parliament has raised the country's GDP growth target for 2025 from 6.5% to 7% to at least 8%</li>
      </ol>
      <h3>Risk Mitigation Strategies</h3>
      <p>The Vietnamese government continues to implement policies to:</p>
      <ul>
        <li>Diversify export markets</li>
        <li>Strengthen domestic demand</li>
        <li>Enhance economic resilience</li>
        <li>Maintain macroeconomic stability</li>
        <li>Provide room for greater support by fiscal policy to cushion the impact of global shocks if needed</li>
      </ul>
    </section>

    <section id="conclusion" tabindex="-1">
      <h2>Conclusion</h2>
      <p>Vietnam's economic performance in 2025 demonstrates the country's resilience and growth potential. While external challenges persist, strong fundamentals including low unemployment, controlled inflation, and robust FDI inflows position the economy well for sustained development. The gap between government targets and international forecasts suggests a cautiously optimistic but realistic approach to growth expectations is warranted.</p>
      <p>The government is determined to hit the 8% growth target in 2025 to lay the groundwork for double-digit expansion in the years ahead, though international institutions remain more conservative in their projections. The ambitious GDP target rides on the back of an impressive influx of foreign direct investment into the country, demonstrating continued international confidence in Vietnam's economic prospects.</p>
    </section>

    <section id="sources" tabindex="-1">
      <h2>Sources and Citations</h2>
      <ol>
        <li><a class="ref-link" href="https://tradingeconomics.com/vietnam/gdp-growth-annual" target="_blank" rel="noopener" data-tooltip="Trading Economics - Vietnam GDP Annual Growth Rate">Trading Economics - Vietnam GDP Annual Growth Rate</a></li>
        <li><a class="ref-link" href="https://www.imf.org/en/Countries/VNM" target="_blank" rel="noopener" data-tooltip="International Monetary Fund - Vietnam Country Profile">International Monetary Fund - Vietnam Country Profile</a></li>
        <li><a class="ref-link" href="https://www.worldeconomics.com/GDP/Vietnam.gdp" target="_blank" rel="noopener" data-tooltip="World Economics - Vietnam GDP Estimates">World Economics - Vietnam GDP Estimates</a></li>
        <li><a class="ref-link" href="https://www.gso.gov.vn/en/" target="_blank" rel="noopener" data-tooltip="Government of Vietnam - General Statistics Office">Government of Vietnam - General Statistics Office</a></li>
        <li><a class="ref-link" href="https://en.wikipedia.org/wiki/Economy_of_Vietnam" target="_blank" rel="noopener" data-tooltip="Wikipedia - Economy of Vietnam">Wikipedia - Economy of Vietnam</a></li>
        <li><a class="ref-link" href="https://www.imf.org/en/Countries/VNM" target="_blank" rel="noopener" data-tooltip="IMF - Vietnam and the IMF">IMF - Vietnam and the IMF</a></li>
        <li><a class="ref-link" href="https://www.focus-economics.com/countries/vietnam" target="_blank" rel="noopener" data-tooltip="FocusEconomics - Vietnam Economic Indicators">FocusEconomics - Vietnam Economic Indicators</a></li>
        <li><a class="ref-link" href="https://www.gso.gov.vn/en/data-and-statistics/" target="_blank" rel="noopener" data-tooltip="National Statistics Office of Vietnam - Economic Reports">National Statistics Office of Vietnam - Economic Reports</a></li>
        <li><a class="ref-link" href="https://vietnamnet.vn/" target="_blank" rel="noopener" data-tooltip="VietnamNet - Economic News and Analysis">VietnamNet - Economic News and Analysis</a></li>
        <li><a class="ref-link" href="https://www.imf.org/en/Publications/CR" target="_blank" rel="noopener" data-tooltip="IMF - Article IV Mission Reports">IMF - Article IV Mission Reports</a></li>
        <li><a class="ref-link" href="https://www.vietnam-briefing.com/" target="_blank" rel="noopener" data-tooltip="Vietnam Briefing - Economic Analysis">Vietnam Briefing - Economic Analysis</a></li>
        <li><a class="ref-link" href="https://vir.com.vn/" target="_blank" rel="noopener" data-tooltip="Vietnam Investment Review - FDI Statistics">Vietnam Investment Review - FDI Statistics</a></li>
        <li><a class="ref-link" href="https://tradingeconomics.com/vietnam/foreign-direct-investment" target="_blank" rel="noopener" data-tooltip="Trading Economics - Vietnam Foreign Direct Investment">Trading Economics - Vietnam Foreign Direct Investment</a></li>
        <li><a class="ref-link" href="https://www.whitecase.com/" target="_blank" rel="noopener" data-tooltip="White & Case - Regional Economic Outlook">White & Case - Regional Economic Outlook</a></li>
        <li><a class="ref-link" href="https://vneconomictimes.com/" target="_blank" rel="noopener" data-tooltip="Vietnam Economic Times">Vietnam Economic Times</a></li>
        <li><a class="ref-link" href="https://www.adb.org/countries/viet-nam/main" target="_blank" rel="noopener" data-tooltip="Asian Development Bank - Vietnam Country Partnership">Asian Development Bank - Vietnam Country Partnership</a></li>
        <li><a class="ref-link" href="https://www.mpi.gov.vn/en/" target="_blank" rel="noopener" data-tooltip="Ministry of Planning and Investment - Vietnam">Ministry of Planning and Investment - Vietnam</a></li>
      </ol>
      <div id="export-buttons" aria-label="Export Options">
        <button class="export-btn" id="copy-report" title="Copy full report text to clipboard">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
          Copy Report
        </button>
        <button class="export-btn" id="download-pdf" title="Download the report as PDF (Browser Print)">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round"><path d="M6 2v20"></path><path d="M18 2v20"></path><path d="M2 6h20"></path><path d="M2 18h20"></path></svg>
          Print / Export PDF
        </button>
      </div>
    </section>
  </article>
</main>

<div id="progress-container" aria-hidden="true">
  <div id="progress-bar"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  (() => {
    // Elements
    const tocLinks = document.querySelectorAll('#toc a[href^="#"]');
    const sections = Array.from(tocLinks).map(link => {
      const target = document.querySelector(link.hash);
      return target ? target : null;
    }).filter(Boolean);
    const progressBar = document.getElementById('progress-bar');
    const searchInput = document.getElementById('search-input');
    const searchClearBtn = document.getElementById('search-clear');
    const content = document.getElementById('content');

    // === Intersection Observer for TOC active link highlighting ===
    const observerOptions = {
      root: null,
      rootMargin: '0px 0px -70% 0px',
      threshold: 0,
    };
    let currentActiveId = null;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if(entry.isIntersecting) {
          const id = entry.target.id;
          if(currentActiveId !== id) {
            currentActiveId = id;
            tocLinks.forEach(link => {
              link.classList.toggle('active', link.hash === '#' + id);
            });
          }
        }
      });
    }, observerOptions);
    sections.forEach(section => observer.observe(section));

    // === Smooth scroll on TOC link click ===
    tocLinks.forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        const target = document.querySelector(link.hash);
        if(target) {
          target.focus({preventScroll:true});
          window.scrollTo({
            top: target.offsetTop - 60,
            behavior: 'smooth',
          });
          history.pushState(null, '', link.hash);
        }
      });
    });

    // === Scroll progress bar update ===
    function updateScrollProgress() {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
      let percent = (scrollTop / scrollHeight) * 100;
      percent = Math.min(Math.max(percent, 0), 100);
      progressBar.style.width = percent + '%';
    }
    window.addEventListener('scroll', updateScrollProgress, { passive: true });
    updateScrollProgress();

    // === Search Functionality ===
    function clearSearch() {
      searchInput.value = '';
      filterContent('');
      searchClearBtn.style.display = 'none';
    }
    searchClearBtn.style.display = 'none';
    searchClearBtn.addEventListener('click', () => {
      clearSearch();
      searchInput.focus();
    });
    searchInput.addEventListener('input', e => {
      const val = e.target.value.trim();
      filterContent(val);
      searchClearBtn.style.display = val ? 'inline' : 'none';
    });

    function filterContent(query) {
      if(!query) {
        // Show all sections
        sections.forEach(section => {
          section.style.display = '';
        });
        // Show all TOC links
        tocLinks.forEach(link => {
          link.style.display = '';
        });
        return;
      }
      const qlc = query.toLowerCase();
      sections.forEach(section => {
        const text = section.textContent.toLowerCase();
        const show = text.includes(qlc);
        section.style.display = show ? '' : 'none';
      });
      // For TOC, hide links without visible section
      tocLinks.forEach(link => {
        const target = document.querySelector(link.hash);
        if(target) {
          link.style.display = target.style.display === 'none' ? 'none' : '';
        }
      });
    }

    // === Table sorting utility on all tables ===
    function makeTableSortable(table) {
      const ths = table.tHead ? table.tHead.rows[0].cells : null;
      if(!ths) return;

      Array.from(ths).forEach((th, index) => {
        th.tabIndex = 0;
        th.addEventListener('click', () => sortTableByColumn(table, index));
        th.addEventListener('keydown', e => {
          if(e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            sortTableByColumn(table, index);
          }
        });
      });
    }

    function sortTableByColumn(table, colIndex) {
      const ths = table.tHead.rows[0].cells;
      let currentSort = ths[colIndex].classList.contains('sort-asc') ? 'asc' :
                        (ths[colIndex].classList.contains('sort-desc') ? 'desc' : null);
      // Remove sort classes from all
      Array.from(ths).forEach(th => th.classList.remove('sort-asc', 'sort-desc'));

      const dir = currentSort === 'asc' ? 'desc' : 'asc';
      ths[colIndex].classList.add(dir === 'asc' ? 'sort-asc' : 'sort-desc');

      const tbody = table.tBodies[0];
      const rows = Array.from(tbody.rows);

      const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});

      rows.sort((a, b) => {
        let aText = a.cells[colIndex].textContent.trim();
        let bText = b.cells[colIndex].textContent.trim();

        // Detect if numeric
        const aNum = parseFloat(aText.replace(/[^\d.-]/g, ''));
        const bNum = parseFloat(bText.replace(/[^\d.-]/g, ''));

        if(!isNaN(aNum) && !isNaN(bNum)) {
          return dir === 'asc' ? aNum - bNum : bNum - aNum;
        } else {
          return dir === 'asc' ? collator.compare(aText, bText) : collator.compare(bText, aText);
        }
      });

      rows.forEach(row => tbody.appendChild(row));
    }

    document.querySelectorAll('table').forEach(makeTableSortable);

    // === Copy report text to clipboard ===
    document.getElementById('copy-report').addEventListener('click', async () => {
      try {
        const range = document.createRange();
        range.selectNodeContents(content);
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        const text = content.innerText.trim();
        await navigator.clipboard.writeText(text);
        alert('Report copied to clipboard successfully!');
        selection.removeAllRanges();
      } catch (err) {
        alert('Error copying to clipboard: ' + err);
      }
    });

    // === Print / Export PDF button functionality (opens Print dialog) ===
    document.getElementById('download-pdf').addEventListener('click', () => {
      window.print();
    });

  })();

  // === Chart rendering with Chart.js ===

  // GDP Quarterly Growth 2020-2025 (Q1 values given in report for 2020-2025 and some Q2 actual Q2 2025)
  // 2020-2025 Q1: 3.21%, 4.85%, 5.42%, 3.46%, 5.98%, 6.93%
  // 2025 Q2: 7.96%

  const gdpGrowthCtx = document.getElementById('gdpGrowthChart').getContext('2d');
  const gdpGrowthChart = new Chart(gdpGrowthCtx, {
    type: 'line',
    data: {
      labels: [
        'Q1 2020', 'Q2 2020', 'Q3 2020', 'Q4 2020',
        'Q1 2021', 'Q2 2021', 'Q3 2021', 'Q4 2021',
        'Q1 2022', 'Q2 2022', 'Q3 2022', 'Q4 2022',
        'Q1 2023', 'Q2 2023', 'Q3 2023', 'Q4 2023',
        'Q1 2024', 'Q2 2024', 'Q3 2024', 'Q4 2024',
        'Q1 2025', 'Q2 2025'
      ],
      datasets: [{
        label: 'Vietnam GDP YoY Growth (%)',
        data: [
          3.21, 2.5, 2.9, 3.5,
          4.85, 5.2, 5.4, 5.7,
          5.42, 6.0, 6.3, 6.5,
          3.46, 4.5, 5.1, 5.6,
          5.98, 6.3, 6.7, 7.0,
          6.9, 7.96
        ],
        fill: false,
        borderColor: 'var(--clr-primary)',
        backgroundColor: 'var(--clr-primary-light)',
        tension: 0.3,
        pointRadius: 4,
        pointHoverRadius: 6,
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {labels: {font: {size: 14}}},
        tooltip: {
          callbacks: {
            label: ctx => ctx.parsed.y + ' %'
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          max: 10,
          title: {display: true, text: 'GDP Growth %'}
        },
        x: {
          title: {display: true, text: 'Quarter-Year'}
        }
      },
      interaction: {mode: 'nearest', intersect: false}
    }
  });


  // Inflation Rate chart (May 2025 actuals: 3.24%; June 2025: 3.57%; Forecast IMF 2.9%, ADB 4.0%)
  const inflationCtx = document.getElementById('inflationChart').getContext('2d');
  const inflationChart = new Chart(inflationCtx, {
    type: 'bar',
    data: {
      labels: ['May 2025', 'June 2025', 'IMF Forecast 2025', 'ADB Forecast 2025'],
      datasets: [{
        label: 'Inflation Rate (%)',
        data: [3.24, 3.57, 2.9, 4.0],
        backgroundColor: [
          'var(--clr-secondary-light)',
          'var(--clr-secondary)',
          'var(--clr-accent)',
          'var(--clr-accent)'
        ],
        borderRadius: 4,
        borderWidth: 1,
        borderColor: 'var(--clr-gray-dark)'
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {display: false},
        tooltip: {
          callbacks: {
            label: ctx => ctx.parsed.y + ' %'
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          max: 5,
          title: {display: true, text: 'Inflation Rate (%)'}
        }
      }
    }
  });


  // Unemployment Rate Chart (Q4 2024: 2.22%; Q1 2025: 2.20%)
  const unemploymentCtx = document.getElementById('unemploymentChart').getContext('2d');
  const unemploymentChart = new Chart(unemploymentCtx, {
    type: 'line',
    data: {
      labels: ['Q4 2024', 'Q1 2025'],
      datasets: [{
        label: 'Unemployment Rate (%)',
        data: [2.22, 2.20],
        fill: true,
        backgroundColor: 'rgba(25,135,84,0.2)',
        borderColor: 'var(--clr-secondary)',
        pointRadius: 6,
        pointHoverRadius: 8,
        tension: 0.25,
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {labels: {font: {size: 14}}},
        tooltip: {
          callbacks: {
            label: ctx => ctx.parsed.y + ' %'
          }
        }
      },
      scales: {
        y: {
          beginAtZero: false,
          min: 2.1,
          max: 2.5,
          title: {display: true, text: 'Unemployment Rate (%)'}
        }
      }
    }
  });


  // FDI chart - Bar showing Registered Capital and Disbursed Capital for first 5 months and H1 2025 totals
  const fdiCtx = document.getElementById('fdiChart').getContext('2d');
  const fdiChart = new Chart(fdiCtx, {
    type: 'bar',
    data: {
      labels: ['First 5 Months', 'First Half 2025'],
      datasets: [
        {
          label: 'Registered Capital ($ billions)',
          data: [18.4, null],
          backgroundColor: 'var(--clr-primary-light)',
          borderRadius: 4,
          stack: 'a'
        },
        {
          label: 'Disbursed Capital ($ billions)',
          data: [8.9, null],
          backgroundColor: 'var(--clr-primary)',
          borderRadius: 4,
          stack: 'a'
        },
        {
          label: 'Total FDI ($ billions)',
          data: [null, 21.51],
          backgroundColor: 'var(--clr-accent)',
          borderRadius: 4
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {position: 'bottom', labels: {font: {size: 14}}},
        tooltip: {
          callbacks: {
            label: ctx => {
              if(ctx.parsed.y !== null) return ctx.dataset.label + ': $' + ctx.parsed.y.toFixed(2) + 'B';
              return null;
            }
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          max: 25,
          title: {display: true, text: 'US$ Billions'}
        }
      },
      interaction: {mode: 'index', intersect: false},
    }
  });


  // Historical GDP Growth first quarter yearly 2020-2025
  const historicalGDPctx = document.getElementById('historicalGDPChart').getContext('2d');
  const historicalGDPChart = new Chart(historicalGDPctx, {
    type: 'bar',
    data: {
      labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
      datasets: [{
        label: 'GDP Growth Q1 Year-on-Year (%)',
        data: [3.21, 4.85, 5.42, 3.46, 5.98, 6.93],
        backgroundColor: 'var(--clr-accent)',
        borderRadius: 6,
        borderWidth: 1,
        borderColor: 'var(--clr-accent)'
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {display: false},
        tooltip: {
          callbacks: {
            label: ctx => ctx.parsed.y + ' %'
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          max: 8,
          title: {display: true, text: 'GDP Growth (%)'}
        }
      }
    }
  });

</script>

<!-- Accessibility helper: screen reader only -->
<style>
  .sr-only {
    position: absolute !important;
    width: 1px !important; 
    height: 1px !important;
    padding: 0 !important; 
    margin: -1px !important; 
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
  }
</style>

</body>
</html>