Kh\u00f3a h\u1ecdc Video nh\u00e0 h\u00e0ng gino2<\/title>\n\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"\/>\n\n<style>\n#ltt-app{\n --brand:#0f2819;\n --brand-2:#800000;\n --muted:#f3f3f3;\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n color:#111;\n overflow-x:hidden;\n}\n#ltt-app *{ box-sizing:border-box; }\n\n\/* ================== LAYOUT ================== *\/\n#ltt-app .video-container-wrapper{\n display:flex;\n min-height:100vh;\n background:var(--muted);\n}\n#ltt-app .video-content{\n flex:3;\n display:flex;\n flex-direction:column;\n gap:16px;\n padding:16px;\n background:#fff;\n}\n#ltt-app .section{\n position:relative;\n overflow:visible;\n background:#fff;\n border:1px solid #eee;\n border-radius:14px;\n padding:16px;\n box-shadow:0 2px 10px rgba(0,0,0,.06);\n}\n\n\/* ================== VIDEO PLAYER ================== *\/\n#ltt-app .video-frame{\n display:block;\n width:100%;\n height:62vh; min-height:320px;\n border:none; border-radius:12px;\n background:#000;\n box-shadow:0 2px 18px rgba(0,0,0,.12);\n}\n\n\/* ================== NAVIGATION ================== *\/\n#ltt-app .video-navigation{\n position:relative;\n display:flex;\n justify-content:center;\n gap:14px;\n margin:12px auto 0;\n padding:0 12px;\n}\n#ltt-app .video-nav-button{\n padding:5px 12px;\n border:2px solid var(--brand);\n border-radius:999px;\n font-size:16px;\n cursor:pointer;\n transition:.2s;\n background:#fff; color:var(--brand);\n white-space:nowrap;\n}\n#ltt-app .video-nav-button:hover{ transform:translateY(-1px); }\n#ltt-app .video-next{ background:var(--brand); color:#fff; }\n\n\/* ================== SIDEBAR ================== *\/\n#ltt-app .video-course-list{\n flex:1.1; background:#fff; padding:16px;\n overflow-y:auto; border-left:3px solid #eee;\n}\n#ltt-app .video-course-list h3{ margin:0 0 12px; font-size:18px; color:#004080; }\n#ltt-app .video-course-item{\n position:relative;\n padding:12px 14px; margin-bottom:8px;\n background:#fafafa; border:1px solid #eee; border-radius:10px;\n cursor:pointer; color:#333; transition:.15s;\n}\n#ltt-app .video-course-item:hover{ background:#e9f6ff; transform:translateY(-1px); }\n#ltt-app .video-course-item.active{\n background:var(--brand); color:#fff; font-weight:600;\n border-left:5px solid #ffcc00; box-shadow:0 4px 10px rgba(0,64,128,.2);\n}\n#ltt-app .video-course-item.completed::after{\n content:\"\u2714\"; color:#4CAF50; font-size:16px;\n position:absolute; right:10px; top:50%; transform:translateY(-50%);\n}\n\n\/* ================== POPUP MUA KH\u00d3A H\u1eccC ================== *\/\n.lock-popup-overlay{\n display:none;\n position:fixed;\n inset:0;\n background:rgba(0,0,0,.55);\n z-index:9999;\n align-items:center;\n justify-content:center;\n}\n.lock-popup-overlay.active{ display:flex; }\n\n.lock-popup-box{\n background:white;\n border-radius:16px;\n padding:35px 30px;\n max-width:380px;\n width:90%;\n text-align:center;\n box-shadow:0 20px 60px rgba(0,0,0,.3);\n animation:popupIn .25s ease;\n}\n@keyframes popupIn{\n from{ transform:scale(.85); opacity:0; }\n to { transform:scale(1); opacity:1; }\n}\n.lock-popup-box .lock-icon{ font-size:3em; margin-bottom:12px; }\n.lock-popup-box h3{ margin:0 0 10px; color:#0f2819; font-size:1.2em; font-family:Inter,sans-serif; }\n.lock-popup-box p { margin:0 0 25px; color:#555; font-size:.95em; line-height:1.6; font-family:Inter,sans-serif; }\n.lock-popup-box .popup-buttons{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n\n\/* Reset ho\u00e0n to\u00e0n \u0111\u1ec3 tr\u00e1nh CSS ngo\u00e0i \u1ea3nh h\u01b0\u1edfng *\/\n.lock-popup-box .btn-contact,\n.lock-popup-box .btn-close{\n all:unset;\n box-sizing:border-box;\n display:inline-block;\n border-radius:10px;\n padding:12px 28px;\n font-size:1em;\n font-weight:bold;\n font-family:Inter,system-ui,sans-serif;\n line-height:1;\n text-align:center;\n white-space:nowrap;\n cursor:pointer;\n transition:background .2s;\n text-decoration:none;\n}\n.lock-popup-box .btn-contact{ background:#0f2819; color:white; }\n.lock-popup-box .btn-contact:hover{ background:#1a4a2a; }\n.lock-popup-box .btn-close{ background:#f0f0f0; color:#333; }\n.lock-popup-box .btn-close:hover{ background:#ddd; }\n\n\/* ================== MOBILE ================== *\/\n#ltt-app .mobile-menu-button{ display:none; }\n#ltt-app .mobile-course-list{ display:none; }\n\n@media (max-width:1024px){\n #ltt-app .video-container-wrapper{ flex-direction:column; }\n #ltt-app .video-course-list{ display:none !important; }\n #ltt-app .mobile-menu-button{\n display:block; background:var(--brand);\n color:#fff; padding:12px; cursor:pointer;\n }\n #ltt-app .mobile-course-list{\n position:absolute;\n top:45px; left:0; right:0;\n background:#fff;\n z-index:999;\n max-height:60vh;\n overflow-y:auto;\n display:none;\n box-shadow:0 4px 12px rgba(0,0,0,.15);\n }\n #ltt-app .mobile-course-list.show{ display:block; }\n #ltt-app .video-frame{ height:32vh; min-height:220px; }\n}\n\n@media (max-width:768px){\n #ltt-app .video-content{ padding:0; }\n #ltt-app .video-frame{ width:100%; margin-left:0; height:48vh; border-radius:0; }\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<div class=\"lock-popup-overlay\" id=\"lockPopup\">\n <div class=\"lock-popup-box\">\n <div class=\"lock-icon\">\ud83c\udf93<\/div>\n <h3>B\u1ea1n c\u1ea7n mua kh\u00f3a h\u1ecdc \u0111\u1ec3 ti\u1ebfp t\u1ee5c<\/h3>\n <p>B\u1ea1n v\u1eeba ho\u00e0n th\u00e0nh ph\u1ea7n h\u1ecdc th\u1eed mi\u1ec5n ph\u00ed.<br>Mua kh\u00f3a h\u1ecdc \u0111\u1ec3 m\u1edf kh\u00f3a to\u00e0n b\u1ed9 b\u00e0i gi\u1ea3ng!<\/p>\n <div class=\"popup-buttons\">\n <a href=\"https:\/\/www.messenger.com\/t\/100280956308183\" class=\"btn-contact\" id=\"btnContact\" target=\"_blank\">Li\u00ean h\u1ec7<\/a>\n <button class=\"btn-close\" onclick=\"closeLockPopup()\">\u0110\u00f3ng<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<div id=\"ltt-app\">\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\"><\/div>\n <div class=\"video-container-wrapper\">\n <div class=\"video-content\">\n <video id=\"html5Video\" class=\"video-frame\" controls controlsList=\"nodownload\" playsinline><\/video>\n <div class=\"video-navigation\">\n <button class=\"video-nav-button\" 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 <aside class=\"video-course-list\">\n <h3>\ud83d\udcd6 Danh s\u00e1ch b\u00e0i gi\u1ea3ng<\/h3>\n <div id=\"desktopCourseList\"><\/div>\n <\/aside>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ============================================================\n \/\/ DANH S\u00c1CH B\u00c0I GI\u1ea2NG\n \/\/ Bu\u1ed5i 1: video h\u1ecdc th\u1eed th\u1eadt. C\u00e1c bu\u1ed5i c\u00f2n l\u1ea1i: kh\u00f3a khi click\n \/\/ ============================================================\n const videoData = [\n { title: \"Qu\u1ea3n l\u00fd c\u1eeda h\u00e0ng ph\u1ea7n 1\", url: \"https:\/\/storage.googleapis.com\/tokuteigino\/cbtp_gino2\/Qua%CC%89n%20ly%CC%81%20cu%CC%9B%CC%89a%20ha%CC%80ng%20(ho%CC%A3c%20thu%CC%9B%CC%89).mp4\" },\n { title: \"Qu\u1ea3n l\u00fd c\u1eeda h\u00e0ng ph\u1ea7n 2\", url: \"\" },\n { title: \"Qu\u1ea3n l\u00fd c\u1eeda h\u00e0ng ph\u1ea7n 3\", url: \"\" },\n { title: \"Qu\u1ea3n l\u00fd c\u1eeda h\u00e0ng ph\u1ea7n 4\", url: \"\" },\n { title: \"T\u00ednh to\u00e1n 01\", url: \"\" },\n { title: \"T\u00ednh to\u00e1n 02\", url: \"\" },\n { title: \"Ch\u1eefa \u0111\u1ec1 01\", url: \"\" },\n { title: \"Ch\u1eefa \u0111\u1ec1 02\", url: \"\" },\n ];\n\n \/\/ ============================================================\n let currentVideoIndex = 0;\n const html5Video = document.getElementById('html5Video');\n const LS_DONE_PREFIX = 'trialBgNhahang2Completed_';\n\n \/\/ ============================================================\n \/\/ RENDER DANH S\u00c1CH\n \/\/ ============================================================\n function renderCourseLists() {\n const d = document.getElementById('desktopCourseList');\n const m = document.getElementById('mobileCourseList');\n d.innerHTML = ''; m.innerHTML = '';\n\n videoData.forEach((v, idx) => {\n const el = document.createElement('div');\n el.className = 'video-course-item';\n el.dataset.index = idx;\n el.textContent = v.title;\n el.onclick = () => handleSelect(idx);\n if (localStorage.getItem(LS_DONE_PREFIX + idx) === 'true') el.classList.add('completed');\n d.appendChild(el);\n\n const el2 = el.cloneNode(true);\n el2.onclick = () => { handleSelect(idx); toggleMobileMenu(); };\n m.appendChild(el2);\n });\n }\n\n function handleSelect(index) {\n if (index > 0) { showLockPopup(); return; }\n changeVideo(index);\n }\n\n \/\/ ============================================================\n \/\/ PLAYER\n \/\/ ============================================================\n function changeVideo(index) {\n html5Video.pause();\n html5Video.src = videoData[index].url;\n html5Video.load();\n html5Video.play().catch(() => {});\n currentVideoIndex = index;\n setActiveItem(index);\n }\n\n function setActiveItem(index) {\n document.querySelectorAll('.video-course-item').forEach(el => el.classList.remove('active'));\n document.querySelectorAll(`[data-index=\"${index}\"]`).forEach(el => el.classList.add('active'));\n }\n\n function prevVideo() {\n if (currentVideoIndex > 0) handleSelect(currentVideoIndex - 1);\n }\n function nextVideo() {\n showLockPopup();\n }\n\n html5Video.addEventListener('ended', () => {\n localStorage.setItem(LS_DONE_PREFIX + currentVideoIndex, 'true');\n document.querySelectorAll(`[data-index=\"${currentVideoIndex}\"]`).forEach(el => el.classList.add('completed'));\n showLockPopup();\n });\n\n \/\/ ============================================================\n \/\/ POPUP\n \/\/ ============================================================\n function showLockPopup() {\n document.getElementById('lockPopup').classList.add('active');\n }\n function closeLockPopup() {\n document.getElementById('lockPopup').classList.remove('active');\n }\n document.getElementById('lockPopup').addEventListener('click', function(e) {\n if (e.target === this) closeLockPopup();\n });\n\n \/\/ ============================================================\n function toggleMobileMenu() {\n document.getElementById('mobileCourseList').classList.toggle('show');\n }\n\n \/\/ ============================================================\n \/\/ KH\u1edeI T\u1ea0O\n \/\/ ============================================================\n renderCourseLists();\n changeVideo(0);\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Kh\u00f3a h\u1ecdc Video nh\u00e0 h\u00e0ng gino2 \ud83c\udf93 B\u1ea1n c\u1ea7n mua kh\u00f3a h\u1ecdc \u0111\u1ec3 ti\u1ebfp t\u1ee5c B\u1ea1n v\u1eeba ho\u00e0n th\u00e0nh ph\u1ea7n h\u1ecdc th\u1eed mi\u1ec5n ph\u00ed.Mua kh\u00f3a h\u1ecdc \u0111\u1ec3 m\u1edf kh\u00f3a to\u00e0n b\u1ed9 b\u00e0i gi\u1ea3ng! Li\u00ean h\u1ec7 \u0110\u00f3ng \u2630 Danh s\u00e1ch b\u00e0i gi\u1ea3ng \u276e B\u00e0i tr\u01b0\u1edbc B\u00e0i ti\u1ebfp theo \u276f \ud83d\udcd6 Danh s\u00e1ch b\u00e0i gi\u1ea3ng<\/p>","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-5837","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/5837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/comments?post=5837"}],"version-history":[{"count":8,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/5837\/revisions"}],"predecessor-version":[{"id":8379,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/5837\/revisions\/8379"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/media?parent=5837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5837,"date":"2025-04-04T15:06:56","date_gmt":"2025-04-04T08:06:56","guid":{"rendered":"https:\/\/tokuteigino.vn\/?page_id=5837"},"modified":"2026-04-11T17:13:56","modified_gmt":"2026-04-11T10:13:56","slug":"hoc-thu-nha-hang-gino2-video-bai-giang","status":"publish","type":"page","link":"https:\/\/tokuteigino.vn\/ja\/hoc-thu-nha-hang-gino2-video-bai-giang\/","title":{"rendered":"H\u1ecdc th\u1eed nh\u00e0 h\u00e0ng gino2 – video b\u00e0i gi\u1ea3ng"},"content":{"rendered":"\n\n\n\n \n \n Kh\u00f3a h\u1ecdc Video nh\u00e0 h\u00e0ng gino2<\/title>\n\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"\/>\n\n<style>\n#ltt-app{\n --brand:#0f2819;\n --brand-2:#800000;\n --muted:#f3f3f3;\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n color:#111;\n overflow-x:hidden;\n}\n#ltt-app *{ box-sizing:border-box; }\n\n\/* ================== LAYOUT ================== *\/\n#ltt-app .video-container-wrapper{\n display:flex;\n min-height:100vh;\n background:var(--muted);\n}\n#ltt-app .video-content{\n flex:3;\n display:flex;\n flex-direction:column;\n gap:16px;\n padding:16px;\n background:#fff;\n}\n#ltt-app .section{\n position:relative;\n overflow:visible;\n background:#fff;\n border:1px solid #eee;\n border-radius:14px;\n padding:16px;\n box-shadow:0 2px 10px rgba(0,0,0,.06);\n}\n\n\/* ================== VIDEO PLAYER ================== *\/\n#ltt-app .video-frame{\n display:block;\n width:100%;\n height:62vh; min-height:320px;\n border:none; border-radius:12px;\n background:#000;\n box-shadow:0 2px 18px rgba(0,0,0,.12);\n}\n\n\/* ================== NAVIGATION ================== *\/\n#ltt-app .video-navigation{\n position:relative;\n display:flex;\n justify-content:center;\n gap:14px;\n margin:12px auto 0;\n padding:0 12px;\n}\n#ltt-app .video-nav-button{\n padding:5px 12px;\n border:2px solid var(--brand);\n border-radius:999px;\n font-size:16px;\n cursor:pointer;\n transition:.2s;\n background:#fff; color:var(--brand);\n white-space:nowrap;\n}\n#ltt-app .video-nav-button:hover{ transform:translateY(-1px); }\n#ltt-app .video-next{ background:var(--brand); color:#fff; }\n\n\/* ================== SIDEBAR ================== *\/\n#ltt-app .video-course-list{\n flex:1.1; background:#fff; padding:16px;\n overflow-y:auto; border-left:3px solid #eee;\n}\n#ltt-app .video-course-list h3{ margin:0 0 12px; font-size:18px; color:#004080; }\n#ltt-app .video-course-item{\n position:relative;\n padding:12px 14px; margin-bottom:8px;\n background:#fafafa; border:1px solid #eee; border-radius:10px;\n cursor:pointer; color:#333; transition:.15s;\n}\n#ltt-app .video-course-item:hover{ background:#e9f6ff; transform:translateY(-1px); }\n#ltt-app .video-course-item.active{\n background:var(--brand); color:#fff; font-weight:600;\n border-left:5px solid #ffcc00; box-shadow:0 4px 10px rgba(0,64,128,.2);\n}\n#ltt-app .video-course-item.completed::after{\n content:\"\u2714\"; color:#4CAF50; font-size:16px;\n position:absolute; right:10px; top:50%; transform:translateY(-50%);\n}\n\n\/* ================== POPUP MUA KH\u00d3A H\u1eccC ================== *\/\n.lock-popup-overlay{\n display:none;\n position:fixed;\n inset:0;\n background:rgba(0,0,0,.55);\n z-index:9999;\n align-items:center;\n justify-content:center;\n}\n.lock-popup-overlay.active{ display:flex; }\n\n.lock-popup-box{\n background:white;\n border-radius:16px;\n padding:35px 30px;\n max-width:380px;\n width:90%;\n text-align:center;\n box-shadow:0 20px 60px rgba(0,0,0,.3);\n animation:popupIn .25s ease;\n}\n@keyframes popupIn{\n from{ transform:scale(.85); opacity:0; }\n to { transform:scale(1); opacity:1; }\n}\n.lock-popup-box .lock-icon{ font-size:3em; margin-bottom:12px; }\n.lock-popup-box h3{ margin:0 0 10px; color:#0f2819; font-size:1.2em; font-family:Inter,sans-serif; }\n.lock-popup-box p { margin:0 0 25px; color:#555; font-size:.95em; line-height:1.6; font-family:Inter,sans-serif; }\n.lock-popup-box .popup-buttons{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }\n\n\/* Reset ho\u00e0n to\u00e0n \u0111\u1ec3 tr\u00e1nh CSS ngo\u00e0i \u1ea3nh h\u01b0\u1edfng *\/\n.lock-popup-box .btn-contact,\n.lock-popup-box .btn-close{\n all:unset;\n box-sizing:border-box;\n display:inline-block;\n border-radius:10px;\n padding:12px 28px;\n font-size:1em;\n font-weight:bold;\n font-family:Inter,system-ui,sans-serif;\n line-height:1;\n text-align:center;\n white-space:nowrap;\n cursor:pointer;\n transition:background .2s;\n text-decoration:none;\n}\n.lock-popup-box .btn-contact{ background:#0f2819; color:white; }\n.lock-popup-box .btn-contact:hover{ background:#1a4a2a; }\n.lock-popup-box .btn-close{ background:#f0f0f0; color:#333; }\n.lock-popup-box .btn-close:hover{ background:#ddd; }\n\n\/* ================== MOBILE ================== *\/\n#ltt-app .mobile-menu-button{ display:none; }\n#ltt-app .mobile-course-list{ display:none; }\n\n@media (max-width:1024px){\n #ltt-app .video-container-wrapper{ flex-direction:column; }\n #ltt-app .video-course-list{ display:none !important; }\n #ltt-app .mobile-menu-button{\n display:block; background:var(--brand);\n color:#fff; padding:12px; cursor:pointer;\n }\n #ltt-app .mobile-course-list{\n position:absolute;\n top:45px; left:0; right:0;\n background:#fff;\n z-index:999;\n max-height:60vh;\n overflow-y:auto;\n display:none;\n box-shadow:0 4px 12px rgba(0,0,0,.15);\n }\n #ltt-app .mobile-course-list.show{ display:block; }\n #ltt-app .video-frame{ height:32vh; min-height:220px; }\n}\n\n@media (max-width:768px){\n #ltt-app .video-content{ padding:0; }\n #ltt-app .video-frame{ width:100%; margin-left:0; height:48vh; border-radius:0; }\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<div class=\"lock-popup-overlay\" id=\"lockPopup\">\n <div class=\"lock-popup-box\">\n <div class=\"lock-icon\">\ud83c\udf93<\/div>\n <h3>B\u1ea1n c\u1ea7n mua kh\u00f3a h\u1ecdc \u0111\u1ec3 ti\u1ebfp t\u1ee5c<\/h3>\n <p>B\u1ea1n v\u1eeba ho\u00e0n th\u00e0nh ph\u1ea7n h\u1ecdc th\u1eed mi\u1ec5n ph\u00ed.<br>Mua kh\u00f3a h\u1ecdc \u0111\u1ec3 m\u1edf kh\u00f3a to\u00e0n b\u1ed9 b\u00e0i gi\u1ea3ng!<\/p>\n <div class=\"popup-buttons\">\n <a href=\"https:\/\/www.messenger.com\/t\/100280956308183\" class=\"btn-contact\" id=\"btnContact\" target=\"_blank\">Li\u00ean h\u1ec7<\/a>\n <button class=\"btn-close\" onclick=\"closeLockPopup()\">\u0110\u00f3ng<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<div id=\"ltt-app\">\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\"><\/div>\n <div class=\"video-container-wrapper\">\n <div class=\"video-content\">\n <video id=\"html5Video\" class=\"video-frame\" controls controlsList=\"nodownload\" playsinline><\/video>\n <div class=\"video-navigation\">\n <button class=\"video-nav-button\" 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 <aside class=\"video-course-list\">\n <h3>\ud83d\udcd6 Danh s\u00e1ch b\u00e0i gi\u1ea3ng<\/h3>\n <div id=\"desktopCourseList\"><\/div>\n <\/aside>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ============================================================\n \/\/ DANH S\u00c1CH B\u00c0I GI\u1ea2NG\n \/\/ Bu\u1ed5i 1: video h\u1ecdc th\u1eed th\u1eadt. C\u00e1c bu\u1ed5i c\u00f2n l\u1ea1i: kh\u00f3a khi click\n \/\/ ============================================================\n const videoData = [\n { title: \"Qu\u1ea3n l\u00fd c\u1eeda h\u00e0ng ph\u1ea7n 1\", url: \"https:\/\/storage.googleapis.com\/tokuteigino\/cbtp_gino2\/Qua%CC%89n%20ly%CC%81%20cu%CC%9B%CC%89a%20ha%CC%80ng%20(ho%CC%A3c%20thu%CC%9B%CC%89).mp4\" },\n { title: \"Qu\u1ea3n l\u00fd c\u1eeda h\u00e0ng ph\u1ea7n 2\", url: \"\" },\n { title: \"Qu\u1ea3n l\u00fd c\u1eeda h\u00e0ng ph\u1ea7n 3\", url: \"\" },\n { title: \"Qu\u1ea3n l\u00fd c\u1eeda h\u00e0ng ph\u1ea7n 4\", url: \"\" },\n { title: \"T\u00ednh to\u00e1n 01\", url: \"\" },\n { title: \"T\u00ednh to\u00e1n 02\", url: \"\" },\n { title: \"Ch\u1eefa \u0111\u1ec1 01\", url: \"\" },\n { title: \"Ch\u1eefa \u0111\u1ec1 02\", url: \"\" },\n ];\n\n \/\/ ============================================================\n let currentVideoIndex = 0;\n const html5Video = document.getElementById('html5Video');\n const LS_DONE_PREFIX = 'trialBgNhahang2Completed_';\n\n \/\/ ============================================================\n \/\/ RENDER DANH S\u00c1CH\n \/\/ ============================================================\n function renderCourseLists() {\n const d = document.getElementById('desktopCourseList');\n const m = document.getElementById('mobileCourseList');\n d.innerHTML = ''; m.innerHTML = '';\n\n videoData.forEach((v, idx) => {\n const el = document.createElement('div');\n el.className = 'video-course-item';\n el.dataset.index = idx;\n el.textContent = v.title;\n el.onclick = () => handleSelect(idx);\n if (localStorage.getItem(LS_DONE_PREFIX + idx) === 'true') el.classList.add('completed');\n d.appendChild(el);\n\n const el2 = el.cloneNode(true);\n el2.onclick = () => { handleSelect(idx); toggleMobileMenu(); };\n m.appendChild(el2);\n });\n }\n\n function handleSelect(index) {\n if (index > 0) { showLockPopup(); return; }\n changeVideo(index);\n }\n\n \/\/ ============================================================\n \/\/ PLAYER\n \/\/ ============================================================\n function changeVideo(index) {\n html5Video.pause();\n html5Video.src = videoData[index].url;\n html5Video.load();\n html5Video.play().catch(() => {});\n currentVideoIndex = index;\n setActiveItem(index);\n }\n\n function setActiveItem(index) {\n document.querySelectorAll('.video-course-item').forEach(el => el.classList.remove('active'));\n document.querySelectorAll(`[data-index=\"${index}\"]`).forEach(el => el.classList.add('active'));\n }\n\n function prevVideo() {\n if (currentVideoIndex > 0) handleSelect(currentVideoIndex - 1);\n }\n function nextVideo() {\n showLockPopup();\n }\n\n html5Video.addEventListener('ended', () => {\n localStorage.setItem(LS_DONE_PREFIX + currentVideoIndex, 'true');\n document.querySelectorAll(`[data-index=\"${currentVideoIndex}\"]`).forEach(el => el.classList.add('completed'));\n showLockPopup();\n });\n\n \/\/ ============================================================\n \/\/ POPUP\n \/\/ ============================================================\n function showLockPopup() {\n document.getElementById('lockPopup').classList.add('active');\n }\n function closeLockPopup() {\n document.getElementById('lockPopup').classList.remove('active');\n }\n document.getElementById('lockPopup').addEventListener('click', function(e) {\n if (e.target === this) closeLockPopup();\n });\n\n \/\/ ============================================================\n function toggleMobileMenu() {\n document.getElementById('mobileCourseList').classList.toggle('show');\n }\n\n \/\/ ============================================================\n \/\/ KH\u1edeI T\u1ea0O\n \/\/ ============================================================\n renderCourseLists();\n changeVideo(0);\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Kh\u00f3a h\u1ecdc Video nh\u00e0 h\u00e0ng gino2 \ud83c\udf93 B\u1ea1n c\u1ea7n mua kh\u00f3a h\u1ecdc \u0111\u1ec3 ti\u1ebfp t\u1ee5c B\u1ea1n v\u1eeba ho\u00e0n th\u00e0nh ph\u1ea7n h\u1ecdc th\u1eed mi\u1ec5n ph\u00ed.Mua kh\u00f3a h\u1ecdc \u0111\u1ec3 m\u1edf kh\u00f3a to\u00e0n b\u1ed9 b\u00e0i gi\u1ea3ng! Li\u00ean h\u1ec7 \u0110\u00f3ng \u2630 Danh s\u00e1ch b\u00e0i gi\u1ea3ng \u276e B\u00e0i tr\u01b0\u1edbc B\u00e0i ti\u1ebfp theo \u276f \ud83d\udcd6 Danh s\u00e1ch b\u00e0i gi\u1ea3ng<\/p>","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-5837","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/5837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/comments?post=5837"}],"version-history":[{"count":8,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/5837\/revisions"}],"predecessor-version":[{"id":8379,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/5837\/revisions\/8379"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/media?parent=5837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}