{"id":10,"date":"2026-05-07T13:24:10","date_gmt":"2026-05-07T13:24:10","guid":{"rendered":"https:\/\/wpriverthemes.com\/agenio\/?page_id=10"},"modified":"2026-08-02T10:24:12","modified_gmt":"2026-08-02T10:24:12","slug":"home-version-one","status":"publish","type":"page","link":"https:\/\/gifttech.vn\/home-version-one\/","title":{"rendered":"Home Version One"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2768c42 e-con-full e-flex e-con e-parent\" data-id=\"2768c42\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a4f2f96 e-con-full e-flex e-con e-parent\" data-id=\"a4f2f96\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a5e66f elementor-widget elementor-widget-agenio_about_widget\" data-id=\"7a5e66f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"agenio_about_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <!-- wpr about area start -->\n        <section id=\"about\" class=\"wpr-about-area mb--16\">\n            <div class=\"container\">\n                <div class=\"section-inner bg-white border-1\">\n\n                    <!-- Top Area -->\n                    <div class=\"section-top-area\">\n                        <div class=\"section-title-area\">\n                            <p class=\"sub-title\">V\u1ec0 CH\u00daNG T\u00d4I<\/p>\n                            <h2 class=\"section-title second-font font-semi-bold text-normal quote\">\n                                Kh\u00f4ng r\u1eadp khu\u00f4n \u2014 ch\u00fang t\u00f4i thi\u1ebft k\u1ebf gi\u1ea3i ph\u00e1p ri\u00eang cho t\u1eebng doanh nghi\u1ec7p.                            <\/h2>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Bottom Content -->\n                    <div class=\"about-bottom-content square-dot\">\n\n                        <!-- Left Area -->\n                        <div class=\"left-area\">\n                            <ul>\n                                <li class=\"border-top\">\n                                    <p class=\"top-description\">K\u1ebeT QU\u1ea2 L\u00c0 MINH CH\u1ee8NG R\u00d5 NH\u1ea4T\n<br>\nM\u1ed7i con s\u1ed1 l\u00e0 m\u1ed9t d\u1ea5u \u1ea5n ni\u1ec1m tin m\u00e0 ch\u00fang t\u00f4i \u0111\u00e3 x\u00e2y d\u1ef1ng c\u00f9ng kh\u00e1ch h\u00e0ng.<\/p>\n                                <\/li>\n                                                                <li class=\"border-top with-icon\">\n                                    <div class=\"icon\">\n                                        <img decoding=\"async\" src=\"https:\/\/wpriverthemes.com\/agenio\/wp-content\/themes\/agenio\/assets\/images\/about\/icon\/01.svg\" alt=\"\">\n                                    <\/div>\n                                    <div class=\"text\">\n                                        <h2 class=\"h4 title\">\n                                            <span class=\"odometer second-font font-semi-bold\" data-count=\"7\">00<\/span>\n                                                                                            <span class=\"prefix\">  ng\u00e0y<\/span>\n                                                                                    <\/h2>\n                                        <p class=\"desc\">Th\u1eddi gian b\u00e0n giao trung b\u00ecnh m\u1ed7i d\u1ef1 \u00e1n<\/p>\n                                    <\/div>\n                                <\/li>\n                                                                <li class=\"border-top with-icon\">\n                                    <div class=\"icon\">\n                                        <img decoding=\"async\" src=\"https:\/\/wpriverthemes.com\/agenio\/wp-content\/themes\/agenio\/assets\/images\/about\/icon\/02.svg\" alt=\"\">\n                                    <\/div>\n                                    <div class=\"text\">\n                                        <h2 class=\"h4 title\">\n                                            <span class=\"odometer second-font font-semi-bold\" data-count=\"50\">00<\/span>\n                                                                                            +                                                                                    <\/h2>\n                                        <p class=\"desc\">Website \u0111\u00e3 thi\u1ebft k\u1ebf cho kh\u00e1ch h\u00e0ng trong &amp; ngo\u00e0i n\u01b0\u1edbc<\/p>\n                                    <\/div>\n                                <\/li>\n                                                                <li class=\"border-top with-icon\">\n                                    <div class=\"icon\">\n                                        <img decoding=\"async\" src=\"https:\/\/wpriverthemes.com\/agenio\/wp-content\/themes\/agenio\/assets\/images\/about\/icon\/03.svg\" alt=\"\">\n                                    <\/div>\n                                    <div class=\"text\">\n                                        <h2 class=\"h4 title\">\n                                            <span class=\"odometer second-font font-semi-bold\" data-count=\"4.9\">00<\/span>\n                                                                                            <span class=\"prefix\">\/ 5<\/span>\n                                                                                    <\/h2>\n                                        <p class=\"desc\">M\u1ee9c \u0111\u1ed9 h\u00e0i l\u00f2ng c\u1ee7a kh\u00e1ch h\u00e0ng<\/p>\n                                    <\/div>\n                                <\/li>\n                                                            <\/ul>\n                        <\/div>\n\n                        <!-- Right Area -->\n                        <div class=\"right-area\">\n                            <div class=\"image-area\">\n                                <img decoding=\"async\" src=\"https:\/\/gifttech.vn\/wp-content\/uploads\/2026\/07\/section_1.png\" width=\"802\" alt=\"\">\n                                <img decoding=\"async\" class=\"image-shape-right-bottom\" src=\"\" alt=\"\">\n                            <\/div>\n                        <\/div>\n\n                        <span class=\"square-shape top-left\"><\/span>\n                        <span class=\"square-shape bottom-left\"><\/span>\n                        <span class=\"square-shape top-right\"><\/span>\n                        <span class=\"square-shape bottom-right\"><\/span>\n                    <\/div>\n\n                    <!-- Bottom Shape -->\n                    <div class=\"bottom-shape-area square-dot\">\n                        <img decoding=\"async\" src=\"https:\/\/gifttech.vn\/wp-content\/themes\/agenio\/assets\/images\/about\/shape-02.svg\" alt=\"\">\n                        <span class=\"square-shape top-left\"><\/span>\n                        <span class=\"square-shape bottom-left\"><\/span>\n                        <span class=\"square-shape top-right\"><\/span>\n                        <span class=\"square-shape bottom-right\"><\/span>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n        <\/section>\n        <!-- wpr about area end -->\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7afe673 e-con-full e-flex e-con e-parent\" data-id=\"7afe673\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-00e736a elementor-widget elementor-widget-html\" data-id=\"00e736a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"services\">\r\n  <div class=\"decor\" aria-hidden=\"true\">\r\n    <div class=\"blur-circle c1\"><\/div>\r\n    <div class=\"blur-circle c2\"><\/div>\r\n    <div class=\"dot-grid\"><\/div>\r\n    <div class=\"dot-grid right\"><\/div>\r\n    <div class=\"small-circle blue\"><\/div>\r\n    <div class=\"small-circle green\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"services-header\">\r\n    <span class=\"badge\"><span class=\"badge-dot\"><\/span>D\u1ecaCH V\u1ee4 C\u1ee6A CH\u00daNG T\u00d4I<\/span>\r\n    <h2>Gi\u1ea3i ph\u00e1p Website <span class=\"gradient\">to\u00e0n di\u1ec7n<\/span><br>cho doanh nghi\u1ec7p hi\u1ec7n \u0111\u1ea1i<\/h2>\r\n    <p>Ch\u00fang t\u00f4i cung c\u1ea5p c\u00e1c gi\u1ea3i ph\u00e1p thi\u1ebft k\u1ebf website chuy\u00ean nghi\u1ec7p, \u0111\u00e1p \u1ee9ng m\u1ecdi nhu c\u1ea7u c\u1ee7a doanh nghi\u1ec7p<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"content\">\r\n    <div class=\"left-panel\"><\/div>\r\n    <div class=\"right-panel-wrap\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"cta-bar\">\r\n    <span class=\"cta-icon\" id=\"cta-headphone\"><\/span>\r\n    <div class=\"cta-text\">\r\n      <strong>T\u01b0 v\u1ea5n gi\u1ea3i ph\u00e1p ph\u00f9 h\u1ee3p<\/strong>\r\n      <span>Li\u00ean h\u1ec7 ngay v\u1edbi ch\u00fang t\u00f4i \u0111\u1ec3 \u0111\u01b0\u1ee3c t\u01b0 v\u1ea5n mi\u1ec5n ph\u00ed<\/span>\r\n    <\/div>\r\n    <span class=\"cta-arrow\" id=\"cta-arrow\"><\/span>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n  const services = [\r\n    {\r\n      id: 1, number: \"01\", icon: \"monitor\",\r\n      title: \"Thi\u1ebft k\u1ebf Website\",\r\n      desc: \"Website chu\u1ea9n SEO, t\u1ed1c \u0111\u1ed9 cao, giao di\u1ec7n \u0111\u1eb9p, t\u1ed1i \u01b0u tr\u1ea3i nghi\u1ec7m.\",\r\n      panelBadge: \"D\u1ecaCH V\u1ee4 N\u1ed4I B\u1eacT\",\r\n      panelTitle: \"Thi\u1ebft k\u1ebf Website\",\r\n      panelDesc: \"Ch\u00fang t\u00f4i t\u1ea1o ra nh\u1eefng website chuy\u00ean nghi\u1ec7p, chu\u1ea9n SEO, t\u1ed1c \u0111\u1ed9 cao, giao di\u1ec7n \u0111\u1eb9p v\u00e0 t\u1ed1i \u01b0u tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb.\",\r\n      checklist: [\"Thi\u1ebft k\u1ebf UI\/UX hi\u1ec7n \u0111\u1ea1i\", \"Website chu\u1ea9n Responsive\", \"T\u1ed1i \u01b0u SEO\", \"T\u1ed1c \u0111\u1ed9 t\u1ea3i trang nhanh\", \"B\u1ea3o m\u1eadt v\u00e0 d\u1ec5 d\u00e0ng qu\u1ea3n tr\u1ecb\"],\r\n      image: \"service1.png\",\r\n      ctaText: \"Xem d\u1ef1 \u00e1n m\u1eabu\"\r\n    },\r\n    {\r\n      id: 2, number: \"02\", icon: \"globe\",\r\n      title: \"Website m\u1ecdi l\u0129nh v\u1ef1c\",\r\n      desc: \"\u0110a d\u1ea1ng gi\u1ea3i ph\u00e1p website cho m\u1ecdi l\u0129nh v\u1ef1c, ng\u00e0nh ngh\u1ec1.\",\r\n      panelBadge: \"D\u1ecaCH V\u1ee4 N\u1ed4I B\u1eacT\",\r\n      panelTitle: \"Website m\u1ecdi l\u0129nh v\u1ef1c\",\r\n      panelDesc: \"Ch\u00fang t\u00f4i thi\u1ebft k\u1ebf website cho \u0111a d\u1ea1ng ng\u00e0nh ngh\u1ec1: b\u1ea5t \u0111\u1ed9ng s\u1ea3n, th\u1eddi trang, gi\u00e1o d\u1ee5c, \u1ea9m th\u1ef1c, y t\u1ebf, spa \u2014 m\u1ed7i l\u0129nh v\u1ef1c m\u1ed9t phong c\u00e1ch giao di\u1ec7n ri\u00eang bi\u1ec7t.\",\r\n      checklist: [\"Giao di\u1ec7n ph\u00f9 h\u1ee3p t\u1eebng ng\u00e0nh ngh\u1ec1\", \"\u0110a d\u1ea1ng m\u1eabu thi\u1ebft k\u1ebf c\u00f3 s\u1eb5n\", \"T\u1ed1i \u01b0u chuy\u1ec3n \u0111\u1ed5i kh\u00e1ch h\u00e0ng\", \"D\u1ec5 d\u00e0ng m\u1edf r\u1ed9ng t\u00ednh n\u0103ng\", \"H\u1ed7 tr\u1ee3 \u0111a n\u1ec1n t\u1ea3ng thi\u1ebft b\u1ecb\"],\r\n      image: \"service2.png\",\r\n      ctaText: \"Xem d\u1ef1 \u00e1n m\u1eabu\"\r\n    },\r\n    {\r\n      id: 3, number: \"03\", icon: \"gear\",\r\n      title: \"Thi\u1ebft k\u1ebf theo y\u00eau c\u1ea7u\",\r\n      desc: \"Thi\u1ebft k\u1ebf ri\u00eang theo y\u00eau c\u1ea7u, \u0111\u00e1p \u1ee9ng \u0111\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng.\",\r\n      panelBadge: \"D\u1ecaCH V\u1ee4 N\u1ed4I B\u1eacT\",\r\n      panelTitle: \"Thi\u1ebft k\u1ebf theo y\u00eau c\u1ea7u\",\r\n      panelDesc: \"\u0110\u1ed9i ng\u0169 developer c\u1ee7a ch\u00fang t\u00f4i x\u00e2y d\u1ef1ng website theo \u0111\u00fang wireframe, flowchart v\u00e0 y\u00eau c\u1ea7u ri\u00eang c\u1ee7a doanh nghi\u1ec7p, t\u1eeb thi\u1ebft k\u1ebf \u0111\u1ebfn tri\u1ec3n khai.\",\r\n      checklist: [\"T\u01b0 v\u1ea5n & ph\u00e1c th\u1ea3o wireframe\", \"L\u1eadp tr\u00ecnh ch\u1ee9c n\u0103ng tu\u1ef3 ch\u1ec9nh\", \"T\u00edch h\u1ee3p c\u01a1 s\u1edf d\u1eef li\u1ec7u & API\", \"Ki\u1ec3m th\u1eed k\u1ef9 l\u01b0\u1ee1ng tr\u01b0\u1edbc b\u00e0n giao\", \"B\u00e0n giao m\u00e3 ngu\u1ed3n \u0111\u1ea7y \u0111\u1ee7\"],\r\n      image: \"service3.png\",\r\n      ctaText: \"Xem d\u1ef1 \u00e1n m\u1eabu\"\r\n    },\r\n    {\r\n      id: 4, number: \"04\", icon: \"shield\",\r\n      title: \"B\u1ea3o tr\u00ec & H\u1ed7 tr\u1ee3\",\r\n      desc: \"D\u1ecbch v\u1ee5 b\u1ea3o tr\u00ec, n\u00e2ng c\u1ea5p v\u00e0 h\u1ed7 tr\u1ee3 k\u1ef9 thu\u1eadt chuy\u00ean nghi\u1ec7p.\",\r\n      panelBadge: \"D\u1ecaCH V\u1ee4 N\u1ed4I B\u1eacT\",\r\n      panelTitle: \"B\u1ea3o tr\u00ec & H\u1ed7 tr\u1ee3\",\r\n      panelDesc: \"Gi\u00e1m s\u00e1t h\u1ec7 th\u1ed1ng 24\/7, sao l\u01b0u \u0111\u1ecbnh k\u1ef3 v\u00e0 h\u1ed7 tr\u1ee3 k\u1ef9 thu\u1eadt nhanh ch\u00f3ng, \u0111\u1ea3m b\u1ea3o website v\u1eadn h\u00e0nh \u1ed5n \u0111\u1ecbnh v\u1edbi uptime 99.99%.\",\r\n      checklist: [\"Sao l\u01b0u d\u1eef li\u1ec7u \u0111\u1ecbnh k\u1ef3\", \"Gi\u00e1m s\u00e1t & b\u1ea3o m\u1eadt 24\/7\", \"T\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t website\", \"H\u1ed7 tr\u1ee3 k\u1ef9 thu\u1eadt nhanh ch\u00f3ng\", \"C\u1eadp nh\u1eadt & v\u00e1 l\u1ed7i th\u01b0\u1eddng xuy\u00ean\"],\r\n      image: \"service4.png\",\r\n      ctaText: \"Li\u00ean h\u1ec7 h\u1ed7 tr\u1ee3\"\r\n    }\r\n  ];\r\n\r\n  const icons = {\r\n    monitor: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>',\r\n    globe: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><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\"\/><\/svg>',\r\n    gear: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z\"\/><\/svg>',\r\n    shield: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>',\r\n    arrow: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>',\r\n    check: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>',\r\n    chevronLeft: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>',\r\n    chevronRight: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>',\r\n    headphone: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 18v-6a9 9 0 0 1 18 0v6\"\/><path d=\"M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z\"\/><\/svg>'\r\n  };\r\n\r\n  let activeIndex = 0;\r\n  const leftPanel = document.querySelector('.left-panel');\r\n\r\n  function panelContentHTML(s) {\r\n    return `\r\n      <div class=\"panel-left\">\r\n        <span class=\"panel-badge\">${s.panelBadge}<\/span>\r\n        <h3 class=\"panel-title\">${s.panelTitle}<\/h3>\r\n        <div class=\"panel-underline\"><\/div>\r\n        <p class=\"panel-desc\">${s.panelDesc}<\/p>\r\n        <ul class=\"panel-checklist\">\r\n          ${s.checklist.map(item => `<li><span class=\"check-icon\">${icons.check}<\/span><span>${item}<\/span><\/li>`).join('')}\r\n        <\/ul>\r\n        <button class=\"panel-cta\">${s.ctaText}${icons.arrow}<\/button>\r\n      <\/div>\r\n      <div class=\"panel-right\">\r\n        <img decoding=\"async\" class=\"panel-image\" src=\"${s.image}\" alt=\"${s.title}\">\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  const rightWrap = document.querySelector('.right-panel-wrap');\r\n  function renderRightPanel() {\r\n    const s = services[activeIndex];\r\n    rightWrap.innerHTML = `\r\n      <div class=\"right-panel\">\r\n        ${panelContentHTML(s)}\r\n      <\/div>\r\n      <button class=\"nav-arrow prev\" aria-label=\"D\u1ecbch v\u1ee5 tr\u01b0\u1edbc\">${icons.chevronLeft}<\/button>\r\n      <button class=\"nav-arrow next\" aria-label=\"D\u1ecbch v\u1ee5 ti\u1ebfp theo\">${icons.chevronRight}<\/button>\r\n      <div class=\"panel-dots\">\r\n        ${services.map((_, i) => `<button class=\"dot ${i === activeIndex ? 'active' : ''}\" data-index=\"${i}\" aria-label=\"D\u1ecbch v\u1ee5 ${i + 1}\"><\/button>`).join('')}\r\n      <\/div>\r\n    `;\r\n  }\r\n  renderRightPanel();\r\n\r\n  function renderLeftPanel() {\r\n    leftPanel.innerHTML = services.map((s, i) => `\r\n      <div class=\"card-wrap\">\r\n        <button class=\"service-card ${i === activeIndex ? 'active' : ''}\" data-index=\"${i}\">\r\n          <span class=\"card-icon\">${icons[s.icon]}<\/span>\r\n          <span class=\"card-text\">\r\n            <span class=\"card-number\">${s.number}<\/span>\r\n            <span class=\"card-title\">${s.title}<\/span>\r\n            <span class=\"card-desc\">${s.desc}<\/span>\r\n          <\/span>\r\n          <span class=\"card-arrow\">${icons.arrow}<\/span>\r\n        <\/button>\r\n        <div class=\"accordion-body ${i === activeIndex ? 'active' : ''}\">\r\n          <div class=\"accordion-inner\">${panelContentHTML(s)}<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    `).join('');\r\n  }\r\n  renderLeftPanel();\r\n  document.getElementById('cta-headphone').innerHTML = icons.headphone;\r\n  document.getElementById('cta-arrow').innerHTML = icons.arrow;\r\n\r\n  function clampIndex(i, len) {\r\n    return ((i % len) + len) % len;\r\n  }\r\n\r\n  function updateActiveCards() {\r\n    leftPanel.querySelectorAll('.service-card').forEach((card, i) => {\r\n      card.classList.toggle('active', i === activeIndex);\r\n    });\r\n    leftPanel.querySelectorAll('.accordion-body').forEach((body, i) => {\r\n      body.classList.toggle('active', i === activeIndex);\r\n    });\r\n  }\r\n\r\n  function setActive(index) {\r\n    const next = clampIndex(index, services.length);\r\n    if (next === activeIndex) return;\r\n    activeIndex = next;\r\n    updateActiveCards();\r\n    crossFadeRightPanel();\r\n  }\r\n\r\n  function crossFadeRightPanel() {\r\n    const panel = rightWrap.querySelector('.right-panel');\r\n    if (!panel) { renderRightPanel(); return; }\r\n    panel.style.opacity = '0';\r\n    setTimeout(() => {\r\n      renderRightPanel();\r\n      const newPanel = rightWrap.querySelector('.right-panel');\r\n      newPanel.style.opacity = '0';\r\n      requestAnimationFrame(() => { newPanel.style.opacity = '1'; });\r\n    }, 125);\r\n  }\r\n\r\n  leftPanel.addEventListener('click', (e) => {\r\n    const card = e.target.closest('.service-card');\r\n    if (card) setActive(Number(card.dataset.index));\r\n  });\r\n\r\n  rightWrap.addEventListener('click', (e) => {\r\n    if (e.target.closest('.nav-arrow.prev')) { setActive(activeIndex - 1); return; }\r\n    if (e.target.closest('.nav-arrow.next')) { setActive(activeIndex + 1); return; }\r\n    const dot = e.target.closest('.dot');\r\n    if (dot) setActive(Number(dot.dataset.index));\r\n  });\r\n\r\n<\/script>\r\n<style>\r\n  :root {\r\n    --blue: #2563EB;\r\n    --blue-light: #60A5FA;\r\n    --blue-bg: #EFF6FF;\r\n    --dark: #0F172A;\r\n    --gray: #64748B;\r\n  }\r\n\r\n  \/* ANCHOR: reset *\/\r\n  * { margin:0; padding:0; box-sizing:border-box; }\r\n  body {\r\n    font-family: \"Segoe UI\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\r\n    color: var(--dark);\r\n    background:#fff;\r\n  }\r\n  img { max-width:100%; display:block; }\r\n  button { font-family:inherit; cursor:pointer; border:none; background:none; }\r\n  ul { list-style:none; }\r\n\r\n  .services {\r\n    max-width:1440px;\r\n    margin:0 auto;\r\n    padding:120px 24px;\r\n    position:relative;\r\n    overflow:hidden;\r\n    background:linear-gradient(180deg, #FFFFFF, #F7FBFF);\r\n  }\r\n\r\n  .decor { position:absolute; inset:0; pointer-events:none; z-index:0; }\r\n  .decor .blur-circle {\r\n    position:absolute;\r\n    border-radius:50%;\r\n    background:var(--blue);\r\n    opacity:.08;\r\n    filter:blur(60px);\r\n  }\r\n  .decor .blur-circle.c1 { width:320px; height:320px; top:-80px; left:-100px; }\r\n  .decor .blur-circle.c2 { width:240px; height:240px; top:40px; left:280px; background:var(--blue-light); }\r\n  .decor .dot-grid {\r\n    position:absolute;\r\n    top:120px;\r\n    left:80px;\r\n    width:120px;\r\n    height:80px;\r\n    background-image:radial-gradient(circle, var(--blue) 1.5px, transparent 1.5px);\r\n    background-size:16px 16px;\r\n    opacity:.15;\r\n  }\r\n  .decor .dot-grid.right { left:auto; right:80px; top:160px; }\r\n  .decor .small-circle { position:absolute; border-radius:50%; }\r\n  .decor .small-circle.blue { width:12px; height:12px; background:#3B82F6; top:170px; left:250px; opacity:.7; }\r\n  .decor .small-circle.green { width:16px; height:16px; background:#84CC16; top:150px; right:120px; opacity:.7; }\r\n\r\n  .badge {\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:8px;\r\n    padding:8px 20px;\r\n    background:var(--blue-bg);\r\n    color:var(--blue);\r\n    font-size:14px;\r\n    font-weight:600;\r\n    border-radius:999px;\r\n    margin-bottom:24px;\r\n  }\r\n  .badge-dot { width:6px; height:6px; border-radius:50%; background:var(--blue); }\r\n\r\n  .services-header {\r\n    text-align:center;\r\n    margin-bottom:64px;\r\n    position:relative;\r\n    z-index:1;\r\n  }\r\n  .services-header h2 {\r\n    font-size:56px;\r\n    font-weight:800;\r\n    line-height:1.15;\r\n    letter-spacing:-2px;\r\n    color:var(--dark);\r\n  }\r\n  .services-header h2 .gradient {\r\n    background:linear-gradient(90deg, var(--blue), var(--blue-light));\r\n    -webkit-background-clip:text;\r\n    background-clip:text;\r\n    color:transparent;\r\n  }\r\n  .services-header p {\r\n    max-width:620px;\r\n    margin:24px auto 0;\r\n    font-size:20px;\r\n    font-weight:400;\r\n    line-height:1.8;\r\n    color:var(--gray);\r\n  }\r\n\r\n  .content {\r\n    display:flex;\r\n    gap:32px;\r\n    align-items:flex-start;\r\n    position:relative;\r\n    z-index:1;\r\n  }\r\n  .left-panel {\r\n    width:30%;\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:20px;\r\n  }\r\n  .right-panel-wrap { width:70%; }\r\n\r\n  .card-wrap { display:flex; flex-direction:column; }\r\n  .service-card {\r\n    width:100%;\r\n    min-height:132px;\r\n    background:#fff;\r\n    border-radius:24px;\r\n    padding:28px;\r\n    box-shadow:0 15px 45px rgba(0,0,0,.06);\r\n    display:flex;\r\n    align-items:center;\r\n    gap:22px;\r\n    text-align:left;\r\n    border:1px solid transparent;\r\n    border-left:6px solid transparent;\r\n    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1);\r\n  }\r\n  .service-card:hover { transform:translateY(-3px); }\r\n  .service-card.active {\r\n    border-color:#3B82F6;\r\n    border-left-color:var(--blue);\r\n    box-shadow:0 20px 50px rgba(37,99,235,.12);\r\n    transform:translateY(-3px);\r\n  }\r\n  .card-icon {\r\n    flex-shrink:0;\r\n    width:72px;\r\n    height:72px;\r\n    border-radius:50%;\r\n    background:var(--blue-bg);\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    color:var(--blue);\r\n    transition: color .35s cubic-bezier(.22,.61,.36,1), background-color .35s cubic-bezier(.22,.61,.36,1);\r\n  }\r\n  .card-icon svg { width:32px; height:32px; }\r\n  .service-card.active .card-icon { color:#fff; background:var(--blue); }\r\n  .card-text { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }\r\n  .card-number { font-size:26px; font-weight:700; color:var(--blue-light); line-height:1; }\r\n  .card-title { font-size:28px; font-weight:700; color:var(--dark); }\r\n  .card-desc { font-size:16px; color:var(--gray); line-height:1.4; }\r\n  .card-arrow {\r\n    flex-shrink:0;\r\n    width:36px;\r\n    height:36px;\r\n    border-radius:50%;\r\n    border:1.5px solid #E2E8F0;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    color:var(--gray);\r\n    transition: transform .35s cubic-bezier(.22,.61,.36,1), color .35s, border-color .35s;\r\n  }\r\n  .card-arrow svg { width:18px; height:18px; }\r\n  .service-card:hover .card-arrow,\r\n  .service-card.active .card-arrow {\r\n    color:var(--blue);\r\n    border-color:var(--blue);\r\n    transform:translateX(4px);\r\n  }\r\n\r\n  .right-panel {\r\n    background:#fff;\r\n    border-radius:28px;\r\n    box-shadow:0 20px 60px rgba(15,23,42,.08);\r\n    padding:48px;\r\n    display:flex;\r\n    justify-content:space-between;\r\n    gap:40px;\r\n    opacity:1;\r\n    transition: opacity .125s ease;\r\n  }\r\n  .panel-left { width:40%; display:flex; flex-direction:column; }\r\n  .panel-badge {\r\n    display:inline-block;\r\n    align-self:flex-start;\r\n    padding:8px 18px;\r\n    background:var(--blue-bg);\r\n    color:var(--blue);\r\n    font-size:13px;\r\n    font-weight:600;\r\n    border-radius:999px;\r\n    margin-bottom:20px;\r\n  }\r\n  .panel-title { font-size:44px; font-weight:700; color:var(--dark); line-height:1.2; }\r\n  .panel-underline { width:70px; height:4px; background:var(--blue); border-radius:2px; margin:16px 0 20px; }\r\n  .panel-desc { font-size:18px; line-height:1.8; color:var(--gray); margin-bottom:24px; }\r\n  .panel-checklist { display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }\r\n  .panel-checklist li { display:flex; align-items:center; gap:12px; font-size:16px; color:var(--dark); }\r\n  .check-icon {\r\n    width:22px; height:22px; border-radius:50%;\r\n    background:var(--blue); display:flex; align-items:center; justify-content:center;\r\n    flex-shrink:0;\r\n  }\r\n  .check-icon svg { width:12px; height:12px; color:#fff; }\r\n  .panel-cta {\r\n    align-self:flex-start;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    padding:16px 28px;\r\n    border-radius:999px;\r\n    background:linear-gradient(90deg, var(--blue), var(--blue-light));\r\n    color:#fff;\r\n    font-size:16px;\r\n    font-weight:600;\r\n    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;\r\n  }\r\n  .panel-cta svg { width:18px; height:18px; transition: transform .3s; }\r\n  .panel-cta:hover { transform:scale(1.03); box-shadow:0 10px 24px rgba(37,99,235,.3); }\r\n  .panel-cta:hover svg { transform:translateX(4px); }\r\n  .right-panel-wrap { position:relative; }\r\n  .panel-right { width:60%; position:relative; display:flex; align-items:center; justify-content:center; }\r\n  .nav-arrow {\r\n    position:absolute;\r\n    top:50%;\r\n    transform:translateY(-50%);\r\n    width:44px; height:44px;\r\n    border-radius:50%;\r\n    background:#fff;\r\n    box-shadow:0 8px 20px rgba(15,23,42,.12);\r\n    display:flex; align-items:center; justify-content:center;\r\n    color:var(--dark);\r\n    transition: background-color .3s, color .3s;\r\n  }\r\n  .nav-arrow:hover { background:var(--blue); color:#fff; }\r\n  .nav-arrow.prev { left:-8px; }\r\n  .nav-arrow.next { right:-8px; }\r\n  .nav-arrow svg { width:20px; height:20px; }\r\n  .panel-dots {\r\n    position:absolute;\r\n    bottom:-32px;\r\n    left:50%;\r\n    transform:translateX(-50%);\r\n    display:flex;\r\n    gap:8px;\r\n  }\r\n  .dot {\r\n    width:8px; height:8px; border-radius:50%;\r\n    background:#CBD5E1;\r\n    transition: transform .3s, background-color .3s;\r\n  }\r\n  .dot.active { background:var(--blue); transform:scale(1.4); }\r\n  .panel-image {\r\n    width:100%;\r\n    border-radius:16px;\r\n    animation: float 4s ease-in-out infinite;\r\n    filter: drop-shadow(0 20px 30px rgba(15,23,42,.15));\r\n  }\r\n  @keyframes float {\r\n    0%, 100% { transform:translateY(0); }\r\n    50% { transform:translateY(-6px); }\r\n  }\r\n\r\n  .cta-bar {\r\n    max-width:900px;\r\n    margin:80px auto 0;\r\n    display:flex;\r\n    align-items:center;\r\n    gap:20px;\r\n    background:#fff;\r\n    border:1px solid #E2E8F0;\r\n    border-radius:20px;\r\n    padding:24px 32px;\r\n    box-shadow:0 10px 30px rgba(15,23,42,.05);\r\n    position:relative;\r\n    z-index:1;\r\n    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;\r\n  }\r\n  .cta-bar:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(15,23,42,.08); }\r\n  .cta-icon {\r\n    width:48px; height:48px; border-radius:50%;\r\n    background:var(--blue-bg); color:var(--blue);\r\n    display:flex; align-items:center; justify-content:center;\r\n    flex-shrink:0;\r\n  }\r\n  .cta-icon svg { width:22px; height:22px; }\r\n  .cta-text { flex:1; display:flex; flex-direction:column; gap:4px; }\r\n  .cta-text strong { font-size:17px; color:var(--dark); }\r\n  .cta-text span { font-size:14px; color:var(--gray); }\r\n  .cta-arrow {\r\n    width:36px; height:36px; border-radius:50%;\r\n    border:1.5px solid #E2E8F0;\r\n    display:flex; align-items:center; justify-content:center;\r\n    color:var(--gray);\r\n    transition: transform .3s cubic-bezier(.22,.61,.36,1), color .3s, border-color .3s;\r\n  }\r\n  .cta-bar:hover .cta-arrow { color:var(--blue); border-color:var(--blue); transform:translateX(4px); }\r\n\r\n  @media (max-width:1023px) {\r\n    .content { flex-direction:column; }\r\n    .left-panel, .right-panel-wrap { width:100%; }\r\n    .right-panel { flex-direction:column; }\r\n    .panel-left, .panel-right { width:100%; }\r\n    .panel-right { margin-top:32px; }\r\n  }\r\n  @media (max-width:767px) {\r\n    .services { padding:80px 16px; }\r\n    .services-header h2 { font-size:36px; letter-spacing:-1px; }\r\n    .services-header p { font-size:16px; }\r\n    .right-panel-wrap { display:none; }\r\n    .accordion-body {\r\n      display:grid;\r\n      grid-template-rows:0fr;\r\n      opacity:0;\r\n      transition: grid-template-rows .35s cubic-bezier(.22,.61,.36,1), opacity .35s;\r\n    }\r\n    .accordion-body.active { grid-template-rows:1fr; opacity:1; margin-top:16px; }\r\n    .accordion-body .accordion-inner { overflow:hidden; }\r\n    .accordion-body .panel-left, .accordion-body .panel-right { width:100%; }\r\n    .accordion-body .panel-right { margin-top:20px; }\r\n  }\r\n  @media (min-width:768px) {\r\n    .accordion-body { display:none; }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cb39840 e-con-full e-flex e-con e-parent\" data-id=\"cb39840\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0087700 elementor-widget elementor-widget-html\" data-id=\"0087700\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"vision-wrapper\">\r\n  <div class=\"vision-pin\">\r\n    <img class=\"vision-frame\" data-phase=\"1\" src=\"vision1.png\" alt=\"T\u1ea7m nh\u00ecn \u2014 ki\u1ebfn t\u1ea1o gi\u1ea3i ph\u00e1p s\u1ed1 v\u00ec m\u1ed9t t\u01b0\u01a1ng lai b\u1ec1n v\u1eefng\" fetchpriority=\"high\" decoding=\"async\">\r\n    <img class=\"vision-frame\" data-phase=\"2\" src=\"vision2.png\" alt=\"\" decoding=\"async\">\r\n    <img class=\"vision-frame\" data-phase=\"3\" src=\"vision3.png\" alt=\"\" decoding=\"async\">\r\n    <img class=\"vision-frame\" data-phase=\"4\" src=\"vision4.png\" alt=\"\" decoding=\"async\">\r\n    <img class=\"vision-frame\" data-phase=\"5\" src=\"vision5.png\" alt=\"\" decoding=\"async\">\r\n    <img class=\"vision-frame\" data-phase=\"6\" src=\"vision6.png\" alt=\"\" decoding=\"async\">\r\n    <button class=\"vision-cta\" aria-label=\"Kh\u00e1m ph\u00e1 ngay\"><\/button>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script src=\"gsap.min.js\"><\/script>\r\n<script src=\"ScrollTrigger.min.js\"><\/script>\r\n<script>\r\n  gsap.registerPlugin(ScrollTrigger);\r\n\r\n  const frames = gsap.utils.toArray('.vision-frame');\r\n  const cta = document.querySelector('.vision-cta');\r\n\r\n  function crossfade(tl, position, duration, outFrame, inFrame, blurPx) {\r\n    tl.to(outFrame,\r\n      { opacity: 0, scale: 0.97, filter: `blur(${blurPx}px)`, duration, ease: 'power2.out' },\r\n      position\r\n    );\r\n    tl.fromTo(inFrame,\r\n      { opacity: 0, scale: 1.04, filter: `blur(${blurPx}px)` },\r\n      { opacity: 1, scale: 1, filter: 'blur(0px)', duration, ease: 'power2.out' },\r\n      position\r\n    );\r\n  }\r\n\r\n  const tl = gsap.timeline({\r\n    scrollTrigger: {\r\n      trigger: '.vision-wrapper',\r\n      start: 'top top',\r\n      end: 'bottom bottom',\r\n      pin: '.vision-pin',\r\n      scrub: 0.6,\r\n      anticipatePin: 1,\r\n      invalidateOnRefresh: true\r\n    }\r\n  });\r\n\r\n  crossfade(tl, 0.15, 0.15, frames[0], frames[1], 6);\r\n  crossfade(tl, 0.30, 0.20, frames[1], frames[2], 6);\r\n  crossfade(tl, 0.50, 0.20, frames[2], frames[3], 8);\r\n  crossfade(tl, 0.70, 0.15, frames[3], frames[4], 6);\r\n  tl.to(cta, { opacity: 1, duration: 0.15, ease: 'power2.out' }, 0.70);\r\n  tl.set(cta, { pointerEvents: 'auto' }, 0.70);\r\n  crossfade(tl, 0.85, 0.15, frames[4], frames[5], 6);\r\n  tl.to(cta, { opacity: 0, duration: 0.15, ease: 'power2.out' }, 0.85);\r\n  tl.set(cta, { pointerEvents: 'none' }, 0.85);\r\n<\/script>\r\n\r\n<style>\r\n  * { margin:0; padding:0; box-sizing:border-box; }\r\n  html, body {\r\n    width:100%;\r\n    overflow-x:hidden;\r\n    background:#F8FBFF;\r\n    color:#0F172A;\r\n    font-family:\"Segoe UI\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\r\n  }\r\n  img { max-width:none; display:block; }\r\n  button { font-family:inherit; }\r\n\r\n  .vision-wrapper { position:relative; height:320vh; }\r\n  .vision-pin { position:relative; height:100vh; width:100%; overflow:hidden; background:#F8FBFF; }\r\n  .vision-frame {\r\n    position:absolute;\r\n    inset:0;\r\n    width:100%;\r\n    height:100%;\r\n    object-fit:cover;\r\n    opacity:0;\r\n    will-change:opacity, transform, filter;\r\n  }\r\n  .vision-frame[data-phase=\"1\"] { opacity:1; }\r\n  .vision-cta {\r\n    position:absolute;\r\n    left:40.9%;\r\n    top:57.1%;\r\n    width:20.7%;\r\n    height:6.1%;\r\n    background:transparent;\r\n    border:none;\r\n    cursor:pointer;\r\n    opacity:0;\r\n    pointer-events:none;\r\n    -webkit-tap-highlight-color:transparent;\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0cb74db e-con-full e-flex e-con e-parent\" data-id=\"0cb74db\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ebdde19 elementor-widget elementor-widget-html\" data-id=\"ebdde19\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"process-desktop\">\r\n  <section class=\"process-wrapper\">\r\n    <div class=\"process-pin\">\r\n      <div class=\"process-decor\" aria-hidden=\"true\">\r\n        <div class=\"process-decor__blur process-decor__blur--c1\"><\/div>\r\n        <div class=\"process-decor__blur process-decor__blur--c2\"><\/div>\r\n        <div class=\"process-decor__dotgrid\"><\/div>\r\n        <div class=\"process-decor__glowline\"><\/div>\r\n        <div class=\"process-decor__particle process-decor__particle--p1\"><\/div>\r\n        <div class=\"process-decor__particle process-decor__particle--p2\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"process-header\">\r\n        <span class=\"process-header__badge\">QUY TR\u00ccNH L\u00c0M VI\u1ec6C<\/span>\r\n        <h2 class=\"process-header__heading\">Ch\u00fang t\u00f4i bi\u1ebfn <span class=\"process-header__gradient\">\u00fd t\u01b0\u1edfng<\/span><br>th\u00e0nh s\u1ea3n ph\u1ea9m s\u1ed1<\/h2>\r\n        <p class=\"process-header__desc\">M\u1ed9t quy tr\u00ecnh r\u00f5 r\u00e0ng \u2013 minh b\u1ea1ch \u2013 t\u1ed1i \u01b0u \u0111\u1ec3 t\u1ea1o ra nh\u1eefng s\u1ea3n ph\u1ea9m ch\u1ea5t l\u01b0\u1ee3ng v\u00e0 mang l\u1ea1i gi\u00e1 tr\u1ecb th\u1ef1c cho doanh nghi\u1ec7p.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"process-timeline\"><\/div>\r\n\r\n      <div class=\"process-content\">\r\n        <div class=\"process-card-stack\"><\/div>\r\n        <div class=\"process-illustration-stack\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<\/div>\r\n\r\n<div class=\"process-mobile\">\r\n  <div class=\"process-mobile__header\">\r\n    <span class=\"process-header__badge\">QUY TR\u00ccNH L\u00c0M VI\u1ec6C<\/span>\r\n    <h2 class=\"process-header__heading\" style=\"font-size:36px;\">Ch\u00fang t\u00f4i bi\u1ebfn <span class=\"process-header__gradient\">\u00fd t\u01b0\u1edfng<\/span><br>th\u00e0nh s\u1ea3n ph\u1ea9m s\u1ed1<\/h2>\r\n    <p class=\"process-header__desc\">M\u1ed9t quy tr\u00ecnh r\u00f5 r\u00e0ng \u2013 minh b\u1ea1ch \u2013 t\u1ed1i \u01b0u \u0111\u1ec3 t\u1ea1o ra nh\u1eefng s\u1ea3n ph\u1ea9m ch\u1ea5t l\u01b0\u1ee3ng v\u00e0 mang l\u1ea1i gi\u00e1 tr\u1ecb th\u1ef1c cho doanh nghi\u1ec7p.<\/p>\r\n  <\/div>\r\n  <div class=\"process-mobile__list\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const icons = {\r\n    check: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>',\r\n    arrow: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>',\r\n    chevron: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>'\r\n  };\r\n\r\n  const steps = [\r\n    {\r\n      number: \"01\", title: \"Kh\u1ea3o s\u00e1t & T\u01b0 v\u1ea5n\",\r\n      desc: \"Ch\u00fang t\u00f4i b\u1eaft \u0111\u1ea7u b\u1eb1ng vi\u1ec7c l\u1eafng nghe, ph\u00e2n t\u00edch v\u00e0 th\u1ea5u hi\u1ec3u doanh nghi\u1ec7p c\u1ee7a b\u1ea1n \u0111\u1ec3 \u0111\u01b0a ra gi\u1ea3i ph\u00e1p ph\u00f9 h\u1ee3p & hi\u1ec7u qu\u1ea3 nh\u1ea5t.\",\r\n      checklist: [\"L\u1eafng nghe nhu c\u1ea7u\", \"Ph\u00e2n t\u00edch m\u1ee5c ti\u00eau\", \"\u0110\u1ec1 xu\u1ea5t gi\u1ea3i ph\u00e1p t\u1ed1i \u01b0u\", \"X\u00e2y d\u1ef1ng l\u1ed9 tr\u00ecnh tri\u1ec3n khai\"],\r\n      illustration: \"process1-illustration.png\"\r\n    },\r\n    {\r\n      number: \"02\", title: \"Wireframe\",\r\n      desc: \"Ch\u00fang t\u00f4i ph\u00e1c th\u1ea3o c\u1ea5u tr\u00fac, b\u1ed1 c\u1ee5c v\u00e0 lu\u1ed3ng tr\u1ea3i nghi\u1ec7m \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o gi\u1ea3i ph\u00e1p t\u1ed1i \u01b0u v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng nh\u1ea5t cho ng\u01b0\u1eddi d\u00f9ng.\",\r\n      checklist: [\"X\u00e2y d\u1ef1ng user flow\", \"Ph\u00e1c th\u1ea3o sitemap\", \"Thi\u1ebft k\u1ebf wireframe\", \"\u0110\u1ecbnh h\u00ecnh tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng\"],\r\n      illustration: \"process2-illustration.png\"\r\n    },\r\n    {\r\n      number: \"03\", title: \"Thi\u1ebft k\u1ebf UI\",\r\n      desc: \"Ch\u00fang t\u00f4i thi\u1ebft k\u1ebf giao di\u1ec7n \u0111\u1eb9p m\u1eaft, hi\u1ec7n \u0111\u1ea1i v\u00e0 t\u1eadp trung v\u00e0o tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng, \u0111\u1ea3m b\u1ea3o s\u1ef1 nh\u1ea5t qu\u00e1n v\u00e0 hi\u1ec7u qu\u1ea3.\",\r\n      checklist: [\"Thi\u1ebft k\u1ebf giao di\u1ec7n tr\u1ef1c quan\", \"T\u1ed1i \u01b0u tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng\", \"\u0110\u1ea3m b\u1ea3o t\u00ednh nh\u1ea5t qu\u00e1n th\u01b0\u01a1ng hi\u1ec7u\", \"Thi\u1ebft k\u1ebf responsive \u0111a n\u1ec1n t\u1ea3ng\"],\r\n      illustration: \"process3-illustration.png\"\r\n    },\r\n    {\r\n      number: \"04\", title: \"L\u1eadp tr\u00ecnh\",\r\n      desc: \"Ch\u00fang t\u00f4i hi\u1ec7n th\u1ef1c h\u00f3a thi\u1ebft k\u1ebf b\u1eb1ng code s\u1ea1ch, t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng v\u00e0 chu\u1ea9n h\u00f3a theo c\u00e1c ti\u00eau chu\u1ea9n l\u1eadp tr\u00ecnh hi\u1ec7n \u0111\u1ea1i.\",\r\n      checklist: [\"L\u1eadp tr\u00ecnh chu\u1ea9n, t\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t\", \"Responsive & t\u01b0\u01a1ng th\u00edch \u0111a thi\u1ebft b\u1ecb\", \"T\u00edch h\u1ee3p API & h\u1ec7 th\u1ed1ng\", \"B\u1ea3o m\u1eadt & t\u1ed1i \u01b0u SEO k\u1ef9 thu\u1eadt\", \"Code s\u1ea1ch, d\u1ec5 m\u1edf r\u1ed9ng & b\u1ea3o tr\u00ec\"],\r\n      illustration: \"process4-illustration.png\"\r\n    },\r\n    {\r\n      number: \"05\", title: \"Ki\u1ec3m th\u1eed\",\r\n      desc: \"Ch\u00fang t\u00f4i ki\u1ec3m th\u1eed k\u1ef9 l\u01b0\u1ee1ng \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o s\u1ea3n ph\u1ea9m ho\u1ea1t \u0111\u1ed9ng \u1ed5n \u0111\u1ecbnh, b\u1ea3o m\u1eadt v\u00e0 mang l\u1ea1i tr\u1ea3i nghi\u1ec7m t\u1ed1t nh\u1ea5t cho ng\u01b0\u1eddi d\u00f9ng.\",\r\n      checklist: [\"Ki\u1ec3m th\u1eed ch\u1ee9c n\u0103ng (Functional Testing)\", \"Ki\u1ec3m th\u1eed giao di\u1ec7n (UI\/UX Testing)\", \"Ki\u1ec3m th\u1eed hi\u1ec7u n\u0103ng (Performance Testing)\", \"Ki\u1ec3m th\u1eed b\u1ea3o m\u1eadt (Security Testing)\", \"Ki\u1ec3m th\u1eed t\u01b0\u01a1ng th\u00edch \u0111a n\u1ec1n t\u1ea3ng\", \"\u0110\u1ea3m b\u1ea3o ch\u1ea5t l\u01b0\u1ee3ng & \u0111\u1ed9 \u1ed5n \u0111\u1ecbnh\"],\r\n      illustration: \"process5-illustration.png\"\r\n    },\r\n    {\r\n      number: \"06\", title: \"Tri\u1ec3n khai\",\r\n      desc: \"Ch\u00fang t\u00f4i tri\u1ec3n khai s\u1ea3n ph\u1ea9m l\u00ean m\u00f4i tr\u01b0\u1eddng th\u1ef1c t\u1ebf, \u0111\u1ea3m b\u1ea3o v\u1eadn h\u00e0nh \u1ed5n \u0111\u1ecbnh, b\u1ea3o m\u1eadt v\u00e0 s\u1eb5n s\u00e0ng m\u1edf r\u1ed9ng.\",\r\n      checklist: [\"Tri\u1ec3n khai l\u00ean m\u00f4i tr\u01b0\u1eddng Production\", \"C\u1ea5u h\u00ecnh m\u00e1y ch\u1ee7 & t\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t\", \"Thi\u1ebft l\u1eadp b\u1ea3o m\u1eadt & sao l\u01b0u d\u1eef li\u1ec7u\", \"Gi\u00e1m s\u00e1t h\u1ec7 th\u1ed1ng 24\/7\", \"H\u1ed7 tr\u1ee3 & b\u1ea3o tr\u00ec \u0111\u1ecbnh k\u1ef3\", \"\u0110\u1ea3m b\u1ea3o kh\u1ea3 n\u0103ng m\u1edf r\u1ed9ng trong t\u01b0\u01a1ng lai\"],\r\n      illustration: \"process6-illustration.png\"\r\n    }\r\n  ];\r\n\r\n  const timelineEl = document.querySelector('.process-timeline');\r\n  const cardStackEl = document.querySelector('.process-card-stack');\r\n  const illoStackEl = document.querySelector('.process-illustration-stack');\r\n\r\n  function renderTimeline() {\r\n    timelineEl.innerHTML = `\r\n      <div class=\"process-timeline__track\"><\/div>\r\n      <div class=\"process-timeline__fill\"><\/div>\r\n      <div class=\"process-timeline__nodes\">\r\n        ${steps.map((s, i) => `\r\n          <div class=\"process-timeline__node ${i === 0 ? 'process-timeline__node--active' : ''}\" data-index=\"${i}\">\r\n            <span class=\"process-timeline__node-circle\">${s.number}<\/span>\r\n            <span class=\"process-timeline__label\">${s.title}<\/span>\r\n          <\/div>\r\n        `).join('')}\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  function cardBodyHTML(s) {\r\n    return `\r\n      <span class=\"process-card__number\">${s.number}<\/span>\r\n      <h3 class=\"process-card__title\">${s.title}<\/h3>\r\n      <p class=\"process-card__desc\">${s.desc}<\/p>\r\n      <hr class=\"process-card__divider\">\r\n      <ul class=\"process-card__checklist\">\r\n        ${s.checklist.map(item => `<li><span class=\"process-card__check-icon\">${icons.check}<\/span><span>${item}<\/span><\/li>`).join('')}\r\n      <\/ul>\r\n      <button class=\"process-card__cta\">T\u00ccM HI\u1ec2U TH\u00caM${icons.arrow}<\/button>\r\n    `;\r\n  }\r\n\r\n  function renderCards() {\r\n    cardStackEl.innerHTML = steps.map((s, i) => `\r\n      <div class=\"process-card\" data-index=\"${i}\">${cardBodyHTML(s)}<\/div>\r\n    `).join('');\r\n  }\r\n\r\n  function renderIllustrations() {\r\n    illoStackEl.innerHTML = steps.map((s, i) => `\r\n      <img class=\"process-illustration__img\" data-index=\"${i}\" src=\"${s.illustration}\" alt=\"${s.title}\" ${i === 0 ? 'fetchpriority=\"high\"' : ''} decoding=\"async\">\r\n    `).join('');\r\n  }\r\n\r\n  renderTimeline();\r\n  renderCards();\r\n  renderIllustrations();\r\n\r\n  const mobileListEl = document.querySelector('.process-mobile__list');\r\n\r\n  function renderMobileList() {\r\n    mobileListEl.innerHTML = steps.map((s, i) => `\r\n      <div class=\"process-mobile__item ${i === 0 ? 'process-mobile__item--active' : ''}\" data-index=\"${i}\">\r\n        <button class=\"process-mobile__toggle\" data-index=\"${i}\">\r\n          <span class=\"process-mobile__node\">${s.number}<\/span>\r\n          <span class=\"process-mobile__toggle-title\">${s.title}<\/span>\r\n          <span class=\"process-mobile__chevron\">${icons.chevron}<\/span>\r\n        <\/button>\r\n        <div class=\"process-mobile__body\">\r\n          <div class=\"process-mobile__body-inner\">\r\n            <div class=\"process-mobile__body-content\">\r\n              <p class=\"process-card__desc\">${s.desc}<\/p>\r\n              <ul class=\"process-card__checklist\" style=\"margin-top:20px;\">\r\n                ${s.checklist.map(item => `<li><span class=\"process-card__check-icon\">${icons.check}<\/span><span>${item}<\/span><\/li>`).join('')}\r\n              <\/ul>\r\n              <button class=\"process-card__cta\">T\u00ccM HI\u1ec2U TH\u00caM${icons.arrow}<\/button>\r\n              <img decoding=\"async\" src=\"${s.illustration}\" alt=\"${s.title}\">\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    `).join('');\r\n  }\r\n  renderMobileList();\r\n\r\n  mobileListEl.addEventListener('click', (e) => {\r\n    const toggle = e.target.closest('.process-mobile__toggle');\r\n    if (!toggle) return;\r\n    const index = Number(toggle.dataset.index);\r\n    document.querySelectorAll('.process-mobile__item').forEach((item, i) => {\r\n      item.classList.toggle('process-mobile__item--active', i === index);\r\n    });\r\n  });\r\n\r\n  gsap.registerPlugin(ScrollTrigger);\r\n\r\n  const headerEl = document.querySelector('.process-header');\r\n  const fillEl = document.querySelector('.process-timeline__fill');\r\n  const cards = gsap.utils.toArray('.process-card');\r\n  const illustrations = gsap.utils.toArray('.process-illustration__img');\r\n  const nodeEls = gsap.utils.toArray('.process-timeline__node');\r\n\r\n  const TRANSITIONS = [0.15, 0.32, 0.55, 0.66, 0.83];\r\n  const TRANSITION_DURATION = 0.07;\r\n\r\n  function crossfadeCard(tl, position, outCard, inCard) {\r\n    tl.to(outCard, { opacity: 0, duration: TRANSITION_DURATION, ease: 'power2.out' }, position);\r\n    tl.fromTo(inCard,\r\n      { opacity: 0, y: 30 },\r\n      { opacity: 1, y: 0, duration: TRANSITION_DURATION, ease: 'power2.out' },\r\n      position\r\n    );\r\n  }\r\n\r\n  function crossfadeIllustration(tl, position, outImg, inImg) {\r\n    tl.to(outImg, { opacity: 0, scale: 0.96, duration: TRANSITION_DURATION, ease: 'power2.out' }, position);\r\n    tl.fromTo(inImg,\r\n      { opacity: 0, scale: 0.96 },\r\n      { opacity: 1, scale: 1, duration: TRANSITION_DURATION, ease: 'power2.out' },\r\n      position\r\n    );\r\n  }\r\n\r\n  function updateNodeStates(progress) {\r\n    const activeIndex = TRANSITIONS.filter(p => progress >= p + TRANSITION_DURATION \/ 2).length;\r\n    nodeEls.forEach((node, i) => {\r\n      node.classList.toggle('process-timeline__node--active', i === activeIndex);\r\n      node.classList.toggle('process-timeline__node--done', i < activeIndex);\r\n    });\r\n  }\r\n\r\n  ScrollTrigger.matchMedia({\r\n    \"(min-width: 1024px)\": function () {\r\n      const tl = gsap.timeline({\r\n        scrollTrigger: {\r\n          trigger: '.process-wrapper',\r\n          start: 'top top',\r\n          end: 'bottom bottom',\r\n          pin: '.process-pin',\r\n          scrub: true,\r\n          anticipatePin: 1,\r\n          invalidateOnRefresh: true,\r\n          onUpdate: (self) => updateNodeStates(self.progress)\r\n        }\r\n      });\r\n\r\n      tl.fromTo(headerEl, { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0);\r\n      tl.to(fillEl, { scaleX: 1, duration: 1, ease: 'none' }, 0);\r\n\r\n      TRANSITIONS.forEach((position, i) => {\r\n        crossfadeCard(tl, position, cards[i], cards[i + 1]);\r\n        crossfadeIllustration(tl, position, illustrations[i], illustrations[i + 1]);\r\n      });\r\n\r\n      tl.to(headerEl, { opacity: 0, y: -20, duration: TRANSITION_DURATION, ease: 'power2.out' }, TRANSITIONS[1]);\r\n\r\n      return () => tl.scrollTrigger && tl.scrollTrigger.kill();\r\n    }\r\n  });\r\n});\r\n<\/script>\r\n<style>\r\n  :root {\r\n    --blue: #2563EB;\r\n    --accent: #60A5FA;\r\n    --blue-bg: #EFF6FF;\r\n    --dark: #0F172A;\r\n    --gray: #64748B;\r\n    --bg: #F8FBFF;\r\n  }\r\n  * { margin:0; padding:0; box-sizing:border-box; }\r\n  html, body {\r\n    width:100%;\r\n    font-family:\"Segoe UI\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\r\n    color:var(--dark);\r\n    background:var(--bg);\r\n  }\r\n  img { max-width:100%; display:block; }\r\n  button { font-family:inherit; cursor:pointer; border:none; background:none; }\r\n  ul { list-style:none; }\r\n\r\n  .process-decor { position:absolute; inset:0; pointer-events:none; z-index:0; }\r\n  .process-decor__blur { position:absolute; border-radius:50%; background:var(--blue); opacity:.08; filter:blur(70px); }\r\n  .process-decor__blur--c1 { width:360px; height:360px; top:-100px; left:-120px; }\r\n  .process-decor__blur--c2 { width:280px; height:280px; bottom:-80px; right:-100px; background:var(--accent); }\r\n  .process-decor__dotgrid {\r\n    position:absolute; top:60px; right:100px; width:140px; height:100px;\r\n    background-image:radial-gradient(circle, var(--blue) 1.5px, transparent 1.5px);\r\n    background-size:18px 18px; opacity:.15;\r\n  }\r\n  .process-decor__glowline {\r\n    position:absolute; top:50%; left:0; width:100%; height:1px;\r\n    background:linear-gradient(90deg, transparent, rgba(37,99,235,.15), transparent);\r\n  }\r\n  .process-decor__particle { position:absolute; border-radius:50%; background:var(--accent); opacity:.5; }\r\n  .process-decor__particle--p1 { width:8px; height:8px; top:20%; left:15%; }\r\n  .process-decor__particle--p2 { width:6px; height:6px; top:70%; right:20%; }\r\n\r\n  .process-header {\r\n    position:relative;\r\n    z-index:1;\r\n    text-align:center;\r\n    max-width:800px;\r\n    margin:0 auto 14px;\r\n    opacity:0;\r\n    transform:translateY(30px);\r\n  }\r\n  .process-header__badge {\r\n    display:inline-flex; align-items:center; gap:8px;\r\n    padding:8px 20px; background:var(--blue-bg); color:var(--blue);\r\n    font-size:14px; font-weight:600; border-radius:999px; margin-bottom:20px;\r\n  }\r\n  .process-header__heading { font-size:56px; font-weight:800; line-height:1.15; letter-spacing:-2px; color:var(--dark); }\r\n  .process-header__gradient {\r\n    background:linear-gradient(90deg, var(--blue), var(--accent));\r\n    -webkit-background-clip:text; background-clip:text; color:transparent;\r\n  }\r\n  .process-header__desc { margin-top:20px; font-size:18px; line-height:1.7; color:var(--gray); }\r\n\r\n  \/* Desktop pinned \"Process\" header is shrunk so header + timeline + content\r\n     fit within 100vh at common short viewports (1366x768, 1600x900) without\r\n     .process-pin's overflow:hidden clipping content. Scoped to .process-header\r\n     (desktop only) so the mobile accordion header (.process-mobile__header,\r\n     which reuses the same badge\/heading\/desc classes) is unaffected. *\/\r\n  .process-header .process-header__badge {\r\n    padding:6px 16px; font-size:13px; margin-bottom:10px;\r\n  }\r\n  .process-header .process-header__heading { font-size:32px; letter-spacing:-1px; }\r\n  .process-header .process-header__desc { margin-top:8px; font-size:15px; line-height:1.5; }\r\n\r\n  .process-timeline { position:relative; z-index:1; padding:0 24px; margin-bottom:16px; }\r\n  .process-timeline__track {\r\n    position:absolute; top:17px; left:24px; right:24px; height:4px;\r\n    background:#E2E8F0; border-radius:2px;\r\n  }\r\n  .process-timeline__fill {\r\n    position:absolute; top:17px; left:24px; right:24px; height:4px;\r\n    background:linear-gradient(90deg, var(--blue), var(--accent));\r\n    border-radius:2px; transform-origin:left center; transform:scaleX(0);\r\n  }\r\n  .process-timeline__nodes { position:relative; display:flex; justify-content:space-between; }\r\n  .process-timeline__node { display:flex; flex-direction:column; align-items:center; gap:6px; width:140px; }\r\n  .process-timeline__node-circle {\r\n    width:34px; height:34px; border-radius:50%;\r\n    background:#fff; border:2px solid #E2E8F0;\r\n    display:flex; align-items:center; justify-content:center;\r\n    font-size:12px; font-weight:700; color:var(--gray);\r\n    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, background-color .35s ease, border-color .35s ease, color .35s ease;\r\n  }\r\n  .process-timeline__node--done .process-timeline__node-circle { border-color:var(--blue); color:var(--blue); }\r\n  .process-timeline__node--active .process-timeline__node-circle {\r\n    background:linear-gradient(135deg, var(--blue), var(--accent));\r\n    border-color:transparent; color:#fff;\r\n    transform:scale(1.15);\r\n    box-shadow:0 0 0 8px rgba(37,99,235,.15), 0 8px 20px rgba(37,99,235,.35);\r\n  }\r\n  .process-timeline__label { font-size:12px; color:var(--gray); text-align:center; }\r\n  .process-timeline__node--active .process-timeline__label,\r\n  .process-timeline__node--done .process-timeline__label { color:var(--dark); font-weight:600; }\r\n\r\n  .process-content { position:relative; z-index:1; display:flex; justify-content:center; gap:56px; align-items:center; }\r\n  .process-illustration-stack {\r\n    position:relative;\r\n    height:min(50vh, 440px);\r\n    width:49%;\r\n    max-width:60%;\r\n    aspect-ratio:966\/854;\r\n    flex:none;\r\n  }\r\n  .process-card-stack {\r\n    position:relative;\r\n    width:49%;\r\n    min-height:440px;\r\n    flex:none;\r\n  }\r\n\r\n  .process-card {\r\n    position:absolute; top:0; left:0; width:100%;\r\n    background:#fff; border-radius:28px; padding:30px;\r\n    box-shadow:0 20px 60px rgba(15,23,42,.08);\r\n    opacity:0;\r\n  }\r\n  .process-card[data-index=\"0\"] { opacity:1; }\r\n  .process-card__number { display:block; font-size:46px; font-weight:800; color:var(--blue); line-height:1; }\r\n  .process-card__title { margin-top:6px; font-size:26px; font-weight:700; color:var(--dark); }\r\n  .process-card__desc { margin-top:12px; font-size:14px; line-height:1.45; color:var(--gray); }\r\n  .process-card__divider { margin:12px 0; height:1px; background:#E2E8F0; border:none; }\r\n  .process-card__checklist { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }\r\n  .process-card__checklist li { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--dark); }\r\n  .process-card__check-icon {\r\n    width:18px; height:18px; border-radius:50%; background:var(--blue);\r\n    display:flex; align-items:center; justify-content:center; flex-shrink:0;\r\n  }\r\n  .process-card__check-icon svg { width:10px; height:10px; color:#fff; }\r\n  .process-card__cta {\r\n    display:inline-flex; align-items:center; gap:8px;\r\n    padding:11px 22px; border-radius:999px;\r\n    background:linear-gradient(90deg, var(--blue), var(--accent));\r\n    color:#fff; font-size:14px; font-weight:600;\r\n    transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;\r\n  }\r\n  .process-card__cta svg { width:18px; height:18px; }\r\n  .process-card__cta:hover { transform:scale(1.03); box-shadow:0 10px 24px rgba(37,99,235,.3); }\r\n\r\n  .process-illustration__img {\r\n    position:absolute; inset:0; width:100%; height:100%;\r\n    object-fit:contain; opacity:0; will-change:opacity, transform;\r\n  }\r\n  .process-illustration__img[data-index=\"0\"] { opacity:1; }\r\n\r\n  .process-wrapper { position:relative; height:500vh; }\r\n  .process-pin {\r\n    position:relative;\r\n    height:100vh;\r\n    width:100%;\r\n    overflow:hidden;\r\n    background:linear-gradient(180deg, #FFFFFF, var(--bg));\r\n    display:flex;\r\n    flex-direction:column;\r\n    justify-content:center;\r\n    padding:0 80px;\r\n  }\r\n\r\n  .process-mobile { display:none; padding:80px 24px; }\r\n  .process-mobile__header { text-align:center; max-width:600px; margin:0 auto 48px; }\r\n  .process-mobile__list { display:flex; flex-direction:column; gap:20px; max-width:800px; margin:0 auto; }\r\n  .process-mobile__item { background:#fff; border-radius:24px; box-shadow:0 15px 45px rgba(0,0,0,.06); overflow:hidden; }\r\n  .process-mobile__toggle {\r\n    width:100%; display:flex; align-items:center; gap:16px; padding:24px;\r\n    text-align:left;\r\n  }\r\n  .process-mobile__node {\r\n    flex-shrink:0; width:44px; height:44px; border-radius:50%;\r\n    background:var(--blue-bg); color:var(--blue);\r\n    display:flex; align-items:center; justify-content:center;\r\n    font-weight:700;\r\n  }\r\n  .process-mobile__item--active .process-mobile__node {\r\n    background:linear-gradient(135deg, var(--blue), var(--accent)); color:#fff;\r\n  }\r\n  .process-mobile__toggle-title { flex:1; font-size:18px; font-weight:700; color:var(--dark); }\r\n  .process-mobile__chevron { width:20px; height:20px; color:var(--gray); transition:transform .3s ease; }\r\n  .process-mobile__item--active .process-mobile__chevron { transform:rotate(180deg); }\r\n  .process-mobile__body {\r\n    display:grid; grid-template-rows:0fr; opacity:0;\r\n    transition: grid-template-rows .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;\r\n  }\r\n  .process-mobile__item--active .process-mobile__body { grid-template-rows:1fr; opacity:1; }\r\n  .process-mobile__body-inner { overflow:hidden; }\r\n  .process-mobile__body-content { padding:0 24px 24px; }\r\n  .process-mobile__body-content .process-card__desc { margin-top:0; }\r\n  .process-mobile__body-content img { border-radius:16px; margin-top:24px; }\r\n\r\n  @media (max-width:1023px) {\r\n    .process-desktop { display:none; }\r\n    .process-mobile { display:block; }\r\n  }\r\n  @media (min-width:768px) and (max-width:1023px) {\r\n    .process-mobile__body { display:block; grid-template-rows:none; opacity:1; }\r\n    .process-mobile__chevron { display:none; }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c2737d1 e-con-full e-flex e-con e-parent\" data-id=\"c2737d1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0b969a elementor-widget elementor-widget-html\" data-id=\"d0b969a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"why-desktop\">\r\n  <section class=\"why__wrapper\">\r\n    <div class=\"why__pin\">\r\n      <div class=\"why__decor\" aria-hidden=\"true\">\r\n        <div class=\"why__decor-blur why__decor-blur--c1\"><\/div>\r\n        <div class=\"why__decor-blur why__decor-blur--c2\"><\/div>\r\n        <div class=\"why__decor-grid\"><\/div>\r\n        <div class=\"why__decor-ring\"><\/div>\r\n        <div class=\"why__decor-particle why__decor-particle--p1\"><\/div>\r\n        <div class=\"why__decor-particle why__decor-particle--p2\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"why__header\">\r\n        <span class=\"why__badge\">T\u1ea0I SAO CH\u1eccN CH\u00daNG T\u00d4I<\/span>\r\n        <h2 class=\"why__heading\">\u0110i\u1ec1u g\u00ec t\u1ea1o n\u00ean s\u1ef1 <span class=\"why__gradient\">kh\u00e1c bi\u1ec7t?<\/span><\/h2>\r\n        <p class=\"why__desc\">Ch\u00fang t\u00f4i kh\u00f4ng ch\u1ec9 t\u1ea1o ra website \u0111\u1eb9p,<br>ch\u00fang t\u00f4i x\u00e2y d\u1ef1ng n\u1ec1n t\u1ea3ng gi\u00fap doanh nghi\u1ec7p t\u0103ng tr\u01b0\u1edfng.<\/p>\r\n      <\/div>\r\n\r\n      <nav class=\"why__rail\" aria-hidden=\"true\"><\/nav>\r\n\r\n      <div class=\"why__stage\">\r\n        <div class=\"why__panel why__panel--agency\"><\/div>\r\n        <div class=\"why__divider\">\r\n          <div class=\"why__divider-track\"><\/div>\r\n          <div class=\"why__divider-glow\"><\/div>\r\n          <div class=\"why__divider-fill\"><\/div>\r\n          <div class=\"why__divider-pulse\"><\/div>\r\n          <span class=\"why__divider-ambient\"><\/span>\r\n          <span class=\"why__divider-ambient\"><\/span>\r\n          <span class=\"why__divider-ambient\"><\/span>\r\n          <div class=\"why__vs\">VS<\/div>\r\n        <\/div>\r\n        <div class=\"why__panel why__panel--vision\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"why__summary\"><\/div>\r\n\r\n      <div class=\"why__cta\">\r\n        <h3 class=\"why__cta-heading\">Kh\u00f4ng ch\u1ec9 x\u00e2y d\u1ef1ng Website<br><span>Ch\u00fang t\u00f4i x\u00e2y d\u1ef1ng c\u00f4ng c\u1ee5 t\u0103ng tr\u01b0\u1edfng cho doanh nghi\u1ec7p.<\/span><\/h3>\r\n        <ul class=\"why__cta-checklist\">\r\n          <li>T\u01b0 v\u1ea5n mi\u1ec5n ph\u00ed<\/li><li>B\u00e1o gi\u00e1 nhanh ch\u00f3ng<\/li><li>Cam k\u1ebft hi\u1ec7u qu\u1ea3<\/li><li>H\u1ed7 tr\u1ee3 24\/7<\/li>\r\n        <\/ul>\r\n        <button class=\"why__cta-btn\">B\u1eaft \u0111\u1ea7u d\u1ef1 \u00e1n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<\/div>\r\n\r\n<div class=\"why-mobile\">\r\n  <div class=\"why-mobile__header\">\r\n    <span class=\"why__badge\">T\u1ea0I SAO CH\u1eccN CH\u00daNG T\u00d4I<\/span>\r\n    <h2 class=\"why__heading\" style=\"font-size:32px;\">\u0110i\u1ec1u g\u00ec t\u1ea1o n\u00ean s\u1ef1 <span class=\"why__gradient\">kh\u00e1c bi\u1ec7t?<\/span><\/h2>\r\n    <p class=\"why__desc\">Ch\u00fang t\u00f4i kh\u00f4ng ch\u1ec9 t\u1ea1o ra website \u0111\u1eb9p,<br>ch\u00fang t\u00f4i x\u00e2y d\u1ef1ng n\u1ec1n t\u1ea3ng gi\u00fap doanh nghi\u1ec7p t\u0103ng tr\u01b0\u1edfng.<\/p>\r\n  <\/div>\r\n  <div class=\"why-mobile__list\"><\/div>\r\n<\/div>\r\n\r\n<div class=\"why__particle-layer\"><\/div>\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const icons = {\r\n    check: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>',\r\n    x: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>',\r\n    arrow: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>',\r\n    chevron: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>'\r\n  };\r\n\r\n  const steps = [\r\n    {\r\n      number: \"01\",\r\n      agency: { title: \"Template c\u00f3 s\u1eb5n\", desc: \"S\u1eed d\u1ee5ng giao di\u1ec7n gi\u1ed1ng h\u00e0ng ngh\u00ecn website kh\u00e1c.\", tags: [\"Giao di\u1ec7n \u0111\u1ea1i tr\u00e0\", \"Ph\u1ee5 thu\u1ed9c plugin\", \"Kh\u00f3 t\u00f9y bi\u1ebfn\"] },\r\n      vision: { title: \"Thi\u1ebft k\u1ebf ri\u00eang theo th\u01b0\u01a1ng hi\u1ec7u\", desc: \"Thi\u1ebft k\u1ebf UI\/UX \u0111\u1ed9c quy\u1ec1n, th\u1ec3 hi\u1ec7n \u0111\u00fang b\u1ea3n s\u1eafc v\u00e0 gi\u00e1 tr\u1ecb th\u01b0\u01a1ng hi\u1ec7u.\", tags: [\"Thi\u1ebft k\u1ebf \u0111\u1ed9c quy\u1ec1n\", \"\u0110\u00fang nh\u1eadn di\u1ec7n\", \"T\u1ed1i \u01b0u tr\u1ea3i nghi\u1ec7m\"] },\r\n      illustration: { src: \"diff1.png\", cropX: 860, cropY: 515 }\r\n    },\r\n    {\r\n      number: \"02\",\r\n      agency: { title: \"L\u1eafp gh\u00e9p Plugin\", desc: \"S\u1eed d\u1ee5ng plugin c\u00f3 s\u1eb5n, kh\u00f3 m\u1edf r\u1ed9ng, xung \u0111\u1ed9t v\u00e0 r\u1ee7i ro b\u1ea3o m\u1eadt cao.\", tags: [\"Ph\u1ee5 thu\u1ed9c plugin\", \"Kh\u00f3 t\u00f9y bi\u1ebfn\", \"Xung \u0111\u1ed9t h\u1ec7 th\u1ed1ng\", \"B\u1ea3o m\u1eadt k\u00e9m\"] },\r\n      vision: { title: \"L\u1eadp tr\u00ecnh theo y\u00eau c\u1ea7u\", desc: \"Ph\u00e1t tri\u1ec3n ri\u00eang theo nhu c\u1ea7u, d\u1ec5 m\u1edf r\u1ed9ng, b\u1ea3o m\u1eadt cao v\u00e0 hi\u1ec7u su\u1ea5t t\u1ed1i \u01b0u.\", tags: [\"Code ri\u00eang bi\u1ec7t\", \"D\u1ec5 m\u1edf r\u1ed9ng\", \"B\u1ea3o m\u1eadt cao\", \"Hi\u1ec7u su\u1ea5t t\u1ed1i \u01b0u\"] },\r\n      illustration: { src: \"diff2.png\", cropX: 800, cropY: 485 }\r\n    },\r\n    {\r\n      number: \"03\",\r\n      agency: { title: \"Website ch\u1ec9 \u0111\u1ec3 gi\u1edbi thi\u1ec7u\", desc: \"Website ch\u1ec9 \u0111\u00f3ng vai tr\u00f2 nh\u01b0 m\u1ed9t t\u1ea5m danh thi\u1ebfp tr\u1ef1c tuy\u1ebfn, kh\u00f4ng t\u1ea1o ra gi\u00e1 tr\u1ecb kinh doanh.\", tags: [\"Kh\u00f4ng chi\u1ebfn l\u01b0\u1ee3c\", \"Kh\u00f4ng t\u1ed1i \u01b0u chuy\u1ec3n \u0111\u1ed5i\", \"Kh\u00f4ng t\u1ea1o doanh thu\"] },\r\n      vision: { title: \"Website t\u1ea1o ra kh\u00e1ch h\u00e0ng\", desc: \"Website \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng v\u1edbi chi\u1ebfn l\u01b0\u1ee3c r\u00f5 r\u00e0ng, bi\u1ebfn kh\u00e1ch truy c\u1eadp th\u00e0nh kh\u00e1ch h\u00e0ng th\u1ef1c s\u1ef1.\", tags: [\"Chi\u1ebfn l\u01b0\u1ee3c r\u00f5 r\u00e0ng\", \"T\u1ed1i \u01b0u chuy\u1ec3n \u0111\u1ed5i\", \"T\u0103ng tr\u01b0\u1edfng doanh thu\"] },\r\n      illustration: { src: \"diff3.png\", cropX: 780, cropY: 460 }\r\n    },\r\n    {\r\n      number: \"04\",\r\n      agency: { title: \"Kh\u00f4ng t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9\", desc: \"Website t\u1ea3i ch\u1eadm, tr\u1ea3i nghi\u1ec7m k\u00e9m, m\u1ea5t kh\u00e1ch h\u00e0ng v\u00e0 th\u1ee9 h\u1ea1ng tr\u00ean Google.\", tags: [\"Th\u1eddi gian t\u1ea3i ch\u1eadm\", \"Hi\u1ec7u su\u1ea5t th\u1ea5p\", \"T\u1ef7 l\u1ec7 tho\u00e1t cao\", \"M\u1ea5t th\u1ee9 h\u1ea1ng\"] },\r\n      vision: { title: \"Core Web Vitals 95+\", desc: \"Website \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u to\u00e0n di\u1ec7n, t\u1ed1c \u0111\u1ed9 v\u01b0\u1ee3t tr\u1ed9i, tr\u1ea3i nghi\u1ec7m m\u01b0\u1ee3t m\u00e0.\", tags: [\"T\u1ed1c \u0111\u1ed9 si\u00eau nhanh\", \"Tr\u1ea3i nghi\u1ec7m m\u01b0\u1ee3t m\u00e0\", \"T\u1ef7 l\u1ec7 chuy\u1ec3n \u0111\u1ed5i cao\", \"Th\u1ee9 h\u1ea1ng b\u1ee9t ph\u00e1\"] },\r\n      illustration: { src: \"diff4.png\", cropX: 800, cropY: 465 }\r\n    },\r\n    {\r\n      number: \"05\",\r\n      agency: { title: \"SEO sau khi website ho\u00e0n th\u00e0nh\", desc: \"SEO ch\u1ec9 \u0111\u01b0\u1ee3c tri\u1ec3n khai sau khi website xong, b\u1ecf l\u1ee1 nhi\u1ec1u c\u01a1 h\u1ed9i l\u00ean TOP.\", tags: [\"Tri\u1ec3n khai sau\", \"Thi\u1ebfu c\u1ea5u tr\u00fac\", \"T\u1ed1i \u01b0u th\u1ee7 c\u00f4ng\", \"Hi\u1ec7u qu\u1ea3 th\u1ea5p\"] },\r\n      vision: { title: \"SEO Technical ngay t\u1eeb \u0111\u1ea7u\", desc: \"T\u1ed1i \u01b0u SEO ngay t\u1eeb c\u1ea5u tr\u00fac, gi\u00fap website d\u1ec5 d\u00e0ng l\u00ean TOP v\u00e0 b\u1ec1n v\u1eefng.\", tags: [\"T\u1ed1i \u01b0u t\u1eeb \u0111\u1ea7u\", \"C\u1ea5u tr\u00fac chu\u1ea9n SEO\", \"T\u1ef1 \u0111\u1ed9ng & b\u1ec1n v\u1eefng\", \"L\u00ean TOP \u1ed5n \u0111\u1ecbnh\"] },\r\n      illustration: { src: \"diff5.png\", cropX: 800, cropY: 465 }\r\n    },\r\n    {\r\n      number: \"06\",\r\n      agency: { title: \"B\u00e0n giao d\u1ef1 \u00e1n l\u00e0 k\u1ebft th\u00fac\", desc: \"B\u00e0n giao xong l\u00e0 h\u1ebft tr\u00e1ch nhi\u1ec7m, kh\u00f4ng h\u1ed7 tr\u1ee3 v\u1ec1 sau.\", tags: [\"Kh\u00f4ng h\u1ed7 tr\u1ee3 sau b\u00e0n giao\", \"Kh\u00f4ng b\u1ea3o tr\u00ec, c\u1eadp nh\u1eadt\", \"Kh\u00f4ng theo d\u00f5i, gi\u00e1m s\u00e1t\", \"Kh\u00f4ng x\u1eed l\u00fd s\u1ef1 c\u1ed1\", \"Kh\u00f4ng t\u01b0 v\u1ea5n chi\u1ebfn l\u01b0\u1ee3c\", \"Kh\u00f4ng \u0111\u1ed3ng h\u00e0nh l\u00e2u d\u00e0i\"] },\r\n      vision: { title: \"\u0110\u1ed3ng h\u00e0nh d\u00e0i h\u1ea1n\", desc: \"Ch\u00fang t\u00f4i lu\u00f4n \u0111\u1ed3ng h\u00e0nh c\u00f9ng b\u1ea1n trong su\u1ed1t h\u00e0nh tr\u00ecnh ph\u00e1t tri\u1ec3n.\", tags: [\"B\u1ea3o m\u1eadt n\u00e2ng cao\", \"Sao l\u01b0u \u0111\u1ecbnh k\u1ef3\", \"T\u1ed1i \u01b0u hi\u1ec7u n\u0103ng\", \"Ph\u00e1t tri\u1ec3n t\u00ednh n\u0103ng\", \"\u0110\u1ed3ng h\u00e0nh l\u00e2u d\u00e0i\"] },\r\n      illustration: { src: \"diff6.png\", cropX: 780, cropY: 425 }\r\n    }\r\n  ];\r\n\r\n  const railEl = document.querySelector('.why__rail');\r\n  const agencyPanelEl = document.querySelector('.why__panel--agency');\r\n  const visionPanelEl = document.querySelector('.why__panel--vision');\r\n\r\n  function tagPill(text, kind) {\r\n    const icon = kind === 'danger' ? icons.x : icons.check;\r\n    return `<span class=\"why__tag why__tag--${kind}\"><span class=\"why__tag-icon\">${icon}<\/span>${text}<\/span>`;\r\n  }\r\n\r\n  function renderRail() {\r\n    railEl.innerHTML = steps.map((s, i) => `\r\n      <div class=\"why__rail-item ${i === 0 ? 'why__rail-item--active' : ''}\" data-index=\"${i}\">\r\n        <span class=\"why__rail-num\">${s.number}<\/span>\r\n        <span class=\"why__rail-dot\"><\/span>\r\n      <\/div>\r\n    `).join('');\r\n  }\r\n\r\n  function renderAgencyCards() {\r\n    agencyPanelEl.innerHTML = steps.map((s, i) => `\r\n      <div class=\"why__card why__card--agency\" data-index=\"${i}\">\r\n        <span class=\"why__card-status\">${icons.x}<\/span>\r\n        <h3 class=\"why__card-title\">${s.agency.title}<\/h3>\r\n        <p class=\"why__card-desc\">${s.agency.desc}<\/p>\r\n        <div class=\"why__tags\">${s.agency.tags.map(t => tagPill(t, 'danger')).join('')}<\/div>\r\n      <\/div>\r\n    `).join('');\r\n  }\r\n\r\n  function renderVisionCards() {\r\n    visionPanelEl.innerHTML = steps.map((s, i) => `\r\n      <div class=\"why__card why__card--vision\" data-index=\"${i}\">\r\n        <span class=\"why__card-status\">${icons.check}<\/span>\r\n        <h3 class=\"why__card-title\">${s.vision.title}<\/h3>\r\n        <p class=\"why__card-desc\">${s.vision.desc}<\/p>\r\n        <div class=\"why__illustration\" data-index=\"${i}\" style=\"--illu-src:url('${s.illustration.src}'); background-position:-${s.illustration.cropX}px -${s.illustration.cropY}px;\"><\/div>\r\n        <div class=\"why__tags\">${s.vision.tags.map(t => tagPill(t, 'success')).join('')}<\/div>\r\n      <\/div>\r\n    `).join('');\r\n  }\r\n\r\n  renderRail();\r\n  renderAgencyCards();\r\n  renderVisionCards();\r\n\r\n  const summaryEl = document.querySelector('.why__summary');\r\n\r\n  function renderSummary() {\r\n    summaryEl.innerHTML = steps.map(s => `\r\n      <div class=\"why__summary-item\">\r\n        <span class=\"why__summary-icon\">${icons.check}<\/span>\r\n        <span class=\"why__summary-title\">${s.vision.title}<\/span>\r\n      <\/div>\r\n    `).join('');\r\n  }\r\n  renderSummary();\r\n\r\n  const mobileListEl = document.querySelector('.why-mobile__list');\r\n\r\n  function renderMobileList() {\r\n    mobileListEl.innerHTML = steps.map((s, i) => `\r\n      <div class=\"why-mobile__item ${i === 0 ? 'why-mobile__item--active' : ''}\" data-index=\"${i}\">\r\n        <button class=\"why-mobile__toggle\" data-index=\"${i}\">\r\n          <span class=\"why-mobile__node\">${s.number}<\/span>\r\n          <span class=\"why-mobile__toggle-title\">${s.vision.title}<\/span>\r\n          <span class=\"why-mobile__chevron\">${icons.chevron}<\/span>\r\n        <\/button>\r\n        <div class=\"why-mobile__body\">\r\n          <div class=\"why-mobile__body-inner\">\r\n            <div class=\"why-mobile__body-content\">\r\n              <div class=\"why-mobile__col why-mobile__col--agency\">\r\n                <div class=\"why-mobile__col-label\">Agency kh\u00e1c<\/div>\r\n                <div class=\"why-mobile__col-title\">${s.agency.title}<\/div>\r\n                <div class=\"why-mobile__col-desc\">${s.agency.desc}<\/div>\r\n                <div class=\"why__tags\">${s.agency.tags.map(t => tagPill(t, 'danger')).join('')}<\/div>\r\n              <\/div>\r\n              <div class=\"why-mobile__col why-mobile__col--vision\">\r\n                <div class=\"why-mobile__col-label\">WebVision<\/div>\r\n                <div class=\"why-mobile__col-title\">${s.vision.title}<\/div>\r\n                <div class=\"why-mobile__col-desc\">${s.vision.desc}<\/div>\r\n                <div class=\"why-mobile__illustration\" style=\"background-image:url('${s.illustration.src}'); background-position:-${s.illustration.cropX}px -${s.illustration.cropY}px;\"><\/div>\r\n                <div class=\"why__tags\">${s.vision.tags.map(t => tagPill(t, 'success')).join('')}<\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    `).join('');\r\n  }\r\n  renderMobileList();\r\n\r\n  mobileListEl.addEventListener('click', (e) => {\r\n    const toggle = e.target.closest('.why-mobile__toggle');\r\n    if (!toggle) return;\r\n    const index = Number(toggle.dataset.index);\r\n    document.querySelectorAll('.why-mobile__item').forEach((item, i) => {\r\n      item.classList.toggle('why-mobile__item--active', i === index);\r\n    });\r\n  });\r\n\r\n  gsap.registerPlugin(ScrollTrigger);\r\n\r\n  const headerEl = document.querySelector('.why__header');\r\n  const railItems = gsap.utils.toArray('.why__rail-item');\r\n  const agencyCards = gsap.utils.toArray('.why__card--agency');\r\n  const visionCards = gsap.utils.toArray('.why__card--vision');\r\n  const illustrations = gsap.utils.toArray('.why__illustration');\r\n  const dividerFillEl = document.querySelector('.why__divider-fill');\r\n  const dividerGlowEl = document.querySelector('.why__divider-glow');\r\n  const dividerPulseEl = document.querySelector('.why__divider-pulse');\r\n  const stageEl = document.querySelector('.why__stage');\r\n  const particleLayerEl = document.querySelector('.why__particle-layer');\r\n\r\n  const STEP_TRANSITIONS = [0.14, 0.28, 0.42, 0.56, 0.70];\r\n  const TRANSITION_DURATION = 0.09;\r\n\r\n  function burstDissolve(container) {\r\n    const rect = container.getBoundingClientRect();\r\n    const created = [];\r\n    for (let i = 0; i < 16; i++) {\r\n      const p = document.createElement('span');\r\n      p.style.cssText = 'position:absolute;width:4px;height:4px;border-radius:50%;background:#60A5FA;box-shadow:0 0 6px 2px rgba(96,165,250,.8);';\r\n      const x = rect.left + gsap.utils.random(0, rect.width);\r\n      const y = rect.top + gsap.utils.random(0, rect.height);\r\n      p.style.left = x + 'px';\r\n      p.style.top = y + 'px';\r\n      particleLayerEl.appendChild(p);\r\n      created.push(p);\r\n    }\r\n    gsap.to(created, {\r\n      opacity: 0,\r\n      x: () => gsap.utils.random(-40, 40),\r\n      y: () => gsap.utils.random(-40, 40),\r\n      scale: () => gsap.utils.random(0.3, 1.2),\r\n      duration: 0.55,\r\n      ease: 'power2.out',\r\n      stagger: 0.01,\r\n      onComplete: () => created.forEach(p => p.remove())\r\n    });\r\n  }\r\n\r\n  function burstAssemble(container) {\r\n    const rect = container.getBoundingClientRect();\r\n    const cx = rect.left + rect.width \/ 2;\r\n    const cy = rect.top + rect.height \/ 2;\r\n    const created = [];\r\n    for (let i = 0; i < 10; i++) {\r\n      const g = document.createElement('span');\r\n      const size = gsap.utils.random(16, 32);\r\n      g.style.cssText = `position:absolute;width:${size}px;height:${size}px;border-radius:8px;background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(4px);`;\r\n      const x = cx + gsap.utils.random(-150, 150);\r\n      const y = cy + gsap.utils.random(-130, 130);\r\n      g.style.left = x + 'px';\r\n      g.style.top = y + 'px';\r\n      particleLayerEl.appendChild(g);\r\n      created.push(g);\r\n    }\r\n    gsap.fromTo(created,\r\n      { opacity: 0, scale: 0.4 },\r\n      {\r\n        opacity: 0.85, scale: 1, duration: 0.4, ease: 'power2.out', stagger: 0.02,\r\n        onComplete: () => {\r\n          gsap.to(created, { opacity: 0, duration: 0.25, onComplete: () => created.forEach(g => g.remove()) });\r\n        }\r\n      }\r\n    );\r\n  }\r\n\r\n  function crossfadeStep(tl, position, fromIndex, toIndex) {\r\n    const outNodes = [agencyCards[fromIndex], visionCards[fromIndex]];\r\n    const inNodes = [agencyCards[toIndex], visionCards[toIndex]];\r\n\r\n    tl.to(outNodes, { opacity: 0, scale: 0.95, filter: 'blur(8px)', duration: TRANSITION_DURATION, ease: 'power2.out' }, position);\r\n    tl.fromTo(inNodes,\r\n      { opacity: 0, y: 60, scale: 0.96, filter: 'blur(0px)' },\r\n      { opacity: 1, y: 0, scale: 1, duration: TRANSITION_DURATION, ease: 'power2.out' },\r\n      position\r\n    );\r\n\r\n    tl.call(() => {\r\n      burstDissolve(illustrations[fromIndex]);\r\n      burstAssemble(illustrations[toIndex]);\r\n    }, [], position);\r\n\r\n    tl.fromTo(dividerPulseEl, { opacity: 0, top: '0%' }, { opacity: 1, top: '100%', duration: TRANSITION_DURATION, ease: 'power1.out' }, position);\r\n    tl.to(dividerPulseEl, { opacity: 0, duration: 0.04 }, position + TRANSITION_DURATION);\r\n\r\n    const dir = (STEP_TRANSITIONS.indexOf(position) % 2 === 0) ? 1 : -1;\r\n    tl.to(stageEl, { x: dir * 8, scale: 1.015, duration: TRANSITION_DURATION, ease: 'power2.out' }, position);\r\n    tl.to(stageEl, { x: 0, scale: 1, duration: TRANSITION_DURATION, ease: 'power2.out' }, position + TRANSITION_DURATION);\r\n  }\r\n\r\n  function updateRailStates(progress) {\r\n    const activeIndex = STEP_TRANSITIONS.filter(p => progress >= p + TRANSITION_DURATION \/ 2).length;\r\n    railItems.forEach((item, i) => {\r\n      item.classList.toggle('why__rail-item--active', i === activeIndex);\r\n      item.classList.toggle('why__rail-item--done', i < activeIndex);\r\n    });\r\n  }\r\n\r\n  ScrollTrigger.matchMedia({\r\n    \"(min-width: 1024px)\": function () {\r\n      const tl = gsap.timeline({\r\n        scrollTrigger: {\r\n          trigger: '.why__wrapper',\r\n          start: 'top top',\r\n          end: 'bottom bottom',\r\n          pin: '.why__pin',\r\n          scrub: 0.6,\r\n          anticipatePin: 1,\r\n          invalidateOnRefresh: true,\r\n          onUpdate: (self) => updateRailStates(self.progress)\r\n        }\r\n      });\r\n\r\n      tl.to(headerEl, { opacity: 1, y: 0, duration: 0.06, ease: 'power2.out' }, 0);\r\n      tl.to('.why__rail', { opacity: 1, duration: 0.06, ease: 'power2.out' }, 0);\r\n      tl.fromTo(agencyCards[0], { opacity: 0, x: -80 }, { opacity: 1, x: 0, duration: 0.06, ease: 'power2.out' }, 0);\r\n      tl.fromTo(visionCards[0], { opacity: 0, x: 80 }, { opacity: 1, x: 0, duration: 0.06, ease: 'power2.out' }, 0);\r\n      tl.to(dividerGlowEl, { opacity: 1, duration: 0.06, ease: 'power2.out' }, 0);\r\n      tl.to(dividerFillEl, { scaleY: 1, duration: 1, ease: 'none' }, 0);\r\n\r\n      STEP_TRANSITIONS.forEach((position, i) => {\r\n        crossfadeStep(tl, position, i, i + 1);\r\n      });\r\n\r\n      const SUMMARY_POS = 0.82;\r\n      const SUMMARY_DURATION = 0.08;\r\n      const CTA_POS = 0.92;\r\n      const CTA_DURATION = 0.08;\r\n\r\n      const summaryItems = gsap.utils.toArray('.why__summary-item');\r\n\r\n      tl.to([agencyCards[5], visionCards[5]], { opacity: 0, scale: 0.95, filter: 'blur(8px)', duration: SUMMARY_DURATION, ease: 'power2.out' }, SUMMARY_POS);\r\n      tl.to('.why__divider', { opacity: 0, duration: SUMMARY_DURATION, ease: 'power2.out' }, SUMMARY_POS);\r\n      tl.set('.why__summary', { display: 'none' }, STEP_TRANSITIONS[4] + TRANSITION_DURATION);\r\n      tl.set('.why__summary', { display: 'grid' }, SUMMARY_POS);\r\n      tl.to('.why__summary', { opacity: 1, duration: SUMMARY_DURATION, ease: 'power2.out' }, SUMMARY_POS);\r\n      tl.fromTo(summaryItems,\r\n        { opacity: 0, y: 20 },\r\n        { opacity: 1, y: 0, duration: SUMMARY_DURATION, ease: 'power2.out', stagger: 0.015 },\r\n        SUMMARY_POS\r\n      );\r\n\r\n      tl.to('.why__summary', { opacity: 0, duration: CTA_DURATION, ease: 'power2.out' }, CTA_POS);\r\n      tl.to('.why__cta', { opacity: 1, y: 0, duration: CTA_DURATION, ease: 'power2.out' }, CTA_POS);\r\n      tl.set('.why__cta', { pointerEvents: 'auto' }, CTA_POS);\r\n\r\n      window.__whyTimeline = tl;\r\n      window.__whyStepPositions = STEP_TRANSITIONS;\r\n\r\n      return () => { tl.scrollTrigger && tl.scrollTrigger.kill(); };\r\n    }\r\n  });\r\n});\r\n  \/\/ ANCHOR: animation-js\r\n<\/script>\r\n<style>\r\n  :root {\r\n    --bg: #F8FBFF;\r\n    --primary: #2563EB;\r\n    --text: #0F172A;\r\n    --secondary: #64748B;\r\n    --accent: #60A5FA;\r\n    --danger: #EF4444;\r\n    --success: #2563EB;\r\n  }\r\n  * { margin:0; padding:0; box-sizing:border-box; }\r\n  html, body {\r\n    width:100%;\r\n    font-family:\"Inter\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\r\n    color:var(--text);\r\n    background:var(--bg);\r\n  }\r\n  h1, h2, h3 { font-family:\"Manrope\", \"Inter\", sans-serif; }\r\n  img { max-width:100%; display:block; }\r\n  button { font-family:inherit; cursor:pointer; border:none; background:none; }\r\n  ul { list-style:none; }\r\n\r\n  .why__decor { position:absolute; inset:0; pointer-events:none; z-index:0; }\r\n  .why__decor-blur { position:absolute; border-radius:50%; background:var(--primary); opacity:.07; filter:blur(80px); }\r\n  .why__decor-blur--c1 { width:420px; height:420px; top:-140px; left:-160px; }\r\n  .why__decor-blur--c2 { width:320px; height:320px; bottom:-100px; right:-120px; background:var(--accent); }\r\n  .why__decor-grid {\r\n    position:absolute; top:40px; right:80px; width:160px; height:120px;\r\n    background-image:radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px);\r\n    background-size:20px 20px; opacity:.12;\r\n  }\r\n  .why__decor-ring {\r\n    position:absolute; top:12%; left:6%; width:220px; height:220px;\r\n    border:1px solid rgba(37,99,235,.15); border-radius:50%;\r\n  }\r\n  .why__decor-particle { position:absolute; border-radius:50%; background:var(--accent); opacity:.45; }\r\n  .why__decor-particle--p1 { width:7px; height:7px; top:18%; left:12%; }\r\n  .why__decor-particle--p2 { width:5px; height:5px; top:75%; right:16%; }\r\n\r\n  .why__header {\r\n    position:relative;\r\n    z-index:1;\r\n    text-align:center;\r\n    max-width:820px;\r\n    margin:0 auto 32px;\r\n    opacity:0;\r\n    transform:translateY(40px);\r\n  }\r\n  .why__badge {\r\n    display:inline-flex; align-items:center; gap:8px;\r\n    padding:8px 20px; background:#EFF6FF; color:var(--primary);\r\n    font-size:14px; font-weight:600; border-radius:999px; margin-bottom:20px;\r\n    letter-spacing:.3px;\r\n  }\r\n  .why__heading { font-size:48px; font-weight:800; line-height:1.15; letter-spacing:-1.5px; color:var(--text); }\r\n  .why__gradient {\r\n    background:linear-gradient(90deg, var(--primary), var(--accent));\r\n    -webkit-background-clip:text; background-clip:text; color:transparent;\r\n  }\r\n  .why__desc { margin-top:16px; font-size:18px; line-height:1.7; color:var(--secondary); }\r\n\r\n  .why__rail {\r\n    position:absolute; left:24px; top:50%; transform:translateY(-50%);\r\n    z-index:2; display:flex; flex-direction:column; align-items:center;\r\n    opacity:0;\r\n  }\r\n  .why__rail-item { position:relative; display:flex; flex-direction:column; align-items:center; height:64px; }\r\n  .why__rail-item:last-child { height:auto; }\r\n  .why__rail-item::after {\r\n    content:''; position:absolute; top:28px; left:50%; transform:translateX(-50%);\r\n    width:1px; height:36px; background:#E2E8F0;\r\n  }\r\n  .why__rail-item:last-child::after { display:none; }\r\n  .why__rail-num { font-size:13px; font-weight:600; color:var(--secondary); transition:color .3s ease, font-size .3s ease; }\r\n  .why__rail-dot { width:8px; height:8px; border-radius:50%; background:#CBD5E1; margin-top:6px; transition:background-color .3s ease, box-shadow .3s ease, transform .3s ease; }\r\n  .why__rail-item--active .why__rail-num { color:var(--primary); font-size:16px; font-weight:800; }\r\n  .why__rail-item--active .why__rail-dot { background:var(--primary); box-shadow:0 0 0 6px rgba(37,99,235,.15); transform:scale(1.3); }\r\n  .why__rail-item--done .why__rail-dot { background:var(--accent); }\r\n\r\n  .why__stage { position:relative; z-index:1; display:grid; grid-template-columns:1fr 64px 1fr; align-items:center; gap:0; max-width:1320px; margin:0 auto; width:100%; }\r\n\r\n  .why__panel { position:relative; min-height:560px; }\r\n  .why__panel--agency { padding-right:40px; }\r\n  .why__panel--vision { padding-left:40px; }\r\n\r\n  .why__card { position:absolute; top:0; left:0; width:100%; opacity:0; }\r\n  .why__card[data-index=\"0\"] { opacity:1; }\r\n\r\n  .why__card-status { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }\r\n  .why__card--agency .why__card-status { background:#FEE2E2; color:var(--danger); }\r\n  .why__card--vision .why__card-status { background:#DBEAFE; color:var(--success); }\r\n  .why__card-status svg { width:18px; height:18px; }\r\n\r\n  .why__card-title { font-size:34px; font-weight:700; line-height:1.2; color:var(--text); }\r\n  .why__card--vision .why__card-title { color:var(--primary); }\r\n  .why__card-desc { margin-top:14px; font-size:17px; line-height:1.7; color:var(--secondary); max-width:440px; }\r\n\r\n  .why__illustration {\r\n    position:relative; margin-top:28px; width:100%; max-width:560px; height:420px;\r\n    border-radius:24px; overflow:hidden; background-repeat:no-repeat;\r\n    background-image:var(--illu-src); background-size:1536px 1024px;\r\n    box-shadow:0 30px 60px rgba(37,99,235,.12);\r\n  }\r\n\r\n  .why__tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }\r\n  .why__tag {\r\n    display:inline-flex; align-items:center; gap:8px;\r\n    padding:10px 16px; border-radius:999px; background:#fff;\r\n    box-shadow:0 8px 20px rgba(15,23,42,.06);\r\n    font-size:14px; font-weight:600; color:var(--text);\r\n  }\r\n  .why__tag-icon { width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n  .why__tag--danger .why__tag-icon { background:#FEE2E2; color:var(--danger); }\r\n  .why__tag--success .why__tag-icon { background:#DBEAFE; color:var(--success); }\r\n  .why__tag-icon svg { width:10px; height:10px; }\r\n\r\n  .why__divider { position:relative; height:100%; display:flex; justify-content:center; }\r\n  .why__divider-track { position:absolute; top:0; bottom:0; width:2px; background:#E2E8F0; left:50%; transform:translateX(-50%); }\r\n  .why__divider-fill {\r\n    position:absolute; top:0; bottom:0; width:2px; left:50%; transform:translateX(-50%) scaleY(0);\r\n    transform-origin:top; background:linear-gradient(180deg, var(--primary), var(--accent));\r\n  }\r\n  .why__divider-glow {\r\n    position:absolute; top:0; bottom:0; width:14px; left:50%; transform:translateX(-50%);\r\n    background:linear-gradient(180deg, rgba(37,99,235,.35), rgba(96,165,250,.05));\r\n    filter:blur(8px); opacity:0;\r\n  }\r\n  .why__divider-pulse {\r\n    position:absolute; left:50%; top:0; transform:translateX(-50%);\r\n    width:10px; height:10px; border-radius:50%; background:#fff;\r\n    box-shadow:0 0 16px 6px rgba(37,99,235,.7); opacity:0;\r\n  }\r\n  .why__vs {\r\n    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);\r\n    width:52px; height:52px; border-radius:50%; z-index:2;\r\n    background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff;\r\n    display:flex; align-items:center; justify-content:center;\r\n    font-size:15px; font-weight:800; box-shadow:0 0 0 8px rgba(37,99,235,.12), 0 10px 30px rgba(37,99,235,.4);\r\n  }\r\n  .why__divider-ambient { position:absolute; left:50%; bottom:0; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--accent); opacity:0; animation:why-float 3.4s ease-in infinite; }\r\n  .why__divider-ambient:nth-child(2) { animation-delay:1.1s; margin-left:-8px; }\r\n  .why__divider-ambient:nth-child(3) { animation-delay:2.2s; margin-left:2px; }\r\n  @keyframes why-float {\r\n    0% { transform:translateY(0); opacity:0; }\r\n    15% { opacity:.8; }\r\n    85% { opacity:.4; }\r\n    100% { transform:translateY(-420px); opacity:0; }\r\n  }\r\n\r\n  .why__summary {\r\n    position:absolute; inset:0; z-index:1;\r\n    display:none;\r\n    grid-template-columns:repeat(3, 1fr); gap:24px;\r\n    max-width:1100px; margin:0 auto; align-content:center;\r\n    opacity:0;\r\n  }\r\n  .why__summary.is-visible { display:grid; }\r\n  .why__summary-item {\r\n    background:#fff; border-radius:20px; padding:24px;\r\n    box-shadow:0 15px 40px rgba(15,23,42,.06);\r\n    display:flex; align-items:flex-start; gap:14px;\r\n    opacity:0; transform:translateY(20px);\r\n  }\r\n  .why__summary-icon { width:30px; height:30px; border-radius:50%; background:#DBEAFE; color:var(--success); display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n  .why__summary-icon svg { width:16px; height:16px; }\r\n  .why__summary-title { font-size:16px; font-weight:700; color:var(--text); }\r\n\r\n  .why__cta {\r\n    position:absolute; inset:0; z-index:1;\r\n    display:flex; flex-direction:column; align-items:center; justify-content:center;\r\n    text-align:center; opacity:0; transform:translateY(40px);\r\n    pointer-events:none;\r\n  }\r\n  .why__cta-heading { font-size:32px; font-weight:800; line-height:1.3; color:var(--text); }\r\n  .why__cta-heading span { color:var(--primary); }\r\n  .why__cta-checklist { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin:24px 0 32px; }\r\n  .why__cta-checklist li { font-size:15px; font-weight:600; color:var(--secondary); }\r\n  .why__cta-btn {\r\n    display:inline-flex; align-items:center; gap:10px;\r\n    padding:18px 36px; border-radius:999px; font-size:17px; font-weight:700; color:#fff;\r\n    background:linear-gradient(90deg, var(--primary), var(--accent));\r\n    box-shadow:0 15px 40px rgba(37,99,235,.35);\r\n    transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;\r\n  }\r\n  .why__cta-btn svg { width:18px; height:18px; }\r\n  .why__cta-btn:hover { transform:scale(1.04); box-shadow:0 20px 50px rgba(37,99,235,.45); }\r\n\r\n  .why__wrapper { position:relative; height:500vh; }\r\n  .why__pin {\r\n    position:relative;\r\n    height:100vh;\r\n    width:100%;\r\n    overflow:hidden;\r\n    background:linear-gradient(180deg, #FFFFFF, var(--bg));\r\n    display:flex;\r\n    flex-direction:column;\r\n    justify-content:center;\r\n    padding:0 64px;\r\n  }\r\n  .why__particle-layer { position:fixed; inset:0; pointer-events:none; z-index:80; }\r\n\r\n  .why-mobile { display:none; padding:80px 24px; }\r\n  .why-mobile__header { text-align:center; max-width:600px; margin:0 auto 40px; }\r\n  .why-mobile__list { display:flex; flex-direction:column; gap:20px; max-width:800px; margin:0 auto; }\r\n  .why-mobile__item { background:#fff; border-radius:24px; box-shadow:0 15px 45px rgba(0,0,0,.06); overflow:hidden; }\r\n  .why-mobile__toggle { width:100%; display:flex; align-items:center; gap:16px; padding:24px; text-align:left; }\r\n  .why-mobile__node { flex-shrink:0; width:44px; height:44px; border-radius:50%; background:#EFF6FF; color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; }\r\n  .why-mobile__item--active .why-mobile__node { background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; }\r\n  .why-mobile__toggle-title { flex:1; font-size:17px; font-weight:700; color:var(--text); }\r\n  .why-mobile__chevron { width:20px; height:20px; color:var(--secondary); transition:transform .3s ease; }\r\n  .why-mobile__item--active .why-mobile__chevron { transform:rotate(180deg); }\r\n  .why-mobile__body { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease; }\r\n  .why-mobile__item--active .why-mobile__body { grid-template-rows:1fr; opacity:1; }\r\n  .why-mobile__body-inner { overflow:hidden; }\r\n  .why-mobile__body-content { padding:0 24px 24px; }\r\n  .why-mobile__col { padding:16px 0; border-top:1px solid #F1F5F9; }\r\n  .why-mobile__col:first-child { border-top:none; }\r\n  .why-mobile__col-label { font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px; }\r\n  .why-mobile__col--agency .why-mobile__col-label { color:var(--danger); }\r\n  .why-mobile__col--vision .why-mobile__col-label { color:var(--success); }\r\n  .why-mobile__col-title { font-size:16px; font-weight:700; color:var(--text); }\r\n  .why-mobile__col-desc { font-size:14px; color:var(--secondary); margin-top:4px; line-height:1.6; }\r\n  .why-mobile__col .why__tags { margin-top:12px; }\r\n  .why-mobile__illustration { margin-top:12px; width:100%; height:220px; border-radius:16px; overflow:hidden; background-repeat:no-repeat; background-size:1536px 1024px; }\r\n\r\n  @media (max-width:1023px) {\r\n    .why-desktop { display:none; }\r\n    .why-mobile { display:block; }\r\n  }\r\n  @media (min-width:768px) and (max-width:1023px) {\r\n    .why-mobile__body { display:block; grid-template-rows:none; opacity:1; }\r\n    .why-mobile__chevron { display:none; }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9dba017 e-con-full e-flex e-con e-parent\" data-id=\"9dba017\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-229ba89 e-con-full e-flex e-con e-parent\" data-id=\"229ba89\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c813e1 elementor-widget elementor-widget-html\" data-id=\"5c813e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"plans\">\r\n  <div class=\"plans__inner\">\r\n    <div class=\"plans__decor\" aria-hidden=\"true\">\r\n      <div class=\"plans__decor-blur plans__decor-blur--c1\"><\/div>\r\n      <div class=\"plans__decor-blur plans__decor-blur--c2\"><\/div>\r\n      <div class=\"plans__decor-ring\"><\/div>\r\n      <div class=\"plans__decor-grid\"><\/div>\r\n      <div class=\"plans__decor-particle plans__decor-particle--p1\"><\/div>\r\n      <div class=\"plans__decor-particle plans__decor-particle--p2\"><\/div>\r\n    <\/div>\r\n\r\n    <header class=\"plans__header\">\r\n      <span class=\"plans__badge\">GI\u1ea2I PH\u00c1P D\u00c0NH CHO B\u1ea0N<\/span>\r\n      <h2 class=\"plans__heading\">Plans That Scale With You<\/h2>\r\n      <p class=\"plans__subheading\">Gi\u1ea3i ph\u00e1p website ph\u00e1t tri\u1ec3n<br>c\u00f9ng doanh nghi\u1ec7p c\u1ee7a b\u1ea1n.<\/p>\r\n      <p class=\"plans__desc\">D\u00f9 b\u1ea1n l\u00e0 Startup, doanh nghi\u1ec7p \u0111ang t\u0103ng tr\u01b0\u1edfng<br>hay t\u1eadp \u0111o\u00e0n l\u1edbn, ch\u00fang t\u00f4i \u0111\u1ec1u c\u00f3 gi\u1ea3i ph\u00e1p ph\u00f9 h\u1ee3p.<\/p>\r\n    <\/header>\r\n\r\n    <div class=\"plans__row\">\r\n      <div class=\"plans__line\">\r\n        <div class=\"plans__line-track\"><\/div>\r\n        <div class=\"plans__line-glow\"><\/div>\r\n        <div class=\"plans__line-fill\"><\/div>\r\n        <span class=\"plans__line-particle\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"plans-mobile\">\r\n      <div class=\"plans-mobile__track\"><\/div>\r\n      <div class=\"plans-mobile__dots\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"plans__cta\">\r\n      <h3 class=\"plans__cta-heading\">Kh\u00f4ng ch\u1eafc n\u00ean ch\u1ecdn g\u00f3i n\u00e0o?<\/h3>\r\n      <p class=\"plans__cta-desc\">\u0110\u1ed9i ng\u0169 chuy\u00ean gia s\u1ebd t\u01b0 v\u1ea5n gi\u1ea3i ph\u00e1p ph\u00f9 h\u1ee3p<br>v\u1edbi ng\u00e2n s\u00e1ch v\u00e0 m\u1ee5c ti\u00eau doanh nghi\u1ec7p.<\/p>\r\n      <div class=\"plans__cta-actions\">\r\n        <button class=\"plans__cta-btn plans__cta-btn--primary\">\u0110\u1eb7t l\u1ecbch t\u01b0 v\u1ea5n mi\u1ec5n ph\u00ed<\/button>\r\n        <button class=\"plans__cta-btn plans__cta-btn--secondary\">Xem Portfolio<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const icons = {\r\n    rocket: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"\/><path d=\"M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"\/><path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\"\/><path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\"\/><\/svg>',\r\n    check: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>',\r\n    chevron: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>'\r\n  };\r\n\r\n  const plans = [\r\n    {\r\n      id: \"startup\", icon: \"rocket\", name: \"Startup\", sub: \"D\u00e0nh cho doanh nghi\u1ec7p m\u1edbi.\",\r\n      priceLabel: \"T\u1eeb\", price: \"5.000.000\u0111\",\r\n      features: [\"Landing Page\", \"Responsive\", \"SEO Basic\", \"Form li\u00ean h\u1ec7\", \"Hosting Setup\"],\r\n      button: \"B\u1eaft \u0111\u1ea7u ngay\", illustration: \"plan1.png\", badge: null,\r\n      detail: {\r\n        timeline: [\r\n          { phase: \"Kh\u1ea3o s\u00e1t & L\u00ean k\u1ebf ho\u1ea1ch\", time: \"Ng\u00e0y 1\u20132\" },\r\n          { phase: \"Thi\u1ebft k\u1ebf UI\", time: \"Ng\u00e0y 3\u20135\" },\r\n          { phase: \"L\u1eadp tr\u00ecnh & T\u00edch h\u1ee3p\", time: \"Ng\u00e0y 6\u20139\" },\r\n          { phase: \"Ki\u1ec3m th\u1eed & B\u00e0n giao\", time: \"Ng\u00e0y 10\u201312\" }\r\n        ],\r\n        deliverables: [\"Landing Page ho\u00e0n ch\u1ec9nh\", \"Responsive \u0111a thi\u1ebft b\u1ecb\", \"SEO Basic (meta, sitemap)\", \"Form li\u00ean h\u1ec7 t\u00edch h\u1ee3p email\", \"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng\"],\r\n        stack: [\"HTML5 \/ CSS3\", \"WordPress ho\u1eb7c Static Site\", \"SSL mi\u1ec5n ph\u00ed\", \"Google Analytics c\u01a1 b\u1ea3n\"],\r\n        estimatedTime: \"7\u201312 ng\u00e0y l\u00e0m vi\u1ec7c\",\r\n        support: \"H\u1ed7 tr\u1ee3 30 ng\u00e0y sau b\u00e0n giao\",\r\n        faq: [\r\n          { q: \"C\u00f3 c\u1ea7n t\u00ean mi\u1ec1n ri\u00eang kh\u00f4ng?\", a: \"Ch\u00fang t\u00f4i h\u1ed7 tr\u1ee3 \u0111\u0103ng k\u00fd\/tr\u1ecf t\u00ean mi\u1ec1n mi\u1ec5n ph\u00ed trong g\u00f3i.\" },\r\n          { q: \"C\u00f3 th\u1ec3 n\u00e2ng c\u1ea5p l\u00ean g\u00f3i Growth sau n\u00e0y kh\u00f4ng?\", a: \"C\u00f3, ch\u00fang t\u00f4i h\u1ed7 tr\u1ee3 n\u00e2ng c\u1ea5p b\u1ea5t k\u1ef3 l\u00fac n\u00e0o, gi\u1eef nguy\u00ean d\u1eef li\u1ec7u.\" }\r\n        ]\r\n      }\r\n    },\r\n    {\r\n      id: \"growth\", icon: null, name: \"Growth\", sub: null,\r\n      priceLabel: \"T\u1eeb\", price: \"15.000.000\u0111\",\r\n      features: [\"Website \u0111a trang\", \"CMS\", \"SEO Technical\", \"Blog\", \"Analytics\", \"T\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9\", \"T\u00edch h\u1ee3p API\"],\r\n      button: \"Kh\u00e1m ph\u00e1\", illustration: \"plan2.png\", badge: \"MOST POPULAR\",\r\n      detail: {\r\n        timeline: [\r\n          { phase: \"Kh\u1ea3o s\u00e1t & Chi\u1ebfn l\u01b0\u1ee3c\", time: \"Tu\u1ea7n 1\" },\r\n          { phase: \"UI\/UX \u0111a trang\", time: \"Tu\u1ea7n 2\" },\r\n          { phase: \"L\u1eadp tr\u00ecnh CMS & T\u00edch h\u1ee3p API\", time: \"Tu\u1ea7n 3\u20134\" },\r\n          { phase: \"SEO Technical & T\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9\", time: \"Tu\u1ea7n 5\" },\r\n          { phase: \"Ki\u1ec3m th\u1eed & Ra m\u1eaft\", time: \"Tu\u1ea7n 6\" }\r\n        ],\r\n        deliverables: [\"Website \u0111a trang (t\u1ed1i \u0111a 10 trang)\", \"CMS qu\u1ea3n tr\u1ecb n\u1ed9i dung\", \"Blog t\u00edch h\u1ee3p\", \"Analytics Dashboard\", \"T\u00e0i li\u1ec7u v\u1eadn h\u00e0nh\"],\r\n        stack: [\"WordPress \/ Headless CMS\", \"REST API \/ GraphQL\", \"Google Analytics 4\", \"Cloudflare CDN\"],\r\n        estimatedTime: \"4\u20136 tu\u1ea7n\",\r\n        support: \"H\u1ed7 tr\u1ee3 90 ng\u00e0y + b\u1ea3o tr\u00ec \u0111\u1ecbnh k\u1ef3\",\r\n        faq: [\r\n          { q: \"C\u00f3 t\u1ed1i \u01b0u SEO ngay t\u1eeb \u0111\u1ea7u kh\u00f4ng?\", a: \"C\u00f3, SEO Technical \u0111\u01b0\u1ee3c tri\u1ec3n khai song song v\u1edbi l\u1eadp tr\u00ecnh.\" },\r\n          { q: \"C\u00f3 th\u1ec3 t\u00edch h\u1ee3p h\u1ec7 th\u1ed1ng b\u00ean th\u1ee9 ba kh\u00f4ng?\", a: \"C\u00f3, g\u00f3i h\u1ed7 tr\u1ee3 t\u00edch h\u1ee3p API v\u1edbi CRM\/ERP\/thanh to\u00e1n ph\u1ed5 bi\u1ebfn.\" }\r\n        ]\r\n      }\r\n    },\r\n    {\r\n      id: \"enterprise\", icon: null, name: \"Enterprise\", sub: null,\r\n      priceLabel: null, price: \"Li\u00ean h\u1ec7\",\r\n      features: [\"Custom Development\", \"ERP\", \"CRM\", \"AI\", \"Cloud\", \"Security\", \"Maintenance\"],\r\n      button: \"Li\u00ean h\u1ec7 t\u01b0 v\u1ea5n\", illustration: \"plan3.png\", badge: null,\r\n      detail: {\r\n        timeline: [\r\n          { phase: \"T\u01b0 v\u1ea5n & Ph\u00e2n t\u00edch y\u00eau c\u1ea7u\", time: \"Giai \u0111o\u1ea1n 1\" },\r\n          { phase: \"Ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng & Thi\u1ebft k\u1ebf\", time: \"Giai \u0111o\u1ea1n 2\" },\r\n          { phase: \"Ph\u00e1t tri\u1ec3n Custom & T\u00edch h\u1ee3p ERP\/CRM\/AI\", time: \"Giai \u0111o\u1ea1n 3\" },\r\n          { phase: \"B\u1ea3o m\u1eadt & Ki\u1ec3m th\u1eed t\u1ea3i\", time: \"Giai \u0111o\u1ea1n 4\" },\r\n          { phase: \"Tri\u1ec3n khai & \u0110\u00e0o t\u1ea1o\", time: \"Giai \u0111o\u1ea1n 5\" }\r\n        ],\r\n        deliverables: [\"N\u1ec1n t\u1ea3ng web tu\u1ef3 ch\u1ec9nh ho\u00e0n to\u00e0n\", \"T\u00edch h\u1ee3p ERP\/CRM\/AI\", \"H\u1ea1 t\u1ea7ng Cloud c\u00f3 kh\u1ea3 n\u0103ng m\u1edf r\u1ed9ng\", \"T\u00e0i li\u1ec7u k\u1ef9 thu\u1eadt \u0111\u1ea7y \u0111\u1ee7\"],\r\n        stack: [\"Ki\u1ebfn tr\u00fac Microservices\", \"Cloud (AWS \/ Azure \/ GCP)\", \"AI\/ML tu\u1ef3 ch\u1ec9nh\", \"B\u1ea3o m\u1eadt chu\u1ea9n doanh nghi\u1ec7p\"],\r\n        estimatedTime: \"Tu\u1ef3 ph\u1ea1m vi \u2014 kh\u1ea3o s\u00e1t \u0111\u1ec3 b\u00e1o gi\u00e1 & timeline chi ti\u1ebft\",\r\n        support: \"\u0110\u1ed3ng h\u00e0nh d\u00e0i h\u1ea1n, SLA 24\/7\",\r\n        faq: [\r\n          { q: \"Chi ph\u00ed \u0111\u01b0\u1ee3c t\u00ednh nh\u01b0 th\u1ebf n\u00e0o?\", a: \"D\u1ef1a tr\u00ean ph\u1ea1m vi, \u0111\u1ed9 ph\u1ee9c t\u1ea1p v\u00e0 y\u00eau c\u1ea7u t\u00edch h\u1ee3p c\u1ee5 th\u1ec3 c\u1ee7a doanh nghi\u1ec7p.\" },\r\n          { q: \"C\u00f3 h\u1ed7 tr\u1ee3 SLA cam k\u1ebft uptime kh\u00f4ng?\", a: \"C\u00f3, g\u00f3i Enterprise \u0111i k\u00e8m SLA gi\u00e1m s\u00e1t 24\/7 v\u00e0 cam k\u1ebft th\u1eddi gian ph\u1ea3n h\u1ed3i.\" }\r\n        ]\r\n      }\r\n    }\r\n  ];\r\n\r\n  function featureItem(text) {\r\n    return `<li><span class=\"plans__card-feature-icon\">${icons.check}<\/span>${text}<\/li>`;\r\n  }\r\n\r\n  function detailBlock(plan) {\r\n    const d = plan.detail;\r\n    return `\r\n      <div class=\"plans__card-detail\">\r\n        <div class=\"plans__card-detail-inner\">\r\n          <div class=\"plans__detail-section\">\r\n            <div class=\"plans__detail-label\">Timeline tri\u1ec3n khai<\/div>\r\n            <ul class=\"plans__detail-timeline\">\r\n              ${d.timeline.map(t => `<li><span>${t.phase}<\/span><span>${t.time}<\/span><\/li>`).join('')}\r\n            <\/ul>\r\n          <\/div>\r\n          <div class=\"plans__detail-section\">\r\n            <div class=\"plans__detail-label\">Deliverables<\/div>\r\n            <ul class=\"plans__detail-list\">${d.deliverables.map(x => `<li>${x}<\/li>`).join('')}<\/ul>\r\n          <\/div>\r\n          <div class=\"plans__detail-section\">\r\n            <div class=\"plans__detail-label\">Technology Stack<\/div>\r\n            <div class=\"plans__detail-stack\">${d.stack.map(x => `<span>${x}<\/span>`).join('')}<\/div>\r\n          <\/div>\r\n          <div class=\"plans__detail-section\">\r\n            <div class=\"plans__detail-label\">Estimated Time<\/div>\r\n            <div class=\"plans__detail-meta\">${d.estimatedTime}<\/div>\r\n          <\/div>\r\n          <div class=\"plans__detail-section\">\r\n            <div class=\"plans__detail-label\">Support<\/div>\r\n            <div class=\"plans__detail-meta\">${d.support}<\/div>\r\n          <\/div>\r\n          <div class=\"plans__detail-section\">\r\n            <div class=\"plans__detail-label\">FAQ<\/div>\r\n            ${d.faq.map(f => `<div class=\"plans__detail-faq-item\"><strong>${f.q}<\/strong><span>${f.a}<\/span><\/div>`).join('')}\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  function renderCard(plan, index) {\r\n    return `\r\n      <article class=\"plans__card ${plan.badge ? 'plans__card--featured' : ''}\" data-plan=\"${plan.id}\">\r\n        ${plan.badge ? `<span class=\"plans__card-badge\">${plan.badge}<\/span>` : ''}\r\n        ${plan.icon ? `<div class=\"plans__card-icon\">${icons[plan.icon]}<\/div>` : ''}\r\n        <h3 class=\"plans__card-title\">${plan.name}<\/h3>\r\n        ${plan.sub ? `<p class=\"plans__card-sub\">${plan.sub}<\/p>` : ''}\r\n        <div class=\"plans__card-illustration\"><img src=\"${plan.illustration}\" alt=\"\" ${index === 0 ? 'loading=\"eager\" fetchpriority=\"high\"' : 'loading=\"lazy\"'} decoding=\"async\"><\/div>\r\n        <div class=\"plans__card-price\">\r\n          ${plan.priceLabel ? `<span class=\"plans__card-price-label\">${plan.priceLabel}<\/span>` : ''}\r\n          <span class=\"plans__card-price-value\">${plan.price}<\/span>\r\n        <\/div>\r\n        <ul class=\"plans__card-features\">${plan.features.map(featureItem).join('')}<\/ul>\r\n        <button class=\"plans__card-btn\">${plan.button}<\/button>\r\n        <button class=\"plans__card-toggle\" type=\"button\">Xem chi ti\u1ebft tri\u1ec3n khai ${icons.chevron}<\/button>\r\n        ${detailBlock(plan)}\r\n      <\/article>\r\n    `;\r\n  }\r\n\r\n  const rowEl = document.querySelector('.plans__row');\r\n\r\n  function renderRow() {\r\n    rowEl.insertAdjacentHTML('beforeend', plans.map(renderCard).join(''));\r\n  }\r\n  renderRow();\r\n\r\n  const carouselTrackEl = document.querySelector('.plans-mobile__track');\r\n  const carouselDotsEl = document.querySelector('.plans-mobile__dots');\r\n\r\n  function renderCarousel() {\r\n    carouselTrackEl.innerHTML = plans.map(renderCard).join('');\r\n    carouselDotsEl.innerHTML = plans.map((_, i) => `<span class=\"plans-mobile__dot ${i === 0 ? 'plans-mobile__dot--active' : ''}\" data-index=\"${i}\"><\/span>`).join('');\r\n\r\n    carouselTrackEl.querySelectorAll('.plans__card-toggle').forEach((toggle) => {\r\n      toggle.addEventListener('click', () => {\r\n        toggle.closest('.plans__card').classList.toggle('is-expanded');\r\n      });\r\n    });\r\n\r\n    const cards = Array.from(carouselTrackEl.querySelectorAll('.plans__card'));\r\n    const dots = Array.from(carouselDotsEl.querySelectorAll('.plans-mobile__dot'));\r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach((entry) => {\r\n        if (entry.isIntersecting) {\r\n          const index = cards.indexOf(entry.target);\r\n          dots.forEach((dot, i) => dot.classList.toggle('plans-mobile__dot--active', i === index));\r\n        }\r\n      });\r\n    }, { root: carouselTrackEl, threshold: 0.6 });\r\n    cards.forEach((card) => observer.observe(card));\r\n  }\r\n  renderCarousel();\r\n\r\n  const particleLayerEl = document.createElement('div');\r\n  particleLayerEl.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:80;';\r\n  document.body.appendChild(particleLayerEl);\r\n\r\n  function sparkBurst(card) {\r\n    const rect = card.getBoundingClientRect();\r\n    const created = [];\r\n    for (let i = 0; i < 10; i++) {\r\n      const p = document.createElement('span');\r\n      p.style.cssText = 'position:absolute;width:4px;height:4px;border-radius:50%;background:#60A5FA;box-shadow:0 0 6px 2px rgba(96,165,250,.8);opacity:0;';\r\n      const x = rect.left + gsap.utils.random(0, rect.width);\r\n      const y = rect.top + rect.height - gsap.utils.random(0, 40);\r\n      p.style.left = x + 'px';\r\n      p.style.top = y + 'px';\r\n      particleLayerEl.appendChild(p);\r\n      created.push(p);\r\n    }\r\n    gsap.to(created, {\r\n      opacity: 1,\r\n      y: () => gsap.utils.random(-60, -100),\r\n      x: () => gsap.utils.random(-20, 20),\r\n      duration: 0.5,\r\n      ease: 'power2.out',\r\n      stagger: 0.02,\r\n      onComplete: () => {\r\n        gsap.to(created, { opacity: 0, duration: 0.3, onComplete: () => created.forEach(p => p.remove()) });\r\n      }\r\n    });\r\n  }\r\n\r\n  document.querySelectorAll('.plans__card').forEach((card) => {\r\n    card.addEventListener('mouseenter', () => {\r\n      gsap.to(card, { y: -16, scale: 1.03, duration: 0.35, ease: 'power2.out' });\r\n      sparkBurst(card);\r\n    });\r\n    card.addEventListener('mouseleave', () => {\r\n      gsap.to(card, { y: 0, scale: 1, duration: 0.35, ease: 'power2.out' });\r\n    });\r\n  });\r\n\r\n  document.querySelectorAll('.plans__card-toggle').forEach((toggle) => {\r\n    toggle.addEventListener('click', () => {\r\n      const card = toggle.closest('.plans__card');\r\n      card.classList.toggle('is-expanded');\r\n    });\r\n  });\r\n\r\n  gsap.registerPlugin(ScrollTrigger);\r\n\r\n  const headerEl = document.querySelector('.plans__header');\r\n  const cardEls = gsap.utils.toArray('.plans__card');\r\n  const lineFillEl = document.querySelector('.plans__line-fill');\r\n  const lineGlowEl = document.querySelector('.plans__line-glow');\r\n\r\n  gsap.matchMedia().add('(min-width: 1024px)', () => {\r\n    const tl = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: '.plans',\r\n        start: 'top 75%',\r\n        end: 'bottom bottom',\r\n        scrub: 0.6\r\n      }\r\n    });\r\n\r\n    tl.to(headerEl, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.08, ease: 'power2.out' }, 0);\r\n\r\n    tl.to(lineGlowEl, { opacity: 1, duration: 0.6, ease: 'power2.out' }, 0.1);\r\n    tl.to(lineFillEl, { scaleX: 1, duration: 0.7, ease: 'none' }, 0.1);\r\n\r\n    cardEls.forEach((card, i) => {\r\n      tl.fromTo(card,\r\n        { opacity: 0, y: 80, scale: 0.92 },\r\n        { opacity: 1, y: 0, scale: 1, duration: 0.15, ease: 'power2.out' },\r\n        0.12 + i * 0.2\r\n      );\r\n    });\r\n\r\n    tl.fromTo('.plans__cta',\r\n      { opacity: 0, scale: 0.95 },\r\n      { opacity: 1, scale: 1, duration: 0.15, ease: 'power2.out' },\r\n      0.85\r\n    );\r\n\r\n    return () => tl.scrollTrigger && tl.scrollTrigger.kill();\r\n  });\r\n});\r\n  \/\/ ANCHOR: animation-js\r\n<\/script>\r\n<style>\r\n  :root {\r\n    --bg: #F8FBFF;\r\n    --primary: #2563EB;\r\n    --accent: #60A5FA;\r\n    --text: #0F172A;\r\n    --secondary: #64748B;\r\n    --card: rgba(255,255,255,.75);\r\n    --glass-border: rgba(37,99,235,.15);\r\n  }\r\n  * { margin:0; padding:0; box-sizing:border-box; }\r\n  html, body {\r\n    width:100%;\r\n    font-family:\"Inter\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\r\n    color:var(--text);\r\n    background:var(--bg);\r\n  }\r\n  h1, h2, h3 { font-family:\"Manrope\", \"Inter\", sans-serif; }\r\n  img { max-width:100%; display:block; }\r\n  button { font-family:inherit; cursor:pointer; border:none; background:none; }\r\n  ul { list-style:none; }\r\n\r\n  .plans__decor { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }\r\n  .plans__decor-blur { position:absolute; border-radius:50%; background:var(--primary); opacity:.06; filter:blur(90px); }\r\n  .plans__decor-blur--c1 { width:460px; height:460px; top:-120px; left:-180px; }\r\n  .plans__decor-blur--c2 { width:360px; height:360px; bottom:0; right:-140px; background:var(--accent); }\r\n  .plans__decor-ring { position:absolute; top:20%; right:8%; width:240px; height:240px; border:1px solid rgba(37,99,235,.12); border-radius:50%; }\r\n  .plans__decor-grid {\r\n    position:absolute; bottom:10%; left:4%; width:180px; height:130px;\r\n    background-image:radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px);\r\n    background-size:22px 22px; opacity:.1;\r\n  }\r\n  .plans__decor-particle { position:absolute; border-radius:50%; background:var(--accent); opacity:.4; }\r\n  .plans__decor-particle--p1 { width:6px; height:6px; top:12%; left:20%; }\r\n  .plans__decor-particle--p2 { width:5px; height:5px; bottom:16%; right:22%; }\r\n\r\n  .plans__header {\r\n    position:relative; z-index:1; text-align:center; max-width:780px; margin:0 auto 80px;\r\n    opacity:0; transform:translateY(40px); filter:blur(8px);\r\n  }\r\n  .plans__badge {\r\n    display:inline-flex; align-items:center; gap:8px;\r\n    padding:8px 20px; background:#EFF6FF; color:var(--primary);\r\n    font-size:14px; font-weight:600; border-radius:999px; margin-bottom:24px; letter-spacing:.3px;\r\n  }\r\n  .plans__heading { font-size:56px; font-weight:800; line-height:1.1; letter-spacing:-1.5px; color:var(--text); }\r\n  .plans__subheading { margin-top:16px; font-size:22px; font-weight:600; color:var(--primary); line-height:1.4; }\r\n  .plans__desc { margin-top:16px; font-size:18px; line-height:1.7; color:var(--secondary); }\r\n\r\n  .plans__row { position:relative; z-index:1; display:grid; grid-template-columns: 1fr 1.12fr 1fr; gap:32px; align-items:start; }\r\n\r\n  .plans__line { position:absolute; left:24px; right:24px; top:120px; height:2px; z-index:0; }\r\n  .plans__line-track { position:absolute; inset:0; background:#E2E8F0; }\r\n  .plans__line-fill { position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, var(--primary), var(--accent)); }\r\n  .plans__line-glow { position:absolute; left:0; right:0; top:50%; height:12px; transform:translateY(-50%); background:linear-gradient(90deg, rgba(37,99,235,.3), rgba(96,165,250,.05)); filter:blur(8px); opacity:0; }\r\n  .plans__line-particle {\r\n    position:absolute; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%;\r\n    background:var(--accent); box-shadow:0 0 8px 2px rgba(96,165,250,.7);\r\n    animation:plans-line-run 3.2s linear infinite;\r\n  }\r\n  @keyframes plans-line-run {\r\n    0% { left:0%; opacity:0; }\r\n    10% { opacity:1; }\r\n    90% { opacity:1; }\r\n    100% { left:100%; opacity:0; }\r\n  }\r\n\r\n  .plans__card {\r\n    position:relative; z-index:1; text-align:center;\r\n    background:var(--card); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);\r\n    border:1px solid var(--glass-border); border-radius:28px; padding:40px 32px;\r\n    opacity:0; will-change:transform, opacity;\r\n    box-shadow:0 20px 60px rgba(15,23,42,.06);\r\n  }\r\n  .plans__card--featured { padding:52px 36px; border-color:rgba(37,99,235,.3); }\r\n  .plans__card-badge {\r\n    position:absolute; top:-14px; left:50%; transform:translateX(-50%);\r\n    background:linear-gradient(90deg, var(--primary), var(--accent)); color:#fff;\r\n    font-size:12px; font-weight:700; letter-spacing:.5px; padding:6px 18px; border-radius:999px;\r\n    box-shadow:0 8px 20px rgba(37,99,235,.35);\r\n  }\r\n  .plans__card-icon { width:48px; height:48px; margin:0 auto 16px; color:var(--primary); }\r\n  .plans__card-icon svg { width:100%; height:100%; }\r\n  .plans__card-title { font-size:32px; font-weight:700; color:var(--text); }\r\n  .plans__card-sub { margin-top:8px; font-size:15px; color:var(--secondary); }\r\n  .plans__card-illustration { margin:24px auto; width:100%; max-width:360px; border-radius:20px; overflow:hidden; }\r\n  .plans__card-illustration img { width:100%; height:auto; transition:transform .4s ease; }\r\n  .plans__card-price { margin:20px 0; display:flex; align-items:baseline; justify-content:center; gap:8px; }\r\n  .plans__card-price-label { font-size:15px; color:var(--secondary); }\r\n  .plans__card-price-value { font-size:40px; font-weight:800; color:var(--text); }\r\n  .plans__card-features { display:flex; flex-direction:column; gap:14px; margin-bottom:28px; text-align:left; }\r\n  .plans__card-features li { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--text); }\r\n  .plans__card-feature-icon { width:20px; height:20px; border-radius:50%; background:#DBEAFE; color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n  .plans__card-feature-icon svg { width:11px; height:11px; }\r\n  .plans__card-btn {\r\n    display:block; width:100%; padding:16px; border-radius:999px; font-size:16px; font-weight:700; color:#fff;\r\n    background:linear-gradient(90deg, var(--primary), var(--accent));\r\n    box-shadow:0 12px 30px rgba(37,99,235,.3);\r\n    transition:box-shadow .3s ease;\r\n  }\r\n  .plans__card:hover { border-color:rgba(37,99,235,.4); box-shadow:0 30px 70px rgba(37,99,235,.18); }\r\n  .plans__card:hover .plans__card-btn { box-shadow:0 16px 40px rgba(37,99,235,.45); }\r\n  .plans__card:hover .plans__card-illustration img { transform:translateY(-6px); }\r\n  .plans__card--featured { box-shadow:0 25px 60px rgba(37,99,235,.12); animation:plans-featured-glow 3.6s ease-in-out infinite; }\r\n  @keyframes plans-featured-glow {\r\n    0%, 100% { box-shadow:0 25px 60px rgba(37,99,235,.12); }\r\n    50% { box-shadow:0 25px 70px rgba(37,99,235,.22); }\r\n  }\r\n  .plans__card--featured .plans__card-illustration img { animation:plans-illustration-float 4.5s ease-in-out infinite; }\r\n  @keyframes plans-illustration-float {\r\n    0%, 100% { transform:translateY(0); }\r\n    50% { transform:translateY(-10px); }\r\n  }\r\n  .plans__card-toggle {\r\n    display:inline-flex; align-items:center; gap:6px; margin-top:16px;\r\n    font-size:14px; font-weight:600; color:var(--secondary);\r\n  }\r\n  .plans__card-toggle svg { width:14px; height:14px; transition:transform .3s ease; }\r\n  .plans__card.is-expanded .plans__card-toggle svg { transform:rotate(180deg); }\r\n\r\n  .plans__card-detail { display:grid; grid-template-rows:0fr; opacity:0; text-align:left; transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }\r\n  .plans__card.is-expanded .plans__card-detail { grid-template-rows:1fr; opacity:1; }\r\n  .plans__card-detail-inner { overflow:hidden; }\r\n  .plans__detail-section { padding-top:24px; margin-top:24px; border-top:1px solid rgba(37,99,235,.12); }\r\n  .plans__detail-label { font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--primary); margin-bottom:12px; }\r\n  .plans__detail-timeline { display:flex; flex-direction:column; gap:10px; }\r\n  .plans__detail-timeline li { display:flex; justify-content:space-between; gap:12px; font-size:14px; }\r\n  .plans__detail-timeline li span:last-child { color:var(--secondary); flex-shrink:0; }\r\n  .plans__detail-list { display:flex; flex-direction:column; gap:8px; font-size:14px; }\r\n  .plans__detail-stack { display:flex; flex-wrap:wrap; gap:8px; }\r\n  .plans__detail-stack span { padding:6px 12px; border-radius:999px; background:#EFF6FF; color:var(--primary); font-size:13px; font-weight:600; }\r\n  .plans__detail-meta { font-size:14px; color:var(--text); }\r\n  .plans__detail-faq-item { margin-bottom:12px; }\r\n  .plans__detail-faq-item strong { display:block; font-size:14px; margin-bottom:4px; }\r\n  .plans__detail-faq-item span { font-size:14px; color:var(--secondary); }\r\n\r\n  .plans__cta {\r\n    position:relative; z-index:1; text-align:center; max-width:720px; margin:120px auto 0;\r\n    opacity:0; transform:scale(0.95);\r\n  }\r\n  .plans__cta-heading { font-size:36px; font-weight:800; color:var(--text); }\r\n  .plans__cta-desc { margin-top:16px; font-size:18px; line-height:1.7; color:var(--secondary); }\r\n  .plans__cta-actions { margin-top:32px; display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }\r\n  .plans__cta-btn { padding:16px 32px; border-radius:999px; font-size:16px; font-weight:700; }\r\n  .plans__cta-btn--primary { color:#fff; background:linear-gradient(90deg, var(--primary), var(--accent)); box-shadow:0 15px 40px rgba(37,99,235,.35); transition:box-shadow .3s ease, transform .3s ease; }\r\n  .plans__cta-btn--primary:hover { box-shadow:0 20px 50px rgba(37,99,235,.45); transform:translateY(-2px); }\r\n  .plans__cta-btn--secondary { color:var(--primary); background:#EFF6FF; }\r\n  .plans__cta-btn--secondary:hover { background:#DBEAFE; }\r\n\r\n  .plans-mobile { display:none; }\r\n\r\n  @media (max-width:1023px) {\r\n    .plans__header { opacity:1; transform:none; filter:none; }\r\n    .plans__card { opacity:1; }\r\n    .plans__cta { opacity:1; transform:none; }\r\n  }\r\n\r\n  @media (min-width:768px) and (max-width:1023px) {\r\n    .plans__row { grid-template-columns:1fr 1fr; }\r\n    .plans__card--featured { grid-column:1 \/ 2; }\r\n    .plans__card:not(.plans__card--featured):nth-of-type(1) { grid-column:2 \/ 3; grid-row:1; }\r\n    .plans__card:not(.plans__card--featured):nth-of-type(3) { grid-column:1 \/ 3; grid-row:2; }\r\n    .plans__line { display:none; }\r\n  }\r\n\r\n  @media (max-width:767px) {\r\n    .plans { height:auto; padding-bottom:80px; }\r\n    .plans__row { display:none; }\r\n    .plans-mobile { display:block; position:relative; z-index:1; }\r\n    .plans-mobile__track {\r\n      display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;\r\n      padding:8px 24px 24px; -webkit-overflow-scrolling:touch;\r\n    }\r\n    .plans-mobile__track::-webkit-scrollbar { display:none; }\r\n    .plans-mobile__track .plans__card { flex:0 0 85%; scroll-snap-align:center; opacity:1; transform:none; }\r\n    .plans-mobile__dots { display:flex; justify-content:center; gap:8px; margin-top:16px; }\r\n    .plans-mobile__dot { width:8px; height:8px; border-radius:50%; background:#CBD5E1; transition:background-color .3s ease, transform .3s ease; }\r\n    .plans-mobile__dot--active { background:var(--primary); transform:scale(1.3); }\r\n    .plans__header { margin-bottom:40px; }\r\n  }\r\n\r\n  .plans { position:relative; height:250vh; }\r\n  .plans__inner { position:relative; padding:120px 64px 160px; max-width:1440px; margin:0 auto; }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a899d6b e-flex e-con-boxed e-con e-parent\" data-id=\"a899d6b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a97c54a elementor-widget elementor-widget-html\" data-id=\"a97c54a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  :root {\r\n    --bg: #F8FBFF;\r\n    --primary: #2563EB;\r\n    --accent: #60A5FA;\r\n    --text: #0F172A;\r\n    --secondary: #64748B;\r\n    --card: rgba(255,255,255,.75);\r\n    --glass-border: rgba(37,99,235,.15);\r\n  }\r\n  * { margin:0; padding:0; box-sizing:border-box; }\r\n  html, body {\r\n    width:100%;\r\n    font-family:\"Inter\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;\r\n    color:var(--text);\r\n    background:var(--bg);\r\n  }\r\n  h1, h2, h3 { font-family:\"Manrope\", \"Inter\", sans-serif; }\r\n  img { max-width:100%; display:block; }\r\n  button { font-family:inherit; cursor:pointer; border:none; background:none; }\r\n  ul { list-style:none; }\r\n\r\n  \/* ---------- decor ---------- *\/\r\n  .faq__decor { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }\r\n  .faq__decor-blur { position:absolute; border-radius:50%; background:var(--primary); opacity:.06; filter:blur(90px); }\r\n  .faq__decor-blur--c1 { width:460px; height:460px; top:-120px; left:-180px; }\r\n  .faq__decor-blur--c2 { width:380px; height:380px; bottom:-120px; right:-160px; background:var(--accent); }\r\n  .faq__decor-ring { position:absolute; top:12%; right:8%; width:220px; height:220px; border:1px solid rgba(37,99,235,.12); border-radius:50%; }\r\n  .faq__decor-grid {\r\n    position:absolute; bottom:8%; left:4%; width:180px; height:130px;\r\n    background-image:radial-gradient(circle, var(--primary) 1.5px, transparent 1.5px);\r\n    background-size:22px 22px; opacity:.1;\r\n  }\r\n  .faq__decor-particle { position:absolute; border-radius:50%; background:var(--accent); opacity:.4; }\r\n  .faq__decor-particle--p1 { width:6px; height:6px; top:24%; left:14%; }\r\n  .faq__decor-particle--p2 { width:5px; height:5px; bottom:22%; right:20%; }\r\n  .faq__decor-noise {\r\n    position:absolute; inset:0; opacity:.025; mix-blend-mode:multiply;\r\n    background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n  }\r\n\r\n  \/* ---------- layout ---------- *\/\r\n  .faq { position:relative; padding:140px 0 160px; }\r\n  .faq__inner { position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:0 64px; }\r\n\r\n  .faq__header {\r\n    position:relative; z-index:1; text-align:center; max-width:720px; margin:0 auto 88px;\r\n    opacity:0; transform:translateY(40px); filter:blur(8px);\r\n  }\r\n  .faq__badge {\r\n    display:inline-flex; align-items:center; gap:8px;\r\n    padding:8px 20px; background:#EFF6FF; color:var(--primary);\r\n    font-size:14px; font-weight:600; border-radius:999px; margin-bottom:24px; letter-spacing:.3px;\r\n  }\r\n  .faq__heading { font-size:52px; font-weight:800; line-height:1.15; letter-spacing:-1.5px; color:var(--text); }\r\n  .faq__desc { margin-top:16px; font-size:18px; line-height:1.7; color:var(--secondary); }\r\n\r\n  .faq__stage {\r\n    position:relative; z-index:1; display:grid;\r\n    grid-template-columns:2fr 3fr; gap:64px; align-items:start;\r\n  }\r\n\r\n  \/* ---------- illustration ---------- *\/\r\n  .faq__illu {\r\n    position:sticky; top:120px; height:560px; border-radius:32px; overflow:hidden;\r\n    background:linear-gradient(160deg, #EFF6FF, #F8FBFF 65%);\r\n    border:1px solid rgba(37,99,235,.1);\r\n    box-shadow:0 30px 70px rgba(37,99,235,.14), inset 0 1px 0 rgba(255,255,255,.7);\r\n    opacity:0; transform:translateY(40px) scale(.97);\r\n  }\r\n  .faq__scene {\r\n    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;\r\n    opacity:0; transform:scale(.9); pointer-events:none; transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);\r\n  }\r\n  .faq__scene--active { opacity:1; transform:scale(1); pointer-events:auto; }\r\n\r\n  .faq__panel {\r\n    position:absolute; border-radius:20px;\r\n    background:linear-gradient(135deg, rgba(255,255,255,.6), rgba(219,234,254,.35));\r\n    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);\r\n    border:1px solid rgba(255,255,255,.65);\r\n    box-shadow:0 18px 36px rgba(37,99,235,.14);\r\n  }\r\n  .faq__scene-core {\r\n    position:relative; width:132px; height:132px; border-radius:50%; z-index:2;\r\n    background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(219,234,254,.6));\r\n    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);\r\n    border:1px solid rgba(255,255,255,.85);\r\n    box-shadow:0 0 0 14px rgba(37,99,235,.06), 0 24px 50px rgba(37,99,235,.28);\r\n    display:flex; align-items:center; justify-content:center; color:var(--primary);\r\n  }\r\n  .faq__scene-core svg { width:52px; height:52px; }\r\n  .faq__dot { position:absolute; border-radius:50%; background:var(--accent); box-shadow:0 0 14px rgba(96,165,250,.65); }\r\n\r\n  \/* per-scene panel & dot placement *\/\r\n  .faq__scene--timeline .faq__panel:nth-child(1) { width:110px; height:70px; top:14%; left:9%; transform:rotate(-10deg); }\r\n  .faq__scene--timeline .faq__panel:nth-child(2) { width:90px; height:90px; bottom:16%; left:19%; transform:rotate(8deg); }\r\n  .faq__scene--timeline .faq__panel:nth-child(3) { width:130px; height:60px; top:18%; right:7%; transform:rotate(6deg); }\r\n  .faq__scene--timeline .faq__dot--a { width:10px; height:10px; top:42%; left:6%; }\r\n  .faq__scene--timeline .faq__dot--b { width:8px; height:8px; bottom:12%; right:18%; }\r\n\r\n  .faq__scene--pricing .faq__panel:nth-child(1) { width:140px; height:90px; top:12%; left:13%; transform:rotate(-6deg); }\r\n  .faq__scene--pricing .faq__panel:nth-child(2) { width:100px; height:100px; bottom:14%; right:11%; transform:rotate(10deg); }\r\n  .faq__scene--pricing .faq__panel:nth-child(3) { width:80px; height:60px; top:20%; right:19%; transform:rotate(-4deg); }\r\n  .faq__scene--pricing .faq__dot--a { width:9px; height:9px; bottom:20%; left:14%; }\r\n  .faq__scene--pricing .faq__dot--b { width:7px; height:7px; top:10%; right:30%; }\r\n\r\n  .faq__scene--seo .faq__panel:nth-child(1) { width:120px; height:80px; top:15%; right:9%; transform:rotate(9deg); }\r\n  .faq__scene--seo .faq__panel:nth-child(2) { width:90px; height:90px; bottom:17%; left:11%; transform:rotate(-8deg); }\r\n  .faq__scene--seo .faq__panel:nth-child(3) { width:70px; height:70px; top:9%; left:21%; transform:rotate(4deg); }\r\n  .faq__scene--seo .faq__dot--a { width:9px; height:9px; top:34%; right:12%; }\r\n  .faq__scene--seo .faq__dot--b { width:7px; height:7px; bottom:10%; right:28%; }\r\n\r\n  .faq__scene--support .faq__panel:nth-child(1) { width:130px; height:70px; top:13%; left:7%; transform:rotate(-5deg); }\r\n  .faq__scene--support .faq__panel:nth-child(2) { width:90px; height:90px; bottom:13%; right:13%; transform:rotate(7deg); }\r\n  .faq__scene--support .faq__panel:nth-child(3) { width:70px; height:100px; top:25%; right:5%; transform:rotate(-9deg); }\r\n  .faq__scene--support .faq__dot--a { width:10px; height:10px; bottom:30%; left:16%; }\r\n  .faq__scene--support .faq__dot--b { width:7px; height:7px; top:12%; right:24%; }\r\n\r\n  .faq__scene--cloud .faq__panel:nth-child(1) { width:150px; height:60px; bottom:19%; left:9%; transform:rotate(4deg); }\r\n  .faq__scene--cloud .faq__panel:nth-child(2) { width:90px; height:90px; top:11%; right:15%; transform:rotate(-6deg); }\r\n  .faq__scene--cloud .faq__panel:nth-child(3) { width:70px; height:70px; top:29%; left:17%; transform:rotate(8deg); }\r\n  .faq__scene--cloud .faq__dot--a { width:9px; height:9px; top:16%; left:30%; }\r\n  .faq__scene--cloud .faq__dot--b { width:7px; height:7px; bottom:14%; right:26%; }\r\n\r\n  .faq__scene--ai .faq__panel:nth-child(1) { width:100px; height:100px; top:9%; left:11%; transform:rotate(-4deg); }\r\n  .faq__scene--ai .faq__panel:nth-child(2) { width:110px; height:70px; bottom:15%; right:9%; transform:rotate(6deg); }\r\n  .faq__scene--ai .faq__panel:nth-child(3) { width:70px; height:70px; top:21%; right:23%; transform:rotate(-8deg); }\r\n  .faq__scene--ai .faq__dot--a { width:9px; height:9px; bottom:28%; left:20%; }\r\n  .faq__scene--ai .faq__dot--b { width:7px; height:7px; top:36%; right:12%; }\r\n\r\n  \/* ---------- accordion list ---------- *\/\r\n  .faq__list { position:relative; z-index:1; }\r\n  .faq__item {\r\n    position:relative; border-radius:28px; background:var(--card);\r\n    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);\r\n    border:1px solid rgba(37,99,235,.08);\r\n    box-shadow:0 10px 30px rgba(15,23,42,.04);\r\n    margin-bottom:18px; overflow:hidden;\r\n    transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;\r\n    opacity:0; transform:translateY(24px);\r\n  }\r\n  .faq__item:hover { border-color:rgba(37,99,235,.3); box-shadow:0 16px 36px rgba(37,99,235,.12); transform:translateY(-2px); }\r\n  .faq__item--open { border-color:rgba(37,99,235,.35); box-shadow:0 20px 46px rgba(37,99,235,.16); }\r\n  .faq__item--open:hover { transform:none; }\r\n\r\n  .faq__item-head { display:flex; align-items:center; gap:20px; width:100%; padding:28px 32px; text-align:left; }\r\n  .faq__item-num { font-family:\"Manrope\", sans-serif; font-size:15px; font-weight:800; color:var(--accent); min-width:34px; transition:color .3s ease; }\r\n  .faq__item--open .faq__item-num { color:var(--primary); }\r\n  .faq__item-q { flex:1; font-size:18px; font-weight:700; color:var(--text); }\r\n  .faq__item-icon {\r\n    width:36px; height:36px; border-radius:50%; background:#EFF6FF; color:var(--primary);\r\n    display:flex; align-items:center; justify-content:center; flex-shrink:0;\r\n    transition:transform .45s cubic-bezier(.22,1,.36,1), background .35s ease, color .35s ease;\r\n  }\r\n  .faq__item--open .faq__item-icon { transform:rotate(45deg); background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; }\r\n\r\n  .faq__item-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1); }\r\n  .faq__item-body-inner { overflow:hidden; min-height:0; }\r\n  .faq__item-answer {\r\n    padding:0 32px 30px 86px; font-size:15.5px; line-height:1.75; color:var(--secondary);\r\n    opacity:0; transform:translateY(6px); transition:opacity .4s ease .05s, transform .4s ease .05s;\r\n  }\r\n  .faq__item--open .faq__item-body { grid-template-rows:1fr; }\r\n  .faq__item--open .faq__item-answer { opacity:1; transform:translateY(0); }\r\n\r\n  \/* ---------- CTA ---------- *\/\r\n  .faq__cta {\r\n    margin-top:96px; border-radius:28px; text-align:center; padding:56px 40px;\r\n    background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(239,246,255,.85));\r\n    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);\r\n    border:1px solid rgba(37,99,235,.12);\r\n    box-shadow:0 30px 70px rgba(37,99,235,.12);\r\n    opacity:0; transform:translateY(24px);\r\n  }\r\n  .faq__cta-title { font-size:28px; font-weight:800; color:var(--text); }\r\n  .faq__cta-actions { margin-top:28px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }\r\n  .faq__btn { padding:16px 32px; border-radius:14px; font-weight:700; font-size:15px; transition:transform .3s ease, box-shadow .3s ease, background .3s ease; }\r\n  .faq__btn--primary { background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; box-shadow:0 14px 32px rgba(37,99,235,.35); }\r\n  .faq__btn--primary:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(37,99,235,.45); }\r\n  .faq__btn--secondary { background:#fff; color:var(--primary); border:1.5px solid rgba(37,99,235,.25); }\r\n  .faq__btn--secondary:hover { transform:translateY(-2px); border-color:var(--primary); box-shadow:0 12px 28px rgba(37,99,235,.15); }\r\n\r\n  \/* ---------- responsive ---------- *\/\r\n  @media (max-width:1024px) {\r\n    .faq__inner { padding:0 32px; }\r\n    .faq__heading { font-size:38px; }\r\n    .faq__stage { grid-template-columns:1fr; gap:40px; }\r\n    .faq__illu { position:relative; top:auto; height:280px; }\r\n  }\r\n  @media (max-width:640px) {\r\n    .faq { padding:100px 0 120px; }\r\n    .faq__header { margin-bottom:56px; }\r\n    .faq__item-head { padding:22px 20px; gap:14px; }\r\n    .faq__item-q { font-size:16px; }\r\n    .faq__item-answer { padding:0 20px 24px 20px; }\r\n    .faq__cta { padding:40px 24px; }\r\n    .faq__cta-actions { flex-direction:column; }\r\n    .faq__btn { width:100%; }\r\n  }\r\n<\/style>\r\n<section class=\"faq\">\r\n  <div class=\"faq__decor\" aria-hidden=\"true\">\r\n    <div class=\"faq__decor-blur faq__decor-blur--c1\"><\/div>\r\n    <div class=\"faq__decor-blur faq__decor-blur--c2\"><\/div>\r\n    <div class=\"faq__decor-ring\"><\/div>\r\n    <div class=\"faq__decor-grid\"><\/div>\r\n    <div class=\"faq__decor-particle faq__decor-particle--p1\"><\/div>\r\n    <div class=\"faq__decor-particle faq__decor-particle--p2\"><\/div>\r\n    <div class=\"faq__decor-noise\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"faq__inner\">\r\n    <header class=\"faq__header\">\r\n      <span class=\"faq__badge\">FAQ<\/span>\r\n      <h2 class=\"faq__heading\">Tr\u01b0\u1edbc khi b\u1eaft \u0111\u1ea7u d\u1ef1 \u00e1n<\/h2>\r\n      <p class=\"faq__desc\">Nh\u1eefng c\u00e2u h\u1ecfi \u0111\u01b0\u1ee3c kh\u00e1ch h\u00e0ng quan t\u00e2m nhi\u1ec1u nh\u1ea5t.<\/p>\r\n    <\/header>\r\n\r\n    <div class=\"faq__stage\">\r\n      <div class=\"faq__illu\">\r\n        <!-- scene 0: timeline -->\r\n        <div class=\"faq__scene faq__scene--timeline faq__scene--active\" data-scene=\"0\">\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__scene-core faq__float\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\">\r\n              <path d=\"M8 36L20 36L20 24L32 24L32 12L40 12\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n              <circle cx=\"8\" cy=\"36\" r=\"3\" fill=\"currentColor\" stroke=\"none\"\/>\r\n              <circle cx=\"20\" cy=\"24\" r=\"3\" fill=\"currentColor\" stroke=\"none\"\/>\r\n              <circle cx=\"32\" cy=\"12\" r=\"3\" fill=\"currentColor\" stroke=\"none\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <span class=\"faq__dot faq__dot--a faq__float\"><\/span>\r\n          <span class=\"faq__dot faq__dot--b faq__float\"><\/span>\r\n        <\/div>\r\n        <!-- scene 1: pricing -->\r\n        <div class=\"faq__scene faq__scene--pricing\" data-scene=\"1\">\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__scene-core faq__float\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\">\r\n              <path d=\"M24 8L42 18L24 28L6 18L24 8Z\" stroke-width=\"2.5\" stroke-linejoin=\"round\"\/>\r\n              <path d=\"M6 26L24 36L42 26\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n              <path d=\"M6 34L24 44L42 34\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\".5\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <span class=\"faq__dot faq__dot--a faq__float\"><\/span>\r\n          <span class=\"faq__dot faq__dot--b faq__float\"><\/span>\r\n        <\/div>\r\n        <!-- scene 2: seo -->\r\n        <div class=\"faq__scene faq__scene--seo\" data-scene=\"2\">\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__scene-core faq__float\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\">\r\n              <circle cx=\"20\" cy=\"20\" r=\"12\" stroke-width=\"2.5\"\/>\r\n              <path d=\"M29 29L40 40\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/>\r\n              <path d=\"M14 24L18 18L22 21L27 13\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <span class=\"faq__dot faq__dot--a faq__float\"><\/span>\r\n          <span class=\"faq__dot faq__dot--b faq__float\"><\/span>\r\n        <\/div>\r\n        <!-- scene 3: support -->\r\n        <div class=\"faq__scene faq__scene--support\" data-scene=\"3\">\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__scene-core faq__float\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\">\r\n              <path d=\"M10 12H38A4 4 0 0 1 42 16V30A4 4 0 0 1 38 34H20L12 42V34H10A4 4 0 0 1 6 30V16A4 4 0 0 1 10 12Z\" stroke-width=\"2.5\" stroke-linejoin=\"round\"\/>\r\n              <circle cx=\"17\" cy=\"23\" r=\"2\" fill=\"currentColor\" stroke=\"none\"\/>\r\n              <circle cx=\"24\" cy=\"23\" r=\"2\" fill=\"currentColor\" stroke=\"none\"\/>\r\n              <circle cx=\"31\" cy=\"23\" r=\"2\" fill=\"currentColor\" stroke=\"none\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <span class=\"faq__dot faq__dot--a faq__float\"><\/span>\r\n          <span class=\"faq__dot faq__dot--b faq__float\"><\/span>\r\n        <\/div>\r\n        <!-- scene 4: cloud\/upgrade -->\r\n        <div class=\"faq__scene faq__scene--cloud\" data-scene=\"4\">\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__scene-core faq__float\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\">\r\n              <path d=\"M16 32H34A8 8 0 0 0 33 16.2A10 10 0 0 0 14.5 20A7 7 0 0 0 16 32Z\" stroke-width=\"2.5\" stroke-linejoin=\"round\"\/>\r\n              <path d=\"M24 30V16M24 16L18 22M24 16L30 22\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <span class=\"faq__dot faq__dot--a faq__float\"><\/span>\r\n          <span class=\"faq__dot faq__dot--b faq__float\"><\/span>\r\n        <\/div>\r\n        <!-- scene 5: ai -->\r\n        <div class=\"faq__scene faq__scene--ai\" data-scene=\"5\">\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__panel faq__float\"><\/div>\r\n          <div class=\"faq__scene-core faq__float\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\">\r\n              <circle cx=\"24\" cy=\"10\" r=\"3.5\" fill=\"currentColor\" stroke=\"none\"\/>\r\n              <circle cx=\"10\" cy=\"30\" r=\"3.5\" fill=\"currentColor\" stroke=\"none\"\/>\r\n              <circle cx=\"38\" cy=\"30\" r=\"3.5\" fill=\"currentColor\" stroke=\"none\"\/>\r\n              <circle cx=\"24\" cy=\"40\" r=\"3\" fill=\"currentColor\" stroke=\"none\" opacity=\".6\"\/>\r\n              <path d=\"M24 13.5L11 27M24 13.5L37 27M13 30H35M24 34V37\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <span class=\"faq__dot faq__dot--a faq__float\"><\/span>\r\n          <span class=\"faq__dot faq__dot--b faq__float\"><\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"faq__list\">\r\n        <div class=\"faq__item faq__item--open\" data-scene=\"0\">\r\n          <button class=\"faq__item-head\" aria-expanded=\"true\">\r\n            <span class=\"faq__item-num\">01<\/span>\r\n            <span class=\"faq__item-q\">Thi\u1ebft k\u1ebf website m\u1ea5t bao l\u00e2u?<\/span>\r\n            <span class=\"faq__item-icon\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M8 2V14M2 8H14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n            <\/span>\r\n          <\/button>\r\n          <div class=\"faq__item-body\">\r\n            <div class=\"faq__item-body-inner\">\r\n              <p class=\"faq__item-answer\">T\u00f9y quy m\u00f4 d\u1ef1 \u00e1n. Website gi\u1edbi thi\u1ec7u doanh nghi\u1ec7p th\u01b0\u1eddng ho\u00e0n th\u00e0nh trong 7\u201314 ng\u00e0y, h\u1ec7 th\u1ed1ng th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed ho\u1eb7c n\u1ec1n t\u1ea3ng ph\u1ee9c t\u1ea1p c\u00f3 th\u1ec3 m\u1ea5t 3\u20136 tu\u1ea7n. Ch\u00fang t\u00f4i l\u1eadp timeline chi ti\u1ebft ngay t\u1eeb bu\u1ed5i t\u01b0 v\u1ea5n \u0111\u1ea7u ti\u00ean \u0111\u1ec3 b\u1ea1n theo d\u00f5i ti\u1ebfn \u0111\u1ed9 t\u1eebng giai \u0111o\u1ea1n.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq__item\" data-scene=\"1\">\r\n          <button class=\"faq__item-head\" aria-expanded=\"false\">\r\n            <span class=\"faq__item-num\">02<\/span>\r\n            <span class=\"faq__item-q\">Chi ph\u00ed \u0111\u01b0\u1ee3c t\u00ednh nh\u01b0 th\u1ebf n\u00e0o?<\/span>\r\n            <span class=\"faq__item-icon\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M8 2V14M2 8H14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n            <\/span>\r\n          <\/button>\r\n          <div class=\"faq__item-body\">\r\n            <div class=\"faq__item-body-inner\">\r\n              <p class=\"faq__item-answer\">Chi ph\u00ed ph\u1ee5 thu\u1ed9c v\u00e0o ph\u1ea1m vi t\u00ednh n\u0103ng, s\u1ed1 l\u01b0\u1ee3ng trang v\u00e0 m\u1ee9c \u0111\u1ed9 t\u00f9y ch\u1ec9nh giao di\u1ec7n. Sau khi kh\u1ea3o s\u00e1t y\u00eau c\u1ea7u, ch\u00fang t\u00f4i g\u1eedi b\u00e1o gi\u00e1 chi ti\u1ebft theo t\u1eebng h\u1ea1ng m\u1ee5c \u2014 minh b\u1ea1ch, kh\u00f4ng ph\u00e1t sinh \u1ea9n, thanh to\u00e1n theo ti\u1ebfn \u0111\u1ed9 b\u00e0n giao.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq__item\" data-scene=\"2\">\r\n          <button class=\"faq__item-head\" aria-expanded=\"false\">\r\n            <span class=\"faq__item-num\">03<\/span>\r\n            <span class=\"faq__item-q\">Website c\u00f3 chu\u1ea9n SEO kh\u00f4ng?<\/span>\r\n            <span class=\"faq__item-icon\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M8 2V14M2 8H14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n            <\/span>\r\n          <\/button>\r\n          <div class=\"faq__item-body\">\r\n            <div class=\"faq__item-body-inner\">\r\n              <p class=\"faq__item-answer\">C\u00f3. M\u1ecdi website \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng theo chu\u1ea9n Core Web Vitals, t\u1ed1i \u01b0u t\u1ed1c \u0111\u1ed9 t\u1ea3i, c\u1ea5u tr\u00fac th\u1ebb heading, schema markup v\u00e0 responsive \u0111\u1ea7y \u0111\u1ee7 \u2014 s\u1eb5n s\u00e0ng cho vi\u1ec7c l\u00ean top c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm ngay t\u1eeb ng\u00e0y ra m\u1eaft.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq__item\" data-scene=\"3\">\r\n          <button class=\"faq__item-head\" aria-expanded=\"false\">\r\n            <span class=\"faq__item-num\">04<\/span>\r\n            <span class=\"faq__item-q\">Sau khi b\u00e0n giao c\u00f3 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 kh\u00f4ng?<\/span>\r\n            <span class=\"faq__item-icon\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M8 2V14M2 8H14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n            <\/span>\r\n          <\/button>\r\n          <div class=\"faq__item-body\">\r\n            <div class=\"faq__item-body-inner\">\r\n              <p class=\"faq__item-answer\">Ch\u00fang t\u00f4i b\u1ea3o h\u00e0nh k\u1ef9 thu\u1eadt mi\u1ec5n ph\u00ed trong 12 th\u00e1ng v\u00e0 cung c\u1ea5p g\u00f3i b\u1ea3o tr\u00ec m\u1edf r\u1ed9ng theo nhu c\u1ea7u \u2014 t\u1eeb c\u1eadp nh\u1eadt n\u1ed9i dung, v\u00e1 b\u1ea3o m\u1eadt \u0111\u1ebfn gi\u00e1m s\u00e1t uptime 24\/7.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq__item\" data-scene=\"4\">\r\n          <button class=\"faq__item-head\" aria-expanded=\"false\">\r\n            <span class=\"faq__item-num\">05<\/span>\r\n            <span class=\"faq__item-q\">C\u00f3 th\u1ec3 n\u00e2ng c\u1ea5p trong t\u01b0\u01a1ng lai kh\u00f4ng?<\/span>\r\n            <span class=\"faq__item-icon\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M8 2V14M2 8H14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n            <\/span>\r\n          <\/button>\r\n          <div class=\"faq__item-body\">\r\n            <div class=\"faq__item-body-inner\">\r\n              <p class=\"faq__item-answer\">Ho\u00e0n to\u00e0n c\u00f3 th\u1ec3. Ki\u1ebfn tr\u00fac h\u1ec7 th\u1ed1ng \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf theo h\u01b0\u1edbng module h\u00f3a, cho ph\u00e9p m\u1edf r\u1ed9ng t\u00ednh n\u0103ng, t\u00edch h\u1ee3p th\u00eam d\u1ecbch v\u1ee5 ho\u1eb7c n\u00e2ng c\u1ea5p h\u1ea1 t\u1ea7ng m\u00e0 kh\u00f4ng c\u1ea7n x\u00e2y d\u1ef1ng l\u1ea1i t\u1eeb \u0111\u1ea7u.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq__item\" data-scene=\"5\">\r\n          <button class=\"faq__item-head\" aria-expanded=\"false\">\r\n            <span class=\"faq__item-num\">06<\/span>\r\n            <span class=\"faq__item-q\">Website c\u00f3 t\u00edch h\u1ee3p AI v\u00e0 Automation kh\u00f4ng?<\/span>\r\n            <span class=\"faq__item-icon\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M8 2V14M2 8H14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n            <\/span>\r\n          <\/button>\r\n          <div class=\"faq__item-body\">\r\n            <div class=\"faq__item-body-inner\">\r\n              <p class=\"faq__item-answer\">C\u00f3. Ch\u00fang t\u00f4i t\u00edch h\u1ee3p chatbot AI, t\u1ef1 \u0111\u1ed9ng h\u00f3a quy tr\u00ecnh ch\u0103m s\u00f3c kh\u00e1ch h\u00e0ng, g\u1ee3i \u00fd n\u1ed9i dung c\u00e1 nh\u00e2n h\u00f3a v\u00e0 c\u00e1c lu\u1ed3ng automation marketing gi\u00fap v\u1eadn h\u00e0nh website th\u00f4ng minh v\u00e0 hi\u1ec7u qu\u1ea3 h\u01a1n.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"faq__cta\">\r\n      <h3 class=\"faq__cta-title\">Kh\u00f4ng t\u00ecm th\u1ea5y c\u00e2u tr\u1ea3 l\u1eddi?<\/h3>\r\n      <div class=\"faq__cta-actions\">\r\n        <button class=\"faq__btn faq__btn--primary\">Li\u00ean h\u1ec7 chuy\u00ean gia<\/button>\r\n        <button class=\"faq__btn faq__btn--secondary\">\u0110\u1eb7t l\u1ecbch t\u01b0 v\u1ea5n<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script src=\"gsap.min.js\"><\/script>\r\n<script src=\"ScrollTrigger.min.js\"><\/script>\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n\r\n(function () {\r\n  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  if (window.gsap && window.ScrollTrigger) {\r\n    gsap.registerPlugin(ScrollTrigger);\r\n  }\r\n\r\n  \/* ---------- entrance reveal ---------- *\/\r\n  function reveal() {\r\n    if (!window.gsap) return;\r\n    if (reduceMotion) {\r\n      gsap.set('.faq__header, .faq__illu, .faq__item, .faq__cta', { opacity:1, y:0, scale:1, filter:'blur(0px)' });\r\n      return;\r\n    }\r\n    gsap.to('.faq__header', {\r\n      opacity:1, y:0, filter:'blur(0px)', duration:1, ease:'power3.out',\r\n      scrollTrigger:{ trigger:'.faq__header', start:'top 85%' }\r\n    });\r\n    gsap.to('.faq__illu', {\r\n      opacity:1, y:0, scale:1, duration:1, ease:'power3.out',\r\n      scrollTrigger:{ trigger:'.faq__illu', start:'top 85%' }\r\n    });\r\n    gsap.to('.faq__item', {\r\n      opacity:1, y:0, duration:.8, ease:'power3.out', stagger:.09,\r\n      scrollTrigger:{ trigger:'.faq__list', start:'top 85%' }\r\n    });\r\n    gsap.to('.faq__cta', {\r\n      opacity:1, y:0, duration:.9, ease:'power3.out',\r\n      scrollTrigger:{ trigger:'.faq__cta', start:'top 90%' }\r\n    });\r\n  }\r\n\r\n  \/* ---------- ambient floating ---------- *\/\r\n  function floatLoop() {\r\n    if (!window.gsap || reduceMotion) return;\r\n    document.querySelectorAll('.faq__float').forEach(function (el, i) {\r\n      gsap.to(el, {\r\n        y: (i % 2 === 0 ? -10 : 10),\r\n        duration: 2.6 + (i % 5) * .35,\r\n        ease:'sine.inOut',\r\n        repeat:-1,\r\n        yoyo:true,\r\n        delay: (i % 6) * .15\r\n      });\r\n    });\r\n  }\r\n\r\n  \/* ---------- accordion + scene switch ---------- *\/\r\n  var items = Array.prototype.slice.call(document.querySelectorAll('.faq__item'));\r\n  var scenes = Array.prototype.slice.call(document.querySelectorAll('.faq__scene'));\r\n\r\n  function setScene(index) {\r\n    scenes.forEach(function (scene) {\r\n      var active = scene.getAttribute('data-scene') === String(index);\r\n      scene.classList.toggle('faq__scene--active', active);\r\n    });\r\n  }\r\n\r\n  items.forEach(function (item) {\r\n    var head = item.querySelector('.faq__item-head');\r\n    head.addEventListener('click', function () {\r\n      var isOpen = item.classList.contains('faq__item--open');\r\n      items.forEach(function (other) {\r\n        other.classList.remove('faq__item--open');\r\n        other.querySelector('.faq__item-head').setAttribute('aria-expanded', 'false');\r\n      });\r\n      if (!isOpen) {\r\n        item.classList.add('faq__item--open');\r\n        head.setAttribute('aria-expanded', 'true');\r\n        setScene(item.getAttribute('data-scene'));\r\n      }\r\n    });\r\n  });\r\n\r\n  reveal();\r\n  floatLoop();\r\n})();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\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>V\u1ec0 CH\u00daNG T\u00d4I Kh\u00f4ng r\u1eadp khu\u00f4n \u2014 ch\u00fang t\u00f4i thi\u1ebft k\u1ebf gi\u1ea3i ph\u00e1p ri\u00eang cho t\u1eebng doanh nghi\u1ec7p. K\u1ebeT QU\u1ea2 L\u00c0 MINH CH\u1ee8NG R\u00d5 NH\u1ea4T M\u1ed7i con s\u1ed1 l\u00e0 m\u1ed9t d\u1ea5u \u1ea5n ni\u1ec1m tin m\u00e0 ch\u00fang t\u00f4i \u0111\u00e3 x\u00e2y d\u1ef1ng c\u00f9ng kh\u00e1ch h\u00e0ng. 00 ng\u00e0y Th\u1eddi gian b\u00e0n giao trung b\u00ecnh m\u1ed7i d\u1ef1 \u00e1n 00 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/home.php","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gifttech.vn\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gifttech.vn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gifttech.vn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gifttech.vn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gifttech.vn\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":97,"href":"https:\/\/gifttech.vn\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/gifttech.vn\/wp-json\/wp\/v2\/pages\/10\/revisions\/566"}],"wp:attachment":[{"href":"https:\/\/gifttech.vn\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}