Discover Vietnam<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\n<style>\n \/* --- Basic Setup --- *\/\n body {\n font-family: 'Montserrat', sans-serif;\n background-color: #f4f7f6;\n color: #333;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n }<\/p>\n<p> .container {\n max-width: 1200px;\n margin: 0 auto;\n background: #ffffff;\n border-radius: 10px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n padding: 30px 40px;\n overflow: hidden; \/* Good practice for animations *\/\n }<\/p>\n<p> \/* --- EFFECT 1: ANIMATED GRADIENT TITLE --- *\/\n h1 {\n text-align: center;\n font-size: 2.8em;\n font-weight: 700;\n margin-bottom: 5px;<\/p>\n<p> \/* The Gradient Magic *\/\n background: linear-gradient(90deg, #004d40, #00897b, #4db6ac, #004d40);\n background-size: 200% 200%;\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n animation: gradient-flow 8s ease-in-out infinite;\n }<\/p>\n<p> \/* The animation keyframe *\/\n @keyframes gradient-flow {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }<\/p>\n<p> .subtitle {\n text-align: center;\n font-size: 1.1em;\n color: #555;\n margin-top: 0;\n margin-bottom: 30px;\n }<\/p>\n<p> h2 {\n color: #00695c;\n border-bottom: 2px solid #e0f2f1;\n padding-bottom: 10px;\n }<\/p>\n<p> ul { padding-left: 20px; }\n li { margin-bottom: 10px; }<\/p>\n<p> \/* --- EFFECT 2: SLIDING UNDERLINE TABS --- *\/\n .tabs-nav {\n display: flex;\n justify-content: center;\n margin-bottom: 30px;\n border-bottom: 1px solid #ddd;\n }<\/p>\n<p> .tab-link {\n padding: 15px 30px;\n text-decoration: none;\n font-weight: 700;\n font-size: 1.1em;\n color: #555;\n position: relative;\n overflow: hidden;\n transition: color 0.3s ease;\n transform: translateY(1px);\n }<\/p>\n<p> .tab-link::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 3px;\n background-color: #004d40;\n transform: translateX(-101%);\n transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n }<\/p>\n<p> .tab-link:hover {\n color: #000;\n background-color: transparent;\n }<\/p>\n<p> .tab-link:hover::after {\n transform: translateX(0);\n }<\/p>\n<p> .tab-link.active {\n color: #004d40;\n }<\/p>\n<p> .tab-link.active::after {\n transform: translateX(0);\n }<\/p>\n<p> \/* --- EFFECT 4: CONTENT SLIDE-IN --- *\/\n .tab-pane {\n display: none;\n animation: fadeIn 0.6s ease-out;\n }<\/p>\n<p> .tab-pane.active {\n display: block;\n }<\/p>\n<p> \/* Updated keyframe for slide-in effect *\/\n @keyframes fadeIn {\n from { \n opacity: 0; \n transform: translateX(-30px);\n }\n to { \n opacity: 1; \n transform: translateX(0);\n }\n }<\/p>\n<p> \/* --- Section Layout --- *\/\n .content-wrapper {\n display: grid;\n grid-template-columns: 1fr 450px;\n gap: 30px;\n }<\/p>\n<p> \/* --- EFFECT 3: 3D LIFT ON THUMBNAILS --- *\/\n .gallery {\n display: flex;\n flex-direction: column;\n }<\/p>\n<p> .gallery-main img {\n width: 100%;\n height: 300px;\n object-fit: cover;\n border-radius: 8px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n }<\/p>\n<p> .gallery-thumbnails {\n display: flex;\n justify-content: space-between;\n margin-top: 15px;\n gap: 10px;\n perspective: 800px; \/* Enables 3D *\/\n }<\/p>\n<p> .gallery-thumbnails img {\n width: 31%;\n height: 80px;\n object-fit: cover;\n border-radius: 5px;\n cursor: pointer;\n opacity: 0.8;\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }<\/p>\n<p> .gallery-thumbnails img:hover {\n opacity: 1;\n transform: scale(1.1) rotateX(10deg) translateY(-5px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);\n }<\/p>\n<p> \/* --- Responsive Design --- *\/\n @media (max-width: 900px) {\n .content-wrapper {\n grid-template-columns: 1fr;\n }\n .gallery { grid-row: 1; }\n .gallery-main img { height: 250px; }\n }<\/p>\n<p> @media (max-width: 600px) {\n .container { padding: 20px 15px; }\n .tabs-nav { flex-direction: column; align-items: stretch; }\n .tab-link { text-align: center; }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"container\">\n<h1>Discover Vietnam<\/h1>\n<p class=\"subtitle\">From the mountains of the North to the deltas of the South<\/p>\n<nav class=\"tabs-nav\">\n <a href=\"#north\" class=\"tab-link active\" data-tab=\"north\">North Vietnam<\/a><br \/>\n <a href=\"#central\" class=\"tab-link\" data-tab=\"central\">Central Vietnam<\/a><br \/>\n <a href=\"#south\" class=\"tab-link\" data-tab=\"south\">South Vietnam<\/a><br \/>\n <\/nav>\n<div class=\"tabs-content\">\n<section id=\"north\" class=\"tab-pane active\">\n<div class=\"content-wrapper\">\n<div class=\"recommendations\">\n<h2>North Vietnam: The Heart of Tradition<\/h2>\n<p>The North is known for its stunning mountain landscapes, ancient traditions, and the bustling capital city.<\/p>\n<ul>\n<li><strong>Hanoi:<\/strong> The thousand-year-old capital. Don’t miss the Old Quarter, Hoan Kiem Lake, and the Temple of Literature.<\/li>\n<li><strong>Ha Long Bay:<\/strong> A UNESCO World Heritage site with thousands of limestone karsts and isles.<\/li>\n<li><strong>Sapa:<\/strong> Famous for its terraced rice fields and ethnic minority villages.<\/li>\n<li><strong>Food to Try:<\/strong> Ph\u1edf B\u00f2 (Beef Noodle Soup) and B\u00fan Ch\u1ea3 (Grilled Pork with Noodles).<\/li>\n<\/ul><\/div>\n<div class=\"gallery\">\n<div class=\"gallery-main\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/600x400\/007bff\/ffffff?text=Ha+Long+Bay\" alt=\"Ha Long Bay\" id=\"north-main-img\">\n <\/div>\n<div class=\"gallery-thumbnails\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/007bff\/ffffff?text=Ha+Long+Bay\" alt=\"Ha Long Bay Thumbnail\" class=\"thumb\" data-gallery-id=\"north\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/28a745\/ffffff?text=Sapa+Rice+Fields\" alt=\"Sapa Thumbnail\" class=\"thumb\" data-gallery-id=\"north\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/dc3545\/ffffff?text=Hanoi+Old+Quarter\" alt=\"Hanoi Thumbnail\" class=\"thumb\" data-gallery-id=\"north\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"central\" class=\"tab-pane\">\n<div class=\"content-wrapper\">\n<div class=\"recommendations\">\n<h2>Central Vietnam: The Coastal Heritage<\/h2>\n<p>The central coast is where you’ll find historical sites, beautiful beaches, and world-famous cuisine.<\/p>\n<ul>\n<li><strong>Hoi An:<\/strong> A charming, preserved ancient town with colorful lanterns and canals.<\/li>\n<li><strong>Hue:<\/strong> The former imperial capital, home to the vast, walled “Citadel” and royal tombs.<\/li>\n<li><strong>Da Nang:<\/strong> A modern coastal city with the Marble Mountains, Dragon Bridge, and beautiful beaches.<\/li>\n<li><strong>Food to Try:<\/strong> B\u00e1nh M\u00ec (Vietnamese Baguette) and Cao L\u1ea7u (Hoi An Speciality).<\/li>\n<\/ul><\/div>\n<div class=\"gallery\">\n<div class=\"gallery-main\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/600x400\/ffc107\/000000?text=Hoi+An+Lanterns\" alt=\"Hoi An\" id=\"central-main-img\">\n <\/div>\n<div class=\"gallery-thumbnails\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/ffc107\/000000?text=Hoi+An+Lanterns\" alt=\"Hoi An Thumbnail\" class=\"thumb\" data-gallery-id=\"central\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/17a2b8\/ffffff?text=Hue+Citadel\" alt=\"Hue Thumbnail\" class=\"thumb\" data-gallery-id=\"central\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/6f42c1\/ffffff?text=Da+Nang+Bridge\" alt=\"Da Nang Thumbnail\" class=\"thumb\" data-gallery-id=\"central\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"south\" class=\"tab-pane\">\n<div class=\"content-wrapper\">\n<div class=\"recommendations\">\n<h2>South Vietnam: The Vibrant Delta<\/h2>\n<p>The South is the nation’s economic engine, featuring the vibrant Ho Chi Minh City and the lush Mekong Delta.<\/p>\n<ul>\n<li><strong>Ho Chi Minh City (Saigon):<\/strong> A high-energy city. Visit the War Remnants Museum, Notre Dame Cathedral, and B\u1ebfn Th\u00e0nh Market.<\/li>\n<li><strong>Mekong Delta:<\/strong> A “rice bowl” of floating markets, coconut groves, and winding canals.<\/li>\n<li><strong>Phu Quoc:<\/strong> A picture-perfect island with white-sand beaches and excellent diving.<\/li>\n<li><strong>Food to Try:<\/strong> B\u00e1nh X\u00e8o (Crispy Pancake) and G\u1ecfi Cu\u1ed1n (Spring Rolls).<\/li>\n<\/ul><\/div>\n<div class=\"gallery\">\n<div class=\"gallery-main\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/600x400\/28a745\/ffffff?text=Mekong+Delta\" alt=\"Mekong Delta\" id=\"south-main-img\">\n <\/div>\n<div class=\"gallery-thumbnails\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/28a745\/ffffff?text=Mekong+Delta\" alt=\"Mekong Delta Thumbnail\" class=\"thumb\" data-gallery-id=\"south\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/dc3545\/ffffff?text=Saigon+Market\" alt=\"Saigon Thumbnail\" class=\"thumb\" data-gallery-id=\"south\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/007bff\/ffffff?text=Phu+Quoc+Beach\" alt=\"Phu Quoc Thumbnail\" class=\"thumb\" data-gallery-id=\"south\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section><\/div>\n<\/p><\/div>\n<p> <script>\n \/\/ Wait for the entire HTML document to be loaded before running the script\n document.addEventListener('DOMContentLoaded', function() {<\/p>\n<p> \/\/ =========== TABBED NAVIGATION LOGIC ===========<\/p>\n<p> const tabLinks = document.querySelectorAll('.tab-link');\n const tabPanes = document.querySelectorAll('.tab-pane');<\/p>\n<p> tabLinks.forEach(link => {\n link.addEventListener('click', function(event) {\n \/\/ Stop the link from its default behavior (like jumping to an anchor)\n event.preventDefault();<\/p>\n<p> \/\/ 1. Remove 'active' class from all links and panes\n tabLinks.forEach(item => item.classList.remove('active'));\n tabPanes.forEach(pane => pane.classList.remove('active'));<\/p>\n<p> \/\/ 2. Get the target tab ID from the link's 'data-tab' attribute\n const targetTab = this.getAttribute('data-tab');<\/p>\n<p> \/\/ 3. Add 'active' class to the clicked link\n this.classList.add('active');<\/p>\n<p> \/\/ 4. Add 'active' class to the corresponding tab pane\n document.getElementById(targetTab).classList.add('active');\n });\n });<\/p>\n<p> \/\/ =========== PHOTO GALLERY LOGIC ===========<\/p>\n<p> const thumbnails = document.querySelectorAll('.gallery-thumbnails .thumb');<\/p>\n<p> thumbnails.forEach(thumb => {\n thumb.addEventListener('click', function() {\n \/\/ Get the 'data-gallery-id' (e.g., \"north\", \"central\", \"south\")\n const galleryId = this.getAttribute('data-gallery-id');<\/p>\n<p> \/\/ Find the main image for *this specific gallery*\n \/\/ This is \"north-main-img\", \"central-main-img\", etc.\n const mainImage = document.getElementById(galleryId + '-main-img');<\/p>\n<p> \/\/ Get the source (src) of the thumbnail that was clicked\n const newImageSrc = this.getAttribute('src');<\/p>\n<p> \/\/ Change the main image's source to the thumbnail's source\n mainImage.src = newImageSrc;<\/p>\n<p> \/\/ Optional: Update the alt text too\n mainImage.alt = this.getAttribute('alt');\n });\n });<\/p>\n<p> });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover Vietnam Discover Vietnam From the mountains of the North to the deltas of the South North Vietnam Central Vietnam South Vietnam North Vietnam: The Heart of Tradition The North is known for its stunning mountain landscapes, ancient traditions, and the bustling capital city. Hanoi: The thousand-year-old capital. Don’t miss the Old Quarter, Hoan Kiem […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-205","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/pages\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":4,"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/pages\/205\/revisions"}],"predecessor-version":[{"id":370,"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/pages\/205\/revisions\/370"}],"wp:attachment":[{"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/media?parent=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":205,"date":"2025-10-24T12:54:14","date_gmt":"2025-10-24T12:54:14","guid":{"rendered":"https:\/\/crisblog.pl\/?page_id=205"},"modified":"2025-10-24T13:01:36","modified_gmt":"2025-10-24T13:01:36","slug":"testing-page","status":"publish","type":"page","link":"https:\/\/crisblog.pl\/index.php\/testing-page\/","title":{"rendered":"Testing page"},"content":{"rendered":"

\n
\n
\n
\n
\n Discover Vietnam<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\n<style>\n \/* --- Basic Setup --- *\/\n body {\n font-family: 'Montserrat', sans-serif;\n background-color: #f4f7f6;\n color: #333;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n }<\/p>\n<p> .container {\n max-width: 1200px;\n margin: 0 auto;\n background: #ffffff;\n border-radius: 10px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n padding: 30px 40px;\n overflow: hidden; \/* Good practice for animations *\/\n }<\/p>\n<p> \/* --- EFFECT 1: ANIMATED GRADIENT TITLE --- *\/\n h1 {\n text-align: center;\n font-size: 2.8em;\n font-weight: 700;\n margin-bottom: 5px;<\/p>\n<p> \/* The Gradient Magic *\/\n background: linear-gradient(90deg, #004d40, #00897b, #4db6ac, #004d40);\n background-size: 200% 200%;\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n animation: gradient-flow 8s ease-in-out infinite;\n }<\/p>\n<p> \/* The animation keyframe *\/\n @keyframes gradient-flow {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }<\/p>\n<p> .subtitle {\n text-align: center;\n font-size: 1.1em;\n color: #555;\n margin-top: 0;\n margin-bottom: 30px;\n }<\/p>\n<p> h2 {\n color: #00695c;\n border-bottom: 2px solid #e0f2f1;\n padding-bottom: 10px;\n }<\/p>\n<p> ul { padding-left: 20px; }\n li { margin-bottom: 10px; }<\/p>\n<p> \/* --- EFFECT 2: SLIDING UNDERLINE TABS --- *\/\n .tabs-nav {\n display: flex;\n justify-content: center;\n margin-bottom: 30px;\n border-bottom: 1px solid #ddd;\n }<\/p>\n<p> .tab-link {\n padding: 15px 30px;\n text-decoration: none;\n font-weight: 700;\n font-size: 1.1em;\n color: #555;\n position: relative;\n overflow: hidden;\n transition: color 0.3s ease;\n transform: translateY(1px);\n }<\/p>\n<p> .tab-link::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 3px;\n background-color: #004d40;\n transform: translateX(-101%);\n transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n }<\/p>\n<p> .tab-link:hover {\n color: #000;\n background-color: transparent;\n }<\/p>\n<p> .tab-link:hover::after {\n transform: translateX(0);\n }<\/p>\n<p> .tab-link.active {\n color: #004d40;\n }<\/p>\n<p> .tab-link.active::after {\n transform: translateX(0);\n }<\/p>\n<p> \/* --- EFFECT 4: CONTENT SLIDE-IN --- *\/\n .tab-pane {\n display: none;\n animation: fadeIn 0.6s ease-out;\n }<\/p>\n<p> .tab-pane.active {\n display: block;\n }<\/p>\n<p> \/* Updated keyframe for slide-in effect *\/\n @keyframes fadeIn {\n from { \n opacity: 0; \n transform: translateX(-30px);\n }\n to { \n opacity: 1; \n transform: translateX(0);\n }\n }<\/p>\n<p> \/* --- Section Layout --- *\/\n .content-wrapper {\n display: grid;\n grid-template-columns: 1fr 450px;\n gap: 30px;\n }<\/p>\n<p> \/* --- EFFECT 3: 3D LIFT ON THUMBNAILS --- *\/\n .gallery {\n display: flex;\n flex-direction: column;\n }<\/p>\n<p> .gallery-main img {\n width: 100%;\n height: 300px;\n object-fit: cover;\n border-radius: 8px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n }<\/p>\n<p> .gallery-thumbnails {\n display: flex;\n justify-content: space-between;\n margin-top: 15px;\n gap: 10px;\n perspective: 800px; \/* Enables 3D *\/\n }<\/p>\n<p> .gallery-thumbnails img {\n width: 31%;\n height: 80px;\n object-fit: cover;\n border-radius: 5px;\n cursor: pointer;\n opacity: 0.8;\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }<\/p>\n<p> .gallery-thumbnails img:hover {\n opacity: 1;\n transform: scale(1.1) rotateX(10deg) translateY(-5px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);\n }<\/p>\n<p> \/* --- Responsive Design --- *\/\n @media (max-width: 900px) {\n .content-wrapper {\n grid-template-columns: 1fr;\n }\n .gallery { grid-row: 1; }\n .gallery-main img { height: 250px; }\n }<\/p>\n<p> @media (max-width: 600px) {\n .container { padding: 20px 15px; }\n .tabs-nav { flex-direction: column; align-items: stretch; }\n .tab-link { text-align: center; }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"container\">\n<h1>Discover Vietnam<\/h1>\n<p class=\"subtitle\">From the mountains of the North to the deltas of the South<\/p>\n<nav class=\"tabs-nav\">\n <a href=\"#north\" class=\"tab-link active\" data-tab=\"north\">North Vietnam<\/a><br \/>\n <a href=\"#central\" class=\"tab-link\" data-tab=\"central\">Central Vietnam<\/a><br \/>\n <a href=\"#south\" class=\"tab-link\" data-tab=\"south\">South Vietnam<\/a><br \/>\n <\/nav>\n<div class=\"tabs-content\">\n<section id=\"north\" class=\"tab-pane active\">\n<div class=\"content-wrapper\">\n<div class=\"recommendations\">\n<h2>North Vietnam: The Heart of Tradition<\/h2>\n<p>The North is known for its stunning mountain landscapes, ancient traditions, and the bustling capital city.<\/p>\n<ul>\n<li><strong>Hanoi:<\/strong> The thousand-year-old capital. Don’t miss the Old Quarter, Hoan Kiem Lake, and the Temple of Literature.<\/li>\n<li><strong>Ha Long Bay:<\/strong> A UNESCO World Heritage site with thousands of limestone karsts and isles.<\/li>\n<li><strong>Sapa:<\/strong> Famous for its terraced rice fields and ethnic minority villages.<\/li>\n<li><strong>Food to Try:<\/strong> Ph\u1edf B\u00f2 (Beef Noodle Soup) and B\u00fan Ch\u1ea3 (Grilled Pork with Noodles).<\/li>\n<\/ul><\/div>\n<div class=\"gallery\">\n<div class=\"gallery-main\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/600x400\/007bff\/ffffff?text=Ha+Long+Bay\" alt=\"Ha Long Bay\" id=\"north-main-img\">\n <\/div>\n<div class=\"gallery-thumbnails\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/007bff\/ffffff?text=Ha+Long+Bay\" alt=\"Ha Long Bay Thumbnail\" class=\"thumb\" data-gallery-id=\"north\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/28a745\/ffffff?text=Sapa+Rice+Fields\" alt=\"Sapa Thumbnail\" class=\"thumb\" data-gallery-id=\"north\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/dc3545\/ffffff?text=Hanoi+Old+Quarter\" alt=\"Hanoi Thumbnail\" class=\"thumb\" data-gallery-id=\"north\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"central\" class=\"tab-pane\">\n<div class=\"content-wrapper\">\n<div class=\"recommendations\">\n<h2>Central Vietnam: The Coastal Heritage<\/h2>\n<p>The central coast is where you’ll find historical sites, beautiful beaches, and world-famous cuisine.<\/p>\n<ul>\n<li><strong>Hoi An:<\/strong> A charming, preserved ancient town with colorful lanterns and canals.<\/li>\n<li><strong>Hue:<\/strong> The former imperial capital, home to the vast, walled “Citadel” and royal tombs.<\/li>\n<li><strong>Da Nang:<\/strong> A modern coastal city with the Marble Mountains, Dragon Bridge, and beautiful beaches.<\/li>\n<li><strong>Food to Try:<\/strong> B\u00e1nh M\u00ec (Vietnamese Baguette) and Cao L\u1ea7u (Hoi An Speciality).<\/li>\n<\/ul><\/div>\n<div class=\"gallery\">\n<div class=\"gallery-main\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/600x400\/ffc107\/000000?text=Hoi+An+Lanterns\" alt=\"Hoi An\" id=\"central-main-img\">\n <\/div>\n<div class=\"gallery-thumbnails\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/ffc107\/000000?text=Hoi+An+Lanterns\" alt=\"Hoi An Thumbnail\" class=\"thumb\" data-gallery-id=\"central\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/17a2b8\/ffffff?text=Hue+Citadel\" alt=\"Hue Thumbnail\" class=\"thumb\" data-gallery-id=\"central\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/6f42c1\/ffffff?text=Da+Nang+Bridge\" alt=\"Da Nang Thumbnail\" class=\"thumb\" data-gallery-id=\"central\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"south\" class=\"tab-pane\">\n<div class=\"content-wrapper\">\n<div class=\"recommendations\">\n<h2>South Vietnam: The Vibrant Delta<\/h2>\n<p>The South is the nation’s economic engine, featuring the vibrant Ho Chi Minh City and the lush Mekong Delta.<\/p>\n<ul>\n<li><strong>Ho Chi Minh City (Saigon):<\/strong> A high-energy city. Visit the War Remnants Museum, Notre Dame Cathedral, and B\u1ebfn Th\u00e0nh Market.<\/li>\n<li><strong>Mekong Delta:<\/strong> A “rice bowl” of floating markets, coconut groves, and winding canals.<\/li>\n<li><strong>Phu Quoc:<\/strong> A picture-perfect island with white-sand beaches and excellent diving.<\/li>\n<li><strong>Food to Try:<\/strong> B\u00e1nh X\u00e8o (Crispy Pancake) and G\u1ecfi Cu\u1ed1n (Spring Rolls).<\/li>\n<\/ul><\/div>\n<div class=\"gallery\">\n<div class=\"gallery-main\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/600x400\/28a745\/ffffff?text=Mekong+Delta\" alt=\"Mekong Delta\" id=\"south-main-img\">\n <\/div>\n<div class=\"gallery-thumbnails\">\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/28a745\/ffffff?text=Mekong+Delta\" alt=\"Mekong Delta Thumbnail\" class=\"thumb\" data-gallery-id=\"south\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/dc3545\/ffffff?text=Saigon+Market\" alt=\"Saigon Thumbnail\" class=\"thumb\" data-gallery-id=\"south\"><br \/>\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/150x100\/007bff\/ffffff?text=Phu+Quoc+Beach\" alt=\"Phu Quoc Thumbnail\" class=\"thumb\" data-gallery-id=\"south\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section><\/div>\n<\/p><\/div>\n<p> <script>\n \/\/ Wait for the entire HTML document to be loaded before running the script\n document.addEventListener('DOMContentLoaded', function() {<\/p>\n<p> \/\/ =========== TABBED NAVIGATION LOGIC ===========<\/p>\n<p> const tabLinks = document.querySelectorAll('.tab-link');\n const tabPanes = document.querySelectorAll('.tab-pane');<\/p>\n<p> tabLinks.forEach(link => {\n link.addEventListener('click', function(event) {\n \/\/ Stop the link from its default behavior (like jumping to an anchor)\n event.preventDefault();<\/p>\n<p> \/\/ 1. Remove 'active' class from all links and panes\n tabLinks.forEach(item => item.classList.remove('active'));\n tabPanes.forEach(pane => pane.classList.remove('active'));<\/p>\n<p> \/\/ 2. Get the target tab ID from the link's 'data-tab' attribute\n const targetTab = this.getAttribute('data-tab');<\/p>\n<p> \/\/ 3. Add 'active' class to the clicked link\n this.classList.add('active');<\/p>\n<p> \/\/ 4. Add 'active' class to the corresponding tab pane\n document.getElementById(targetTab).classList.add('active');\n });\n });<\/p>\n<p> \/\/ =========== PHOTO GALLERY LOGIC ===========<\/p>\n<p> const thumbnails = document.querySelectorAll('.gallery-thumbnails .thumb');<\/p>\n<p> thumbnails.forEach(thumb => {\n thumb.addEventListener('click', function() {\n \/\/ Get the 'data-gallery-id' (e.g., \"north\", \"central\", \"south\")\n const galleryId = this.getAttribute('data-gallery-id');<\/p>\n<p> \/\/ Find the main image for *this specific gallery*\n \/\/ This is \"north-main-img\", \"central-main-img\", etc.\n const mainImage = document.getElementById(galleryId + '-main-img');<\/p>\n<p> \/\/ Get the source (src) of the thumbnail that was clicked\n const newImageSrc = this.getAttribute('src');<\/p>\n<p> \/\/ Change the main image's source to the thumbnail's source\n mainImage.src = newImageSrc;<\/p>\n<p> \/\/ Optional: Update the alt text too\n mainImage.alt = this.getAttribute('alt');\n });\n });<\/p>\n<p> });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover Vietnam Discover Vietnam From the mountains of the North to the deltas of the South North Vietnam Central Vietnam South Vietnam North Vietnam: The Heart of Tradition The North is known for its stunning mountain landscapes, ancient traditions, and the bustling capital city. Hanoi: The thousand-year-old capital. Don’t miss the Old Quarter, Hoan Kiem […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-205","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/pages\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":4,"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/pages\/205\/revisions"}],"predecessor-version":[{"id":370,"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/pages\/205\/revisions\/370"}],"wp:attachment":[{"href":"https:\/\/crisblog.pl\/index.php\/wp-json\/wp\/v2\/media?parent=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}