Kh\u00f3a h\u1ecdc Video<\/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 nghe!<\/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 nghe<\/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 nghe<\/h3>\n <div id=\"desktopCourseList\"><\/div>\n <\/aside>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ============================================================\n \/\/ C\u1ea4U H\u00ccNH \u2014 \u0111i\u1ec1n link li\u00ean h\u1ec7 v\u00e0o \u0111\u00e2y\n \/\/ ============================================================\n const CONTACT_LINK = 'https:\/\/www.messenger.com\/t\/100280956308183';\n\n \/\/ ============================================================\n \/\/ Danh s\u00e1ch b\u00e0i nghe\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: \"Bu\u1ed5i 1\", url: \"https:\/\/storage.googleapis.com\/tokuteigino\/cbtp_gino2\/Nghe%20t%E1%BB%AB%20v%E1%BB%B1ng%20-%20Ch%C6%B0%C6%A1ng%204.mp4\" },\n { title: \"Bu\u1ed5i 2\", url: \"\" },\n { title: \"Bu\u1ed5i 3\", url: \"\" },\n { title: \"Bu\u1ed5i 4\", url: \"\" },\n { title: \"Bu\u1ed5i 5\", url: \"\" },\n { title: \"Bu\u1ed5i 6\", url: \"\" },\n { title: \"Bu\u1ed5i 7\", url: \"\" },\n { title: \"Bu\u1ed5i 8\", url: \"\" },\n { title: \"Bu\u1ed5i 9\", url: \"\" },\n { title: \"Bu\u1ed5i 10\", url: \"\" },\n { title: \"Bu\u1ed5i 11\", url: \"\" },\n { title: \"Bu\u1ed5i 12\", url: \"\" },\n { title: \"Bu\u1ed5i 13\", url: \"\" },\n { title: \"Bu\u1ed5i 14\", url: \"\" },\n { title: \"Bu\u1ed5i 15\", url: \"\" },\n ];\n\n \/\/ ============================================================\n let currentVideoIndex = 0;\n const html5Video = document.getElementById('html5Video');\n const LS_DONE_PREFIX = 'trialBgTp2Completed_';\n\n document.getElementById('btnContact').href = CONTACT_LINK;\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 \/\/ B\u00e0i ti\u1ebfp theo (index > 0) \u2192 popup\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 \/\/ Sau khi xem xong bu\u1ed5i 1 \u2192 hi\u1ec7n popup m\u1eddi mua\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 \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 nghe! Li\u00ean h\u1ec7 \u0110\u00f3ng \u2630 Danh s\u00e1ch b\u00e0i nghe \u276e B\u00e0i tr\u01b0\u1edbc B\u00e0i ti\u1ebfp theo \u276f \ud83d\udcd6 Danh s\u00e1ch b\u00e0i nghe<\/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-6613","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/6613","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=6613"}],"version-history":[{"count":4,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/6613\/revisions"}],"predecessor-version":[{"id":8378,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/6613\/revisions\/8378"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/media?parent=6613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6613,"date":"2025-07-10T18:07:29","date_gmt":"2025-07-10T11:07:29","guid":{"rendered":"https:\/\/tokuteigino.vn\/?page_id=6613"},"modified":"2026-04-10T18:43:32","modified_gmt":"2026-04-10T11:43:32","slug":"hoc-thu-nghe-tu-vung-cbtp-gino2","status":"publish","type":"page","link":"https:\/\/tokuteigino.vn\/ja\/hoc-thu-nghe-tu-vung-cbtp-gino2\/","title":{"rendered":"H\u1ecdc th\u1eed – Nghe t\u1eeb v\u1ef1ng cbtp gino2"},"content":{"rendered":"\n\n\n\n \n \n Kh\u00f3a h\u1ecdc Video<\/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 nghe!<\/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 nghe<\/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 nghe<\/h3>\n <div id=\"desktopCourseList\"><\/div>\n <\/aside>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ============================================================\n \/\/ C\u1ea4U H\u00ccNH \u2014 \u0111i\u1ec1n link li\u00ean h\u1ec7 v\u00e0o \u0111\u00e2y\n \/\/ ============================================================\n const CONTACT_LINK = 'https:\/\/www.messenger.com\/t\/100280956308183';\n\n \/\/ ============================================================\n \/\/ Danh s\u00e1ch b\u00e0i nghe\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: \"Bu\u1ed5i 1\", url: \"https:\/\/storage.googleapis.com\/tokuteigino\/cbtp_gino2\/Nghe%20t%E1%BB%AB%20v%E1%BB%B1ng%20-%20Ch%C6%B0%C6%A1ng%204.mp4\" },\n { title: \"Bu\u1ed5i 2\", url: \"\" },\n { title: \"Bu\u1ed5i 3\", url: \"\" },\n { title: \"Bu\u1ed5i 4\", url: \"\" },\n { title: \"Bu\u1ed5i 5\", url: \"\" },\n { title: \"Bu\u1ed5i 6\", url: \"\" },\n { title: \"Bu\u1ed5i 7\", url: \"\" },\n { title: \"Bu\u1ed5i 8\", url: \"\" },\n { title: \"Bu\u1ed5i 9\", url: \"\" },\n { title: \"Bu\u1ed5i 10\", url: \"\" },\n { title: \"Bu\u1ed5i 11\", url: \"\" },\n { title: \"Bu\u1ed5i 12\", url: \"\" },\n { title: \"Bu\u1ed5i 13\", url: \"\" },\n { title: \"Bu\u1ed5i 14\", url: \"\" },\n { title: \"Bu\u1ed5i 15\", url: \"\" },\n ];\n\n \/\/ ============================================================\n let currentVideoIndex = 0;\n const html5Video = document.getElementById('html5Video');\n const LS_DONE_PREFIX = 'trialBgTp2Completed_';\n\n document.getElementById('btnContact').href = CONTACT_LINK;\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 \/\/ B\u00e0i ti\u1ebfp theo (index > 0) \u2192 popup\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 \/\/ Sau khi xem xong bu\u1ed5i 1 \u2192 hi\u1ec7n popup m\u1eddi mua\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 \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 nghe! Li\u00ean h\u1ec7 \u0110\u00f3ng \u2630 Danh s\u00e1ch b\u00e0i nghe \u276e B\u00e0i tr\u01b0\u1edbc B\u00e0i ti\u1ebfp theo \u276f \ud83d\udcd6 Danh s\u00e1ch b\u00e0i nghe<\/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-6613","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/6613","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=6613"}],"version-history":[{"count":4,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/6613\/revisions"}],"predecessor-version":[{"id":8378,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/6613\/revisions\/8378"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/media?parent=6613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}