{"id":5811,"date":"2025-04-04T11:10:06","date_gmt":"2025-04-04T04:10:06","guid":{"rendered":"https:\/\/tokuteigino.vn\/?page_id=5811"},"modified":"2025-05-23T12:15:18","modified_gmt":"2025-05-23T05:15:18","slug":"hoc-thu-cbtp-gino1-video-bai-giang","status":"publish","type":"page","link":"https:\/\/tokuteigino.vn\/vi\/hoc-thu-cbtp-gino1-video-bai-giang\/","title":{"rendered":"H\u1ecdc th\u1eed cbtp gino1 &#8211; video b\u00e0i gi\u1ea3ng"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Kh\u00f3a h\u1ecdc Video<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600&#038;display=swap\" rel=\"stylesheet\">\n    <style>\n       .video-container-wrapper {\n            display: flex;\n            height: 115vh;\n            margin-top: 0px;\n            overflow: hidden;\n            background: #f3f3f3;\n        }\n\n        .video-content {\n            flex: 3;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 0px;\n            background: white;\n            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);\n        }\n\n        .video-frame {\n            width: 100%;\n            height: 100vh;\n            border: none;\n            box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);\n        }\n\n        .video-course-list {\n            flex: 1;\n            background: #f3f3f3;\n            padding: 15px;\n            overflow-y: auto;\n            border-left: 3px solid #ddd;\n            transition: all 0.3s ease-in-out;\n        }\n\n        .video-course-list h3 {\n            margin-bottom: 15px;\n            font-size: 20px;\n            color: #004080;\n            text-align: left;\n        }\n\n        .video-course-item {\n            padding: 10px;\n            background: white;\n            border-radius: 5px;\n            margin-bottom: 5px;\n            cursor: pointer;\n            color: #7a9c59;\n            transition: background 0.3s;\n            position: relative;\n        }\n\n        .video-course-item:hover {\n            background: #ddd;\n        }\n\n        .video-course-item {\n            padding: 12px;\n            margin-bottom: 8px;\n            background: #f9f9f9;\n            border-radius: 5px;\n            cursor: pointer;\n            color: #333;\n            transition: background 0.3s, transform 0.2s;\n        }\n\n        .video-course-item:hover {\n            background: #e0f3ff;\n            transform: scale(1.02);\n        }\n\n        \/* Video \u0111ang ph\u00e1t *\/\n        .video-course-item.active {\n            background: #0f2819;\n            color: white;\n            font-weight: bold;\n            border-left: 5px solid #ffcc00;\n            box-shadow: 2px 2px 10px rgba(0, 64, 128, 0.3);\n        }\n\n        .video-navigation {\n            display: flex;\n            justify-content: center;\n            margin-top: 20px;\n            gap: 15px;\n        }\n\n        .video-nav-button {\n            padding: 10px 15px;\n            border: none;\n            border-radius: 25px;\n            font-size: 16px;\n            cursor: pointer;\n            transition: all 0.3s;\n        }\n\n        .video-prev {\n            background: white;\n            border: 2px solid #0f2819;\n            color: #0f2819;\n        }\n\n        .video-next {\n            background: #0f2819;\n            color: white;\n        }\n\n        \/* Responsive cho thi\u1ebft b\u1ecb di \u0111\u1ed9ng v\u00e0 tablet *\/\n        @media screen and (max-width: 1024px) {\n            .video-container-wrapper {\n                flex-direction: column;\n                height: auto;\n            }\n\n            .video-content {\n                width: 100%;\n                padding: 5px;\n                height: auto;\n            }\n\n            .video-frame {\n                width: 100%;\n                height: 300px;\n            }\n\n            .video-course-list {\n                display: none;\n            }\n\n            .mobile-menu-button {\n                display: block;\n                background: #0f2819;\n                color: white;\n                padding: 12px;\n                text-align: left;\n                cursor: pointer;\n            }\n\n            .mobile-course-list {\n                display: none;\n                width: 100%;\n                background: #f8f8f8;\n                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n                max-height: 300px;\n                overflow-y: auto;\n            }\n\n            .mobile-course-list.show {\n                display: block;\n            }\n        }\n\n        @media screen and (min-width: 1025px) {\n            .mobile-menu-button, .mobile-course-list {\n                display: none;\n            }\n        }\n        \n        \/* Popup style *\/\n        .popup {\n            display: none;\n            position: fixed;\n            top: 50%;\n            left: 50%;\n            color: #800000;\n            text-align: center;\n            align-items: center;\n            font-size: 1.2em;\n            transform: translate(-50%, -50%);\n            background-color: white;\n            padding: 20px;\n            border-radius: 20px;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n            z-index: 1000;\n        }\n        .popup button {\n            margin: 15px;\n            background: #0f2819;\n            color: white;\n            padding: 5px 15px;\n            border: none;\n            border-radius: 10px;\n            cursor: pointer;\n        }\n        .popup button:hover {\n            background-color: #800000;\n            color: white;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"mobile-menu-button\" onclick=\"toggleMobileMenu()\">\u2630 Danh s\u00e1ch b\u00e0i gi\u1ea3ng<\/div>\n    <div class=\"mobile-course-list\" id=\"mobileCourseList\">\n        <!-- Danh s\u00e1ch video cho mobile -->\n            <div class=\"video-course-item\" data-index=\"0\">Bu\u1ed5i 1. \u7b2c\uff11\u7ae0<\/div>\n            <div class=\"video-course-item\" data-index=\"1\">Bu\u1ed5i 2. \u7b2c\uff12\u7ae0<\/div>\n            <div class=\"video-course-item\" data-index=\"2\">Bu\u1ed5i 3. \u7b2c\uff13\u7ae0<\/div>\n            <div class=\"video-course-item\" data-index=\"3\">Bu\u1ed5i 4. \u7b2c\uff14\u7ae0<\/div>\n            <div class=\"video-course-item\" data-index=\"4\">Bu\u1ed5i 5. \u7b2c5\u7ae0<\/div>\n    <\/div>\n\n    <div class=\"video-container-wrapper\">\n        <div class=\"video-content\">\n            <video id=\"videoPlayer\" class=\"video-frame\" controls controlsList=\"nodownload\"><\/video>\n            <div class=\"video-navigation\">\n                <button class=\"video-nav-button video-prev\" onclick=\"prevVideo()\">\u276e B\u00e0i tr\u01b0\u1edbc<\/button>\n                <button class=\"video-nav-button video-next\" onclick=\"nextVideo()\">B\u00e0i ti\u1ebfp theo \u276f<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"video-course-list\">\n            <h3>\ud83d\udcd6 Danh s\u00e1ch b\u00e0i gi\u1ea3ng<\/h3>\n            <!-- Danh s\u00e1ch video -->\n            <div class=\"video-course-item\" data-index=\"0\">Bu\u1ed5i 1. \u7b2c\uff11\u7ae0<\/div>\n            <div class=\"video-course-item\" data-index=\"1\">Bu\u1ed5i 2. \u7b2c\uff12\u7ae0<\/div>\n            <div class=\"video-course-item\" data-index=\"2\">Bu\u1ed5i 3. \u7b2c\uff13\u7ae0<\/div>\n            <div class=\"video-course-item\" data-index=\"3\">Bu\u1ed5i 4. \u7b2c\uff14\u7ae0<\/div>\n            <div class=\"video-course-item\" data-index=\"4\">Bu\u1ed5i 5. \u7b2c5\u7ae0<\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- Premium Popup -->\n    <div class=\"popup\" id=\"premiumPopup\">\n        <p>B\u1ea1n c\u1ea7n mua kh\u00f3a h\u1ecdc \u0111\u1ec3 ti\u1ebfp t\u1ee5c<\/p>\n        <button onclick=\"closePremiumPopup()\">\u0110\u00f3ng<\/button>\n        <button onclick=\"contactUs()\">Li\u00ean h\u1ec7<\/button>\n    <\/div>\n\n    <script>\n        const videoUrls = [\n            \"https:\/\/storage.googleapis.com\/tokuteigino\/cbtp_gino1\/H%E1%BB%8Dc%20th%E1%BB%AD%20cbtp%20gino1.mp4\"\n        ];\n\n        let currentVideoIndex = 0;\n        const videoPlayer = document.getElementById(\"videoPlayer\");\n        const mobileCourseList = document.getElementById(\"mobileCourseList\");\n        const premiumPopup = document.getElementById(\"premiumPopup\");\n\n        \/\/ H\u00e0m thay \u0111\u1ed5i video - ch\u1ec9 cho ph\u00e9p xem video \u0111\u1ea7u ti\u00ean\n        function changeVideo(index) {\n            if (index !== 0) {\n                showPremiumPopup();\n                return;\n            }\n\n            document.querySelectorAll(\".video-course-item\").forEach(item => {\n                item.classList.remove(\"active\");\n            });\n\n            document.querySelectorAll(\".video-course-item\").forEach(item => {\n                if (parseInt(item.getAttribute(\"data-index\"), 10) === index) {\n                    item.classList.add(\"active\");\n                }\n            });\n\n            videoPlayer.src = videoUrls[index];\n            videoPlayer.play();\n            currentVideoIndex = index;\n        }\n\n        \/\/ H\u00e0m chuy\u1ec3n \u0111\u1ebfn video tr\u01b0\u1edbc\n        function prevVideo() {\n            showPremiumPopup();\n        }\n\n        \/\/ H\u00e0m chuy\u1ec3n \u0111\u1ebfn video ti\u1ebfp theo\n        function nextVideo() {\n            showPremiumPopup();\n        }\n\n        \/\/ H\u00e0m hi\u1ec3n th\u1ecb\/\u1ea9n menu tr\u00ean mobile\n        function toggleMobileMenu() {\n            mobileCourseList.classList.toggle(\"show\");\n        }\n\n        \/\/ H\u00e0m hi\u1ec3n th\u1ecb popup premium\n        function showPremiumPopup() {\n            premiumPopup.style.display = 'block';\n        }\n\n        \/\/ H\u00e0m \u0111\u00f3ng popup premium\n        function closePremiumPopup() {\n            premiumPopup.style.display = 'none';\n        }\n\n        \/\/ H\u00e0m li\u00ean h\u1ec7 (m\u1edf trong tab m\u1edbi)\n        function contactUs() {\n            window.open(\"https:\/\/m.me\/100280956308183\", \"_blank\");\n        }\n\n        \/\/ Th\u00eam s\u1ef1 ki\u1ec7n click cho c\u00e1c m\u1ee5c trong danh s\u00e1ch video\n        document.querySelectorAll(\".video-course-item\").forEach(item => {\n            item.addEventListener(\"click\", () => {\n                const index = parseInt(item.getAttribute(\"data-index\"), 10);\n                if (index === 0) {\n                    changeVideo(index);\n                } else {\n                    showPremiumPopup();\n                }\n                if (window.innerWidth <= 1024) {\n                    toggleMobileMenu();\n                }\n            });\n        });\n\n        \/\/ Kh\u1edfi t\u1ea1o video \u0111\u1ea7u ti\u00ean khi t\u1ea3i trang\n        document.addEventListener(\"DOMContentLoaded\", () => {\n            changeVideo(0);\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Kh\u00f3a h\u1ecdc Video \u2630 Danh s\u00e1ch b\u00e0i gi\u1ea3ng Bu\u1ed5i 1. \u7b2c\uff11\u7ae0 Bu\u1ed5i 2. \u7b2c\uff12\u7ae0 Bu\u1ed5i 3. \u7b2c\uff13\u7ae0 Bu\u1ed5i 4. \u7b2c\uff14\u7ae0 Bu\u1ed5i 5. \u7b2c5\u7ae0 \u276e B\u00e0i tr\u01b0\u1edbc B\u00e0i ti\u1ebfp theo \u276f \ud83d\udcd6 Danh s\u00e1ch b\u00e0i gi\u1ea3ng Bu\u1ed5i 1. \u7b2c\uff11\u7ae0 Bu\u1ed5i 2. \u7b2c\uff12\u7ae0 Bu\u1ed5i 3. \u7b2c\uff13\u7ae0 Bu\u1ed5i 4. \u7b2c\uff14\u7ae0 Bu\u1ed5i 5. \u7b2c5\u7ae0 B\u1ea1n c\u1ea7n mua kh\u00f3a h\u1ecdc [&#8230;]\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-5811","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/5811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/comments?post=5811"}],"version-history":[{"count":3,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/5811\/revisions"}],"predecessor-version":[{"id":6374,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/5811\/revisions\/6374"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/media?parent=5811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}