Th\u1ebb t\u1eeb v\u1ef1ng cbtp tokutei gino2<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\n <style>\n :root {\n --primary-color: #0f2819;\n --completed-bg: #7a9c59;\n }\n\n * { box-sizing: border-box; }\n\n .flashcard-wrapper {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #e9ecef;\n margin: 0; padding: 0;\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow-x: hidden;\n }\n\n .flashcard-wrapper .page-container {\n display: flex;\n flex: 1;\n margin: 0 auto;\n padding: 20px;\n position: relative;\n width: 100%;\n }\n\n \/* ================= SIDEBAR (B\u00caN TR\u00c1I) ================= *\/\n .flashcard-wrapper .menu-container {\n flex: 0 0 320px;\n max-height: calc(100vh - 40px);\n overflow-y: auto;\n padding: 15px;\n margin: 10px;\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n }\n\n .menu-header {\n font-size: 1.1em;\n font-weight: bold;\n color: var(--primary-color);\n margin-bottom: 15px;\n padding-bottom: 10px;\n border-bottom: 2px solid #eee;\n text-align: center;\n }\n\n .flashcard-wrapper .card-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); \n gap: 12px;\n width: 100%;\n }\n\n .flashcard-wrapper .card {\n background-color: #ffffff;\n border: 1px solid #dee2e6;\n border-radius: 10px;\n padding: 12px 5px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center; justify-content: center;\n min-height: 55px;\n }\n\n .flashcard-wrapper .card.selected { background-color: var(--primary-color) !important; color: white !important; }\n .flashcard-wrapper .card.completed { background-color: var(--completed-bg) !important; border-color: var(--completed-bg); }\n .flashcard-wrapper .card h3 { margin: 0; font-size: 0.9em; font-weight: 600; color: #333; }\n .flashcard-wrapper .card.selected h3, .flashcard-wrapper .card.completed h3 { color: white !important; }\n\n \/* ================= FLIP CARD (B\u00caN PH\u1ea2I) ================= *\/\n .flashcard-wrapper .flip-card {\n \/* FIX: Lo\u1ea1i b\u1ecf flex: 3 \u0111\u1ec3 height c\u00f3 t\u00e1c d\u1ee5ng *\/\n flex: none; \n width: 100%;\n height: 380px; \/* Chi\u1ec1u cao c\u1ed1 \u0111\u1ecbnh tr\u00ean PC *\/\n perspective: 1000px;\n margin-bottom: 20px;\n position: relative;\n }\n\n .flashcard-wrapper .flip-card-inner {\n position: relative;\n width: 100%; height: 100%;\n text-align: center;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n }\n\n .flashcard-wrapper .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }\n\n .flashcard-wrapper .flip-card-front, .flashcard-wrapper .flip-card-back {\n position: absolute; width: 100%; height: 100%; backface-visibility: hidden;\n display: flex; align-items: center; justify-content: center; flex-direction: column;\n border-radius: 15px; padding: 30px;\n box-shadow: 0 8px 20px rgba(0,0,0,0.1);\n }\n\n .flashcard-wrapper .flip-card-front { background-color: var(--primary-color); color: white; }\n .flashcard-wrapper .flip-card-back { background-color: #7a9c59; color: white; transform: rotateY(180deg); }\n\n .flashcard-wrapper .flip-card-content { font-size: 2.5em; margin-bottom: 10px; font-weight: bold; }\n .flashcard-wrapper .flip-card-id { position: absolute; top: 15px; left: 20px; font-size: 0.9em; opacity: 0.7; }\n\n .flashcard-wrapper .flip-button {\n position: absolute; right: 15px; bottom: 15px; background-color: #fff;\n border: none; border-radius: 50%; width: 44px; height: 44px;\n cursor: pointer; display: flex; align-items: center; justify-content: center;\n z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n }\n\n .flashcard-wrapper .play-audio-button { position: absolute; bottom: 15px; left: 20px; font-size: 1.8em; cursor: pointer; color: white; }\n\n .random-button {\n position: absolute; top: 15px; right: 15px; \n padding: 8px 12px; background: rgba(255,255,255,0.15);\n border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; cursor: pointer; color: white;\n }\n .random-button.active { background: white; color: var(--primary-color); }\n\n .flashcard-wrapper .buttons-container { display: flex; justify-content: center; gap: 40px; margin-top: 10px; }\n .flashcard-wrapper .button { background-color: var(--primary-color); color: white; border: none; padding: 12px 30px; border-radius: 12px; cursor: pointer; font-weight: bold; }\n\n \/* ================= M\u00c1Y T\u00cdNH ================= *\/\n @media screen and (min-width: 769px) {\n .flashcard-wrapper .page-container { margin-right: 35px !important; max-width: calc(100% - 35px); margin-left: auto; gap: 30px; }\n .flashcard-wrapper .menu-container { flex: 0 0 340px; }\n .flashcard-wrapper .flip-card { flex: 1; max-width: 700px; margin: 0 auto; height: 380px; }\n .flashcard-wrapper .menu-button { display: none; }\n }\n\n \/* ================= MOBILE (C\u1ea2I TI\u1ebeN) ================= *\/\n @media (max-width: 768px) {\n .flashcard-wrapper .page-container { flex-direction: column; padding: 10px; }\n \n \/* FIX CHI\u1ec0U CAO TH\u1eba: S\u1eed d\u1ee5ng height k\u00e8m !important \u0111\u1ec3 th\u1eafng Flexbox *\/\n .flashcard-wrapper .flip-card { \n flex: none !important; \n height: 500px !important; \n width: 100% !important; \n margin-top: 15px; \n margin-bottom: 20px;\n }\n\n \/* \u1ea8n ti\u00eau \u0111\u1ec1 l\u1eb7p l\u1ea1i trong menu mobile *\/\n .flashcard-wrapper .menu-container .menu-header { display: none; }\n\n .flashcard-wrapper .menu-container {\n display: none; width: 90%; position: absolute; top: 60px; left: 15px; right: 15px;margin-bottom: 50px;\n z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n max-height: 80vh; margin: 0;\n }\n .flashcard-wrapper .menu-container.active { display: block; }\n \n .flashcard-wrapper .menu-button { \n display: block; width: 100%; background: var(--primary-color);\n color: white; border: none; padding: 12px; border-radius: 8px;\n }\n\n .flashcard-wrapper .buttons-container { gap: 15px; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div id=\"loginPopup\" class=\"auth-popup\" style=\"display:none;\">\n <div class=\"auth-content\">\n <h3>\u0110\u0102NG NH\u1eacP H\u1ec6 TH\u1ed0NG<\/h3>\n <input id=\"loginUserId\" style=\"width:100%; padding:12px; margin-bottom:15px; border:1px solid #ddd; border-radius:8px;\" placeholder=\"Email\" \/>\n <div style=\"position:relative; margin-bottom:15px;\">\n <input id=\"loginPassword\" type=\"password\" style=\"width:100%; padding:12px; border:1px solid #ddd; border-radius:8px;\" placeholder=\"M\u1eadt kh\u1ea9u\" \/>\n <span id=\"togglePwd\" onclick=\"togglePasswordDisplay()\" style=\"position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer;\">\ud83d\udc41\ufe0f<\/span>\n <\/div>\n <button id=\"loginButton\" onclick=\"loginUser()\" style=\"width:100%; padding:12px; background:var(--primary-color); color:white; border:none; border-radius:8px; cursor:pointer; font-weight:bold;\">\u0110\u0103ng nh\u1eadp<\/button>\n <\/div>\n<\/div>\n\n<div class=\"flashcard-wrapper\" id=\"ltt-app\" style=\"display:none;\">\n <div class=\"page-container\">\n <button class=\"menu-button\" onclick=\"toggleMenu()\">\u2630 Danh s\u00e1ch th\u1ebb<\/button>\n \n <div class=\"menu-container\" id=\"cardSelector\">\n <div class=\"menu-header\">Danh s\u00e1ch th\u1ebb<\/div>\n <div class=\"card-container\"><\/div>\n <\/div>\n\n <div class=\"flip-card\" id=\"flipCard\">\n <div class=\"flip-card-inner\">\n <div class=\"flip-card-front\">\n <div id=\"reading\" style=\"font-size: 0.8em; opacity: 0.9; margin-bottom: 10px;\">Hiragana<\/div>\n <div class=\"flip-card-content\" id=\"vocab\">T\u1eeb v\u1ef1ng<\/div>\n <div class=\"flip-card-id\" id=\"cardnumberFront\"><\/div>\n <button id=\"btnRandom\" class=\"random-button\" onclick=\"toggleRandomMode()\">\n <i class=\"fa fa-random\"><\/i>\n <\/button>\n <\/div>\n <div class=\"flip-card-back\">\n <div class=\"flip-card-content\">\n <div id=\"meaning\">Ngh\u0129a<\/div>\n <\/div>\n <div class=\"flip-card-id\" style=\"color:white;\" id=\"cardnumberBack\"><\/div>\n <i class=\"fa fa-volume-up play-audio-button\" onclick=\"playAudio(this)\" aria-hidden=\"true\"><\/i>\n <audio id=\"audioPlayer\"><\/audio>\n <\/div>\n <\/div>\n <button class=\"flip-button\" onclick=\"flipCard()\"><i class=\"fa fa-refresh\"><\/i><\/button>\n \n <div class=\"buttons-container\">\n <button class=\"button\" onclick=\"previousVocab()\">L\u00f9i l\u1ea1i<\/button>\n <button class=\"button\" onclick=\"nextVocab()\">Ti\u1ebfp theo<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"popup\" id=\"completionPopup\" style=\"display:none;\">\n <div class=\"popup-content\">\n <p>\ud83c\udf89 B\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh <span id=\"completedDeckNumber\"><\/span>!<\/p>\n <button onclick=\"restartDeck()\" style=\"padding:10px 20px; background:#f3f4f6; border:none; border-radius:8px; cursor:pointer;\">H\u1ecdc l\u1ea1i<\/button>\n <button onclick=\"nextDeck()\" style=\"padding:10px 20px; background:var(--primary-color); color:white; border:none; border-radius:8px; cursor:pointer;\">Ti\u1ebfp theo<\/button>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Link Google Script & Config\n \/* ================= C\u1ea4U H\u00ccNH ================= *\/\n const scriptUrl = 'https:\/\/script.google.com\/macros\/s\/AKfycbwCYHA5_xccW4P7KalKE7M8WLJyetxYVtxVbAeOIMsP6Cbm4Gbiz3PX38W4zBwZ1_hr\/exec';\n const TARGET_COURSE = 'nh\u00e0 h\u00e0ng gino1'; \n\n let vocabList = []; \n let activeVocabList = []; \n let decks = [];\n let currentCard = 0;\n let currentDeck = 0;\n let isRandom = false;\n let completedCards = JSON.parse(localStorage.getItem('nnGino1completedCards')) || {};\n\n document.addEventListener('DOMContentLoaded', () => {\n const tmy_userId = localStorage.getItem('tmy_userId');\n const tmy_userName = (localStorage.getItem('tmy_userName') || \"\").toLowerCase();\n const tmy_classIds = JSON.parse(localStorage.getItem('tmy_classIds') || \"[]\");\n\n if (!tmy_userId || !tmy_userName) {\n document.getElementById('loginPopup').style.display = 'flex';\n } else {\n const isAdmin = tmy_userName === \"admin\";\n const normalizedClassIds = tmy_classIds.map(c => c.toLowerCase());\n if (!isAdmin && !normalizedClassIds.includes(TARGET_COURSE)) {\n alert(\"B\u1ea1n kh\u00f4ng c\u00f3 quy\u1ec1n truy c\u1eadp\"); localStorage.clear(); location.reload();\n } else {\n document.getElementById('loginPopup').style.display = 'none';\n document.getElementById('ltt-app').style.display = 'flex';\n loadData();\n }\n }\n });\n\n function loginUser() {\n const uid = document.getElementById('loginUserId').value.trim();\n const pw = document.getElementById('loginPassword').value.trim();\n if (!uid || !pw) return alert(\"Nh\u1eadp email\/m\u1eadt kh\u1ea9u\");\n fetch(`${scriptUrl}?action=checkUserId&tmy_userId=${encodeURIComponent(uid)}&password=${encodeURIComponent(pw)}`)\n .then(res => res.json()).then(result => {\n if (!result.exists) { alert('Th\u00f4ng tin kh\u00f4ng ch\u00ednh x\u00e1c!'); return; }\n localStorage.setItem('tmy_userId', uid);\n localStorage.setItem('tmy_userName', result.tmy_userName || \"\");\n localStorage.setItem('tmy_classIds', JSON.stringify(result.tmy_classIds || []));\n location.reload();\n });\n }\n\n function loadData() {\n const ajaxUrl = \"\/wp-admin\/admin-ajax.php?action=get_cached_flashcard_nh1\";\n fetch(ajaxUrl).then(r => r.json()).then(data => {\n vocabList = data || [];\n if (vocabList.length > 0) {\n createDecks();\n displayDeckSelector();\n selectDeck(0);\n }\n });\n }\n\n function createDecks() {\n const grouped = {}; const order = [];\n vocabList.forEach(item => {\n const key = item.lesson || 'Kh\u00e1c';\n if (!grouped[key]) { grouped[key] = []; order.push(key); }\n grouped[key].push(item);\n });\n decks = order.map(lesson => ({ lesson, items: grouped[lesson] }));\n }\n\n function displayDeckSelector() {\n const container = document.querySelector('.card-container');\n container.innerHTML = '';\n decks.forEach((deck, index) => {\n const card = document.createElement('div');\n card.className = 'card' + (index === currentDeck ? ' selected' : '');\n if (completedCards[`lesson_${deck.lesson}`]) card.classList.add('completed');\n card.innerHTML = `<h3>${deck.lesson}<\/h3>`;\n card.onclick = () => selectDeck(index);\n container.appendChild(card);\n });\n }\n\n function selectDeck(index) {\n currentDeck = index;\n currentCard = 0;\n isRandom = false; \n document.getElementById('btnRandom').classList.remove('active');\n activeVocabList = [...decks[currentDeck].items]; \n displayVocab(0);\n document.querySelectorAll('.card').forEach((c, i) => {\n c.classList.remove('selected');\n if(i === index) c.classList.add('selected');\n });\n if (window.innerWidth <= 768) document.getElementById('cardSelector').classList.remove('active');\n }\n\n function displayVocab(index) {\n const item = activeVocabList[index];\n if (!item) return;\n document.getElementById('flipCard').classList.remove('flipped');\n document.getElementById('vocab').textContent = item.vocab;\n document.getElementById('reading').textContent = item.reading;\n document.getElementById('meaning').textContent = item.meaning;\n const info = `${index + 1} \/ ${activeVocabList.length}`;\n document.getElementById('cardnumberFront').textContent = info;\n document.getElementById('cardnumberBack').textContent = info;\n document.querySelector('.play-audio-button').setAttribute('data-vocab', item.vocab);\n }\n\n function toggleRandomMode() {\n isRandom = !isRandom;\n const btn = document.getElementById('btnRandom');\n if (isRandom) {\n btn.classList.add('active');\n activeVocabList = [...activeVocabList].sort(() => Math.random() - 0.5);\n } else {\n btn.classList.remove('active');\n activeVocabList = [...decks[currentDeck].items];\n }\n currentCard = 0;\n displayVocab(0);\n }\n\n function flipCard() { document.getElementById('flipCard').classList.toggle('flipped'); }\n\n function nextVocab() {\n if (currentCard < activeVocabList.length - 1) {\n currentCard++; displayVocab(currentCard);\n } else {\n const lessonName = decks[currentDeck].lesson;\n completedCards[`lesson_${lessonName}`] = true;\n localStorage.setItem('nnGino1completedCards', JSON.stringify(completedCards));\n displayDeckSelector();\n document.getElementById('completedDeckNumber').textContent = lessonName;\n document.getElementById('completionPopup').style.display = 'flex';\n }\n }\n\n function previousVocab() { if (currentCard > 0) { currentCard--; displayVocab(currentCard); } }\n function restartDeck() { document.getElementById('completionPopup').style.display = 'none'; currentCard = 0; displayVocab(0); }\n function nextDeck() {\n document.getElementById('completionPopup').style.display = 'none';\n if (currentDeck < decks.length - 1) selectDeck(currentDeck + 1);\n }\n function toggleMenu() { document.getElementById('cardSelector').classList.toggle('active'); }\n function playAudio(btn) {\n \/\/ Ng\u0103n ch\u1eb7n s\u1ef1 ki\u1ec7n l\u1eadt th\u1ebb khi nh\u1ea5n v\u00e0o loa\n if (event) event.stopPropagation();\n\n const textToSpeak = btn.getAttribute('data-vocab');\n if (!textToSpeak) return;\n\n \/\/ H\u1ee7y c\u00e1c y\u00eau c\u1ea7u ph\u00e1t \u00e2m thanh tr\u01b0\u1edbc \u0111\u00f3 \u0111\u1ec3 tr\u00e1nh b\u1ecb treo\n window.speechSynthesis.cancel();\n\n const msg = new SpeechSynthesisUtterance(textToSpeak);\n msg.lang = 'ja-JP';\n msg.rate = 0.8;\n msg.volume = 1.0;\n\n \/\/ M\u1ed9t s\u1ed1 thi\u1ebft b\u1ecb iOS y\u00eau c\u1ea7u kh\u1edfi t\u1ea1o l\u1ea1i voice\n const voices = window.speechSynthesis.getVoices();\n if (voices.length > 0) {\n msg.voice = voices.find(v => v.lang.indexOf('ja') > -1) || voices[0];\n }\n\n window.speechSynthesis.speak(msg);\n}\n function togglePasswordDisplay() {\n const p = document.getElementById('loginPassword'); p.type = p.type === 'password' ? 'text' : 'password';\n }\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Th\u1ebb t\u1eeb v\u1ef1ng cbtp tokutei gino2 \u0110\u0102NG NH\u1eacP H\u1ec6 TH\u1ed0NG \ud83d\udc41\ufe0f \u0110\u0103ng nh\u1eadp \u2630 Danh s\u00e1ch th\u1ebb Danh s\u00e1ch th\u1ebb Hiragana T\u1eeb v\u1ef1ng Ngh\u0129a L\u00f9i l\u1ea1i Ti\u1ebfp theo \ud83c\udf89 B\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh ! H\u1ecdc l\u1ea1i Ti\u1ebfp theo<\/p>","protected":false},"author":2,"featured_media":0,"parent":170,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1767","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/1767","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=1767"}],"version-history":[{"count":12,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/1767\/revisions"}],"predecessor-version":[{"id":8233,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/1767\/revisions\/8233"}],"up":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/170"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/media?parent=1767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1767,"date":"2024-05-10T15:13:43","date_gmt":"2024-05-10T08:13:43","guid":{"rendered":"https:\/\/tokuteigino.vn\/?page_id=1767"},"modified":"2026-02-27T02:07:51","modified_gmt":"2026-02-26T19:07:51","slug":"the-tu-vung-nha-hang-gino1","status":"publish","type":"page","link":"https:\/\/tokuteigino.vn\/ja\/tokuteigino-1\/nha-hang-gino-1\/the-tu-vung-nha-hang-gino1\/","title":{"rendered":"Th\u1ebb t\u1eeb v\u1ef1ng nh\u00e0 h\u00e0ng tokutei gino 1"},"content":{"rendered":"\n\n\n\n\n\n\n \n \n Th\u1ebb t\u1eeb v\u1ef1ng cbtp tokutei gino2<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\n <style>\n :root {\n --primary-color: #0f2819;\n --completed-bg: #7a9c59;\n }\n\n * { box-sizing: border-box; }\n\n .flashcard-wrapper {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #e9ecef;\n margin: 0; padding: 0;\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow-x: hidden;\n }\n\n .flashcard-wrapper .page-container {\n display: flex;\n flex: 1;\n margin: 0 auto;\n padding: 20px;\n position: relative;\n width: 100%;\n }\n\n \/* ================= SIDEBAR (B\u00caN TR\u00c1I) ================= *\/\n .flashcard-wrapper .menu-container {\n flex: 0 0 320px;\n max-height: calc(100vh - 40px);\n overflow-y: auto;\n padding: 15px;\n margin: 10px;\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n }\n\n .menu-header {\n font-size: 1.1em;\n font-weight: bold;\n color: var(--primary-color);\n margin-bottom: 15px;\n padding-bottom: 10px;\n border-bottom: 2px solid #eee;\n text-align: center;\n }\n\n .flashcard-wrapper .card-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); \n gap: 12px;\n width: 100%;\n }\n\n .flashcard-wrapper .card {\n background-color: #ffffff;\n border: 1px solid #dee2e6;\n border-radius: 10px;\n padding: 12px 5px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center; justify-content: center;\n min-height: 55px;\n }\n\n .flashcard-wrapper .card.selected { background-color: var(--primary-color) !important; color: white !important; }\n .flashcard-wrapper .card.completed { background-color: var(--completed-bg) !important; border-color: var(--completed-bg); }\n .flashcard-wrapper .card h3 { margin: 0; font-size: 0.9em; font-weight: 600; color: #333; }\n .flashcard-wrapper .card.selected h3, .flashcard-wrapper .card.completed h3 { color: white !important; }\n\n \/* ================= FLIP CARD (B\u00caN PH\u1ea2I) ================= *\/\n .flashcard-wrapper .flip-card {\n \/* FIX: Lo\u1ea1i b\u1ecf flex: 3 \u0111\u1ec3 height c\u00f3 t\u00e1c d\u1ee5ng *\/\n flex: none; \n width: 100%;\n height: 380px; \/* Chi\u1ec1u cao c\u1ed1 \u0111\u1ecbnh tr\u00ean PC *\/\n perspective: 1000px;\n margin-bottom: 20px;\n position: relative;\n }\n\n .flashcard-wrapper .flip-card-inner {\n position: relative;\n width: 100%; height: 100%;\n text-align: center;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n }\n\n .flashcard-wrapper .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }\n\n .flashcard-wrapper .flip-card-front, .flashcard-wrapper .flip-card-back {\n position: absolute; width: 100%; height: 100%; backface-visibility: hidden;\n display: flex; align-items: center; justify-content: center; flex-direction: column;\n border-radius: 15px; padding: 30px;\n box-shadow: 0 8px 20px rgba(0,0,0,0.1);\n }\n\n .flashcard-wrapper .flip-card-front { background-color: var(--primary-color); color: white; }\n .flashcard-wrapper .flip-card-back { background-color: #7a9c59; color: white; transform: rotateY(180deg); }\n\n .flashcard-wrapper .flip-card-content { font-size: 2.5em; margin-bottom: 10px; font-weight: bold; }\n .flashcard-wrapper .flip-card-id { position: absolute; top: 15px; left: 20px; font-size: 0.9em; opacity: 0.7; }\n\n .flashcard-wrapper .flip-button {\n position: absolute; right: 15px; bottom: 15px; background-color: #fff;\n border: none; border-radius: 50%; width: 44px; height: 44px;\n cursor: pointer; display: flex; align-items: center; justify-content: center;\n z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n }\n\n .flashcard-wrapper .play-audio-button { position: absolute; bottom: 15px; left: 20px; font-size: 1.8em; cursor: pointer; color: white; }\n\n .random-button {\n position: absolute; top: 15px; right: 15px; \n padding: 8px 12px; background: rgba(255,255,255,0.15);\n border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; cursor: pointer; color: white;\n }\n .random-button.active { background: white; color: var(--primary-color); }\n\n .flashcard-wrapper .buttons-container { display: flex; justify-content: center; gap: 40px; margin-top: 10px; }\n .flashcard-wrapper .button { background-color: var(--primary-color); color: white; border: none; padding: 12px 30px; border-radius: 12px; cursor: pointer; font-weight: bold; }\n\n \/* ================= M\u00c1Y T\u00cdNH ================= *\/\n @media screen and (min-width: 769px) {\n .flashcard-wrapper .page-container { margin-right: 35px !important; max-width: calc(100% - 35px); margin-left: auto; gap: 30px; }\n .flashcard-wrapper .menu-container { flex: 0 0 340px; }\n .flashcard-wrapper .flip-card { flex: 1; max-width: 700px; margin: 0 auto; height: 380px; }\n .flashcard-wrapper .menu-button { display: none; }\n }\n\n \/* ================= MOBILE (C\u1ea2I TI\u1ebeN) ================= *\/\n @media (max-width: 768px) {\n .flashcard-wrapper .page-container { flex-direction: column; padding: 10px; }\n \n \/* FIX CHI\u1ec0U CAO TH\u1eba: S\u1eed d\u1ee5ng height k\u00e8m !important \u0111\u1ec3 th\u1eafng Flexbox *\/\n .flashcard-wrapper .flip-card { \n flex: none !important; \n height: 500px !important; \n width: 100% !important; \n margin-top: 15px; \n margin-bottom: 20px;\n }\n\n \/* \u1ea8n ti\u00eau \u0111\u1ec1 l\u1eb7p l\u1ea1i trong menu mobile *\/\n .flashcard-wrapper .menu-container .menu-header { display: none; }\n\n .flashcard-wrapper .menu-container {\n display: none; width: 90%; position: absolute; top: 60px; left: 15px; right: 15px;margin-bottom: 50px;\n z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n max-height: 80vh; margin: 0;\n }\n .flashcard-wrapper .menu-container.active { display: block; }\n \n .flashcard-wrapper .menu-button { \n display: block; width: 100%; background: var(--primary-color);\n color: white; border: none; padding: 12px; border-radius: 8px;\n }\n\n .flashcard-wrapper .buttons-container { gap: 15px; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div id=\"loginPopup\" class=\"auth-popup\" style=\"display:none;\">\n <div class=\"auth-content\">\n <h3>\u0110\u0102NG NH\u1eacP H\u1ec6 TH\u1ed0NG<\/h3>\n <input id=\"loginUserId\" style=\"width:100%; padding:12px; margin-bottom:15px; border:1px solid #ddd; border-radius:8px;\" placeholder=\"Email\" \/>\n <div style=\"position:relative; margin-bottom:15px;\">\n <input id=\"loginPassword\" type=\"password\" style=\"width:100%; padding:12px; border:1px solid #ddd; border-radius:8px;\" placeholder=\"M\u1eadt kh\u1ea9u\" \/>\n <span id=\"togglePwd\" onclick=\"togglePasswordDisplay()\" style=\"position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer;\">\ud83d\udc41\ufe0f<\/span>\n <\/div>\n <button id=\"loginButton\" onclick=\"loginUser()\" style=\"width:100%; padding:12px; background:var(--primary-color); color:white; border:none; border-radius:8px; cursor:pointer; font-weight:bold;\">\u0110\u0103ng nh\u1eadp<\/button>\n <\/div>\n<\/div>\n\n<div class=\"flashcard-wrapper\" id=\"ltt-app\" style=\"display:none;\">\n <div class=\"page-container\">\n <button class=\"menu-button\" onclick=\"toggleMenu()\">\u2630 Danh s\u00e1ch th\u1ebb<\/button>\n \n <div class=\"menu-container\" id=\"cardSelector\">\n <div class=\"menu-header\">Danh s\u00e1ch th\u1ebb<\/div>\n <div class=\"card-container\"><\/div>\n <\/div>\n\n <div class=\"flip-card\" id=\"flipCard\">\n <div class=\"flip-card-inner\">\n <div class=\"flip-card-front\">\n <div id=\"reading\" style=\"font-size: 0.8em; opacity: 0.9; margin-bottom: 10px;\">Hiragana<\/div>\n <div class=\"flip-card-content\" id=\"vocab\">T\u1eeb v\u1ef1ng<\/div>\n <div class=\"flip-card-id\" id=\"cardnumberFront\"><\/div>\n <button id=\"btnRandom\" class=\"random-button\" onclick=\"toggleRandomMode()\">\n <i class=\"fa fa-random\"><\/i>\n <\/button>\n <\/div>\n <div class=\"flip-card-back\">\n <div class=\"flip-card-content\">\n <div id=\"meaning\">Ngh\u0129a<\/div>\n <\/div>\n <div class=\"flip-card-id\" style=\"color:white;\" id=\"cardnumberBack\"><\/div>\n <i class=\"fa fa-volume-up play-audio-button\" onclick=\"playAudio(this)\" aria-hidden=\"true\"><\/i>\n <audio id=\"audioPlayer\"><\/audio>\n <\/div>\n <\/div>\n <button class=\"flip-button\" onclick=\"flipCard()\"><i class=\"fa fa-refresh\"><\/i><\/button>\n \n <div class=\"buttons-container\">\n <button class=\"button\" onclick=\"previousVocab()\">L\u00f9i l\u1ea1i<\/button>\n <button class=\"button\" onclick=\"nextVocab()\">Ti\u1ebfp theo<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"popup\" id=\"completionPopup\" style=\"display:none;\">\n <div class=\"popup-content\">\n <p>\ud83c\udf89 B\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh <span id=\"completedDeckNumber\"><\/span>!<\/p>\n <button onclick=\"restartDeck()\" style=\"padding:10px 20px; background:#f3f4f6; border:none; border-radius:8px; cursor:pointer;\">H\u1ecdc l\u1ea1i<\/button>\n <button onclick=\"nextDeck()\" style=\"padding:10px 20px; background:var(--primary-color); color:white; border:none; border-radius:8px; cursor:pointer;\">Ti\u1ebfp theo<\/button>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Link Google Script & Config\n \/* ================= C\u1ea4U H\u00ccNH ================= *\/\n const scriptUrl = 'https:\/\/script.google.com\/macros\/s\/AKfycbwCYHA5_xccW4P7KalKE7M8WLJyetxYVtxVbAeOIMsP6Cbm4Gbiz3PX38W4zBwZ1_hr\/exec';\n const TARGET_COURSE = 'nh\u00e0 h\u00e0ng gino1'; \n\n let vocabList = []; \n let activeVocabList = []; \n let decks = [];\n let currentCard = 0;\n let currentDeck = 0;\n let isRandom = false;\n let completedCards = JSON.parse(localStorage.getItem('nnGino1completedCards')) || {};\n\n document.addEventListener('DOMContentLoaded', () => {\n const tmy_userId = localStorage.getItem('tmy_userId');\n const tmy_userName = (localStorage.getItem('tmy_userName') || \"\").toLowerCase();\n const tmy_classIds = JSON.parse(localStorage.getItem('tmy_classIds') || \"[]\");\n\n if (!tmy_userId || !tmy_userName) {\n document.getElementById('loginPopup').style.display = 'flex';\n } else {\n const isAdmin = tmy_userName === \"admin\";\n const normalizedClassIds = tmy_classIds.map(c => c.toLowerCase());\n if (!isAdmin && !normalizedClassIds.includes(TARGET_COURSE)) {\n alert(\"B\u1ea1n kh\u00f4ng c\u00f3 quy\u1ec1n truy c\u1eadp\"); localStorage.clear(); location.reload();\n } else {\n document.getElementById('loginPopup').style.display = 'none';\n document.getElementById('ltt-app').style.display = 'flex';\n loadData();\n }\n }\n });\n\n function loginUser() {\n const uid = document.getElementById('loginUserId').value.trim();\n const pw = document.getElementById('loginPassword').value.trim();\n if (!uid || !pw) return alert(\"Nh\u1eadp email\/m\u1eadt kh\u1ea9u\");\n fetch(`${scriptUrl}?action=checkUserId&tmy_userId=${encodeURIComponent(uid)}&password=${encodeURIComponent(pw)}`)\n .then(res => res.json()).then(result => {\n if (!result.exists) { alert('Th\u00f4ng tin kh\u00f4ng ch\u00ednh x\u00e1c!'); return; }\n localStorage.setItem('tmy_userId', uid);\n localStorage.setItem('tmy_userName', result.tmy_userName || \"\");\n localStorage.setItem('tmy_classIds', JSON.stringify(result.tmy_classIds || []));\n location.reload();\n });\n }\n\n function loadData() {\n const ajaxUrl = \"\/wp-admin\/admin-ajax.php?action=get_cached_flashcard_nh1\";\n fetch(ajaxUrl).then(r => r.json()).then(data => {\n vocabList = data || [];\n if (vocabList.length > 0) {\n createDecks();\n displayDeckSelector();\n selectDeck(0);\n }\n });\n }\n\n function createDecks() {\n const grouped = {}; const order = [];\n vocabList.forEach(item => {\n const key = item.lesson || 'Kh\u00e1c';\n if (!grouped[key]) { grouped[key] = []; order.push(key); }\n grouped[key].push(item);\n });\n decks = order.map(lesson => ({ lesson, items: grouped[lesson] }));\n }\n\n function displayDeckSelector() {\n const container = document.querySelector('.card-container');\n container.innerHTML = '';\n decks.forEach((deck, index) => {\n const card = document.createElement('div');\n card.className = 'card' + (index === currentDeck ? ' selected' : '');\n if (completedCards[`lesson_${deck.lesson}`]) card.classList.add('completed');\n card.innerHTML = `<h3>${deck.lesson}<\/h3>`;\n card.onclick = () => selectDeck(index);\n container.appendChild(card);\n });\n }\n\n function selectDeck(index) {\n currentDeck = index;\n currentCard = 0;\n isRandom = false; \n document.getElementById('btnRandom').classList.remove('active');\n activeVocabList = [...decks[currentDeck].items]; \n displayVocab(0);\n document.querySelectorAll('.card').forEach((c, i) => {\n c.classList.remove('selected');\n if(i === index) c.classList.add('selected');\n });\n if (window.innerWidth <= 768) document.getElementById('cardSelector').classList.remove('active');\n }\n\n function displayVocab(index) {\n const item = activeVocabList[index];\n if (!item) return;\n document.getElementById('flipCard').classList.remove('flipped');\n document.getElementById('vocab').textContent = item.vocab;\n document.getElementById('reading').textContent = item.reading;\n document.getElementById('meaning').textContent = item.meaning;\n const info = `${index + 1} \/ ${activeVocabList.length}`;\n document.getElementById('cardnumberFront').textContent = info;\n document.getElementById('cardnumberBack').textContent = info;\n document.querySelector('.play-audio-button').setAttribute('data-vocab', item.vocab);\n }\n\n function toggleRandomMode() {\n isRandom = !isRandom;\n const btn = document.getElementById('btnRandom');\n if (isRandom) {\n btn.classList.add('active');\n activeVocabList = [...activeVocabList].sort(() => Math.random() - 0.5);\n } else {\n btn.classList.remove('active');\n activeVocabList = [...decks[currentDeck].items];\n }\n currentCard = 0;\n displayVocab(0);\n }\n\n function flipCard() { document.getElementById('flipCard').classList.toggle('flipped'); }\n\n function nextVocab() {\n if (currentCard < activeVocabList.length - 1) {\n currentCard++; displayVocab(currentCard);\n } else {\n const lessonName = decks[currentDeck].lesson;\n completedCards[`lesson_${lessonName}`] = true;\n localStorage.setItem('nnGino1completedCards', JSON.stringify(completedCards));\n displayDeckSelector();\n document.getElementById('completedDeckNumber').textContent = lessonName;\n document.getElementById('completionPopup').style.display = 'flex';\n }\n }\n\n function previousVocab() { if (currentCard > 0) { currentCard--; displayVocab(currentCard); } }\n function restartDeck() { document.getElementById('completionPopup').style.display = 'none'; currentCard = 0; displayVocab(0); }\n function nextDeck() {\n document.getElementById('completionPopup').style.display = 'none';\n if (currentDeck < decks.length - 1) selectDeck(currentDeck + 1);\n }\n function toggleMenu() { document.getElementById('cardSelector').classList.toggle('active'); }\n function playAudio(btn) {\n \/\/ Ng\u0103n ch\u1eb7n s\u1ef1 ki\u1ec7n l\u1eadt th\u1ebb khi nh\u1ea5n v\u00e0o loa\n if (event) event.stopPropagation();\n\n const textToSpeak = btn.getAttribute('data-vocab');\n if (!textToSpeak) return;\n\n \/\/ H\u1ee7y c\u00e1c y\u00eau c\u1ea7u ph\u00e1t \u00e2m thanh tr\u01b0\u1edbc \u0111\u00f3 \u0111\u1ec3 tr\u00e1nh b\u1ecb treo\n window.speechSynthesis.cancel();\n\n const msg = new SpeechSynthesisUtterance(textToSpeak);\n msg.lang = 'ja-JP';\n msg.rate = 0.8;\n msg.volume = 1.0;\n\n \/\/ M\u1ed9t s\u1ed1 thi\u1ebft b\u1ecb iOS y\u00eau c\u1ea7u kh\u1edfi t\u1ea1o l\u1ea1i voice\n const voices = window.speechSynthesis.getVoices();\n if (voices.length > 0) {\n msg.voice = voices.find(v => v.lang.indexOf('ja') > -1) || voices[0];\n }\n\n window.speechSynthesis.speak(msg);\n}\n function togglePasswordDisplay() {\n const p = document.getElementById('loginPassword'); p.type = p.type === 'password' ? 'text' : 'password';\n }\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Th\u1ebb t\u1eeb v\u1ef1ng cbtp tokutei gino2 \u0110\u0102NG NH\u1eacP H\u1ec6 TH\u1ed0NG \ud83d\udc41\ufe0f \u0110\u0103ng nh\u1eadp \u2630 Danh s\u00e1ch th\u1ebb Danh s\u00e1ch th\u1ebb Hiragana T\u1eeb v\u1ef1ng Ngh\u0129a L\u00f9i l\u1ea1i Ti\u1ebfp theo \ud83c\udf89 B\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh ! H\u1ecdc l\u1ea1i Ti\u1ebfp theo<\/p>","protected":false},"author":2,"featured_media":0,"parent":170,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1767","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/1767","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=1767"}],"version-history":[{"count":12,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/1767\/revisions"}],"predecessor-version":[{"id":8233,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/1767\/revisions\/8233"}],"up":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/170"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/media?parent=1767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}