Th\u1ebb t\u1eeb v\u1ef1ng Nh\u00e0 h\u00e0ng Gino2 \u2013 H\u1ecdc th\u1eed<\/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,\n .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: 400px;\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,\n .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 #reading-front {\n font-size: 1em; opacity: 0.65; margin-bottom: 8px;\n letter-spacing: 0.05em;\n }\n\n .flashcard-wrapper .back-reading {\n font-size: 1em; opacity: 0.85; margin-bottom: 6px;\n }\n .flashcard-wrapper .back-meaning {\n font-size: 1.8em; font-weight: bold; margin-bottom: 10px;\n }\n .flashcard-wrapper .back-example {\n font-size: 0.8em; opacity: 0.8; line-height: 1.55;\n max-width: 90%; text-align: center;\n }\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 {\n position: absolute; bottom: 15px; left: 20px;\n font-size: 1.8em; cursor: pointer; color: white;\n }\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;\n 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 {\n background-color: var(--primary-color); color: white;\n border: none; padding: 12px 30px; border-radius: 12px;\n cursor: pointer; font-weight: bold;\n }\n\n \/* ================= LOADING ================= *\/\n .loading-msg {\n position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);\n color: #888; font-size: 1em;\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,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,0.3);\n animation: popupIn 0.25s ease;\n }\n\n @keyframes popupIn {\n from { transform: scale(0.85); opacity: 0; }\n to { transform: scale(1); opacity: 1; }\n }\n\n .lock-popup-box .lock-icon { font-size: 3em; margin-bottom: 12px; }\n .lock-popup-box h3 { margin: 0 0 10px; color: var(--primary-color); font-size: 1.2em; }\n .lock-popup-box p { margin: 0 0 25px; color: #555; font-size: 0.95em; line-height: 1.6; }\n\n .lock-popup-box .popup-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n\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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1;\n text-align: center;\n white-space: nowrap;\n cursor: pointer;\n transition: background 0.2s;\n text-decoration: none;\n }\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 \/* ================= DESKTOP ================= *\/\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: 400px; }\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 .flashcard-wrapper .flip-card {\n flex: none !important;\n height: 480px !important;\n width: 100% !important;\n margin-top: 15px;\n margin-bottom: 20px;\n }\n .flashcard-wrapper .menu-container .menu-header { display: none; }\n .flashcard-wrapper .menu-container {\n display: none; width: 90%; position: absolute; top: 60px;\n 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 .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 .flashcard-wrapper .buttons-container { gap: 15px; }\n }\n <\/style>\n<\/head>\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 t\u1eeb v\u1ef1ng Nh\u00e0 h\u00e0ng Gino2!<\/p>\n <div class=\"popup-buttons\">\n <a href=\"https:\/\/m.me\/100280956308183\" class=\"btn-contact\" 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 class=\"flashcard-wrapper\">\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\">\n <div class=\"loading-msg\">\u0110ang t\u1ea3i…<\/div>\n <\/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-front\"><\/div>\n <div class=\"flip-card-content\" id=\"vocab\">\u0110ang t\u1ea3i…<\/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 <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 class=\"flip-card-back\">\n <div class=\"flip-card-content\">\n <div class=\"back-reading\" id=\"reading\"><\/div>\n <div class=\"back-meaning\" id=\"meaning\"><\/div>\n <div class=\"back-example\" id=\"exBlock\"><\/div>\n <\/div>\n <div class=\"flip-card-id\" style=\"color:white;\" id=\"cardnumberBack\"><\/div>\n <\/div>\n <\/div>\n <button class=\"flip-button\" onclick=\"flipCard()\"><i class=\"fa fa-refresh\"><\/i><\/button>\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<script>\n var vocabList = [];\n var decks = [];\n var activeVocabList = [];\n var currentCard = 0;\n var currentDeck = 0;\n var isRandom = false;\n\n function loadData() {\n var url = 'https:\/\/script.google.com\/macros\/s\/AKfycbwRlUBePlZPT_sGZ2K9u51u18wDz2b1EdoQYXgaA3Zt0-gP9EE48XNy6lFvAogko6U7\/exec?action=getVocabList';\n fetch(url)\n .then(response => response.json())\n .then(data => {\n vocabList = data;\n if (vocabList.length > 0) {\n createDecks();\n displayDeckSelector();\n selectDeck(0);\n } else {\n alert('Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u');\n }\n })\n .catch(error => console.error('Error:', error));\n }\n\n function createDecks() {\n const chunkSize = 50;\n decks = [];\n for (let i = 0; i < vocabList.length; i += chunkSize) {\n const chunk = vocabList.slice(i, i + chunkSize);\n decks.push({ lesson: 'Th\u1ebb ' + (decks.length + 1), items: chunk });\n }\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 card.innerHTML = `<h3>${deck.lesson}<\/h3>`;\n card.onclick = () => selectDeck(index);\n container.appendChild(card);\n });\n }\n\n function selectDeck(index) {\n if (index > 0) { showLockPopup(); return; }\n\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\n document.querySelectorAll('.card').forEach((c, i) => {\n c.classList.toggle('selected', i === index);\n });\n if (window.innerWidth <= 768) {\n document.getElementById('cardSelector').classList.remove('active');\n }\n }\n\n function displayVocab(index) {\n const item = activeVocabList[index];\n if (!item) return;\n\n document.getElementById('flipCard').classList.remove('flipped');\n document.getElementById('vocab').textContent = item.vocab || '';\n document.getElementById('reading-front').textContent = item.reading || '';\n document.getElementById('reading').textContent = item.reading || '';\n document.getElementById('meaning').textContent = item.meaning || '';\n\n const exBlock = document.getElementById('exBlock');\n if (item.pronounce) {\n exBlock.innerHTML = `<div>${item.pronounce}<\/div>${item.exmeaning ? '<div style=\"opacity:0.75;margin-top:3px\">' + item.exmeaning + '<\/div>' : ''}`;\n } else {\n exBlock.innerHTML = '';\n }\n\n const total = activeVocabList.length;\n const info = `${index + 1} \/ ${total}`;\n document.getElementById('cardnumberFront').textContent = info;\n document.getElementById('cardnumberBack').textContent = info;\n\n const audioEl = document.getElementById('audioPlayer');\n if (item.audioUrl) audioEl.src = item.audioUrl;\n document.querySelector('.play-audio-button').setAttribute('data-vocab', item.reading || item.vocab || '');\n }\n\n function nextVocab() {\n if (isRandom) {\n currentCard = Math.floor(Math.random() * activeVocabList.length);\n displayVocab(currentCard);\n } else if (currentCard < activeVocabList.length - 1) {\n currentCard++;\n displayVocab(currentCard);\n } else {\n showLockPopup();\n }\n }\n\n function previousVocab() {\n if (isRandom) {\n currentCard = Math.floor(Math.random() * activeVocabList.length);\n displayVocab(currentCard);\n } else if (currentCard > 0) {\n currentCard--;\n displayVocab(currentCard);\n }\n }\n\n function flipCard() {\n document.getElementById('flipCard').classList.toggle('flipped');\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 toggleMenu() {\n document.getElementById('cardSelector').classList.toggle('active');\n }\n\n function showLockPopup() {\n document.getElementById('lockPopup').classList.add('active');\n }\n\n function closeLockPopup() {\n document.getElementById('lockPopup').classList.remove('active');\n }\n\n document.getElementById('lockPopup').addEventListener('click', function(e) {\n if (e.target === this) closeLockPopup();\n });\n\n function playAudio(btn) {\n if (event) event.stopPropagation();\n const audioEl = document.getElementById('audioPlayer');\n if (audioEl.src && !audioEl.src.endsWith('\/')) {\n audioEl.play();\n return;\n }\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'; msg.rate = 0.8; msg.volume = 1.0;\n const voices = window.speechSynthesis.getVoices();\n if (voices.length > 0) msg.voice = voices.find(v => v.lang.indexOf('ja') > -1) || voices[0];\n window.speechSynthesis.speak(msg);\n }\n\n window.addEventListener('load', function() {\n if (speechSynthesis.onvoiceschanged !== undefined) {\n speechSynthesis.onvoiceschanged = function() { speechSynthesis.getVoices(); };\n }\n loadData();\n });\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Th\u1ebb t\u1eeb v\u1ef1ng Nh\u00e0 h\u00e0ng Gino2 \u2013 H\u1ecdc th\u1eed \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 t\u1eeb v\u1ef1ng Nh\u00e0 h\u00e0ng Gino2! Li\u00ean h\u1ec7 \u0110\u00f3ng \u2630 Danh s\u00e1ch th\u1ebb Danh s\u00e1ch th\u1ebb \u0110ang t\u1ea3i… \u0110ang t\u1ea3i… L\u00f9i l\u1ea1i […]\n","protected":false},"author":2,"featured_media":0,"parent":3641,"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-3836","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3836","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=3836"}],"version-history":[{"count":3,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3836\/revisions"}],"predecessor-version":[{"id":8436,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3836\/revisions\/8436"}],"up":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3641"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/media?parent=3836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3836,"date":"2024-09-30T11:29:04","date_gmt":"2024-09-30T04:29:04","guid":{"rendered":"https:\/\/tokuteigino.vn\/?page_id=3836"},"modified":"2026-05-20T12:25:28","modified_gmt":"2026-05-20T05:25:28","slug":"hoc-thu-nha-hang-gino2-the-tu-vung","status":"publish","type":"page","link":"https:\/\/tokuteigino.vn\/vi\/hoc-thu\/hoc-thu-nha-hang-gino-2\/hoc-thu-nha-hang-gino2-the-tu-vung\/","title":{"rendered":"H\u1ecdc th\u1eed nh\u00e0 h\u00e0ng gino2 – th\u1ebb t\u1eeb v\u1ef1ng"},"content":{"rendered":"\n\n\n\n \n \n Th\u1ebb t\u1eeb v\u1ef1ng Nh\u00e0 h\u00e0ng Gino2 \u2013 H\u1ecdc th\u1eed<\/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,\n .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: 400px;\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,\n .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 #reading-front {\n font-size: 1em; opacity: 0.65; margin-bottom: 8px;\n letter-spacing: 0.05em;\n }\n\n .flashcard-wrapper .back-reading {\n font-size: 1em; opacity: 0.85; margin-bottom: 6px;\n }\n .flashcard-wrapper .back-meaning {\n font-size: 1.8em; font-weight: bold; margin-bottom: 10px;\n }\n .flashcard-wrapper .back-example {\n font-size: 0.8em; opacity: 0.8; line-height: 1.55;\n max-width: 90%; text-align: center;\n }\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 {\n position: absolute; bottom: 15px; left: 20px;\n font-size: 1.8em; cursor: pointer; color: white;\n }\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;\n 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 {\n background-color: var(--primary-color); color: white;\n border: none; padding: 12px 30px; border-radius: 12px;\n cursor: pointer; font-weight: bold;\n }\n\n \/* ================= LOADING ================= *\/\n .loading-msg {\n position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);\n color: #888; font-size: 1em;\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,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,0.3);\n animation: popupIn 0.25s ease;\n }\n\n @keyframes popupIn {\n from { transform: scale(0.85); opacity: 0; }\n to { transform: scale(1); opacity: 1; }\n }\n\n .lock-popup-box .lock-icon { font-size: 3em; margin-bottom: 12px; }\n .lock-popup-box h3 { margin: 0 0 10px; color: var(--primary-color); font-size: 1.2em; }\n .lock-popup-box p { margin: 0 0 25px; color: #555; font-size: 0.95em; line-height: 1.6; }\n\n .lock-popup-box .popup-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n\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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1;\n text-align: center;\n white-space: nowrap;\n cursor: pointer;\n transition: background 0.2s;\n text-decoration: none;\n }\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 \/* ================= DESKTOP ================= *\/\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: 400px; }\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 .flashcard-wrapper .flip-card {\n flex: none !important;\n height: 480px !important;\n width: 100% !important;\n margin-top: 15px;\n margin-bottom: 20px;\n }\n .flashcard-wrapper .menu-container .menu-header { display: none; }\n .flashcard-wrapper .menu-container {\n display: none; width: 90%; position: absolute; top: 60px;\n 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 .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 .flashcard-wrapper .buttons-container { gap: 15px; }\n }\n <\/style>\n<\/head>\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 t\u1eeb v\u1ef1ng Nh\u00e0 h\u00e0ng Gino2!<\/p>\n <div class=\"popup-buttons\">\n <a href=\"https:\/\/m.me\/100280956308183\" class=\"btn-contact\" 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 class=\"flashcard-wrapper\">\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\">\n <div class=\"loading-msg\">\u0110ang t\u1ea3i…<\/div>\n <\/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-front\"><\/div>\n <div class=\"flip-card-content\" id=\"vocab\">\u0110ang t\u1ea3i…<\/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 <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 class=\"flip-card-back\">\n <div class=\"flip-card-content\">\n <div class=\"back-reading\" id=\"reading\"><\/div>\n <div class=\"back-meaning\" id=\"meaning\"><\/div>\n <div class=\"back-example\" id=\"exBlock\"><\/div>\n <\/div>\n <div class=\"flip-card-id\" style=\"color:white;\" id=\"cardnumberBack\"><\/div>\n <\/div>\n <\/div>\n <button class=\"flip-button\" onclick=\"flipCard()\"><i class=\"fa fa-refresh\"><\/i><\/button>\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<script>\n var vocabList = [];\n var decks = [];\n var activeVocabList = [];\n var currentCard = 0;\n var currentDeck = 0;\n var isRandom = false;\n\n function loadData() {\n var url = 'https:\/\/script.google.com\/macros\/s\/AKfycbwRlUBePlZPT_sGZ2K9u51u18wDz2b1EdoQYXgaA3Zt0-gP9EE48XNy6lFvAogko6U7\/exec?action=getVocabList';\n fetch(url)\n .then(response => response.json())\n .then(data => {\n vocabList = data;\n if (vocabList.length > 0) {\n createDecks();\n displayDeckSelector();\n selectDeck(0);\n } else {\n alert('Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u');\n }\n })\n .catch(error => console.error('Error:', error));\n }\n\n function createDecks() {\n const chunkSize = 50;\n decks = [];\n for (let i = 0; i < vocabList.length; i += chunkSize) {\n const chunk = vocabList.slice(i, i + chunkSize);\n decks.push({ lesson: 'Th\u1ebb ' + (decks.length + 1), items: chunk });\n }\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 card.innerHTML = `<h3>${deck.lesson}<\/h3>`;\n card.onclick = () => selectDeck(index);\n container.appendChild(card);\n });\n }\n\n function selectDeck(index) {\n if (index > 0) { showLockPopup(); return; }\n\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\n document.querySelectorAll('.card').forEach((c, i) => {\n c.classList.toggle('selected', i === index);\n });\n if (window.innerWidth <= 768) {\n document.getElementById('cardSelector').classList.remove('active');\n }\n }\n\n function displayVocab(index) {\n const item = activeVocabList[index];\n if (!item) return;\n\n document.getElementById('flipCard').classList.remove('flipped');\n document.getElementById('vocab').textContent = item.vocab || '';\n document.getElementById('reading-front').textContent = item.reading || '';\n document.getElementById('reading').textContent = item.reading || '';\n document.getElementById('meaning').textContent = item.meaning || '';\n\n const exBlock = document.getElementById('exBlock');\n if (item.pronounce) {\n exBlock.innerHTML = `<div>${item.pronounce}<\/div>${item.exmeaning ? '<div style=\"opacity:0.75;margin-top:3px\">' + item.exmeaning + '<\/div>' : ''}`;\n } else {\n exBlock.innerHTML = '';\n }\n\n const total = activeVocabList.length;\n const info = `${index + 1} \/ ${total}`;\n document.getElementById('cardnumberFront').textContent = info;\n document.getElementById('cardnumberBack').textContent = info;\n\n const audioEl = document.getElementById('audioPlayer');\n if (item.audioUrl) audioEl.src = item.audioUrl;\n document.querySelector('.play-audio-button').setAttribute('data-vocab', item.reading || item.vocab || '');\n }\n\n function nextVocab() {\n if (isRandom) {\n currentCard = Math.floor(Math.random() * activeVocabList.length);\n displayVocab(currentCard);\n } else if (currentCard < activeVocabList.length - 1) {\n currentCard++;\n displayVocab(currentCard);\n } else {\n showLockPopup();\n }\n }\n\n function previousVocab() {\n if (isRandom) {\n currentCard = Math.floor(Math.random() * activeVocabList.length);\n displayVocab(currentCard);\n } else if (currentCard > 0) {\n currentCard--;\n displayVocab(currentCard);\n }\n }\n\n function flipCard() {\n document.getElementById('flipCard').classList.toggle('flipped');\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 toggleMenu() {\n document.getElementById('cardSelector').classList.toggle('active');\n }\n\n function showLockPopup() {\n document.getElementById('lockPopup').classList.add('active');\n }\n\n function closeLockPopup() {\n document.getElementById('lockPopup').classList.remove('active');\n }\n\n document.getElementById('lockPopup').addEventListener('click', function(e) {\n if (e.target === this) closeLockPopup();\n });\n\n function playAudio(btn) {\n if (event) event.stopPropagation();\n const audioEl = document.getElementById('audioPlayer');\n if (audioEl.src && !audioEl.src.endsWith('\/')) {\n audioEl.play();\n return;\n }\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'; msg.rate = 0.8; msg.volume = 1.0;\n const voices = window.speechSynthesis.getVoices();\n if (voices.length > 0) msg.voice = voices.find(v => v.lang.indexOf('ja') > -1) || voices[0];\n window.speechSynthesis.speak(msg);\n }\n\n window.addEventListener('load', function() {\n if (speechSynthesis.onvoiceschanged !== undefined) {\n speechSynthesis.onvoiceschanged = function() { speechSynthesis.getVoices(); };\n }\n loadData();\n });\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Th\u1ebb t\u1eeb v\u1ef1ng Nh\u00e0 h\u00e0ng Gino2 \u2013 H\u1ecdc th\u1eed \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 t\u1eeb v\u1ef1ng Nh\u00e0 h\u00e0ng Gino2! Li\u00ean h\u1ec7 \u0110\u00f3ng \u2630 Danh s\u00e1ch th\u1ebb Danh s\u00e1ch th\u1ebb \u0110ang t\u1ea3i… \u0110ang t\u1ea3i… L\u00f9i l\u1ea1i […]\n","protected":false},"author":2,"featured_media":0,"parent":3641,"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-3836","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3836","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=3836"}],"version-history":[{"count":3,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3836\/revisions"}],"predecessor-version":[{"id":8436,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3836\/revisions\/8436"}],"up":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3641"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/media?parent=3836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}