Interactive Arrival Guide: Ha Long City’s Int’l Airport (VDO) https://cdn.tailwindcss.com https://cdn.jsdelivr.net/npm/chart.js Goal: Guide the user through a personal process. -> Viz/Method: Interactive HTML/CSS flowchart. -> Interaction: Clicking a step highlights it and displays detailed information. -> Justification: A visual flow is easier to understand than paragraphs of text. Interaction encourages engagement. -> Library/Method: Vanilla JS + Tailwind CSS. – Report Info: Visa-on-arrival stamping fees ($25/$50). -> Goal: Clearly compare costs. -> Viz/Method: Bar chart. -> Interaction: Hover to see tooltips. -> Justification: A chart provides a quick visual comparison and breaks up text. -> Library/Method: Chart.js (Canvas). – Report Info: Document checklists. -> Goal: Provide an actionable, personalized list. -> Viz/Method: Dynamically generated HTML list. -> Interaction: List content changes based on initial visa selection. -> Justification: More relevant and less confusing than a single, long list for all types. -> Library/JS. – Report Info: Trust factors and tips. -> Goal: Organize secondary information accessibly. -> Viz/Method: HTML/CSS accordion. -> Interaction: Click to expand/collapse. -> Justification: Keeps the interface clean and allows users to explore topics of interest without clutter. -> Library/Method: Vanilla JS. –> body { font-family: ‘Inter’, sans-serif; } .tab-active { border-color: #10B981; color: #10B981; } .step-active { background-color: #ECFDF5; border-left-color: #10B981; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } .arrow { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid #D1D5DB; /* gray-400 */ } .expedited-bg { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); } const contentData = { processSteps: { evisa: [ { id: ‘step1’, title: ‘Immigration Checkpoint’, details: “Upon disembarking, proceed to the immigration hall. Present your passport and printed e-visa (or just your passport if visa-free) to the officer.

Challenge: This is where long queues typically form. The wait can be significant during peak hours.” }, { id: ‘step2’, title: ‘Baggage Claim’, details: “After clearing immigration, find your flight on the monitors to locate the correct baggage carousel and collect your luggage.” }, { id: ‘step3’, title: ‘Customs Check’, details: “With your luggage, proceed through customs. Use the Green Channel if you have nothing to declare, or the Red Channel if you do.” }, { id: ‘step4’, title: ‘Exit & Enjoy Vietnam’, details: “You’ve officially entered Vietnam! Proceed to the arrivals hall to find your transportation.” } ], voa: [ { id: ‘step1’, title: ‘Landing Visa Counter’, details: “Your first stop. Submit your Visa Approval Letter, completed NA1 form, passport photo, and the cash stamping fee.

Challenge: This counter can have very long lines, and any missing documents (photo, cash) will cause further delays.” }, { id: ‘step2’, title: ‘Immigration Checkpoint’, details: “After receiving your visa stamp, proceed to the immigration checkpoint for final verification.

Challenge: This is the second point where you may face long queues.” }, { id: ‘step3’, title: ‘Baggage Claim’, details: “Find your flight on the monitors to locate the correct baggage carousel and collect your luggage.” }, { id: ‘step4’, title: ‘Customs Check’, details: “With your luggage, proceed through customs. Use the Green Channel if you have nothing to declare.” }, { id: ‘step5’, title: ‘Exit & Enjoy Vietnam’, details: “You’ve officially entered Vietnam! Proceed to the arrivals hall to find your transportation.” } ], expedited: [ { id: ‘step1’, title: ‘Meet & Greet’, details: “Our staff will meet you at the arrival gate holding a sign with your name. You are now in our care.” }, { id: ‘step2’, title: ‘Priority Visa & Immigration’, details: “We handle all paperwork and escort you through exclusive priority lanes, completely bypassing all public queues at both the visa counter and immigration checkpoint.” }, { id: ‘step3’, title: ‘Baggage & Customs Assistance’, details: “We will assist you with collecting your luggage and guide you swiftly through customs.” }, { id: ‘step4’, title: ‘Seamless Exit’, details: “You are escorted to the arrivals hall to meet your driver or find transportation, having saved significant time and effort.” } ] }, checklists: { evisa: `

Document Checklist:

• Passport with at least 6 months validity.
• Printed copy of your E-Visa Approval Letter.
• (Optional) Proof of accommodation and onward travel.

`, voa: `

Critical Document Checklist:

• Passport with at least 6 months validity.
• Printed copy of your Visa Approval Letter.
• Completed NA1 Application Form.
• One 4×6 cm passport-sized photo.
• Cash for Stamping Fee:

`, expedited: `

What to Bring:

• Your passport.
• Your Visa Approval Letter (if VOA).
• Our service confirmation email.

Don’t worry about the rest. If you’re missing photos or cash for the VOA stamping fee, our team will handle it on the spot as part of the service.

` }, airportInfo: { tabs: [ { id: ‘location’, title: ‘Location’ }, { id: ‘transport’, title: ‘Transport’ }, { id: ‘facilities’, title: ‘Facilities’ } ], content: { location: `

Airport Location

Van Don International Airport (VDO) is located in Doan Ket Commune, Van Don District, Quang Ninh Province.

• ~60km from Ha Long City center (approx. 45-60 min drive).
• ~20km from Cam Pha City.
• ~200km from Hanoi.

`, transport: `

Transport to Ha Long City

Several options are available:

• Bus Service: Routes 14A & 14B are available. Travel time is ~1.5 hours.
• Taxi: Available outside the terminal. Cost is approx. 600,000 – 800,000 VND.
• Private Car: Can be pre-booked for maximum convenience.

`, facilities: `

Passenger Facilities

The modern terminal offers a comfortable experience:

• Free Wi-Fi throughout the terminal.
• Complimentary drinking water and phone charging stations.
• Dining options and souvenir shops.
• ATMs are available in the main hall, but NOT in the visa-on-arrival area.

` } }, accordionItems: [ { id: ‘booking-section’, title: ‘How do I book the Expedited Service?’, content: `

Booking your Expedited Entry Service is a straightforward process designed for your convenience:

1. 1.

   Visit Our Official Website

   Navigate to our official booking portal to begin the process.

2. 2.

   Select Service & Provide Details

   Choose the “Expedited Entry Service” for Van Don Airport (VDO) and input your flight information, personal details, and visa type.

3. 3.

   Complete Secure Payment

   Finalize your booking through our secure payment gateway. Multiple trusted payment options are available.

4. 4.

   Receive Confirmation

   A detailed confirmation email with all necessary meeting instructions will be sent to your registered email address.

` }, { id: ‘trust-section’, title: ‘Is it safe to book through vietnamimmigration.org?’, content: `

Rest assured, booking your Expedited Entry Service through vietnamimmigration.org is a secure and reliable choice, backed by a strong foundation of trust and transparent policies:

• ✔

  Over 15 Years of Experience

  Operating since 2008, our extensive tenure in the field signifies profound expertise in Vietnamese immigration procedures.

• ✔

  100% Money-Back Guarantee

  Our commitment to service delivery and customer satisfaction is affirmed by our robust refund policy.

• ✔

  Secure Payments via PayPal Buyer Protection

  Your transactions are safeguarded by PayPal’s comprehensive buyer protection policy.

• ✔

  Thousands of Positive Customer Reviews

  Independent platforms like Sitejabber provide real-world validation of our reliability and excellent service.

` }, { id: ‘tips-section’, title: ‘Any tips for a smooth arrival?’, content: `

To ensure the most seamless arrival at Ha Long City’s International Airport, consider these valuable recommendations:

• 💡

  Document Preparedness

  Keep all your essential documents (passport, visa, confirmations) organized in a single, easily accessible folder.

• 💡

  Bank Notification

  Inform your bank about your travel plans to Vietnam to prevent any unexpected card issues or blocks.

• 💡

  Local Currency Access

  Have a small amount of Vietnamese Dong (VND) on hand for immediate expenses upon arrival.

• 💡

  Offline Maps & Apps

  Download offline maps and essential translation apps to your phone for easier navigation and communication.

` } ] }; let activeStep = ‘step1’; let currentVisaType = ”; let visaFeeChart = null; function updateView(visaType) { currentVisaType = visaType; document.getElementById(‘content-area’).classList.remove(‘hidden’); const options = document.querySelectorAll(‘.visa-option’); options.forEach(opt => { opt.classList.remove(‘bg-teal-600’, ‘text-white’); opt.classList.add(‘border-stone-200’); }); const selectedButton = Array.from(options).find(opt => opt.getAttribute(‘onclick’) === `updateView(‘${visaType}’)`); if(selectedButton) { selectedButton.classList.add(‘bg-teal-600’, ‘text-white’); selectedButton.classList.remove(‘border-stone-200’); } renderProcessFlow(visaType); activeStep = ‘step1’; renderDetails(activeStep, visaType); } function renderProcessFlow(visaType) { const flowContainer = document.getElementById(‘process-flow’); flowContainer.innerHTML = ”; const steps = contentData.processSteps[visaType]; steps.forEach((step, index) => { const stepElement = document.createElement(‘div’); stepElement.id = `flow-${step.id}`; stepElement.className = ‘p-4 rounded-lg border-l-4 border-stone-200 bg-stone-100 cursor-pointer hover:bg-stone-200 transition’; stepElement.innerHTML = `

${index + 1}. ${step.title}

`; stepElement.onclick = () => { activeStep = step.id; renderDetails(activeStep, currentVisaType); }; flowContainer.appendChild(stepElement); if (index s.id === stepId); detailsTitle.textContent = stepData.title; detailsContent.innerHTML = `

${stepData.details}

`; if (stepId === ‘step1’) { detailsContent.innerHTML += ` `; showTab(‘location’); if (visaType === ‘voa’) { createVisaFeeChart(); } } highlightActiveStep(); } function highlightActiveStep() { document.querySelectorAll(‘#process-flow > div[id^=”flow-“]’).forEach(el => { el.classList.remove(‘step-active’); el.classList.add(‘bg-stone-100’); }); const activeEl = document.getElementById(`flow-${activeStep}`); if(activeEl){ activeEl.classList.add(‘step-active’); activeEl.classList.remove(‘bg-stone-100’); } } function createVisaFeeChart() { if (visaFeeChart) { visaFeeChart.destroy(); } const ctx = document.getElementById(‘visaFeeChart’).getContext(‘2d’); visaFeeChart = new Chart(ctx, { type: ‘bar’, data: { labels: [‘Single-Entry’, ‘Multi-Entry’], datasets: [{ label: ‘Stamping Fee (USD)’, data: [25, 50], backgroundColor: [‘rgba(20, 184, 166, 0.6)’, ‘rgba(13, 148, 136, 0.6)’], borderColor: [‘rgb(20, 184, 166)’, ‘rgb(13, 148, 136)’], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, suggestedMax: 60 } }, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { return `Fee: $${context.raw}`; } } } } } }); } function showTab(tabId) { document.querySelectorAll(‘.tab-btn’).forEach(btn => btn.classList.remove(‘tab-active’)); document.getElementById(`tab-${tabId}`).classList.add(‘tab-active’); document.getElementById(‘tab-content’).innerHTML = contentData.airportInfo.content[tabId]; } function renderAccordion() { const container = document.getElementById(‘accordion-container’); container.innerHTML = contentData.accordionItems.map(item => ` `).join(”); } function toggleAccordion(id) { const content = document.getElementById(`accordion-content-${id}`); const icon = content.previousElementSibling.querySelector(‘.accordion-icon’); if (content.style.maxHeight) { content.style.maxHeight = null; icon.classList.remove(‘rotate-45’); } else { document.querySelectorAll(‘.accordion-content’).forEach(el => el.style.maxHeight = null); document.querySelectorAll(‘.accordion-icon’).forEach(el => el.classList.remove(‘rotate-45’)); content.style.maxHeight = content.scrollHeight + “px”; icon.classList.add(‘rotate-45’); } } function showSection(id) { const element = document.getElementById(id); if (element) { element.scrollIntoView({ behavior: ‘smooth’ }); // If it’s an accordion, open it const content = document.getElementById(`accordion-content-${id}`); if (content && !content.style.maxHeight) { toggleAccordion(id); } } } window.onload = () => { renderAccordion(); };