Document<\/title>\r\n<\/head>\r\n<style>\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --navy: #1e4d7b;\r\n --navy2: #235d91;\r\n --red: #c0392b;\r\n --gold: #c9a96e;\r\n --white: #f5f0eb;\r\n --light: #e8e0d5;\r\n }\r\n\r\n body {\r\n font-family: 'Manrope', sans-serif !important;\r\n }\r\n\r\n.banner-lien-he {\r\n position: relative;\r\n width: 100%;\r\n height: 340px;\r\n background-image: url('http:\/\/58.186.18.93:8093\/XayDung\/wp-content\/uploads\/2026\/05\/212.jpg');\r\n background-position: center center;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n overflow: hidden;\r\n}\r\n\r\n #ripple-canvas {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.55;\r\n }\r\n\r\n \/* floating geometric shapes *\/\r\n .banner-lien-he .geo {\r\n position: absolute;\r\n border: 1px solid rgba(201, 169, 110, 0.2);\r\n border-radius: 50%;\r\n animation: geoFloat linear infinite;\r\n }\r\n\r\n .geo-1 {\r\n width: 200px;\r\n height: 200px;\r\n top: -50px;\r\n right: 100px;\r\n animation-duration: 8s;\r\n }\r\n\r\n .geo-2 {\r\n width: 120px;\r\n height: 120px;\r\n bottom: 20px;\r\n right: 250px;\r\n animation-duration: 12s;\r\n animation-delay: -3s;\r\n border-color: rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .geo-3 {\r\n width: 60px;\r\n height: 60px;\r\n top: 60px;\r\n right: 350px;\r\n animation-duration: 6s;\r\n animation-delay: -1s;\r\n }\r\n\r\n @keyframes geoFloat {\r\n 0% {\r\n transform: translateY(0) rotate(0deg);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-15px) rotate(180deg);\r\n }\r\n\r\n 100% {\r\n transform: translateY(0) rotate(360deg);\r\n }\r\n }\r\n\r\n @keyframes fadeSlideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .banner-lien-he .content {\r\n position: relative;\r\n z-index: 10;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n width: 100%;\r\n }\r\n\r\n .banner-lien-he .breadcrumb {\r\n font-size: 17px;\r\n color: #fff;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n font-weight: 500;\r\n margin-bottom: 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n opacity: 0;\r\n animation: fadeSlideUp .7s .2s ease forwards;\r\n }\r\n\r\n .banner-lien-he .breadcrumb span {\r\n color: #fff;\r\n }\r\n\r\n .banner-lien-he h1 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 90px;\r\n font-weight: 400;\r\n color: #fff;\r\n line-height: 1;\r\n letter-spacing: -1px;\r\n opacity: 0;\r\n animation: fadeSlideUp .9s .4s ease forwards;\r\n }\r\n\r\n .banner-lien-he h1 em {\r\n font-style: normal;\r\n color: #fff;\r\n font-weight: 700;\r\n }\r\n\r\n .banner-lien-he .contact-chips {\r\n display: flex;\r\n gap: 14px;\r\n margin-top: 22px;\r\n opacity: 0;\r\n animation: fadeSlideUp .8s .7s ease forwards;\r\n }\r\n\r\n .contact-chip {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 8px 16px;\r\n background: rgba(255, 255, 255, 0.07);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.12);\r\n font-size: 18px;\r\n color: #fff;\r\n letter-spacing: .5px;\r\n transition: all .3s;\r\n }\r\n\r\n .contact-chip:hover {\r\n background: rgba(201, 169, 110, 0.15);\r\n border-color: var(--gold);\r\n color: var(--gold);\r\n }\r\n\r\n .contact-chip svg {\r\n width: 14px;\r\n height: 14px;\r\n stroke: currentColor;\r\n fill: none;\r\n stroke-width: 2;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1024px) {\r\n .banner-lien-he .content {\r\n padding: 0 1.5rem;\r\n }\r\n\r\n .banner-lien-he h1 {\r\n font-size: 56px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .banner-lien-he {\r\n height: 280px;\r\n }\r\n\r\n .banner-lien-he h1 {\r\n font-size: 42px;\r\n }\r\n\r\n .contact-chips {\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n }\r\n\r\n .contact-chip {\r\n padding: 6px 12px;\r\n font-size: 11px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .banner-lien-he {\r\n height: 240px;\r\n }\r\n\r\n .banner-lien-he h1 {\r\n font-size: 36px;\r\n }\r\n\r\n .banner-lien-he .breadcrumb {\r\n font-size: 11px;\r\n margin-bottom: 10px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<body>\r\n <section class=\"banner-lien-he\">\r\n <canvas id=\"ripple-canvas\"><\/canvas>\r\n <div class=\"geo geo-1\"><\/div>\r\n <div class=\"geo geo-2\"><\/div>\r\n <div class=\"geo geo-3\"><\/div>\r\n <div class=\"content\">\r\n <div class=\"breadcrumb\">Trang ch\u1ee7 <span>\u203a<\/span> Li\u00ean h\u1ec7<\/div>\r\n <h1>Li\u00ean <em>h\u1ec7<\/em><\/h1>\r\n <div class=\"contact-chips\">\r\n <div class=\"contact-chip\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.97 2.18C.97 1.05 1.93.01 3.05 0h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L7.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z\" \/>\r\n <\/svg>\r\n 0382 333 444\r\n <\/div>\r\n <div class=\"contact-chip\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\" \/>\r\n <polyline points=\"22,6 12,13 2,6\" \/>\r\n <\/svg>\r\n hoangtiep88@gmail.com\r\n <\/div>\r\n <div class=\"contact-chip\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\" \/>\r\n <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\r\n <\/svg>\r\n Bi\u00ean Ho\u00e0\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n (function () {\r\n const canvas = document.getElementById('ripple-canvas');\r\n const section = canvas.parentElement;\r\n const ctx = canvas.getContext('2d');\r\n let W, H, t = 0;\r\n const ripples = [];\r\n\r\n function resize() {\r\n W = canvas.width = section.offsetWidth;\r\n H = canvas.height = section.offsetHeight;\r\n }\r\n\r\n function addRipple(x, y) {\r\n ripples.push({ x, y, r: 0, maxR: 200, alpha: 0.6, speed: 1.5 });\r\n }\r\n\r\n function spawnAuto() {\r\n addRipple(Math.random() * W, Math.random() * H);\r\n setTimeout(spawnAuto, 1200 + Math.random() * 1000);\r\n }\r\n\r\n section.addEventListener('click', e => {\r\n const r = canvas.getBoundingClientRect();\r\n addRipple(e.clientX - r.left, e.clientY - r.top);\r\n });\r\n\r\n function draw() {\r\n ctx.clearRect(0, 0, W, H);\r\n t += 0.015;\r\n\r\n \/\/ flowing sine waves\r\n for (let layer = 0; layer < 4; layer++) {\r\n ctx.beginPath();\r\n const amp = 18 - layer * 3;\r\n const freq = 0.008 + layer * 0.003;\r\n const offset = layer * 0.7;\r\n const yBase = H * (0.3 + layer * 0.15);\r\n ctx.moveTo(0, yBase);\r\n for (let x = 0; x <= W; x += 3) {\r\n const y = yBase + Math.sin(x * freq + t + offset) * amp\r\n + Math.sin(x * freq * 1.7 + t * 1.3 + offset) * (amp * 0.4);\r\n ctx.lineTo(x, y);\r\n }\r\n ctx.lineTo(W, H); ctx.lineTo(0, H); ctx.closePath();\r\n const alpha = 0.06 - layer * 0.01;\r\n ctx.fillStyle = `rgba(201,169,110,${alpha})`;\r\n ctx.fill();\r\n\r\n \/\/ wave stroke\r\n ctx.beginPath();\r\n ctx.moveTo(0, yBase);\r\n for (let x = 0; x <= W; x += 3) {\r\n const y = yBase + Math.sin(x * freq + t + offset) * amp\r\n + Math.sin(x * freq * 1.7 + t * 1.3 + offset) * (amp * 0.4);\r\n ctx.lineTo(x, y);\r\n }\r\n ctx.strokeStyle = `rgba(201,169,110,${0.15 - layer * 0.03})`;\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ ripple rings\r\n for (let i = ripples.length - 1; i >= 0; i--) {\r\n const rp = ripples[i];\r\n rp.r += rp.speed;\r\n rp.alpha -= 0.008;\r\n if (rp.alpha <= 0) { ripples.splice(i, 1); continue; }\r\n for (let k = 0; k < 3; k++) {\r\n const rr = rp.r - k * 18;\r\n if (rr <= 0) continue;\r\n ctx.beginPath();\r\n ctx.arc(rp.x, rp.y, rr, 0, Math.PI * 2);\r\n ctx.strokeStyle = `rgba(201,169,110,${rp.alpha * (1 - k * 0.3)})`;\r\n ctx.lineWidth = 1.5 - k * 0.4;\r\n ctx.stroke();\r\n }\r\n }\r\n\r\n requestAnimationFrame(draw);\r\n }\r\n\r\n window.addEventListener('resize', resize);\r\n resize();\r\n spawnAuto();\r\n \/\/ initial ripples\r\n setTimeout(() => addRipple(W * 0.7, H * 0.5), 300);\r\n setTimeout(() => addRipple(W * 0.85, H * 0.3), 900);\r\n draw();\r\n })();\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4991312 elementor-widget elementor-widget-html\" data-id=\"4991312\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>N\u1ed9i dung - Li\u00ean h\u1ec7<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700&display=swap');\r\n\r\n .lienhe-page {\r\n --primary-color: #266abe;\r\n --primary-light: #3a7fd4;\r\n --secondary-color: #1f2937;\r\n --background: #ffffff;\r\n --foreground: #1e293b;\r\n --muted-foreground: #64748b;\r\n --border-color: #e2e8f0;\r\n --card-bg: #ffffff;\r\n --shadow-card: 0 4px 20px -4px rgba(30, 41, 59, 0.08);\r\n --shadow-card-hover: 0 12px 32px -8px rgba(30, 41, 59, 0.15);\r\n --radius: 0.75rem;\r\n --font-heading: 'Playfair Display', serif;\r\n --font-body: 'Inter', sans-serif;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n .lienhe-page {\r\n font-family: var(--font-body);\r\n color: var(--foreground);\r\n background: var(--background);\r\n line-height: 1.6;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n .lienhe-page a {\r\n text-decoration: none;\r\n color: inherit;\r\n transition: color 0.2s;\r\n }\r\n\r\n .lienhe-page img {\r\n max-width: 100%;\r\n height: auto;\r\n display: block;\r\n }\r\n\r\n .lienhe-page h2 {\r\n font-family: var(--font-heading);\r\n line-height: 1.2;\r\n }\r\n\r\n .lienhe-page .container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 1rem;\r\n }\r\n\r\n @media (min-width: 640px) {\r\n .lienhe-page .container {\r\n padding: 0 1.5rem;\r\n }\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .lienhe-page .container {\r\n padding: 0 2rem;\r\n }\r\n }\r\n\r\n .lienhe-page .section-padding {\r\n padding: 4rem 0;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .lienhe-page .section-padding {\r\n padding: 6rem 0;\r\n }\r\n }\r\n\r\n .lienhe-page .section-title {\r\n font-size: 1.875rem;\r\n font-weight: 700;\r\n color: var(--secondary-color);\r\n margin-bottom: 1.5rem;\r\n font-family: var(--font-heading);\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .lienhe-page .section-title {\r\n font-size: 2.25rem;\r\n }\r\n }\r\n\r\n \/* CONTACT INFO CARDS *\/\r\n .lienhe-page .contact-info-grid {\r\n display: grid;\r\n gap: 1.5rem;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .lienhe-page .contact-info-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .lienhe-page .contact-info-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .lienhe-page .contact-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .lienhe-page .section-title {\r\n font-size: 2rem;\r\n }\r\n }\r\n\r\n .lienhe-page .contact-info-card {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n padding: 1.5rem;\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n box-shadow: var(--shadow-card);\r\n transition: all 0.3s;\r\n }\r\n\r\n .lienhe-page .contact-info-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow-card-hover);\r\n }\r\n\r\n .lienhe-page .contact-info-icon {\r\n width: 3.5rem;\r\n height: 3.5rem;\r\n border-radius: 50%;\r\n background: rgba(38, 106, 190, 0.1);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n color: var(--primary-color);\r\n }\r\n\r\n .lienhe-page .contact-info-text p {\r\n font-size: 0.85rem;\r\n color: var(--muted-foreground);\r\n }\r\n\r\n .lienhe-page .contact-info-text strong {\r\n font-weight: 700;\r\n color: var(--secondary-color);\r\n font-size: 1rem;\r\n }\r\n\r\n \/* CONTACT GRID *\/\r\n .lienhe-page .contact-grid {\r\n display: grid;\r\n gap: 2rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .lienhe-page .contact-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n\r\n \/* CONTACT FORM *\/\r\n .lienhe-page .contact-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n .lienhe-page .contact-form .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1rem;\r\n }\r\n\r\n @media (max-width: 500px) {\r\n .lienhe-page .contact-form .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n .lienhe-page .contact-form input,\r\n .lienhe-page .contact-form textarea {\r\n width: 100%;\r\n padding: 0.75rem 1rem;\r\n border-radius: var(--radius);\r\n border: 1px solid var(--border-color);\r\n background: var(--background);\r\n font-size: 0.875rem;\r\n font-family: var(--font-body);\r\n color: var(--foreground);\r\n outline: none;\r\n transition: all 0.2s;\r\n }\r\n\r\n .lienhe-page .contact-form input:focus,\r\n .lienhe-page .contact-form textarea:focus {\r\n border-color: var(--primary-color);\r\n box-shadow: 0 0 0 3px rgba(38, 106, 190, 0.15);\r\n }\r\n\r\n .lienhe-page .contact-form textarea {\r\n resize: none;\r\n }\r\n\r\n .lienhe-page .btn-primary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n background: var(--primary-color);\r\n color: #fff;\r\n padding: 0.875rem 2rem;\r\n border-radius: var(--radius);\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n border: none;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n font-family: var(--font-body);\r\n }\r\n\r\n .lienhe-page .btn-primary:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 8px 25px rgba(38, 106, 190, 0.35);\r\n background: var(--primary-light);\r\n }\r\n\r\n .lienhe-page .form-success {\r\n font-size: 0.875rem;\r\n color: var(--primary-color);\r\n font-weight: 500;\r\n display: none;\r\n margin-top: 0.25rem;\r\n }\r\n\r\n .lienhe-page .form-success.show {\r\n display: block;\r\n }\r\n\r\n \/* MAP *\/\r\n .lienhe-page .contact-map {\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n min-height: 400px;\r\n }\r\n\r\n .lienhe-page .contact-map iframe {\r\n width: 100%;\r\n height: calc(100% + 60px);\r\n margin-top: -60px;\r\n min-height: 460px;\r\n border: 0;\r\n }\r\n\r\n .lienhe-page .map-link {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: #ffffff;\r\n color: #1a73e8;\r\n padding: 8px 16px;\r\n border-radius: 8px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n z-index: 10;\r\n transition: all 0.2s;\r\n }\r\n\r\n .lienhe-page .map-link:hover {\r\n background: #f8faff;\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* ANIMATIONS *\/\r\n .lienhe-page .fade-up {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\r\n }\r\n\r\n .lienhe-page .fade-up.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .lienhe-page .stagger-item {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.5s ease-out, transform 0.5s ease-out;\r\n }\r\n\r\n .lienhe-page .stagger-item.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .lienhe-page .field-error {\r\n border-color: #EF4444 !important;\r\n background-color: #FEF2F2;\r\n }\r\n\r\n \/* ===== TOAST NOTIFICATION ===== *\/\r\n .lienhe-page .toast-overlay {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 9999;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: rgba(0, 0, 0, 0.4);\r\n backdrop-filter: blur(6px);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease, visibility 0.3s ease;\r\n }\r\n\r\n .lienhe-page .toast-overlay.show {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .lienhe-page .toast-box {\r\n background: #fff;\r\n border-radius: 24px;\r\n padding: 48px 40px 36px;\r\n max-width: 420px;\r\n width: 90%;\r\n text-align: center;\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);\r\n transform: scale(0.85) translateY(20px);\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n\r\n .lienhe-page .toast-overlay.show .toast-box {\r\n transform: scale(1) translateY(0);\r\n }\r\n\r\n .lienhe-page .toast-icon {\r\n width: 72px;\r\n height: 72px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 20px;\r\n font-size: 32px;\r\n color: #fff;\r\n }\r\n\r\n .lienhe-page .toast-icon.is-success {\r\n background: linear-gradient(135deg, #10B981, #34D399);\r\n box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);\r\n }\r\n\r\n .lienhe-page .toast-icon.is-error {\r\n background: linear-gradient(135deg, #EF4444, #F87171);\r\n box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);\r\n }\r\n\r\n .lienhe-page .toast-title {\r\n font-size: 22px;\r\n font-weight: 800;\r\n color: #0F172A;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .lienhe-page .toast-msg {\r\n font-size: 15px;\r\n color: #64748B;\r\n line-height: 1.6;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .lienhe-page .toast-close-btn {\r\n width: 100%;\r\n padding: 16px;\r\n background: #F1F5F9;\r\n color: #475569;\r\n border: none;\r\n border-radius: 12px;\r\n font-weight: 700;\r\n font-size: 15px;\r\n cursor: pointer;\r\n transition: background 0.2s;\r\n }\r\n\r\n .lienhe-page .toast-close-btn:hover {\r\n background: #E2E8F0;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <div class=\"lienhe-page\">\r\n \r\n <section class=\"section-padding\">\r\n <div class=\"container\">\r\n\r\n \r\n <div class=\"contact-info-grid stagger-parent\">\r\n \r\n <div class=\"contact-info-card stagger-item\">\r\n <div class=\"contact-info-icon\">\r\n <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\r\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\" \/>\r\n <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"contact-info-text\">\r\n <p>\u0110\u1ecba ch\u1ec9<\/p>\r\n <strong>167\/13 T\u1ed5 30, Khu Ph\u1ed1 37, Ph\u01b0\u1eddng Long B\u00ecnh, T\u1ec9nh \u0110\u1ed3ng Nai, Vi\u1ec7t Nam<\/strong>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-info-card stagger-item\">\r\n <div class=\"contact-info-icon\">\r\n <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line>\r\n <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\">\r\n <\/path>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"contact-info-text\">\r\n <p>Khu v\u1ef1c ho\u1ea1t \u0111\u1ed9ng<\/p>\r\n <strong>\u0110\u1ed3ng Nai, TP. HCM, \u0110\u00f4ng Nam B\u1ed9, T\u00e2y Nguy\u00ean & l\u00e2n c\u1eadn<\/strong>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"contact-grid\">\r\n <div class=\"fade-up\">\r\n <h2 class=\"section-title\">G\u1eedi tin nh\u1eafn cho ch\u00fang t\u00f4i<\/h2>\r\n <form class=\"contact-form\" id=\"contactForm\" novalidate>\r\n <input type=\"text\" id=\"contactFullName\" placeholder=\"H\u1ecd v\u00e0 t\u00ean *\" required \/>\r\n <div class=\"form-row\">\r\n <input type=\"tel\" id=\"contactPhone\" placeholder=\"S\u1ed1 \u0111i\u1ec7n tho\u1ea1i *\" required \/>\r\n <input type=\"email\" id=\"contactEmail\" placeholder=\"Email\" \/>\r\n <\/div>\r\n <textarea id=\"contactMessage\" placeholder=\"N\u1ed9i dung tin nh\u1eafn *\" required rows=\"5\"><\/textarea>\r\n <button type=\"submit\" id=\"contactSubmitBtn\" class=\"btn-primary\">\r\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\r\n <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" \/>\r\n <polygon points=\"22 2 15 22 11 13 2 9 22 2\" \/>\r\n <\/svg>\r\n \u0110\u0103ng k\u00fd ngay\r\n <\/button>\r\n <p class=\"form-success\" id=\"formSuccess\">\u2713 Tin nh\u1eafn \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eedi th\u00e0nh c\u00f4ng!<\/p>\r\n <\/form>\r\n <\/div>\r\n <div class=\"fade-up contact-map\" style=\"position: relative;\">\r\n <a href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=167\/13+T\u1ed5+30,+Khu+Ph\u1ed1+37,+Ph\u01b0\u1eddng+Long+B\u00ecnh,+Bi\u00ean+H\u00f2a,+\u0110\u1ed3ng+Nai\" target=\"_blank\" class=\"map-link\" rel=\"noopener\">\r\n <span>M\u1edf trong Google Maps<\/span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"><\/path>\r\n <polyline points=\"15 3 21 3 21 9\"><\/polyline>\r\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"><\/line>\r\n <\/svg>\r\n <\/a>\r\n <iframe\r\n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3917.382103328221!2d106.87913217431522!3d10.934371956272546!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3174df8f4a3e3c6f%3A0x2a1a1a1a1a1a1a1a!2zMTY3LzEzIFThu5UgMzAsIEtodSBQaOG7kSAzNywgUGjGsOG7nW5nIExvbmcgQsOsbmgsIEJpw6puIEjDsmEsIMSQ4buTbmcgTmFpLCBWaeG7h3QgTmFt!5e0!3m2!1svi!2s!4v1715655000000!5m2!1svi!2s\"\r\n allowfullscreen loading=\"lazy\" title=\"Google Maps - \u1ed0p L\u00e1t Bi\u00ean Ho\u00e0\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"toast-overlay\" id=\"toastOverlay\">\r\n <div class=\"toast-box\">\r\n <div class=\"toast-icon\" id=\"toastIcon\"><\/div>\r\n <div class=\"toast-title\" id=\"toastTitle\"><\/div>\r\n <div class=\"toast-msg\" id=\"toastMsg\"><\/div>\r\n <button class=\"toast-close-btn\" id=\"toastCloseBtn\"\r\n onclick=\"document.getElementById('toastOverlay').classList.remove('show')\">\u0110\u00f3ng<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Scroll animations\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n entry.target.querySelectorAll('.stagger-item').forEach((item, i) => {\r\n setTimeout(() => item.classList.add('visible'), i * 120);\r\n });\r\n }\r\n });\r\n }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\r\n document.querySelectorAll('.fade-up, .stagger-parent').forEach(el => observer.observe(el));\r\n\r\n \/\/ ===== GOOGLE SHEET CONTACT FORM =====\r\n const GOOGLE_SHEET_WEB_APP_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbynCiBaN5BISAY3ezFa_YLQmnACQ8A_BqQMeTUfgziSjcGiOrffpo1u1WU6RRizUIWf_Q\/exec';\r\n const contactForm = document.getElementById('contactForm');\r\n const contactSubmitBtn = document.getElementById('contactSubmitBtn');\r\n\r\n if (contactForm && contactSubmitBtn) {\r\n const defaultSubmitHTML = contactSubmitBtn.innerHTML;\r\n const fields = Array.from(contactForm.querySelectorAll('input, textarea'));\r\n\r\n const toastOverlay = document.getElementById('toastOverlay');\r\n const toastIcon = document.getElementById('toastIcon');\r\n const toastTitle = document.getElementById('toastTitle');\r\n const toastMsg = document.getElementById('toastMsg');\r\n\r\n const showToast = (type, title, message) => {\r\n toastIcon.className = 'toast-icon is-' + type;\r\n toastIcon.textContent = type === 'success' ? '\u2713' : '\u2715';\r\n toastTitle.textContent = title;\r\n toastMsg.textContent = message;\r\n toastOverlay.classList.add('show');\r\n if (type === 'success') {\r\n setTimeout(() => { toastOverlay.classList.remove('show'); }, 5000);\r\n }\r\n };\r\n\r\n const clearErrors = () => {\r\n fields.forEach((field) => {\r\n field.classList.remove('field-error');\r\n field.removeAttribute('aria-invalid');\r\n });\r\n };\r\n\r\n const markError = (field) => {\r\n field.classList.add('field-error');\r\n field.setAttribute('aria-invalid', 'true');\r\n };\r\n\r\n const validateForm = (payload) => {\r\n clearErrors();\r\n\r\n if (!payload['H\u1ecd t\u00ean'] || !payload['S\u1ed1 \u0111i\u1ec7n tho\u1ea1i']) {\r\n if (!payload['H\u1ecd t\u00ean']) markError(document.getElementById('contactFullName'));\r\n if (!payload['S\u1ed1 \u0111i\u1ec7n tho\u1ea1i']) markError(document.getElementById('contactPhone'));\r\n\r\n showToast('error', 'L\u1ed7i nh\u1eadp li\u1ec7u', 'Vui l\u00f2ng nh\u1eadp \u0111\u1ea7y \u0111\u1ee7 c\u00e1c th\u00f4ng tin b\u1eaft bu\u1ed9c');\r\n return false;\r\n }\r\n\r\n if (!\/^[0-9+\\s().-]{8,15}$\/.test(payload['S\u1ed1 \u0111i\u1ec7n tho\u1ea1i'])) {\r\n markError(document.getElementById('contactPhone'));\r\n showToast('error', 'L\u1ed7i nh\u1eadp li\u1ec7u', 'Vui l\u00f2ng nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i h\u1ee3p l\u1ec7.');\r\n return false;\r\n }\r\n\r\n if (payload['Email'] && !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(payload['Email'])) {\r\n markError(document.getElementById('contactEmail'));\r\n showToast('error', 'L\u1ed7i nh\u1eadp li\u1ec7u', 'Vui l\u00f2ng nh\u1eadp email h\u1ee3p l\u1ec7.');\r\n return false;\r\n }\r\n\r\n return true;\r\n };\r\n\r\n fields.forEach((field) => {\r\n field.addEventListener('input', () => {\r\n field.classList.remove('field-error');\r\n field.removeAttribute('aria-invalid');\r\n });\r\n });\r\n\r\n contactForm.addEventListener('submit', async (event) => {\r\n event.preventDefault();\r\n\r\n const payload = {\r\n form_name: 'Leads',\r\n 'H\u1ecd t\u00ean': document.getElementById('contactFullName').value.trim(),\r\n 'S\u1ed1 \u0111i\u1ec7n tho\u1ea1i': document.getElementById('contactPhone').value.trim(),\r\n 'Email': document.getElementById('contactEmail').value.trim(),\r\n 'Message': document.getElementById('contactMessage').value.trim(),\r\n 'Page URL': window.location.href,\r\n '-': new Date().toLocaleDateString('vi-VN')\r\n };\r\n\r\n if (!validateForm(payload)) return;\r\n\r\n contactSubmitBtn.disabled = true;\r\n contactSubmitBtn.innerHTML = '\u0110ang g\u1eedi...';\r\n\r\n try {\r\n const bodyParams = new URLSearchParams();\r\n Object.entries(payload).forEach(([key, value]) => bodyParams.append(key, value ?? ''));\r\n\r\n const res = await fetch(GOOGLE_SHEET_WEB_APP_URL, {\r\n method: 'POST',\r\n mode: 'cors',\r\n headers: {\r\n 'Content-Type': 'application\/x-www-form-urlencoded;charset=UTF-8'\r\n },\r\n body: bodyParams.toString()\r\n });\r\n\r\n if (!res.ok) throw new Error(`HTTP ${res.status}`);\r\n\r\n contactForm.reset();\r\n clearErrors();\r\n showToast('success', 'G\u1eedi th\u00e0nh c\u00f4ng! \ud83c\udf89', 'C\u1ea3m \u01a1n b\u1ea1n \u0111\u00e3 li\u00ean h\u1ec7. Ch\u00fang t\u00f4i s\u1ebd ph\u1ea3n h\u1ed3i trong th\u1eddi gian s\u1edbm nh\u1ea5t.');\r\n } catch (error) {\r\n console.error('Contact form submission failed:', error);\r\n showToast('error', 'G\u1eedi th\u1ea5t b\u1ea1i', 'Kh\u00f4ng g\u1eedi \u0111\u01b0\u1ee3c th\u00f4ng tin. Vui l\u00f2ng th\u1eed l\u1ea1i sau.');\r\n } finally {\r\n contactSubmitBtn.disabled = false;\r\n contactSubmitBtn.innerHTML = defaultSubmitHTML;\r\n }\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Document Trang ch\u1ee7 \u203a Li\u00ean h\u1ec7 Li\u00ean h\u1ec7 0382 333 444 hoangtiep88@gmail.com Bi\u00ean Ho\u00e0 N\u1ed9i dung – Li\u00ean h\u1ec7 \u0110\u1ecba ch\u1ec9 167\/13 T\u1ed5 30, Khu Ph\u1ed1 37, Ph\u01b0\u1eddng Long B\u00ecnh, T\u1ec9nh \u0110\u1ed3ng Nai, Vi\u1ec7t Nam Khu v\u1ef1c ho\u1ea1t \u0111\u1ed9ng \u0110\u1ed3ng Nai, TP. HCM, \u0110\u00f4ng Nam B\u1ed9, T\u00e2y Nguy\u00ean & l\u00e2n c\u1eadn G\u1eedi tin nh\u1eafn cho ch\u00fang t\u00f4i \u0110\u0103ng k\u00fd ngay \u2713 Tin nh\u1eafn \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eedi th\u00e0nh c\u00f4ng! M\u1edf trong Google Maps \u0110\u00f3ng<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-57","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":126,"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":2153,"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/pages\/57\/revisions\/2153"}],"wp:attachment":[{"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/media?parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Document<\/title>\r\n<\/head>\r\n<style>\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --navy: #1e4d7b;\r\n --navy2: #235d91;\r\n --red: #c0392b;\r\n --gold: #c9a96e;\r\n --white: #f5f0eb;\r\n --light: #e8e0d5;\r\n }\r\n\r\n body {\r\n font-family: 'Manrope', sans-serif !important;\r\n }\r\n\r\n.banner-lien-he {\r\n position: relative;\r\n width: 100%;\r\n height: 340px;\r\n background-image: url('http:\/\/58.186.18.93:8093\/XayDung\/wp-content\/uploads\/2026\/05\/212.jpg');\r\n background-position: center center;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n overflow: hidden;\r\n}\r\n\r\n #ripple-canvas {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.55;\r\n }\r\n\r\n \/* floating geometric shapes *\/\r\n .banner-lien-he .geo {\r\n position: absolute;\r\n border: 1px solid rgba(201, 169, 110, 0.2);\r\n border-radius: 50%;\r\n animation: geoFloat linear infinite;\r\n }\r\n\r\n .geo-1 {\r\n width: 200px;\r\n height: 200px;\r\n top: -50px;\r\n right: 100px;\r\n animation-duration: 8s;\r\n }\r\n\r\n .geo-2 {\r\n width: 120px;\r\n height: 120px;\r\n bottom: 20px;\r\n right: 250px;\r\n animation-duration: 12s;\r\n animation-delay: -3s;\r\n border-color: rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .geo-3 {\r\n width: 60px;\r\n height: 60px;\r\n top: 60px;\r\n right: 350px;\r\n animation-duration: 6s;\r\n animation-delay: -1s;\r\n }\r\n\r\n @keyframes geoFloat {\r\n 0% {\r\n transform: translateY(0) rotate(0deg);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-15px) rotate(180deg);\r\n }\r\n\r\n 100% {\r\n transform: translateY(0) rotate(360deg);\r\n }\r\n }\r\n\r\n @keyframes fadeSlideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .banner-lien-he .content {\r\n position: relative;\r\n z-index: 10;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n width: 100%;\r\n }\r\n\r\n .banner-lien-he .breadcrumb {\r\n font-size: 17px;\r\n color: #fff;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n font-weight: 500;\r\n margin-bottom: 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n opacity: 0;\r\n animation: fadeSlideUp .7s .2s ease forwards;\r\n }\r\n\r\n .banner-lien-he .breadcrumb span {\r\n color: #fff;\r\n }\r\n\r\n .banner-lien-he h1 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 90px;\r\n font-weight: 400;\r\n color: #fff;\r\n line-height: 1;\r\n letter-spacing: -1px;\r\n opacity: 0;\r\n animation: fadeSlideUp .9s .4s ease forwards;\r\n }\r\n\r\n .banner-lien-he h1 em {\r\n font-style: normal;\r\n color: #fff;\r\n font-weight: 700;\r\n }\r\n\r\n .banner-lien-he .contact-chips {\r\n display: flex;\r\n gap: 14px;\r\n margin-top: 22px;\r\n opacity: 0;\r\n animation: fadeSlideUp .8s .7s ease forwards;\r\n }\r\n\r\n .contact-chip {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 8px 16px;\r\n background: rgba(255, 255, 255, 0.07);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.12);\r\n font-size: 18px;\r\n color: #fff;\r\n letter-spacing: .5px;\r\n transition: all .3s;\r\n }\r\n\r\n .contact-chip:hover {\r\n background: rgba(201, 169, 110, 0.15);\r\n border-color: var(--gold);\r\n color: var(--gold);\r\n }\r\n\r\n .contact-chip svg {\r\n width: 14px;\r\n height: 14px;\r\n stroke: currentColor;\r\n fill: none;\r\n stroke-width: 2;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1024px) {\r\n .banner-lien-he .content {\r\n padding: 0 1.5rem;\r\n }\r\n\r\n .banner-lien-he h1 {\r\n font-size: 56px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .banner-lien-he {\r\n height: 280px;\r\n }\r\n\r\n .banner-lien-he h1 {\r\n font-size: 42px;\r\n }\r\n\r\n .contact-chips {\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n }\r\n\r\n .contact-chip {\r\n padding: 6px 12px;\r\n font-size: 11px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .banner-lien-he {\r\n height: 240px;\r\n }\r\n\r\n .banner-lien-he h1 {\r\n font-size: 36px;\r\n }\r\n\r\n .banner-lien-he .breadcrumb {\r\n font-size: 11px;\r\n margin-bottom: 10px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<body>\r\n <section class=\"banner-lien-he\">\r\n <canvas id=\"ripple-canvas\"><\/canvas>\r\n <div class=\"geo geo-1\"><\/div>\r\n <div class=\"geo geo-2\"><\/div>\r\n <div class=\"geo geo-3\"><\/div>\r\n <div class=\"content\">\r\n <div class=\"breadcrumb\">Trang ch\u1ee7 <span>\u203a<\/span> Li\u00ean h\u1ec7<\/div>\r\n <h1>Li\u00ean <em>h\u1ec7<\/em><\/h1>\r\n <div class=\"contact-chips\">\r\n <div class=\"contact-chip\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.97 2.18C.97 1.05 1.93.01 3.05 0h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L7.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z\" \/>\r\n <\/svg>\r\n 0382 333 444\r\n <\/div>\r\n <div class=\"contact-chip\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\" \/>\r\n <polyline points=\"22,6 12,13 2,6\" \/>\r\n <\/svg>\r\n hoangtiep88@gmail.com\r\n <\/div>\r\n <div class=\"contact-chip\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\" \/>\r\n <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\r\n <\/svg>\r\n Bi\u00ean Ho\u00e0\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n (function () {\r\n const canvas = document.getElementById('ripple-canvas');\r\n const section = canvas.parentElement;\r\n const ctx = canvas.getContext('2d');\r\n let W, H, t = 0;\r\n const ripples = [];\r\n\r\n function resize() {\r\n W = canvas.width = section.offsetWidth;\r\n H = canvas.height = section.offsetHeight;\r\n }\r\n\r\n function addRipple(x, y) {\r\n ripples.push({ x, y, r: 0, maxR: 200, alpha: 0.6, speed: 1.5 });\r\n }\r\n\r\n function spawnAuto() {\r\n addRipple(Math.random() * W, Math.random() * H);\r\n setTimeout(spawnAuto, 1200 + Math.random() * 1000);\r\n }\r\n\r\n section.addEventListener('click', e => {\r\n const r = canvas.getBoundingClientRect();\r\n addRipple(e.clientX - r.left, e.clientY - r.top);\r\n });\r\n\r\n function draw() {\r\n ctx.clearRect(0, 0, W, H);\r\n t += 0.015;\r\n\r\n \/\/ flowing sine waves\r\n for (let layer = 0; layer < 4; layer++) {\r\n ctx.beginPath();\r\n const amp = 18 - layer * 3;\r\n const freq = 0.008 + layer * 0.003;\r\n const offset = layer * 0.7;\r\n const yBase = H * (0.3 + layer * 0.15);\r\n ctx.moveTo(0, yBase);\r\n for (let x = 0; x <= W; x += 3) {\r\n const y = yBase + Math.sin(x * freq + t + offset) * amp\r\n + Math.sin(x * freq * 1.7 + t * 1.3 + offset) * (amp * 0.4);\r\n ctx.lineTo(x, y);\r\n }\r\n ctx.lineTo(W, H); ctx.lineTo(0, H); ctx.closePath();\r\n const alpha = 0.06 - layer * 0.01;\r\n ctx.fillStyle = `rgba(201,169,110,${alpha})`;\r\n ctx.fill();\r\n\r\n \/\/ wave stroke\r\n ctx.beginPath();\r\n ctx.moveTo(0, yBase);\r\n for (let x = 0; x <= W; x += 3) {\r\n const y = yBase + Math.sin(x * freq + t + offset) * amp\r\n + Math.sin(x * freq * 1.7 + t * 1.3 + offset) * (amp * 0.4);\r\n ctx.lineTo(x, y);\r\n }\r\n ctx.strokeStyle = `rgba(201,169,110,${0.15 - layer * 0.03})`;\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ ripple rings\r\n for (let i = ripples.length - 1; i >= 0; i--) {\r\n const rp = ripples[i];\r\n rp.r += rp.speed;\r\n rp.alpha -= 0.008;\r\n if (rp.alpha <= 0) { ripples.splice(i, 1); continue; }\r\n for (let k = 0; k < 3; k++) {\r\n const rr = rp.r - k * 18;\r\n if (rr <= 0) continue;\r\n ctx.beginPath();\r\n ctx.arc(rp.x, rp.y, rr, 0, Math.PI * 2);\r\n ctx.strokeStyle = `rgba(201,169,110,${rp.alpha * (1 - k * 0.3)})`;\r\n ctx.lineWidth = 1.5 - k * 0.4;\r\n ctx.stroke();\r\n }\r\n }\r\n\r\n requestAnimationFrame(draw);\r\n }\r\n\r\n window.addEventListener('resize', resize);\r\n resize();\r\n spawnAuto();\r\n \/\/ initial ripples\r\n setTimeout(() => addRipple(W * 0.7, H * 0.5), 300);\r\n setTimeout(() => addRipple(W * 0.85, H * 0.3), 900);\r\n draw();\r\n })();\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4991312 elementor-widget elementor-widget-html\" data-id=\"4991312\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>N\u1ed9i dung - Li\u00ean h\u1ec7<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700&display=swap');\r\n\r\n .lienhe-page {\r\n --primary-color: #266abe;\r\n --primary-light: #3a7fd4;\r\n --secondary-color: #1f2937;\r\n --background: #ffffff;\r\n --foreground: #1e293b;\r\n --muted-foreground: #64748b;\r\n --border-color: #e2e8f0;\r\n --card-bg: #ffffff;\r\n --shadow-card: 0 4px 20px -4px rgba(30, 41, 59, 0.08);\r\n --shadow-card-hover: 0 12px 32px -8px rgba(30, 41, 59, 0.15);\r\n --radius: 0.75rem;\r\n --font-heading: 'Playfair Display', serif;\r\n --font-body: 'Inter', sans-serif;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n .lienhe-page {\r\n font-family: var(--font-body);\r\n color: var(--foreground);\r\n background: var(--background);\r\n line-height: 1.6;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n .lienhe-page a {\r\n text-decoration: none;\r\n color: inherit;\r\n transition: color 0.2s;\r\n }\r\n\r\n .lienhe-page img {\r\n max-width: 100%;\r\n height: auto;\r\n display: block;\r\n }\r\n\r\n .lienhe-page h2 {\r\n font-family: var(--font-heading);\r\n line-height: 1.2;\r\n }\r\n\r\n .lienhe-page .container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 1rem;\r\n }\r\n\r\n @media (min-width: 640px) {\r\n .lienhe-page .container {\r\n padding: 0 1.5rem;\r\n }\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .lienhe-page .container {\r\n padding: 0 2rem;\r\n }\r\n }\r\n\r\n .lienhe-page .section-padding {\r\n padding: 4rem 0;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .lienhe-page .section-padding {\r\n padding: 6rem 0;\r\n }\r\n }\r\n\r\n .lienhe-page .section-title {\r\n font-size: 1.875rem;\r\n font-weight: 700;\r\n color: var(--secondary-color);\r\n margin-bottom: 1.5rem;\r\n font-family: var(--font-heading);\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .lienhe-page .section-title {\r\n font-size: 2.25rem;\r\n }\r\n }\r\n\r\n \/* CONTACT INFO CARDS *\/\r\n .lienhe-page .contact-info-grid {\r\n display: grid;\r\n gap: 1.5rem;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .lienhe-page .contact-info-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .lienhe-page .contact-info-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .lienhe-page .contact-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .lienhe-page .section-title {\r\n font-size: 2rem;\r\n }\r\n }\r\n\r\n .lienhe-page .contact-info-card {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n padding: 1.5rem;\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n box-shadow: var(--shadow-card);\r\n transition: all 0.3s;\r\n }\r\n\r\n .lienhe-page .contact-info-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow-card-hover);\r\n }\r\n\r\n .lienhe-page .contact-info-icon {\r\n width: 3.5rem;\r\n height: 3.5rem;\r\n border-radius: 50%;\r\n background: rgba(38, 106, 190, 0.1);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n color: var(--primary-color);\r\n }\r\n\r\n .lienhe-page .contact-info-text p {\r\n font-size: 0.85rem;\r\n color: var(--muted-foreground);\r\n }\r\n\r\n .lienhe-page .contact-info-text strong {\r\n font-weight: 700;\r\n color: var(--secondary-color);\r\n font-size: 1rem;\r\n }\r\n\r\n \/* CONTACT GRID *\/\r\n .lienhe-page .contact-grid {\r\n display: grid;\r\n gap: 2rem;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .lienhe-page .contact-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n\r\n \/* CONTACT FORM *\/\r\n .lienhe-page .contact-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n .lienhe-page .contact-form .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1rem;\r\n }\r\n\r\n @media (max-width: 500px) {\r\n .lienhe-page .contact-form .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n .lienhe-page .contact-form input,\r\n .lienhe-page .contact-form textarea {\r\n width: 100%;\r\n padding: 0.75rem 1rem;\r\n border-radius: var(--radius);\r\n border: 1px solid var(--border-color);\r\n background: var(--background);\r\n font-size: 0.875rem;\r\n font-family: var(--font-body);\r\n color: var(--foreground);\r\n outline: none;\r\n transition: all 0.2s;\r\n }\r\n\r\n .lienhe-page .contact-form input:focus,\r\n .lienhe-page .contact-form textarea:focus {\r\n border-color: var(--primary-color);\r\n box-shadow: 0 0 0 3px rgba(38, 106, 190, 0.15);\r\n }\r\n\r\n .lienhe-page .contact-form textarea {\r\n resize: none;\r\n }\r\n\r\n .lienhe-page .btn-primary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n background: var(--primary-color);\r\n color: #fff;\r\n padding: 0.875rem 2rem;\r\n border-radius: var(--radius);\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n border: none;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n font-family: var(--font-body);\r\n }\r\n\r\n .lienhe-page .btn-primary:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 8px 25px rgba(38, 106, 190, 0.35);\r\n background: var(--primary-light);\r\n }\r\n\r\n .lienhe-page .form-success {\r\n font-size: 0.875rem;\r\n color: var(--primary-color);\r\n font-weight: 500;\r\n display: none;\r\n margin-top: 0.25rem;\r\n }\r\n\r\n .lienhe-page .form-success.show {\r\n display: block;\r\n }\r\n\r\n \/* MAP *\/\r\n .lienhe-page .contact-map {\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n min-height: 400px;\r\n }\r\n\r\n .lienhe-page .contact-map iframe {\r\n width: 100%;\r\n height: calc(100% + 60px);\r\n margin-top: -60px;\r\n min-height: 460px;\r\n border: 0;\r\n }\r\n\r\n .lienhe-page .map-link {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: #ffffff;\r\n color: #1a73e8;\r\n padding: 8px 16px;\r\n border-radius: 8px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n z-index: 10;\r\n transition: all 0.2s;\r\n }\r\n\r\n .lienhe-page .map-link:hover {\r\n background: #f8faff;\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* ANIMATIONS *\/\r\n .lienhe-page .fade-up {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\r\n }\r\n\r\n .lienhe-page .fade-up.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .lienhe-page .stagger-item {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.5s ease-out, transform 0.5s ease-out;\r\n }\r\n\r\n .lienhe-page .stagger-item.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .lienhe-page .field-error {\r\n border-color: #EF4444 !important;\r\n background-color: #FEF2F2;\r\n }\r\n\r\n \/* ===== TOAST NOTIFICATION ===== *\/\r\n .lienhe-page .toast-overlay {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 9999;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: rgba(0, 0, 0, 0.4);\r\n backdrop-filter: blur(6px);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease, visibility 0.3s ease;\r\n }\r\n\r\n .lienhe-page .toast-overlay.show {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .lienhe-page .toast-box {\r\n background: #fff;\r\n border-radius: 24px;\r\n padding: 48px 40px 36px;\r\n max-width: 420px;\r\n width: 90%;\r\n text-align: center;\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);\r\n transform: scale(0.85) translateY(20px);\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n\r\n .lienhe-page .toast-overlay.show .toast-box {\r\n transform: scale(1) translateY(0);\r\n }\r\n\r\n .lienhe-page .toast-icon {\r\n width: 72px;\r\n height: 72px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 20px;\r\n font-size: 32px;\r\n color: #fff;\r\n }\r\n\r\n .lienhe-page .toast-icon.is-success {\r\n background: linear-gradient(135deg, #10B981, #34D399);\r\n box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);\r\n }\r\n\r\n .lienhe-page .toast-icon.is-error {\r\n background: linear-gradient(135deg, #EF4444, #F87171);\r\n box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);\r\n }\r\n\r\n .lienhe-page .toast-title {\r\n font-size: 22px;\r\n font-weight: 800;\r\n color: #0F172A;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .lienhe-page .toast-msg {\r\n font-size: 15px;\r\n color: #64748B;\r\n line-height: 1.6;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .lienhe-page .toast-close-btn {\r\n width: 100%;\r\n padding: 16px;\r\n background: #F1F5F9;\r\n color: #475569;\r\n border: none;\r\n border-radius: 12px;\r\n font-weight: 700;\r\n font-size: 15px;\r\n cursor: pointer;\r\n transition: background 0.2s;\r\n }\r\n\r\n .lienhe-page .toast-close-btn:hover {\r\n background: #E2E8F0;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <div class=\"lienhe-page\">\r\n \r\n <section class=\"section-padding\">\r\n <div class=\"container\">\r\n\r\n \r\n <div class=\"contact-info-grid stagger-parent\">\r\n \r\n <div class=\"contact-info-card stagger-item\">\r\n <div class=\"contact-info-icon\">\r\n <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\r\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\" \/>\r\n <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"contact-info-text\">\r\n <p>\u0110\u1ecba ch\u1ec9<\/p>\r\n <strong>167\/13 T\u1ed5 30, Khu Ph\u1ed1 37, Ph\u01b0\u1eddng Long B\u00ecnh, T\u1ec9nh \u0110\u1ed3ng Nai, Vi\u1ec7t Nam<\/strong>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-info-card stagger-item\">\r\n <div class=\"contact-info-icon\">\r\n <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\r\n <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line>\r\n <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\">\r\n <\/path>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"contact-info-text\">\r\n <p>Khu v\u1ef1c ho\u1ea1t \u0111\u1ed9ng<\/p>\r\n <strong>\u0110\u1ed3ng Nai, TP. HCM, \u0110\u00f4ng Nam B\u1ed9, T\u00e2y Nguy\u00ean & l\u00e2n c\u1eadn<\/strong>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"contact-grid\">\r\n <div class=\"fade-up\">\r\n <h2 class=\"section-title\">G\u1eedi tin nh\u1eafn cho ch\u00fang t\u00f4i<\/h2>\r\n <form class=\"contact-form\" id=\"contactForm\" novalidate>\r\n <input type=\"text\" id=\"contactFullName\" placeholder=\"H\u1ecd v\u00e0 t\u00ean *\" required \/>\r\n <div class=\"form-row\">\r\n <input type=\"tel\" id=\"contactPhone\" placeholder=\"S\u1ed1 \u0111i\u1ec7n tho\u1ea1i *\" required \/>\r\n <input type=\"email\" id=\"contactEmail\" placeholder=\"Email\" \/>\r\n <\/div>\r\n <textarea id=\"contactMessage\" placeholder=\"N\u1ed9i dung tin nh\u1eafn *\" required rows=\"5\"><\/textarea>\r\n <button type=\"submit\" id=\"contactSubmitBtn\" class=\"btn-primary\">\r\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\r\n <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" \/>\r\n <polygon points=\"22 2 15 22 11 13 2 9 22 2\" \/>\r\n <\/svg>\r\n \u0110\u0103ng k\u00fd ngay\r\n <\/button>\r\n <p class=\"form-success\" id=\"formSuccess\">\u2713 Tin nh\u1eafn \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eedi th\u00e0nh c\u00f4ng!<\/p>\r\n <\/form>\r\n <\/div>\r\n <div class=\"fade-up contact-map\" style=\"position: relative;\">\r\n <a href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=167\/13+T\u1ed5+30,+Khu+Ph\u1ed1+37,+Ph\u01b0\u1eddng+Long+B\u00ecnh,+Bi\u00ean+H\u00f2a,+\u0110\u1ed3ng+Nai\" target=\"_blank\" class=\"map-link\" rel=\"noopener\">\r\n <span>M\u1edf trong Google Maps<\/span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"><\/path>\r\n <polyline points=\"15 3 21 3 21 9\"><\/polyline>\r\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"><\/line>\r\n <\/svg>\r\n <\/a>\r\n <iframe\r\n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3917.382103328221!2d106.87913217431522!3d10.934371956272546!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3174df8f4a3e3c6f%3A0x2a1a1a1a1a1a1a1a!2zMTY3LzEzIFThu5UgMzAsIEtodSBQaOG7kSAzNywgUGjGsOG7nW5nIExvbmcgQsOsbmgsIEJpw6puIEjDsmEsIMSQ4buTbmcgTmFpLCBWaeG7h3QgTmFt!5e0!3m2!1svi!2s!4v1715655000000!5m2!1svi!2s\"\r\n allowfullscreen loading=\"lazy\" title=\"Google Maps - \u1ed0p L\u00e1t Bi\u00ean Ho\u00e0\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"toast-overlay\" id=\"toastOverlay\">\r\n <div class=\"toast-box\">\r\n <div class=\"toast-icon\" id=\"toastIcon\"><\/div>\r\n <div class=\"toast-title\" id=\"toastTitle\"><\/div>\r\n <div class=\"toast-msg\" id=\"toastMsg\"><\/div>\r\n <button class=\"toast-close-btn\" id=\"toastCloseBtn\"\r\n onclick=\"document.getElementById('toastOverlay').classList.remove('show')\">\u0110\u00f3ng<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Scroll animations\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n entry.target.querySelectorAll('.stagger-item').forEach((item, i) => {\r\n setTimeout(() => item.classList.add('visible'), i * 120);\r\n });\r\n }\r\n });\r\n }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\r\n document.querySelectorAll('.fade-up, .stagger-parent').forEach(el => observer.observe(el));\r\n\r\n \/\/ ===== GOOGLE SHEET CONTACT FORM =====\r\n const GOOGLE_SHEET_WEB_APP_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbynCiBaN5BISAY3ezFa_YLQmnACQ8A_BqQMeTUfgziSjcGiOrffpo1u1WU6RRizUIWf_Q\/exec';\r\n const contactForm = document.getElementById('contactForm');\r\n const contactSubmitBtn = document.getElementById('contactSubmitBtn');\r\n\r\n if (contactForm && contactSubmitBtn) {\r\n const defaultSubmitHTML = contactSubmitBtn.innerHTML;\r\n const fields = Array.from(contactForm.querySelectorAll('input, textarea'));\r\n\r\n const toastOverlay = document.getElementById('toastOverlay');\r\n const toastIcon = document.getElementById('toastIcon');\r\n const toastTitle = document.getElementById('toastTitle');\r\n const toastMsg = document.getElementById('toastMsg');\r\n\r\n const showToast = (type, title, message) => {\r\n toastIcon.className = 'toast-icon is-' + type;\r\n toastIcon.textContent = type === 'success' ? '\u2713' : '\u2715';\r\n toastTitle.textContent = title;\r\n toastMsg.textContent = message;\r\n toastOverlay.classList.add('show');\r\n if (type === 'success') {\r\n setTimeout(() => { toastOverlay.classList.remove('show'); }, 5000);\r\n }\r\n };\r\n\r\n const clearErrors = () => {\r\n fields.forEach((field) => {\r\n field.classList.remove('field-error');\r\n field.removeAttribute('aria-invalid');\r\n });\r\n };\r\n\r\n const markError = (field) => {\r\n field.classList.add('field-error');\r\n field.setAttribute('aria-invalid', 'true');\r\n };\r\n\r\n const validateForm = (payload) => {\r\n clearErrors();\r\n\r\n if (!payload['H\u1ecd t\u00ean'] || !payload['S\u1ed1 \u0111i\u1ec7n tho\u1ea1i']) {\r\n if (!payload['H\u1ecd t\u00ean']) markError(document.getElementById('contactFullName'));\r\n if (!payload['S\u1ed1 \u0111i\u1ec7n tho\u1ea1i']) markError(document.getElementById('contactPhone'));\r\n\r\n showToast('error', 'L\u1ed7i nh\u1eadp li\u1ec7u', 'Vui l\u00f2ng nh\u1eadp \u0111\u1ea7y \u0111\u1ee7 c\u00e1c th\u00f4ng tin b\u1eaft bu\u1ed9c');\r\n return false;\r\n }\r\n\r\n if (!\/^[0-9+\\s().-]{8,15}$\/.test(payload['S\u1ed1 \u0111i\u1ec7n tho\u1ea1i'])) {\r\n markError(document.getElementById('contactPhone'));\r\n showToast('error', 'L\u1ed7i nh\u1eadp li\u1ec7u', 'Vui l\u00f2ng nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i h\u1ee3p l\u1ec7.');\r\n return false;\r\n }\r\n\r\n if (payload['Email'] && !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(payload['Email'])) {\r\n markError(document.getElementById('contactEmail'));\r\n showToast('error', 'L\u1ed7i nh\u1eadp li\u1ec7u', 'Vui l\u00f2ng nh\u1eadp email h\u1ee3p l\u1ec7.');\r\n return false;\r\n }\r\n\r\n return true;\r\n };\r\n\r\n fields.forEach((field) => {\r\n field.addEventListener('input', () => {\r\n field.classList.remove('field-error');\r\n field.removeAttribute('aria-invalid');\r\n });\r\n });\r\n\r\n contactForm.addEventListener('submit', async (event) => {\r\n event.preventDefault();\r\n\r\n const payload = {\r\n form_name: 'Leads',\r\n 'H\u1ecd t\u00ean': document.getElementById('contactFullName').value.trim(),\r\n 'S\u1ed1 \u0111i\u1ec7n tho\u1ea1i': document.getElementById('contactPhone').value.trim(),\r\n 'Email': document.getElementById('contactEmail').value.trim(),\r\n 'Message': document.getElementById('contactMessage').value.trim(),\r\n 'Page URL': window.location.href,\r\n '-': new Date().toLocaleDateString('vi-VN')\r\n };\r\n\r\n if (!validateForm(payload)) return;\r\n\r\n contactSubmitBtn.disabled = true;\r\n contactSubmitBtn.innerHTML = '\u0110ang g\u1eedi...';\r\n\r\n try {\r\n const bodyParams = new URLSearchParams();\r\n Object.entries(payload).forEach(([key, value]) => bodyParams.append(key, value ?? ''));\r\n\r\n const res = await fetch(GOOGLE_SHEET_WEB_APP_URL, {\r\n method: 'POST',\r\n mode: 'cors',\r\n headers: {\r\n 'Content-Type': 'application\/x-www-form-urlencoded;charset=UTF-8'\r\n },\r\n body: bodyParams.toString()\r\n });\r\n\r\n if (!res.ok) throw new Error(`HTTP ${res.status}`);\r\n\r\n contactForm.reset();\r\n clearErrors();\r\n showToast('success', 'G\u1eedi th\u00e0nh c\u00f4ng! \ud83c\udf89', 'C\u1ea3m \u01a1n b\u1ea1n \u0111\u00e3 li\u00ean h\u1ec7. Ch\u00fang t\u00f4i s\u1ebd ph\u1ea3n h\u1ed3i trong th\u1eddi gian s\u1edbm nh\u1ea5t.');\r\n } catch (error) {\r\n console.error('Contact form submission failed:', error);\r\n showToast('error', 'G\u1eedi th\u1ea5t b\u1ea1i', 'Kh\u00f4ng g\u1eedi \u0111\u01b0\u1ee3c th\u00f4ng tin. Vui l\u00f2ng th\u1eed l\u1ea1i sau.');\r\n } finally {\r\n contactSubmitBtn.disabled = false;\r\n contactSubmitBtn.innerHTML = defaultSubmitHTML;\r\n }\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Document Trang ch\u1ee7 \u203a Li\u00ean h\u1ec7 Li\u00ean h\u1ec7 0382 333 444 hoangtiep88@gmail.com Bi\u00ean Ho\u00e0 N\u1ed9i dung – Li\u00ean h\u1ec7 \u0110\u1ecba ch\u1ec9 167\/13 T\u1ed5 30, Khu Ph\u1ed1 37, Ph\u01b0\u1eddng Long B\u00ecnh, T\u1ec9nh \u0110\u1ed3ng Nai, Vi\u1ec7t Nam Khu v\u1ef1c ho\u1ea1t \u0111\u1ed9ng \u0110\u1ed3ng Nai, TP. HCM, \u0110\u00f4ng Nam B\u1ed9, T\u00e2y Nguy\u00ean & l\u00e2n c\u1eadn G\u1eedi tin nh\u1eafn cho ch\u00fang t\u00f4i \u0110\u0103ng k\u00fd ngay \u2713 Tin nh\u1eafn \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eedi th\u00e0nh c\u00f4ng! M\u1edf trong Google Maps \u0110\u00f3ng<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-57","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":126,"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":2153,"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/pages\/57\/revisions\/2153"}],"wp:attachment":[{"href":"http:\/\/58.186.18.93:8093\/XayDung\/wp-json\/wp\/v2\/media?parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}