{"id":6625,"date":"2025-07-11T11:00:47","date_gmt":"2025-07-11T04:00:47","guid":{"rendered":"https:\/\/tokuteigino.vn\/?page_id=6625"},"modified":"2025-07-11T11:01:11","modified_gmt":"2025-07-11T04:01:11","slug":"hoc-thu-nghe-tu-vung-nha-hang-gino2","status":"publish","type":"page","link":"https:\/\/tokuteigino.vn\/vi\/hoc-thu-nghe-tu-vung-nha-hang-gino2\/","title":{"rendered":"H\u1ecdc th\u1eed &#8211; nghe t\u1eeb v\u1ef1ng nh\u00e0 h\u00e0ng gino2"},"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: 100vh;\n            margin-top: 15px;\n            overflow: hidden;\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\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; \/* Th\u00eam position relative \u0111\u1ec3 pseudo-element ho\u1ea1t \u0111\u1ed9ng *\/\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        .video-course-item.completed::after {\n            content: \"\u2714\";\n            color: #4CAF50;\n            font-size: 16px;\n            position: absolute;\n            right: 10px;\n            top: 50%;\n            transform: translateY(-50%);\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\">1. An to\u00e0n v\u1ec7 sinh<\/div>\n        <div class=\"video-course-item\" data-index=\"1\">2. Ch\u1ebf bi\u1ebfn<\/div>\n        <div class=\"video-course-item\" data-index=\"2\">3. Ti\u1ebfp kh\u00e1ch<\/div>\n        <div class=\"video-course-item\" data-index=\"3\">4. Qu\u1ea3n l\u00fd<\/div>\n    <\/div>\n\n    <div class=\"video-container-wrapper\">\n        <div class=\"video-content\">\n            <div id=\"videoPlayer\" class=\"video-frame\"><\/div>\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\">1. An to\u00e0n v\u1ec7 sinh<\/div>\n            <div class=\"video-course-item\" data-index=\"1\">2. Ch\u1ebf bi\u1ebfn<\/div>\n            <div class=\"video-course-item\" data-index=\"2\">3. Ti\u1ebfp kh\u00e1ch<\/div>\n            <div class=\"video-course-item\" data-index=\"3\">4. Qu\u1ea3n l\u00fd<\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const videoIds = [\n            \"p0MEzzHks58\",\n            \"nTN93NOmuu0\",\n            \"IQBT0FDY-i0\",\n            \"DKzQ6Ulmujg\"\n        ];\n\n        let player;\n        let currentVideoIndex = 0;\n        const mobileCourseList = document.getElementById(\"mobileCourseList\");\n\n        \/\/ Load YouTube IFrame API\n        function onYouTubeIframeAPIReady() {\n            player = new YT.Player('videoPlayer', {\n                height: '100%',\n                width: '100%',\n                videoId: videoIds[currentVideoIndex],\n                playerVars: {\n                    'autoplay': 1,\n                    'controls': 1,\n                    'rel': 0,\n                    'modestbranding': 0,\n                    'showinfo': 0\n                },\n                events: {\n                    'onReady': onPlayerReady,\n                    'onStateChange': onPlayerStateChange\n                }\n            });\n        }\n\n        function onPlayerReady(event) {\n            \/\/ Kh\u00f4i ph\u1ee5c tr\u1ea1ng th\u00e1i video t\u1eeb localStorage\n            const savedVideoIndex = localStorage.getItem('lastNghenhgino2VideoIndex');\n            const savedVideoTime = localStorage.getItem('lastNghenhgino2VideoTime');\n\n            if (savedVideoIndex !== null && savedVideoTime !== null) {\n                currentVideoIndex = parseInt(savedVideoIndex, 10);\n                changeVideo(currentVideoIndex);\n                event.target.seekTo(parseFloat(savedVideoTime));\n            }\n\n            \/\/ Kh\u00f4i ph\u1ee5c tr\u1ea1ng th\u00e1i \u0111\u00e3 xem t\u1eeb localStorage\n            videoIds.forEach((videoId, index) => {\n                const isCompleted = localStorage.getItem(`nghenhGino2videoCompleted_${index}`);\n                if (isCompleted === \"true\") {\n                    markVideoAsCompleted(index);\n                }\n            });\n        }\n\n        function onPlayerStateChange(event) {\n            if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {\n                const currentTime = player.getCurrentTime();\n                localStorage.setItem('lastNghenhgino2VideoTime', currentTime);\n\n                \/\/ Ki\u1ec3m tra xem ng\u01b0\u1eddi d\u00f9ng \u0111\u00e3 xem h\u1ebft 95% video ch\u01b0a\n                const duration = player.getDuration();\n                if (currentTime \/ duration >= 0.95) {\n                    markVideoAsCompleted(currentVideoIndex);\n                    localStorage.setItem(`nghenhGino2videoCompleted_${currentVideoIndex}`, \"true\");\n                }\n\n                \/\/ T\u1ef1 \u0111\u1ed9ng ph\u00e1t video ti\u1ebfp theo khi video k\u1ebft th\u00fac\n                if (event.data === YT.PlayerState.ENDED) {\n                    nextVideo();\n                }\n            }\n        }\n\n        function markVideoAsCompleted(index) {\n            const videoItems = document.querySelectorAll(\".video-course-item\");\n            videoItems.forEach(item => {\n                if (parseInt(item.getAttribute(\"data-index\"), 10) === index) {\n                    item.classList.add(\"completed\");\n                }\n            });\n        }\n\n        function changeVideo(index) {\n            if (index >= 0 && index < videoIds.length) {\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                player.loadVideoById(videoIds[index]);\n                currentVideoIndex = index;\n                localStorage.setItem('lastNghenhgino2VideoIndex', currentVideoIndex);\n            }\n        }\n\n        function prevVideo() {\n            if (currentVideoIndex > 0) {\n                changeVideo(currentVideoIndex - 1);\n            }\n        }\n\n        function nextVideo() {\n            const currentTime = player.getCurrentTime();\n            const duration = player.getDuration();\n\n            \/\/ Ki\u1ec3m tra xem video \u0111\u00e3 xem qu\u00e1 95% ch\u01b0a\n            if (currentTime \/ duration >= 0.95) {\n             markVideoAsCompleted(currentVideoIndex);\n            localStorage.setItem(`nghenhGino2videoCompleted_${currentVideoIndex}`, \"true\");\n             }\n\n            \/\/ Chuy\u1ec3n sang video ti\u1ebfp theo\n            if (currentVideoIndex < videoIds.length - 1) {\n             changeVideo(currentVideoIndex + 1);\n            }\n        }\n\n        function toggleMobileMenu() {\n            mobileCourseList.classList.toggle(\"show\");\n        }\n\n        document.querySelectorAll(\".video-course-item\").forEach(item => {\n            item.addEventListener(\"click\", () => {\n                const index = parseInt(item.getAttribute(\"data-index\"), 10);\n                changeVideo(index);\n                if (window.innerWidth <= 1024) {\n                    toggleMobileMenu();\n                }\n            });\n        });\n\n        document.addEventListener(\"DOMContentLoaded\", () => {\n            changeVideo(0);\n        });\n    <\/script>\n\n    <!-- Nh\u00fang YouTube API -->\n    <script src=\"https:\/\/www.youtube.com\/iframe_api\"><\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Kh\u00f3a h\u1ecdc Video \u2630 Danh s\u00e1ch b\u00e0i gi\u1ea3ng 1. An to\u00e0n v\u1ec7 sinh 2. Ch\u1ebf bi\u1ebfn 3. Ti\u1ebfp kh\u00e1ch 4. Qu\u1ea3n l\u00fd \u276e B\u00e0i tr\u01b0\u1edbc B\u00e0i ti\u1ebfp theo \u276f \ud83d\udcd6 Danh s\u00e1ch b\u00e0i gi\u1ea3ng 1. An to\u00e0n v\u1ec7 sinh 2. Ch\u1ebf bi\u1ebfn 3. Ti\u1ebfp kh\u00e1ch 4. Qu\u1ea3n l\u00fd<\/p>\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-6625","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/6625","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=6625"}],"version-history":[{"count":2,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/6625\/revisions"}],"predecessor-version":[{"id":6627,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/6625\/revisions\/6627"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/media?parent=6625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}