Spaces:

thucdangvan020999
/

gpt41

Running

App Files Files Community

thucdangvan020999 commited on Aug 1, 2025

Commit

b43c43c

verified ·

1 Parent(s): 85e547c

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +1122 -19

index.html CHANGED Viewed

@@ -1,19 +1,1122 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Vietnam Economic Growth Report 2025</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
+  <style>
+    :root {
+      --primary: #06705c;
+      --secondary: #34b88b;
+      --accent: #fedb41;
+      --danger: #dc3545;
+      --bg: #f9fafb;
+      --card-bg: #fff;
+      --text-main: #232931;
+      --text-muted: #8993a4;
+      --border: #e2e8f0;
+      --shadow: 0 2px 12px rgba(6,112,92,0.06);
+      --radius: 1.25rem;
+      --toc-width: 340px;
+      --toc-width-m: 80vw;
+      --header-h: 64px;
+      --font-main: 'Inter', 'Segoe UI', Arial, sans-serif;
+      --font-mono: 'Menlo', 'Consolas', monospace;
+    }
+    html { scroll-behavior: smooth }
+    body {
+      margin: 0;
+      font-family: var(--font-main);
+      font-size: clamp(1rem, 2vw, 1.17rem);
+      background: var(--bg);
+      color: var(--text-main);
+    }
+    header {
+      background: var(--primary);
+      color: #fff;
+      position: sticky;
+      top: 0; left: 0; z-index: 20;
+      box-shadow: 0 2px 12px rgba(6,112,92,0.04);
+      display: flex;
+      align-items: center;
+      height: var(--header-h);
+      padding: 0 clamp(1.3rem, 4vw, 3.8rem);
+      gap: 1.2rem;
+    }
+    header .logo {
+      font-size: 1.7rem;
+      font-weight: 800;
+      letter-spacing: 0.03em;
+    }
+    header .report-subtitle {
+      color: var(--accent);
+      font-size: 1rem;
+      font-weight: 400;
+      margin-left: .3rem;
+      opacity: .85;
+      letter-spacing: 0.01em;
+    }
+    header .search-wrap {
+      flex: 1 1 auto;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      max-width: 420px;
+    }
+    .search-box {
+      width: 100%;
+      max-width: 280px;
+      position: relative;
+    }
+    .search-box input {
+      width: 100%;
+      padding: 0.5rem 2.1rem 0.5rem 1rem;
+      border-radius: 100px;
+      border: none;
+      background: #fff;
+      color: var(--text-main);
+      font-size: 1rem;
+      box-shadow: 0 1px 8px rgba(0,0,0,0.04);
+      outline: none;
+      transition: background .2s;
+    }
+    .search-box .fa-search {
+      position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
+      color: var(--text-muted);
+      font-size: 1rem;
+      pointer-events: none;
+    }
+    main {
+      max-width: 1100px;
+      margin: clamp(1.2rem, 3vw, 3.6rem) auto;
+      display: flex;
+      gap: 2.2rem;
+    }
+    nav#toc {
+      position: sticky;
+      top: calc(var(--header-h) + 1.5rem);
+      align-self: flex-start;
+      width: var(--toc-width);
+      background: var(--card-bg);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      padding: 1.4rem 1.2rem 1.8rem;
+      margin-bottom: 2rem;
+      z-index: 5;
+      max-height: calc(100vh - var(--header-h) - 2rem);
+      overflow-y: auto;
+      font-size: 1rem;
+      transition: width .3s;
+    }
+    nav#toc h2 {
+      font-size: 1.09rem;
+      margin: 0 0 .9em .1em;
+      color: var(--primary);
+      font-weight: 600;
+      letter-spacing: 0.01em;
+    }
+    nav#toc ul {
+      list-style: none;
+      margin: 0; padding: 0 0 0 .2em;
+    }
+    nav#toc ul li {
+      margin: .2em 0;
+    }
+    nav#toc ul li a {
+      text-decoration: none;
+      color: var(--text-main);
+      transition: color .18s;
+      padding: .13em .18em;
+      border-radius: 5px;
+      display: inline-block;
+    }
+    nav#toc ul ul {
+      margin-left: 1.3em;
+      border-left: 2px solid #f2f6f5;
+      padding-left: .5em;
+    }
+    nav#toc ul li a.active,
+    nav#toc ul li a:focus-visible {
+      background: var(--secondary);
+      color: var(--accent);
+      font-weight: 600;
+    }
+    @media (max-width: 1024px) {
+      main { flex-direction: column; }
+      nav#toc {
+        width: var(--toc-width-m);
+        max-width: 95vw;
+        margin: 0 auto 2rem auto;
+        position: static;
+        box-shadow: 0 3px 18px #06705c10;
+      }
+    }
+    @media (max-width: 768px) {
+      main { padding: 0 0.6rem; }
+      nav#toc {
+        width: 100%;
+        max-width: 100vw;
+        padding: 1.1rem 0.6rem 1.5rem;
+        font-size: 0.97rem;
+      }
+    }
+    section, .card-section {
+      background: var(--card-bg);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      padding: clamp(1.2rem, 2vw, 2.5rem);
+      margin-bottom: 2.5rem;
+      min-width: 0;
+    }
+    section h2, .card-section h2 { margin-top: 0; font-weight: 700; color: var(--primary);}
+    section h3 { color: var(--secondary); font-weight: 600; margin-top: 2em; }
+    section h4 { color: var(--primary); font-weight: 600; }
+    section summary, .card-section summary {
+      font-size: 1.07rem;
+      font-weight: 600;
+      cursor: pointer;
+      color: var(--primary);
+      background: #ededf7;
+      border-radius: .5em;
+      padding: .4em .8em;
+      margin-bottom: .7em;
+    }
+    section details > summary::-webkit-details-marker {
+      display: none;
+    }
+    .data-charts {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2.2rem 2.8rem;
+      margin-top: 0.5em;
+      margin-bottom: 1em;
+    }
+    .charts-flex {
+      display: flex;
+      gap: 2.5rem;
+      flex-wrap: wrap;
+      margin-bottom: 1em
+    }
+    .chart-card {
+      background: var(--bg);
+      border-radius: 1rem;
+      box-shadow: 0 2px 8px #06705c0e;
+      padding: 1.3rem 1.3rem 1rem;
+      max-width: 100%;
+      flex: 1 1 310px;
+      min-width: 270px;
+    }
+    .chart-title {
+      font-size: 1rem;
+      color: var(--primary);
+      font-weight: 500;
+      margin-bottom: .6em;
+      letter-spacing: 0.01em;
+      display: flex; align-items: center; gap: .5em;
+    }
+    @container chart-card (max-width: 350px) {
+      .chart-card { padding: .8rem; }
+      .chart-title { font-size: .94rem }
+    }
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
+      gap: .8rem 1.7rem;
+      margin: 1.5em 0 2.5em 0;
+    }
+    .stat-block {
+      background: #e6f5f1;
+      border-radius: 1em;
+      padding: .93em 1.1em;
+      text-align: center;
+      font-size: 1.04rem;
+      color: var(--primary);
+      font-weight: 500;
+      min-width: 0;
+    }
+    .stat-value {
+      display: block;
+      font-weight: bold;
+      font-size: 1.25em;
+      color: var(--secondary);
+      margin-bottom: .27em;
+      letter-spacing: 0.01em;
+    }
+    .stat-label {
+      color: var(--text-muted);
+      font-size: .99em;
+      font-weight: 500;
+    }
+    .findings-table-wrap {
+      width: 100%;
+      overflow-x: auto;
+      margin: 1.2em 0 1.6em 0;
+    }
+    table.research-table {
+      width: 100%;
+      border-collapse: collapse;
+      background: #fbfbfe;
+      border-radius: .9em;
+      overflow: hidden;
+      box-shadow: 0 2px 8px #06705c15;
+      font-size: 1em;
+    }
+    table.research-table th, table.research-table td {
+      padding: .6em .8em;
+      text-align: left;
+      border-bottom: 1px solid #f1f7f5;
+    }
+    table.research-table th {
+      background: #e6f5f1;
+      color: var(--primary);
+      cursor: pointer;
+      font-weight: 600;
+      position: relative;
+      overflow: visible;
+      user-select: none;
+    }
+    table.research-table th.sorted-asc:after,
+    table.research-table th.sorted-desc:after {
+      content: '';
+      border: solid var(--primary);
+      border-width: 0 2px 2px 0;
+      display: inline-block;
+      padding: 2px;
+      margin-left: .38em;
+      transform: rotate(-135deg);
+    }
+    table.research-table th.sorted-desc:after {
+      transform: rotate(45deg);
+      margin-top: .1em;
+    }
+    table.research-table tr:last-child td { border: none; }
+    table.research-table tbody tr:hover { background: #f9fdfb; }
+    .filter-controls {
+      display: flex;
+      gap: 1.2em;
+      align-items: center;
+      margin-bottom: 1em;
+      margin-top: .7em;
+      flex-wrap: wrap;
+    }
+    .filter-chip {
+      background: #f1f5f9;
+      color: var(--primary);
+      padding: .33em .85em;
+      border-radius: 100px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background .14s;
+      border: 1px solid #e1ede8;
+      margin-right: .3em;
+      user-select: none;
+    }
+    .filter-chip.selected, .filter-chip.active {
+      background: var(--secondary);
+      color: #fff;
+      border-color: var(--secondary);
+    }
+    details {
+      margin-top: 1.3em;
+      margin-bottom: .1em;
+    }
+    .progress-track {
+      width: 100%; background: #e6f5f1; border-radius: 6px; height: 8px;
+      margin-top: 1.0em; margin-bottom: 1.2em;
+      position: relative;
+      overflow: hidden;
+    }
+    .progress-bar {
+      background: var(--secondary);
+      height: 100%;
+      border-radius: 6px;
+      width: 0; min-width: 8%;
+      transition: width 1.2s cubic-bezier(.27, .86, .44, 1.22);
+    }
+    .export-actions {
+      margin: 1.25em 0 .9em auto;
+      display: flex;
+      align-items: center;
+      gap: 1em;
+      justify-content: flex-end;
+    }
+    .export-actions button {
+      background: var(--secondary);
+      color: #fff;
+      border: none;
+      border-radius: 7px;
+      font-size: .97em;
+      font-family: inherit;
+      font-weight: 500;
+      padding: 0.5em 1.15em;
+      margin: 0;
+      transition: background .18s;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: .45em;
+    }
+    .export-actions button:hover {
+      background: var(--primary);
+    }
+    .clipboard-status {
+      color: var(--primary);
+      font-size: .98em;
+      background: #edeffb;
+      border-radius: 7px;
+      padding: .25em .7em;
+      margin-left: .8em;
+      animation: fadeinout 2.1s linear 1;
+      opacity: 1;
+      display: inline-block;
+      vertical-align: middle;
+    }
+    @keyframes fadeinout {
+      from { opacity: 0; }
+      10%,80% { opacity: 1; }
+      to { opacity: 0; }
+    }
+    /* Typography & links */
+    h1 {
+      font-size: clamp(1.8rem, 4vw, 2.3rem);
+      color: var(--primary);
+      font-weight: 800;
+      margin-bottom: .25em;
+      line-height: 1.18;
+      letter-spacing: -0.01em;
+    }
+    h2 { font-size: clamp(1.2rem,2vw,1.45rem)}
+    h3 { font-size: clamp(1.09rem,1.4vw,1.13rem)}
+    h4 { font-size: clamp(0.99rem,1vw,1.05rem)}
+    p, ul, ol { line-height: 1.8; font-size: 1em }
+    ul, ol { padding-left: 1.7em; }
+    a { color: var(--primary); transition: color .2s }
+    a:hover { color: var(--secondary); }
+    .highlight {
+      background: var(--accent);
+      color: #052e26;
+      padding: .13em .32em;
+      border-radius: .35em;
+      font-size: .98em;
+      font-weight: 500;
+      margin: 0 .13em;
+    }
+    blockquote {
+      border-left: 4px solid var(--secondary);
+      background: #e6f5f1;
+      color: var(--primary);
+      font-size: 1.05em;
+      padding: .9em 1.6em .9em 1em;
+      margin: 1.5em 0;
+      border-radius: .9em;
+      font-style: italic;
+    }
+    /* Citation list */
+    .sources-list {
+      font-size: .96em;
+      color: var(--text-muted);
+      background: #f1f7f8;
+      border-radius: .9em;
+      padding: 1.3em 1em 1.3em 1.45em;
+      margin: 1em 0;
+      border-left: 6px solid var(--secondary);
+    }
+    .sources-list ol {
+      margin: 0;
+      padding-left: 1.8em;
+    }
+    .sources-list li {
+      margin-bottom: .57em;
+      line-height: 1.6;
+    }
+    /* Utilities */
+    .sr-only {
+      position: absolute;
+      left: -9000px; width: 1px; height: 1px; overflow: hidden;
+    }
+    .mb-0 { margin-bottom: 0 !important }
+    /* Responsive @ 768 and below */
+    @media (max-width: 768px) {
+      header, main {
+        padding-left: .5em; padding-right: .5em;
+      }
+      section, .card-section {
+        padding: 1em .7em;
+      }
+      .data-charts { grid-template-columns: 1fr; gap: 2rem }
+      .charts-flex { flex-direction: column; gap: 1.2rem }
+    }
+    @media (max-width: 500px) {
+      h1 { font-size: 1.25rem }
+      nav#toc { font-size: .95rem; padding:.7rem }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <span class="logo" aria-label="Vietnam Economic Growth Report 2025">
+      <i class="fa-sharp fa-solid fa-chart-line"></i>
+      Vietnam 2025
+    </span>
+    <span class="report-subtitle">Economic Growth Report</span>
+    <div class="search-wrap">
+      <form class="search-box" id="site-search" autocomplete="off">
+        <input type="search" placeholder="Search the report…" id="searchInput" aria-label="Search" />
+        <i class="fas fa-search"></i>
+      </form>
+    </div>
+  </header>
+  <main>
+    <!-- Table of Contents -->
+    <nav id="toc" aria-label="Table of Contents">
+      <h2><i class="fa-regular fa-list-alt"></i> Table of Contents</h2>
+      <ul>
+        <li><a href="#executive-summary">Executive Summary</a></li>
+        <li>
+          <a href="#key-economic-indicators">Key Economic Indicators</a>
+          <ul>
+            <li><a href="#gdp-growth-performance">GDP Growth Performance</a></li>
+            <li><a href="#inflation-rate">Inflation Rate</a></li>
+            <li><a href="#unemployment-rate">Unemployment Rate</a></li>
+            <li><a href="#foreign-direct-investment">Foreign Direct Investment (FDI)</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#sectoral-analysis">Sectoral Analysis</a>
+        </li>
+        <li>
+          <a href="#challenges-risk-factors">Challenges & Risk Factors</a>
+        </li>
+        <li>
+          <a href="#historical-comparison">Historical Comparison</a>
+        </li>
+        <li>
+          <a href="#economic-outlook-projections">Economic Outlook & Projections</a>
+        </li>
+        <li>
+          <a href="#conclusion">Conclusion</a>
+        </li>
+        <li>
+          <a href="#sources-citations">Sources & Citations</a>
+        </li>
+      </ul>
+    </nav>
+    <!-- Report content -->
+    <section>
+      <h1 id="executive-summary">
+        Executive Summary
+      </h1>
+      <div class="progress-track" title="2025 GDP H1 Progress Toward Target">
+        <div class="progress-bar" id="gdp-progress"></div>
+      </div>
+      <p>
+        Vietnam's economy continues to demonstrate robust growth momentum in 2025, with GDP expanding <span class="highlight">7.96%</span> in Q2 2025 compared to the same period last year. H1 2025 saw GDP growth of <span class="highlight">7.52%</span>—the strongest first-half showing since 2011—led by <span class="highlight">industry</span> and <span class="highlight">services</span>. Vietnam sustained high growth despite <b>global trade tensions</b> and new <b>US tariffs</b>, confirming its position as a resilient, dynamic economy in Southeast Asia.
+      </p>
+    </section>
+    <section id="key-economic-indicators">
+      <h2>
+        Key Economic Indicators 2025
+      </h2>
+      <div class="stats-grid">
+        <div class="stat-block">
+          <span class="stat-value">7.96%</span>
+          <span class="stat-label">Q2 GDP YoY Growth</span>
+        </div>
+        <div class="stat-block">
+          <span class="stat-value">7.52%</span>
+          <span class="stat-label">H1 2025 GDP Growth</span>
+        </div>
+        <div class="stat-block">
+          <span class="stat-value">3.57%</span>
+          <span class="stat-label">June 2025 Inflation</span>
+        </div>
+        <div class="stat-block">
+          <span class="stat-value">2.20%</span>
+          <span class="stat-label">Q1 2025 Unemployment</span>
+        </div>
+        <div class="stat-block">
+          <span class="stat-value">$21.5B</span>
+          <span class="stat-label">H1 2025 FDI</span>
+        </div>
+      </div>
+      <div class="data-charts" id="key-indicators-charts" style="margin-bottom:1.2rem;">
+        <div class="chart-card">
+          <div class="chart-title">
+            <i class="fa-solid fa-chart-line"></i> GDP Growth Q1–Q2 2025
+          </div>
+          <canvas id="gdpGrowthChart" width="360" height="170" aria-label="GDP Growth 2025"></canvas>
+          <div class="chart-caption" style="font-size:.95em; color:var(--text-muted);margin-top:.4em;">
+            GDP growth rates by quarter in 2025. <span style="color:var(--secondary)">Government target: 8.3–8.5%</span>
+          </div>
+        </div>
+        <div class="chart-card">
+          <div class="chart-title">
+            <i class="fa-solid fa-chart-bar"></i> 2025 GDP Forecasts
+          </div>
+          <canvas id="gdpForecastChart" width="360" height="170" aria-label="GDP Forecasts"></canvas>
+          <div class="chart-caption" style="font-size:.94em; color:var(--text-muted)">
+            Diverse projections from major institutions and official targets.
+          </div>
+        </div>
+      </div>
+      <details open>
+        <summary id="gdp-growth-performance">GDP Growth Performance</summary>
+        <ul>
+          <li><strong>Q1 2025:</strong> <span class="highlight">6.9%</span> year-on-year growth</li>
+          <li><strong>Q2 2025:</strong> <span class="highlight">7.96%</span> year-on-year growth</li>
+          <li><strong>H1 2025:</strong> <span class="highlight">7.52%</span> (highest H1 since 2011)</li>
+        </ul>
+        <ul>
+          <li><strong>World Bank 2025 forecast:</strong> <span class="highlight">5.8%</span></li>
+          <li><strong>ADB 2025 forecast:</strong> <span class="highlight">6.6%</span> (up from 6.3%)</li>
+          <li><strong>IMF 2025 forecast:</strong> <span class="highlight">5.2%</span></li>
+          <li><strong>Government target:</strong> <span class="highlight">8.3–8.5%</span></li>
+        </ul>
+      </details>
+      <details>
+        <summary id="inflation-rate">Inflation Rate</summary>
+        <ul>
+          <li><strong>May 2025:</strong> <span class="highlight">3.24%</span></li>
+          <li><strong>June 2025:</strong> <span class="highlight">3.57%</span> (highest YTD)</li>
+          <li><strong>IMF 2025 forecast:</strong> <span class="highlight">2.9%</span></li>
+          <li><strong>ADB 2025 forecast:</strong> <span class="highlight">4.0%</span></li>
+        </ul>
+        <p>
+          Inflation remains well-controlled within the 3-4.5% target range, minimizing risks to real incomes and domestic demand.
+        </p>
+      </details>
+      <details>
+        <summary id="unemployment-rate">Unemployment Rate</summary>
+        <ul>
+          <li><strong>Q1 2025:</strong> <span class="highlight">2.20%</span> (down from 2.22% in Q4 2024)</li>
+        </ul>
+        <p>
+          Unemployment is at historic lows, reflecting a resilient labor market and strong consumption fundamentals.
+        </p>
+      </details>
+      <details>
+        <summary id="foreign-direct-investment">Foreign Direct Investment (FDI)</summary>
+        <ul>
+          <li><strong>First 5 months 2025 registered capital:</strong> <span class="highlight">$18.4B</span> (up 51% YoY)</li>
+          <li><strong>First 5 months 2025 disbursed capital:</strong> <span class="highlight">$8.9B</span></li>
+          <li><strong>First half 2025 FDI:</strong> <span class="highlight">$21.51B</span> (up 32.6% YoY)</li>
+        </ul>
+        <p>
+          Surging FDI signals continued international confidence in Vietnam's policy framework, market opportunity, and supply chain resilience.
+        </p>
+      </details>
+    </section>
+    <section id="sectoral-analysis">
+      <h2>Sectoral Analysis</h2>
+      <div class="charts-flex">
+        <div class="chart-card">
+          <div class="chart-title"><i class="fa-solid fa-chart-pie"></i> Sector Contributions (H1 2025)</div>
+          <canvas id="sectorPieChart" width="320" height="180" aria-label="Sector Contributions"></canvas>
+        </div>
+        <div class="chart-card" style="max-width:420px">
+          <div class="chart-title"><i class="fa-solid fa-basket-shopping"></i> Retail Sales Growth</div>
+          <canvas id="retailBarChart" width="320" height="180" aria-label="Retail Sales"></canvas>
+        </div>
+      </div>
+      <ul>
+        <li><b>Services sector</b>: Largest contributor to GDP growth</li>
+        <li><b>Manufacturing sector</b>: Maintains a positive trajectory</li>
+        <li><b>Export industries</b>: Remain the backbone of economic expansion</li>
+        <li>
+          <b>Banking sector</b>: Projected to see a <span class="highlight">17%</span> increase in earnings driven by <span class="highlight">15%</span> credit growth
+        </li>
+      </ul>
+      <blockquote>
+        Retail sales in Q1 2025: <b>1.708 quadrillion VND</b> (~<span class="highlight">$66.83 billion</span>), a <span class="highlight">9.9%</span> YoY increase.
+      </blockquote>
+    </section>
+    <section id="challenges-risk-factors">
+      <h2>Challenges and Risk Factors</h2>
+      <div class="findings-table-wrap">
+        <table class="research-table" id="challenges-table">
+          <thead>
+            <tr>
+              <th>Risk Factor</th>
+              <th>Implication</th>
+              <th>Relevance 2025</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Global Trade Tensions</td>
+              <td>Disrupt export momentum, limit overseas demand</td>
+              <td>High</td>
+            </tr>
+            <tr>
+              <td>US Tariff Policies</td>
+              <td>Pressure export-oriented businesses</td>
+              <td>High</td>
+            </tr>
+            <tr>
+              <td>Geopolitical Instability</td>
+              <td>Increase business uncertainty, risk premiums</td>
+              <td>Medium</td>
+            </tr>
+            <tr>
+              <td>FDI Overdependence</td>
+              <td>Potential for inflation; vulnerability to capital flow shifts</td>
+              <td>Medium</td>
+            </tr>
+            <tr>
+              <td>Macroeconomic Stability</td>
+              <td>Rising public debt, inflation risk</td>
+              <td>Medium</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p>
+        Policymakers must balance <b>ambitious growth</b> targets with prudent oversight of capital flows, currency, and fiscal policy to ensure continued resilience.
+      </p>
+    </section>
+    <section id="historical-comparison">
+      <h2>Historical Comparison</h2>
+      <div class="charts-flex">
+        <div class="chart-card" style="flex:1 1 340px;min-width:220px;">
+          <div class="chart-title"><i class="fa-solid fa-timeline"></i> GDP Growth Q1 YoY (2020–2025)</div>
+          <canvas id="histGdpChart" width="320" height="180" aria-label="Historical GDP Growth"></canvas>
+        </div>
+        <div style="flex:2 1 380px;">
+          <ul>
+            <li><b>2024:</b> GDP grew <span class="highlight">7.1%</span></li>
+            <li><b>2025 (forecast):</b> Growth may moderate amid external headwinds</li>
+            <li><b>Long-term:</b> Vietnam’s fundamentals remain <span class="highlight">resilient</span> despite short-term volatility</li>
+          </ul>
+          <blockquote>
+            Year-on-year GDP Q1 growth rates (2020–2025): <span class="highlight">3.21%</span>, <span class="highlight">4.85%</span>, <span class="highlight">5.42%</span>, <span class="highlight">3.46%</span>, <span class="highlight">5.98%</span>, <span class="highlight">6.93%</span>
+          </blockquote>
+        </div>
+      </div>
+    </section>
+    <section id="economic-outlook-projections">
+      <h2>Economic Outlook and Projections</h2>
+      <details open>
+        <summary>Near-term Prospects (2025)</summary>
+        <p>
+          The economy started 2025 strongly, delivering <span class="highlight">6.9%</span> YoY GDP growth in Q1.
+          However, the landscape is more challenging due to external headwinds. The government’s ambitious growth
+          target (<span class="highlight">8.3–8.5%</span>) contrasts with more modest global forecasts, but robust
+          FDI, low unemployment, and resilient demand support continued solid performance.
+        </p>
+      </details>
+      <details>
+        <summary>Key Supporting Factors</summary>
+        <ul>
+          <li><strong>Robust FDI inflows</strong></li>
+          <li><strong>Low unemployment</strong> sustains domestic consumption</li>
+          <li><strong>Controlled inflation</strong> protects real incomes</li>
+          <li><strong>Export competitiveness</strong> despite trade challenges</li>
+          <li><strong>Parliamentary Support</strong>: Growth target raised from 6.5% to "at least 8%"</li>
+        </ul>
+      </details>
+      <details>
+        <summary>Risk Mitigation Strategies</summary>
+        <ul>
+          <li>Diversify export markets</li>
+          <li>Strengthen domestic demand</li>
+          <li>Bolster economic resilience</li>
+          <li>Maintain macroeconomic stability</li>
+          <li>Provide space for fiscal policy to offset global shocks</li>
+        </ul>
+      </details>
+    </section>
+    <section id="conclusion">
+      <h2>Conclusion</h2>
+      <p>
+        Vietnam's 2025 economic performance highlights the nation's resilience and growth prospects. While facing ongoing
+        <span class="highlight">global challenges</span>, the economy benefits from strong fundamentals: <b>low unemployment</b>, <b>controlled inflation</b>, and <b>surging FDI</b>.
+        The divergence between official and international forecasts underlines a cautiously optimistic outlook. Ambitious
+        GDP targets rely on continued FDI confidence. The government's determination sets the stage for higher growth
+        in subsequent years.
+      </p>
+    </section>
+    <section id="sources-citations">
+      <h2>Sources and Citations</h2>
+      <div class="export-actions">
+        <button id="btn-copy-sources"><i class="fa-solid fa-copy"></i> Copy Citations</button>
+        <button id="btn-export-pdf"><i class="fa-solid fa-file-pdf"></i> Export to PDF</button>
+      </div>
+      <div class="sources-list" id="citations-list">
+        <ol>
+          <li>Trading Economics - Vietnam GDP Annual Growth Rate &nbsp; <a href="https://tradingeconomics.com/vietnam/gdp-growth-annual" target="_blank">[Link]</a></li>
+          <li>IMF - Vietnam Country Profile &nbsp; <a href="https://www.imf.org/en/Countries/VNM" target="_blank">[Link]</a></li>
+          <li>World Economics - Vietnam GDP Estimates &nbsp; <a href="https://www.worldeconomics.com/GDP/Vietnam.gdp" target="_blank">[Link]</a></li>
+          <li>General Statistics Office &nbsp; <a href="https://www.gso.gov.vn/en/" target="_blank">[Link]</a></li>
+          <li>Wikipedia - Economy of Vietnam &nbsp; <a href="https://en.wikipedia.org/wiki/Economy_of_Vietnam" target="_blank">[Link]</a></li>
+          <li>IMF - Vietnam and the IMF &nbsp; <a href="https://www.imf.org/en/Countries/VNM" target="_blank">[Link]</a></li>
+          <li>FocusEconomics - Vietnam Economic Indicators &nbsp; <a href="https://www.focus-economics.com/countries/vietnam" target="_blank">[Link]</a></li>
+          <li>National Statistics Office of Vietnam &nbsp; <a href="https://www.gso.gov.vn/en/data-and-statistics/" target="_blank">[Link]</a></li>
+          <li>VietnamNet - Economic News &nbsp; <a href="https://vietnamnet.vn/" target="_blank">[Link]</a></li>
+          <li>IMF - Article IV Mission Reports &nbsp; <a href="https://www.imf.org/en/Publications/CR" target="_blank">[Link]</a></li>
+          <li>Vietnam Briefing &nbsp; <a href="https://www.vietnam-briefing.com/" target="_blank">[Link]</a></li>
+          <li>Vietnam Investment Review &nbsp; <a href="https://vir.com.vn/" target="_blank">[Link]</a></li>
+          <li>Trading Economics - Vietnam Foreign Direct Investment &nbsp; <a href="https://tradingeconomics.com/vietnam/foreign-direct-investment" target="_blank">[Link]</a></li>
+          <li>White & Case - Regional Economic Outlook &nbsp; <a href="https://www.whitecase.com/" target="_blank">[Link]</a></li>
+          <li>Vietnam Economic Times &nbsp; <a href="https://vneconomictimes.com/" target="_blank">[Link]</a></li>
+          <li>ADB - Vietnam Country Partnership &nbsp; <a href="https://www.adb.org/countries/viet-nam/main" target="_blank">[Link]</a></li>
+          <li>Ministry of Planning and Investment &nbsp; <a href="https://www.mpi.gov.vn/en/" target="_blank">[Link]</a></li>
+        </ol>
+      </div>
+    </section>
+  </main>
+  <script>
+    // Table of Contents - highlight on scroll, smooth scroll
+    (function tocScrollHighlight() {
+      const tocLinks = Array.from(document.querySelectorAll('#toc a'));
+      const headings = tocLinks.map(l => {
+        try { return document.querySelector(decodeURIComponent(l.hash)) } catch { return null }
+      });
+      let activeIdx = -1;
+      function onScroll() {
+        let found = -1;
+        for (let i=0; i<headings.length; ++i) {
+          const el = headings[i];
+          if (!el) continue;
+          const rect = el.getBoundingClientRect();
+          if (rect.top < window.innerHeight * 0.18) found = i;
+        }
+        if (found >= 0 && found !== activeIdx) {
+          tocLinks.forEach(l=>l.classList.remove('active'));
+          tocLinks[found].classList.add('active');
+          activeIdx = found;
+        }
+      }
+      onScroll();
+      window.addEventListener('scroll', onScroll, {passive:true});
+      // Smooth scroll
+      tocLinks.forEach(link => {
+        link.addEventListener('click', e => {
+          const target = document.querySelector(decodeURIComponent(link.hash));
+          if (target) {
+            e.preventDefault();
+            target.scrollIntoView({behavior:"smooth",block:"start"});
+            setTimeout(()=>link.focus(), 800);
+          }
+        })
+      })
+    })();
+    // Progress bar: GDP H1 vs Target (between 7.52% and target 8.5%)
+    (function gdpProgress(){
+      const val = 7.52, target = 8.5, min = 0, w = Math.max(Math.min((val-min)/(target-min)*100, 100), 2);
+      document.getElementById('gdp-progress').style.width = w+'%';
+    })();
+    // Charts: Use canvas API for simple bar/line/pie charts (no frameworks)
+    // Helper: drawBarChart, drawLineChart, drawPieChart
+    function drawBarChart(ctx, {labels, values, colors, yMax, grid=true, units="%"}){
+      const w = ctx.canvas.width, h = ctx.canvas.height;
+      ctx.clearRect(0,0,w,h);
+      const m = {l:40, r:14, t:16, b:36};
+      const chartW = w-m.l-m.r, chartH = h-m.t-m.b;
+      const N = values.length;
+      yMax = yMax || Math.max(...values, 1);
+      if (grid) for (let k=0;k<=5;++k) {
+        let y = m.t + chartH*k/5;
+        ctx.strokeStyle="#e6f5f1"; ctx.lineWidth=1; ctx.beginPath();
+        ctx.moveTo(m.l, y); ctx.lineTo(w-m.r, y); ctx.stroke();
+        ctx.font="10px Inter"; ctx.fillStyle="#b8cbc3";
+        ctx.textAlign="right"; ctx.textBaseline="middle";
+        ctx.fillText((yMax*(1-k/5)).toFixed(1)+units, m.l-4, y);
+      }
+      for(let i=0; i<N; ++i){
+        let x = m.l + chartW/N*i + chartW/(2*N), barW = chartW/(N*1.5);
+        let barH = values[i]/yMax*chartH;
+        ctx.save();
+        ctx.beginPath();
+        ctx.fillStyle = colors[i%colors.length] || "#07ac9b";
+        ctx.shadowColor="#06a08622"; ctx.shadowBlur=6;
+        ctx.roundRect(x-barW/2, m.t+chartH-barH, barW, barH, 6);
+        ctx.fill(); ctx.restore();
+        ctx.font="11px Inter"; ctx.textAlign="center"; ctx.fillStyle="#2b3d33";
+        ctx.fillText(labels[i], x, h-m.b+13);
+        ctx.font="bold 12px Inter"; ctx.fillStyle=colors[i%colors.length];
+        ctx.fillText(values[i].toFixed(2)+units, x, m.t+chartH-barH-10);
+      }
+    }
+    function drawLineChart(ctx, {labels, values, color="#06705c", dots=true, fill='#e6f5f1', yMax, units="%"}) {
+      const w = ctx.canvas.width, h = ctx.canvas.height;
+      ctx.clearRect(0,0,w,h);
+      const m = {l:42, r:20, t:22, b:36};
+      const chartW = w-m.l-m.r, chartH = h-m.t-m.b;
+      const N = values.length;
+      yMax = yMax || Math.max(...values, 1) * 1.15;
+      // grid lines
+      for (let k=0;k<=5;++k) {
+        let y = m.t + chartH*k/5;
+        ctx.strokeStyle="#e6f5f1"; ctx.lineWidth=1; ctx.beginPath();
+        ctx.moveTo(m.l, y); ctx.lineTo(w-m.r, y); ctx.stroke();
+        ctx.font="10px Inter"; ctx.fillStyle="#b8cbc3";
+        ctx.textAlign="right"; ctx.textBaseline="middle";
+        ctx.fillText((yMax*(1-k/5)).toFixed(1)+units, m.l-5, y);
+      }
+      // Line
+      ctx.save();
+      ctx.beginPath();
+      for(let i=0; i<N; ++i) {
+        let x = m.l + chartW/(N-1)*i, y = m.t+chartH - chartH*values[i]/yMax;
+        if (i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
+      }
+      ctx.strokeStyle=color; ctx.lineWidth=2.6; ctx.shadowColor=color+'33'; ctx.shadowBlur=2;
+      ctx.stroke();
+      // Fill under curve
+      if (fill) {
+        ctx.lineTo(m.l+chartW, m.t+chartH);
+        ctx.lineTo(m.l, m.t+chartH);
+        ctx.closePath();
+        ctx.globalAlpha=.17;
+        ctx.fillStyle=fill;
+        ctx.fill();
+        ctx.globalAlpha=1;
+      }
+      ctx.restore();
+      // Dots
+      if (dots) {
+        for(let i=0; i<N; ++i) {
+          let x = m.l + chartW/(N-1)*i, y = m.t+chartH - chartH*values[i]/yMax;
+          ctx.beginPath();
+          ctx.arc(x,y,5,0,2*Math.PI);
+          ctx.fillStyle=color; ctx.shadowColor=color+'11'; ctx.shadowBlur=2; ctx.fill(); ctx.shadowBlur=0;
+          ctx.font="bold 12px Inter";
+          ctx.fillStyle=color; ctx.textAlign="center"; ctx.textBaseline="bottom";
+          ctx.fillText(values[i].toFixed(2)+units, x, y-7);
+        }
+      }
+      // X labels
+      for(let i=0; i<N; ++i) {
+        let x = m.l + chartW/(N-1)*i;
+        ctx.font="11px Inter"; ctx.fillStyle="#2b3d33";
+        ctx.textAlign="center"; ctx.textBaseline="top";
+        ctx.fillText(labels[i], x, h-m.b+7);
+      }
+    }
+    function drawPieChart(ctx, {labels, values, colors}) {
+      ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
+      const w=ctx.canvas.width, h=ctx.canvas.height;
+      const cx=w/2, cy=h/2.2, r= Math.min(w,h)/2.25;
+      const total = values.reduce((a,b)=>a+b,0);
+      let a0 = -Math.PI/2;
+      ctx.save();
+      for(let i=0; i<values.length; ++i){
+        const frac=values[i]/total, a1=a0+frac*2*Math.PI;
+        ctx.beginPath();
+        ctx.moveTo(cx,cy); ctx.arc(cx,cy,r,a0,a1,false); ctx.closePath();
+        ctx.fillStyle=colors[i%colors.length]; ctx.shadowColor=colors[i%colors.length]+'24'; ctx.shadowBlur=7;
+        ctx.fill(); ctx.shadowBlur=0;
+        // labels
+        const theta=(a0+a1)/2, lx=cx+Math.cos(theta)*r*0.65,ly=cy+Math.sin(theta)*r*0.65;
+        ctx.font="bold 13px Inter"; ctx.fillStyle=colors[i%colors.length];
+        ctx.textAlign="center"; ctx.textBaseline="middle";
+        ctx.fillText(labels[i], lx,ly);
+        a0=a1;
+      }
+      ctx.restore();
+    }
+    // Chart 1: GDP Growth 2025 Q1, Q2, H1 (Line)
+    drawLineChart(document.getElementById('gdpGrowthChart').getContext('2d'), {
+      labels: ['Q1','Q2','H1 Target'],
+      values: [6.9,7.96,8.5],
+      color: "#34b88b",
+      units: '%',
+      fill: "#bdfae5",
+      yMax: 9
+    });
+    // Chart 2: GDP Forecasts (Bar)
+    drawBarChart(document.getElementById('gdpForecastChart').getContext('2d'), {
+      labels: ['World Bank','ADB','IMF','Gov Target'],
+      values: [5.8,6.6,5.2,8.5],
+      colors: ['#39ad9e','#12847d','#198754','#fedb41'],
+      yMax: 9
+    });
+    // Sector Pie Chart
+    drawPieChart(document.getElementById('sectorPieChart').getContext('2d'),{
+      labels:['Services','Manufacturing','Exports','Banking'],
+      values:[44, 28, 19, 9],
+      colors:['#06705c','#2bc4a3','#fedb41','#bcc9cc']
+    });
+    // Retail Sales Bar
+    drawBarChart(document.getElementById('retailBarChart').getContext('2d'),{
+      labels:['Q1\'24','Q1\'25'],
+      values:[60.76,66.83],
+      colors:['#bcc9cc','#06705c'],
+      yMax: 70,
+      units:' B$'
+    });
+    // Historical GDP Growth
+    drawLineChart(document.getElementById('histGdpChart').getContext('2d'),{
+      labels: ['2020','2021','2022','2023','2024','2025'],
+      values: [3.21,4.85,5.42,3.46,5.98,6.93],
+      color: "#ffa638",
+      fill: "#fedb4187",
+      yMax: 8,
+      units:'%'
+    });
+    // Table sorting
+    (function sortableTables(){
+      document.querySelectorAll('table.research-table').forEach(table=>{
+        const ths = table.tHead?.rows[0]?.cells;
+        if (!ths) return;
+        for(let c=0;c<ths.length;++c){
+          ths[c].addEventListener('click',()=>{
+            const dir = (ths[c].classList.contains('sorted-asc')) ? -1 : 1;
+            Array.from(ths).forEach(th=>th.classList.remove('sorted-asc','sorted-desc'));
+            ths[c].classList.add(dir>0?'sorted-asc':'sorted-desc');
+            const rows = Array.from(table.tBodies[0].rows);
+            rows.sort((a,b)=>{
+              let vA=a.cells[c].textContent.trim().toLowerCase(),
+                  vB=b.cells[c].textContent.trim().toLowerCase();
+              const numA=parseFloat(vA),numB=parseFloat(vB);
+              if(!isNaN(numA)&&!isNaN(numB)) return dir*(numA-numB);
+              if(vA<vB) return -1*dir; if(vA>vB) return 1*dir; return 0;
+            });
+            rows.forEach(row=>table.tBodies[0].appendChild(row));
+          });
+        }
+      });
+    })();
+    // Section collapsing/expanding - remember open state in localStorage
+    (function persistentDetails(){
+      document.querySelectorAll("section details, .card-section details").forEach(details=>{
+        let key='details-'+location.pathname+'-'+details.querySelector('summary')?.textContent.trim();
+        // Restore state
+        if(localStorage.getItem(key)!==null)
+          details.open=localStorage.getItem(key)==='1';
+        details.addEventListener('toggle',()=>localStorage.setItem(key,details.open?'1':'0'));
+      });
+    })();
+    // Clipboard copy for citations
+    (function citationsClipboard(){
+      const btn = document.getElementById('btn-copy-sources');
+      const div = document.getElementById('citations-list');
+      btn.addEventListener('click', async()=>{
+        const text = Array.from(div.querySelectorAll('ol>li')).map(li=>{
+          return "- "+li.textContent.replace(/\s*\[Link\]\s*/,'')+" "+li.querySelector('a')?.href;
+        }).join('\n');
+        try{
+          await navigator.clipboard.writeText(text);
+          showStatus(btn, "Citations copied!");
+        }catch(e){
+          showStatus(btn, "Could not copy.", true);
+        }
+      });
+      function showStatus(parent, msg, err){
+        let el = document.createElement('span');
+        el.className='clipboard-status';
+        if(err) el.style.color='var(--danger)';
+        el.textContent=msg;
+        parent.after(el);
+        setTimeout(()=>el.remove(),1600);
+      }
+    })();
+    // Export PDF: Use print() to offer PDF download
+    (function exportPdf(){
+      document.getElementById('btn-export-pdf').addEventListener('click', function(){
+        window.print();
+      });
+    })();
+    // Search functionality - highlight matches, scroll to section
+    (function siteSearch(){
+      const input = document.getElementById('searchInput');
+      let lastHl = [];
+      function clearHl() {
+        lastHl.forEach(span=>{ // Restore original text
+          let p=span.parentNode;
+          p.replaceChild(document.createTextNode(span.textContent), span);
+          p.normalize();
+        }); lastHl=[];
+      }
+      function highlightWords(s) {
+        if(s.length<2) return clearHl();
+        clearHl();
+        const walker = document.createTreeWalker(document.querySelector('main'),NodeFilter.SHOW_TEXT,null);
+        const term = s.toLowerCase();
+        let foundOnce=false;
+        while(walker.nextNode()) {
+          let t = walker.currentNode;
+          if(!/\S/.test(t.data)||t.parentElement.closest('header,nav,#citations-list')) continue;
+          let idx = t.data.toLowerCase().indexOf(term);
+          if(idx >= 0) {
+            foundOnce=true;
+            const span=document.createElement('mark');
+            span.style.background="#fedb41";
+            span.style.color="#232931";
+            span.style.padding=".05em .16em";
+            span.style.fontWeight='600';
+            span.textContent=t.data.substr(idx,s.length);
+            let after = t.splitText(idx);
+            after.splitText(s.length);
+            after.parentNode.replaceChild(span, after);
+            lastHl.push(span);
+          }
+        }
+        if(foundOnce && lastHl[0]) lastHl[0].scrollIntoView({behavior:'smooth',block:'center'});
+      }
+      input.addEventListener('input', e=> highlightWords(e.target.value));
+      document.getElementById('site-search').addEventListener('submit', e=>{e.preventDefault()});
+    })();
+    // IntersectionObserver: Fade-in effect for sections on scroll-in
+    (function fadeInSections(){
+      if(!('IntersectionObserver' in window)) return;
+      const observer = new IntersectionObserver(entries=>{
+        entries.forEach(entry=>{
+          if(entry.isIntersecting){
+            entry.target.style.transition="opacity 1.2s cubic-bezier(.3,.6,.13,1)";
+            entry.target.style.opacity=1;
+            observer.unobserve(entry.target);
+          }
+        });
+      },{threshold:.18});
+      document.querySelectorAll('main > section').forEach(sec=>{
+        sec.style.opacity=0;
+        observer.observe(sec);
+      });
+    })();
+    // Filter for table example (future extension)
+    // (Currently not needed)
+    // Accessibility: Set ARIA for details
+    document.querySelectorAll('details').forEach(d=>{
+      const s = d.querySelector('summary');
+      if(s) {
+        s.setAttribute("aria-expanded",d.open ? "true" : "false");
+        d.addEventListener('toggle',()=> s.setAttribute("aria-expanded",d.open ? "true" : "false"));
+      }
+    });
+  </script>
+</body>
+</html>