Hugging Face's logo

Spaces:
thucdangvan020999
/
gpt5-v2
Running

App Files Community
thucdangvan020999 commited on
Commit
af76c9c
·
verified ·
1 Parent(s): 9d625ca

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1692 -19
index.html CHANGED
@@ -1,19 +1,1692 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <meta name="color-scheme" content="light dark" />
7
+ <title>Vietnam Economic Growth Report 2025 — Interactive Research Dashboard</title>
8
+ <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-HH8GJxQn3D1a3bQSDK5dXkqX7jsa9HqVibw9H2rXx3+JqZ+oR+W3NNAJbCaf3WnC7wS9tX4SxN7M3g7Kp3i2HQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
10
+ <style>
11
+ :root {
12
+ --bg: #0b0c10;
13
+ --surface: #11131a;
14
+ --card: #151924;
15
+ --text: #e6e8ef;
16
+ --muted: #a6adbb;
17
+ --primary: #2dd4bf;
18
+ --primary-600:#14b8a6;
19
+ --accent: #60a5fa;
20
+ --warning: #fde047;
21
+ --danger: #fb7185;
22
+ --success: #34d399;
23
+ --shadow: 0 10px 24px rgba(0,0,0,0.35);
24
+ --radius: 14px;
25
+ --gap: clamp(0.75rem, 1.5vw, 1.25rem);
26
+ --fs-900: clamp(2rem, 3.8vw, 3rem);
27
+ --fs-800: clamp(1.5rem, 2.8vw, 2.25rem);
28
+ --fs-700: clamp(1.25rem, 2.2vw, 1.75rem);
29
+ --fs-600: clamp(1.125rem, 1.8vw, 1.375rem);
30
+ --fs-500: clamp(1rem, 1.6vw, 1.15rem);
31
+ --fs-400: clamp(0.95rem, 1.4vw, 1rem);
32
+ --fs-300: clamp(0.85rem, 1.2vw, 0.95rem);
33
+ --ring: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent);
34
+ --grid-max: 1440px;
35
+ }
36
+
37
+ [data-theme="light"] {
38
+ --bg: #f7f8fb;
39
+ --surface: #ffffff;
40
+ --card: #ffffff;
41
+ --text: #0f172a;
42
+ --muted: #475569;
43
+ --shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
44
+ --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
45
+ }
46
+
47
+ html, body {
48
+ height: 100%;
49
+ scroll-behavior: smooth;
50
+ }
51
+ body {
52
+ margin: 0;
53
+ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Inter, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
54
+ color: var(--text);
55
+ background: radial-gradient(1200px 600px at 100% -10%, rgba(96,165,250,.06), transparent 60%) ,
56
+ radial-gradient(1200px 600px at -10% 100%, rgba(45,212,191,.07), transparent 60%), var(--bg);
57
+ line-height: 1.55;
58
+ }
59
+
60
+ /* Top progress bar */
61
+ .reading-progress {
62
+ position: fixed;
63
+ inset: 0 0 auto 0;
64
+ height: 4px;
65
+ background: linear-gradient(90deg, var(--primary), var(--accent));
66
+ transform-origin: left;
67
+ transform: scaleX(0);
68
+ z-index: 9999;
69
+ box-shadow: 0 2px 8px rgba(0,0,0,.2);
70
+ }
71
+
72
+ header.appbar {
73
+ position: sticky;
74
+ top: 0;
75
+ z-index: 999;
76
+ backdrop-filter: saturate(180%) blur(10px);
77
+ background: color-mix(in oklab, var(--surface) 85%, transparent);
78
+ border-bottom: 1px solid color-mix(in oklab, var(--muted) 15%, transparent);
79
+ }
80
+ .appbar-inner {
81
+ max-width: var(--grid-max);
82
+ margin: 0 auto;
83
+ padding: .75rem clamp(.75rem, 3vw, 1.5rem);
84
+ display: flex;
85
+ align-items: center;
86
+ gap: .75rem;
87
+ }
88
+ .brand {
89
+ display: flex;
90
+ align-items: center;
91
+ gap: .65rem;
92
+ font-weight: 700;
93
+ letter-spacing: .2px;
94
+ font-size: var(--fs-500);
95
+ }
96
+ .brand i { color: var(--primary); }
97
+ .spacer { flex: 1; }
98
+ .toolbar {
99
+ display: flex;
100
+ align-items: center;
101
+ gap: .5rem;
102
+ }
103
+ .search {
104
+ position: relative;
105
+ width: min(52vw, 420px);
106
+ min-width: 180px;
107
+ }
108
+ .search input {
109
+ width: 100%;
110
+ padding: .7rem 2.2rem .7rem 2.2rem;
111
+ border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
112
+ border-radius: 999px;
113
+ background: var(--card);
114
+ color: var(--text);
115
+ font-size: var(--fs-400);
116
+ outline: none;
117
+ transition: border .2s, box-shadow .2s;
118
+ }
119
+ .search input:focus { box-shadow: var(--ring); border-color: color-mix(in oklab, var(--primary) 35%, var(--muted)); }
120
+ .search i {
121
+ position: absolute;
122
+ left: .7rem;
123
+ top: 50%;
124
+ transform: translateY(-50%);
125
+ color: var(--muted);
126
+ }
127
+ .search .count {
128
+ position: absolute;
129
+ right: .7rem;
130
+ top: 50%;
131
+ transform: translateY(-50%);
132
+ font-size: .75rem;
133
+ color: var(--muted);
134
+ }
135
+ .icon-btn {
136
+ display: grid;
137
+ place-items: center;
138
+ border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
139
+ background: var(--card);
140
+ color: var(--text);
141
+ width: 40px;
142
+ height: 40px;
143
+ border-radius: 10px;
144
+ cursor: pointer;
145
+ transition: transform .08s ease, background .2s, border-color .2s;
146
+ }
147
+ .icon-btn:hover { background: color-mix(in oklab, var(--card) 75%, var(--surface)); }
148
+ .icon-btn:active { transform: translateY(1px); }
149
+
150
+ .export-menu {
151
+ position: relative;
152
+ }
153
+ .menu {
154
+ position: absolute;
155
+ right: 0;
156
+ top: calc(100% + 8px);
157
+ min-width: 220px;
158
+ background: var(--surface);
159
+ border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
160
+ border-radius: 12px;
161
+ box-shadow: var(--shadow);
162
+ padding: .25rem;
163
+ display: none;
164
+ }
165
+ .menu.open { display: block; }
166
+ .menu button {
167
+ width: 100%;
168
+ padding: .75rem .85rem;
169
+ display: flex;
170
+ align-items: center;
171
+ gap: .6rem;
172
+ font-size: var(--fs-400);
173
+ background: transparent;
174
+ border: 0;
175
+ color: var(--text);
176
+ border-radius: 8px;
177
+ cursor: pointer;
178
+ }
179
+ .menu button:hover { background: color-mix(in oklab, var(--card) 80%, transparent); }
180
+
181
+ .layout {
182
+ display: grid;
183
+ grid-template-columns: 1fr;
184
+ gap: var(--gap);
185
+ max-width: var(--grid-max);
186
+ margin: 0 auto;
187
+ padding: clamp(0.75rem, 2vw, 1.25rem);
188
+ }
189
+
190
+ /* Sticky TOC */
191
+ nav.toc {
192
+ position: sticky;
193
+ top: 72px;
194
+ align-self: start;
195
+ background: var(--surface);
196
+ border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
197
+ border-radius: var(--radius);
198
+ padding: .75rem;
199
+ display: grid;
200
+ gap: .25rem;
201
+ height: fit-content;
202
+ max-height: calc(100vh - 96px);
203
+ overflow: auto;
204
+ }
205
+ .toc h4 {
206
+ margin: .25rem .5rem .5rem;
207
+ color: var(--muted);
208
+ font-size: .85rem;
209
+ letter-spacing: .4px;
210
+ text-transform: uppercase;
211
+ }
212
+ .toc a {
213
+ display: grid;
214
+ grid-template-columns: auto 1fr auto;
215
+ gap: .6rem;
216
+ align-items: center;
217
+ padding: .5rem .6rem;
218
+ color: var(--text);
219
+ text-decoration: none;
220
+ border-radius: 8px;
221
+ font-size: var(--fs-400);
222
+ }
223
+ .toc a .dot {
224
+ width: 8px; height: 8px; border-radius: 50%;
225
+ background: color-mix(in oklab, var(--muted) 60%, transparent);
226
+ }
227
+ .toc a.active {
228
+ background: color-mix(in oklab, var(--primary) 8%, transparent);
229
+ outline: 1px dashed color-mix(in oklab, var(--primary) 30%, transparent);
230
+ }
231
+ .toc a.active .dot { background: var(--primary); }
232
+ .toc small {
233
+ color: var(--muted);
234
+ font-size: .7rem;
235
+ }
236
+
237
+ /* Hero */
238
+ .hero {
239
+ background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 12%, transparent), transparent 45%), var(--surface);
240
+ border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
241
+ border-radius: var(--radius);
242
+ padding: clamp(1rem, 3vw, 1.75rem);
243
+ display: grid;
244
+ gap: var(--gap);
245
+ }
246
+ .hero header h1 {
247
+ font-size: var(--fs-900);
248
+ margin: 0;
249
+ letter-spacing: -0.02em;
250
+ }
251
+ .hero header p {
252
+ margin: .35rem 0 0;
253
+ color: var(--muted);
254
+ font-size: var(--fs-500);
255
+ }
256
+ .kpis {
257
+ display: grid;
258
+ grid-template-columns: repeat(2, 1fr);
259
+ gap: var(--gap);
260
+ }
261
+ .card {
262
+ container-type: inline-size;
263
+ background: var(--card);
264
+ border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
265
+ border-radius: calc(var(--radius) - 2px);
266
+ padding: clamp(.85rem, 2.2vw, 1.25rem);
267
+ box-shadow: var(--shadow);
268
+ display: grid;
269
+ gap: .65rem;
270
+ }
271
+ .card .label {
272
+ color: var(--muted);
273
+ font-size: var(--fs-300);
274
+ letter-spacing: .2px;
275
+ text-transform: uppercase;
276
+ }
277
+ .card .value {
278
+ font-weight: 800;
279
+ font-size: clamp(1.35rem, 2.5vw, 1.85rem);
280
+ }
281
+ .trend {
282
+ display: inline-flex;
283
+ gap: .45rem;
284
+ align-items: center;
285
+ color: var(--success);
286
+ font-size: .9rem;
287
+ }
288
+ .trend.down { color: var(--danger); }
289
+ @container (min-width: 360px) {
290
+ .card .value { font-size: clamp(1.5rem, 2.2cqi, 2rem); }
291
+ }
292
+
293
+ /* Content grid */
294
+ .content-grid {
295
+ display: grid;
296
+ grid-template-columns: 1fr;
297
+ gap: var(--gap);
298
+ }
299
+ .section {
300
+ background: var(--surface);
301
+ border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
302
+ border-radius: var(--radius);
303
+ padding: clamp(1rem, 2.5vw, 1.5rem);
304
+ display: grid;
305
+ gap: clamp(.75rem, 1.2vw, 1rem);
306
+ }
307
+ .section header {
308
+ display: flex;
309
+ align-items: baseline;
310
+ justify-content: space-between;
311
+ gap: 1rem;
312
+ }
313
+ .section h2 {
314
+ margin: 0;
315
+ font-size: var(--fs-800);
316
+ }
317
+ .section .actions {
318
+ display: flex;
319
+ gap: .5rem;
320
+ }
321
+ .section.collapsible > .content {
322
+ display: grid;
323
+ gap: .75rem;
324
+ }
325
+ .section.collapsible[data-collapsed="true"] > .content {
326
+ display: none;
327
+ }
328
+
329
+ .grid-2 {
330
+ display: grid;
331
+ grid-template-columns: 1fr;
332
+ gap: var(--gap);
333
+ }
334
+ .grid-3 {
335
+ display: grid;
336
+ grid-template-columns: 1fr;
337
+ gap: var(--gap);
338
+ }
339
+
340
+ /* Chart cards */
341
+ .chart {
342
+ display: grid;
343
+ gap: .5rem;
344
+ }
345
+ .chart header {
346
+ display: flex;
347
+ align-items: center;
348
+ justify-content: space-between;
349
+ gap: .5rem;
350
+ }
351
+ .chart-title {
352
+ font-weight: 700;
353
+ font-size: var(--fs-600);
354
+ }
355
+ .chart .legend {
356
+ display: flex;
357
+ gap: .75rem;
358
+ flex-wrap: wrap;
359
+ }
360
+ .legend .item {
361
+ display: inline-flex;
362
+ align-items: center;
363
+ gap: .4rem;
364
+ font-size: .85rem;
365
+ color: var(--muted);
366
+ }
367
+ .legend .swatch {
368
+ width: 12px; height: 12px; border-radius: 3px;
369
+ }
370
+ .viz {
371
+ position: relative;
372
+ width: 100%;
373
+ aspect-ratio: 16/9;
374
+ background: linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, transparent), transparent);
375
+ border-radius: 12px;
376
+ border: 1px dashed color-mix(in oklab, var(--muted) 18%, transparent);
377
+ overflow: hidden;
378
+ }
379
+ .viz svg, .viz canvas { width: 100%; height: 100%; display: block; }
380
+ .tooltip {
381
+ position: absolute;
382
+ background: color-mix(in oklab, var(--card) 92%, transparent);
383
+ color: var(--text);
384
+ border: 1px solid color-mix(in oklab, var(--muted) 30%, transparent);
385
+ padding: .4rem .55rem;
386
+ font-size: .85rem;
387
+ border-radius: 8px;
388
+ box-shadow: var(--shadow);
389
+ pointer-events: none;
390
+ opacity: 0;
391
+ transform: translate(-50%, -120%);
392
+ transition: opacity .1s ease;
393
+ white-space: nowrap;
394
+ }
395
+ .dl-chart {
396
+ border: 0; background: transparent; color: var(--muted); cursor: pointer;
397
+ }
398
+ .dl-chart:hover { color: var(--text); }
399
+
400
+ /* Table */
401
+ .table {
402
+ overflow: auto;
403
+ border-radius: 12px;
404
+ border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
405
+ }
406
+ table {
407
+ width: 100%;
408
+ border-collapse: collapse;
409
+ font-size: var(--fs-400);
410
+ }
411
+ thead tr {
412
+ background: color-mix(in oklab, var(--card) 75%, transparent);
413
+ }
414
+ th, td {
415
+ padding: .75rem .85rem;
416
+ text-align: left;
417
+ border-bottom: 1px solid color-mix(in oklab, var(--muted) 15%, transparent);
418
+ vertical-align: top;
419
+ }
420
+ th.sortable {
421
+ cursor: pointer;
422
+ user-select: none;
423
+ white-space: nowrap;
424
+ }
425
+ th.sortable .sort {
426
+ margin-left: .35rem; color: var(--muted);
427
+ }
428
+ tbody tr:hover {
429
+ background: color-mix(in oklab, var(--card) 85%, transparent);
430
+ }
431
+ .filters {
432
+ display: flex; flex-wrap: wrap; gap: .5rem;
433
+ }
434
+ .chip {
435
+ padding: .4rem .6rem;
436
+ font-size: .85rem;
437
+ background: color-mix(in oklab, var(--card) 85%, transparent);
438
+ border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
439
+ color: var(--text);
440
+ border-radius: 999px;
441
+ cursor: pointer;
442
+ }
443
+ .chip.active {
444
+ background: color-mix(in oklab, var(--primary) 12%, transparent);
445
+ border-color: color-mix(in oklab, var(--primary) 50%, var(--muted));
446
+ }
447
+
448
+ /* References */
449
+ .ref-list {
450
+ display: grid;
451
+ gap: .5rem;
452
+ }
453
+ .ref {
454
+ display: grid;
455
+ grid-template-columns: auto 1fr;
456
+ gap: .6rem;
457
+ align-items: start;
458
+ }
459
+ .ref a { color: var(--accent); text-decoration: none; }
460
+ .ref a:hover { text-decoration: underline; }
461
+
462
+ /* Back to top */
463
+ .to-top {
464
+ position: fixed;
465
+ right: 12px;
466
+ bottom: 12px;
467
+ z-index: 999;
468
+ display: none;
469
+ }
470
+ .to-top.show { display: block; }
471
+
472
+ /* Breakpoints */
473
+ @media (min-width: 768px) {
474
+ .kpis { grid-template-columns: repeat(3, 1fr); }
475
+ .grid-2 { grid-template-columns: repeat(2, 1fr); }
476
+ .grid-3 { grid-template-columns: repeat(3, 1fr); }
477
+ }
478
+ @media (min-width: 1024px) {
479
+ .layout {
480
+ grid-template-columns: 280px 1fr;
481
+ align-items: start;
482
+ }
483
+ }
484
+ @media (min-width: 1440px) {
485
+ .hero { grid-template-columns: 1.2fr 1fr; align-items: center; }
486
+ }
487
+
488
+ /* Highlights from search */
489
+ mark {
490
+ background: color-mix(in oklab, var(--warning) 55%, transparent);
491
+ color: inherit;
492
+ padding: 0 .2em;
493
+ border-radius: 3px;
494
+ }
495
+
496
+ /* Small helpers */
497
+ .muted { color: var(--muted); }
498
+ .ok { color: var(--success); }
499
+ .warn { color: var(--warning); }
500
+ .bad { color: var(--danger); }
501
+ .note {
502
+ padding: .6rem .75rem;
503
+ background: color-mix(in oklab, var(--card) 85%, transparent);
504
+ border-left: 3px solid var(--accent);
505
+ border-radius: 8px;
506
+ }
507
+ </style>
508
+ </head>
509
+ <body>
510
+ <div class="reading-progress" id="readingProgress"></div>
511
+
512
+ <header class="appbar" id="top">
513
+ <div class="appbar-inner">
514
+ <div class="brand">
515
+ <i class="fa-solid fa-chart-line"></i>
516
+ Vietnam Economic Growth Report 2025
517
+ </div>
518
+ <div class="spacer"></div>
519
+ <div class="toolbar">
520
+ <div class="search" role="search">
521
+ <i class="fa-solid fa-magnifying-glass"></i>
522
+ <input id="searchInput" type="search" placeholder="Search the report (e.g., inflation, FDI, GDP)..." aria-label="Search report" />
523
+ <span class="count" id="searchCount">0</span>
524
+ </div>
525
+ <button class="icon-btn" id="clearSearch" title="Clear search"><i class="fa-solid fa-eraser"></i></button>
526
+ <button class="icon-btn" id="themeToggle" title="Toggle theme"><i class="fa-solid fa-sun"></i></button>
527
+ <div class="export-menu">
528
+ <button class="icon-btn" id="exportBtn" title="Export & share"><i class="fa-solid fa-arrow-down-to-line"></i></button>
529
+ <div class="menu" id="exportMenu" role="menu" aria-label="Export options">
530
+ <button data-action="print"><i class="fa-solid fa-file-pdf"></i>Export as PDF (Print)</button>
531
+ <button data-action="copy-summary"><i class="fa-solid fa-clipboard"></i>Copy Executive Summary</button>
532
+ <button data-action="download-csv"><i class="fa-solid fa-table"></i>Download Key Data (CSV)</button>
533
+ <button data-action="share-link"><i class="fa-solid fa-link"></i>Copy Link to Section</button>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </header>
539
+
540
+ <main class="layout" id="main">
541
+ <nav class="toc" aria-label="Table of contents">
542
+ <h4>Contents</h4>
543
+ <a href="#exec-summary"><span class="dot"></span>Executive Summary<small></small></a>
544
+ <a href="#methodology"><span class="dot"></span>Methodology<small></small></a>
545
+ <a href="#findings"><span class="dot"></span>Findings<small></small></a>
546
+ <a href="#indicators"><span class="dot"></span>Key Indicators<small></small></a>
547
+ <a href="#sectoral"><span class="dot"></span>Sectoral Analysis<small></small></a>
548
+ <a href="#risks"><span class="dot"></span>Challenges & Risks<small></small></a>
549
+ <a href="#historical"><span class="dot"></span>Historical Comparison<small></small></a>
550
+ <a href="#outlook"><span class="dot"></span>Outlook & Projections<small></small></a>
551
+ <a href="#conclusion"><span class="dot"></span>Conclusion<small></small></a>
552
+ <a href="#references"><span class="dot"></span>References<small></small></a>
553
+ <a href="#appendices"><span class="dot"></span>Appendices<small></small></a>
554
+ </nav>
555
+
556
+ <div class="content-grid">
557
+ <section class="hero" id="exec-summary">
558
+ <header>
559
+ <div>
560
+ <h1>Vietnam’s Economy 2025: Strong Momentum, Prudent Optimism</h1>
561
+ <p>GDP expanded 7.96% y/y in Q2; H1 growth reached 7.52%—the strongest first-half since 2011—driven by services and manufacturing. Inflation remains contained, unemployment low, and FDI inflows robust despite external headwinds.</p>
562
+ </div>
563
+ </header>
564
+ <div class="kpis">
565
+ <div class="card" data-animate="counter">
566
+ <div class="label">GDP Growth (H1 2025)</div>
567
+ <div class="value" data-target="7.52">7.52%</div>
568
+ <div class="trend"><i class="fa-solid fa-arrow-trend-up"></i> Highest H1 since 2011</div>
569
+ </div>
570
+ <div class="card" data-animate="counter">
571
+ <div class="label">Q2 2025 GDP (y/y)</div>
572
+ <div class="value" data-target="7.96">7.96%</div>
573
+ <div class="trend"><i class="fa-solid fa-bolt"></i> Broad-based in industry & services</div>
574
+ </div>
575
+ <div class="card" data-animate="counter">
576
+ <div class="label">Inflation (Jun 2025)</div>
577
+ <div class="value" data-target="3.57">3.57%</div>
578
+ <div class="trend"><i class="fa-solid fa-gauge"></i> Within 3–4.5% target</div>
579
+ </div>
580
+ <div class="card" data-animate="counter">
581
+ <div class="label">Unemployment (Q1 2025)</div>
582
+ <div class="value" data-target="2.20">2.20%</div>
583
+ <div class="trend ok"><i class="fa-solid fa-user-check"></i> Historically low</div>
584
+ </div>
585
+ <div class="card" data-animate="counter">
586
+ <div class="label">FDI Total (H1 2025)</div>
587
+ <div class="value" data-target="21.51">US$21.51b</div>
588
+ <div class="trend"><i class="fa-solid fa-globe"></i> +32.6% y/y</div>
589
+ </div>
590
+ <div class="card" data-animate="counter">
591
+ <div class="label">Retail Sales (Q1 2025)</div>
592
+ <div class="value" data-target="66.83">US$66.83b</div>
593
+ <div class="trend"><i class="fa-solid fa-store"></i> +9.9% y/y</div>
594
+ </div>
595
+ </div>
596
+ <div class="note">
597
+ Summary: Vietnam’s robust start to 2025 is anchored in resilient domestic fundamentals—low unemployment, contained inflation, and strong FDI—while external risks from trade tensions and tariffs weigh on the outlook. Government targets (8.3–8.5%) exceed most international forecasts (5.2–6.6%), calling for cautious optimism.
598
+ </div>
599
+ </section>
600
+
601
+ <section class="section collapsible" id="methodology" data-collapsed="false">
602
+ <header>
603
+ <h2>Methodology</h2>
604
+ <div class="actions">
605
+ <button class="icon-btn toggle-section" title="Collapse/Expand"><i class="fa-solid fa-chevron-up"></i></button>
606
+ </div>
607
+ </header>
608
+ <div class="content">
609
+ <p>This dashboard synthesizes publicly available statistics and reputable institutional forecasts to present a concise and interactive view of Vietnam’s 2025 economic performance.</p>
610
+ <ul>
611
+ <li>Scope: Macroeconomic indicators (GDP growth, inflation, unemployment), capital flows (FDI), and sectoral context (services, manufacturing, retail).</li>
612
+ <li>Sources: IMF, ADB, World Bank, Vietnam GSO, Trading Economics, Vietnam Investment Review, and other cited outlets (see References).</li>
613
+ <li>Processing: Figures are normalized to percent or USD where applicable; H1 denotes first half of calendar year. Forecasts are labeled distinctly from actuals.</li>
614
+ <li>Visualization: Custom SVG charts (no frameworks) with responsive scaling, tooltips, and export-to-PNG utilities.</li>
615
+ <li>Quality: Cross-checked figures against at least two sources where possible; discrepancies noted in footnotes if relevant.</li>
616
+ </ul>
617
+ </div>
618
+ </section>
619
+
620
+ <section class="section" id="findings">
621
+ <header>
622
+ <h2>Key Findings</h2>
623
+ </header>
624
+ <div class="grid-2">
625
+ <div class="card">
626
+ <h3 style="margin:0;font-size:var(--fs-700)">Growth Momentum</h3>
627
+ <p>Q2 growth accelerated to 7.96% y/y, lifting H1 2025 to 7.52%—a post-2011 high. Services and manufacturing were principal drivers, underpinned by resilient domestic demand and export competitiveness.</p>
628
+ </div>
629
+ <div class="card">
630
+ <h3 style="margin:0;font-size:var(--fs-700)">Macro Stability</h3>
631
+ <p>Inflation at 3.57% in June remains within the 3–4.5% comfort zone; unemployment at 2.20% reflects a tight labor market. Policy space remains available should global shocks intensify.</p>
632
+ </div>
633
+ </div>
634
+ </section>
635
+
636
+ <section class="section" id="indicators">
637
+ <header>
638
+ <h2>Key Economic Indicators 2025</h2>
639
+ <div class="actions">
640
+ <button class="icon-btn" data-jump="#dataset"><i class="fa-solid fa-table"></i></button>
641
+ </div>
642
+ </header>
643
+ <div class="grid-2">
644
+ <div class="card chart" id="chart-gdp">
645
+ <header>
646
+ <div class="chart-title">GDP Growth: 2025 Quarterly & H1</div>
647
+ <div>
648
+ <button class="dl-chart" title="Download chart as PNG" data-download="chart-gdp"><i class="fa-solid fa-download"></i></button>
649
+ </div>
650
+ </header>
651
+ <div class="legend">
652
+ <div class="item"><span class="swatch" style="background: var(--accent)"></span>Actual (y/y)</div>
653
+ <div class="item"><span class="swatch" style="background: var(--primary)"></span>H1 Average</div>
654
+ </div>
655
+ <div class="viz" data-chart="bar"></div>
656
+ </div>
657
+
658
+ <div class="card chart" id="chart-inflation">
659
+ <header>
660
+ <div class="chart-title">Inflation: 2025 Actuals vs Forecasts</div>
661
+ <div>
662
+ <button class="dl-chart" title="Download chart as PNG" data-download="chart-inflation"><i class="fa-solid fa-download"></i></button>
663
+ </div>
664
+ </header>
665
+ <div class="legend">
666
+ <div class="item"><span class="swatch" style="background: var(--accent)"></span>Actual</div>
667
+ <div class="item"><span class="swatch" style="background: var(--warning)"></span>IMF 2025</div>
668
+ <div class="item"><span class="swatch" style="background: var(--primary)"></span>ADB 2025</div>
669
+ </div>
670
+ <div class="viz" data-chart="lines"></div>
671
+ </div>
672
+
673
+ <div class="card chart" id="chart-unemp">
674
+ <header>
675
+ <div class="chart-title">Unemployment Gauge (Q1 2025)</div>
676
+ <div>
677
+ <button class="dl-chart" title="Download chart as PNG" data-download="chart-unemp"><i class="fa-solid fa-download"></i></button>
678
+ </div>
679
+ </header>
680
+ <div class="viz" data-chart="donut"></div>
681
+ </div>
682
+
683
+ <div class="card chart" id="chart-fdi">
684
+ <header>
685
+ <div class="chart-title">FDI Inflows 2025</div>
686
+ <div>
687
+ <button class="dl-chart" title="Download chart as PNG" data-download="chart-fdi"><i class="fa-solid fa-download"></i></button>
688
+ </div>
689
+ </header>
690
+ <div class="legend">
691
+ <div class="item"><span class="swatch" style="background: var(--accent)"></span>Registered (Jan–May)</div>
692
+ <div class="item"><span class="swatch" style="background: var(--primary)"></span>Disbursed (Jan–May)</div>
693
+ <div class="item"><span class="swatch" style="background: var(--success)"></span>Total (H1)</div>
694
+ </div>
695
+ <div class="viz" data-chart="columns"></div>
696
+ </div>
697
+ </div>
698
+ </section>
699
+
700
+ <section class="section" id="sectoral">
701
+ <header><h2>Sectoral Analysis</h2></header>
702
+ <div class="grid-2">
703
+ <div class="card">
704
+ <h3 style="margin:0;font-size:var(--fs-700)">Primary Growth Drivers</h3>
705
+ <ol>
706
+ <li><strong>Services sector</strong> remained the largest GDP contributor.</li>
707
+ <li><strong>Manufacturing</strong> continued its recovery and expansion.</li>
708
+ <li><strong>Export industries</strong> acted as the economy’s backbone despite global frictions.</li>
709
+ <li><strong>Banking sector</strong> projected earnings +17% in 2025 with system-wide credit +15%.</li>
710
+ </ol>
711
+ </div>
712
+ <div class="card">
713
+ <h3 style="margin:0;font-size:var(--fs-700)">Retail Performance</h3>
714
+ <p>Retail sales reached 1.708 quadrillion VND (US$66.83b) in Q1 2025, up 9.9% y/y, supported by low unemployment and steady real incomes amid controlled inflation.</p>
715
+ </div>
716
+ </div>
717
+ </section>
718
+
719
+ <section class="section" id="risks">
720
+ <header><h2>Challenges and Risk Factors</h2></header>
721
+ <div class="grid-2">
722
+ <div class="card">
723
+ <ul>
724
+ <li><strong>Global trade tensions</strong> and <strong>US tariffs</strong> weigh on export-oriented firms.</li>
725
+ <li><strong>Geopolitical instability</strong> raises uncertainty and risk premiums.</li>
726
+ <li><strong>FDI overdependence</strong> and inflation vigilance flagged by experts.</li>
727
+ <li><strong>Macro stability</strong> must be preserved: avoid excess public debt and overheating.</li>
728
+ </ul>
729
+ </div>
730
+ <div class="card">
731
+ <h3 style="margin:0;font-size:var(--fs-700)">Policy Watch</h3>
732
+ <p>Authorities aim to diversify export markets, bolster domestic demand, and maintain policy flexibility to cushion global shocks if necessary.</p>
733
+ </div>
734
+ </div>
735
+ </section>
736
+
737
+ <section class="section" id="historical">
738
+ <header>
739
+ <h2>Historical Comparison</h2>
740
+ </header>
741
+ <div class="grid-2">
742
+ <div class="card chart" id="chart-historical">
743
+ <header>
744
+ <div class="chart-title">Q1 GDP Growth 2020–2025 (y/y)</div>
745
+ <div>
746
+ <button class="dl-chart" title="Download chart as PNG" data-download="chart-historical"><i class="fa-solid fa-download"></i></button>
747
+ </div>
748
+ </header>
749
+ <div class="legend">
750
+ <div class="item"><span class="swatch" style="background: var(--accent)"></span>Q1 Growth</div>
751
+ </div>
752
+ <div class="viz" data-chart="line"></div>
753
+ </div>
754
+ <div class="card">
755
+ <h3 style="margin:0;font-size:var(--fs-700)">Context</h3>
756
+ <p>After a 7.1% expansion in 2024, growth started stronger in 2025. While external headwinds may temper full-year performance, long-term fundamentals remain resilient.</p>
757
+ <ul>
758
+ <li>2024 GDP growth: <strong>7.1%</strong></li>
759
+ <li>2025 growth: potential moderation vs H1 pace due to external factors</li>
760
+ <li>Structural strengths: competitive exports, FDI pipeline, stable labor market</li>
761
+ </ul>
762
+ </div>
763
+ </div>
764
+ </section>
765
+
766
+ <section class="section" id="outlook">
767
+ <header><h2>Economic Outlook and Projections</h2></header>
768
+ <div class="grid-2">
769
+ <div class="card">
770
+ <h3 style="margin:0;font-size:var(--fs-700)">Near-term Prospects (2025)</h3>
771
+ <p>Solid baseline growth expected amid uncertainty. Government’s 8.3–8.5% target is ambitious relative to international forecasts (IMF 5.2%, World Bank 5.8%, ADB 6.6%). Parliamentary guidance indicates a <em>7% to at least 8%</em> range, reflecting confidence but recognizing risks.</p>
772
+ </div>
773
+ <div class="card chart" id="chart-forecasts">
774
+ <header>
775
+ <div class="chart-title">2025 GDP Growth Forecasts vs Target</div>
776
+ <div>
777
+ <button class="dl-chart" title="Download chart as PNG" data-download="chart-forecasts"><i class="fa-solid fa-download"></i></button>
778
+ </div>
779
+ </header>
780
+ <div class="legend">
781
+ <div class="item"><span class="swatch" style="background: var(--accent)"></span>Institutional Forecasts</div>
782
+ <div class="item"><span class="swatch" style="background: var(--warning)"></span>Gov Target Range</div>
783
+ </div>
784
+ <div class="viz" data-chart="range"></div>
785
+ </div>
786
+ </div>
787
+
788
+ <div class="grid-3" style="margin-top:var(--gap)">
789
+ <div class="card">
790
+ <h3 style="margin:0;font-size:var(--fs-700)">Supporting Factors</h3>
791
+ <ul>
792
+ <li>Robust FDI inflows signal investor confidence.</li>
793
+ <li>Low unemployment supports consumption.</li>
794
+ <li>Inflation control preserves purchasing power.</li>
795
+ <li>Export competitiveness remains intact.</li>
796
+ <li>Parliamentary support for higher growth ambitions.</li>
797
+ </ul>
798
+ </div>
799
+ <div class="card">
800
+ <h3 style="margin:0;font-size:var(--fs-700)">Risk Mitigation</h3>
801
+ <ul>
802
+ <li>Diversify export markets and supply chains.</li>
803
+ <li>Strengthen domestic demand via targeted fiscal measures.</li>
804
+ <li>Maintain macro stability and policy buffers.</li>
805
+ </ul>
806
+ </div>
807
+ <div class="card">
808
+ <h3 style="margin:0;font-size:var(--fs-700)">Takeaway</h3>
809
+ <p>Cautious optimism is warranted: upside from FDI and services could offset external headwinds, but achieving 8%+ will require benign external conditions and effective policy execution.</p>
810
+ </div>
811
+ </div>
812
+ </section>
813
+
814
+ <section class="section" id="dataset">
815
+ <header>
816
+ <h2>Interactive Dataset</h2>
817
+ </header>
818
+ <div class="filters" style="margin-bottom:.5rem">
819
+ <button class="chip active" data-filter="all">All</button>
820
+ <button class="chip" data-filter="GDP">GDP</button>
821
+ <button class="chip" data-filter="Inflation">Inflation</button>
822
+ <button class="chip" data-filter="Unemployment">Unemployment</button>
823
+ <button class="chip" data-filter="FDI">FDI</button>
824
+ <button class="chip" data-filter="Retail">Retail</button>
825
+ <div class="spacer"></div>
826
+ <button class="chip" id="resetTable"><i class="fa-solid fa-rotate-left"></i>&nbsp;Reset</button>
827
+ </div>
828
+ <div class="table">
829
+ <table id="dataTable">
830
+ <thead>
831
+ <tr>
832
+ <th class="sortable" data-sort="text">Indicator <i class="sort fa-solid fa-sort"></i></th>
833
+ <th class="sortable" data-sort="text">Period <i class="sort fa-solid fa-sort"></i></th>
834
+ <th class="sortable" data-sort="number">Value <i class="sort fa-solid fa-sort"></i></th>
835
+ <th>Notes / Source</th>
836
+ </tr>
837
+ </thead>
838
+ <tbody>
839
+ <tr data-type="GDP"><td>GDP Growth</td><td>Q1 2025</td><td data-value="6.9">6.9%</td><td>y/y growth</td></tr>
840
+ <tr data-type="GDP"><td>GDP Growth</td><td>Q2 2025</td><td data-value="7.96">7.96%</td><td>y/y growth</td></tr>
841
+ <tr data-type="GDP"><td>GDP Growth</td><td>H1 2025</td><td data-value="7.52">7.52%</td><td>Highest H1 since 2011</td></tr>
842
+
843
+ <tr data-type="Inflation"><td>Inflation</td><td>May 2025</td><td data-value="3.24">3.24%</td><td>IMF/ADB range 2.9–4.0%</td></tr>
844
+ <tr data-type="Inflation"><td>Inflation</td><td>Jun 2025</td><td data-value="3.57">3.57%</td><td>Highest since start of year</td></tr>
845
+ <tr data-type="Inflation"><td>Inflation Forecast (IMF)</td><td>2025</td><td data-value="2.9">2.9%</td><td>IMF projection</td></tr>
846
+ <tr data-type="Inflation"><td>Inflation Forecast (ADB)</td><td>2025</td><td data-value="4.0">4.0%</td><td>ADB projection</td></tr>
847
+
848
+ <tr data-type="Unemployment"><td>Unemployment</td><td>Q1 2025</td><td data-value="2.2">2.20%</td><td>Down from 2.22% in Q4 2024</td></tr>
849
+
850
+ <tr data-type="FDI"><td>FDI Registered</td><td>Jan–May 2025</td><td data-value="18.4">US$18.4b</td><td>+51% y/y</td></tr>
851
+ <tr data-type="FDI"><td>FDI Disbursed</td><td>Jan–May 2025</td><td data-value="8.9">US$8.9b</td><td></td></tr>
852
+ <tr data-type="FDI"><td>FDI Total</td><td>H1 2025</td><td data-value="21.51">US$21.51b</td><td>+32.6% y/y</td></tr>
853
+
854
+ <tr data-type="Retail"><td>Retail Sales</td><td>Q1 2025</td><td data-value="66.83">US$66.83b</td><td>1.708 quadrillion VND; +9.9% y/y</td></tr>
855
+ </tbody>
856
+ </table>
857
+ </div>
858
+ </section>
859
+
860
+ <section class="section collapsible" id="conclusion" data-collapsed="false">
861
+ <header>
862
+ <h2>Conclusion</h2>
863
+ <div class="actions">
864
+ <button class="icon-btn toggle-section" title="Collapse/Expand"><i class="fa-solid fa-chevron-up"></i></button>
865
+ </div>
866
+ </header>
867
+ <div class="content">
868
+ <p>Vietnam’s 2025 performance underscores resilience and growth potential. With low unemployment, contained inflation, and strong FDI inflows, the economy is well-positioned for sustained development. The ambitious government target (~8%+) contrasts with more conservative international projections, suggesting a balanced stance of aspiration and prudence.</p>
869
+ <p>The government’s determination to reach 8% in 2025 aims to set the stage for higher growth in subsequent years; execution and external conditions will be pivotal.</p>
870
+ </div>
871
+ </section>
872
+
873
+ <section class="section" id="references">
874
+ <header><h2>Sources and Citations</h2></header>
875
+ <div class="ref-list">
876
+ <div class="ref"><span>1.</span> <a href="https://tradingeconomics.com/vietnam/gdp-growth-annual" target="_blank" rel="noopener">Trading Economics - Vietnam GDP Annual Growth Rate</a></div>
877
+ <div class="ref"><span>2.</span> <a href="https://www.imf.org/en/Countries/VNM" target="_blank" rel="noopener">International Monetary Fund - Vietnam Country Profile</a></div>
878
+ <div class="ref"><span>3.</span> <a href="https://www.worldeconomics.com/GDP/Vietnam.gdp" target="_blank" rel="noopener">World Economics - Vietnam GDP Estimates</a></div>
879
+ <div class="ref"><span>4.</span> <a href="https://www.gso.gov.vn/en/" target="_blank" rel="noopener">Government of Vietnam - General Statistics Office</a></div>
880
+ <div class="ref"><span>5.</span> <a href="https://en.wikipedia.org/wiki/Economy_of_Vietnam" target="_blank" rel="noopener">Wikipedia - Economy of Vietnam</a></div>
881
+ <div class="ref"><span>6.</span> <a href="https://www.imf.org/en/Countries/VNM" target="_blank" rel="noopener">IMF - Vietnam and the IMF</a></div>
882
+ <div class="ref"><span>7.</span> <a href="https://www.focus-economics.com/countries/vietnam" target="_blank" rel="noopener">FocusEconomics - Vietnam Economic Indicators</a></div>
883
+ <div class="ref"><span>8.</span> <a href="https://www.gso.gov.vn/en/data-and-statistics/" target="_blank" rel="noopener">National Statistics Office of Vietnam - Economic Reports</a></div>
884
+ <div class="ref"><span>9.</span> <a href="https://vietnamnet.vn/" target="_blank" rel="noopener">VietnamNet - Economic News and Analysis</a></div>
885
+ <div class="ref"><span>10.</span> <a href="https://www.imf.org/en/Publications/CR" target="_blank" rel="noopener">IMF - Article IV Mission Reports</a></div>
886
+ <div class="ref"><span>11.</span> <a href="https://www.vietnam-briefing.com/" target="_blank" rel="noopener">Vietnam Briefing - Economic Analysis</a></div>
887
+ <div class="ref"><span>12.</span> <a href="https://vir.com.vn/" target="_blank" rel="noopener">Vietnam Investment Review - FDI Statistics</a></div>
888
+ <div class="ref"><span>13.</span> <a href="https://tradingeconomics.com/vietnam/foreign-direct-investment" target="_blank" rel="noopener">Trading Economics - Vietnam FDI</a></div>
889
+ <div class="ref"><span>14.</span> <a href="https://www.whitecase.com/" target="_blank" rel="noopener">White & Case - Regional Economic Outlook</a></div>
890
+ <div class="ref"><span>15.</span> <a href="https://vneconomictimes.com/" target="_blank" rel="noopener">Vietnam Economic Times</a></div>
891
+ <div class="ref"><span>16.</span> <a href="https://www.adb.org/countries/viet-nam/main" target="_blank" rel="noopener">Asian Development Bank - Vietnam Country Partnership</a></div>
892
+ <div class="ref"><span>17.</span> <a href="https://www.mpi.gov.vn/en/" target="_blank" rel="noopener">Ministry of Planning and Investment - Vietnam</a></div>
893
+ </div>
894
+ </section>
895
+
896
+ <section class="section collapsible" id="appendices" data-collapsed="true">
897
+ <header>
898
+ <h2>Appendices</h2>
899
+ <div class="actions">
900
+ <button class="icon-btn toggle-section" title="Collapse/Expand"><i class="fa-solid fa-chevron-down"></i></button>
901
+ </div>
902
+ </header>
903
+ <div class="content">
904
+ <details open>
905
+ <summary><strong>Appendix A:</strong> Historical Q1 GDP Growth (2020–2025)</summary>
906
+ <ul>
907
+ <li>2020: 3.21%</li>
908
+ <li>2021: 4.85%</li>
909
+ <li>2022: 5.42%</li>
910
+ <li>2023: 3.46%</li>
911
+ <li>2024: 5.98%</li>
912
+ <li>2025: 6.93% (Q1)</li>
913
+ </ul>
914
+ </details>
915
+ <details>
916
+ <summary><strong>Appendix B:</strong> Forecast & Target Notes</summary>
917
+ <p>Forecasts reflect baseline assumptions by institutions (IMF, ADB, World Bank). Government target range (8.3–8.5%) and parliamentary guidance (7% to ≥8%) are policy aspirations and may differ from realized outcomes depending on global conditions and policy implementation.</p>
918
+ </details>
919
+ </div>
920
+ </section>
921
+ </div>
922
+ </main>
923
+
924
+ <button class="icon-btn to-top" id="toTop" title="Back to top"><i class="fa-solid fa-arrow-up"></i></button>
925
+
926
+ <script>
927
+ /* Theme persistence */
928
+ (function initTheme() {
929
+ const saved = localStorage.getItem('theme');
930
+ const prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
931
+ const theme = saved || (prefersLight ? 'light' : 'dark');
932
+ document.documentElement.setAttribute('data-theme', theme);
933
+ updateThemeIcon(theme);
934
+ })();
935
+ function updateThemeIcon(theme) {
936
+ const icon = document.querySelector('#themeToggle i');
937
+ if (!icon) return;
938
+ icon.className = 'fa-solid ' + (theme === 'light' ? 'fa-moon' : 'fa-sun');
939
+ }
940
+ document.getElementById('themeToggle').addEventListener('click', () => {
941
+ const curr = document.documentElement.getAttribute('data-theme') || 'dark';
942
+ const next = curr === 'dark' ? 'light' : 'dark';
943
+ document.documentElement.setAttribute('data-theme', next);
944
+ localStorage.setItem('theme', next);
945
+ updateThemeIcon(next);
946
+ });
947
+
948
+ /* Export menu */
949
+ const exportBtn = document.getElementById('exportBtn');
950
+ const exportMenu = document.getElementById('exportMenu');
951
+ exportBtn.addEventListener('click', () => exportMenu.classList.toggle('open'));
952
+ document.addEventListener('click', (e) => {
953
+ if (!exportMenu.contains(e.target) && e.target !== exportBtn) exportMenu.classList.remove('open');
954
+ });
955
+ exportMenu.addEventListener('click', async (e) => {
956
+ const btn = e.target.closest('button');
957
+ if (!btn) return;
958
+ const action = btn.dataset.action;
959
+ if (action === 'print') {
960
+ window.print();
961
+ } else if (action === 'copy-summary') {
962
+ const exec = document.querySelector('#exec-summary .note')?.textContent?.trim();
963
+ await navigator.clipboard.writeText(exec || '');
964
+ toast('Executive Summary copied to clipboard.');
965
+ } else if (action === 'download-csv') {
966
+ downloadCSV();
967
+ } else if (action === 'share-link') {
968
+ const active = document.querySelector('.toc a.active')?.getAttribute('href') || '#top';
969
+ const url = location.origin + location.pathname + active;
970
+ await navigator.clipboard.writeText(url);
971
+ toast('Sharable link copied.');
972
+ }
973
+ exportMenu.classList.remove('open');
974
+ });
975
+
976
+ function downloadCSV() {
977
+ const rows = [['Indicator','Period','Value','Notes']];
978
+ document.querySelectorAll('#dataTable tbody tr').forEach(tr => {
979
+ if (tr.style.display === 'none') return;
980
+ const cells = [...tr.children].map(td => td.textContent.trim());
981
+ rows.push(cells);
982
+ });
983
+ const csv = rows.map(r => r.map(v => `"${v.replace(/"/g,'""')}"`).join(',')).join('\n');
984
+ const blob = new Blob([csv], {type:'text/csv'});
985
+ const a = document.createElement('a');
986
+ a.href = URL.createObjectURL(blob);
987
+ a.download = 'vietnam_economic_indicators_2025.csv';
988
+ document.body.appendChild(a);
989
+ a.click();
990
+ a.remove();
991
+ }
992
+
993
+ /* Smooth jump via buttons */
994
+ document.querySelectorAll('[data-jump]').forEach(btn => {
995
+ btn.addEventListener('click', () => {
996
+ const target = document.querySelector(btn.dataset.jump);
997
+ if (target) target.scrollIntoView({behavior:'smooth', block:'start'});
998
+ });
999
+ });
1000
+
1001
+ /* Collapsible sections */
1002
+ document.querySelectorAll('.toggle-section').forEach(btn => {
1003
+ btn.addEventListener('click', () => {
1004
+ const section = btn.closest('.section.collapsible');
1005
+ const collapsed = section.getAttribute('data-collapsed') === 'true';
1006
+ section.setAttribute('data-collapsed', collapsed ? 'false' : 'true');
1007
+ btn.innerHTML = `<i class="fa-solid fa-chevron-${collapsed ? 'up' : 'down'}"></i>`;
1008
+ });
1009
+ });
1010
+
1011
+ /* Table sorting & filtering */
1012
+ const dataTable = document.getElementById('dataTable');
1013
+ const ths = dataTable.querySelectorAll('th.sortable');
1014
+ let sortState = { index: 0, dir: 1 };
1015
+ ths.forEach((th, i) => {
1016
+ th.addEventListener('click', () => {
1017
+ const type = th.dataset.sort || 'text';
1018
+ sortState.dir = sortState.index === i ? sortState.dir * -1 : 1;
1019
+ sortState.index = i;
1020
+ sortTable(i, type, sortState.dir);
1021
+ ths.forEach(x => x.querySelector('.sort').className = 'sort fa-solid fa-sort');
1022
+ th.querySelector('.sort').className = 'sort fa-solid ' + (sortState.dir === 1 ? 'fa-sort-up' : 'fa-sort-down');
1023
+ localStorage.setItem('tableSort', JSON.stringify(sortState));
1024
+ });
1025
+ });
1026
+ function sortTable(col, type, dir) {
1027
+ const rows = Array.from(dataTable.tBodies[0].rows);
1028
+ rows.sort((a,b) => {
1029
+ const A = a.cells[col].dataset.value || a.cells[col].textContent.trim();
1030
+ const B = b.cells[col].dataset.value || b.cells[col].textContent.trim();
1031
+ if (type === 'number') return (parseFloat(A) - parseFloat(B)) * dir;
1032
+ return A.localeCompare(B) * dir;
1033
+ });
1034
+ rows.forEach(r => dataTable.tBodies[0].appendChild(r));
1035
+ }
1036
+ (function restoreSort(){
1037
+ try {
1038
+ const saved = JSON.parse(localStorage.getItem('tableSort'));
1039
+ if (!saved) return;
1040
+ sortState = saved;
1041
+ const th = ths[sortState.index];
1042
+ sortTable(sortState.index, th.dataset.sort || 'text', sortState.dir);
1043
+ th.querySelector('.sort').className = 'sort fa-solid ' + (sortState.dir === 1 ? 'fa-sort-up' : 'fa-sort-down');
1044
+ } catch {}
1045
+ })();
1046
+
1047
+ const filterChips = document.querySelectorAll('.filters .chip[data-filter]');
1048
+ filterChips.forEach(chip => chip.addEventListener('click', () => {
1049
+ filterChips.forEach(c => c.classList.remove('active'));
1050
+ chip.classList.add('active');
1051
+ const type = chip.dataset.filter;
1052
+ dataTable.querySelectorAll('tbody tr').forEach(tr => {
1053
+ tr.style.display = (type === 'all' || tr.dataset.type === type) ? '' : 'none';
1054
+ });
1055
+ localStorage.setItem('tableFilter', type);
1056
+ }));
1057
+ document.getElementById('resetTable').addEventListener('click', () => {
1058
+ filterChips.forEach(c => c.classList.remove('active'));
1059
+ document.querySelector('.filters .chip[data-filter="all"]').classList.add('active');
1060
+ dataTable.querySelectorAll('tbody tr').forEach(tr => tr.style.display = '');
1061
+ localStorage.removeItem('tableFilter');
1062
+ localStorage.removeItem('tableSort');
1063
+ });
1064
+ (function restoreFilter(){
1065
+ const saved = localStorage.getItem('tableFilter');
1066
+ if (!saved) return;
1067
+ const chip = document.querySelector(`.filters .chip[data-filter="${saved}"]`);
1068
+ if (chip) chip.click();
1069
+ })();
1070
+
1071
+ /* Search with highlight */
1072
+ const searchInput = document.getElementById('searchInput');
1073
+ const searchCount = document.getElementById('searchCount');
1074
+ const clearSearch = document.getElementById('clearSearch');
1075
+ let currentSearch = '';
1076
+ function clearMarks(root=document) {
1077
+ root.querySelectorAll('mark').forEach(m => m.replaceWith(document.createTextNode(m.textContent)));
1078
+ }
1079
+ function highlightTerm(term) {
1080
+ if (!term) return 0;
1081
+ const rx = new RegExp(term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'ig');
1082
+ let count = 0;
1083
+ document.querySelectorAll('main .section, .hero').forEach(sec => {
1084
+ clearMarks(sec);
1085
+ const walker = document.createTreeWalker(sec, NodeFilter.SHOW_TEXT, {
1086
+ acceptNode: n => n.nodeValue.trim().length > 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
1087
+ });
1088
+ const nodes = [];
1089
+ while (walker.nextNode()) nodes.push(walker.currentNode);
1090
+ nodes.forEach(node => {
1091
+ const frag = document.createDocumentFragment();
1092
+ let lastIdx = 0;
1093
+ const text = node.nodeValue;
1094
+ text.replace(rx, (m, idx) => {
1095
+ const before = text.slice(lastIdx, idx);
1096
+ if (before) frag.appendChild(document.createTextNode(before));
1097
+ const mark = document.createElement('mark');
1098
+ mark.textContent = m;
1099
+ frag.appendChild(mark);
1100
+ lastIdx = idx + m.length;
1101
+ count++;
1102
+ });
1103
+ if (count && lastIdx) {
1104
+ const after = text.slice(lastIdx);
1105
+ if (after) frag.appendChild(document.createTextNode(after));
1106
+ node.parentNode.replaceChild(frag, node);
1107
+ }
1108
+ });
1109
+ });
1110
+ return count;
1111
+ }
1112
+ searchInput.addEventListener('input', () => {
1113
+ const term = searchInput.value.trim();
1114
+ currentSearch = term;
1115
+ clearMarks(document);
1116
+ const hits = highlightTerm(term);
1117
+ searchCount.textContent = hits;
1118
+ if (hits > 0) {
1119
+ const first = document.querySelector('mark');
1120
+ first?.scrollIntoView({behavior:'smooth', block:'center'});
1121
+ }
1122
+ localStorage.setItem('searchTerm', term);
1123
+ });
1124
+ clearSearch.addEventListener('click', () => {
1125
+ searchInput.value = '';
1126
+ currentSearch = '';
1127
+ clearMarks(document);
1128
+ searchCount.textContent = '0';
1129
+ localStorage.removeItem('searchTerm');
1130
+ });
1131
+ (function restoreSearch(){
1132
+ const term = localStorage.getItem('searchTerm');
1133
+ if (!term) return;
1134
+ searchInput.value = term;
1135
+ const hits = highlightTerm(term);
1136
+ searchCount.textContent = hits;
1137
+ })();
1138
+
1139
+ /* TOC active link + progress bar */
1140
+ const sections = [...document.querySelectorAll('main .section, #exec-summary')];
1141
+ const tocLinks = [...document.querySelectorAll('.toc a')];
1142
+ const io = new IntersectionObserver(entries => {
1143
+ entries.forEach(entry => {
1144
+ if (entry.isIntersecting) {
1145
+ const id = '#' + entry.target.id;
1146
+ tocLinks.forEach(a => a.classList.toggle('active', a.getAttribute('href') === id));
1147
+ localStorage.setItem('lastSection', id);
1148
+ }
1149
+ });
1150
+ }, { rootMargin: '-40% 0px -50% 0px', threshold: 0.01 });
1151
+ sections.forEach(s => io.observe(s));
1152
+
1153
+ (function restoreLastSection(){
1154
+ const id = localStorage.getItem('lastSection');
1155
+ if (id && document.querySelector(id)) {
1156
+ // Do not auto-scroll on load to avoid jarring UX
1157
+ }
1158
+ })();
1159
+
1160
+ const readingProgress = document.getElementById('readingProgress');
1161
+ document.addEventListener('scroll', () => {
1162
+ const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
1163
+ const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
1164
+ const p = Math.max(0, Math.min(1, scrollTop / (scrollHeight || 1)));
1165
+ readingProgress.style.transform = `scaleX(${p})`;
1166
+ document.getElementById('toTop').classList.toggle('show', scrollTop > 500);
1167
+ });
1168
+
1169
+ /* Back to top */
1170
+ document.getElementById('toTop').addEventListener('click', () => {
1171
+ window.scrollTo({top: 0, behavior: 'smooth'});
1172
+ });
1173
+
1174
+ /* KPI counters animation */
1175
+ const counters = document.querySelectorAll('.card[data-animate="counter"] .value');
1176
+ const ioCounters = new IntersectionObserver(entries => {
1177
+ entries.forEach(entry => {
1178
+ if (entry.isIntersecting) {
1179
+ animateCounter(entry.target);
1180
+ ioCounters.unobserve(entry.target);
1181
+ }
1182
+ });
1183
+ }, { threshold: 0.5 });
1184
+ counters.forEach(el => ioCounters.observe(el));
1185
+ function animateCounter(el) {
1186
+ const raw = el.dataset.target;
1187
+ const isMoney = el.textContent.includes('US$');
1188
+ const suffix = el.textContent.trim().endsWith('%') ? '%' : (isMoney ? 'b' : '');
1189
+ const target = parseFloat(raw);
1190
+ const duration = 1200;
1191
+ const start = performance.now();
1192
+ function frame(t) {
1193
+ const k = Math.min(1, (t - start) / duration);
1194
+ const v = target * (0.2 + 0.8 * easeOutCubic(k));
1195
+ el.textContent = (isMoney ? 'US$' : '') + v.toFixed(target < 10 ? 2 : 1) + (suffix ? (suffix === 'b' ? 'b' : '%') : '');
1196
+ if (k < 1) requestAnimationFrame(frame);
1197
+ else el.textContent = (isMoney ? 'US$' : '') + target + (suffix ? (suffix === 'b' ? 'b' : '%') : '');
1198
+ }
1199
+ requestAnimationFrame(frame);
1200
+ }
1201
+ function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); }
1202
+
1203
+ /* Lightweight SVG chart utilities (no frameworks) */
1204
+ function createSVG(w, h) {
1205
+ const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
1206
+ svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
1207
+ svg.setAttribute('preserveAspectRatio', 'none');
1208
+ return svg;
1209
+ }
1210
+ function linePath(points) {
1211
+ return points.map((p,i) => (i?'L':'M') + p[0] + ' ' + p[1]).join(' ');
1212
+ }
1213
+ function addTooltip(viz) {
1214
+ let tip = viz.querySelector('.tooltip');
1215
+ if (!tip) {
1216
+ tip = document.createElement('div');
1217
+ tip.className = 'tooltip';
1218
+ viz.appendChild(tip);
1219
+ }
1220
+ return tip;
1221
+ }
1222
+ function svgText(svg, x, y, text, opts={}) {
1223
+ const t = document.createElementNS('http://www.w3.org/2000/svg','text');
1224
+ t.setAttribute('x', x);
1225
+ t.setAttribute('y', y);
1226
+ t.textContent = text;
1227
+ for (const k in opts) t.setAttribute(k, opts[k]);
1228
+ svg.appendChild(t);
1229
+ }
1230
+
1231
+ /* Chart: Bar (GDP Q1/Q2/H1) */
1232
+ function renderGDPBar(container) {
1233
+ const viz = container.querySelector('.viz');
1234
+ viz.innerHTML = '';
1235
+ const w = 800, h = 450, pad = {l:60,r:20,t:30,b:50};
1236
+ const svg = createSVG(w, h);
1237
+ viz.appendChild(svg);
1238
+
1239
+ const data = [
1240
+ {label:'Q1 2025', val:6.9, color:'var(--accent)'},
1241
+ {label:'Q2 2025', val:7.96, color:'var(--accent)'},
1242
+ {label:'H1 2025', val:7.52, color:'var(--primary)'}
1243
+ ];
1244
+ const max = Math.ceil(Math.max(...data.map(d=>d.val)) + 1);
1245
+ // axes
1246
+ const axis = document.createElementNS('http://www.w3.org/2000/svg','g');
1247
+ axis.setAttribute('stroke','currentColor');
1248
+ axis.setAttribute('opacity','0.4');
1249
+ const ySteps = 6;
1250
+ for (let i=0;i<=ySteps;i++){
1251
+ const y = pad.t + (h-pad.t-pad.b) * (i/ySteps);
1252
+ const line = document.createElementNS('http://www.w3.org/2000/svg','line');
1253
+ line.setAttribute('x1', pad.l);
1254
+ line.setAttribute('x2', w - pad.r);
1255
+ line.setAttribute('y1', y);
1256
+ line.setAttribute('y2', y);
1257
+ axis.appendChild(line);
1258
+ const val = Math.round((max) * (1 - i/ySteps)*10)/10;
1259
+ svgText(svg, pad.l-8, y+4, val+'%', { 'text-anchor':'end', 'font-size':'12' });
1260
+ }
1261
+ svg.appendChild(axis);
1262
+
1263
+ const barW = (w-pad.l-pad.r) / data.length * 0.5;
1264
+ const tip = addTooltip(viz);
1265
+
1266
+ data.forEach((d, i) => {
1267
+ const xCenter = pad.l + (w-pad.l-pad.r) * ((i+0.5)/data.length);
1268
+ const x = xCenter - barW/2;
1269
+ const y = pad.t + (h-pad.t-pad.b) * (1 - d.val/max);
1270
+ const rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
1271
+ rect.setAttribute('x', x);
1272
+ rect.setAttribute('y', y);
1273
+ rect.setAttribute('width', barW);
1274
+ rect.setAttribute('height', (h-pad.t-pad.b) * (d.val/max));
1275
+ rect.setAttribute('fill', getComputedStyle(document.documentElement).getPropertyValue(d.color.replace(/[^\w-]/g,'')) || d.color);
1276
+ rect.setAttribute('rx','8');
1277
+ rect.style.filter = 'drop-shadow(0 6px 10px rgba(0,0,0,.15))';
1278
+ rect.addEventListener('mousemove', (e)=> {
1279
+ tip.textContent = `${d.label}: ${d.val}%`;
1280
+ tip.style.left = e.offsetX + 'px';
1281
+ tip.style.top = e.offsetY + 'px';
1282
+ tip.style.opacity = 1;
1283
+ });
1284
+ rect.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
1285
+ svg.appendChild(rect);
1286
+ svgText(svg, xCenter, h-pad.b+18, d.label, {'text-anchor':'middle','font-size':'12'});
1287
+ });
1288
+ }
1289
+
1290
+ /* Chart: Inflation actual vs forecasts */
1291
+ function renderInflationLines(container) {
1292
+ const viz = container.querySelector('.viz');
1293
+ viz.innerHTML = '';
1294
+ const w = 800, h = 450, pad = {l:50,r:20,t:20,b:40};
1295
+ const svg = createSVG(w, h);
1296
+ viz.appendChild(svg);
1297
+ const actual = [
1298
+ {label:'May', val:3.24},
1299
+ {label:'Jun', val:3.57}
1300
+ ];
1301
+ const forecasts = [
1302
+ {label:'IMF', val:2.9, color:'var(--warning)'},
1303
+ {label:'ADB', val:4.0, color:'var(--primary)'}
1304
+ ];
1305
+ const labels = ['May','Jun','IMF','ADB'];
1306
+ const allVals = [...actual.map(d=>d.val), ...forecasts.map(d=>d.val)];
1307
+ const min = Math.min(...allVals, 0), max = Math.max(...allVals) + 0.5;
1308
+
1309
+ // gridlines
1310
+ const ySteps = 6;
1311
+ const axis = document.createElementNS('http://www.w3.org/2000/svg','g');
1312
+ axis.setAttribute('stroke','currentColor');
1313
+ axis.setAttribute('opacity','0.35');
1314
+ for (let i=0;i<=ySteps;i++){
1315
+ const y = pad.t + (h-pad.t-pad.b) * (i/ySteps);
1316
+ const line = document.createElementNS('http://www.w3.org/2000/svg','line');
1317
+ line.setAttribute('x1', pad.l);
1318
+ line.setAttribute('x2', w - pad.r);
1319
+ line.setAttribute('y1', y);
1320
+ line.setAttribute('y2', y);
1321
+ axis.appendChild(line);
1322
+ const val = (max - (max-min) * (i/ySteps)).toFixed(1);
1323
+ svgText(svg, pad.l-6, y+4, val+'%', {'text-anchor':'end','font-size':'12'});
1324
+ }
1325
+ svg.appendChild(axis);
1326
+
1327
+ // X positions
1328
+ const x = (idx) => pad.l + (w-pad.l-pad.r) * (idx/(labels.length-1));
1329
+ const y = (val) => pad.t + (h-pad.t-pad.b) * (1 - (val-min)/(max-min));
1330
+ const tip = addTooltip(viz);
1331
+
1332
+ // actual line
1333
+ const points = actual.map((d,i)=>[x(i), y(d.val)]);
1334
+ const path = document.createElementNS('http://www.w3.org/2000/svg','path');
1335
+ path.setAttribute('d', linePath(points));
1336
+ path.setAttribute('fill','none');
1337
+ path.setAttribute('stroke','var(--accent)');
1338
+ path.setAttribute('stroke-width','3');
1339
+ svg.appendChild(path);
1340
+ actual.forEach((d,i)=>{
1341
+ const cx = x(i), cy = y(d.val);
1342
+ const c = document.createElementNS('http://www.w3.org/2000/svg','circle');
1343
+ c.setAttribute('cx', cx); c.setAttribute('cy', cy); c.setAttribute('r', 5);
1344
+ c.setAttribute('fill','var(--accent)');
1345
+ c.addEventListener('mousemove', (e) => {
1346
+ tip.textContent = `${d.label} 2025: ${d.val}%`;
1347
+ tip.style.left = e.offsetX + 'px';
1348
+ tip.style.top = e.offsetY + 'px';
1349
+ tip.style.opacity = 1;
1350
+ });
1351
+ c.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
1352
+ svg.appendChild(c);
1353
+ svgText(svg, cx, h-pad.b+16, d.label, {'text-anchor':'middle','font-size':'12'});
1354
+ });
1355
+
1356
+ // forecasts points
1357
+ forecasts.forEach((d, i) => {
1358
+ const cx = x(i + actual.length), cy = y(d.val);
1359
+ const c = document.createElementNS('http://www.w3.org/2000/svg','rect');
1360
+ c.setAttribute('x', cx-6); c.setAttribute('y', cy-6); c.setAttribute('width', 12); c.setAttribute('height', 12); c.setAttribute('rx','2');
1361
+ c.setAttribute('fill', getComputedStyle(document.documentElement).getPropertyValue(d.color.replace(/[^\w-]/g,'')) || d.color);
1362
+ c.addEventListener('mousemove', (e) => {
1363
+ tip.textContent = `${d.label} 2025 Forecast: ${d.val}%`;
1364
+ tip.style.left = e.offsetX + 'px';
1365
+ tip.style.top = e.offsetY + 'px';
1366
+ tip.style.opacity = 1;
1367
+ });
1368
+ c.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
1369
+ svg.appendChild(c);
1370
+ svgText(svg, cx, h-pad.b+16, d.label, {'text-anchor':'middle','font-size':'12'});
1371
+ });
1372
+ }
1373
+
1374
+ /* Chart: Donut (Unemployment) */
1375
+ function renderUnempDonut(container) {
1376
+ const viz = container.querySelector('.viz');
1377
+ viz.innerHTML = '';
1378
+ const w = 450, h = 450;
1379
+ const svg = createSVG(w, h);
1380
+ viz.appendChild(svg);
1381
+ const center = {x: w/2, y: h/2};
1382
+ const radius = 150;
1383
+ const val = 2.2; // %
1384
+ const max = 10; // gauge cap
1385
+ // bg circle
1386
+ const bg = document.createElementNS('http://www.w3.org/2000/svg','circle');
1387
+ bg.setAttribute('cx', center.x);
1388
+ bg.setAttribute('cy', center.y);
1389
+ bg.setAttribute('r', radius);
1390
+ bg.setAttribute('fill','none');
1391
+ bg.setAttribute('stroke','color-mix(in oklab, var(--muted) 25%, transparent)');
1392
+ bg.setAttribute('stroke-width','26');
1393
+ svg.appendChild(bg);
1394
+
1395
+ // arc
1396
+ const angle = Math.min(360, (val/max)*360);
1397
+ const large = angle > 180 ? 1 : 0;
1398
+ const start = polar(center.x, center.y, radius, -90);
1399
+ const end = polar(center.x, center.y, radius, -90 + angle);
1400
+ const d = `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${large} 1 ${end.x} ${end.y}`;
1401
+ const path = document.createElementNS('http://www.w3.org/2000/svg','path');
1402
+ path.setAttribute('d', d);
1403
+ path.setAttribute('fill','none');
1404
+ path.setAttribute('stroke','var(--success)');
1405
+ path.setAttribute('stroke-width','26');
1406
+ path.setAttribute('stroke-linecap','round');
1407
+ svg.appendChild(path);
1408
+
1409
+ svgText(svg, center.x, center.y, val.toFixed(2)+'%', {'text-anchor':'middle','font-size':'34','font-weight':'700'});
1410
+ svgText(svg, center.x, center.y+26, 'Unemployment (Q1 2025)', {'text-anchor':'middle','font-size':'14', 'opacity':'0.75'});
1411
+
1412
+ function polar(cx, cy, r, deg) {
1413
+ const rad = (deg) * Math.PI/180;
1414
+ return {x: cx + r*Math.cos(rad), y: cy + r*Math.sin(rad)};
1415
+ }
1416
+ }
1417
+
1418
+ /* Chart: FDI columns */
1419
+ function renderFDIColumns(container) {
1420
+ const viz = container.querySelector('.viz');
1421
+ viz.innerHTML = '';
1422
+ const w = 800, h = 450, pad = {l:70,r:20,t:30,b:60};
1423
+ const svg = createSVG(w, h);
1424
+ viz.appendChild(svg);
1425
+ const data = [
1426
+ {label:'Registered (Jan–May)', val:18.4, color:'var(--accent)'},
1427
+ {label:'Disbursed (Jan–May)', val:8.9, color:'var(--primary)'},
1428
+ {label:'Total (H1)', val:21.51, color:'var(--success)'}
1429
+ ];
1430
+ const max = Math.ceil(Math.max(...data.map(d=>d.val)) + 2);
1431
+ // grid
1432
+ const ySteps = 6;
1433
+ const axis = document.createElementNS('http://www.w3.org/2000/svg','g');
1434
+ axis.setAttribute('stroke','currentColor');
1435
+ axis.setAttribute('opacity','0.35');
1436
+ for (let i=0;i<=ySteps;i++){
1437
+ const y = pad.t + (h-pad.t-pad.b) * (i/ySteps);
1438
+ const line = document.createElementNS('http://www.w3.org/2000/svg','line');
1439
+ line.setAttribute('x1', pad.l);
1440
+ line.setAttribute('x2', w - pad.r);
1441
+ line.setAttribute('y1', y);
1442
+ line.setAttribute('y2', y);
1443
+ axis.appendChild(line);
1444
+ const val = Math.round((max) * (1 - i/ySteps)*10)/10;
1445
+ svgText(svg, pad.l-8, y+4, '$' + val + 'b', {'text-anchor':'end','font-size':'12'});
1446
+ }
1447
+ svg.appendChild(axis);
1448
+
1449
+ const barW = (w-pad.l-pad.r) / data.length * 0.4;
1450
+ const tip = addTooltip(viz);
1451
+ data.forEach((d, i) => {
1452
+ const xCenter = pad.l + (w-pad.l-pad.r) * ((i+0.5)/data.length);
1453
+ const x = xCenter - barW/2;
1454
+ const y = pad.t + (h-pad.t-pad.b) * (1 - d.val/max);
1455
+ const rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
1456
+ rect.setAttribute('x', x);
1457
+ rect.setAttribute('y', y);
1458
+ rect.setAttribute('width', barW);
1459
+ rect.setAttribute('height', (h-pad.t-pad.b) * (d.val/max));
1460
+ rect.setAttribute('fill', getComputedStyle(document.documentElement).getPropertyValue(d.color.replace(/[^\w-]/g,'')) || d.color);
1461
+ rect.setAttribute('rx','8');
1462
+ rect.style.filter = 'drop-shadow(0 6px 10px rgba(0,0,0,.15))';
1463
+ rect.addEventListener('mousemove', (e)=> {
1464
+ tip.textContent = `${d.label}: US$${d.val}b`;
1465
+ tip.style.left = e.offsetX + 'px';
1466
+ tip.style.top = e.offsetY + 'px';
1467
+ tip.style.opacity = 1;
1468
+ });
1469
+ rect.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
1470
+ svg.appendChild(rect);
1471
+ svgText(svg, xCenter, h-pad.b+30, d.label, {'text-anchor':'middle','font-size':'12'});
1472
+ });
1473
+ }
1474
+
1475
+ /* Chart: Historical Line */
1476
+ function renderHistorical(container) {
1477
+ const viz = container.querySelector('.viz');
1478
+ viz.innerHTML = '';
1479
+ const w = 800, h = 450, pad = {l:60,r:20,t:20,b:50};
1480
+ const svg = createSVG(w, h);
1481
+ viz.appendChild(svg);
1482
+ const data = [
1483
+ {year:2020, val:3.21},
1484
+ {year:2021, val:4.85},
1485
+ {year:2022, val:5.42},
1486
+ {year:2023, val:3.46},
1487
+ {year:2024, val:5.98},
1488
+ {year:2025, val:6.93}
1489
+ ];
1490
+ const min = 0, max = Math.ceil(Math.max(...data.map(d=>d.val)) + 1);
1491
+ const x = (i)=> pad.l + (w-pad.l-pad.r) * (i/(data.length-1));
1492
+ const y = (v)=> pad.t + (h-pad.t-pad.b) * (1 - (v-min)/(max-min));
1493
+ // grid
1494
+ const ySteps = 6;
1495
+ const axis = document.createElementNS('http://www.w3.org/2000/svg','g');
1496
+ axis.setAttribute('stroke','currentColor');
1497
+ axis.setAttribute('opacity','0.35');
1498
+ for (let i=0;i<=ySteps;i++){
1499
+ const yy = pad.t + (h-pad.t-pad.b) * (i/ySteps);
1500
+ const line = document.createElementNS('http://www.w3.org/2000/svg','line');
1501
+ line.setAttribute('x1', pad.l);
1502
+ line.setAttribute('x2', w - pad.r);
1503
+ line.setAttribute('y1', yy);
1504
+ line.setAttribute('y2', yy);
1505
+ axis.appendChild(line);
1506
+ const val = Math.round((max) * (1 - i/ySteps)*10)/10;
1507
+ svgText(svg, pad.l-8, yy+4, val+'%', {'text-anchor':'end','font-size':'12'});
1508
+ }
1509
+ svg.appendChild(axis);
1510
+ // line
1511
+ const pts = data.map((d,i)=>[x(i), y(d.val)]);
1512
+ const path = document.createElementNS('http://www.w3.org/2000/svg','path');
1513
+ path.setAttribute('d', linePath(pts));
1514
+ path.setAttribute('fill','none');
1515
+ path.setAttribute('stroke','var(--accent)');
1516
+ path.setAttribute('stroke-width','3');
1517
+ svg.appendChild(path);
1518
+ const tip = addTooltip(viz);
1519
+ data.forEach((d,i)=>{
1520
+ const cx=x(i), cy=y(d.val);
1521
+ const c = document.createElementNS('http://www.w3.org/2000/svg','circle');
1522
+ c.setAttribute('cx', cx); c.setAttribute('cy', cy); c.setAttribute('r', 5);
1523
+ c.setAttribute('fill','var(--accent)');
1524
+ c.addEventListener('mousemove', (e)=>{
1525
+ tip.textContent = `Q1 ${d.year}: ${d.val}%`;
1526
+ tip.style.left = e.offsetX + 'px'; tip.style.top = e.offsetY + 'px'; tip.style.opacity = 1;
1527
+ });
1528
+ c.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
1529
+ svg.appendChild(c);
1530
+ svgText(svg, cx, h-pad.b+18, d.year, {'text-anchor':'middle','font-size':'12'});
1531
+ });
1532
+ }
1533
+
1534
+ /* Chart: Forecasts vs Target range */
1535
+ function renderForecasts(container) {
1536
+ const viz = container.querySelector('.viz');
1537
+ viz.innerHTML = '';
1538
+ const w = 800, h = 450, pad = {l:90,r:40,t:30,b:40};
1539
+ const svg = createSVG(w, h);
1540
+ viz.appendChild(svg);
1541
+ const items = [
1542
+ {label:'IMF', val:5.2},
1543
+ {label:'World Bank', val:5.8},
1544
+ {label:'ADB', val:6.6}
1545
+ ];
1546
+ const targetRange = [8.3, 8.5];
1547
+ const max = Math.max(targetRange[1], ...items.map(i=>i.val)) + 1;
1548
+ const min = 0;
1549
+ const y = (i)=> pad.t + (h-pad.t-pad.b) * (i/(items.length-1));
1550
+ const x = (v)=> pad.l + (w-pad.l-pad.r) * ((v - min)/(max - min));
1551
+
1552
+ // target band
1553
+ const band = document.createElementNS('http://www.w3.org/2000/svg','rect');
1554
+ band.setAttribute('x', x(targetRange[0]));
1555
+ band.setAttribute('y', pad.t);
1556
+ band.setAttribute('width', x(targetRange[1]) - x(targetRange[0]));
1557
+ band.setAttribute('height', h - pad.t - pad.b);
1558
+ band.setAttribute('fill', 'color-mix(in oklab, var(--warning) 25%, transparent)');
1559
+ band.setAttribute('rx','8');
1560
+ svg.appendChild(band);
1561
+
1562
+ // grid x
1563
+ const xSteps = 8;
1564
+ const axis = document.createElementNS('http://www.w3.org/2000/svg','g');
1565
+ axis.setAttribute('stroke','currentColor'); axis.setAttribute('opacity','0.35');
1566
+ for (let i=0;i<=xSteps;i++){
1567
+ const xx = pad.l + (w-pad.l-pad.r) * (i/xSteps);
1568
+ const line = document.createElementNS('http://www.w3.org/2000/svg','line');
1569
+ line.setAttribute('x1', xx); line.setAttribute('x2', xx);
1570
+ line.setAttribute('y1', pad.t); line.setAttribute('y2', h - pad.b);
1571
+ axis.appendChild(line);
1572
+ const val = (min + (max-min) * (i/xSteps)).toFixed(1);
1573
+ svgText(svg, xx, h - pad.b + 18, val+'%', {'text-anchor':'middle','font-size':'12'});
1574
+ }
1575
+ svg.appendChild(axis);
1576
+
1577
+ // points
1578
+ const tip = addTooltip(viz);
1579
+ items.forEach((it, i) => {
1580
+ const cx = x(it.val), cy = y(i);
1581
+ const g = document.createElementNS('http://www.w3.org/2000/svg','g');
1582
+ const mark = document.createElementNS('http://www.w3.org/2000/svg','circle');
1583
+ mark.setAttribute('cx', cx); mark.setAttribute('cy', cy); mark.setAttribute('r', 7);
1584
+ mark.setAttribute('fill','var(--accent)');
1585
+ const label = document.createElementNS('http://www.w3.org/2000/svg','text');
1586
+ label.setAttribute('x', pad.l - 10); label.setAttribute('y', cy + 4);
1587
+ label.setAttribute('text-anchor','end'); label.setAttribute('font-size','13');
1588
+ label.textContent = it.label;
1589
+ g.appendChild(mark); g.appendChild(label);
1590
+ g.addEventListener('mousemove', (e)=> {
1591
+ tip.textContent = `${it.label}: ${it.val}%`;
1592
+ tip.style.left = e.offsetX + 'px';
1593
+ tip.style.top = e.offsetY + 'px';
1594
+ tip.style.opacity = 1;
1595
+ });
1596
+ g.addEventListener('mouseleave', ()=> tip.style.opacity = 0);
1597
+ svg.appendChild(g);
1598
+ });
1599
+
1600
+ // target text
1601
+ svgText(svg, x(targetRange[0]), pad.t + 18, `Gov target ${targetRange[0]}–${targetRange[1]}%`, {'font-size':'12'});
1602
+ }
1603
+
1604
+ /* Render all charts */
1605
+ function renderAllCharts() {
1606
+ renderGDPBar(document.getElementById('chart-gdp'));
1607
+ renderInflationLines(document.getElementById('chart-inflation'));
1608
+ renderUnempDonut(document.getElementById('chart-unemp'));
1609
+ renderFDIColumns(document.getElementById('chart-fdi'));
1610
+ renderHistorical(document.getElementById('chart-historical'));
1611
+ renderForecasts(document.getElementById('chart-forecasts'));
1612
+ }
1613
+ renderAllCharts();
1614
+
1615
+ /* Resize observer to re-render charts on container resize for crispness */
1616
+ let resizeTimer;
1617
+ window.addEventListener('resize', () => {
1618
+ clearTimeout(resizeTimer);
1619
+ resizeTimer = setTimeout(renderAllCharts, 200);
1620
+ });
1621
+
1622
+ /* Download chart as PNG (convert SVG inside .viz) */
1623
+ document.querySelectorAll('.dl-chart').forEach(btn => {
1624
+ btn.addEventListener('click', () => {
1625
+ const wrap = document.getElementById(btn.dataset.download).querySelector('.viz');
1626
+ const svg = wrap.querySelector('svg');
1627
+ if (!svg) { toast('No SVG to export'); return; }
1628
+ const s = new XMLSerializer().serializeToString(svg);
1629
+ const svgBlob = new Blob([s], {type:'image/svg+xml;charset=utf-8'});
1630
+ const url = URL.createObjectURL(svgBlob);
1631
+ const img = new Image();
1632
+ img.onload = () => {
1633
+ const canvas = document.createElement('canvas');
1634
+ canvas.width = 1600; canvas.height = 900; // upscale for clarity
1635
+ const ctx = canvas.getContext('2d');
1636
+ // background for contrast
1637
+ ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--surface') || '#fff';
1638
+ ctx.fillRect(0,0,canvas.width,canvas.height);
1639
+ ctx.drawImage(img,0,0,canvas.width,canvas.height);
1640
+ canvas.toBlob(blob => {
1641
+ const a = document.createElement('a');
1642
+ a.href = URL.createObjectURL(blob);
1643
+ a.download = btn.dataset.download + '.png';
1644
+ document.body.appendChild(a);
1645
+ a.click();
1646
+ a.remove();
1647
+ URL.revokeObjectURL(url);
1648
+ });
1649
+ };
1650
+ img.src = url;
1651
+ });
1652
+ });
1653
+
1654
+ /* Simple toast */
1655
+ let toastTimer;
1656
+ function toast(msg) {
1657
+ let el = document.getElementById('toast');
1658
+ if (!el) {
1659
+ el = document.createElement('div');
1660
+ el.id = 'toast';
1661
+ Object.assign(el.style, {
1662
+ position:'fixed', left:'50%', bottom:'24px', transform:'translateX(-50%)',
1663
+ background:'var(--card)', color:'var(--text)', padding:'10px 14px',
1664
+ border:'1px solid rgba(128,128,128,.3)', borderRadius:'10px', boxShadow:'var(--shadow)',
1665
+ zIndex:10000, opacity:'0', transition:'opacity .2s'
1666
+ });
1667
+ document.body.appendChild(el);
1668
+ }
1669
+ el.textContent = msg;
1670
+ el.style.opacity = '1';
1671
+ clearTimeout(toastTimer);
1672
+ toastTimer = setTimeout(()=> el.style.opacity = '0', 1600);
1673
+ }
1674
+
1675
+ /* Preserve scroll to section in URL hash and TOC clicks */
1676
+ document.querySelectorAll('.toc a').forEach(a => {
1677
+ a.addEventListener('click', (e) => {
1678
+ // allow default, but also store preference
1679
+ localStorage.setItem('lastSection', a.getAttribute('href'));
1680
+ });
1681
+ });
1682
+
1683
+ /* Accessibility: keyboard focus for skip */
1684
+ document.addEventListener('keydown', (e) => {
1685
+ if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
1686
+ e.preventDefault();
1687
+ searchInput.focus();
1688
+ }
1689
+ });
1690
+ </script>
1691
+ </body>
1692
+ </html>