{"id":4938,"date":"2026-04-12T15:32:09","date_gmt":"2026-04-12T08:32:09","guid":{"rendered":"https:\/\/hiweb.vn\/?page_id=4938"},"modified":"2026-04-12T15:37:12","modified_gmt":"2026-04-12T08:37:12","slug":"home","status":"publish","type":"page","link":"https:\/\/hiweb.vn\/blog\/home\/","title":{"rendered":"Home"},"content":{"rendered":"\n<p style=\"text-align: center;\"><strong><span style=\"font-size: 46px; color: #333333;\">H\u1ec7 th\u1ed1ng t\u1ea1o Web k\u00e9o th\u1ea3 t\u00f9y ch\u1ec9nh \u0111\u01a1n gi\u1ea3n \u0111a d\u1ea1ng m\u1eabu ng\u00e0nh ngh\u1ec1<\/span><\/strong><\/p>\n<div class=\"brand-logo-wrapper\">\n<div class=\"brand-logo-block\">\u00a0<\/div>\n<\/div>\n<section class=\"section_hero\" style=\"background-image: radial-gradient(closest-side at 50% 50%, rgba(0, 255, 216, .2) 0, transparent 100%), radial-gradient(closest-side at 50% 50%, rgba(250, 245, 16, .15) 0, transparent 100%), radial-gradient(closest-side at 50% 50%, rgba(255, 108, 0, .12) 0, transparent 100%); background-position: calc(50% + 324px) calc(50% + 176px), calc(50% - 429px) calc(50% - 190px), calc(50% - 295px) calc(50% + 40px); background-repeat: no-repeat; background-size: 1280px 1280px, 930px 930px, 1338px 1338px;\">\n<div class=\"global-padding is-hero\">\n<div class=\"container-1252px is-hero\">\n<div class=\"hero-content\">\n<div class=\"hero-content-wrapper\">\n<div class=\"reviewr-brand-wrap\">\n<p id=\"TITLE_67b5dc59\" class=\"wipix-element wipix-text-body-1\" style=\"text-align: center;\">T\u1ea1o n\u00ean website kh\u00f4ng ch\u1ec9 \u0111\u1eb9p \u2013 m\u00e0 c\u00f2n nhanh, m\u01b0\u1ee3t v\u00e0 khi\u1ebfn kh\u00e1ch h\u00e0ng kh\u00f4ng th\u1ec3 r\u1eddi m\u1eaft.<\/p>\n<div class=\"home-hero-button-wrapper btn-open-popup\" data-trigger=\"navbar-gradient\">\n<div class=\"ae-element_item-background pointer-events-off\">\u00a0<\/div>\n<div class=\"ae-element_item-content z-index-2\">\n<div class=\"button-primary-inside\">\n<div class=\"button-primary-text\" style=\"font-size: 24px; text-align: center;\"><strong>\ud83d\ude80 T\u1ea1o ngay &#8211; Mi\u1ec5n ph\u00ed<\/strong><\/div>\n<\/div>\n<\/div>\n<p>\u00a0<\/p>\n<\/div>\n<\/div>\n<p><!--div class=\"review-brand-title-block\">\n                                        \n\n<h1 class=\"heading-h1\"><span class=\"section-title-pd chay\">Ch\u00fang t\u00f4i <span class=\"brand-bd1 hero-website-highlight\">Thi\u1ebft K\u1ebf<\/span> Website<\/h1>\n\n\n       \n\n<h1 class=\"heading-h1\">\n  <span class=\"section-title-pd chay title-inline\">\n    App mobile Android, IOS\n    <img decoding=\"async\" src=\"\/pc\/images\/67ae33e17c6cb8b3eba599db_Icons (2).svg\" loading=\"lazy\" alt=\"App Icon\" class=\"tool-icon hero-app-icon\" \/>\n  <\/span>\n<\/h1>\n\n\n\n\n\n<h1 class=\"heading-h1\">\n  <span class=\"section-title-pd chay title-inline\">\n    D\u1ef1 \u00e1n chuy\u1ec3n \u0111\u1ed5i s\u1ed1\n    <img decoding=\"async\" src=\"\/pc\/images\/chuyendoiso.svg\" loading=\"lazy\" alt=\"Digital Icon\" class=\"tool-icon hero-digital-icon\" \/>\n  <\/span>\n<\/h1>\n\n\n \n                                    <\/div--><\/p>\n<div class=\"gurante-tag-block\"><img decoding=\"async\" class=\"aligncenter\" style=\"border-radius: 19px;\" src=\"\/global\/image\/home.avif\" alt=\"Qu\u1ed1c k\u1ef3 Vi\u1ec7t Nam\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"left-mockup-wrapper\" data-w-id=\"46831c1a-b5f6-1a7b-712a-74001026fe66\">\u00a0<\/div>\n<div class=\"right-mockup-wrapper\" data-w-id=\"ff46b211-9f46-ffc7-e14c-038671b76c2b\">\u00a0<\/div>\n<\/section>\n<p><br \/><script><br \/>\n    \/\/ ========== ULTIMATE WORLD-CLASS PARALLAX & INTERACTIVE EFFECTS ==========<\/p>\n<p>    document.addEventListener('DOMContentLoaded', function() {<br \/>\n        const heroWebsiteTitle = document.querySelector('.hero-website-title');<br \/>\n        const heroAppTitle = document.querySelector('.hero-app-title');<br \/>\n        const heroDigitalTitle = document.querySelector('.hero-digital-title');<br \/>\n        const heroWebsiteHighlight = document.querySelector('.hero-website-highlight');<br \/>\n        const heroAppIcon = document.querySelector('.hero-app-icon');<br \/>\n        const heroDigitalIcon = document.querySelector('.hero-digital-icon');<\/p>\n<p>        \/\/ Parallax scroll effect<br \/>\n        let lastScrollY = window.scrollY;<br \/>\n        let ticking = false;<\/p>\n<p>        function updateParallax() {<br \/>\n            const scrollY = window.scrollY;<br \/>\n            const windowHeight = window.innerHeight;<\/p>\n<p>            \/\/ Only apply parallax if scrolled past hero section<br \/>\n            if (scrollY < windowHeight * 0.8) {\n                \/\/ Calculate parallax offset based on scroll position\n                const parallaxOffset = scrollY * 0.2;\n                \n                \/\/ Apply subtle parallax to Website title (preserve CSS animations)\n                if (heroWebsiteTitle) {\n                    heroWebsiteTitle.style.setProperty('--parallax-y', `${parallaxOffset * 0.5}px`);\n                }\n                \n                \/\/ Apply parallax to App title\n                if (heroAppTitle) {\n                    heroAppTitle.style.setProperty('--parallax-y', `${parallaxOffset * 0.7}px`);\n                }\n                \n                \/\/ Apply parallax to Digital title\n                if (heroDigitalTitle) {\n                    heroDigitalTitle.style.setProperty('--parallax-y', `${parallaxOffset * 0.6}px`);\n                }\n                \n                \/\/ Apply parallax to icons\n                if (heroAppIcon) {\n                    heroAppIcon.style.setProperty('--parallax-y', `${parallaxOffset * 0.8}px`);\n                }\n                \n                if (heroDigitalIcon) {\n                    heroDigitalIcon.style.setProperty('--parallax-y', `${parallaxOffset * 0.75}px`);\n                }\n            }\n            \n            lastScrollY = scrollY;\n            ticking = false;\n        }\n        \n        function requestTick() {\n            if (!ticking) {\n                requestAnimationFrame(updateParallax);\n                ticking = true;\n            }\n        }\n        \n        window.addEventListener('scroll', requestTick, { passive: true });\n        \n        \/\/ Mouse move 3D tilt effect (subtle)\n        let mouseX = 0.5;\n        let mouseY = 0.5;\n        \n        document.addEventListener('mousemove', function(e) {\n            mouseX = e.clientX \/ window.innerWidth;\n            mouseY = e.clientY \/ window.innerHeight;\n        });\n        \n        function updateMouseTilt() {\n            \/\/ Calculate 3D tilt based on mouse position (subtle effect)\n            const tiltX = (mouseY - 0.5) * 3;\n            const tiltY = (mouseX - 0.5) * -3;\n            \n            if (heroWebsiteTitle) {\n                heroWebsiteTitle.style.setProperty('--tilt-x', `${tiltX}deg`);\n                heroWebsiteTitle.style.setProperty('--tilt-y', `${tiltY}deg`);\n            }\n            \n            if (heroAppTitle) {\n                heroAppTitle.style.setProperty('--tilt-x', `${tiltX * 0.8}deg`);\n                heroAppTitle.style.setProperty('--tilt-y', `${tiltY * 0.8}deg`);\n            }\n            \n            if (heroDigitalTitle) {\n                heroDigitalTitle.style.setProperty('--tilt-x', `${tiltX * 0.9}deg`);\n                heroDigitalTitle.style.setProperty('--tilt-y', `${tiltY * 0.9}deg`);\n            }\n            \n            requestAnimationFrame(updateMouseTilt);\n        }\n        \n        updateMouseTilt();\n        \n        \/\/ Intersection Observer for scroll animations\n        const observerOptions = {\n            threshold: 0.1,\n            rootMargin: '0px 0px -100px 0px'\n        };\n        \n        const observer = new IntersectionObserver(function(entries) {\n            entries.forEach(entry => {<br \/>\n                if (entry.isIntersecting) {<br \/>\n                    entry.target.style.animationPlayState = 'running';<br \/>\n                    entry.target.classList.add('is-visible');<br \/>\n                } else {<br \/>\n                    entry.target.style.animationPlayState = 'paused';<br \/>\n                }<br \/>\n            });<br \/>\n        }, observerOptions);<\/p>\n<p>        \/\/ Observe hero titles<br \/>\n        [heroWebsiteTitle, heroAppTitle, heroDigitalTitle].forEach(el => {<br \/>\n            if (el) observer.observe(el);<br \/>\n        });<\/p>\n<p>        \/\/ Add click\/tap interaction<br \/>\n        if (heroWebsiteHighlight) {<br \/>\n            heroWebsiteHighlight.addEventListener('click', function() {<br \/>\n                this.style.animation = 'heroTextPulse 0.5s ease';<br \/>\n                setTimeout(() => {<br \/>\n                    this.style.animation = '';<br \/>\n                }, 500);<br \/>\n            });<br \/>\n        }<\/p>\n<p>        if (heroAppIcon) {<br \/>\n            heroAppIcon.addEventListener('click', function() {<br \/>\n                this.style.animation = 'heroIconBounce 0.6s ease';<br \/>\n                setTimeout(() => {<br \/>\n                    this.style.animation = '';<br \/>\n                }, 600);<br \/>\n            });<br \/>\n        }<\/p>\n<p>        if (heroDigitalIcon) {<br \/>\n            heroDigitalIcon.addEventListener('click', function() {<br \/>\n                this.style.animation = 'heroIconBounce 0.6s ease';<br \/>\n                setTimeout(() => {<br \/>\n                    this.style.animation = '';<br \/>\n                }, 600);<br \/>\n            });<br \/>\n        }<\/p>\n<p>        \/\/ Add CSS for pulse animations<br \/>\n        const style = document.createElement('style');<br \/>\n        style.textContent = `<br \/>\n            @keyframes heroTextPulse {<br \/>\n                0%, 100% { transform: scale(1); }<br \/>\n                50% { transform: scale(1.1); }<br \/>\n            }<\/p>\n<p>            @keyframes heroIconBounce {<br \/>\n                0%, 100% { transform: translateY(0) scale(1); }<br \/>\n                25% { transform: translateY(-10px) scale(1.1); }<br \/>\n                50% { transform: translateY(-5px) scale(1.05); }<br \/>\n                75% { transform: translateY(-8px) scale(1.08); }<br \/>\n            }<\/p>\n<p>            .hero-website-title.is-visible,<br \/>\n            .hero-app-title.is-visible,<br \/>\n            .hero-digital-title.is-visible {<br \/>\n                animation-play-state: running;<br \/>\n            }<br \/>\n        `;<br \/>\n        document.head.appendChild(style);<br \/>\n    });<br \/>\n<\/script><\/p>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"rank_math_focus_keyword":"","rank_math_title":"","rank_math_description":"","rank_math_robots":"","rank_math_facebook_title":"","rank_math_facebook_description":"","rank_math_twitter_title":"","rank_math_twitter_description":"","footnotes":""},"class_list":["post-4938","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hiweb.vn\/blog\/wp-json\/wp\/v2\/pages\/4938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hiweb.vn\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hiweb.vn\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hiweb.vn\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hiweb.vn\/blog\/wp-json\/wp\/v2\/comments?post=4938"}],"version-history":[{"count":2,"href":"https:\/\/hiweb.vn\/blog\/wp-json\/wp\/v2\/pages\/4938\/revisions"}],"predecessor-version":[{"id":4940,"href":"https:\/\/hiweb.vn\/blog\/wp-json\/wp\/v2\/pages\/4938\/revisions\/4940"}],"wp:attachment":[{"href":"https:\/\/hiweb.vn\/blog\/wp-json\/wp\/v2\/media?parent=4938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}