{"id":11,"date":"2026-04-28T15:55:53","date_gmt":"2026-04-28T08:55:53","guid":{"rendered":"https:\/\/workflow.ai.vn\/?page_id=11"},"modified":"2026-04-28T17:34:35","modified_gmt":"2026-04-28T10:34:35","slug":"trang-chu","status":"publish","type":"page","link":"https:\/\/workflow.ai.vn\/","title":{"rendered":"Trang Ch\u1ee7"},"content":{"rendered":"\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<!DOCTYPE html>\n<html lang=\"vi\" class=\"scroll-smooth\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>T\u1ea1i sao AI \u0111ang thay \u0111\u1ed5i gi\u00e1o d\u1ee5c truy\u1ec1n th\u1ed1ng? | H\u1ea1 H\u1ed3ng Vi\u1ec7t x Sellator<\/title>\n    <meta name=\"description\" content=\"Trang visual essay tr\u00ecnh b\u00e0y 7 lu\u1eadn \u0111i\u1ec3m v\u1ec1 l\u00fd do AI bu\u1ed9c gi\u00e1o d\u1ee5c truy\u1ec1n th\u1ed1ng ph\u1ea3i thay \u0111\u1ed5i.\">\n    \n    <!-- Google Fonts: Be Vietnam Pro -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,400;0,500;0,600;0,700;0,800;1,300&#038;display=swap\" rel=\"stylesheet\">\n    \n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        amber: {\n                            DEFAULT: '#FECA63',\n                            dark: '#C07800',\n                            deeper: '#A86500',\n                            tint: '#FEF0CC',\n                            deep: '#E8B240',\n                        },\n                        navy: {\n                            DEFAULT: '#1C2B3A',\n                            light: '#2E4A63',\n                        },\n                        warm: '#F7F4EE',\n                        charcoal: '#2C2C2A',\n                        muted: '#8C8B84',\n                    },\n                    fontFamily: {\n                        brand: ['Be Vietnam Pro', 'Helvetica Neue', 'Arial', 'sans-serif'],\n                    }\n                }\n            }\n        }\n    <\/script>\n    \n    <style>\n        :root {\n            --brand-amber: #FECA63;\n            --brand-navy: #1C2B3A;\n            --brand-warm: #F7F4EE;\n            --brand-charcoal: #2C2C2A;\n            --amber-dark: #C07800;\n            --amber-deeper: #A86500;\n            --amber-tint: #FEF0CC;\n        }\n\n        body {\n            font-family: 'Be Vietnam Pro', sans-serif;\n            color: var(--brand-charcoal);\n            overflow-x: hidden;\n            background-color: var(--brand-warm);\n            line-height: 1.7;\n        }\n\n        \/* Type Scale *\/\n        .display-text { font-size: 48px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }\n        .h1-text { font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }\n        .h2-text { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }\n        .h3-text { font-size: 22px; font-weight: 600; line-height: 1.4; }\n        .body-large { font-size: 17px; font-weight: 400; line-height: 1.75; }\n        .quote-text { font-size: 22px; font-weight: 300; font-style: italic; line-height: 1.6; }\n\n        @media (max-width: 768px) {\n            .display-text { font-size: 32px; }\n            .h1-text { font-size: 28px; }\n            .h2-text { font-size: 24px; }\n        }\n\n        .section-full {\n            min-height: 100vh;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 80px 40px;\n            position: relative;\n        }\n\n        @media (max-width: 768px) {\n            .section-full {\n                padding: 64px 24px;\n            }\n        }\n\n        \/* Animation Classes *\/\n        .reveal {\n            opacity: 0;\n            transform: translateY(30px);\n            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n\n        .reveal.active {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        \/* Progress Bar *\/\n        #progress-bar {\n            position: fixed;\n            top: 0;\n            left: 0;\n            height: 4px;\n            background: #FECA63;\n            z-index: 1000;\n            width: 0%;\n            transition: width 0.1s ease;\n        }\n\n        \/* Floating Animation *\/\n        @keyframes float {\n            0% { transform: translateY(0px); }\n            50% { transform: translateY(-20px); }\n            100% { transform: translateY(0px); }\n        }\n\n        .float {\n            animation: float 4s ease-in-out infinite;\n        }\n\n        \/* Orb Glow *\/\n        .orb-human {\n            background: radial-gradient(circle, #FECA63, #E8B240);\n            box-shadow: 0 0 40px rgba(254, 202, 99, 0.4);\n            animation: pulse-glow 2s infinite;\n        }\n\n        @keyframes pulse-glow {\n            0% { box-shadow: 0 0 20px rgba(254, 202, 99, 0.4); transform: scale(1); }\n            50% { box-shadow: 0 0 50px rgba(254, 202, 99, 0.6); transform: scale(1.05); }\n            100% { box-shadow: 0 0 20px rgba(254, 202, 99, 0.4); transform: scale(1); }\n        }\n\n        \/* Wavy Underline (Amber Deeper for AAA) *\/\n        .wavy-underline {\n            position: relative;\n            display: inline-block;\n        }\n\n        .wavy-underline::after {\n            content: \"\";\n            position: absolute;\n            left: 0;\n            bottom: -5px;\n            width: 100%;\n            height: 8px;\n            background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100' height='10' viewBox='0 0 100 10'%3E%3Cpath d='M0 5 Q 12.5 0, 25 5 T 50 5 T 75 5 T 100 5' fill='none' stroke='%23A86500' stroke-width='2'\/%3E%3C\/svg%3E\") repeat-x;\n            background-size: 50px 8px;\n        }\n\n        \/* Fullscreen Button *\/\n        #fullscreen-btn {\n            position: fixed;\n            bottom: 20px;\n            right: 20px;\n            background: rgba(28, 43, 58, 0.1);\n            backdrop-filter: blur(8px);\n            padding: 10px;\n            border-radius: 50%;\n            z-index: 1000;\n            cursor: pointer;\n            transition: all 0.2s;\n            color: var(--brand-navy);\n            border: 1px solid rgba(28, 43, 58, 0.1);\n        }\n\n        #fullscreen-btn:hover {\n            transform: scale(1.1);\n            background: var(--brand-navy);\n            color: white;\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div id=\"progress-bar\"><\/div>\n\n    <button id=\"fullscreen-btn\" title=\"Ch\u1ebf \u0111\u1ed9 thuy\u1ebft tr\u00ecnh (F)\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"\/><\/svg>\n    <\/button>\n\n    <main>\n        <!-- Section 0: Hero -->\n        <section id=\"section-0\" class=\"section-full bg-warm\">\n            <div class=\"max-w-[800px] text-center\">\n                <span class=\"inline-block bg-amber text-charcoal px-5 py-1.5 rounded-full font-bold text-xs uppercase tracking-widest mb-8 reveal\">\n                    H\u1ea1 H\u1ed3ng Vi\u1ec7t \/ Sellator\n                <\/span>\n                <h1 class=\"display-text text-charcoal mb-8 reveal\" style=\"transition-delay: 200ms;\">\n                    T\u1ea1i sao AI \u0111ang thay \u0111\u1ed5i gi\u00e1o d\u1ee5c truy\u1ec1n th\u1ed1ng?\n                <\/h1>\n                <p class=\"body-large text-charcoal\/80 max-w-[680px] mx-auto mb-12 reveal\" style=\"transition-delay: 400ms;\">\n                    Kh\u00f4ng ph\u1ea3i v\u00ec AI th\u00f4ng minh h\u01a1n. M\u00e0 v\u00ec tr\u01b0\u1eddng h\u1ecdc \u0111ang d\u1ea1y b\u1ea1n c\u1ea1nh tranh v\u1edbi m\u00e1y m\u00f3c \u2014 v\u00e0 b\u1ea1n \u0111ang thua.\n                <\/p>\n                <div class=\"reveal mt-12 animate-bounce opacity-40 text-xs font-bold tracking-widest uppercase\" style=\"transition-delay: 600ms;\">\n                    \u2193 K\u00e9o xu\u1ed1ng \u0111\u1ec3 kh\u00e1m ph\u00e1\n                <\/div>\n            <\/div>\n            \n            <!-- Floating Icons (Amber Watermarks) -->\n            <div class=\"hidden md:block absolute top-1\/4 left-20 text-7xl opacity-10 float select-none\" style=\"animation-delay: 0s;\">\ud83e\udd16<\/div>\n            <div class=\"hidden md:block absolute bottom-1\/4 right-20 text-7xl opacity-10 float select-none\" style=\"animation-delay: 1s;\">\ud83d\udcda<\/div>\n            <div class=\"hidden md:block absolute top-1\/3 right-1\/4 text-6xl opacity-5 float select-none\" style=\"animation-delay: 2s;\">\ud83e\udde0<\/div>\n        <\/section>\n\n        <!-- Section 1: AI & Ng\u00f4n ng\u1eef -->\n        <section id=\"section-1\" class=\"section-full bg-white\">\n            <div class=\"max-w-[900px] grid md:grid-cols-2 gap-16 items-center\">\n                <div>\n                    <div class=\"text-8xl font-black text-amber-tint select-none leading-none mb-6\">01<\/div>\n                    <h2 class=\"h2-text text-navy mb-8 reveal\">\n                        AI sinh ra t\u1eeb to\u00e1n h\u1ecdc. Nh\u01b0ng n\u00f3 h\u1ecdc c\u00e1ch n\u00f3i chuy\u1ec7n v\u1edbi b\u1ea1n.\n                    <\/h2>\n                    <div class=\"space-y-6 body-large text-charcoal\/90 reveal\" style=\"transition-delay: 200ms;\">\n                        <p>M\u00e1y t\u00ednh v\u1eadn h\u00e0nh b\u1eb1ng logic \u2014 0 v\u00e0 1, quy t\u1eafc v\u00e0 c\u00f4ng th\u1ee9c. \u0110\u00f3 l\u00e0 th\u1ebf gi\u1edbi t\u1ef1 nhi\u00ean c\u1ee7a AI.<\/p>\n                        <p>Nh\u01b0ng \u0111i\u1ec1u \u0111\u1eb7c bi\u1ec7t: AI h\u1ecdc \u0111\u01b0\u1ee3c c\u00e1ch giao ti\u1ebfp b\u1eb1ng ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean \u2014 th\u1ee9 phi c\u1ea5u tr\u00fac, \u0111\u1ea7y ngo\u1ea1i l\u1ec7, gi\u00e0u c\u1ea3m x\u00fac \u2014 m\u00e0 con ng\u01b0\u1eddi d\u00f9ng h\u00e0ng ng\u00e0y.<\/p>\n                        <p>\u0110\u00e2y kh\u00f4ng ch\u1ec9 l\u00e0 b\u01b0\u1edbc ti\u1ebfn k\u1ef9 thu\u1eadt. \u0110\u00e2y l\u00e0 th\u1eddi \u0111i\u1ec3m AI b\u01b0\u1edbc v\u00e0o l\u00e3nh th\u1ed5 c\u1ee7a con ng\u01b0\u1eddi.<\/p>\n                    <\/div>\n                    <div class=\"mt-10 reveal\" style=\"transition-delay: 400ms;\">\n                        <span class=\"wavy-underline text-amber-deeper font-bold italic\">T\u1eeb 0 v\u00e0 1 \u2192 \u0111\u1ebfn ng\u00f4n ng\u1eef c\u1ee7a b\u1ea1n<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"hidden md:flex justify-center reveal\" style=\"transition-delay: 300ms;\">\n                    <div class=\"p-12 bg-warm rounded-[40px] border border-amber-tint relative overflow-hidden\">\n                        <svg width=\"200\" height=\"200\" viewBox=\"0 0 240 240\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <rect x=\"20\" y=\"60\" width=\"60\" height=\"60\" rx=\"12\" fill=\"#FECA63\" fill-opacity=\"0.3\" \/>\n                            <text x=\"35\" y=\"100\" fill=\"#1C2B3A\" font-family=\"Be Vietnam Pro\" font-weight=\"800\" font-size=\"24\">0<\/text>\n                            <rect x=\"100\" y=\"20\" width=\"60\" height=\"60\" rx=\"12\" fill=\"#FECA63\" fill-opacity=\"0.3\" \/>\n                            <text x=\"115\" y=\"60\" fill=\"#1C2B3A\" font-family=\"Be Vietnam Pro\" font-weight=\"800\" font-size=\"24\">1<\/text>\n                            <path d=\"M160 80 L200 120\" stroke=\"#C07800\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-dasharray=\"8 8\" \/>\n                            <path d=\"M120 140 Q120 200 180 200 L210 200 L220 220 L200 210 Q140 210 140 140\" fill=\"#FECA63\" \/>\n                            <circle cx=\"180\" cy=\"180\" r=\"4\" fill=\"white\" \/>\n                            <circle cx=\"195\" cy=\"180\" r=\"4\" fill=\"white\" \/>\n                            <circle cx=\"210\" cy=\"180\" r=\"4\" fill=\"white\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 2: Tr\u01b0\u1eddng h\u1ecdc -->\n        <section id=\"section-2\" class=\"section-full bg-amber-tint\">\n            <div class=\"max-w-[720px] text-center\">\n                <div class=\"text-8xl font-black text-amber\/40 select-none leading-none mb-6\">02<\/div>\n                <h2 class=\"h2-text text-navy mb-10 reveal\">\n                    Tr\u01b0\u1eddng h\u1ecdc d\u1ea1y b\u1ea1n \u0111i\u1ec1u g\u00ec su\u1ed1t 12\u201320 n\u0103m?\n                <\/h2>\n                \n                <div class=\"flex flex-wrap justify-center gap-4 mb-10\">\n                    <span class=\"px-8 py-3 bg-white text-amber-deeper rounded-full font-bold h3-text shadow-sm border border-amber\/20\">To\u00e1n<\/span>\n                    <span class=\"px-8 py-3 bg-white text-amber-deeper rounded-full font-bold h3-text shadow-sm border border-amber\/20\">L\u00fd<\/span>\n                    <span class=\"px-8 py-3 bg-white text-amber-deeper rounded-full font-bold h3-text shadow-sm border border-amber\/20\">H\u00f3a<\/span>\n                <\/div>\n\n                <div class=\"space-y-6 body-large reveal\">\n                    <p>T\u1ea5t c\u1ea3 \u0111\u1ec1u c\u00f3 chung m\u1ed9t c\u1ea5u tr\u00fac: <br><span class=\"font-bold text-navy\">h\u1ecdc quy t\u1eafc \u2192 \u00e1p d\u1ee5ng quy t\u1eafc \u2192 \u0111\u01b0\u1ee3c \u0111i\u1ec3m n\u1ebfu \u0111\u00fang quy t\u1eafc.<\/span><\/p>\n                    <p>Ch\u1ea5m \u0111i\u1ec3m c\u0169ng d\u1ef1a tr\u00ean logic: \u0111\u00e1p \u00e1n \u0111\u00fang hay sai, c\u00f4ng th\u1ee9c \u0111\u00fang hay thi\u1ebfu b\u01b0\u1edbc.<\/p>\n                    <div class=\"bg-white\/80 p-8 rounded-3xl border-2 border-amber shadow-sm mt-8\">\n                        <p class=\"h3-text text-navy\">\n                            H\u1ec7 th\u1ed1ng gi\u00e1o d\u1ee5c l\u00e0 h\u1ec7 th\u1ed1ng d\u1ea1y con ng\u01b0\u1eddi <br><span class=\"text-amber-deeper font-black\">t\u01b0 duy nh\u01b0 m\u00e1y m\u00f3c<\/span>\n                        <\/p>\n                        <p class=\"text-sm uppercase tracking-widest mt-4 text-muted font-bold\">c\u00f3 h\u1ec7 th\u1ed1ng \u2022 c\u00f3 c\u1ea5u tr\u00fac \u2022 c\u00f3 \u0111i\u1ec3m s\u1ed1<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"mt-12 text-amber-deeper font-bold italic h3-text reveal\">\n                    &#8220;Logic + \u0111i\u1ec3m s\u1ed1 = 20 n\u0103m h\u1ecdc c\u1ee7a b\u1ea1n&#8221;\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 3: Con ng\u01b0\u1eddi vs AI -->\n        <section id=\"section-3\" class=\"section-full bg-navy text-white\">\n            <div class=\"max-w-[1000px] w-full\">\n                <div class=\"grid md:grid-cols-2 gap-16 items-center\">\n                    <div>\n                        <div class=\"text-8xl font-black text-white\/5 select-none leading-none mb-6\">03<\/div>\n                        <h2 class=\"h1-text mb-8 reveal\">\n                            H\u1ecdc 20 n\u0103m. <br><span class=\"text-amber\">V\u1eabn kh\u00f4ng gi\u1ecfi h\u01a1n AI.<\/span>\n                        <\/h2>\n                        <div class=\"space-y-4 body-large reveal\">\n                            <div class=\"flex items-center gap-4 text-amber font-bold\">\n                                <span class=\"w-2 h-2 rounded-full bg-amber\"><\/span> AI kh\u00f4ng qu\u00ean.\n                            <\/div>\n                            <div class=\"flex items-center gap-4 text-amber font-bold\">\n                                <span class=\"w-2 h-2 rounded-full bg-amber\"><\/span> Kh\u00f4ng m\u1ec7t.\n                            <\/div>\n                            <div class=\"flex items-center gap-4 text-amber font-bold\">\n                                <span class=\"w-2 h-2 rounded-full bg-amber\"><\/span> Kh\u00f4ng c\u1ea7n ng\u1ee7.\n                            <\/div>\n                            <p class=\"pt-6 opacity-80\">Ki\u1ebfn th\u1ee9c AI c\u00f3: r\u1ed9ng h\u01a1n b\u1ea5t k\u1ef3 con ng\u01b0\u1eddi n\u00e0o t\u1eebng \u0111\u1ecdc.<\/p>\n                            <p class=\"opacity-80\">T\u1ed1c \u0111\u1ed9 AI tr\u1ea3 l\u1eddi: t\u00ednh b\u1eb1ng gi\u00e2y.<\/p>\n                            <p class=\"opacity-80\">Chi ph\u00ed AI: g\u1ea7n nh\u01b0 b\u1eb1ng kh\u00f4ng.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"reveal\">\n                        <div class=\"bg-navy-light p-8 md:p-10 rounded-[40px] shadow-2xl border border-white\/5\">\n                            <table class=\"w-full text-left\">\n                                <thead>\n                                    <tr class=\"border-b border-white\/10\">\n                                        <th class=\"pb-6 font-bold text-white\/40 uppercase text-xs tracking-widest\">Ti\u00eau ch\u00ed<\/th>\n                                        <th class=\"pb-6 font-bold text-white\">\ud83d\udc64 Ng\u01b0\u1eddi<\/th>\n                                        <th class=\"pb-6 font-bold text-amber\">\ud83e\udd16 AI<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody class=\"body-large\">\n                                    <tr class=\"border-b border-white\/5\">\n                                        <td class=\"py-6 font-medium text-white\/60\">Ki\u1ebfn th\u1ee9c<\/td>\n                                        <td class=\"py-6\">V\u00e0i ch\u1ee5c s\u00e1ch<\/td>\n                                        <td class=\"py-6 font-bold text-amber\">H\u00e0ng tri\u1ec7u<\/td>\n                                    <\/tr>\n                                    <tr class=\"border-b border-white\/5\">\n                                        <td class=\"py-6 font-medium text-white\/60\">T\u1ed1c \u0111\u1ed9<\/td>\n                                        <td class=\"py-6\">V\u00e0i ph\u00fat<\/td>\n                                        <td class=\"py-6 font-bold text-amber\">Gi\u00e2y<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td class=\"py-6 font-medium text-white\/60\">Chi ph\u00ed<\/td>\n                                        <td class=\"py-6\">L\u01b0\u01a1ng th\u00e1ng<\/td>\n                                        <td class=\"py-6 font-bold text-amber\">V\u00e0i ngh\u00ecn \u0111<\/td>\n                                    <\/tr>\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n                        <div class=\"mt-8 text-center text-amber\/60 font-medium italic h3-text\">\n                            &#8220;S\u00e2n ch\u01a1i c\u1ee7a AI, kh\u00f4ng ph\u1ea3i c\u1ee7a b\u1ea1n.&#8221;\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 4: AI th\u1eafng -->\n        <section id=\"section-4\" class=\"section-full bg-white\">\n            <div class=\"max-w-[800px] text-center\">\n                <div class=\"text-8xl font-black text-warm select-none leading-none mb-6\">04<\/div>\n                <h2 class=\"h2-text text-navy mb-10 reveal\">\n                    AI s\u1ebd th\u1eafng \u1edf \u0111\u00e2u? <br><span class=\"text-amber-dark\">\u1ede m\u1ecdi th\u1ee9 c\u00f3 quy t\u1eafc.<\/span>\n                <\/h2>\n                \n                <div class=\"flex flex-wrap justify-center gap-3 mb-16\">\n                    <span class=\"px-5 py-2 bg-warm rounded-lg text-sm font-bold border border-warm hover:border-amber hover:bg-amber-tint transition-all cursor-default\">K\u1ebf to\u00e1n<\/span>\n                    <span class=\"px-5 py-2 bg-warm rounded-lg text-sm font-bold border border-warm hover:border-amber hover:bg-amber-tint transition-all cursor-default\">Ph\u00e2n t\u00edch d\u1eef li\u1ec7u<\/span>\n                    <span class=\"px-5 py-2 bg-warm rounded-lg text-sm font-bold border border-warm hover:border-amber hover:bg-amber-tint transition-all cursor-default\">Vi\u1ebft b\u00e1o c\u00e1o<\/span>\n                    <span class=\"px-5 py-2 bg-warm rounded-lg text-sm font-bold border border-warm hover:border-amber hover:bg-amber-tint transition-all cursor-default\">D\u1ecbch thu\u1eadt<\/span>\n                    <span class=\"px-5 py-2 bg-warm rounded-lg text-sm font-bold border border-warm hover:border-amber hover:bg-amber-tint transition-all cursor-default\">T\u01b0 v\u1ea5n ph\u00e1p l\u00fd<\/span>\n                    <span class=\"px-5 py-2 bg-warm rounded-lg text-sm font-bold border border-warm hover:border-amber hover:bg-amber-tint transition-all cursor-default\">L\u1eadp tr\u00ecnh theo spec<\/span>\n                <\/div>\n\n                <div class=\"space-y-6 body-large text-charcoal reveal\">\n                    <p>\u0110\u1eb7c \u0111i\u1ec3m chung: <br><span class=\"font-bold text-navy\">\u0111\u1ea7u v\u00e0o r\u00f5 r\u00e0ng \u2192 quy t\u1eafc r\u00f5 r\u00e0ng \u2192 \u0111\u1ea7u ra \u0111\u00e1nh gi\u00e1 \u0111\u01b0\u1ee3c.<\/span><\/p>\n                    <p>AI kh\u00f4ng ch\u1ec9 l\u00e0m \u0111\u01b0\u1ee3c \u2014 AI l\u00e0m t\u1ed1t h\u01a1n, nhanh h\u01a1n, r\u1ebb h\u01a1n.<\/p>\n                    <p class=\"h1-text text-charcoal font-black mt-12\">\n                        Kh\u00f4ng ph\u1ea3i t\u01b0\u01a1ng lai. <br><span class=\"text-amber-dark underline decoration-amber decoration-4\">L\u00e0 \u0111ang x\u1ea3y ra.<\/span>\n                    <\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 5: Con ng\u01b0\u1eddi h\u01a1n -->\n        <section id=\"section-5\" class=\"section-full bg-warm\">\n            <div class=\"max-w-[800px] text-center\">\n                <div class=\"text-8xl font-black text-amber\/20 select-none leading-none mb-6\">05<\/div>\n                <h2 class=\"h2-text text-navy mb-16 reveal\">\n                    Con ng\u01b0\u1eddi hi\u1ec7n h\u01a1n AI \u1edf \u0111i\u1ec1u g\u00ec?\n                <\/h2>\n\n                <div class=\"flex flex-col md:flex-row justify-center items-center gap-16 mb-16\">\n                    <div class=\"reveal flex flex-col items-center\" style=\"transition-delay: 200ms;\">\n                        <div class=\"w-48 h-48 rounded-full orb-human flex items-center justify-center text-6xl mb-6 group relative cursor-pointer shadow-amber\/40\">\n                            \u2764\ufe0f\n                            <div class=\"absolute -top-14 left-1\/2 -translate-x-1\/2 bg-navy text-white px-4 py-2 rounded-xl text-xs font-bold shadow-xl opacity-0 group-hover:opacity-100 transition-all pointer-events-none whitespace-nowrap\">C\u1ea3m x\u00fac th\u1eadt<\/div>\n                        <\/div>\n                        <span class=\"font-bold text-navy h3-text\">Con ng\u01b0\u1eddi<\/span>\n                    <\/div>\n\n                    <div class=\"text-2xl font-black text-amber\/40 hidden md:block select-none\">VS<\/div>\n\n                    <div class=\"reveal flex flex-col items-center\" style=\"transition-delay: 400ms;\">\n                        <div class=\"w-48 h-48 rounded-full bg-white border-4 border-navy\/5 flex items-center justify-center text-6xl mb-6 group relative cursor-pointer shadow-sm\">\n                            \ud83e\udd16\n                            <div class=\"absolute -top-14 left-1\/2 -translate-x-1\/2 bg-navy text-white px-4 py-2 rounded-xl text-xs font-bold shadow-xl opacity-0 group-hover:opacity-100 transition-all pointer-events-none whitespace-nowrap\">M\u00f4 ph\u1ecfng<\/div>\n                        <\/div>\n                        <span class=\"font-bold text-muted h3-text\">AI<\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"space-y-6 body-large text-charcoal reveal\">\n                    <p class=\"h1-text text-navy\">C\u1ea3m x\u00fac v\u00e0 nh\u1eadn th\u1ee9c.<\/p>\n                    <p class=\"max-w-2xl mx-auto\">L\u00e0 th\u1ee9 b\u1ea1n c\u1ea3m nh\u1eadn \u0111\u01b0\u1ee3c m\u00e0 kh\u00f4ng c\u1ea7n ai d\u1ea1y \u2014 y\u00eau, gh\u00e9t, s\u1ee3, mong mu\u1ed1n, \u00fd ch\u00ed, b\u1ea3n n\u0103ng t\u1ed3n t\u1ea1i.<\/p>\n                    <p class=\"bg-amber p-6 rounded-3xl font-bold text-navy mt-12\">\n                        M\u1ed9t \u0111\u1ee9a tr\u1ebb 2 tu\u1ed5i \u0111\u00e3 c\u00f3 nh\u1eefng th\u1ee9 \u0111\u00f3. <br>Ho\u00e0n to\u00e0n t\u1ef1 nhi\u00ean.\n                    <\/p>\n                    <p class=\"text-sm font-bold text-muted uppercase tracking-widest mt-6\">AI v\u1eabn \u0111ang m\u00f4 ph\u1ecfng, kh\u00f4ng th\u1ef1c s\u1ef1 c\u1ea3m nh\u1eadn.<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 6: C\u00e1ch sinh t\u1ed3n -->\n        <section id=\"section-6\" class=\"section-full bg-white\">\n            <div class=\"max-w-[1100px] w-full text-center\">\n                <div class=\"text-8xl font-black text-warm select-none leading-none mb-6\">06<\/div>\n                <h2 class=\"h1-text text-navy mb-16 reveal\">\n                    Sinh t\u1ed3n trong th\u1eddi \u0111\u1ea1i AI <br><span class=\"text-amber-dark\">kh\u00f4ng b\u1eb1ng \u0111i\u1ec3m s\u1ed1.<\/span>\n                <\/h2>\n\n                <div class=\"grid md:grid-cols-3 gap-8 mb-16\">\n                    <div class=\"reveal bg-warm p-10 rounded-[40px] hover:-translate-y-2 transition-all duration-300 border border-warm hover:border-amber hover:shadow-xl group\" style=\"transition-delay: 0ms;\">\n                        <div class=\"text-5xl mb-8 group-hover:scale-110 transition-transform inline-block\">\ud83d\udd25<\/div>\n                        <h3 class=\"font-bold text-navy h3-text mb-4\">C\u1ea3m x\u00fac<\/h3>\n                        <p class=\"body-small text-muted\">Kh\u00f4ng ch\u1ec9 l\u00e0m gi\u1ecfi \u2014 ph\u1ea3i th\u1eadt s\u1ef1 c\u1ea3m th\u1ea5y v\u00e0 \u0111am m\u00ea.<\/p>\n                    <\/div>\n\n                    <div class=\"reveal bg-warm p-10 rounded-[40px] hover:-translate-y-2 transition-all duration-300 border border-warm hover:border-amber hover:shadow-xl group\" style=\"transition-delay: 150ms;\">\n                        <div class=\"text-5xl mb-8 group-hover:scale-110 transition-transform inline-block\">\ud83e\udded<\/div>\n                        <h3 class=\"font-bold text-navy h3-text mb-4\">Nh\u1eadn th\u1ee9c<\/h3>\n                        <p class=\"body-small text-muted\">Bi\u1ebft m\u00ecnh l\u00e0 ai, t\u1ea1i sao m\u00ecnh \u1edf \u0111\u00e2y v\u00e0 m\u00ecnh mu\u1ed1n g\u00ec.<\/p>\n                    <\/div>\n\n                    <div class=\"reveal bg-warm p-10 rounded-[40px] hover:-translate-y-2 transition-all duration-300 border border-warm hover:border-amber hover:shadow-xl group\" style=\"transition-delay: 300ms;\">\n                        <div class=\"text-5xl mb-8 group-hover:scale-110 transition-transform inline-block\">\ud83d\udd17<\/div>\n                        <h3 class=\"font-bold text-navy h3-text mb-4\">K\u1ebft n\u1ed1i<\/h3>\n                        <p class=\"body-small text-muted\">Li\u00ean k\u1ebft m\u1ecdi vi\u1ec7c, m\u1ecdi ng\u01b0\u1eddi th\u00e0nh m\u1ed9t b\u1ee9c tranh l\u1edbn.<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"body-large text-charcoal\/80 reveal\">\n                    <p>\u0110\u00e2y l\u00e0 th\u1ee9 AI kh\u00f4ng th\u1ec3 thay th\u1ebf. <br><span class=\"font-bold text-navy border-b-2 border-amber\">\u0110\u00e2y c\u0169ng l\u00e0 th\u1ee9 kh\u00f4ng tr\u01b0\u1eddng n\u00e0o d\u1ea1y b\u1ea1n.<\/span><\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 7: K\u1ebft -->\n        <section id=\"section-7\" class=\"section-full bg-warm\">\n            <div class=\"max-w-[800px] text-center\">\n                <span class=\"inline-block bg-navy text-white px-6 py-2 rounded-full font-bold text-xs uppercase tracking-widest mb-10 reveal\">\n                    K\u1ebeT LU\u1eacN\n                <\/span>\n                <h2 class=\"display-text text-navy mb-16 reveal\">\n                    \u0110\u00f3 m\u1edbi l\u00e0 th\u1ee9 <br>con ng\u01b0\u1eddi n\u00ean h\u1ecdc.\n                <\/h2>\n                \n                <div class=\"space-y-8 body-large text-charcoal mb-20 reveal\">\n                    <p>Kh\u00f4ng ph\u1ea3i \u0111\u1ec3 c\u1ea1nh tranh v\u1edbi AI.<\/p>\n                    <p>M\u00e0 \u0111\u1ec3 l\u00e0m th\u1ee9 AI kh\u00f4ng th\u1ec3 l\u00e0m \u2014 <span class=\"font-bold\">s\u1ed1ng m\u1ed9t cu\u1ed9c \u0111\u1eddi c\u00f3 \u00fd ngh\u0129a<\/span>, c\u1ea3m nh\u1eadn \u0111\u01b0\u1ee3c, k\u1ebft n\u1ed1i \u0111\u01b0\u1ee3c v\u1edbi nh\u1eefng ng\u01b0\u1eddi kh\u00e1c.<\/p>\n                    <p class=\"opacity-60 italic\">Gi\u00e1o d\u1ee5c truy\u1ec1n th\u1ed1ng \u0111ang thay \u0111\u1ed5i kh\u00f4ng ph\u1ea3i v\u00ec AI qu\u00e1 th\u00f4ng minh. <br>M\u00e0 v\u00ec th\u1ebf gi\u1edbi cu\u1ed1i c\u00f9ng \u0111ang nh\u1eadn ra:<\/p>\n                <\/div>\n\n                <div class=\"reveal bg-white p-12 md:p-16 rounded-[48px] border-l-[16px] border-amber shadow-2xl relative text-left\" style=\"transition-delay: 600ms;\">\n                    <p class=\"quote-text text-navy leading-relaxed\">\n                        Th\u1ee9 \u0111\u00e1ng h\u1ecdc nh\u1ea5t kh\u00f4ng ph\u1ea3i l\u00e0 logic. <br>L\u00e0 c\u1ea3m nh\u1eadn \u0111\u01b0\u1ee3c l\u00fd do b\u1ea1n t\u1ed3n t\u1ea1i.\n                    <\/p>\n                <\/div>\n\n                <div class=\"mt-20 pt-10 border-t border-navy\/5 flex flex-col md:flex-row items-center justify-between gap-6 reveal\" style=\"transition-delay: 800ms;\">\n                    <div class=\"text-left\">\n                        <p class=\"text-xs uppercase tracking-[0.2em] font-black text-navy\/40 mb-2\">Quan \u0111i\u1ec3m c\u1ee7a<\/p>\n                        <p class=\"font-black text-navy h2-text\">H\u1ea1 H\u1ed3ng Vi\u1ec7t<\/p>\n                        <p class=\"text-amber-deeper font-bold\">Th\u1ee3 X\u00e2y T\u00ean Tu\u1ed5i | Sellator<\/p>\n                    <\/div>\n                    <div class=\"flex gap-4\">\n                        <a href=\"https:\/\/sellator.net\" class=\"px-6 py-3 bg-navy text-white rounded-xl font-bold text-sm hover:bg-navy-light transition-all shadow-lg shadow-navy\/20\">sellator.net<\/a>\n                        <a href=\"https:\/\/hahongviet.com\" class=\"px-6 py-3 bg-amber text-navy rounded-xl font-bold text-sm hover:bg-amber-deep transition-all shadow-lg shadow-amber\/20\">hahongviet.com<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <script>\n        \/\/ Progress Bar\n        window.addEventListener('scroll', () => {\n            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;\n            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;\n            const scrolled = (winScroll \/ height) * 100;\n            document.getElementById('progress-bar').style.width = scrolled + \"%\";\n        });\n\n        \/\/ Intersection Observer\n        const revealObserver = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('active');\n                }\n            });\n        }, { threshold: 0.15 });\n\n        document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));\n\n        \/\/ Fullscreen Toggle\n        const fullscreenBtn = document.getElementById('fullscreen-btn');\n        fullscreenBtn.addEventListener('click', toggleFullscreen);\n\n        document.addEventListener('keydown', (e) => {\n            if (e.key === 'f' || e.key === 'F') toggleFullscreen();\n        });\n\n        function toggleFullscreen() {\n            if (!document.fullscreenElement) {\n                document.documentElement.requestFullscreen().catch(err => console.error(err));\n            } else {\n                if (document.exitFullscreen) document.exitFullscreen();\n            }\n        }\n    <\/script>\n<\/body>\n<\/html>\n\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u1ea1i sao AI \u0111ang thay \u0111\u1ed5i gi\u00e1o d\u1ee5c truy\u1ec1n th\u1ed1ng? | H\u1ea1 H\u1ed3ng Vi\u1ec7t x Sellator H\u1ea1 H\u1ed3ng Vi\u1ec7t \/ Sellator T\u1ea1i sao AI \u0111ang thay \u0111\u1ed5i gi\u00e1o d\u1ee5c truy\u1ec1n th\u1ed1ng? Kh\u00f4ng ph\u1ea3i v\u00ec AI th\u00f4ng minh h\u01a1n. M\u00e0 v\u00ec tr\u01b0\u1eddng h\u1ecdc \u0111ang d\u1ea1y b\u1ea1n c\u1ea1nh tranh v\u1edbi m\u00e1y m\u00f3c \u2014 v\u00e0 b\u1ea1n \u0111ang thua. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"no-title-no-thumb","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/workflow.ai.vn\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/workflow.ai.vn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/workflow.ai.vn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/workflow.ai.vn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/workflow.ai.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":5,"href":"https:\/\/workflow.ai.vn\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/workflow.ai.vn\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/workflow.ai.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}