T\u1eeb v\u1ef1ng ch\u1ebf bi\u1ebfn th\u1ef1c ph\u1ea9m tokutei gino2<\/title>\n <style>\n \/* --- CSS G\u1ed0C GI\u1eee NGUY\u00caN --- *\/\n @media print { body * { visibility: hidden; } }\n .test-container * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; }\n .test-container { background-color: #f5f5f5; color: #333; position: relative; }\n .test-container .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }\n .test-container .popup-content { background: white; padding: 25px; border-radius: 10px; width: 90%; max-width: 500px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }\n .test-container .popup-content h3 { color: #10291a; margin-bottom: 20px; text-align: center; }\n .test-container .popup-content input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; }\n .test-container .popup-content button { width: 100%; padding: 12px; background-color: #10291a; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; }\n \n .test-container .container { display: flex; height: 100vh; overflow: hidden; }\n .test-container .sidebar { width: 280px; background-color: #fff; border-right: 1px solid #ddd; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); overflow-y: auto; transition: transform 0.3s ease; min-height: 100vh; flex-shrink: 0; }\n .test-container .sidebar-header { padding: 10px; background-color: #10291a; color: white; text-align: center; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }\n .test-container .exam-list { padding: 10px; padding-bottom: 80px; }\n .test-container .exam-item { padding: 10px; margin-bottom: 5px; cursor: pointer; border-radius: 5px; background: #f5f5f5; box-shadow: 0 1px 3px rgba(12, 12, 12, 0.05); }\n .test-container .exam-item.active { background-color: #fae6e6; color: #10291a; }\n \n .test-container .content { flex: 1; padding: 0; height: 100vh; overflow-y: auto; position: relative; }\n .test-container .header { width:100%; z-index: 9; display: flex; justify-content: space-between; align-items: center; padding: 10px 15px;position: relative; }\n .test-container .header-left { display: flex; align-items: center; gap: 15px; z-index: 1000; }\n .test-container .timer-container { background-color: #10291a; color: white; padding: 5px 10px; border-radius: 20px; font-size: 15px; white-space: nowrap; }\n .test-container .submit-button { padding: 5px 15px; background-color: #e5efd7; color: #10291a; border: none; border-radius: 20px; font-size: 15px; cursor: pointer; border-bottom: 1px solid #28a745; }\n \n .test-container .question-group { background-color: white; border-radius: 5px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }\n .test-container .question { padding: 15px; border-bottom: 2px solid #eee; }\n \n .test-container .question-text { font-weight: bold; margin-bottom: 15px; }\n .test-container .question-option { display: block; padding: 10px; margin: 5px 0; border-radius: 5px; font-weight: normal; cursor: pointer; }\n .test-container .question-image { max-width: 100%; height: auto; margin: 10px 0; border-radius: 5px; }\n .test-container .explanation { display: none; background-color: #e6f7ff; padding: 10px; margin-top: 10px; border-radius: 5px; border-left: 4px solid #10291a; font-size: 14px; }\n \n .test-container .start-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 2000; }\n .test-container .start-popup-content { background: white; padding: 30px; border-radius: 10px; text-align: center; max-width: 400px; }\n .test-container .start-popup button { padding: 10px 20px; background-color: #10291a; color: white; border: none; border-radius: 5px; margin-top: 20px; cursor: pointer; }\n\n .test-container .menu-toggle { display: none; background: none; border: none; color: #10291a; font-size: 22px; cursor: pointer; width: 40px; height: 40px; align-items: center; justify-content: center; }\n \n \/* --- C\u1eacP NH\u1eacT CSS CHO RESULT POPUP --- *\/\n .test-container .result-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 99999; }\n .test-container .result-popup-content { background: white; padding: 30px; border-radius: 10px; width: 90%; max-width: 450px; text-align: center; }\n \n .result-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #eee; }\n .result-label { font-weight: bold; color: #555; }\n .result-value { color: #10291a; font-weight: 600; text-align: right; }\n\n .answer-correct { color: #28a745; font-weight: bold; margin-left: 6px; }\n .answer-wrong { color: #dc3545; font-weight: bold; margin-left: 6px; }\n\n \/* Desktop Layout *\/\n @media (min-width: 1024px) {\n .test-container .question-layout { display: flex; padding: 15px; }\n .test-container .question-list { width: 260px; margin-right: 15px; background: #fff; border-radius: 5px; border: 1px solid #ddd; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; max-height: calc(100vh - 120px); overflow-y: auto; }\n .test-container .question-list-item { flex: 0 0 calc(50% - 8px); text-align: center; padding: 6px 4px; border-radius: 4px; background: #f5f5f5; border: 1px solid #ddd; cursor: pointer; font-size: 13px; }\n .test-container .question-list-item.active-question { background: #fae6e6; border-color: #28a745; }\n .test-container .question-list-item.answered-question { background: #e5efd7; border-color: #28a745; }\n .test-container .question-container-wrapper { flex: 1; overflow-y: auto; max-height: calc(100vh - 80px); }\n .test-container .question { display: none; }\n .test-container .question.active-question { display: block; }\n .test-container .submit-button { position: absolute; left: 40%; transform: translateX(-50%); }\n }\n\n \/* Mobile Layout *\/\n @media (max-width: 768px) {\n .test-container .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 9999; transform: translateX(-100%); }\n .test-container .sidebar.visible { transform: translateX(0); }\n .test-container .menu-toggle { display: block; }\n .test-container .header { position: fixed; left: 0; bottom: 0; background:#fff; border-top: 1px solid #ddd; }\n .test-container .question-list { display: none !important; }\n .test-container .question { display: block !important; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"test-container\">\n <div id=\"infoPopup\" class=\"popup\">\n <div class=\"popup-content\">\n <h3>TH\u00d4NG TIN L\u00c0M B\u00c0I<\/h3>\n <input id=\"guestName\" placeholder=\"H\u1ecd v\u00e0 T\u00ean\" \/>\n <input id=\"guestEmail\" type=\"email\" placeholder=\"Email\" required \/>\n <button onclick=\"accessFree()\">B\u1eaft \u0111\u1ea7u<\/button>\n <\/div>\n <\/div>\n\n <div id=\"startQuizPopup\" class=\"start-popup\">\n <div class=\"start-popup-content\">\n <p>B\u1ea1n \u0111\u00e3 s\u1eb5n s\u00e0ng \u0111\u1ec3 l\u00e0m b\u00e0i?<\/p>\n <button onclick=\"confirmStartTimer()\">B\u1eaft \u0111\u1ea7u ngay<\/button>\n <\/div>\n <\/div>\n\n <div class=\"container\" id=\"mainContainer\" style=\"display:none;\">\n <div class=\"sidebar\" id=\"sidebar\">\n <div class=\"sidebar-header\">Danh s\u00e1ch b\u00e0i t\u1eadp <button onclick=\"document.getElementById('sidebar').classList.remove('visible')\" style=\"background:none;border:none;color:white;font-size:20px;cursor:pointer;\">\u00d7<\/button><\/div>\n <div class=\"exam-list\" id=\"examList\"><\/div>\n <\/div> \n <div class=\"content\" id=\"contentArea\"><\/div>\n <\/div>\n\n <div id=\"resultPopup\" class=\"result-popup\">\n <div class=\"result-popup-content\">\n <h3>K\u1ebeT QU\u1ea2 B\u00c0I L\u00c0M<\/h3>\n <div id=\"resultDetails\" style=\"margin:20px 0;\">\n <\/div>\n <a href=\"https:\/\/tokuteigino.vn\/vi\/hoc-thu\/hoc-thu-tp-gino-2\/\" style=\"display:inline-block; text-decoration:none; padding:10px 20px; background:#10291a; color:white; border-radius:5px; font-size: 16px;\">L\u00e0m b\u00e0i kh\u00e1c<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const scriptUrl = \"https:\/\/script.google.com\/macros\/s\/AKfycby2kDSqLCtGc2BNSRDADWYDXhFTxB_mMnMF__Uvkbbd0fASyFFzsWTqwBIJiStcXpC7\/exec\";\n let currentName = \"\", currentEmail = \"\", currentExamId = null, timeLeft = 0, timerInterval = null;\n let correctAnswers = [], totalQuestions = 0, allExamsData = {};\n\n function accessFree() {\n currentName = document.getElementById('guestName').value.trim();\n currentEmail = document.getElementById('guestEmail').value.trim();\n\n \/\/ Bi\u1ec3u th\u1ee9c ch\u00ednh quy ki\u1ec3m tra \u0111\u1ecbnh d\u1ea1ng email\n const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n\n if (!currentName) {\n return alert(\"Vui l\u00f2ng nh\u1eadp H\u1ecd v\u00e0 T\u00ean!\");\n }\n \n if (!currentEmail) {\n return alert(\"Vui l\u00f2ng nh\u1eadp Email!\");\n }\n\n if (!emailPattern.test(currentEmail)) {\n return alert(\"\u0110\u1ecbnh d\u1ea1ng Email kh\u00f4ng h\u1ee3p l\u1ec7! Vui l\u00f2ng ki\u1ec3m tra l\u1ea1i (v\u00ed d\u1ee5: abc@gmail.com)\");\n }\n\n document.getElementById('infoPopup').style.display = 'none';\n document.getElementById('mainContainer').style.display = 'flex';\n loadExams();\n }\n\n function loadExams() {\n fetch(`${scriptUrl}?action=fetchExams`)\n .then(res => res.json())\n .then(result => {\n const list = document.getElementById('examList');\n list.innerHTML = '';\n result.exams.forEach(exam => {\n allExamsData[exam.id] = exam;\n const div = document.createElement('div');\n div.className = 'exam-item';\n div.dataset.examId = exam.id;\n div.textContent = exam.labelName;\n div.onclick = () => { showExam(exam.id); document.getElementById('sidebar').classList.remove('visible'); };\n list.appendChild(div);\n });\n if(result.exams.length > 0) showExam(result.exams[0].id);\n });\n }\n\n function showExam(examId) {\n document.querySelectorAll('.exam-item').forEach(el => el.classList.remove('active'));\n document.querySelector(`.exam-item[data-exam-id=\"${examId}\"]`)?.classList.add('active');\n \n fetch(`${scriptUrl}?action=fetchQuestions&examId=${examId}`)\n .then(res => res.json())\n .then(questions => {\n currentExamId = examId;\n allExamsData[examId].questions = questions;\n timeLeft = allExamsData[examId].duration * 60;\n renderContent(questions);\n document.getElementById('startQuizPopup').style.display = 'flex';\n });\n }\n\n function confirmStartTimer() {\n document.getElementById('startQuizPopup').style.display = 'none';\n startTimer();\n }\n\n function renderContent(questions) {\n const area = document.getElementById('contentArea');\n const isDesktop = window.innerWidth >= 1024;\n \n area.innerHTML = `\n <div class=\"header\">\n <div class=\"header-left\">\n <button class=\"menu-toggle\" onclick=\"document.getElementById('sidebar').classList.add('visible')\">\u2630<\/button>\n <div class=\"timer-container\"><span id=\"timer\">${formatTime(timeLeft)}<\/span><\/div>\n <\/div>\n <button class=\"submit-button\" id=\"submitBtn\" onclick=\"submitQuiz()\">N\u1ed9p b\u00e0i<\/button>\n <\/div>\n <div class=\"${isDesktop ? 'question-layout' : ''}\">\n ${isDesktop ? '<div id=\"qListIdx\" class=\"question-list\"><\/div>' : ''}\n <div class=\"question-container-wrapper\">\n <div id=\"qContainer\"><\/div>\n <\/div>\n <\/div>\n `;\n\n const container = document.getElementById('qContainer');\n const idxList = document.getElementById('qListIdx');\n correctAnswers = []; totalQuestions = questions.length;\n\n const groupDiv = document.createElement('div');\n groupDiv.className = 'question-group';\n\n questions.forEach((q, i) => {\n correctAnswers.push(q.correctAnswer);\n const qDiv = document.createElement('div');\n qDiv.className = `question ${i === 0 ? 'active-question' : ''}`;\n qDiv.id = `q-block-${i}`;\n qDiv.innerHTML = `\n <div class=\"question-text\">${q.questionText}<\/div>\n ${q.questionImage ? `<img decoding=\"async\" class=\"question-image\" src=\"${q.questionImage}\">` : ''}\n <label class=\"question-option\"><input type=\"radio\" name=\"q${i}\" value=\"A\" onchange=\"markAns(${i})\"> ${q.optionA}<\/label>\n <label class=\"question-option\"><input type=\"radio\" name=\"q${i}\" value=\"B\" onchange=\"markAns(${i})\"> ${q.optionB}<\/label>\n ${q.optionC ? `<label class=\"question-option\"><input type=\"radio\" name=\"q${i}\" value=\"C\" onchange=\"markAns(${i})\"> ${q.optionC}<\/label>` : ''}\n ${q.optionD ? `<label class=\"question-option\"><input type=\"radio\" name=\"q${i}\" value=\"D\" onchange=\"markAns(${i})\"> ${q.optionD}<\/label>` : ''}\n <div class=\"explanation\" id=\"exp-${i}\"><strong>Gi\u1ea3i th\u00edch:<\/strong> ${q.explanation}<\/div>\n `;\n groupDiv.appendChild(qDiv);\n\n if(isDesktop && idxList) {\n const btn = document.createElement('div');\n btn.className = `question-list-item ${i === 0 ? 'active-question' : ''}`;\n btn.id = `idx-${i}`; btn.textContent = `C\u00e2u ${i+1}`;\n btn.onclick = () => {\n document.querySelectorAll('.question, .question-list-item').forEach(el => el.classList.remove('active-question'));\n qDiv.classList.add('active-question'); btn.classList.add('active-question');\n };\n idxList.appendChild(btn);\n }\n });\n container.appendChild(groupDiv);\n }\n\n function markAns(i) {\n const idx = document.getElementById(`idx-${i}`);\n if(idx) idx.classList.add('answered-question');\n }\n\n function startTimer() {\n if(timerInterval) clearInterval(timerInterval);\n timerInterval = setInterval(() => {\n timeLeft--;\n if(document.getElementById('timer')) document.getElementById('timer').textContent = formatTime(timeLeft);\n if(timeLeft <= 0) { clearInterval(timerInterval); submitQuiz(); }\n }, 1000);\n }\n\n function formatTime(s) {\n const min = Math.floor(s\/60); const sec = s%60;\n return `${min.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`;\n }\n\n function submitQuiz() {\n if(timeLeft > 0 && !confirm(\"B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n n\u1ed9p b\u00e0i?\")) return;\n clearInterval(timerInterval);\n let correct = 0;\n for(let i=0; i<totalQuestions; i++) {\n const sel = document.querySelector(`input[name=\"q${i}\"]:checked`);\n const val = sel ? sel.value : \"\";\n if(val === correctAnswers[i]) correct++;\n if(document.getElementById(`exp-${i}`)) document.getElementById(`exp-${i}`).style.display = 'block';\n document.querySelectorAll(`input[name=\"q${i}\"]`).forEach(opt => {\n const parent = opt.parentElement;\n if(opt.value === correctAnswers[i]) parent.innerHTML += '<span class=\"answer-correct\">\u2714<\/span>';\n else if(opt.value === val) parent.innerHTML += '<span class=\"answer-wrong\">\u2718<\/span>';\n opt.disabled = true;\n });\n }\n const pct = (correct\/totalQuestions)*100;\n const res = pct >= 80 ? \"\u0110\u1ed7\" : \"Tr\u01b0\u1ee3t\";\n\n fetch(scriptUrl, {\n method: \"POST\", mode: \"no-cors\",\n body: JSON.stringify({ action:\"submitQuiz\", name:currentName, email:currentEmail, testName:allExamsData[currentExamId].testName, correctCount:correct, totalQuestions:totalQuestions, minutes: Math.floor((allExamsData[currentExamId].duration*60 - timeLeft)\/60), percentage: pct, ketqua: res })\n });\n\n \/\/ Giao di\u1ec7n k\u1ebft qu\u1ea3 m\u1edbi v\u1edbi ti\u00eau \u0111\u1ec1 b\u00ean tr\u00e1i\n document.getElementById('resultDetails').innerHTML = `\n <div class=\"result-row\">\n <span class=\"result-label\">H\u1ecdc vi\u00ean:<\/span>\n <span class=\"result-value\">${currentName}<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"result-label\">S\u1ed1 c\u00e2u \u0111\u00fang:<\/span>\n <span class=\"result-value\">${correct}\/${totalQuestions}<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"result-label\">T\u1ef7 l\u1ec7:<\/span>\n <span class=\"result-value\">${pct.toFixed(0)}%<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"result-label\">K\u1ebft qu\u1ea3:<\/span>\n <span class=\"result-value\" style=\"color: ${res === '\u0110\u1ed7' ? '#28a745' : '#dc3545'}\">${res}<\/span>\n <\/div>\n `;\n document.getElementById('resultPopup').style.display = 'flex';\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>T\u1eeb v\u1ef1ng ch\u1ebf bi\u1ebfn th\u1ef1c ph\u1ea9m tokutei gino2 TH\u00d4NG TIN L\u00c0M B\u00c0I B\u1eaft \u0111\u1ea7u B\u1ea1n \u0111\u00e3 s\u1eb5n s\u00e0ng \u0111\u1ec3 l\u00e0m b\u00e0i? B\u1eaft \u0111\u1ea7u ngay Danh s\u00e1ch b\u00e0i t\u1eadp \u00d7 K\u1ebeT QU\u1ea2 B\u00c0I L\u00c0M L\u00e0m b\u00e0i kh\u00e1c<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":3633,"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-3773","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3773","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=3773"}],"version-history":[{"count":4,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3773\/revisions"}],"predecessor-version":[{"id":8317,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3773\/revisions\/8317"}],"up":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3633"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/media?parent=3773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3773,"date":"2024-09-28T21:33:13","date_gmt":"2024-09-28T14:33:13","guid":{"rendered":"https:\/\/tokuteigino.vn\/?page_id=3773"},"modified":"2026-03-23T10:27:16","modified_gmt":"2026-03-23T03:27:16","slug":"hoc-thu-tp-gino2-bai-tap-luyen-tap","status":"publish","type":"page","link":"https:\/\/tokuteigino.vn\/vi\/hoc-thu\/hoc-thu-tp-gino-2\/hoc-thu-tp-gino2-bai-tap-luyen-tap\/","title":{"rendered":"H\u1ecdc th\u1eed tp gino2 – b\u00e0i t\u1eadp luy\u1ec7n t\u1eadp"},"content":{"rendered":"\n\n\n\n\n\n \n \n T\u1eeb v\u1ef1ng ch\u1ebf bi\u1ebfn th\u1ef1c ph\u1ea9m tokutei gino2<\/title>\n <style>\n \/* --- CSS G\u1ed0C GI\u1eee NGUY\u00caN --- *\/\n @media print { body * { visibility: hidden; } }\n .test-container * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', Arial, sans-serif; }\n .test-container { background-color: #f5f5f5; color: #333; position: relative; }\n .test-container .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }\n .test-container .popup-content { background: white; padding: 25px; border-radius: 10px; width: 90%; max-width: 500px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }\n .test-container .popup-content h3 { color: #10291a; margin-bottom: 20px; text-align: center; }\n .test-container .popup-content input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; }\n .test-container .popup-content button { width: 100%; padding: 12px; background-color: #10291a; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; }\n \n .test-container .container { display: flex; height: 100vh; overflow: hidden; }\n .test-container .sidebar { width: 280px; background-color: #fff; border-right: 1px solid #ddd; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); overflow-y: auto; transition: transform 0.3s ease; min-height: 100vh; flex-shrink: 0; }\n .test-container .sidebar-header { padding: 10px; background-color: #10291a; color: white; text-align: center; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }\n .test-container .exam-list { padding: 10px; padding-bottom: 80px; }\n .test-container .exam-item { padding: 10px; margin-bottom: 5px; cursor: pointer; border-radius: 5px; background: #f5f5f5; box-shadow: 0 1px 3px rgba(12, 12, 12, 0.05); }\n .test-container .exam-item.active { background-color: #fae6e6; color: #10291a; }\n \n .test-container .content { flex: 1; padding: 0; height: 100vh; overflow-y: auto; position: relative; }\n .test-container .header { width:100%; z-index: 9; display: flex; justify-content: space-between; align-items: center; padding: 10px 15px;position: relative; }\n .test-container .header-left { display: flex; align-items: center; gap: 15px; z-index: 1000; }\n .test-container .timer-container { background-color: #10291a; color: white; padding: 5px 10px; border-radius: 20px; font-size: 15px; white-space: nowrap; }\n .test-container .submit-button { padding: 5px 15px; background-color: #e5efd7; color: #10291a; border: none; border-radius: 20px; font-size: 15px; cursor: pointer; border-bottom: 1px solid #28a745; }\n \n .test-container .question-group { background-color: white; border-radius: 5px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }\n .test-container .question { padding: 15px; border-bottom: 2px solid #eee; }\n \n .test-container .question-text { font-weight: bold; margin-bottom: 15px; }\n .test-container .question-option { display: block; padding: 10px; margin: 5px 0; border-radius: 5px; font-weight: normal; cursor: pointer; }\n .test-container .question-image { max-width: 100%; height: auto; margin: 10px 0; border-radius: 5px; }\n .test-container .explanation { display: none; background-color: #e6f7ff; padding: 10px; margin-top: 10px; border-radius: 5px; border-left: 4px solid #10291a; font-size: 14px; }\n \n .test-container .start-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 2000; }\n .test-container .start-popup-content { background: white; padding: 30px; border-radius: 10px; text-align: center; max-width: 400px; }\n .test-container .start-popup button { padding: 10px 20px; background-color: #10291a; color: white; border: none; border-radius: 5px; margin-top: 20px; cursor: pointer; }\n\n .test-container .menu-toggle { display: none; background: none; border: none; color: #10291a; font-size: 22px; cursor: pointer; width: 40px; height: 40px; align-items: center; justify-content: center; }\n \n \/* --- C\u1eacP NH\u1eacT CSS CHO RESULT POPUP --- *\/\n .test-container .result-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 99999; }\n .test-container .result-popup-content { background: white; padding: 30px; border-radius: 10px; width: 90%; max-width: 450px; text-align: center; }\n \n .result-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #eee; }\n .result-label { font-weight: bold; color: #555; }\n .result-value { color: #10291a; font-weight: 600; text-align: right; }\n\n .answer-correct { color: #28a745; font-weight: bold; margin-left: 6px; }\n .answer-wrong { color: #dc3545; font-weight: bold; margin-left: 6px; }\n\n \/* Desktop Layout *\/\n @media (min-width: 1024px) {\n .test-container .question-layout { display: flex; padding: 15px; }\n .test-container .question-list { width: 260px; margin-right: 15px; background: #fff; border-radius: 5px; border: 1px solid #ddd; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; max-height: calc(100vh - 120px); overflow-y: auto; }\n .test-container .question-list-item { flex: 0 0 calc(50% - 8px); text-align: center; padding: 6px 4px; border-radius: 4px; background: #f5f5f5; border: 1px solid #ddd; cursor: pointer; font-size: 13px; }\n .test-container .question-list-item.active-question { background: #fae6e6; border-color: #28a745; }\n .test-container .question-list-item.answered-question { background: #e5efd7; border-color: #28a745; }\n .test-container .question-container-wrapper { flex: 1; overflow-y: auto; max-height: calc(100vh - 80px); }\n .test-container .question { display: none; }\n .test-container .question.active-question { display: block; }\n .test-container .submit-button { position: absolute; left: 40%; transform: translateX(-50%); }\n }\n\n \/* Mobile Layout *\/\n @media (max-width: 768px) {\n .test-container .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 9999; transform: translateX(-100%); }\n .test-container .sidebar.visible { transform: translateX(0); }\n .test-container .menu-toggle { display: block; }\n .test-container .header { position: fixed; left: 0; bottom: 0; background:#fff; border-top: 1px solid #ddd; }\n .test-container .question-list { display: none !important; }\n .test-container .question { display: block !important; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"test-container\">\n <div id=\"infoPopup\" class=\"popup\">\n <div class=\"popup-content\">\n <h3>TH\u00d4NG TIN L\u00c0M B\u00c0I<\/h3>\n <input id=\"guestName\" placeholder=\"H\u1ecd v\u00e0 T\u00ean\" \/>\n <input id=\"guestEmail\" type=\"email\" placeholder=\"Email\" required \/>\n <button onclick=\"accessFree()\">B\u1eaft \u0111\u1ea7u<\/button>\n <\/div>\n <\/div>\n\n <div id=\"startQuizPopup\" class=\"start-popup\">\n <div class=\"start-popup-content\">\n <p>B\u1ea1n \u0111\u00e3 s\u1eb5n s\u00e0ng \u0111\u1ec3 l\u00e0m b\u00e0i?<\/p>\n <button onclick=\"confirmStartTimer()\">B\u1eaft \u0111\u1ea7u ngay<\/button>\n <\/div>\n <\/div>\n\n <div class=\"container\" id=\"mainContainer\" style=\"display:none;\">\n <div class=\"sidebar\" id=\"sidebar\">\n <div class=\"sidebar-header\">Danh s\u00e1ch b\u00e0i t\u1eadp <button onclick=\"document.getElementById('sidebar').classList.remove('visible')\" style=\"background:none;border:none;color:white;font-size:20px;cursor:pointer;\">\u00d7<\/button><\/div>\n <div class=\"exam-list\" id=\"examList\"><\/div>\n <\/div> \n <div class=\"content\" id=\"contentArea\"><\/div>\n <\/div>\n\n <div id=\"resultPopup\" class=\"result-popup\">\n <div class=\"result-popup-content\">\n <h3>K\u1ebeT QU\u1ea2 B\u00c0I L\u00c0M<\/h3>\n <div id=\"resultDetails\" style=\"margin:20px 0;\">\n <\/div>\n <a href=\"https:\/\/tokuteigino.vn\/vi\/hoc-thu\/hoc-thu-tp-gino-2\/\" style=\"display:inline-block; text-decoration:none; padding:10px 20px; background:#10291a; color:white; border-radius:5px; font-size: 16px;\">L\u00e0m b\u00e0i kh\u00e1c<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const scriptUrl = \"https:\/\/script.google.com\/macros\/s\/AKfycby2kDSqLCtGc2BNSRDADWYDXhFTxB_mMnMF__Uvkbbd0fASyFFzsWTqwBIJiStcXpC7\/exec\";\n let currentName = \"\", currentEmail = \"\", currentExamId = null, timeLeft = 0, timerInterval = null;\n let correctAnswers = [], totalQuestions = 0, allExamsData = {};\n\n function accessFree() {\n currentName = document.getElementById('guestName').value.trim();\n currentEmail = document.getElementById('guestEmail').value.trim();\n\n \/\/ Bi\u1ec3u th\u1ee9c ch\u00ednh quy ki\u1ec3m tra \u0111\u1ecbnh d\u1ea1ng email\n const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n\n if (!currentName) {\n return alert(\"Vui l\u00f2ng nh\u1eadp H\u1ecd v\u00e0 T\u00ean!\");\n }\n \n if (!currentEmail) {\n return alert(\"Vui l\u00f2ng nh\u1eadp Email!\");\n }\n\n if (!emailPattern.test(currentEmail)) {\n return alert(\"\u0110\u1ecbnh d\u1ea1ng Email kh\u00f4ng h\u1ee3p l\u1ec7! Vui l\u00f2ng ki\u1ec3m tra l\u1ea1i (v\u00ed d\u1ee5: abc@gmail.com)\");\n }\n\n document.getElementById('infoPopup').style.display = 'none';\n document.getElementById('mainContainer').style.display = 'flex';\n loadExams();\n }\n\n function loadExams() {\n fetch(`${scriptUrl}?action=fetchExams`)\n .then(res => res.json())\n .then(result => {\n const list = document.getElementById('examList');\n list.innerHTML = '';\n result.exams.forEach(exam => {\n allExamsData[exam.id] = exam;\n const div = document.createElement('div');\n div.className = 'exam-item';\n div.dataset.examId = exam.id;\n div.textContent = exam.labelName;\n div.onclick = () => { showExam(exam.id); document.getElementById('sidebar').classList.remove('visible'); };\n list.appendChild(div);\n });\n if(result.exams.length > 0) showExam(result.exams[0].id);\n });\n }\n\n function showExam(examId) {\n document.querySelectorAll('.exam-item').forEach(el => el.classList.remove('active'));\n document.querySelector(`.exam-item[data-exam-id=\"${examId}\"]`)?.classList.add('active');\n \n fetch(`${scriptUrl}?action=fetchQuestions&examId=${examId}`)\n .then(res => res.json())\n .then(questions => {\n currentExamId = examId;\n allExamsData[examId].questions = questions;\n timeLeft = allExamsData[examId].duration * 60;\n renderContent(questions);\n document.getElementById('startQuizPopup').style.display = 'flex';\n });\n }\n\n function confirmStartTimer() {\n document.getElementById('startQuizPopup').style.display = 'none';\n startTimer();\n }\n\n function renderContent(questions) {\n const area = document.getElementById('contentArea');\n const isDesktop = window.innerWidth >= 1024;\n \n area.innerHTML = `\n <div class=\"header\">\n <div class=\"header-left\">\n <button class=\"menu-toggle\" onclick=\"document.getElementById('sidebar').classList.add('visible')\">\u2630<\/button>\n <div class=\"timer-container\"><span id=\"timer\">${formatTime(timeLeft)}<\/span><\/div>\n <\/div>\n <button class=\"submit-button\" id=\"submitBtn\" onclick=\"submitQuiz()\">N\u1ed9p b\u00e0i<\/button>\n <\/div>\n <div class=\"${isDesktop ? 'question-layout' : ''}\">\n ${isDesktop ? '<div id=\"qListIdx\" class=\"question-list\"><\/div>' : ''}\n <div class=\"question-container-wrapper\">\n <div id=\"qContainer\"><\/div>\n <\/div>\n <\/div>\n `;\n\n const container = document.getElementById('qContainer');\n const idxList = document.getElementById('qListIdx');\n correctAnswers = []; totalQuestions = questions.length;\n\n const groupDiv = document.createElement('div');\n groupDiv.className = 'question-group';\n\n questions.forEach((q, i) => {\n correctAnswers.push(q.correctAnswer);\n const qDiv = document.createElement('div');\n qDiv.className = `question ${i === 0 ? 'active-question' : ''}`;\n qDiv.id = `q-block-${i}`;\n qDiv.innerHTML = `\n <div class=\"question-text\">${q.questionText}<\/div>\n ${q.questionImage ? `<img decoding=\"async\" class=\"question-image\" src=\"${q.questionImage}\">` : ''}\n <label class=\"question-option\"><input type=\"radio\" name=\"q${i}\" value=\"A\" onchange=\"markAns(${i})\"> ${q.optionA}<\/label>\n <label class=\"question-option\"><input type=\"radio\" name=\"q${i}\" value=\"B\" onchange=\"markAns(${i})\"> ${q.optionB}<\/label>\n ${q.optionC ? `<label class=\"question-option\"><input type=\"radio\" name=\"q${i}\" value=\"C\" onchange=\"markAns(${i})\"> ${q.optionC}<\/label>` : ''}\n ${q.optionD ? `<label class=\"question-option\"><input type=\"radio\" name=\"q${i}\" value=\"D\" onchange=\"markAns(${i})\"> ${q.optionD}<\/label>` : ''}\n <div class=\"explanation\" id=\"exp-${i}\"><strong>Gi\u1ea3i th\u00edch:<\/strong> ${q.explanation}<\/div>\n `;\n groupDiv.appendChild(qDiv);\n\n if(isDesktop && idxList) {\n const btn = document.createElement('div');\n btn.className = `question-list-item ${i === 0 ? 'active-question' : ''}`;\n btn.id = `idx-${i}`; btn.textContent = `C\u00e2u ${i+1}`;\n btn.onclick = () => {\n document.querySelectorAll('.question, .question-list-item').forEach(el => el.classList.remove('active-question'));\n qDiv.classList.add('active-question'); btn.classList.add('active-question');\n };\n idxList.appendChild(btn);\n }\n });\n container.appendChild(groupDiv);\n }\n\n function markAns(i) {\n const idx = document.getElementById(`idx-${i}`);\n if(idx) idx.classList.add('answered-question');\n }\n\n function startTimer() {\n if(timerInterval) clearInterval(timerInterval);\n timerInterval = setInterval(() => {\n timeLeft--;\n if(document.getElementById('timer')) document.getElementById('timer').textContent = formatTime(timeLeft);\n if(timeLeft <= 0) { clearInterval(timerInterval); submitQuiz(); }\n }, 1000);\n }\n\n function formatTime(s) {\n const min = Math.floor(s\/60); const sec = s%60;\n return `${min.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`;\n }\n\n function submitQuiz() {\n if(timeLeft > 0 && !confirm(\"B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n n\u1ed9p b\u00e0i?\")) return;\n clearInterval(timerInterval);\n let correct = 0;\n for(let i=0; i<totalQuestions; i++) {\n const sel = document.querySelector(`input[name=\"q${i}\"]:checked`);\n const val = sel ? sel.value : \"\";\n if(val === correctAnswers[i]) correct++;\n if(document.getElementById(`exp-${i}`)) document.getElementById(`exp-${i}`).style.display = 'block';\n document.querySelectorAll(`input[name=\"q${i}\"]`).forEach(opt => {\n const parent = opt.parentElement;\n if(opt.value === correctAnswers[i]) parent.innerHTML += '<span class=\"answer-correct\">\u2714<\/span>';\n else if(opt.value === val) parent.innerHTML += '<span class=\"answer-wrong\">\u2718<\/span>';\n opt.disabled = true;\n });\n }\n const pct = (correct\/totalQuestions)*100;\n const res = pct >= 80 ? \"\u0110\u1ed7\" : \"Tr\u01b0\u1ee3t\";\n\n fetch(scriptUrl, {\n method: \"POST\", mode: \"no-cors\",\n body: JSON.stringify({ action:\"submitQuiz\", name:currentName, email:currentEmail, testName:allExamsData[currentExamId].testName, correctCount:correct, totalQuestions:totalQuestions, minutes: Math.floor((allExamsData[currentExamId].duration*60 - timeLeft)\/60), percentage: pct, ketqua: res })\n });\n\n \/\/ Giao di\u1ec7n k\u1ebft qu\u1ea3 m\u1edbi v\u1edbi ti\u00eau \u0111\u1ec1 b\u00ean tr\u00e1i\n document.getElementById('resultDetails').innerHTML = `\n <div class=\"result-row\">\n <span class=\"result-label\">H\u1ecdc vi\u00ean:<\/span>\n <span class=\"result-value\">${currentName}<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"result-label\">S\u1ed1 c\u00e2u \u0111\u00fang:<\/span>\n <span class=\"result-value\">${correct}\/${totalQuestions}<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"result-label\">T\u1ef7 l\u1ec7:<\/span>\n <span class=\"result-value\">${pct.toFixed(0)}%<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"result-label\">K\u1ebft qu\u1ea3:<\/span>\n <span class=\"result-value\" style=\"color: ${res === '\u0110\u1ed7' ? '#28a745' : '#dc3545'}\">${res}<\/span>\n <\/div>\n `;\n document.getElementById('resultPopup').style.display = 'flex';\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>T\u1eeb v\u1ef1ng ch\u1ebf bi\u1ebfn th\u1ef1c ph\u1ea9m tokutei gino2 TH\u00d4NG TIN L\u00c0M B\u00c0I B\u1eaft \u0111\u1ea7u B\u1ea1n \u0111\u00e3 s\u1eb5n s\u00e0ng \u0111\u1ec3 l\u00e0m b\u00e0i? B\u1eaft \u0111\u1ea7u ngay Danh s\u00e1ch b\u00e0i t\u1eadp \u00d7 K\u1ebeT QU\u1ea2 B\u00c0I L\u00c0M L\u00e0m b\u00e0i kh\u00e1c<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":3633,"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-3773","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3773","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=3773"}],"version-history":[{"count":4,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3773\/revisions"}],"predecessor-version":[{"id":8317,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3773\/revisions\/8317"}],"up":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/pages\/3633"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/vi\/wp-json\/wp\/v2\/media?parent=3773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}