Spaces:

thucdangvan020999
/

gpt-4.1-nano

Running

File size: 13,901 Bytes

f9a7599

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vietnam Economic Growth Report 2025</title>
<!-- Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<style>
  :root {
    --primary-color: #006d77;
    --secondary-color: #83c5be;
    --accent-color: #ffd166;
    --background-color: #f4f1de;
    --text-color: #333;
    --header-font: 'Helvetica Neue', Arial, sans-serif;
    --body-font: 'Arial', sans-serif;
  }

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

  html {
    font-size: clamp(14px, 1vw + 10px, 18px);
  }

  body {
    font-family: var(--body-font);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    display: grid;
    grid-template-areas:
      "header"
      "main"
      "footer";
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  header {
    grid-area: header;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  header h1 {
    font-family: var(--header-font);
    font-size: clamp(1.5rem, 2vw, 2rem);
    color: var(--primary-color);
  }

  #container {
    display: grid;
    grid-template-columns: minmax(250px, 300px) 1fr;
    gap: 1rem;
    padding: 1rem;
  }

  nav#toc {
    grid-column: 1;
    position: sticky;
    top: 100px;
    align-self: start;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  nav#toc h2 {
    font-family: var(--header-font);
    font-size: clamp(1.2rem, 1.5vw, 1.5rem);
    margin-bottom: 0.75rem;
    color: var(--primary-color);
  }

  nav#toc ul {
    list-style: none;
  }

  nav#toc li {
    margin-bottom: 0.5rem;
  }

  nav#toc a {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background 0.3s;
  }

  nav#toc a:hover,
  nav#toc a.active {
    background-color: var(--secondary-color);
    color: #fff;
  }

  main {
    grid-column: 2;
    max-width: 1000px;
    width: 100%;
  }

  section {
    margin-bottom: 2rem;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  section h2 {
    font-family: var(--header-font);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    margin-bottom: 1rem;
    color: var(--primary-color);
  }

  h3 {
    font-size: 1.2rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: #444;
  }

  p {
    margin-bottom: 1rem;
  }

  /* Data Visualization */
  .chart-container {
    margin-top: 1rem;
    position: relative;
  }

  canvas {
    width: 100% !important;
    height: auto !important;
  }

  /* Tables */
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.95rem;
  }
  th, td {
    padding: 0.75rem;
    border: 1px solid #ddd;
    text-align: left;
  }
  th {
    background-color: var(--secondary-color);
    color: #fff;
    cursor: pointer;
  }
  tbody tr:hover {
    background-color: #f1f1f1;
  }

  /* Collapsible Sections */
  details {
    margin-top: 1rem;
  }
  details summary {
    cursor: pointer;
    font-weight: bold;
  }

  /* Share / Export Buttons */
  .buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
  }
  button {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.75rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
  }
  button:hover {
    background-color: #005f5f;
  }

  /* Footer */
  footer {
    grid-area: footer;
    padding: 1rem;
    background-color: #fff;
    font-size: 0.9rem;
    text-align: center;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
  }

  /* Responsive */
  @media(max-width: 1024px){
    #container {
      grid-template-columns: 1fr;
    }
    nav#toc {
      position: static;
      margin-bottom: 1rem;
    }
  }

  /* Container Query for charts on wider screens */
  @container (min-width: 768px) {
    .chart-container {
      aspect-ratio: 16 / 9;
    }
  }
</style>
</head>
<body>
<header>
  <h1>Vietnam Economic Growth Report 2025</h1>
</header>
<div id="container">
  <nav id="toc" aria-label="Table of Contents">
    <h2><i class="fas fa-list"></i> Contents</h2>
    <ul>
      <li><a href="#executive-summary" class="active">Executive Summary</a></li>
      <li><a href="#indicators">Key Indicators</a></li>
      <li><a href="#sectoral">Sectoral Analysis</a></li>
      <li><a href="#challenges">Challenges & Risks</a></li>
      <li><a href="#history">Historical Comparison</a></li>
      <li><a href="#outlook">Economic Outlook</a></li>
      <li><a href="#sources">Sources & Citations</a></li>
    </ul>
  </nav>
  <main>
    <section id="executive-summary" data-nav="Executive Summary">
      <h2>Executive Summary</h2>
      <p>Vietnam's economy continues to demonstrate robust growth momentum in 2025, with GDP expanding 7.96% in Q2. The first half of 2025 recorded the highest mid-year performance since 2011, driven by services and manufacturing sectors amidst external challenges like global trade tensions and US tariffs.</p>
    </section>

    <section id="indicators" data-nav="Key Indicators 2025">
      <h2>Key Economic Indicators 2025</h2>
      <h3>1. GDP Growth Performance</h3>
      <p><strong>Actual Results:</strong></p>
      <ul>
        <li><strong>Q1 2025:</strong> 6.9% YoY</li>
        <li><strong>Q2 2025:</strong> 7.96% YoY</li>
        <li><strong>First Half 2025:</strong> 7.52%</li>
      </ul>
      <p><strong>Forecasts:</strong></p>
      <ul>
        <li>World Bank: 5.8%</li>
        <li>ADB: 6.6% (down from 6.3%)</li>
        <li>IMF: 5.2%</li>
        <li>Government Target: 8.3–8.5%</li>
      </ul>

      <h3>2. Inflation Rate</h3>
      <p><strong>2025 Trends:</strong></p>
      <ul>
        <li>May: 3.24%</li>
        <li>June: 3.57% (highest since start of year)</li>
      </ul>
      <p>Forecasts: IMF 2.9%, ADB 4.0%. Inflation remains within safe, manageable range.</p>

      <h3>3. Unemployment Rate</h3>
      <p>Q1 2025: 2.20%, down from 2.22% Q4 2024. Indicates stable labor market.</p>

      <h3>4. Foreign Direct Investment (FDI)</h3>
      <p><strong>First 5 months:</strong> Registered Capital: $18.4B (+51% YoY), Disbursed: $8.9B</p>
      <p><strong>Half-year total:</strong> US$21.51B (+32.6%)</p>

      <h3>Visual Data</h3>
      <div class="chart-container" id="gdp-chart-container">
        <canvas id="gdpChart"></canvas>
      </div>
    </section>

    <section id="sectoral" data-nav="Sectoral Analysis">
      <h2>Sectoral Analysis</h2>
      <h3>Primary Growth Drivers</h3>
      <ul>
        <li>Services Sector: Major contributor</li>
        <li>Manufacturing Sector: Recovering and developing</li>
        <li>Export Industries: Backbone of the economy</li>
        <li>Banking Sector: Projected 17% earnings growth in 2025</li>
      </ul>
      <h3>Retail Performance</h3>
      <p>Q1 2025 retail sales: 1.708 quadrillion VND (US$66.83B), +9.9% YoY.</p>

      <h3>Data Table</h3>
      <table id="retail-table">
        <thead>
          <tr>
            <th>Quarter</th>
            <th>Retail Sales (VND)</th>
            <th>YoY Growth</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Q1 2025</td>
            <td>1.708 quadrillion</td>
            <td>9.9%</td>
          </tr>
        </tbody>
      </table>
    </section>

    <section id="challenges" data-nav="Challenges & Risks">
      <h2>Challenges and Risk Factors</h2>
      <ul>
        <li>Global Trade Tensions impact exports</li>
        <li>US Tariff Policies pressure exporters</li>
        <li>Geopolitical Instability => increased business uncertainty</li>
        <li>Overdependence on FDI => risks of inflation & overreliance</li>
        <li>Need for macroeconomic stability, avoiding public debt surges</li>
      </ul>
    </section>

    <section id="history" data-nav="Historical Comparison">
      <h2>Historical Comparison</h2>
      <p>GDP growth rates (YoY) from 2020 to 2025:</p>
      <ul>
        <li>2020: 3.21%</li>
        <li>2021: 4.85%</li>
        <li>2022: 5.42%</li>
        <li>2023: 3.46%</li>
        <li>2024: 7.1%</li>
        <li>2025 forecast: ~7.52%</li>
      </ul>
    </section>

    <section id="outlook" data-nav="Economic Outlook">
      <h2>Economic Outlook & Projections</h2>
      <p>Vietnam’s economy started strong in 2025 with 6.9% Q1 growth, but faces global uncertainty ahead. The target is 8.3–8.5%, though challenges exist. Fundamental supports include:</p>
      <ul>
        <li>Robust FDI inflows</li>
        <li>Low unemployment</li>
        <li>Controlled inflation</li>
        <li>Export competitiveness</li>
        <li>Parliamentary support raising growth targets</li>
      </ul>
      <h3>Risk Mitigation</h3>
      <p>The government aims to diversify markets, boost domestic demand, and strengthen resilience to global shocks through fiscal and policy measures.</p>
    </section>

    <section id="sources" data-nav="Sources & Citations">
      <h2>Sources and Citations</h2>
      <ul>
        <li><a href="https://tradingeconomics.com/vietnam/gdp-growth-annual" target="_blank" rel="noopener">Trading Economics - Vietnam GDP</a></li>
        <li><a href="https://www.imf.org/en/Countries/VNM" target="_blank" rel="noopener">IMF - Vietnam Profile</a></li>
        <li><a href="https://www.worldeconomics.com/GDP/Vietnam.gdp" target="_blank" rel="noopener">World Economics - Vietnam GDP</a></li>
        <li><a href="https://www.gso.gov.vn/en/" target="_blank" rel="noopener">General Statistics Office Vietnam</a></li>
        <li><a href="https://en.wikipedia.org/wiki/Economy_of_Vietnam" target="_blank" rel="noopener">Wikipedia - Economy of Vietnam</a></li>
        <li><a href="https://www.imf.org/en/Countries/VNM" target="_blank" rel="noopener">IMF Vietnam & the IMF</a></li>
        <li><a href="https://www.focus-economics.com/countries/vietnam" target="_blank" rel="noopener">FocusEconomics</a></li>
        <li><a href="https://www.gso.gov.vn/en/data-and-statistics/" target="_blank" rel="noopener">GSO Data & Statistics</a></li>
        <li><a href="https://vietnamnet.vn/" target="_blank" rel="noopener">VietnamNet - Economic News</a></li>
        <li><a href="https://www.vietnam-briefing.com/" target="_blank" rel="noopener">Vietnam Briefing</a></li>
        <li><a href="https://vir.com.vn/" target="_blank" rel="noopener">Vietnam Investment Review</a></li>
        <li><a href="https://tradingeconomics.com/vietnam/foreign-direct-investment" target="_blank" rel="noopener">Trading Economics - FDI</a></li>
        <li><a href="https://www.whitecase.com/" target="_blank" rel="noopener">White & Case - Outlook</a></li>
        <li><a href="https://vneconomictimes.com/" target="_blank" rel="noopener">Vietnam Economic Times</a></li>
        <li><a href="https://www.adb.org/countries/viet-nam/main" target="_blank" rel="noopener">ADB Vietnam</a></li>
        <li><a href="https://www.mpi.gov.vn/en/" target="_blank" rel="noopener">Ministry of Planning & Investment</a></li>
      </ul>
    </section>
  </main>
</div>
<footer>
  &copy; 2025 Vietnam Economic Data & Analysis | Sources cited accordingly.
</footer>

<!-- Chart.js CDN for charts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // Initialize Chart
  const ctx = document.getElementById('gdpChart').getContext('2d');
  const gdpChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
      datasets: [{
        label: 'GDP Growth %',
        data: [3.21, 4.85, 5.42, 3.46, 7.1, 7.52],
        backgroundColor: 'var(--primary-color)',
        borderColor: '#000',
        borderWidth: 1,
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        legend: { display: false },
        tooltip: { mode: 'index', intersect: false },
        title: {
          display: false,
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            callback: function(value){return value + "%";},
            stepSize: 2
          }
        }
      }
    }
  });

  // Navigation highlighting
  const tocLinks = document.querySelectorAll('nav#toc a');
  const sections = Array.from(document.querySelectorAll('main section'));
  const sectionMap = new Map();

  sections.forEach(sec => {
    sectionMap.set(sec.id, sec);
  });

  const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.4
  };

  const sectionObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if(entry.isIntersecting){
        const id = entry.target.id;
        tocLinks.forEach(link => {
          link.classList.toggle('active', link.getAttribute('href').slice(1) === id);
        });
      }
    });
  }, observerOptions);

  sections.forEach(sec => sectionObserver.observe(sec));

  // Smooth scroll
  document.querySelectorAll('nav#toc a').forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault();
      const targetId = link.getAttribute('href').slice(1);
      document.getElementById(targetId).scrollIntoView({behavior: 'smooth'});
    });
  });

  // Copy current URL to clipboard (for share functionality)
  // Optional: if you'd like to have a share button, you can add it
  // For now, just a simple alert example
  // (can be implemented on a separate button if needed)

  // Additional enhancements like filtering tables, collapsible sections can be added similarly
</script>
</body>
</html>