Th\u1ebb t\u1eeb v\u1ef1ng n\u00f4ng nghi\u1ec7p 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 ================= *\/\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 ================= *\/\n .flashcard-wrapper .flip-card {\n flex: none;\n width: 100%;\n height: 380px;\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 \/* ================= POPUP HO\u00c0N TH\u00c0NH ================= *\/\n .popup {\n display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(0,0,0,0.5); z-index: 2000;\n align-items: center; justify-content: center;\n }\n .popup-content {\n background: white; padding: 30px 25px; border-radius: 16px;\n text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.25);\n font-size: 1.1em; color: var(--primary-color);\n }\n .popup-content p { margin-bottom: 20px; }\n .popup-content button {\n margin: 5px 8px; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;\n }\n\n \/* ================= AUTH POPUP ================= *\/\n .auth-popup {\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(0,0,0,0.7); display: flex;\n justify-content: center; align-items: center; z-index: 9999;\n }\n .auth-content {\n background: white; padding: 30px; border-radius: 12px;\n width: 90%; max-width: 400px; box-shadow: 0 8px 30px rgba(0,0,0,0.3);\n }\n .auth-content h3 { color: var(--primary-color); text-align: center; margin-bottom: 20px; font-size: 1.2em; }\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 ================= *\/\n @media (max-width: 768px) {\n .flashcard-wrapper .page-container { flex-direction: column; padding: 10px; }\n\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 .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;\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 font-size: 1em; cursor: pointer;\n }\n\n .flashcard-wrapper .buttons-container { gap: 15px; }\n }\n <\/style>\n<\/head>\n<body>\n\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; font-size:15px;\" 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; font-size:15px;\" placeholder=\"M\u1eadt kh\u1ea9u\" \/>\n <span id=\"togglePwd\" onclick=\"togglePasswordDisplay()\" style=\"position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:18px;\">\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; font-size:15px; cursor:pointer; font-weight:bold;\">\u0110\u0103ng nh\u1eadp<\/button>\n <\/div>\n<\/div>\n\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 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=\"reading\" style=\"font-size: 0.8em; opacity: 0.9; margin-bottom: 10px;\"><\/div>\n <div id=\"meaning\"><\/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\n<div class=\"popup\" id=\"completionPopup\">\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=\"background:#f3f4f6; color:#333;\">H\u1ecdc l\u1ea1i<\/button>\n <button onclick=\"nextDeck()\" style=\"background:var(--primary-color); color:white;\">Ti\u1ebfp theo<\/button>\n <\/div>\n<\/div>\n\n<script>\n\/* ================= C\u1ea4U H\u00ccNH ================= *\/\nconst scriptUrl = 'https:\/\/script.google.com\/macros\/s\/AKfycby2qkFBt1PQmUCUPmt-vlsAud-oHzEdRjUx6I4ZRYjBDk_gmbMrsoQJT85CIPI-3ZGY\/exec';\nconst TARGET_COURSE = 'n\u00f4ng nghi\u1ec7p gino2';\n\nlet vocabList = [];\nlet activeVocabList = [];\nlet decks = [];\nlet currentCard = 0;\nlet currentDeck = 0;\nlet isRandom = false;\nlet completedCards = JSON.parse(localStorage.getItem('nnGino2completedCards')) || {};\n\n\/* ================= AUTH ================= *\/\ndocument.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 return;\n }\n\n const isAdmin = tmy_userName === 'admin';\n const normalizedClassIds = tmy_classIds.map(c => c.toLowerCase());\n\n if (!isAdmin && !normalizedClassIds.includes(TARGET_COURSE)) {\n alert('B\u1ea1n kh\u00f4ng c\u00f3 quy\u1ec1n truy c\u1eadp h\u1ecdc ph\u1ea7n n\u00e0y');\n localStorage.clear();\n location.reload();\n return;\n }\n\n document.getElementById('loginPopup').style.display = 'none';\n document.getElementById('ltt-app').style.display = 'flex';\n loadData();\n});\n\nfunction loginUser() {\n const uid = document.getElementById('loginUserId').value.trim();\n const pw = document.getElementById('loginPassword').value.trim();\n const btn = document.getElementById('loginButton');\n\n if (!uid || !pw) { alert('Vui l\u00f2ng nh\u1eadp email v\u00e0 m\u1eadt kh\u1ea9u!'); return; }\n\n btn.disabled = true; btn.textContent = '\u0110ang ki\u1ec3m tra...';\n const newDeviceId = Math.random().toString(36).substr(2, 9);\n localStorage.setItem('deviceId', newDeviceId);\n\n fetch(`${scriptUrl}?action=checkUserId&tmy_userId=${encodeURIComponent(uid)}&password=${encodeURIComponent(pw)}&deviceId=${encodeURIComponent(newDeviceId)}`)\n .then(r => r.json())\n .then(result => {\n if (!result.exists) { alert('Sai t\u00e0i kho\u1ea3n ho\u1eb7c m\u1eadt kh\u1ea9u!'); 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 .catch(err => alert('L\u1ed7i k\u1ebft n\u1ed1i: ' + err.message))\n .finally(() => { btn.disabled = false; btn.textContent = '\u0110\u0103ng nh\u1eadp'; });\n}\n\nfunction togglePasswordDisplay() {\n const p = document.getElementById('loginPassword');\n p.type = p.type === 'password' ? 'text' : 'password';\n}\n\n\/* ================= D\u1eee LI\u1ec6U ================= *\/\nfunction loadData() {\n fetch(`${scriptUrl}?action=getVocabList`)\n .then(r => r.json())\n .then(data => {\n vocabList = data || [];\n if (vocabList.length > 0) {\n createDecks();\n displayDeckSelector();\n selectDeck(0);\n }\n })\n .catch(err => console.error('L\u1ed7i t\u1ea3i d\u1eef li\u1ec7u:', err));\n}\n\nfunction 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\nfunction 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\nfunction 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\/* ================= HI\u1ec2N TH\u1eca TH\u1eba ================= *\/\nfunction 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\nfunction flipCard() { document.getElementById('flipCard').classList.toggle('flipped'); }\n\nfunction 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('nnGino2completedCards', JSON.stringify(completedCards));\n displayDeckSelector();\n document.getElementById('completedDeckNumber').textContent = lessonName;\n document.getElementById('completionPopup').style.display = 'flex';\n }\n}\n\nfunction previousVocab() { if (currentCard > 0) { currentCard--; displayVocab(currentCard); } }\n\nfunction 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\nfunction playAudio(btn) {\n if (event) event.stopPropagation();\n const text = btn.getAttribute('data-vocab');\n if (!text) return;\n window.speechSynthesis.cancel();\n const msg = new SpeechSynthesisUtterance(text);\n msg.lang = 'ja-JP';\n msg.rate = 0.8;\n msg.volume = 1.0;\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 window.speechSynthesis.speak(msg);\n}\n\nfunction toggleMenu() { document.getElementById('cardSelector').classList.toggle('active'); }\n\nfunction restartDeck() {\n document.getElementById('completionPopup').style.display = 'none';\n currentCard = 0; displayVocab(0);\n}\n\nfunction nextDeck() {\n document.getElementById('completionPopup').style.display = 'none';\n if (currentDeck < decks.length - 1) selectDeck(currentDeck + 1);\n}\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Th\u1ebb t\u1eeb v\u1ef1ng n\u00f4ng nghi\u1ec7p 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 T\u1eeb v\u1ef1ng 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>\n","protected":false},"author":2,"featured_media":0,"parent":197,"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-4188","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/4188","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=4188"}],"version-history":[{"count":29,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/4188\/revisions"}],"predecessor-version":[{"id":8399,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/4188\/revisions\/8399"}],"up":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/197"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/media?parent=4188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4188,"date":"2024-11-26T10:00:35","date_gmt":"2024-11-26T03:00:35","guid":{"rendered":"https:\/\/tokuteigino.vn\/?page_id=4188"},"modified":"2026-05-03T11:09:14","modified_gmt":"2026-05-03T04:09:14","slug":"the-tu-vung-nong-nghiep-gino2","status":"publish","type":"page","link":"https:\/\/tokuteigino.vn\/vi\/tokuteigino-2\/nong-nghiep-gino-2\/the-tu-vung-nong-nghiep-gino2\/","title":{"rendered":"Th\u1ebb t\u1eeb v\u1ef1ng n\u00f4ng nghi\u1ec7p gino2"},"content":{"rendered":"\n\n\n\n \n \n Th\u1ebb t\u1eeb v\u1ef1ng n\u00f4ng nghi\u1ec7p 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 ================= *\/\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 ================= *\/\n .flashcard-wrapper .flip-card {\n flex: none;\n width: 100%;\n height: 380px;\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 \/* ================= POPUP HO\u00c0N TH\u00c0NH ================= *\/\n .popup {\n display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(0,0,0,0.5); z-index: 2000;\n align-items: center; justify-content: center;\n }\n .popup-content {\n background: white; padding: 30px 25px; border-radius: 16px;\n text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.25);\n font-size: 1.1em; color: var(--primary-color);\n }\n .popup-content p { margin-bottom: 20px; }\n .popup-content button {\n margin: 5px 8px; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;\n }\n\n \/* ================= AUTH POPUP ================= *\/\n .auth-popup {\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n background: rgba(0,0,0,0.7); display: flex;\n justify-content: center; align-items: center; z-index: 9999;\n }\n .auth-content {\n background: white; padding: 30px; border-radius: 12px;\n width: 90%; max-width: 400px; box-shadow: 0 8px 30px rgba(0,0,0,0.3);\n }\n .auth-content h3 { color: var(--primary-color); text-align: center; margin-bottom: 20px; font-size: 1.2em; }\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 ================= *\/\n @media (max-width: 768px) {\n .flashcard-wrapper .page-container { flex-direction: column; padding: 10px; }\n\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 .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;\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 font-size: 1em; cursor: pointer;\n }\n\n .flashcard-wrapper .buttons-container { gap: 15px; }\n }\n <\/style>\n<\/head>\n<body>\n\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; font-size:15px;\" 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; font-size:15px;\" placeholder=\"M\u1eadt kh\u1ea9u\" \/>\n <span id=\"togglePwd\" onclick=\"togglePasswordDisplay()\" style=\"position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:18px;\">\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; font-size:15px; cursor:pointer; font-weight:bold;\">\u0110\u0103ng nh\u1eadp<\/button>\n <\/div>\n<\/div>\n\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 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=\"reading\" style=\"font-size: 0.8em; opacity: 0.9; margin-bottom: 10px;\"><\/div>\n <div id=\"meaning\"><\/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\n<div class=\"popup\" id=\"completionPopup\">\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=\"background:#f3f4f6; color:#333;\">H\u1ecdc l\u1ea1i<\/button>\n <button onclick=\"nextDeck()\" style=\"background:var(--primary-color); color:white;\">Ti\u1ebfp theo<\/button>\n <\/div>\n<\/div>\n\n<script>\n\/* ================= C\u1ea4U H\u00ccNH ================= *\/\nconst scriptUrl = 'https:\/\/script.google.com\/macros\/s\/AKfycby2qkFBt1PQmUCUPmt-vlsAud-oHzEdRjUx6I4ZRYjBDk_gmbMrsoQJT85CIPI-3ZGY\/exec';\nconst TARGET_COURSE = 'n\u00f4ng nghi\u1ec7p gino2';\n\nlet vocabList = [];\nlet activeVocabList = [];\nlet decks = [];\nlet currentCard = 0;\nlet currentDeck = 0;\nlet isRandom = false;\nlet completedCards = JSON.parse(localStorage.getItem('nnGino2completedCards')) || {};\n\n\/* ================= AUTH ================= *\/\ndocument.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 return;\n }\n\n const isAdmin = tmy_userName === 'admin';\n const normalizedClassIds = tmy_classIds.map(c => c.toLowerCase());\n\n if (!isAdmin && !normalizedClassIds.includes(TARGET_COURSE)) {\n alert('B\u1ea1n kh\u00f4ng c\u00f3 quy\u1ec1n truy c\u1eadp h\u1ecdc ph\u1ea7n n\u00e0y');\n localStorage.clear();\n location.reload();\n return;\n }\n\n document.getElementById('loginPopup').style.display = 'none';\n document.getElementById('ltt-app').style.display = 'flex';\n loadData();\n});\n\nfunction loginUser() {\n const uid = document.getElementById('loginUserId').value.trim();\n const pw = document.getElementById('loginPassword').value.trim();\n const btn = document.getElementById('loginButton');\n\n if (!uid || !pw) { alert('Vui l\u00f2ng nh\u1eadp email v\u00e0 m\u1eadt kh\u1ea9u!'); return; }\n\n btn.disabled = true; btn.textContent = '\u0110ang ki\u1ec3m tra...';\n const newDeviceId = Math.random().toString(36).substr(2, 9);\n localStorage.setItem('deviceId', newDeviceId);\n\n fetch(`${scriptUrl}?action=checkUserId&tmy_userId=${encodeURIComponent(uid)}&password=${encodeURIComponent(pw)}&deviceId=${encodeURIComponent(newDeviceId)}`)\n .then(r => r.json())\n .then(result => {\n if (!result.exists) { alert('Sai t\u00e0i kho\u1ea3n ho\u1eb7c m\u1eadt kh\u1ea9u!'); 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 .catch(err => alert('L\u1ed7i k\u1ebft n\u1ed1i: ' + err.message))\n .finally(() => { btn.disabled = false; btn.textContent = '\u0110\u0103ng nh\u1eadp'; });\n}\n\nfunction togglePasswordDisplay() {\n const p = document.getElementById('loginPassword');\n p.type = p.type === 'password' ? 'text' : 'password';\n}\n\n\/* ================= D\u1eee LI\u1ec6U ================= *\/\nfunction loadData() {\n fetch(`${scriptUrl}?action=getVocabList`)\n .then(r => r.json())\n .then(data => {\n vocabList = data || [];\n if (vocabList.length > 0) {\n createDecks();\n displayDeckSelector();\n selectDeck(0);\n }\n })\n .catch(err => console.error('L\u1ed7i t\u1ea3i d\u1eef li\u1ec7u:', err));\n}\n\nfunction 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\nfunction 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\nfunction 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\/* ================= HI\u1ec2N TH\u1eca TH\u1eba ================= *\/\nfunction 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\nfunction flipCard() { document.getElementById('flipCard').classList.toggle('flipped'); }\n\nfunction 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('nnGino2completedCards', JSON.stringify(completedCards));\n displayDeckSelector();\n document.getElementById('completedDeckNumber').textContent = lessonName;\n document.getElementById('completionPopup').style.display = 'flex';\n }\n}\n\nfunction previousVocab() { if (currentCard > 0) { currentCard--; displayVocab(currentCard); } }\n\nfunction 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\nfunction playAudio(btn) {\n if (event) event.stopPropagation();\n const text = btn.getAttribute('data-vocab');\n if (!text) return;\n window.speechSynthesis.cancel();\n const msg = new SpeechSynthesisUtterance(text);\n msg.lang = 'ja-JP';\n msg.rate = 0.8;\n msg.volume = 1.0;\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 window.speechSynthesis.speak(msg);\n}\n\nfunction toggleMenu() { document.getElementById('cardSelector').classList.toggle('active'); }\n\nfunction restartDeck() {\n document.getElementById('completionPopup').style.display = 'none';\n currentCard = 0; displayVocab(0);\n}\n\nfunction nextDeck() {\n document.getElementById('completionPopup').style.display = 'none';\n if (currentDeck < decks.length - 1) selectDeck(currentDeck + 1);\n}\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Th\u1ebb t\u1eeb v\u1ef1ng n\u00f4ng nghi\u1ec7p 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 T\u1eeb v\u1ef1ng 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>\n","protected":false},"author":2,"featured_media":0,"parent":197,"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-4188","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/4188","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=4188"}],"version-history":[{"count":29,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/4188\/revisions"}],"predecessor-version":[{"id":8399,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/4188\/revisions\/8399"}],"up":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/197"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/media?parent=4188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}