\u00d4n Thi Agribank<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n \n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -webkit-tap-highlight-color: transparent;\n }\n \n :root {\n --primary: #00923f;\n --primary-dark: #006b2d;\n --primary-light: #00b04f;\n --secondary: #ffa726;\n --success: #4caf50;\n --danger: #ef5350;\n --warning: #ffb74d;\n --info: #29b6f6;\n --light: #f8f9fa;\n --dark: #2c3e50;\n --gray: #6c757d;\n --gray-light: #e9ecef;\n --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);\n --shadow-md: 0 4px 16px rgba(0,0,0,0.1);\n --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);\n --radius-sm: 8px;\n --radius-md: 12px;\n --radius-lg: 16px;\n --font-size-multiplier: 1;\n \/* FIX: safe area cho notch\/home indicator *\/\n --safe-bottom: env(safe-area-inset-bottom, 0px);\n --nav-height: 64px;\n }\n \n body {\n font-family: 'Inter', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: var(--dark);\n line-height: 1.6;\n min-height: 100vh;\n overscroll-behavior: none;\n }\n \n body.quiz-mode {\n background: #fafbfc;\n }\n \n .container {\n width: 100%;\n min-height: 100vh;\n background-color: white;\n display: flex;\n flex-direction: column;\n }\n \n .container.fullscreen-active {\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100vh;\n z-index: 9999;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n }\n \n \/* ============ HEADER ============ *\/\n header {\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\n color: white;\n padding: 20px 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: var(--shadow-md);\n position: sticky;\n top: 0;\n z-index: 100;\n }\n \n header.hidden { display: none; }\n \n .logo-container { display: flex; align-items: center; gap: 20px; }\n .logo { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }\n .logo i { font-size: 3rem; color: white; }\n .header-text h1 { font-size: 1.8rem; margin-bottom: 4px; font-weight: 800; }\n .header-text p { font-size: 0.95rem; opacity: 0.95; }\n .user-info { display: flex; align-items: center; gap: 15px; }\n \n \/* ============ LAYOUT ============ *\/\n .main-content { flex: 1; display: flex; width: 100%; }\n \n .content-area {\n flex: 1;\n padding: 30px 40px;\n background: #fafbfc;\n overflow-y: auto;\n }\n \n .content-area.quiz-active {\n padding: 0;\n background: #fafbfc;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n \n \/* ============ CARDS ============ *\/\n .content-card {\n background: white;\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-sm);\n padding: 30px 40px;\n margin-bottom: 30px;\n border: 1px solid var(--gray-light);\n }\n \n .section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 25px;\n flex-wrap: wrap;\n gap: 15px;\n }\n \n .section-title {\n font-size: 1.6rem;\n color: var(--dark);\n padding-bottom: 20px;\n border-bottom: 3px solid var(--gray-light);\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 700;\n position: relative;\n flex: 1;\n margin: 0;\n }\n \n .section-title::after {\n content: '';\n position: absolute;\n bottom: -3px; left: 0;\n width: 80px; height: 3px;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n }\n \n .section-title-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 20px;\n flex-wrap: wrap;\n }\n \n \/* ============ SHUFFLE TOGGLE ============ *\/\n .shuffle-toggle {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--light);\n border-radius: 25px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 2px solid var(--gray-light);\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n }\n \n .shuffle-toggle:hover { background: #e3f2fd; border-color: var(--primary); }\n .shuffle-toggle input[type=\"checkbox\"] { width: 18px; height: 18px; cursor: pointer; }\n .shuffle-toggle label { cursor: pointer; font-size: 0.95rem; font-weight: 600; color: var(--dark); }\n \n \/* ============ BUTTONS ============ *\/\n button {\n padding: 12px 24px;\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\n color: white;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n font-size: 0.95rem;\n font-weight: 600;\n transition: opacity 0.15s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-family: 'Inter', sans-serif;\n \/* FIX CRITICAL: touch-action manipulation lo\u1ea1i b\u1ecf 300ms delay *\/\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n -webkit-user-select: none;\n position: relative;\n z-index: 1;\n min-height: 44px;\n \/* FIX: Kh\u00f4ng d\u00f9ng transform \u0111\u1ec3 tr\u00e1nh lag khi touch *\/\n will-change: opacity;\n }\n \n button:active { opacity: 0.75; }\n \n @media (hover: hover) {\n button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }\n }\n \n .home-btn { background: linear-gradient(135deg, var(--gray), #5a6268); }\n .submit-btn { background: linear-gradient(135deg, var(--success), #43a047); }\n .show-answer-btn { background: linear-gradient(135deg, var(--warning), var(--secondary)); }\n .fullscreen-btn { background: linear-gradient(135deg, #7b1fa2, #9c27b0); padding: 10px 16px; }\n .fullscreen-btn.active { background: linear-gradient(135deg, #e65100, #ff6f00); }\n \n \/* ============ DASHBOARD ============ *\/\n .dashboard-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n gap: 20px;\n margin-top: 20px;\n }\n \n .dashboard-card {\n background: white;\n border-radius: var(--radius-lg);\n padding: 28px 25px;\n box-shadow: var(--shadow-sm);\n cursor: pointer;\n transition: opacity 0.15s ease;\n border: 2px solid var(--gray-light);\n text-align: center;\n position: relative;\n overflow: hidden;\n min-height: 200px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n -webkit-user-select: none;\n }\n \n .dashboard-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n }\n \n @media (hover: hover) {\n .dashboard-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); }\n }\n \n .dashboard-card:active { opacity: 0.8; }\n \n .card-icon {\n font-size: 3.5rem;\n margin-bottom: 20px;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n \n .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }\n .card-description { color: var(--gray); font-size: 0.9rem; }\n \n \/* ============ SEARCH ============ *\/\n .search-box { margin-bottom: 25px; }\n \n .search-box input {\n width: 100%;\n padding: 14px 20px;\n font-size: 1rem;\n border: 2px solid var(--gray-light);\n border-radius: var(--radius-md);\n transition: all 0.3s ease;\n font-family: 'Inter', sans-serif;\n }\n \n .search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,146,63,0.1); }\n \n \/* ============ TOPICS ============ *\/\n .topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }\n \n .topic-card {\n background: white;\n border-radius: var(--radius-lg);\n padding: 25px;\n box-shadow: var(--shadow-sm);\n border: 2px solid var(--gray-light);\n position: relative;\n }\n \n .topic-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n }\n \n .topic-header { display: flex; align-items: center; margin-bottom: 18px; }\n .topic-icon { font-size: 2.5rem; margin-right: 15px; }\n .topic-name { font-size: 1.25rem; font-weight: 700; }\n .topic-info { color: var(--gray); margin-bottom: 20px; }\n \n .topic-settings { display: none; margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--gray-light); }\n .topic-settings.show { display: block; }\n \n .setting-group { margin-bottom: 20px; }\n .setting-label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 0.95rem; }\n \n .setting-input {\n width: 100%;\n padding: 12px 16px;\n border: 2px solid var(--gray-light);\n border-radius: var(--radius-sm);\n font-size: 0.95rem;\n font-family: 'Inter', sans-serif;\n }\n \n .setting-input:focus { border-color: var(--primary); outline: none; }\n \n .range-option {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n padding: 10px 4px;\n cursor: pointer;\n touch-action: manipulation;\n }\n \n .range-option input[type=\"radio\"] { transform: scale(1.2); cursor: pointer; min-width: 20px; min-height: 20px; }\n \n .range-inputs-container { display: none; margin-top: 12px; padding: 15px; background: var(--light); border-radius: var(--radius-sm); }\n .range-inputs-container.show { display: block; }\n .range-inputs { display: flex; align-items: center; gap: 10px; }\n .range-inputs input { flex: 1; }\n \n \/* ============ QUIZ CONTAINER ============ *\/\n .quiz-container {\n display: none;\n background: #fafbfc;\n \/* FIX: Padding bottom = nav bar height + safe area *\/\n padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);\n }\n \n .quiz-container.active { display: block; }\n \n \/* ============ QUIZ HEADER ============ *\/\n .quiz-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: white;\n border-bottom: 1px solid var(--gray-light);\n box-shadow: var(--shadow-sm);\n position: sticky;\n top: 0;\n z-index: 50;\n gap: 10px;\n flex-wrap: wrap;\n }\n \n .quiz-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }\n \n .topic-title-quiz {\n font-size: calc(1rem * var(--font-size-multiplier));\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .timer {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--light);\n border-radius: 50px;\n font-weight: 700;\n color: var(--primary);\n font-size: 1rem;\n min-width: 110px;\n justify-content: center;\n }\n \n .timer .time-value {\n display: inline-block;\n min-width: 55px;\n text-align: center;\n font-variant-numeric: tabular-nums;\n letter-spacing: 0.5px;\n }\n \n .timer.warning { color: var(--warning); background: #fff8e1; }\n .timer.danger { color: var(--danger); background: #ffebee; }\n \n .quiz-actions { display: flex; gap: 8px; flex-wrap: wrap; }\n \n \/* ============ QUESTION ============ *\/\n .question-container {\n background: white;\n padding: 20px;\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-sm);\n margin: 16px;\n border-left: 5px solid var(--primary);\n }\n \n .question-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n gap: 10px;\n flex-wrap: wrap;\n }\n \n .question-number {\n font-weight: 700;\n color: var(--primary);\n font-size: 1rem;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n \/* Desktop inline nav *\/\n .question-nav-inline { display: flex; gap: 12px; }\n .question-nav-inline button { padding: 10px 20px; font-size: 0.95rem; font-weight: 700; }\n \n .quiz-actions .btn-text { display: inline; }\n \n .question-text {\n font-size: calc(0.95rem * var(--font-size-multiplier));\n margin-bottom: 20px;\n line-height: 1.7;\n font-weight: 500;\n }\n \n .options-container { display: flex; flex-direction: column; gap: 10px; }\n \n \/* ============ OPTIONS ============ *\/\n .option {\n display: flex;\n align-items: center;\n padding: 14px 16px;\n background: white;\n border: 2px solid var(--gray-light);\n border-radius: var(--radius-md);\n cursor: pointer;\n \/* FIX CRITICAL: touch-action manipulation cho option *\/\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n -webkit-user-select: none;\n min-height: 52px;\n transition: background 0.1s, border-color 0.1s;\n \/* FIX: \u0110\u1ea3m b\u1ea3o option nh\u1eadn touch events \u0111\u00fang *\/\n -webkit-touch-callout: none;\n }\n \n @media (hover: hover) {\n .option:hover { background: var(--light); border-color: var(--primary); }\n }\n \n .option:active { background: #e3f2fd !important; border-color: var(--info) !important; }\n \n .option.selected { background: #e3f2fd; border-color: var(--info); border-width: 2px; }\n .option.correct { background: #e8f5e9; border-color: var(--success); border-width: 2px; }\n .option.incorrect { background: #ffebee; border-color: var(--danger); border-width: 2px; }\n .option.show-correct { background: #e8f5e9; border-color: var(--success); border-width: 2px; }\n \n .option-label {\n font-weight: 700;\n margin-right: 12px;\n color: var(--primary);\n min-width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--light);\n border-radius: 50%;\n font-size: 0.85rem;\n pointer-events: none;\n flex-shrink: 0;\n }\n \n .option-text {\n flex: 1;\n font-size: calc(0.88rem * var(--font-size-multiplier));\n line-height: 1.5;\n pointer-events: none;\n }\n \n \/* ============ EXPLANATION ============ *\/\n .answer-explanation {\n margin-top: 16px;\n padding: 14px;\n background: #e8f5e9;\n border-radius: var(--radius-md);\n border-left: 4px solid var(--success);\n font-size: calc(0.88rem * var(--font-size-multiplier));\n }\n \n .answer-explanation.incorrect { background: #ffebee; border-left-color: var(--danger); }\n \n \/* ============ FONT SIZE CONTROLS ============ *\/\n .font-size-controls { display: flex; align-items: center; gap: 6px; }\n \n .font-size-btn {\n width: 36px;\n height: 36px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--light);\n color: var(--dark);\n border: 2px solid var(--gray-light);\n font-weight: 700;\n font-size: 0.85rem;\n touch-action: manipulation;\n min-height: unset;\n }\n \n .font-size-btn.active { background: var(--primary); color: white; border-color: var(--primary); }\n \n \/* ============ RESULT ============ *\/\n .result-container { display: none; text-align: center; padding: 60px 40px; }\n .result-icon { font-size: 6rem; margin-bottom: 30px; }\n \n .score {\n font-size: 3rem;\n font-weight: 800;\n margin: 30px 0;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n \n .score-detail { font-size: 1.2rem; margin-bottom: 40px; color: var(--gray); }\n .result-actions { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }\n \n \/* ============ TOPICS CHECKLIST ============ *\/\n .topics-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin: 20px 0; }\n \n .topic-check-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 15px;\n background: white;\n border-radius: var(--radius-sm);\n border: 2px solid var(--gray-light);\n }\n \n .topic-check-item input[type=\"checkbox\"] { transform: scale(1.4); cursor: pointer; min-width: 24px; min-height: 24px; }\n \n .topic-check-content { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }\n \n .topic-check-label { flex: 1; cursor: pointer; font-weight: 500; min-width: 200px; padding: 8px 0; user-select: none; }\n \n .topic-question-input {\n width: 100px;\n padding: 8px 12px;\n border: 2px solid var(--gray-light);\n border-radius: var(--radius-sm);\n font-size: 0.95rem;\n text-align: center;\n font-weight: 600;\n }\n \n .topic-question-input:disabled { background: var(--gray-light); cursor: not-allowed; }\n \n \/* ============ REMAINING ============ *\/\n .remaining-questions {\n padding: 25px;\n background: linear-gradient(135deg, var(--primary-light), var(--primary));\n border-radius: var(--radius-md);\n text-align: center;\n color: white;\n margin: 20px 0;\n }\n \n .remaining-questions-value { font-size: 3rem; font-weight: 800; margin: 10px 0; }\n \n \/* ============ SAVED CONFIGS ============ *\/\n .saved-configs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 25px; }\n \n .config-card {\n background: white;\n border-radius: var(--radius-lg);\n padding: 25px;\n box-shadow: var(--shadow-sm);\n border: 2px solid var(--gray-light);\n border-left: 5px solid var(--primary);\n transition: all 0.3s ease;\n }\n \n @media (hover: hover) { .config-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }\n \n .config-name { font-weight: 700; color: var(--dark); margin-bottom: 12px; font-size: 1.15rem; }\n .config-details { color: var(--gray); font-size: 0.9rem; margin-bottom: 18px; line-height: 1.6; }\n \n \/* ============ SEARCH RESULTS ============ *\/\n .search-result-item { background: white; border-radius: var(--radius-md); padding: 20px; margin-bottom: 15px; border-left: 4px solid var(--primary); box-shadow: var(--shadow-sm); }\n .search-result-topic { font-size: 0.85rem; color: var(--primary); font-weight: 600; margin-bottom: 10px; }\n .search-result-question { font-size: 1rem; font-weight: 500; margin-bottom: 15px; line-height: 1.6; }\n .search-result-answer { padding: 12px; background: #e8f5e9; border-radius: var(--radius-sm); color: var(--success); font-weight: 600; }\n .keyword-highlight { background: #ffeb3b; padding: 2px 4px; border-radius: 3px; font-weight: 700; }\n \n \/* ============ MODALS ============ *\/\n .modal {\n display: none;\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100%;\n background: rgba(0,0,0,0.6);\n z-index: 10000;\n justify-content: center;\n align-items: center;\n touch-action: manipulation;\n }\n \n .modal.show { display: flex; }\n \n .modal-content {\n background: white;\n padding: 40px;\n border-radius: var(--radius-lg);\n max-width: 450px;\n width: 90%;\n box-shadow: var(--shadow-lg);\n text-align: center;\n max-height: 90vh;\n overflow-y: auto;\n position: relative;\n z-index: 10001;\n }\n \n .modal-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; color: var(--dark); }\n .modal-text { color: var(--gray); margin-bottom: 30px; line-height: 1.6; }\n \n .google-signin-btn {\n width: 100%;\n padding: 16px;\n background: white;\n border: 2px solid var(--gray-light);\n border-radius: var(--radius-sm);\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n transition: all 0.3s ease;\n margin-bottom: 15px;\n touch-action: manipulation;\n min-height: 52px;\n }\n \n .google-signin-btn:hover { background: var(--light); border-color: var(--primary); }\n .google-icon { width: 24px; height: 24px; }\n \n \/* ============ LOADING ============ *\/\n .loading-overlay {\n display: none;\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100%;\n background: rgba(255,255,255,0.95);\n z-index: 99999;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n pointer-events: none;\n }\n \n .loading-overlay.show { display: flex; pointer-events: all; }\n \n .loading-spinner {\n width: 60px; height: 60px;\n border: 6px solid var(--gray-light);\n border-radius: 50%;\n border-top-color: var(--primary);\n animation: spin 1s linear infinite;\n margin-bottom: 20px;\n }\n \n @keyframes spin { to { transform: rotate(360deg); } }\n \n @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\n @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } }\n \n .loading-text { font-size: 1.2rem; font-weight: 600; }\n \n \/* ============ WRONG ANSWERS ============ *\/\n .wrong-answers-list { text-align: left; max-height: 400px; overflow-y: auto; margin-top: 20px; }\n \n .wrong-answer-item { padding: 15px; background: white; border-radius: var(--radius-md); margin-bottom: 15px; border-left: 4px solid var(--danger); }\n .wrong-answer-item .question-num { font-weight: 700; color: var(--danger); margin-bottom: 8px; }\n .wrong-answer-item .question-content { margin-bottom: 10px; font-size: 0.95rem; }\n .wrong-answer-item .answer-info { font-size: 0.85rem; color: var(--gray); }\n .wrong-answer-item .correct-answer { color: var(--success); font-weight: 600; margin-top: 5px; }\n \n \/* ============================================================\n MOBILE NAVIGATION BAR - FIX QUAN TR\u1eccNG NH\u1ea4T\n ============================================================ *\/\n .quiz-nav-mobile {\n display: none;\n position: fixed;\n bottom: 0;\n left: 0; right: 0;\n \/* FIX: Safe area cho iPhone c\u00f3 home indicator *\/\n padding-bottom: calc(8px + var(--safe-bottom));\n padding-top: 8px;\n padding-left: 12px;\n padding-right: 12px;\n background: white;\n border-top: 2px solid var(--gray-light);\n box-shadow: 0 -3px 12px rgba(0,0,0,0.12);\n \/* FIX CRITICAL: z-index cao h\u01a1n t\u1ea5t c\u1ea3 *\/\n z-index: 1000;\n align-items: center;\n gap: 8px;\n \/* FIX: height c\u1ed1 \u0111\u1ecbnh \u0111\u1ec3 t\u00ednh padding-bottom \u0111\u00fang *\/\n min-height: var(--nav-height);\n \/* FIX: Isolation \u0111\u1ea3m b\u1ea3o kh\u00f4ng b\u1ecb stacking context override *\/\n isolation: isolate;\n }\n \n \/* FIX CRITICAL: C\u00e1c n\u00fat trong mobile nav bar *\/\n .quiz-nav-mobile .nav-btn {\n \/* K\u00edch th\u01b0\u1edbc nh\u1ecf g\u1ecdn h\u01a1n nh\u01b0ng \u0111\u1ee7 touch target *\/\n height: 44px;\n min-width: 44px;\n padding: 0 16px;\n border-radius: var(--radius-sm);\n font-size: 0.85rem;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n \/* FIX CRITICAL: touch-action ph\u1ea3i l\u00e0 manipulation *\/\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n -webkit-user-select: none;\n \/* FIX: Kh\u00f4ng transform \u0111\u1ec3 tr\u00e1nh layout shift khi touch *\/\n transition: opacity 0.1s;\n \/* FIX: Pointer events lu\u00f4n on *\/\n pointer-events: auto;\n \/* FIX: Tr\u00e1nh b\u1ecb che b\u1edfi c\u00e1c element kh\u00e1c *\/\n position: relative;\n z-index: 2;\n }\n \n .quiz-nav-mobile .nav-btn:active { opacity: 0.7; }\n .quiz-nav-mobile .nav-btn:disabled { opacity: 0.35; pointer-events: none; }\n \n .quiz-nav-mobile .nav-btn.btn-prev {\n background: linear-gradient(135deg, var(--gray), #5a6268);\n flex: 0 0 auto;\n }\n \n .quiz-nav-mobile .nav-btn.btn-next {\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\n flex: 0 0 auto;\n }\n \n \/* V\u00f9ng ch\u00ednh gi\u1eefa: hi\u1ec3n th\u1ecb c\u00e2u s\u1ed1 *\/\n .quiz-nav-mobile .nav-center {\n flex: 1;\n text-align: center;\n font-weight: 700;\n font-size: 0.85rem;\n color: var(--gray);\n pointer-events: none;\n }\n \n \/* ============ RESPONSIVE MOBILE ============ *\/\n @media (max-width: 768px) {\n .content-area { padding: 12px; }\n \n .content-area.quiz-active { padding: 0; }\n \n .content-card { padding: 16px 14px; }\n \n .dashboard-grid, .topics-grid, .topics-checklist, .saved-configs {\n grid-template-columns: 1fr;\n }\n \n .dashboard-grid { gap: 12px; }\n .dashboard-card { min-height: 140px; padding: 20px 16px; }\n \n \/* FIX: \u1ea8n desktop nav *\/\n .question-nav-inline { display: none; }\n \n \/* FIX: Hi\u1ec7n mobile nav *\/\n .quiz-nav-mobile { display: flex; }\n \n .quiz-header {\n flex-direction: row;\n padding: 10px 12px;\n gap: 8px;\n }\n \n .quiz-info { gap: 8px; }\n \n .quiz-actions { gap: 6px; }\n \n .quiz-actions button {\n padding: 8px 10px;\n font-size: 0.82rem;\n min-height: 40px;\n }\n \n \/* FIX: \u1ea8n text, ch\u1ec9 hi\u1ec7n icon tr\u00ean mobile *\/\n .quiz-actions .btn-text { display: none; }\n \n .question-container {\n padding: 14px;\n margin: 10px;\n }\n \n .question-text {\n font-size: calc(0.92rem * var(--font-size-multiplier));\n line-height: 1.7;\n margin-bottom: 16px;\n }\n \n .options-container { gap: 10px; }\n \n .option {\n padding: 13px 13px;\n min-height: 50px;\n }\n \n .option-text {\n font-size: calc(0.85rem * var(--font-size-multiplier));\n line-height: 1.5;\n }\n \n .answer-explanation {\n margin-top: 16px;\n padding: 12px;\n font-size: calc(0.85rem * var(--font-size-multiplier));\n }\n \n header { padding: 12px 16px; }\n .header-text h1 { font-size: 1rem; }\n .header-text p { font-size: 0.72rem; }\n .logo { width: 42px; height: 42px; }\n .logo i { font-size: 1.8rem; }\n \n .section-title-container { flex-direction: column; align-items: flex-start; }\n .shuffle-toggle { width: 100%; justify-content: center; padding: 12px 20px; min-height: 48px; }\n \n .timer { min-width: 100px; padding: 7px 14px; font-size: 0.92rem; }\n .timer .time-value { min-width: 52px; }\n \n .font-size-controls { gap: 4px; }\n .font-size-btn { width: 32px; height: 32px; font-size: 0.78rem; }\n \n .modal-content { padding: 24px 16px; }\n .modal-content button { min-height: 48px; }\n \n .topic-check-item { padding: 14px 12px; }\n \n .result-container { padding: 30px 16px; }\n .score { font-size: 2.5rem; }\n }\n \n \/* Extra small phones *\/\n @media (max-width: 375px) {\n .quiz-actions button { padding: 7px 8px; font-size: 0.78rem; min-height: 38px; }\n .quiz-header { padding: 8px 10px; }\n .question-container { padding: 12px; margin: 8px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\" id=\"mainContainer\">\n <div class=\"loading-overlay\" id=\"loadingOverlay\">\n <div class=\"loading-spinner\"><\/div>\n <div class=\"loading-text\">\u0110ang t\u1ea3i d\u1eef li\u1ec7u…<\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"loginModal\">\n <div class=\"modal-content\">\n <h2 class=\"modal-title\"><i class=\"fas fa-user-circle\"><\/i> \u0110\u0103ng nh\u1eadp<\/h2>\n <p class=\"modal-text\">\u0110\u0103ng nh\u1eadp \u0111\u1ec3 l\u01b0u ti\u1ebfn \u0111\u1ed9 h\u1ecdc t\u1eadp v\u00e0 theo d\u00f5i k\u1ebft qu\u1ea3 c\u1ee7a b\u1ea1n<\/p>\n <button class=\"google-signin-btn\" id=\"googleSigninBtn\">\n <svg class=\"google-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 48 48\">\n <path fill=\"#FFC107\" d=\"M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z\"\/>\n <path fill=\"#FF3D00\" d=\"M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z\"\/>\n <path fill=\"#4CAF50\" d=\"M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z\"\/>\n <path fill=\"#1976D2\" d=\"M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z\"\/>\n <\/svg>\n \u0110\u0103ng nh\u1eadp v\u1edbi Google\n <\/button>\n <button class=\"home-btn\" id=\"closeLoginBtn\" style=\"width:100%\">\n <i class=\"fas fa-times\"><\/i> \u0110\u00f3ng\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"fontSizeModal\">\n <div class=\"modal-content\" style=\"max-width:450px\">\n <h2 class=\"modal-title\"><i class=\"fas fa-text-height\"><\/i> C\u00e0i \u0111\u1eb7t c\u1ee1 ch\u1eef<\/h2>\n <p class=\"modal-text\">\u0110i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc ch\u1eef khi l\u00e0m b\u00e0i thi<\/p>\n <div class=\"setting-group\" style=\"text-align:left\">\n <label class=\"setting-label\"><i class=\"fas fa-font\"><\/i> K\u00edch th\u01b0\u1edbc ch\u1eef<\/label>\n <div style=\"display:flex;flex-direction:column;gap:10px\">\n <label style=\"display:flex;align-items:center;gap:10px;padding:14px;border:2px solid var(--gray-light);border-radius:var(--radius-sm);cursor:pointer;min-height:52px;touch-action:manipulation\">\n <input type=\"radio\" name=\"fontSize\" value=\"0.85\"> <span>Nh\u1ecf (85%)<\/span>\n <\/label>\n <label style=\"display:flex;align-items:center;gap:10px;padding:14px;border:2px solid var(--gray-light);border-radius:var(--radius-sm);cursor:pointer;min-height:52px;touch-action:manipulation\">\n <input type=\"radio\" name=\"fontSize\" value=\"1\" checked> <span>M\u1eb7c \u0111\u1ecbnh (100%)<\/span>\n <\/label>\n <label style=\"display:flex;align-items:center;gap:10px;padding:14px;border:2px solid var(--gray-light);border-radius:var(--radius-sm);cursor:pointer;min-height:52px;touch-action:manipulation\">\n <input type=\"radio\" name=\"fontSize\" value=\"1.15\"> <span>L\u1edbn (115%)<\/span>\n <\/label>\n <label style=\"display:flex;align-items:center;gap:10px;padding:14px;border:2px solid var(--gray-light);border-radius:var(--radius-sm);cursor:pointer;min-height:52px;touch-action:manipulation\">\n <input type=\"radio\" name=\"fontSize\" value=\"1.3\"> <span>R\u1ea5t l\u1edbn (130%)<\/span>\n <\/label>\n <\/div>\n <\/div>\n <button class=\"submit-btn\" id=\"closeFontSizeBtn\" style=\"width:100%;margin-top:20px\">\n <i class=\"fas fa-check\"><\/i> Xong\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"saveProgressModal\">\n <div class=\"modal-content\">\n <h2 class=\"modal-title\"><i class=\"fas fa-save\"><\/i> L\u01b0u ti\u1ebfn \u0111\u1ed9<\/h2>\n <p class=\"modal-text\">B\u1ea1n c\u00f3 mu\u1ed1n l\u01b0u ti\u1ebfn \u0111\u1ed9 l\u00e0m b\u00e0i \u0111\u1ec3 ti\u1ebfp t\u1ee5c l\u1ea7n sau kh\u00f4ng?<\/p>\n <div style=\"display:flex;gap:10px\">\n <button class=\"submit-btn\" id=\"saveProgressBtn\" style=\"flex:1\"><i class=\"fas fa-check\"><\/i> L\u01b0u<\/button>\n <button class=\"home-btn\" id=\"exitNoSaveBtn\" style=\"flex:1\"><i class=\"fas fa-times\"><\/i> Kh\u00f4ng l\u01b0u<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"resumeProgressModal\">\n <div class=\"modal-content\">\n <h2 class=\"modal-title\"><i class=\"fas fa-play-circle\"><\/i> Ti\u1ebfp t\u1ee5c l\u00e0m b\u00e0i<\/h2>\n <p class=\"modal-text\" id=\"resumeProgressText\"><\/p>\n <div style=\"display:flex;gap:10px\">\n <button class=\"submit-btn\" id=\"resumeProgressBtn\" style=\"flex:1\"><i class=\"fas fa-check\"><\/i> Ti\u1ebfp t\u1ee5c<\/button>\n <button class=\"home-btn\" id=\"startNewQuizBtn\" style=\"flex:1\"><i class=\"fas fa-redo\"><\/i> L\u00e0m m\u1edbi<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"wrongAnswersModal\">\n <div class=\"modal-content\" style=\"max-width:700px\">\n <h2 class=\"modal-title\"><i class=\"fas fa-times-circle\"><\/i> C\u00e2u tr\u1ea3 l\u1eddi sai<\/h2>\n <div class=\"wrong-answers-list\" id=\"wrongAnswersList\"><\/div>\n <button class=\"home-btn\" id=\"closeWrongAnswersBtn\" style=\"width:100%;margin-top:20px\">\n <i class=\"fas fa-times\"><\/i> \u0110\u00f3ng\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"examDetailsModal\">\n <div class=\"modal-content\" style=\"max-width:600px\">\n <h2 class=\"modal-title\"><i class=\"fas fa-info-circle\"><\/i> Chi ti\u1ebft \u0111\u1ec1 thi<\/h2>\n <div id=\"examDetailsContent\" style=\"text-align:left\"><\/div>\n <button class=\"home-btn\" id=\"closeExamDetailsBtn\" style=\"width:100%;margin-top:20px\">\n <i class=\"fas fa-times\"><\/i> \u0110\u00f3ng\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"examSettingsModal\">\n <div class=\"modal-content\" style=\"max-width:500px\">\n <h2 class=\"modal-title\"><i class=\"fas fa-cog\"><\/i> C\u00e0i \u0111\u1eb7t \u0111\u1ec1 thi<\/h2>\n <div style=\"text-align:left\">\n <div class=\"setting-group\">\n <label class=\"setting-label\"><i class=\"fas fa-clock\"><\/i> Th\u1eddi gian thi (ph\u00fat)<\/label>\n <input type=\"number\" class=\"setting-input\" id=\"editExamTime\" min=\"5\" max=\"180\" placeholder=\"Nh\u1eadp th\u1eddi gian (5-180 ph\u00fat)\">\n <small style=\"color:var(--gray);display:block;margin-top:8px\"><i class=\"fas fa-info-circle\"><\/i> \u0110\u1ec1 xu\u1ea5t: 30-90 ph\u00fat | M\u1eb7c \u0111\u1ecbnh: 45 ph\u00fat<\/small>\n <\/div>\n <div class=\"setting-group\">\n <label class=\"setting-label\"><i class=\"fas fa-random\"><\/i> T\u1ef7 l\u1ec7 tr\u00f9ng l\u1eb7p c\u00e2u h\u1ecfi (%)<\/label>\n <input type=\"number\" class=\"setting-input\" id=\"editExamOverlap\" min=\"0\" max=\"100\" placeholder=\"Nh\u1eadp t\u1ef7 l\u1ec7 (0-100%)\">\n <small style=\"color:var(--gray);display:block;margin-top:8px\"><i class=\"fas fa-info-circle\"><\/i> <strong>0%<\/strong> = Kh\u00f4ng tr\u00f9ng | <strong>100%<\/strong> = To\u00e0n b\u1ed9 gi\u1ed1ng nhau | M\u1eb7c \u0111\u1ecbnh: 20%<\/small>\n <\/div>\n <\/div>\n <div style=\"display:flex;gap:10px;margin-top:20px\">\n <button class=\"submit-btn\" id=\"saveExamSettingsBtn\" style=\"flex:1\"><i class=\"fas fa-save\"><\/i> L\u01b0u<\/button>\n <button id=\"resetExamSettingsBtn\" style=\"flex:1;background:linear-gradient(135deg,#ff9800,#ff6f00);display:none\"><i class=\"fas fa-undo\"><\/i> Kh\u00f4i ph\u1ee5c<\/button>\n <button class=\"home-btn\" id=\"closeExamSettingsBtn\" style=\"flex:1\"><i class=\"fas fa-times\"><\/i> H\u1ee7y<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"practiceProgressModal\">\n <div class=\"modal-content\">\n <h2 class=\"modal-title\"><i class=\"fas fa-save\"><\/i> L\u01b0u ti\u1ebfn \u0111\u1ed9 \u00f4n t\u1eadp<\/h2>\n <p class=\"modal-text\" id=\"practiceProgressText\">B\u1ea1n c\u00f3 mu\u1ed1n l\u01b0u ti\u1ebfn \u0111\u1ed9 \u00f4n t\u1eadp \u0111\u1ec3 ti\u1ebfp t\u1ee5c l\u1ea7n sau kh\u00f4ng?<\/p>\n <div style=\"display:flex;gap:10px\">\n <button class=\"submit-btn\" id=\"savePracticeBtn\" style=\"flex:1\"><i class=\"fas fa-check\"><\/i> L\u01b0u<\/button>\n <button class=\"home-btn\" id=\"exitPracticeNoSaveBtn\" style=\"flex:1\"><i class=\"fas fa-times\"><\/i> Kh\u00f4ng l\u01b0u<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <header id=\"mainHeader\">\n <div class=\"logo-container\">\n <div class=\"logo\"><i class=\"fas fa-graduation-cap\"><\/i><\/div>\n <div class=\"header-text\">\n <h1>H\u1ec6 TH\u1ed0NG \u00d4N THI AGRIBANK – NGOC ANH<\/h1>\n <p>N\u1ec1n t\u1ea3ng luy\u1ec7n thi tr\u1ef1c tuy\u1ebfn chuy\u00ean nghi\u1ec7p<\/p>\n <\/div>\n <\/div>\n <div class=\"user-info\" id=\"userInfo\">\n <button id=\"fontSizeHeaderBtn\" style=\"padding:8px 14px;font-size:0.88rem\">\n <i class=\"fas fa-text-height\"><\/i>\n <\/button>\n <button id=\"loginBtn\">\n <i class=\"fas fa-sign-in-alt\"><\/i> \u0110\u0103ng nh\u1eadp\n <\/button>\n <\/div>\n <\/header>\n \n <div class=\"main-content\">\n <div class=\"content-area\" id=\"contentArea\">\n \n <div class=\"content-card\" id=\"dashboard\">\n <div class=\"section-title-container\">\n <h2 class=\"section-title\"><i class=\"fas fa-th-large\"><\/i> B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n<\/h2>\n <div class=\"shuffle-toggle\" id=\"shuffleToggleContainer\">\n <input type=\"checkbox\" id=\"shuffleAnswersToggle\">\n <label for=\"shuffleAnswersToggle\"><i class=\"fas fa-random\"><\/i> \u0110\u1ea3o \u0111\u00e1p \u00e1n<\/label>\n <\/div>\n <\/div>\n \n <div style=\"margin-bottom:20px;padding:15px;background:var(--light);border-radius:var(--radius-md);text-align:center\">\n <p style=\"margin-bottom:10px;color:var(--gray)\"><strong>Tr\u1ea1ng th\u00e1i:<\/strong> <span id=\"dataStatus\">\u0110ang t\u1ea3i…<\/span><\/p>\n <div style=\"display:flex;gap:10px;justify-content:center;flex-wrap:wrap\">\n <button id=\"reloadDataBtn\" style=\"padding:10px 18px;font-size:0.88rem\"><i class=\"fas fa-sync-alt\"><\/i> T\u1ea3i l\u1ea1i d\u1eef li\u1ec7u<\/button>\n <button id=\"clearCacheBtn\" style=\"padding:10px 18px;font-size:0.88rem;background:linear-gradient(135deg,#ff9800,#ff6f00)\"><i class=\"fas fa-trash-alt\"><\/i> X\u00f3a cache<\/button>\n <\/div>\n <\/div>\n \n <div class=\"dashboard-grid\">\n <div class=\"dashboard-card\" id=\"searchKeyword\">\n <div class=\"card-icon\"><i class=\"fas fa-search\"><\/i><\/div>\n <div class=\"card-title\">T\u00ecm ki\u1ebfm t\u1eeb kh\u00f3a<\/div>\n <div class=\"card-description\">T\u00ecm c\u00e2u h\u1ecfi v\u00e0 xem \u0111\u00e1p \u00e1n<\/div>\n <\/div>\n <div class=\"dashboard-card\" id=\"practiceByTopic\">\n <div class=\"card-icon\"><i class=\"fas fa-book-reader\"><\/i><\/div>\n <div class=\"card-title\">\u00d4n t\u1eadp theo ch\u1ee7 \u0111\u1ec1<\/div>\n <div class=\"card-description\">Luy\u1ec7n t\u1eadp v\u00e0 bi\u1ebft ngay \u0111\u00e1p \u00e1n<\/div>\n <\/div>\n <div class=\"dashboard-card\" id=\"customExam\">\n <div class=\"card-icon\"><i class=\"fas fa-sliders-h\"><\/i><\/div>\n <div class=\"card-title\">T\u1ea1o \u0111\u1ec1 t\u00f9y ch\u1ec9nh<\/div>\n <div class=\"card-description\">T\u1ea1o \u0111\u1ec1 theo \u00fd mu\u1ed1n<\/div>\n <\/div>\n <div class=\"dashboard-card\" id=\"savedExams\">\n <div class=\"card-icon\"><i class=\"fas fa-bookmark\"><\/i><\/div>\n <div class=\"card-title\">\u0110\u1ec1 \u0111\u00e3 l\u01b0u<\/div>\n <div class=\"card-description\">C\u00e1c \u0111\u1ec1 thi \u0111\u00e3 t\u1ea1o<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"content-card\" id=\"searchSection\" style=\"display:none\">\n <div class=\"section-header\">\n <h2 class=\"section-title\"><i class=\"fas fa-search\"><\/i> T\u00ecm ki\u1ebfm t\u1eeb kh\u00f3a<\/h2>\n <button class=\"home-btn\" id=\"searchHomeBtn\"><i class=\"fas fa-home\"><\/i> Trang ch\u1ee7<\/button>\n <\/div>\n <div style=\"margin-bottom:30px\">\n <div style=\"display:flex;gap:10px;margin-bottom:20px\">\n <input type=\"text\" id=\"searchInput\" class=\"setting-input\" placeholder=\"Nh\u1eadp t\u1eeb kh\u00f3a c\u1ea7n t\u00ecm...\" style=\"flex:1\">\n <button id=\"searchBtn\" style=\"padding:12px 20px\"><i class=\"fas fa-search\"><\/i> T\u00ecm<\/button>\n <\/div>\n <div style=\"padding:12px;background:#e3f2fd;border-radius:var(--radius-sm);border-left:4px solid #1976d2\">\n <i class=\"fas fa-info-circle\"><\/i> <strong>H\u01b0\u1edbng d\u1eabn:<\/strong> Nh\u1eadp t\u1eeb kh\u00f3a \u0111\u1ec3 t\u00ecm c\u00e1c c\u00e2u h\u1ecfi c\u00f3 ch\u1ee9a t\u1eeb \u0111\u00f3.\n <\/div>\n <\/div>\n <div id=\"searchResults\"><\/div>\n <\/div>\n \n \n <div class=\"content-card\" id=\"topicSelection\" style=\"display:none\">\n <div class=\"section-header\">\n <h2 class=\"section-title\"><i class=\"fas fa-list-ul\"><\/i> \u00d4n t\u1eadp theo ch\u1ee7 \u0111\u1ec1<\/h2>\n <button class=\"home-btn\" id=\"topicHomeBtn\"><i class=\"fas fa-home\"><\/i> Trang ch\u1ee7<\/button>\n <\/div>\n <div class=\"search-box\">\n <input type=\"text\" id=\"topicSearchInput\" placeholder=\"\ud83d\udd0d T\u00ecm ki\u1ebfm ch\u1ee7 \u0111\u1ec1 theo t\u00ean...\">\n <\/div>\n <div class=\"topics-grid\" id=\"topicsGrid\"><\/div>\n <\/div>\n \n \n <div class=\"content-card\" id=\"customExamSection\" style=\"display:none\">\n <div class=\"section-header\">\n <h2 class=\"section-title\"><i class=\"fas fa-sliders-h\"><\/i> T\u1ea1o \u0111\u1ec1 thi t\u00f9y ch\u1ec9nh<\/h2>\n <button class=\"home-btn\" id=\"customHomeBtn\"><i class=\"fas fa-home\"><\/i> Trang ch\u1ee7<\/button>\n <\/div>\n <div style=\"padding:30px;background:var(--light);border-radius:var(--radius-lg)\">\n <div class=\"setting-group\">\n <label class=\"setting-label\">T\u00ean b\u1ed9 \u0111\u1ec1<\/label>\n <input type=\"text\" class=\"setting-input\" id=\"configName\" placeholder=\"V\u00ed d\u1ee5: \u0110\u1ec1 \u00f4n t\u1eadp tu\u1ea7n 1\">\n <\/div>\n <div class=\"remaining-questions\">\n <div style=\"opacity:0.95;margin-bottom:10px\">S\u1ed1 c\u00e2u h\u1ecfi \u0111\u00e3 ch\u1ecdn<\/div>\n <div class=\"remaining-questions-value\" id=\"selectedQuestionsCount\">0<\/div>\n <div style=\"opacity:0.95;margin-top:10px\">\n <div style=\"margin-bottom:8px\">T\u1ed5ng c\u00e2u c\u00f3 s\u1eb5n: <strong><span id=\"totalQuestionsDisplay\">0<\/span><\/strong><\/div>\n <div style=\"color:#ffeb3b\">S\u1ed1 c\u00e2u c\u00f2n c\u00f3 th\u1ec3 ch\u1ecdn th\u00eam: <strong><span id=\"remainingQuestionsCount\">0<\/span><\/strong><\/div>\n <\/div>\n <\/div>\n <div class=\"setting-group\">\n <label class=\"setting-label\">Ch\u1ecdn ch\u1ee7 \u0111\u1ec1 v\u00e0 s\u1ed1 c\u00e2u h\u1ecfi<\/label>\n <div class=\"topics-checklist\" id=\"topicsChecklist\"><\/div>\n <\/div>\n <div class=\"setting-group\">\n <label class=\"setting-label\"><i class=\"fas fa-clock\"><\/i> Th\u1eddi gian thi (ph\u00fat)<\/label>\n <input type=\"number\" class=\"setting-input\" id=\"customExamTime\" value=\"45\" min=\"5\" max=\"180\">\n <\/div>\n <div class=\"setting-group\">\n <label class=\"setting-label\"><i class=\"fas fa-random\"><\/i> T\u1ef7 l\u1ec7 tr\u00f9ng l\u1eb7p c\u00e2u h\u1ecfi gi\u1eefa c\u00e1c l\u1ea7n thi (%)<\/label>\n <input type=\"number\" class=\"setting-input\" id=\"customOverlapPercent\" value=\"20\" min=\"0\" max=\"100\">\n <small style=\"color:var(--gray);display:block;margin-top:8px\"><i class=\"fas fa-info-circle\"><\/i> <strong>0%<\/strong> = Kh\u00f4ng tr\u00f9ng l\u1eb7p | <strong>100%<\/strong> = To\u00e0n b\u1ed9 gi\u1ed1ng nhau<\/small>\n <\/div>\n <div style=\"display:flex;gap:15px;margin-top:25px;flex-wrap:wrap\">\n <button id=\"saveConfigBtn\" class=\"submit-btn\" style=\"flex:1;min-width:200px\"><i class=\"fas fa-save\"><\/i> L\u01b0u c\u1ea5u h\u00ecnh<\/button>\n <button id=\"startCustomExamBtn\" class=\"submit-btn\" style=\"flex:1;min-width:200px\"><i class=\"fas fa-play-circle\"><\/i> B\u1eaft \u0111\u1ea7u thi<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"content-card\" id=\"savedExamsSection\" style=\"display:none\">\n <div class=\"section-header\">\n <h2 class=\"section-title\"><i class=\"fas fa-bookmark\"><\/i> \u0110\u1ec1 thi \u0111\u00e3 l\u01b0u<\/h2>\n <button class=\"home-btn\" id=\"savedHomeBtn\"><i class=\"fas fa-home\"><\/i> Trang ch\u1ee7<\/button>\n <\/div>\n <div style=\"margin-bottom:20px;padding:15px;background:linear-gradient(135deg,#fff9f0 0%,#ffffff 100%);border-radius:var(--radius-md);border-left:4px solid #ff9800\">\n <div style=\"display:flex;align-items:center;gap:12px;margin-bottom:10px\">\n <i class=\"fas fa-info-circle\" style=\"color:#ff9800;font-size:1.5rem\"><\/i>\n <strong style=\"color:#e65100;font-size:1.1rem\">H\u01b0\u1edbng d\u1eabn<\/strong>\n <\/div>\n <div style=\"color:var(--gray);line-height:1.8\">\n <div style=\"margin-bottom:8px\">\ud83d\udccb <strong>\u0110\u1ec1 h\u1ec7 th\u1ed1ng:<\/strong> C\u00e1c b\u1ed9 \u0111\u1ec1 \u0111\u01b0\u1ee3c t\u1ea1o s\u1eb5n b\u1edfi Agribank<\/div>\n <div style=\"margin-bottom:8px\">\ud83d\udc64 <strong>\u0110\u1ec1 c\u1ee7a t\u00f4i:<\/strong> C\u00e1c b\u1ed9 \u0111\u1ec1 b\u1ea1n t\u1ef1 t\u1ea1o<\/div>\n <div>\ud83d\udca1 <strong>L\u01b0u \u00fd:<\/strong> C\u00e0i \u0111\u1eb7t c\u1ee7a \u0111\u1ec1 h\u1ec7 th\u1ed1ng \u0111\u01b0\u1ee3c l\u01b0u ri\u00eang<\/div>\n <\/div>\n <\/div>\n <div class=\"search-box\">\n <input type=\"text\" id=\"savedExamSearchInput\" placeholder=\"\ud83d\udd0d T\u00ecm ki\u1ebfm \u0111\u1ec1 thi theo t\u00ean...\">\n <\/div>\n <div class=\"saved-configs\" id=\"savedConfigsList\"><\/div>\n <\/div>\n \n \n <div class=\"quiz-container\" id=\"quizContainer\">\n <div class=\"quiz-header\">\n <div class=\"quiz-info\">\n <div class=\"timer\" id=\"timer\">\n <i class=\"fas fa-clock\"><\/i>\n <span class=\"time-value\" id=\"timeDisplay\">45:00<\/span>\n <\/div>\n <div class=\"font-size-controls\">\n <button class=\"font-size-btn\" id=\"fontSmBtn\" title=\"Ch\u1eef nh\u1ecf\">A-<\/button>\n <button class=\"font-size-btn active\" id=\"fontMdBtn\" title=\"Ch\u1eef m\u1eb7c \u0111\u1ecbnh\">A<\/button>\n <button class=\"font-size-btn\" id=\"fontLgBtn\" title=\"Ch\u1eef l\u1edbn\">A+<\/button>\n <\/div>\n <\/div>\n <div class=\"quiz-actions\">\n <button class=\"home-btn\" id=\"exitQuizBtn\">\n <i class=\"fas fa-home\"><\/i> <span class=\"btn-text\">Tho\u00e1t<\/span>\n <\/button>\n <button id=\"showAnswerBtn\" class=\"show-answer-btn\" style=\"display:none\">\n <i class=\"fas fa-eye\"><\/i> <span class=\"btn-text\">\u0110\u00e1p \u00e1n<\/span>\n <\/button>\n <button id=\"submitQuizBtn\" class=\"submit-btn\">\n <i class=\"fas fa-paper-plane\"><\/i> <span class=\"btn-text\">N\u1ed9p<\/span>\n <\/button>\n <button id=\"toggleFullscreenBtn\" class=\"fullscreen-btn\">\n <i class=\"fas fa-expand\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"question-container\" id=\"questionContainer\">\n <div class=\"question-header\">\n <div class=\"question-number\" id=\"questionNumber\">\n <i class=\"fas fa-question-circle\"><\/i> C\u00e2u 1\n <\/div>\n \n <div class=\"question-nav-inline\">\n <button id=\"prevBtnInline\" disabled>\n <i class=\"fas fa-chevron-left\"><\/i> Tr\u01b0\u1edbc\n <\/button>\n <button id=\"nextBtnInline\">\n Sau <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <div class=\"question-text\" id=\"questionText\"><\/div>\n <div class=\"options-container\" id=\"optionsContainer\"><\/div>\n <div id=\"answerExplanation\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"content-card result-container\" id=\"resultContainer\">\n <div class=\"result-icon\" id=\"resultIcon\">\ud83c\udf89<\/div>\n <h2 style=\"font-weight:700;margin-bottom:10px\">Ch\u00fac m\u1eebng b\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh!<\/h2>\n <div class=\"score\" id=\"score\">\u0110i\u1ec3m: 0\/0<\/div>\n <div class=\"score-detail\" id=\"scoreDetail\"><\/div>\n <div id=\"userResult\" style=\"margin:20px 0;color:var(--gray);font-size:1rem\"><\/div>\n <div class=\"result-actions\">\n <button id=\"goHomeResultBtn\"><i class=\"fas fa-home\"><\/i> V\u1ec1 trang ch\u1ee7<\/button>\n <button id=\"retryQuizBtn\"><i class=\"fas fa-redo\"><\/i> L\u00e0m l\u1ea1i<\/button>\n <button id=\"showWrongAnswersBtn\" style=\"background:linear-gradient(135deg,var(--danger),#d32f2f)\">\n <i class=\"fas fa-times-circle\"><\/i> Xem c\u00e2u sai\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"quiz-nav-mobile\" id=\"quizNavMobile\">\n <button class=\"nav-btn btn-prev\" id=\"prevBtnMobile\" disabled>\n <i class=\"fas fa-chevron-left\"><\/i> Tr\u01b0\u1edbc\n <\/button>\n <div class=\"nav-center\" id=\"navCenter\">1 \/ 1<\/div>\n <button class=\"nav-btn btn-next\" id=\"nextBtnMobile\">\n Sau <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n 'use strict';\n \n console.log('\ud83d\ude80 Kh\u1edfi \u0111\u1ed9ng \u1ee9ng d\u1ee5ng...');\n \n const API_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbwsRyrWtS4nsUBunCx-70H6wkYWBMH2rgesyopAx2ipMLacsXSRfYwOPOs_Ldjl7OC4\/exec';\n const CACHE_KEY = 'agribank_data_cache';\n const CACHE_VERSION_KEY = 'agribank_cache_version';\n const CACHE_DURATION = 24 * 60 * 60 * 1000;\n const DEFAULT_EXAM_TIME = 45;\n const DEFAULT_OVERLAP_PERCENT = 20;\n \n let topics = [];\n let predefinedExams = [];\n let currentTopic = null;\n let currentQuestions = [];\n let currentQuestionIndex = 0;\n let userAnswers = [];\n let timerInterval = null;\n let timeLeft = 2700;\n let topicQuestionCounts = {};\n let savedConfigs = [];\n let currentUser = null;\n let quizMode = 'practice';\n let showAnswersEnabled = false;\n let currentExamId = null;\n let savedProgress = null;\n let pendingQuizData = null;\n let isFullscreen = false;\n let shuffleAnswersEnabled = false;\n let questionShuffleMap = {};\n let currentPracticeId = null;\n let currentEditingExamId = null;\n let systemExamSettings = {};\n \n \/\/ ================================================================\n \/\/ FIX CRITICAL: addTapListener ho\u00e0n to\u00e0n m\u1edbi\n \/\/ D\u00f9ng pointer events thay v\u00ec mix touch + click \u0111\u1ec3 tr\u00e1nh double fire\n \/\/ ================================================================\n function addTapListener(element, handler) {\n if (!element) return;\n \n \/\/ D\u00f9ng pointerup + pointermove tracking - \u0111\u01a1n gi\u1ea3n nh\u1ea5t, \u00edt bug nh\u1ea5t\n let pointerDown = false;\n let moved = false;\n let startX = 0, startY = 0;\n \n element.addEventListener('pointerdown', function(e) {\n pointerDown = true;\n moved = false;\n startX = e.clientX;\n startY = e.clientY;\n }, { passive: true });\n \n element.addEventListener('pointermove', function(e) {\n if (!pointerDown) return;\n const dx = Math.abs(e.clientX - startX);\n const dy = Math.abs(e.clientY - startY);\n if (dx > 8 || dy > 8) moved = true;\n }, { passive: true });\n \n element.addEventListener('pointerup', function(e) {\n if (pointerDown && !moved) {\n e.preventDefault();\n handler.call(this, e);\n }\n pointerDown = false;\n moved = false;\n });\n \n element.addEventListener('pointercancel', function() {\n pointerDown = false;\n moved = false;\n }, { passive: true });\n }\n \n \/\/ Elements\n const dashboard = document.getElementById('dashboard');\n const searchSection = document.getElementById('searchSection');\n const topicSelection = document.getElementById('topicSelection');\n const customExamSection = document.getElementById('customExamSection');\n const savedExamsSection = document.getElementById('savedExamsSection');\n const quizContainer = document.getElementById('quizContainer');\n const resultContainer = document.getElementById('resultContainer');\n const loadingOverlay = document.getElementById('loadingOverlay');\n const loginModal = document.getElementById('loginModal');\n const fontSizeModal = document.getElementById('fontSizeModal');\n const saveProgressModal = document.getElementById('saveProgressModal');\n const resumeProgressModal = document.getElementById('resumeProgressModal');\n const wrongAnswersModal = document.getElementById('wrongAnswersModal');\n const mainContainer = document.getElementById('mainContainer');\n const mainHeader = document.getElementById('mainHeader');\n const contentArea = document.getElementById('contentArea');\n const examDetailsModal = document.getElementById('examDetailsModal');\n const examSettingsModal = document.getElementById('examSettingsModal');\n const quizNavMobile = document.getElementById('quizNavMobile');\n const practiceProgressModal = document.getElementById('practiceProgressModal');\n \n function isMobile() {\n return window.innerWidth <= 768 || \/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(navigator.userAgent);\n }\n \n function showLoginModal() { loginModal.classList.add('show'); }\n function closeLoginModal() { loginModal.classList.remove('show'); }\n function showFontSizeModal() { fontSizeModal.classList.add('show'); }\n function closeFontSizeModal() { fontSizeModal.classList.remove('show'); }\n \n function changeFontSize(multiplier) {\n document.documentElement.style.setProperty('--font-size-multiplier', multiplier);\n localStorage.setItem('agribank_font_size', multiplier);\n document.querySelectorAll('.font-size-btn').forEach(btn => {\n btn.classList.remove('active');\n const t = btn.textContent.trim();\n if ((t === 'A-' && multiplier === 0.85) ||\n (t === 'A' && multiplier === 1) ||\n (t === 'A+' && multiplier === 1.15)) {\n btn.classList.add('active');\n }\n });\n }\n \n function loadFontSize() {\n const saved = localStorage.getItem('agribank_font_size');\n if (saved) {\n const m = parseFloat(saved);\n document.documentElement.style.setProperty('--font-size-multiplier', m);\n document.querySelectorAll('input[name=\"fontSize\"]').forEach(r => {\n if (parseFloat(r.value) === m) r.checked = true;\n });\n changeFontSize(m);\n }\n }\n \n function toggleShuffleAnswers() {\n shuffleAnswersEnabled = document.getElementById('shuffleAnswersToggle').checked;\n localStorage.setItem('agribank_shuffle_answers', shuffleAnswersEnabled);\n if (quizContainer.style.display !== 'none') {\n questionShuffleMap = {};\n displayQuestion(currentQuestionIndex);\n }\n }\n \n function loadShuffleSettings() {\n const saved = localStorage.getItem('agribank_shuffle_answers');\n if (saved !== null) {\n shuffleAnswersEnabled = saved === 'true';\n const cb = document.getElementById('shuffleAnswersToggle');\n if (cb) cb.checked = shuffleAnswersEnabled;\n }\n }\n \n function hasReferenceAnswer(question) {\n const all = [question.q, question.a, question.b, question.c, question.d].join(' ').toLowerCase();\n return \/c\u1ea3\\s*\\d+\\s*v\u00e0\\s*\\d+|c\u1ea3\\s*[a-d]\\s*v\u00e0\\s*[a-d]|\u0111\u1ec1u\\s*\u0111\u00fang|\u0111\u1ec1u\\s*sai|t\u1ea5t\\s*c\u1ea3\\s*\u0111\u1ec1u|kh\u00f4ng\\s*c\u00e2u\\s*n\u00e0o\\s*\u0111\u00fang\/i.test(all);\n }\n \n function shuffleAnswers(question, questionIndex) {\n if (!shuffleAnswersEnabled || hasReferenceAnswer(question)) {\n return { shuffled: question, mapping: [0,1,2,3] };\n }\n if (questionShuffleMap[questionIndex]) return questionShuffleMap[questionIndex];\n const answers = ['a','b','c','d'].map((k,i) => ({ key: k, text: question[k], originalIndex: i }));\n for (let i = answers.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [answers[i], answers[j]] = [answers[j], answers[i]];\n }\n const shuffledQuestion = { ...question };\n answers.forEach((a,i) => { shuffledQuestion['abcd'[i]] = a.text; });\n const mapping = answers.map(a => a.originalIndex);\n shuffledQuestion.correct = mapping.indexOf(question.correct - 1) + 1;\n const result = { shuffled: shuffledQuestion, mapping };\n questionShuffleMap[questionIndex] = result;\n return result;\n }\n \n function toggleFullscreen() {\n isFullscreen ? exitFullscreenMode() : enterFullscreenMode();\n }\n \n function enterFullscreenMode() {\n if (isMobile()) {\n mainContainer.classList.add('fullscreen-active');\n document.body.classList.add('fullscreen-mode');\n isFullscreen = true;\n updateFullscreenButton(true);\n } else {\n const elem = document.documentElement;\n (elem.requestFullscreen ? elem.requestFullscreen() : Promise.reject())\n .then(() => { isFullscreen = true; updateFullscreenButton(true); })\n .catch(() => {\n mainContainer.classList.add('fullscreen-active');\n document.body.classList.add('fullscreen-mode');\n isFullscreen = true;\n updateFullscreenButton(true);\n });\n }\n }\n \n function exitFullscreenMode() {\n mainContainer.classList.remove('fullscreen-active');\n document.body.classList.remove('fullscreen-mode');\n if (!isMobile() && document.fullscreenElement && document.exitFullscreen) {\n document.exitFullscreen().catch(() => {});\n }\n isFullscreen = false;\n updateFullscreenButton(false);\n }\n \n function updateFullscreenButton(isFs) {\n const btn = document.getElementById('toggleFullscreenBtn');\n if (!btn) return;\n const icon = btn.querySelector('i');\n if (isFs) { icon.className = 'fas fa-compress'; btn.classList.add('active'); }\n else { icon.className = 'fas fa-expand'; btn.classList.remove('active'); }\n }\n \n if (!isMobile()) {\n document.addEventListener('fullscreenchange', () => {\n if (!document.fullscreenElement) {\n mainContainer.classList.remove('fullscreen-active');\n document.body.classList.remove('fullscreen-mode');\n isFullscreen = false;\n updateFullscreenButton(false);\n }\n });\n }\n \n \/\/ FIX: C\u1eadp nh\u1eadt nav center text\n function updateNavCenter() {\n const nav = document.getElementById('navCenter');\n if (nav && currentQuestions.length > 0) {\n nav.textContent = `${currentQuestionIndex + 1} \/ ${currentQuestions.length}`;\n }\n }\n \n function searchQuestions() {\n const keyword = document.getElementById('searchInput').value.trim().toLowerCase();\n const resultsDiv = document.getElementById('searchResults');\n if (!keyword) { resultsDiv.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--gray)\">Vui l\u00f2ng nh\u1eadp t\u1eeb kh\u00f3a<\/p>'; return; }\n resultsDiv.innerHTML = '<div style=\"text-align:center;padding:20px\"><i class=\"fas fa-spinner fa-spin\" style=\"font-size:2rem;color:var(--primary)\"><\/i><\/div>';\n setTimeout(() => {\n const results = [], labels = ['A','B','C','D'], keys = ['a','b','c','d'];\n topics.forEach(topic => {\n topic.questions.forEach(q => {\n if (q.q.toLowerCase().includes(keyword)) {\n results.push({ topic: topic.name, question: q.q, answer: `${labels[q.correct-1]}. ${q[keys[q.correct-1]]}` });\n }\n });\n });\n if (results.length === 0) {\n resultsDiv.innerHTML = `<div style=\"text-align:center;padding:60px 20px\"><i class=\"fas fa-search\" style=\"font-size:4rem;color:var(--gray-light);margin-bottom:20px\"><\/i><h3 style=\"color:var(--gray)\">Kh\u00f4ng t\u00ecm th\u1ea5y k\u1ebft qu\u1ea3<\/h3><\/div>`;\n } else {\n let html = `<div style=\"margin-bottom:20px;padding:15px;background:#e8f5e9;border-radius:var(--radius-md);border-left:4px solid var(--success)\"><strong>T\u00ecm th\u1ea5y ${results.length} c\u00e2u h\u1ecfi<\/strong><\/div>`;\n results.forEach((r,i) => {\n const hq = r.question.replace(new RegExp(keyword,'gi'), m => `<span class=\"keyword-highlight\">${m}<\/span>`);\n html += `<div class=\"search-result-item\"><div class=\"search-result-topic\"><i class=\"fas fa-book\"><\/i> ${r.topic}<\/div><div class=\"search-result-question\"><strong>C\u00e2u ${i+1}:<\/strong> ${hq}<\/div><div class=\"search-result-answer\"><i class=\"fas fa-check-circle\"><\/i> <strong>\u0110\u00e1p \u00e1n:<\/strong> ${r.answer}<\/div><\/div>`;\n });\n resultsDiv.innerHTML = html;\n }\n }, 300);\n }\n \n function signInWithGoogle() {\n const email = prompt('Nh\u1eadp email c\u1ee7a b\u1ea1n:');\n if (email) {\n currentUser = { email, name: email.split('@')[0], loginTime: new Date().toISOString() };\n localStorage.setItem('agribank_user', JSON.stringify(currentUser));\n updateUserUI();\n closeLoginModal();\n loadUserConfigs();\n alert(`\u0110\u0103ng nh\u1eadp th\u00e0nh c\u00f4ng!\\nXin ch\u00e0o ${currentUser.name}!`);\n }\n }\n \n function updateUserUI() {\n const userInfo = document.getElementById('userInfo');\n const fontBtnHtml = `<button id=\"fontSizeHeaderBtn\" style=\"padding:8px 14px;font-size:0.88rem\"><i class=\"fas fa-text-height\"><\/i><\/button>`;\n if (currentUser) {\n userInfo.innerHTML = `${fontBtnHtml}<button id=\"signOutBtn\" style=\"padding:8px 14px;font-size:0.88rem\"><i class=\"fas fa-sign-out-alt\"><\/i> \u0110\u0103ng xu\u1ea5t<\/button>`;\n addTapListener(document.getElementById('signOutBtn'), signOut);\n } else {\n userInfo.innerHTML = `${fontBtnHtml}<button id=\"loginBtn\"><i class=\"fas fa-sign-in-alt\"><\/i> \u0110\u0103ng nh\u1eadp<\/button>`;\n addTapListener(document.getElementById('loginBtn'), showLoginModal);\n }\n addTapListener(document.getElementById('fontSizeHeaderBtn'), showFontSizeModal);\n }\n \n function signOut() {\n if (confirm('B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n \u0111\u0103ng xu\u1ea5t?')) {\n currentUser = null;\n localStorage.removeItem('agribank_user');\n updateUserUI();\n savedConfigs = [];\n goHome();\n }\n }\n \n function checkLogin() {\n const saved = localStorage.getItem('agribank_user');\n if (saved) { currentUser = JSON.parse(saved); updateUserUI(); loadUserConfigs(); }\n loadSystemExamSettings();\n }\n \n function getUserConfigKey() { return currentUser ? `agribank_configs_${currentUser.email}` : 'agribank_configs_guest'; }\n function loadUserConfigs() { const s = localStorage.getItem(getUserConfigKey()); savedConfigs = s ? JSON.parse(s) : []; }\n function saveUserConfigs() { localStorage.setItem(getUserConfigKey(), JSON.stringify(savedConfigs)); }\n function loadSystemExamSettings() { const s = localStorage.getItem('agribank_system_exam_settings'); systemExamSettings = s ? JSON.parse(s) : {}; }\n function saveSystemExamSettings() { localStorage.setItem('agribank_system_exam_settings', JSON.stringify(systemExamSettings)); }\n \n function getExamSettings(config) {\n if (config.isPredefined && systemExamSettings[config.id]) {\n return { time: systemExamSettings[config.id].time || config.time || DEFAULT_EXAM_TIME, overlapPercent: systemExamSettings[config.id].overlapPercent || config.overlapPercent || DEFAULT_OVERLAP_PERCENT };\n }\n return { time: config.time || DEFAULT_EXAM_TIME, overlapPercent: config.overlapPercent || DEFAULT_OVERLAP_PERCENT };\n }\n \n function getProgressKey() {\n if (quizMode === 'exam' && currentExamId) return `progress_exam_${currentExamId}`;\n if (quizMode === 'practice' && currentPracticeId) return `progress_practice_${currentPracticeId}`;\n return null;\n }\n \n function saveProgress() {\n const key = getProgressKey();\n if (!key) return;\n localStorage.setItem(key, JSON.stringify({\n examId: currentExamId, practiceId: currentPracticeId, topic: currentTopic,\n questions: currentQuestions, currentIndex: currentQuestionIndex, answers: userAnswers,\n timeLeft, mode: quizMode, shuffleMap: questionShuffleMap, savedAt: new Date().toISOString()\n }));\n }\n \n function loadProgress() {\n const key = getProgressKey();\n if (!key) return null;\n const s = localStorage.getItem(key);\n return s ? JSON.parse(s) : null;\n }\n \n function clearProgress() { const key = getProgressKey(); if (key) localStorage.removeItem(key); }\n \n function confirmExit() {\n if (quizMode === 'practice') { practiceProgressModal.classList.add('show'); }\n else if (quizMode === 'exam' && currentExamId) { saveProgressModal.classList.add('show'); }\n else { exitFullscreenMode(); showHeader(); goHome(); }\n }\n \n function saveProgressAndExit() { saveProgress(); saveProgressModal.classList.remove('show'); exitFullscreenMode(); showHeader(); goHome(); alert('\u2705 \u0110\u00e3 l\u01b0u ti\u1ebfn \u0111\u1ed9 thi!'); }\n function exitWithoutSaving() { clearProgress(); saveProgressModal.classList.remove('show'); exitFullscreenMode(); showHeader(); goHome(); }\n function savePracticeProgressAndExit() { saveProgress(); practiceProgressModal.classList.remove('show'); exitFullscreenMode(); showHeader(); goHome(); alert('\u2705 \u0110\u00e3 l\u01b0u ti\u1ebfn \u0111\u1ed9 \u00f4n t\u1eadp!'); }\n function exitPracticeWithoutSaving() { clearProgress(); practiceProgressModal.classList.remove('show'); exitFullscreenMode(); showHeader(); goHome(); }\n \n function checkForSavedProgress(topicIndex, questions, time, mode, rangeStart, rangeEnd) {\n if (mode === 'exam') { currentExamId = topicIndex; currentPracticeId = null; }\n else { currentPracticeId = rangeStart != null ? `topic_${topicIndex}_${rangeStart}_${rangeEnd}` : `topic_${topicIndex}_all`; currentExamId = null; }\n const progress = loadProgress();\n if (progress && progress.questions.length > 0) {\n const diffMs = new Date() - new Date(progress.savedAt);\n const diffMins = Math.floor(diffMs \/ 60000);\n const diffHours = Math.floor(diffMins \/ 60);\n const timeText = diffHours > 0 ? `${diffHours}h ${diffMins % 60}p tr\u01b0\u1edbc` : `${diffMins}p tr\u01b0\u1edbc`;\n document.getElementById('resumeProgressText').innerHTML = `L\u1ea7n tr\u01b0\u1edbc b\u1ea1n \u0111ang \u1edf <strong>c\u00e2u ${progress.currentIndex + 1}\/${progress.questions.length}<\/strong><br><small style=\"color:var(--gray)\">L\u01b0u ${timeText}<\/small><br><br>B\u1ea1n c\u00f3 mu\u1ed1n ti\u1ebfp t\u1ee5c kh\u00f4ng?`;\n const topic = mode === 'exam' ? { name: topics[topicIndex]?.name || \"\u0110\u1ec1 thi\", icon: \"\ud83d\udccb\" } : topics[topicIndex];\n pendingQuizData = { topic, questions, time, mode, topicIndex, rangeStart, rangeEnd };\n savedProgress = progress;\n resumeProgressModal.classList.add('show');\n } else {\n const topic = mode === 'exam' ? { name: \"\u0110\u1ec1 thi\", icon: \"\ud83d\udccb\" } : topics[topicIndex];\n startQuiz(topic, questions, time, mode);\n }\n }\n \n function resumeProgress() {\n resumeProgressModal.classList.remove('show');\n if (!savedProgress) return;\n currentTopic = savedProgress.topic;\n currentQuestions = savedProgress.questions;\n currentQuestionIndex = savedProgress.currentIndex;\n userAnswers = savedProgress.answers;\n timeLeft = savedProgress.timeLeft;\n quizMode = savedProgress.mode;\n showAnswersEnabled = false;\n questionShuffleMap = savedProgress.shuffleMap || {};\n if (savedProgress.examId) { currentExamId = savedProgress.examId; currentPracticeId = null; }\n else if (savedProgress.practiceId) { currentPracticeId = savedProgress.practiceId; currentExamId = null; }\n hideAllSections(); hideHeader();\n quizContainer.style.display = 'block';\n quizContainer.classList.add('active');\n contentArea.classList.add('quiz-active');\n document.body.classList.add('quiz-mode');\n document.getElementById('showAnswerBtn').style.display = quizMode === 'exam' ? 'inline-flex' : 'none';\n enterFullscreenMode();\n showQuizNavMobile(true);\n displayQuestion(currentQuestionIndex);\n startTimer();\n savedProgress = null; pendingQuizData = null;\n }\n \n function startNewQuiz() {\n clearProgress();\n resumeProgressModal.classList.remove('show');\n if (pendingQuizData) { startQuiz(pendingQuizData.topic, pendingQuizData.questions, pendingQuizData.time, pendingQuizData.mode); pendingQuizData = null; }\n }\n \n function showWrongAnswers() {\n const wrongList = document.getElementById('wrongAnswersList');\n wrongList.innerHTML = '';\n const labels = ['A','B','C','D'], keys = ['a','b','c','d'];\n let hasWrong = false;\n currentQuestions.forEach((originalQ, i) => {\n const { shuffled: q } = shuffleAnswers(originalQ, i);\n if (userAnswers[i] !== q.correct) {\n hasWrong = true;\n const item = document.createElement('div');\n item.className = 'wrong-answer-item';\n const userLabel = userAnswers[i] ? labels[userAnswers[i]-1] : '?';\n const userText = userAnswers[i] ? q[keys[userAnswers[i]-1]] : 'Kh\u00f4ng tr\u1ea3 l\u1eddi';\n item.innerHTML = `<div class=\"question-num\">C\u00e2u ${i+1}<\/div><div class=\"question-content\">${q.q}<\/div><div class=\"answer-info\"><div style=\"color:var(--danger);margin-bottom:5px\">\u274c B\u1ea1n ch\u1ecdn: <strong>${userLabel}. ${userText}<\/strong><\/div><div class=\"correct-answer\">\u2705 \u0110\u00fang: <strong>${labels[q.correct-1]}. ${q[keys[q.correct-1]]}<\/strong><\/div><\/div>`;\n wrongList.appendChild(item);\n }\n });\n if (!hasWrong) wrongList.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--success)\">\ud83c\udf89 B\u1ea1n \u0111\u00e3 tr\u1ea3 l\u1eddi \u0111\u00fang t\u1ea5t c\u1ea3!<\/p>';\n wrongAnswersModal.classList.add('show');\n }\n \n function showExamDetails(configId) {\n let config = predefinedExams.find(c => c.id === configId) || savedConfigs.find(c => c.id === configId);\n if (!config) return;\n const settings = getExamSettings(config);\n let html = `<div style=\"padding:20px;background:var(--light);border-radius:var(--radius-md);margin-bottom:20px\"><h3 style=\"margin-bottom:15px;color:var(--primary)\"><i class=\"fas fa-file-alt\"><\/i> ${config.name}<\/h3><div><strong>\ud83d\udcdd T\u1ed5ng s\u1ed1 c\u00e2u:<\/strong> ${config.questionCount}<\/div><div><strong>\u23f1\ufe0f Th\u1eddi gian:<\/strong> ${settings.time} ph\u00fat<\/div><div><strong>\ud83d\udd04 T\u1ef7 l\u1ec7 tr\u00f9ng l\u1eb7p:<\/strong> ${settings.overlapPercent}%<\/div><\/div><h4 style=\"margin-bottom:15px\"><i class=\"fas fa-list\"><\/i> C\u1ea5u tr\u00fac:<\/h4><div style=\"max-height:400px;overflow-y:auto\">`;\n config.topics.forEach(ti => {\n const count = config.topicCounts[String(ti)] || 0;\n const t = topics[ti];\n html += `<div style=\"padding:15px;background:white;border-radius:var(--radius-sm);margin-bottom:10px;border-left:4px solid var(--primary);display:flex;justify-content:space-between;align-items:center\"><div><div style=\"font-weight:600\">${t ? t.icon : '\ud83d\udcda'} ${t ? t.name : 'Ch\u1ee7 \u0111\u1ec1 '+ti}<\/div><\/div><div style=\"background:var(--primary);color:white;padding:8px 16px;border-radius:20px;font-weight:700\">${count}<\/div><\/div>`;\n });\n html += '<\/div>';\n document.getElementById('examDetailsContent').innerHTML = html;\n examDetailsModal.classList.add('show');\n }\n \n function showExamSettings(configId) {\n let config = predefinedExams.find(c => c.id === configId);\n const isSystem = !!config;\n if (!config) config = savedConfigs.find(c => c.id === configId);\n if (!config) return;\n currentEditingExamId = configId;\n const settings = getExamSettings(config);\n document.getElementById('editExamTime').value = settings.time;\n document.getElementById('editExamOverlap').value = settings.overlapPercent;\n const resetBtn = document.getElementById('resetExamSettingsBtn');\n resetBtn.style.display = (isSystem && systemExamSettings[configId]) ? 'inline-flex' : 'none';\n examSettingsModal.classList.add('show');\n }\n \n function saveExamSettings() {\n if (!currentEditingExamId) return;\n const newTime = parseInt(document.getElementById('editExamTime').value);\n const newOverlap = parseInt(document.getElementById('editExamOverlap').value);\n if (newTime < 5 || newTime > 180) { alert('\u26a0\ufe0f Th\u1eddi gian ph\u1ea3i t\u1eeb 5-180 ph\u00fat!'); return; }\n if (newOverlap < 0 || newOverlap > 100) { alert('\u26a0\ufe0f T\u1ef7 l\u1ec7 tr\u00f9ng l\u1eb7p ph\u1ea3i t\u1eeb 0-100%!'); return; }\n if (predefinedExams.some(c => c.id === currentEditingExamId)) {\n systemExamSettings[currentEditingExamId] = { time: newTime, overlapPercent: newOverlap };\n saveSystemExamSettings();\n } else {\n const idx = savedConfigs.findIndex(c => c.id === currentEditingExamId);\n if (idx === -1) { alert('\u26a0\ufe0f Kh\u00f4ng t\u00ecm th\u1ea5y \u0111\u1ec1 thi!'); return; }\n savedConfigs[idx].time = newTime;\n savedConfigs[idx].overlapPercent = newOverlap;\n saveUserConfigs();\n }\n examSettingsModal.classList.remove('show');\n currentEditingExamId = null;\n displaySavedConfigs();\n alert('\u2705 \u0110\u00e3 l\u01b0u c\u00e0i \u0111\u1eb7t!');\n }\n \n function resetExamSettings() {\n if (!currentEditingExamId) return;\n if (!predefinedExams.some(c => c.id === currentEditingExamId)) return;\n if (confirm(`Kh\u00f4i ph\u1ee5c v\u1ec1 m\u1eb7c \u0111\u1ecbnh?\\n\u23f1\ufe0f ${DEFAULT_EXAM_TIME} ph\u00fat | \ud83d\udd04 ${DEFAULT_OVERLAP_PERCENT}%`)) {\n delete systemExamSettings[currentEditingExamId];\n saveSystemExamSettings();\n examSettingsModal.classList.remove('show');\n currentEditingExamId = null;\n displaySavedConfigs();\n alert('\u2705 \u0110\u00e3 kh\u00f4i ph\u1ee5c!');\n }\n }\n \n function hideHeader() { mainHeader.classList.add('hidden'); }\n function showHeader() { mainHeader.classList.remove('hidden'); }\n \n \/\/ FIX: Hi\u1ec7n\/\u1ea9n mobile nav bar\n function showQuizNavMobile(show) {\n quizNavMobile.style.display = show ? 'flex' : 'none';\n }\n \n function goHome() {\n if (timerInterval) clearInterval(timerInterval);\n exitFullscreenMode(); showHeader();\n hideAllSections();\n contentArea.classList.remove('quiz-active');\n document.body.classList.remove('quiz-mode');\n dashboard.style.display = 'block';\n showQuizNavMobile(false);\n currentExamId = null; currentPracticeId = null;\n }\n \n function retryQuiz() {\n if (currentExamId) { clearProgress(); window.startSavedConfig(currentExamId); }\n else if (currentPracticeId && currentTopic) { clearProgress(); startQuiz(currentTopic, currentQuestions, Math.ceil(timeLeft \/ 60) || 60, 'practice'); }\n else { goHome(); }\n }\n \n function hideAllSections() {\n [dashboard, searchSection, topicSelection, customExamSection, savedExamsSection, resultContainer].forEach(el => { if (el) el.style.display = 'none'; });\n quizContainer.style.display = 'none';\n quizContainer.classList.remove('active');\n showQuizNavMobile(false);\n }\n \n function showLoading(msg) { loadingOverlay.classList.add('show'); document.querySelector('.loading-text').textContent = msg || '\u0110ang t\u1ea3i...'; }\n function hideLoading() { loadingOverlay.classList.remove('show'); }\n \n function updateDataStatus() {\n const status = document.getElementById('dataStatus');\n if (topics.length === 0) {\n status.innerHTML = '<span style=\"color:var(--danger)\">\u274c Ch\u01b0a c\u00f3 d\u1eef li\u1ec7u<\/span>';\n } else {\n const total = topics.reduce((s,t) => s + t.questions.length, 0);\n const cacheTime = localStorage.getItem(CACHE_KEY + '_time');\n let cacheInfo = '';\n if (cacheTime) { const mins = Math.floor((Date.now() - parseInt(cacheTime)) \/ 60000); const hrs = Math.floor(mins \/ 60); cacheInfo = ` \u2022 Cache: ${hrs > 0 ? hrs+'h '+mins%60+'p' : mins+'p'} tr\u01b0\u1edbc`; }\n status.innerHTML = `<span style=\"color:var(--success)\">\u2705 ${topics.length} ch\u1ee7 \u0111\u1ec1, ${total} c\u00e2u, ${predefinedExams.length} b\u1ed9 \u0111\u1ec1${cacheInfo}<\/span>`;\n }\n }\n \n async function fetchWithTimeout(url, options, timeout) {\n const controller = new AbortController();\n const id = setTimeout(() => controller.abort(), timeout || 15000);\n try { const r = await fetch(url, { ...options, signal: controller.signal }); clearTimeout(id); return r; }\n catch (e) { clearTimeout(id); throw e; }\n }\n \n function getCachedData() {\n try {\n const cached = localStorage.getItem(CACHE_KEY);\n const cacheTime = localStorage.getItem(CACHE_KEY + '_time');\n if (cached && cacheTime && (Date.now() - parseInt(cacheTime)) < CACHE_DURATION) return JSON.parse(cached);\n } catch(e) {}\n return null;\n }\n \n function setCachedData(data) {\n try { localStorage.setItem(CACHE_KEY, JSON.stringify(data)); localStorage.setItem(CACHE_VERSION_KEY, '1.0'); localStorage.setItem(CACHE_KEY + '_time', Date.now().toString()); }\n catch(e) {}\n }\n \n function clearCache() { [CACHE_KEY, CACHE_VERSION_KEY, CACHE_KEY + '_time'].forEach(k => localStorage.removeItem(k)); }\n \n async function loadDataFromAPI() {\n const cached = getCachedData();\n if (cached) { processData(cached); fetchDataInBackground(); return true; }\n for (let i = 1; i <= 2; i++) {\n try {\n const r = await fetchWithTimeout(API_URL, { method: 'GET', headers: { 'Accept': 'application\/json' }, cache: 'no-cache' }, 15000);\n if (!r.ok) throw new Error(`HTTP ${r.status}`);\n const data = await r.json();\n processData(data);\n if (topics.length === 0) throw new Error('D\u1eef li\u1ec7u r\u1ed7ng');\n setCachedData(data);\n return true;\n } catch(e) { if (i < 2) await new Promise(r => setTimeout(r, 1000)); else throw e; }\n }\n }\n \n async function fetchDataInBackground() {\n try { const r = await fetchWithTimeout(API_URL, { method: 'GET', cache: 'no-cache' }, 20000); if (r.ok) { const data = await r.json(); if (data.topics?.length > 0) setCachedData(data); } }\n catch(e) {}\n }\n \n function processData(data) {\n topics = []; predefinedExams = [];\n if (data.topics && Array.isArray(data.topics)) {\n data.topics.forEach(t => { if (t.name && t.questions?.length > 0) topics.push({ name: t.name, icon: t.icon || '\ud83d\udcda', questions: t.questions }); });\n if (data.predefinedExams) {\n predefinedExams = data.predefinedExams.map(exam => ({\n id: `predefined_${exam.name.replace(\/\\s+\/g,'_')}`, name: exam.name, topics: exam.topics || [],\n topicCounts: exam.topicCounts || {}, time: exam.time || DEFAULT_EXAM_TIME,\n questionCount: exam.questionCount || 0, overlapPercent: exam.overlapPercent || DEFAULT_OVERLAP_PERCENT,\n createdAt: 'H\u1ec7 th\u1ed1ng', createdBy: 'Agribank', isPredefined: true\n }));\n }\n } else if (Array.isArray(data)) {\n data.forEach(t => { if (t.name && t.questions?.length > 0) topics.push({ name: t.name, icon: t.icon || '\ud83d\udcda', questions: t.questions }); });\n }\n updateDataStatus();\n updateTopicsChecklist();\n }\n \n function displayTopics(searchTerm) {\n const grid = document.getElementById('topicsGrid');\n grid.innerHTML = '';\n if (topics.length === 0) { grid.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--gray)\">Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u<\/p>'; return; }\n const filtered = searchTerm ? topics.filter(t => t.name.toLowerCase().includes(searchTerm.toLowerCase())) : topics;\n if (filtered.length === 0) { grid.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--gray)\">Kh\u00f4ng t\u00ecm th\u1ea5y ch\u1ee7 \u0111\u1ec1<\/p>'; return; }\n filtered.forEach(topic => {\n const i = topics.indexOf(topic);\n const card = document.createElement('div');\n card.className = 'topic-card';\n card.innerHTML = `<div class=\"topic-header\"><div class=\"topic-icon\">${topic.icon}<\/div><div class=\"topic-name\">${topic.name}<\/div><\/div><div class=\"topic-info\">${topic.questions.length} c\u00e2u h\u1ecfi<\/div><button class=\"expand-btn\" data-topic=\"${i}\"><i class=\"fas fa-cog\"><\/i> C\u00e0i \u0111\u1eb7t<\/button><div class=\"topic-settings\" id=\"settings-${i}\"><div class=\"setting-group\"><label class=\"setting-label\">Th\u1eddi gian (ph\u00fat)<\/label><input type=\"number\" class=\"setting-input\" id=\"time-${i}\" value=\"60\" min=\"5\" max=\"180\"><\/div><div class=\"setting-group\"><label class=\"setting-label\">Ph\u1ea1m vi<\/label><div class=\"range-option\"><input type=\"radio\" id=\"all-${i}\" name=\"range-${i}\" value=\"all\" checked><label for=\"all-${i}\" style=\"cursor:pointer\">T\u1ea5t c\u1ea3 (${topic.questions.length} c\u00e2u)<\/label><\/div><div class=\"range-option\"><input type=\"radio\" id=\"custom-${i}\" name=\"range-${i}\" value=\"custom\"><label for=\"custom-${i}\" style=\"cursor:pointer\">T\u00f9y ch\u1ecdn<\/label><\/div><div class=\"range-inputs-container\" id=\"range-${i}\"><div class=\"range-inputs\"><input type=\"number\" class=\"setting-input\" id=\"start-${i}\" placeholder=\"T\u1eeb\" min=\"1\" max=\"${topic.questions.length}\" value=\"1\"><span>\u0111\u1ebfn<\/span><input type=\"number\" class=\"setting-input\" id=\"end-${i}\" placeholder=\"\u0110\u1ebfn\" min=\"1\" max=\"${topic.questions.length}\" value=\"${topic.questions.length}\"><\/div><\/div><\/div><button class=\"submit-btn start-quiz-btn\" data-topic=\"${i}\" style=\"width:100%;margin-top:15px\"><i class=\"fas fa-play-circle\"><\/i> B\u1eaft \u0111\u1ea7u luy\u1ec7n t\u1eadp<\/button><\/div>`;\n grid.appendChild(card);\n addTapListener(card.querySelector('.expand-btn'), () => { document.getElementById(`settings-${i}`).classList.toggle('show'); });\n addTapListener(card.querySelector('.start-quiz-btn'), () => startQuizFromTopic(i));\n const customRadio = document.getElementById(`custom-${i}`);\n const allRadio = document.getElementById(`all-${i}`);\n const rangeDiv = document.getElementById(`range-${i}`);\n if (customRadio) customRadio.onchange = () => rangeDiv.classList.toggle('show', customRadio.checked);\n if (allRadio) allRadio.onchange = () => rangeDiv.classList.remove('show');\n });\n }\n \n function filterTopics() { displayTopics(document.getElementById('topicSearchInput').value); }\n \n function startQuizFromTopic(i) {\n const topic = topics[i];\n const time = parseInt(document.getElementById(`time-${i}`).value) || 60;\n const rangeType = document.querySelector(`input[name=\"range-${i}\"]:checked`)?.value;\n let questions, rangeStart = null, rangeEnd = null;\n if (rangeType === 'all') {\n questions = [...topic.questions];\n } else {\n rangeStart = Math.max(1, parseInt(document.getElementById(`start-${i}`).value) || 1);\n rangeEnd = Math.min(topic.questions.length, parseInt(document.getElementById(`end-${i}`).value) || topic.questions.length);\n if (rangeStart >= rangeEnd) { alert('\u26a0\ufe0f C\u00e2u b\u1eaft \u0111\u1ea7u ph\u1ea3i nh\u1ecf h\u01a1n c\u00e2u k\u1ebft th\u00fac!'); return; }\n questions = topic.questions.slice(rangeStart - 1, rangeEnd);\n }\n checkForSavedProgress(i, questions, time, 'practice', rangeStart, rangeEnd);\n }\n \n function updateTopicsChecklist() {\n const checklist = document.getElementById('topicsChecklist');\n if (!checklist) return;\n checklist.innerHTML = '';\n if (topics.length === 0) { checklist.innerHTML = '<p style=\"text-align:center;padding:20px\">Ch\u01b0a c\u00f3 ch\u1ee7 \u0111\u1ec1<\/p>'; return; }\n topics.forEach((topic, i) => {\n const item = document.createElement('div');\n item.className = 'topic-check-item';\n item.innerHTML = `<input type=\"checkbox\" id=\"topic-${i}\" style=\"min-width:24px;min-height:24px\"><div class=\"topic-check-content\"><label for=\"topic-${i}\" class=\"topic-check-label\">${topic.icon} ${topic.name} (${topic.questions.length} c\u00e2u)<\/label><input type=\"number\" class=\"topic-question-input\" id=\"count-${i}\" placeholder=\"S\u1ed1 c\u00e2u\" min=\"0\" max=\"${topic.questions.length}\" disabled><\/div>`;\n checklist.appendChild(item);\n topicQuestionCounts[i] = topicQuestionCounts[i] || 0;\n document.getElementById(`topic-${i}`).addEventListener('change', () => toggleTopicCheckbox(i));\n document.getElementById(`count-${i}`).addEventListener('input', () => updateTopicQuestionCount(i));\n });\n document.getElementById('totalQuestionsDisplay').textContent = topics.reduce((s,t) => s + t.questions.length, 0);\n updateRemainingQuestions();\n }\n \n function toggleTopicCheckbox(i) {\n const cb = document.getElementById(`topic-${i}`);\n const inp = document.getElementById(`count-${i}`);\n inp.disabled = !cb.checked;\n if (cb.checked) { inp.value = topics[i].questions.length; topicQuestionCounts[i] = topics[i].questions.length; }\n else { inp.value = ''; topicQuestionCounts[i] = 0; }\n updateRemainingQuestions();\n }\n \n function updateTopicQuestionCount(i) {\n const inp = document.getElementById(`count-${i}`);\n const cb = document.getElementById(`topic-${i}`);\n if (!cb.checked) { topicQuestionCounts[i] = 0; return; }\n const value = parseInt(inp.value) || 0;\n const max = topics[i].questions.length;\n if (value > max) { inp.value = max; topicQuestionCounts[i] = max; alert(`\u26a0\ufe0f Ch\u1ee7 \u0111\u1ec1 n\u00e0y ch\u1ec9 c\u00f3 ${max} c\u00e2u!`); }\n else topicQuestionCounts[i] = Math.max(0, value);\n updateRemainingQuestions();\n }\n \n function updateRemainingQuestions() {\n const selected = Object.values(topicQuestionCounts).reduce((a,b) => a + b, 0);\n const total = topics.reduce((s,t) => s + t.questions.length, 0);\n document.getElementById('selectedQuestionsCount').textContent = selected;\n document.getElementById('totalQuestionsDisplay').textContent = total;\n document.getElementById('remainingQuestionsCount').textContent = Math.max(0, total - selected);\n }\n \n function saveExamConfig() {\n if (!currentUser) { alert('\u26a0\ufe0f Vui l\u00f2ng \u0111\u0103ng nh\u1eadp!'); showLoginModal(); return; }\n const name = document.getElementById('configName').value.trim();\n if (!name) { alert('\u26a0\ufe0f Vui l\u00f2ng nh\u1eadp t\u00ean b\u1ed9 \u0111\u1ec1!'); return; }\n const selected = [], counts = {};\n topics.forEach((t, i) => {\n const cb = document.getElementById(`topic-${i}`);\n if (cb?.checked && topicQuestionCounts[i] > 0) { selected.push(i); counts[i] = topicQuestionCounts[i]; }\n });\n if (selected.length === 0) { alert('\u26a0\ufe0f Vui l\u00f2ng ch\u1ecdn \u00edt nh\u1ea5t m\u1ed9t ch\u1ee7 \u0111\u1ec1!'); return; }\n const total = Object.values(counts).reduce((a,b) => a + b, 0);\n const config = { id: Date.now(), name, topics: selected, topicCounts: counts, time: parseInt(document.getElementById('customExamTime').value) || DEFAULT_EXAM_TIME, questionCount: total, overlapPercent: parseInt(document.getElementById('customOverlapPercent').value) || DEFAULT_OVERLAP_PERCENT, createdAt: new Date().toLocaleDateString('vi-VN'), createdBy: currentUser.name };\n savedConfigs.push(config);\n saveUserConfigs();\n alert(`\u2705 \u0110\u00e3 l\u01b0u \"${name}\"!\\nT\u1ed5ng: ${total} c\u00e2u`);\n document.getElementById('configName').value = '';\n }\n \n function displaySavedConfigs(searchTerm) {\n const list = document.getElementById('savedConfigsList');\n list.innerHTML = '';\n const all = [...predefinedExams, ...savedConfigs];\n if (all.length === 0) { list.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--gray)\">Ch\u01b0a c\u00f3 \u0111\u1ec1 thi n\u00e0o<\/p>'; return; }\n const filtered = searchTerm ? all.filter(c => c.name.toLowerCase().includes(searchTerm.toLowerCase())) : all;\n if (filtered.length === 0) { list.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--gray)\">Kh\u00f4ng t\u00ecm th\u1ea5y<\/p>'; return; }\n filtered.forEach(config => {\n const card = document.createElement('div');\n card.className = 'config-card';\n if (config.isPredefined) { card.style.borderLeft = '5px solid #ff9800'; card.style.background = 'linear-gradient(135deg,#fff9f0 0%,#ffffff 100%)'; }\n const settings = getExamSettings(config);\n const hasCustom = config.isPredefined && systemExamSettings[config.id];\n const badge = config.isPredefined ? '<span style=\"display:inline-block;padding:4px 12px;background:linear-gradient(135deg,#ff9800,#ff6f00);color:white;border-radius:20px;font-size:0.75rem;font-weight:600;margin-bottom:8px\">\ud83d\udccb \u0110\u1ec1 h\u1ec7 th\u1ed1ng<\/span>' : '<span style=\"display:inline-block;padding:4px 12px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border-radius:20px;font-size:0.75rem;font-weight:600;margin-bottom:8px\">\ud83d\udc64 \u0110\u1ec1 c\u1ee7a t\u00f4i<\/span>';\n const customBadge = hasCustom ? '<span style=\"display:inline-block;padding:4px 12px;background:linear-gradient(135deg,#7b1fa2,#9c27b0);color:white;border-radius:20px;font-size:0.7rem;font-weight:600;margin-left:5px\">\u2699\ufe0f \u0110\u00e3 t\u00f9y ch\u1ec9nh<\/span>' : '';\n card.innerHTML = `${badge}${customBadge}<div class=\"config-name\">${config.name}<\/div><div class=\"config-details\"><div>\ud83d\udcdd S\u1ed1 c\u00e2u: ${config.questionCount}<\/div><div>\u23f1\ufe0f Th\u1eddi gian: ${settings.time} ph\u00fat${hasCustom ? ' (\u0111\u00e3 ch\u1ec9nh s\u1eeda)' : ''}<\/div><div>\ud83d\udd04 T\u1ef7 l\u1ec7 tr\u00f9ng l\u1eb7p: ${settings.overlapPercent}%<\/div><div>\ud83d\udc64 T\u1ea1o b\u1edfi: ${config.createdBy}<\/div><div>\ud83d\udcc5 Ng\u00e0y t\u1ea1o: ${config.createdAt}<\/div><\/div><div style=\"display:flex;gap:8px;margin-top:15px;flex-wrap:wrap\"><button class=\"submit-btn start-exam-btn\" data-id=\"${config.id}\" style=\"flex:1;min-width:100px;padding:10px 12px;font-size:0.88rem\"><i class=\"fas fa-play-circle\"><\/i> B\u1eaft \u0111\u1ea7u<\/button><button class=\"details-btn\" data-id=\"${config.id}\" style=\"padding:10px 12px;font-size:0.82rem;background:linear-gradient(135deg,var(--info),#0288d1)\"><i class=\"fas fa-info-circle\"><\/i><\/button><button class=\"settings-btn\" data-id=\"${config.id}\" style=\"padding:10px 12px;font-size:0.82rem;background:linear-gradient(135deg,#7b1fa2,#9c27b0)\"><i class=\"fas fa-cog\"><\/i><\/button>${!config.isPredefined ? `<button class=\"delete-btn\" data-id=\"${config.id}\" style=\"padding:10px 12px;font-size:0.82rem;background:linear-gradient(135deg,var(--danger),#d32f2f)\"><i class=\"fas fa-trash\"><\/i><\/button>` : ''}<\/div>`;\n addTapListener(card.querySelector('.start-exam-btn'), () => window.startSavedConfig(config.id));\n addTapListener(card.querySelector('.details-btn'), () => showExamDetails(config.id));\n addTapListener(card.querySelector('.settings-btn'), () => showExamSettings(config.id));\n const deleteBtn = card.querySelector('.delete-btn');\n if (deleteBtn) addTapListener(deleteBtn, () => deleteSavedConfig(config.id));\n list.appendChild(card);\n });\n }\n \n function filterSavedExams() { displaySavedConfigs(document.getElementById('savedExamSearchInput').value); }\n \n window.startSavedConfig = function(configId) {\n let config = predefinedExams.find(c => c.id === configId) || savedConfigs.find(c => c.id === configId);\n if (!config) return;\n const settings = getExamSettings(config);\n const historyKey = `exam_history_${configId}`;\n const lastQuestions = JSON.parse(localStorage.getItem(historyKey) || '[]');\n const overlapPercent = settings.overlapPercent;\n let allSelected = [];\n config.topics.forEach(topicIndex => {\n const neededCount = parseInt(config.topicCounts[String(topicIndex)]) || 0;\n if (neededCount === 0 || !topics[topicIndex]) return;\n const available = topics[topicIndex].questions;\n const overlapCount = Math.floor(neededCount * overlapPercent \/ 100);\n let selected = [];\n if (lastQuestions.length > 0 && overlapCount > 0) {\n const hist = lastQuestions.filter(lq => lq.topicIndex === topicIndex && lq.questionIndex < available.length);\n selected.push(...hist.sort(() => 0.5 - Math.random()).slice(0, overlapCount));\n }\n const usedIdx = selected.map(q => q.questionIndex);\n const histIdx = lastQuestions.filter(lq => lq.topicIndex === topicIndex).map(lq => lq.questionIndex);\n const newIdx = available.map((q,idx) => idx).filter(idx => !usedIdx.includes(idx) && !histIdx.includes(idx)).sort(() => 0.5 - Math.random());\n newIdx.slice(0, neededCount - selected.length).forEach(idx => selected.push({ topicIndex, questionIndex: idx, question: available[idx] }));\n if (selected.length < neededCount) {\n const allUsed = selected.map(q => q.questionIndex);\n available.map((q,idx) => idx).filter(idx => !allUsed.includes(idx)).sort(() => 0.5 - Math.random()).slice(0, neededCount - selected.length).forEach(idx => selected.push({ topicIndex, questionIndex: idx, question: available[idx] }));\n }\n allSelected.push(...selected.slice(0, neededCount));\n });\n const shuffled = allSelected.sort(() => 0.5 - Math.random()).slice(0, config.questionCount);\n localStorage.setItem(historyKey, JSON.stringify(shuffled));\n checkForSavedProgress(configId, shuffled.map(item => item.question), settings.time, 'exam');\n };\n \n function deleteSavedConfig(configId) {\n if (predefinedExams.some(c => c.id === configId)) { alert('\u26a0\ufe0f Kh\u00f4ng th\u1ec3 x\u00f3a b\u1ed9 \u0111\u1ec1 h\u1ec7 th\u1ed1ng!'); return; }\n if (confirm('B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n x\u00f3a?')) { savedConfigs = savedConfigs.filter(c => c.id !== configId); saveUserConfigs(); displaySavedConfigs(); }\n }\n \n function startCustomExam() {\n const selected = [];\n topics.forEach((t, i) => { const cb = document.getElementById(`topic-${i}`); if (cb?.checked && topicQuestionCounts[i] > 0) selected.push(i); });\n if (selected.length === 0) { alert('\u26a0\ufe0f Vui l\u00f2ng ch\u1ecdn ch\u1ee7 \u0111\u1ec1 v\u00e0 nh\u1eadp s\u1ed1 c\u00e2u!'); return; }\n const allQ = [];\n selected.forEach(i => { const qs = [...topics[i].questions].sort(() => 0.5 - Math.random()); allQ.push(...qs.slice(0, topicQuestionCounts[i])); });\n currentExamId = `custom_${Date.now()}`;\n currentPracticeId = null;\n startQuiz({ name: \"\u0110\u1ec1 thi t\u00f9y ch\u1ec9nh\", icon: \"\u2699\ufe0f\" }, allQ.sort(() => 0.5 - Math.random()), parseInt(document.getElementById('customExamTime').value) || DEFAULT_EXAM_TIME, 'exam');\n }\n \n function startQuiz(topic, questions, timeMinutes, mode) {\n currentTopic = topic;\n currentQuestions = questions;\n currentQuestionIndex = 0;\n userAnswers = new Array(questions.length).fill(null);\n timeLeft = timeMinutes * 60;\n quizMode = mode;\n showAnswersEnabled = false;\n questionShuffleMap = {};\n \n hideAllSections(); hideHeader();\n quizContainer.style.display = 'block';\n quizContainer.classList.add('active');\n contentArea.classList.add('quiz-active');\n document.body.classList.add('quiz-mode');\n \n const showAnswerBtn = document.getElementById('showAnswerBtn');\n showAnswerBtn.style.display = mode === 'exam' ? 'inline-flex' : 'none';\n showAnswerBtn.innerHTML = '<i class=\"fas fa-eye\"><\/i> <span class=\"btn-text\">\u0110\u00e1p \u00e1n<\/span>';\n showAnswerBtn.style.background = 'linear-gradient(135deg, var(--warning), var(--secondary))';\n \n enterFullscreenMode();\n \/\/ FIX: Hi\u1ec7n mobile nav sau khi quiz start\n showQuizNavMobile(true);\n displayQuestion(0);\n startTimer();\n }\n \n function startTimer() {\n if (timerInterval) clearInterval(timerInterval);\n updateTimerDisplay();\n timerInterval = setInterval(() => {\n timeLeft--;\n updateTimerDisplay();\n if (timeLeft <= 0) { clearInterval(timerInterval); submitQuiz(); }\n }, 1000);\n }\n \n function updateTimerDisplay() {\n const mins = Math.floor(timeLeft \/ 60), secs = timeLeft % 60;\n document.getElementById('timeDisplay').textContent = `${String(mins).padStart(2,'0')}:${String(secs).padStart(2,'0')}`;\n const timer = document.getElementById('timer');\n timer.className = 'timer';\n if (timeLeft <= 60) timer.classList.add('danger');\n else if (timeLeft <= 300) timer.classList.add('warning');\n }\n \n function displayQuestion(index) {\n currentQuestionIndex = index;\n const { shuffled: q } = shuffleAnswers(currentQuestions[index], index);\n \n document.getElementById('questionNumber').innerHTML = `<i class=\"fas fa-question-circle\"><\/i> C\u00e2u ${index + 1}`;\n document.getElementById('questionText').textContent = q.q;\n \n const container = document.getElementById('optionsContainer');\n container.innerHTML = '';\n const labels = ['A','B','C','D'], keys = ['a','b','c','d'];\n \n keys.forEach((key, i) => {\n if (!q[key]) return;\n const optVal = i + 1;\n const isSelected = userAnswers[index] === optVal;\n const isCorrect = optVal === q.correct;\n const option = document.createElement('div');\n option.className = 'option';\n if (isSelected) option.classList.add('selected');\n if (quizMode === 'practice') {\n if (isSelected) option.classList.add(isCorrect ? 'correct' : 'incorrect');\n if (!isSelected && isCorrect && userAnswers[index]) option.classList.add('show-correct');\n }\n if (quizMode === 'exam' && showAnswersEnabled) {\n if (isCorrect) option.classList.add('show-correct');\n if (isSelected && !isCorrect) option.classList.add('incorrect');\n }\n option.innerHTML = `<div class=\"option-label\">${labels[i]}<\/div><div class=\"option-text\">${q[key]}<\/div>`;\n \/\/ FIX: D\u00f9ng addTapListener cho option\n addTapListener(option, () => selectOption(index, optVal, option));\n container.appendChild(option);\n });\n \n \/\/ Explanation\n const expDiv = document.getElementById('answerExplanation');\n expDiv.innerHTML = '';\n if (quizMode === 'practice' && userAnswers[index]) {\n showExplanation(q, userAnswers[index]);\n } else if (quizMode === 'exam' && showAnswersEnabled) {\n if (userAnswers[index]) { showExplanation(q, userAnswers[index]); }\n else { expDiv.innerHTML = `<div class=\"answer-explanation\"><div style=\"font-weight:700;margin-bottom:8px\"><i class=\"fas fa-lightbulb\" style=\"color:var(--warning)\"><\/i> <span style=\"color:var(--warning)\">\u0110\u00e1p \u00e1n:<\/span><\/div><p style=\"color:var(--success);font-weight:600\"><i class=\"fas fa-check-circle\"><\/i> ${'ABCD'[q.correct-1]}. ${q[keys[q.correct-1]]}<\/p><\/div>`; }\n }\n \n \/\/ Update nav buttons\n const isFirst = index === 0;\n const isLast = index === currentQuestions.length - 1;\n document.getElementById('prevBtnInline').disabled = isFirst;\n document.getElementById('nextBtnInline').disabled = isLast;\n document.getElementById('prevBtnMobile').disabled = isFirst;\n document.getElementById('nextBtnMobile').disabled = isLast;\n \n \/\/ FIX: C\u1eadp nh\u1eadt center text\n updateNavCenter();\n \n \/\/ FIX: KH\u00d4NG g\u1ecdi window.scrollTo v\u00ec n\u00f3 cancel touch event \u0111ang x\u1eed l\u00fd\n \/\/ Thay v\u00e0o \u0111\u00f3 scroll container l\u00ean top\n const qContainer = document.getElementById('questionContainer');\n if (qContainer) qContainer.scrollIntoView({ block: 'start', behavior: 'instant' });\n }\n \n function showExplanation(question, selectedAnswer) {\n const expDiv = document.getElementById('answerExplanation');\n const isCorrect = selectedAnswer === question.correct;\n const labels = ['A','B','C','D'], keys = ['a','b','c','d'];\n const ci = question.correct - 1;\n expDiv.innerHTML = `<div class=\"answer-explanation ${isCorrect ? '' : 'incorrect'}\"><div style=\"font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px\"><i class=\"fas ${isCorrect ? 'fa-check-circle' : 'fa-times-circle'}\" style=\"color:var(--${isCorrect ? 'success' : 'danger'})\"><\/i><span style=\"color:var(--${isCorrect ? 'success' : 'danger'})\">${isCorrect ? 'Ch\u00ednh x\u00e1c!' : 'Ch\u01b0a ch\u00ednh x\u00e1c!'}<\/span><\/div><div style=\"font-size:0.85rem\">${isCorrect ? `B\u1ea1n \u0111\u00e3 ch\u1ecdn \u0111\u00fang \u0111\u00e1p \u00e1n <strong>${labels[ci]}<\/strong>.` : `<p style=\"margin-bottom:8px\">B\u1ea1n ch\u1ecdn: <strong>${labels[selectedAnswer-1]}<\/strong>.<\/p><p style=\"color:var(--success);font-weight:600\"><i class=\"fas fa-lightbulb\"><\/i> \u0110\u00e1p \u00e1n \u0111\u00fang: <strong>${labels[ci]}. ${question[keys[ci]]}<\/strong><\/p>`}<\/div><\/div>`;\n }\n \n function selectOption(qIndex, optionIndex, optionElement) {\n userAnswers[qIndex] = optionIndex;\n const { shuffled: q } = shuffleAnswers(currentQuestions[qIndex], qIndex);\n const options = optionElement.parentElement.querySelectorAll('.option');\n options.forEach(opt => opt.classList.remove('selected','correct','incorrect','show-correct'));\n optionElement.classList.add('selected');\n if (quizMode === 'practice') {\n if (optionIndex === q.correct) optionElement.classList.add('correct');\n else { optionElement.classList.add('incorrect'); if (options[q.correct - 1]) options[q.correct - 1].classList.add('show-correct'); }\n showExplanation(q, optionIndex);\n }\n if (quizMode === 'exam' && showAnswersEnabled) {\n options.forEach((opt, i) => { if (i + 1 === q.correct) opt.classList.add('show-correct'); });\n if (optionIndex !== q.correct) optionElement.classList.add('incorrect');\n showExplanation(q, optionIndex);\n }\n }\n \n function submitQuiz() {\n if (timerInterval) clearInterval(timerInterval);\n const unanswered = userAnswers.filter(a => a === null).length;\n if (unanswered > 0 && !confirm(`B\u1ea1n c\u00f2n ${unanswered} c\u00e2u ch\u01b0a tr\u1ea3 l\u1eddi. N\u1ed9p b\u00e0i?`)) { startTimer(); return; }\n let score = 0, wrongCount = 0;\n currentQuestions.forEach((originalQ, i) => {\n const { shuffled: q } = shuffleAnswers(originalQ, i);\n if (userAnswers[i] === q.correct) score++; else wrongCount++;\n });\n clearProgress(); exitFullscreenMode(); showHeader();\n hideAllSections();\n contentArea.classList.remove('quiz-active');\n document.body.classList.remove('quiz-mode');\n showQuizNavMobile(false);\n resultContainer.style.display = 'block';\n const percent = (score \/ currentQuestions.length) * 100;\n document.getElementById('score').textContent = `${score}\/${currentQuestions.length}`;\n document.getElementById('scoreDetail').textContent = `\u0110\u00fang ${score}\/${currentQuestions.length} c\u00e2u (${percent.toFixed(1)}%)`;\n document.getElementById('showWrongAnswersBtn').style.display = wrongCount > 0 ? 'inline-flex' : 'none';\n if (currentUser) {\n document.getElementById('userResult').innerHTML = `<div style=\"padding:15px;background:var(--light);border-radius:var(--radius-md)\"><div><strong>Ng\u01b0\u1eddi thi:<\/strong> ${currentUser.name}<\/div><div><strong>\u0110\u1ec1 thi:<\/strong> ${currentTopic.name}<\/div><div><strong>Th\u1eddi gian:<\/strong> ${new Date().toLocaleString('vi-VN')}<\/div><\/div>`;\n } else { document.getElementById('userResult').innerHTML = ''; }\n const icons = ['\ud83d\ude14','\ud83d\ude0a','\ud83d\udc4d','\ud83c\udf89','\ud83c\udfc6'];\n document.getElementById('resultIcon').textContent = icons[Math.min(4, Math.floor(percent \/ 20))];\n }\n \n \/\/ ================================================================\n \/\/ BIND ALL EVENTS\n \/\/ ================================================================\n function bindAllEvents() {\n \/\/ Dashboard cards\n addTapListener(document.getElementById('searchKeyword'), () => {\n if (topics.length === 0) { alert('\u26a0\ufe0f Ch\u01b0a c\u00f3 d\u1eef li\u1ec7u!'); return; }\n hideAllSections(); searchSection.style.display = 'block';\n document.getElementById('searchInput').value = '';\n document.getElementById('searchResults').innerHTML = '';\n });\n addTapListener(document.getElementById('practiceByTopic'), () => {\n if (topics.length === 0) { alert('\u26a0\ufe0f Ch\u01b0a c\u00f3 d\u1eef li\u1ec7u!'); return; }\n hideAllSections(); topicSelection.style.display = 'block'; displayTopics();\n });\n addTapListener(document.getElementById('customExam'), () => {\n if (topics.length === 0) { alert('\u26a0\ufe0f Ch\u01b0a c\u00f3 d\u1eef li\u1ec7u!'); return; }\n hideAllSections(); customExamSection.style.display = 'block'; updateTopicsChecklist();\n });\n addTapListener(document.getElementById('savedExams'), () => {\n hideAllSections(); savedExamsSection.style.display = 'block'; displaySavedConfigs();\n });\n \n \/\/ Header\n addTapListener(document.getElementById('fontSizeHeaderBtn'), showFontSizeModal);\n addTapListener(document.getElementById('loginBtn'), showLoginModal);\n \n \/\/ Shuffle\n document.getElementById('shuffleAnswersToggle').addEventListener('change', toggleShuffleAnswers);\n \n \/\/ Data\n addTapListener(document.getElementById('reloadDataBtn'), async () => {\n try { showLoading('\u0110ang t\u1ea3i l\u1ea1i...'); topics = []; predefinedExams = []; updateDataStatus(); clearCache(); await loadDataFromAPI(); updateDataStatus(); hideLoading(); alert(`\u2705 Th\u00e0nh c\u00f4ng!\\n${topics.length} ch\u1ee7 \u0111\u1ec1, ${predefinedExams.length} b\u1ed9 \u0111\u1ec1`); }\n catch(e) { hideLoading(); alert('\u274c Kh\u00f4ng t\u1ea3i \u0111\u01b0\u1ee3c! Th\u1eed l\u1ea1i sau.'); }\n });\n addTapListener(document.getElementById('clearCacheBtn'), () => {\n if (confirm('X\u00f3a cache?\\nD\u1eef li\u1ec7u s\u1ebd t\u1ea3i l\u1ea1i t\u1eeb server l\u1ea7n t\u1edbi.')) { clearCache(); updateDataStatus(); alert('\u2705 \u0110\u00e3 x\u00f3a cache!'); }\n });\n \n \/\/ Home buttons\n addTapListener(document.getElementById('searchHomeBtn'), goHome);\n addTapListener(document.getElementById('topicHomeBtn'), goHome);\n addTapListener(document.getElementById('customHomeBtn'), goHome);\n addTapListener(document.getElementById('savedHomeBtn'), goHome);\n \n \/\/ Search\n addTapListener(document.getElementById('searchBtn'), searchQuestions);\n document.getElementById('searchInput').addEventListener('keypress', e => { if (e.key === 'Enter') searchQuestions(); });\n document.getElementById('topicSearchInput').addEventListener('input', filterTopics);\n document.getElementById('savedExamSearchInput').addEventListener('input', filterSavedExams);\n \n \/\/ Quiz controls\n addTapListener(document.getElementById('exitQuizBtn'), confirmExit);\n addTapListener(document.getElementById('submitQuizBtn'), submitQuiz);\n addTapListener(document.getElementById('toggleFullscreenBtn'), toggleFullscreen);\n \n addTapListener(document.getElementById('showAnswerBtn'), function() {\n showAnswersEnabled = !showAnswersEnabled;\n const btn = document.getElementById('showAnswerBtn');\n if (showAnswersEnabled) {\n btn.innerHTML = '<i class=\"fas fa-eye-slash\"><\/i> <span class=\"btn-text\">\u1ea8n<\/span>';\n btn.style.background = 'linear-gradient(135deg, #e65100, #ff6f00)';\n } else {\n btn.innerHTML = '<i class=\"fas fa-eye\"><\/i> <span class=\"btn-text\">\u0110\u00e1p \u00e1n<\/span>';\n btn.style.background = 'linear-gradient(135deg, var(--warning), var(--secondary))';\n }\n displayQuestion(currentQuestionIndex);\n });\n \n \/\/ Desktop nav\n addTapListener(document.getElementById('prevBtnInline'), () => { if (currentQuestionIndex > 0) displayQuestion(currentQuestionIndex - 1); });\n addTapListener(document.getElementById('nextBtnInline'), () => { if (currentQuestionIndex < currentQuestions.length - 1) displayQuestion(currentQuestionIndex + 1); });\n \n \/\/ ================================================================\n \/\/ FIX CRITICAL: Mobile nav buttons - th\u00eam c\u1ea3 click backup\n \/\/ ================================================================\n const prevMobile = document.getElementById('prevBtnMobile');\n const nextMobile = document.getElementById('nextBtnMobile');\n \n addTapListener(prevMobile, function() {\n if (currentQuestionIndex > 0) displayQuestion(currentQuestionIndex - 1);\n });\n addTapListener(nextMobile, function() {\n if (currentQuestionIndex < currentQuestions.length - 1) displayQuestion(currentQuestionIndex + 1);\n });\n \n \/\/ Font size\n addTapListener(document.getElementById('fontSmBtn'), () => changeFontSize(0.85));\n addTapListener(document.getElementById('fontMdBtn'), () => changeFontSize(1));\n addTapListener(document.getElementById('fontLgBtn'), () => changeFontSize(1.15));\n \n \/\/ Modals\n addTapListener(document.getElementById('googleSigninBtn'), signInWithGoogle);\n addTapListener(document.getElementById('closeLoginBtn'), closeLoginModal);\n addTapListener(document.getElementById('closeFontSizeBtn'), closeFontSizeModal);\n addTapListener(document.getElementById('saveProgressBtn'), saveProgressAndExit);\n addTapListener(document.getElementById('exitNoSaveBtn'), exitWithoutSaving);\n addTapListener(document.getElementById('resumeProgressBtn'), resumeProgress);\n addTapListener(document.getElementById('startNewQuizBtn'), startNewQuiz);\n addTapListener(document.getElementById('closeWrongAnswersBtn'), () => wrongAnswersModal.classList.remove('show'));\n addTapListener(document.getElementById('closeExamDetailsBtn'), () => examDetailsModal.classList.remove('show'));\n addTapListener(document.getElementById('saveExamSettingsBtn'), saveExamSettings);\n addTapListener(document.getElementById('resetExamSettingsBtn'), resetExamSettings);\n addTapListener(document.getElementById('closeExamSettingsBtn'), () => { examSettingsModal.classList.remove('show'); currentEditingExamId = null; });\n addTapListener(document.getElementById('savePracticeBtn'), savePracticeProgressAndExit);\n addTapListener(document.getElementById('exitPracticeNoSaveBtn'), exitPracticeWithoutSaving);\n \n \/\/ Result\n addTapListener(document.getElementById('goHomeResultBtn'), goHome);\n addTapListener(document.getElementById('retryQuizBtn'), retryQuiz);\n addTapListener(document.getElementById('showWrongAnswersBtn'), showWrongAnswers);\n \n \/\/ Custom exam\n addTapListener(document.getElementById('saveConfigBtn'), saveExamConfig);\n addTapListener(document.getElementById('startCustomExamBtn'), startCustomExam);\n \n \/\/ Font size radios\n document.querySelectorAll('input[name=\"fontSize\"]').forEach(radio => {\n radio.addEventListener('change', function() { changeFontSize(parseFloat(this.value)); });\n });\n \n \/\/ Close modals on backdrop click\n [loginModal, fontSizeModal, wrongAnswersModal, examDetailsModal].forEach(modal => {\n if (!modal) return;\n modal.addEventListener('pointerdown', function(e) {\n if (e.target === this) this.classList.remove('show');\n });\n });\n }\n \n async function initApp() {\n showLoading('\u0110ang kh\u1edfi \u0111\u1ed9ng...');\n checkLogin();\n loadFontSize();\n loadShuffleSettings();\n bindAllEvents();\n \/\/ Nav bar \u1ea9n ban \u0111\u1ea7u\n showQuizNavMobile(false);\n \n try {\n await loadDataFromAPI();\n updateRemainingQuestions();\n updateDataStatus();\n hideLoading();\n } catch(e) {\n hideLoading();\n const cached = getCachedData();\n alert(cached ? '\u26a0\ufe0f Kh\u00f4ng k\u1ebft n\u1ed1i \u0111\u01b0\u1ee3c!\\n\u2705 \u0110ang d\u00f9ng d\u1eef li\u1ec7u cache c\u0169.' : '\u26a0\ufe0f Kh\u00f4ng k\u1ebft n\u1ed1i \u0111\u01b0\u1ee3c!\\nKi\u1ec3m tra m\u1ea1ng v\u00e0 th\u1eed l\u1ea1i.');\n }\n }\n \n document.addEventListener('DOMContentLoaded', initApp);\n \n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u00d4n Thi Agribank \u0110ang t\u1ea3i d\u1eef li\u1ec7u… \u0110\u0103ng nh\u1eadp \u0110\u0103ng nh\u1eadp \u0111\u1ec3 l\u01b0u ti\u1ebfn \u0111\u1ed9 h\u1ecdc t\u1eadp v\u00e0 theo d\u00f5i k\u1ebft qu\u1ea3 c\u1ee7a b\u1ea1n \u0110\u0103ng nh\u1eadp v\u1edbi Google \u0110\u00f3ng C\u00e0i \u0111\u1eb7t c\u1ee1 ch\u1eef \u0110i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc ch\u1eef khi l\u00e0m b\u00e0i thi K\u00edch th\u01b0\u1edbc ch\u1eef Nh\u1ecf (85%) M\u1eb7c \u0111\u1ecbnh (100%) L\u1edbn (115%) R\u1ea5t l\u1edbn (130%) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":68,"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":147,"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/147"}],"wp:attachment":[{"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6,"date":"2025-10-12T11:10:38","date_gmt":"2025-10-12T11:10:38","guid":{"rendered":"https:\/\/tracnghiemagr.io.vn\/?page_id=6"},"modified":"2026-03-22T14:00:22","modified_gmt":"2026-03-22T14:00:22","slug":"on-thi-trac-nghiem-agribank","status":"publish","type":"page","link":"https:\/\/tracnghiemagr.io.vn\/","title":{"rendered":"\u00d4N THI NGHI\u1ec6P V\u1ee4 AGRIBANK"},"content":{"rendered":"\n\n\n\n \n \n \u00d4n Thi Agribank<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n \n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -webkit-tap-highlight-color: transparent;\n }\n \n :root {\n --primary: #00923f;\n --primary-dark: #006b2d;\n --primary-light: #00b04f;\n --secondary: #ffa726;\n --success: #4caf50;\n --danger: #ef5350;\n --warning: #ffb74d;\n --info: #29b6f6;\n --light: #f8f9fa;\n --dark: #2c3e50;\n --gray: #6c757d;\n --gray-light: #e9ecef;\n --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);\n --shadow-md: 0 4px 16px rgba(0,0,0,0.1);\n --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);\n --radius-sm: 8px;\n --radius-md: 12px;\n --radius-lg: 16px;\n --font-size-multiplier: 1;\n \/* FIX: safe area cho notch\/home indicator *\/\n --safe-bottom: env(safe-area-inset-bottom, 0px);\n --nav-height: 64px;\n }\n \n body {\n font-family: 'Inter', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: var(--dark);\n line-height: 1.6;\n min-height: 100vh;\n overscroll-behavior: none;\n }\n \n body.quiz-mode {\n background: #fafbfc;\n }\n \n .container {\n width: 100%;\n min-height: 100vh;\n background-color: white;\n display: flex;\n flex-direction: column;\n }\n \n .container.fullscreen-active {\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100vh;\n z-index: 9999;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n }\n \n \/* ============ HEADER ============ *\/\n header {\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\n color: white;\n padding: 20px 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: var(--shadow-md);\n position: sticky;\n top: 0;\n z-index: 100;\n }\n \n header.hidden { display: none; }\n \n .logo-container { display: flex; align-items: center; gap: 20px; }\n .logo { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }\n .logo i { font-size: 3rem; color: white; }\n .header-text h1 { font-size: 1.8rem; margin-bottom: 4px; font-weight: 800; }\n .header-text p { font-size: 0.95rem; opacity: 0.95; }\n .user-info { display: flex; align-items: center; gap: 15px; }\n \n \/* ============ LAYOUT ============ *\/\n .main-content { flex: 1; display: flex; width: 100%; }\n \n .content-area {\n flex: 1;\n padding: 30px 40px;\n background: #fafbfc;\n overflow-y: auto;\n }\n \n .content-area.quiz-active {\n padding: 0;\n background: #fafbfc;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n \n \/* ============ CARDS ============ *\/\n .content-card {\n background: white;\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-sm);\n padding: 30px 40px;\n margin-bottom: 30px;\n border: 1px solid var(--gray-light);\n }\n \n .section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 25px;\n flex-wrap: wrap;\n gap: 15px;\n }\n \n .section-title {\n font-size: 1.6rem;\n color: var(--dark);\n padding-bottom: 20px;\n border-bottom: 3px solid var(--gray-light);\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 700;\n position: relative;\n flex: 1;\n margin: 0;\n }\n \n .section-title::after {\n content: '';\n position: absolute;\n bottom: -3px; left: 0;\n width: 80px; height: 3px;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n }\n \n .section-title-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 20px;\n flex-wrap: wrap;\n }\n \n \/* ============ SHUFFLE TOGGLE ============ *\/\n .shuffle-toggle {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--light);\n border-radius: 25px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 2px solid var(--gray-light);\n user-select: none;\n -webkit-user-select: none;\n touch-action: manipulation;\n }\n \n .shuffle-toggle:hover { background: #e3f2fd; border-color: var(--primary); }\n .shuffle-toggle input[type=\"checkbox\"] { width: 18px; height: 18px; cursor: pointer; }\n .shuffle-toggle label { cursor: pointer; font-size: 0.95rem; font-weight: 600; color: var(--dark); }\n \n \/* ============ BUTTONS ============ *\/\n button {\n padding: 12px 24px;\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\n color: white;\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n font-size: 0.95rem;\n font-weight: 600;\n transition: opacity 0.15s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-family: 'Inter', sans-serif;\n \/* FIX CRITICAL: touch-action manipulation lo\u1ea1i b\u1ecf 300ms delay *\/\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n -webkit-user-select: none;\n position: relative;\n z-index: 1;\n min-height: 44px;\n \/* FIX: Kh\u00f4ng d\u00f9ng transform \u0111\u1ec3 tr\u00e1nh lag khi touch *\/\n will-change: opacity;\n }\n \n button:active { opacity: 0.75; }\n \n @media (hover: hover) {\n button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }\n }\n \n .home-btn { background: linear-gradient(135deg, var(--gray), #5a6268); }\n .submit-btn { background: linear-gradient(135deg, var(--success), #43a047); }\n .show-answer-btn { background: linear-gradient(135deg, var(--warning), var(--secondary)); }\n .fullscreen-btn { background: linear-gradient(135deg, #7b1fa2, #9c27b0); padding: 10px 16px; }\n .fullscreen-btn.active { background: linear-gradient(135deg, #e65100, #ff6f00); }\n \n \/* ============ DASHBOARD ============ *\/\n .dashboard-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n gap: 20px;\n margin-top: 20px;\n }\n \n .dashboard-card {\n background: white;\n border-radius: var(--radius-lg);\n padding: 28px 25px;\n box-shadow: var(--shadow-sm);\n cursor: pointer;\n transition: opacity 0.15s ease;\n border: 2px solid var(--gray-light);\n text-align: center;\n position: relative;\n overflow: hidden;\n min-height: 200px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n -webkit-user-select: none;\n }\n \n .dashboard-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n }\n \n @media (hover: hover) {\n .dashboard-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); }\n }\n \n .dashboard-card:active { opacity: 0.8; }\n \n .card-icon {\n font-size: 3.5rem;\n margin-bottom: 20px;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n \n .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }\n .card-description { color: var(--gray); font-size: 0.9rem; }\n \n \/* ============ SEARCH ============ *\/\n .search-box { margin-bottom: 25px; }\n \n .search-box input {\n width: 100%;\n padding: 14px 20px;\n font-size: 1rem;\n border: 2px solid var(--gray-light);\n border-radius: var(--radius-md);\n transition: all 0.3s ease;\n font-family: 'Inter', sans-serif;\n }\n \n .search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,146,63,0.1); }\n \n \/* ============ TOPICS ============ *\/\n .topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }\n \n .topic-card {\n background: white;\n border-radius: var(--radius-lg);\n padding: 25px;\n box-shadow: var(--shadow-sm);\n border: 2px solid var(--gray-light);\n position: relative;\n }\n \n .topic-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n }\n \n .topic-header { display: flex; align-items: center; margin-bottom: 18px; }\n .topic-icon { font-size: 2.5rem; margin-right: 15px; }\n .topic-name { font-size: 1.25rem; font-weight: 700; }\n .topic-info { color: var(--gray); margin-bottom: 20px; }\n \n .topic-settings { display: none; margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--gray-light); }\n .topic-settings.show { display: block; }\n \n .setting-group { margin-bottom: 20px; }\n .setting-label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 0.95rem; }\n \n .setting-input {\n width: 100%;\n padding: 12px 16px;\n border: 2px solid var(--gray-light);\n border-radius: var(--radius-sm);\n font-size: 0.95rem;\n font-family: 'Inter', sans-serif;\n }\n \n .setting-input:focus { border-color: var(--primary); outline: none; }\n \n .range-option {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n padding: 10px 4px;\n cursor: pointer;\n touch-action: manipulation;\n }\n \n .range-option input[type=\"radio\"] { transform: scale(1.2); cursor: pointer; min-width: 20px; min-height: 20px; }\n \n .range-inputs-container { display: none; margin-top: 12px; padding: 15px; background: var(--light); border-radius: var(--radius-sm); }\n .range-inputs-container.show { display: block; }\n .range-inputs { display: flex; align-items: center; gap: 10px; }\n .range-inputs input { flex: 1; }\n \n \/* ============ QUIZ CONTAINER ============ *\/\n .quiz-container {\n display: none;\n background: #fafbfc;\n \/* FIX: Padding bottom = nav bar height + safe area *\/\n padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);\n }\n \n .quiz-container.active { display: block; }\n \n \/* ============ QUIZ HEADER ============ *\/\n .quiz-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: white;\n border-bottom: 1px solid var(--gray-light);\n box-shadow: var(--shadow-sm);\n position: sticky;\n top: 0;\n z-index: 50;\n gap: 10px;\n flex-wrap: wrap;\n }\n \n .quiz-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }\n \n .topic-title-quiz {\n font-size: calc(1rem * var(--font-size-multiplier));\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .timer {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--light);\n border-radius: 50px;\n font-weight: 700;\n color: var(--primary);\n font-size: 1rem;\n min-width: 110px;\n justify-content: center;\n }\n \n .timer .time-value {\n display: inline-block;\n min-width: 55px;\n text-align: center;\n font-variant-numeric: tabular-nums;\n letter-spacing: 0.5px;\n }\n \n .timer.warning { color: var(--warning); background: #fff8e1; }\n .timer.danger { color: var(--danger); background: #ffebee; }\n \n .quiz-actions { display: flex; gap: 8px; flex-wrap: wrap; }\n \n \/* ============ QUESTION ============ *\/\n .question-container {\n background: white;\n padding: 20px;\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-sm);\n margin: 16px;\n border-left: 5px solid var(--primary);\n }\n \n .question-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n gap: 10px;\n flex-wrap: wrap;\n }\n \n .question-number {\n font-weight: 700;\n color: var(--primary);\n font-size: 1rem;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n \/* Desktop inline nav *\/\n .question-nav-inline { display: flex; gap: 12px; }\n .question-nav-inline button { padding: 10px 20px; font-size: 0.95rem; font-weight: 700; }\n \n .quiz-actions .btn-text { display: inline; }\n \n .question-text {\n font-size: calc(0.95rem * var(--font-size-multiplier));\n margin-bottom: 20px;\n line-height: 1.7;\n font-weight: 500;\n }\n \n .options-container { display: flex; flex-direction: column; gap: 10px; }\n \n \/* ============ OPTIONS ============ *\/\n .option {\n display: flex;\n align-items: center;\n padding: 14px 16px;\n background: white;\n border: 2px solid var(--gray-light);\n border-radius: var(--radius-md);\n cursor: pointer;\n \/* FIX CRITICAL: touch-action manipulation cho option *\/\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n -webkit-user-select: none;\n min-height: 52px;\n transition: background 0.1s, border-color 0.1s;\n \/* FIX: \u0110\u1ea3m b\u1ea3o option nh\u1eadn touch events \u0111\u00fang *\/\n -webkit-touch-callout: none;\n }\n \n @media (hover: hover) {\n .option:hover { background: var(--light); border-color: var(--primary); }\n }\n \n .option:active { background: #e3f2fd !important; border-color: var(--info) !important; }\n \n .option.selected { background: #e3f2fd; border-color: var(--info); border-width: 2px; }\n .option.correct { background: #e8f5e9; border-color: var(--success); border-width: 2px; }\n .option.incorrect { background: #ffebee; border-color: var(--danger); border-width: 2px; }\n .option.show-correct { background: #e8f5e9; border-color: var(--success); border-width: 2px; }\n \n .option-label {\n font-weight: 700;\n margin-right: 12px;\n color: var(--primary);\n min-width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--light);\n border-radius: 50%;\n font-size: 0.85rem;\n pointer-events: none;\n flex-shrink: 0;\n }\n \n .option-text {\n flex: 1;\n font-size: calc(0.88rem * var(--font-size-multiplier));\n line-height: 1.5;\n pointer-events: none;\n }\n \n \/* ============ EXPLANATION ============ *\/\n .answer-explanation {\n margin-top: 16px;\n padding: 14px;\n background: #e8f5e9;\n border-radius: var(--radius-md);\n border-left: 4px solid var(--success);\n font-size: calc(0.88rem * var(--font-size-multiplier));\n }\n \n .answer-explanation.incorrect { background: #ffebee; border-left-color: var(--danger); }\n \n \/* ============ FONT SIZE CONTROLS ============ *\/\n .font-size-controls { display: flex; align-items: center; gap: 6px; }\n \n .font-size-btn {\n width: 36px;\n height: 36px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--light);\n color: var(--dark);\n border: 2px solid var(--gray-light);\n font-weight: 700;\n font-size: 0.85rem;\n touch-action: manipulation;\n min-height: unset;\n }\n \n .font-size-btn.active { background: var(--primary); color: white; border-color: var(--primary); }\n \n \/* ============ RESULT ============ *\/\n .result-container { display: none; text-align: center; padding: 60px 40px; }\n .result-icon { font-size: 6rem; margin-bottom: 30px; }\n \n .score {\n font-size: 3rem;\n font-weight: 800;\n margin: 30px 0;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n \n .score-detail { font-size: 1.2rem; margin-bottom: 40px; color: var(--gray); }\n .result-actions { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }\n \n \/* ============ TOPICS CHECKLIST ============ *\/\n .topics-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin: 20px 0; }\n \n .topic-check-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 15px;\n background: white;\n border-radius: var(--radius-sm);\n border: 2px solid var(--gray-light);\n }\n \n .topic-check-item input[type=\"checkbox\"] { transform: scale(1.4); cursor: pointer; min-width: 24px; min-height: 24px; }\n \n .topic-check-content { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }\n \n .topic-check-label { flex: 1; cursor: pointer; font-weight: 500; min-width: 200px; padding: 8px 0; user-select: none; }\n \n .topic-question-input {\n width: 100px;\n padding: 8px 12px;\n border: 2px solid var(--gray-light);\n border-radius: var(--radius-sm);\n font-size: 0.95rem;\n text-align: center;\n font-weight: 600;\n }\n \n .topic-question-input:disabled { background: var(--gray-light); cursor: not-allowed; }\n \n \/* ============ REMAINING ============ *\/\n .remaining-questions {\n padding: 25px;\n background: linear-gradient(135deg, var(--primary-light), var(--primary));\n border-radius: var(--radius-md);\n text-align: center;\n color: white;\n margin: 20px 0;\n }\n \n .remaining-questions-value { font-size: 3rem; font-weight: 800; margin: 10px 0; }\n \n \/* ============ SAVED CONFIGS ============ *\/\n .saved-configs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 25px; }\n \n .config-card {\n background: white;\n border-radius: var(--radius-lg);\n padding: 25px;\n box-shadow: var(--shadow-sm);\n border: 2px solid var(--gray-light);\n border-left: 5px solid var(--primary);\n transition: all 0.3s ease;\n }\n \n @media (hover: hover) { .config-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }\n \n .config-name { font-weight: 700; color: var(--dark); margin-bottom: 12px; font-size: 1.15rem; }\n .config-details { color: var(--gray); font-size: 0.9rem; margin-bottom: 18px; line-height: 1.6; }\n \n \/* ============ SEARCH RESULTS ============ *\/\n .search-result-item { background: white; border-radius: var(--radius-md); padding: 20px; margin-bottom: 15px; border-left: 4px solid var(--primary); box-shadow: var(--shadow-sm); }\n .search-result-topic { font-size: 0.85rem; color: var(--primary); font-weight: 600; margin-bottom: 10px; }\n .search-result-question { font-size: 1rem; font-weight: 500; margin-bottom: 15px; line-height: 1.6; }\n .search-result-answer { padding: 12px; background: #e8f5e9; border-radius: var(--radius-sm); color: var(--success); font-weight: 600; }\n .keyword-highlight { background: #ffeb3b; padding: 2px 4px; border-radius: 3px; font-weight: 700; }\n \n \/* ============ MODALS ============ *\/\n .modal {\n display: none;\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100%;\n background: rgba(0,0,0,0.6);\n z-index: 10000;\n justify-content: center;\n align-items: center;\n touch-action: manipulation;\n }\n \n .modal.show { display: flex; }\n \n .modal-content {\n background: white;\n padding: 40px;\n border-radius: var(--radius-lg);\n max-width: 450px;\n width: 90%;\n box-shadow: var(--shadow-lg);\n text-align: center;\n max-height: 90vh;\n overflow-y: auto;\n position: relative;\n z-index: 10001;\n }\n \n .modal-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; color: var(--dark); }\n .modal-text { color: var(--gray); margin-bottom: 30px; line-height: 1.6; }\n \n .google-signin-btn {\n width: 100%;\n padding: 16px;\n background: white;\n border: 2px solid var(--gray-light);\n border-radius: var(--radius-sm);\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n transition: all 0.3s ease;\n margin-bottom: 15px;\n touch-action: manipulation;\n min-height: 52px;\n }\n \n .google-signin-btn:hover { background: var(--light); border-color: var(--primary); }\n .google-icon { width: 24px; height: 24px; }\n \n \/* ============ LOADING ============ *\/\n .loading-overlay {\n display: none;\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100%;\n background: rgba(255,255,255,0.95);\n z-index: 99999;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n pointer-events: none;\n }\n \n .loading-overlay.show { display: flex; pointer-events: all; }\n \n .loading-spinner {\n width: 60px; height: 60px;\n border: 6px solid var(--gray-light);\n border-radius: 50%;\n border-top-color: var(--primary);\n animation: spin 1s linear infinite;\n margin-bottom: 20px;\n }\n \n @keyframes spin { to { transform: rotate(360deg); } }\n \n @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\n @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } }\n \n .loading-text { font-size: 1.2rem; font-weight: 600; }\n \n \/* ============ WRONG ANSWERS ============ *\/\n .wrong-answers-list { text-align: left; max-height: 400px; overflow-y: auto; margin-top: 20px; }\n \n .wrong-answer-item { padding: 15px; background: white; border-radius: var(--radius-md); margin-bottom: 15px; border-left: 4px solid var(--danger); }\n .wrong-answer-item .question-num { font-weight: 700; color: var(--danger); margin-bottom: 8px; }\n .wrong-answer-item .question-content { margin-bottom: 10px; font-size: 0.95rem; }\n .wrong-answer-item .answer-info { font-size: 0.85rem; color: var(--gray); }\n .wrong-answer-item .correct-answer { color: var(--success); font-weight: 600; margin-top: 5px; }\n \n \/* ============================================================\n MOBILE NAVIGATION BAR - FIX QUAN TR\u1eccNG NH\u1ea4T\n ============================================================ *\/\n .quiz-nav-mobile {\n display: none;\n position: fixed;\n bottom: 0;\n left: 0; right: 0;\n \/* FIX: Safe area cho iPhone c\u00f3 home indicator *\/\n padding-bottom: calc(8px + var(--safe-bottom));\n padding-top: 8px;\n padding-left: 12px;\n padding-right: 12px;\n background: white;\n border-top: 2px solid var(--gray-light);\n box-shadow: 0 -3px 12px rgba(0,0,0,0.12);\n \/* FIX CRITICAL: z-index cao h\u01a1n t\u1ea5t c\u1ea3 *\/\n z-index: 1000;\n align-items: center;\n gap: 8px;\n \/* FIX: height c\u1ed1 \u0111\u1ecbnh \u0111\u1ec3 t\u00ednh padding-bottom \u0111\u00fang *\/\n min-height: var(--nav-height);\n \/* FIX: Isolation \u0111\u1ea3m b\u1ea3o kh\u00f4ng b\u1ecb stacking context override *\/\n isolation: isolate;\n }\n \n \/* FIX CRITICAL: C\u00e1c n\u00fat trong mobile nav bar *\/\n .quiz-nav-mobile .nav-btn {\n \/* K\u00edch th\u01b0\u1edbc nh\u1ecf g\u1ecdn h\u01a1n nh\u01b0ng \u0111\u1ee7 touch target *\/\n height: 44px;\n min-width: 44px;\n padding: 0 16px;\n border-radius: var(--radius-sm);\n font-size: 0.85rem;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n \/* FIX CRITICAL: touch-action ph\u1ea3i l\u00e0 manipulation *\/\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n -webkit-user-select: none;\n \/* FIX: Kh\u00f4ng transform \u0111\u1ec3 tr\u00e1nh layout shift khi touch *\/\n transition: opacity 0.1s;\n \/* FIX: Pointer events lu\u00f4n on *\/\n pointer-events: auto;\n \/* FIX: Tr\u00e1nh b\u1ecb che b\u1edfi c\u00e1c element kh\u00e1c *\/\n position: relative;\n z-index: 2;\n }\n \n .quiz-nav-mobile .nav-btn:active { opacity: 0.7; }\n .quiz-nav-mobile .nav-btn:disabled { opacity: 0.35; pointer-events: none; }\n \n .quiz-nav-mobile .nav-btn.btn-prev {\n background: linear-gradient(135deg, var(--gray), #5a6268);\n flex: 0 0 auto;\n }\n \n .quiz-nav-mobile .nav-btn.btn-next {\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\n flex: 0 0 auto;\n }\n \n \/* V\u00f9ng ch\u00ednh gi\u1eefa: hi\u1ec3n th\u1ecb c\u00e2u s\u1ed1 *\/\n .quiz-nav-mobile .nav-center {\n flex: 1;\n text-align: center;\n font-weight: 700;\n font-size: 0.85rem;\n color: var(--gray);\n pointer-events: none;\n }\n \n \/* ============ RESPONSIVE MOBILE ============ *\/\n @media (max-width: 768px) {\n .content-area { padding: 12px; }\n \n .content-area.quiz-active { padding: 0; }\n \n .content-card { padding: 16px 14px; }\n \n .dashboard-grid, .topics-grid, .topics-checklist, .saved-configs {\n grid-template-columns: 1fr;\n }\n \n .dashboard-grid { gap: 12px; }\n .dashboard-card { min-height: 140px; padding: 20px 16px; }\n \n \/* FIX: \u1ea8n desktop nav *\/\n .question-nav-inline { display: none; }\n \n \/* FIX: Hi\u1ec7n mobile nav *\/\n .quiz-nav-mobile { display: flex; }\n \n .quiz-header {\n flex-direction: row;\n padding: 10px 12px;\n gap: 8px;\n }\n \n .quiz-info { gap: 8px; }\n \n .quiz-actions { gap: 6px; }\n \n .quiz-actions button {\n padding: 8px 10px;\n font-size: 0.82rem;\n min-height: 40px;\n }\n \n \/* FIX: \u1ea8n text, ch\u1ec9 hi\u1ec7n icon tr\u00ean mobile *\/\n .quiz-actions .btn-text { display: none; }\n \n .question-container {\n padding: 14px;\n margin: 10px;\n }\n \n .question-text {\n font-size: calc(0.92rem * var(--font-size-multiplier));\n line-height: 1.7;\n margin-bottom: 16px;\n }\n \n .options-container { gap: 10px; }\n \n .option {\n padding: 13px 13px;\n min-height: 50px;\n }\n \n .option-text {\n font-size: calc(0.85rem * var(--font-size-multiplier));\n line-height: 1.5;\n }\n \n .answer-explanation {\n margin-top: 16px;\n padding: 12px;\n font-size: calc(0.85rem * var(--font-size-multiplier));\n }\n \n header { padding: 12px 16px; }\n .header-text h1 { font-size: 1rem; }\n .header-text p { font-size: 0.72rem; }\n .logo { width: 42px; height: 42px; }\n .logo i { font-size: 1.8rem; }\n \n .section-title-container { flex-direction: column; align-items: flex-start; }\n .shuffle-toggle { width: 100%; justify-content: center; padding: 12px 20px; min-height: 48px; }\n \n .timer { min-width: 100px; padding: 7px 14px; font-size: 0.92rem; }\n .timer .time-value { min-width: 52px; }\n \n .font-size-controls { gap: 4px; }\n .font-size-btn { width: 32px; height: 32px; font-size: 0.78rem; }\n \n .modal-content { padding: 24px 16px; }\n .modal-content button { min-height: 48px; }\n \n .topic-check-item { padding: 14px 12px; }\n \n .result-container { padding: 30px 16px; }\n .score { font-size: 2.5rem; }\n }\n \n \/* Extra small phones *\/\n @media (max-width: 375px) {\n .quiz-actions button { padding: 7px 8px; font-size: 0.78rem; min-height: 38px; }\n .quiz-header { padding: 8px 10px; }\n .question-container { padding: 12px; margin: 8px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\" id=\"mainContainer\">\n <div class=\"loading-overlay\" id=\"loadingOverlay\">\n <div class=\"loading-spinner\"><\/div>\n <div class=\"loading-text\">\u0110ang t\u1ea3i d\u1eef li\u1ec7u…<\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"loginModal\">\n <div class=\"modal-content\">\n <h2 class=\"modal-title\"><i class=\"fas fa-user-circle\"><\/i> \u0110\u0103ng nh\u1eadp<\/h2>\n <p class=\"modal-text\">\u0110\u0103ng nh\u1eadp \u0111\u1ec3 l\u01b0u ti\u1ebfn \u0111\u1ed9 h\u1ecdc t\u1eadp v\u00e0 theo d\u00f5i k\u1ebft qu\u1ea3 c\u1ee7a b\u1ea1n<\/p>\n <button class=\"google-signin-btn\" id=\"googleSigninBtn\">\n <svg class=\"google-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 48 48\">\n <path fill=\"#FFC107\" d=\"M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z\"\/>\n <path fill=\"#FF3D00\" d=\"M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z\"\/>\n <path fill=\"#4CAF50\" d=\"M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z\"\/>\n <path fill=\"#1976D2\" d=\"M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z\"\/>\n <\/svg>\n \u0110\u0103ng nh\u1eadp v\u1edbi Google\n <\/button>\n <button class=\"home-btn\" id=\"closeLoginBtn\" style=\"width:100%\">\n <i class=\"fas fa-times\"><\/i> \u0110\u00f3ng\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"fontSizeModal\">\n <div class=\"modal-content\" style=\"max-width:450px\">\n <h2 class=\"modal-title\"><i class=\"fas fa-text-height\"><\/i> C\u00e0i \u0111\u1eb7t c\u1ee1 ch\u1eef<\/h2>\n <p class=\"modal-text\">\u0110i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc ch\u1eef khi l\u00e0m b\u00e0i thi<\/p>\n <div class=\"setting-group\" style=\"text-align:left\">\n <label class=\"setting-label\"><i class=\"fas fa-font\"><\/i> K\u00edch th\u01b0\u1edbc ch\u1eef<\/label>\n <div style=\"display:flex;flex-direction:column;gap:10px\">\n <label style=\"display:flex;align-items:center;gap:10px;padding:14px;border:2px solid var(--gray-light);border-radius:var(--radius-sm);cursor:pointer;min-height:52px;touch-action:manipulation\">\n <input type=\"radio\" name=\"fontSize\" value=\"0.85\"> <span>Nh\u1ecf (85%)<\/span>\n <\/label>\n <label style=\"display:flex;align-items:center;gap:10px;padding:14px;border:2px solid var(--gray-light);border-radius:var(--radius-sm);cursor:pointer;min-height:52px;touch-action:manipulation\">\n <input type=\"radio\" name=\"fontSize\" value=\"1\" checked> <span>M\u1eb7c \u0111\u1ecbnh (100%)<\/span>\n <\/label>\n <label style=\"display:flex;align-items:center;gap:10px;padding:14px;border:2px solid var(--gray-light);border-radius:var(--radius-sm);cursor:pointer;min-height:52px;touch-action:manipulation\">\n <input type=\"radio\" name=\"fontSize\" value=\"1.15\"> <span>L\u1edbn (115%)<\/span>\n <\/label>\n <label style=\"display:flex;align-items:center;gap:10px;padding:14px;border:2px solid var(--gray-light);border-radius:var(--radius-sm);cursor:pointer;min-height:52px;touch-action:manipulation\">\n <input type=\"radio\" name=\"fontSize\" value=\"1.3\"> <span>R\u1ea5t l\u1edbn (130%)<\/span>\n <\/label>\n <\/div>\n <\/div>\n <button class=\"submit-btn\" id=\"closeFontSizeBtn\" style=\"width:100%;margin-top:20px\">\n <i class=\"fas fa-check\"><\/i> Xong\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"saveProgressModal\">\n <div class=\"modal-content\">\n <h2 class=\"modal-title\"><i class=\"fas fa-save\"><\/i> L\u01b0u ti\u1ebfn \u0111\u1ed9<\/h2>\n <p class=\"modal-text\">B\u1ea1n c\u00f3 mu\u1ed1n l\u01b0u ti\u1ebfn \u0111\u1ed9 l\u00e0m b\u00e0i \u0111\u1ec3 ti\u1ebfp t\u1ee5c l\u1ea7n sau kh\u00f4ng?<\/p>\n <div style=\"display:flex;gap:10px\">\n <button class=\"submit-btn\" id=\"saveProgressBtn\" style=\"flex:1\"><i class=\"fas fa-check\"><\/i> L\u01b0u<\/button>\n <button class=\"home-btn\" id=\"exitNoSaveBtn\" style=\"flex:1\"><i class=\"fas fa-times\"><\/i> Kh\u00f4ng l\u01b0u<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"resumeProgressModal\">\n <div class=\"modal-content\">\n <h2 class=\"modal-title\"><i class=\"fas fa-play-circle\"><\/i> Ti\u1ebfp t\u1ee5c l\u00e0m b\u00e0i<\/h2>\n <p class=\"modal-text\" id=\"resumeProgressText\"><\/p>\n <div style=\"display:flex;gap:10px\">\n <button class=\"submit-btn\" id=\"resumeProgressBtn\" style=\"flex:1\"><i class=\"fas fa-check\"><\/i> Ti\u1ebfp t\u1ee5c<\/button>\n <button class=\"home-btn\" id=\"startNewQuizBtn\" style=\"flex:1\"><i class=\"fas fa-redo\"><\/i> L\u00e0m m\u1edbi<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"wrongAnswersModal\">\n <div class=\"modal-content\" style=\"max-width:700px\">\n <h2 class=\"modal-title\"><i class=\"fas fa-times-circle\"><\/i> C\u00e2u tr\u1ea3 l\u1eddi sai<\/h2>\n <div class=\"wrong-answers-list\" id=\"wrongAnswersList\"><\/div>\n <button class=\"home-btn\" id=\"closeWrongAnswersBtn\" style=\"width:100%;margin-top:20px\">\n <i class=\"fas fa-times\"><\/i> \u0110\u00f3ng\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"examDetailsModal\">\n <div class=\"modal-content\" style=\"max-width:600px\">\n <h2 class=\"modal-title\"><i class=\"fas fa-info-circle\"><\/i> Chi ti\u1ebft \u0111\u1ec1 thi<\/h2>\n <div id=\"examDetailsContent\" style=\"text-align:left\"><\/div>\n <button class=\"home-btn\" id=\"closeExamDetailsBtn\" style=\"width:100%;margin-top:20px\">\n <i class=\"fas fa-times\"><\/i> \u0110\u00f3ng\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"examSettingsModal\">\n <div class=\"modal-content\" style=\"max-width:500px\">\n <h2 class=\"modal-title\"><i class=\"fas fa-cog\"><\/i> C\u00e0i \u0111\u1eb7t \u0111\u1ec1 thi<\/h2>\n <div style=\"text-align:left\">\n <div class=\"setting-group\">\n <label class=\"setting-label\"><i class=\"fas fa-clock\"><\/i> Th\u1eddi gian thi (ph\u00fat)<\/label>\n <input type=\"number\" class=\"setting-input\" id=\"editExamTime\" min=\"5\" max=\"180\" placeholder=\"Nh\u1eadp th\u1eddi gian (5-180 ph\u00fat)\">\n <small style=\"color:var(--gray);display:block;margin-top:8px\"><i class=\"fas fa-info-circle\"><\/i> \u0110\u1ec1 xu\u1ea5t: 30-90 ph\u00fat | M\u1eb7c \u0111\u1ecbnh: 45 ph\u00fat<\/small>\n <\/div>\n <div class=\"setting-group\">\n <label class=\"setting-label\"><i class=\"fas fa-random\"><\/i> T\u1ef7 l\u1ec7 tr\u00f9ng l\u1eb7p c\u00e2u h\u1ecfi (%)<\/label>\n <input type=\"number\" class=\"setting-input\" id=\"editExamOverlap\" min=\"0\" max=\"100\" placeholder=\"Nh\u1eadp t\u1ef7 l\u1ec7 (0-100%)\">\n <small style=\"color:var(--gray);display:block;margin-top:8px\"><i class=\"fas fa-info-circle\"><\/i> <strong>0%<\/strong> = Kh\u00f4ng tr\u00f9ng | <strong>100%<\/strong> = To\u00e0n b\u1ed9 gi\u1ed1ng nhau | M\u1eb7c \u0111\u1ecbnh: 20%<\/small>\n <\/div>\n <\/div>\n <div style=\"display:flex;gap:10px;margin-top:20px\">\n <button class=\"submit-btn\" id=\"saveExamSettingsBtn\" style=\"flex:1\"><i class=\"fas fa-save\"><\/i> L\u01b0u<\/button>\n <button id=\"resetExamSettingsBtn\" style=\"flex:1;background:linear-gradient(135deg,#ff9800,#ff6f00);display:none\"><i class=\"fas fa-undo\"><\/i> Kh\u00f4i ph\u1ee5c<\/button>\n <button class=\"home-btn\" id=\"closeExamSettingsBtn\" style=\"flex:1\"><i class=\"fas fa-times\"><\/i> H\u1ee7y<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"practiceProgressModal\">\n <div class=\"modal-content\">\n <h2 class=\"modal-title\"><i class=\"fas fa-save\"><\/i> L\u01b0u ti\u1ebfn \u0111\u1ed9 \u00f4n t\u1eadp<\/h2>\n <p class=\"modal-text\" id=\"practiceProgressText\">B\u1ea1n c\u00f3 mu\u1ed1n l\u01b0u ti\u1ebfn \u0111\u1ed9 \u00f4n t\u1eadp \u0111\u1ec3 ti\u1ebfp t\u1ee5c l\u1ea7n sau kh\u00f4ng?<\/p>\n <div style=\"display:flex;gap:10px\">\n <button class=\"submit-btn\" id=\"savePracticeBtn\" style=\"flex:1\"><i class=\"fas fa-check\"><\/i> L\u01b0u<\/button>\n <button class=\"home-btn\" id=\"exitPracticeNoSaveBtn\" style=\"flex:1\"><i class=\"fas fa-times\"><\/i> Kh\u00f4ng l\u01b0u<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <header id=\"mainHeader\">\n <div class=\"logo-container\">\n <div class=\"logo\"><i class=\"fas fa-graduation-cap\"><\/i><\/div>\n <div class=\"header-text\">\n <h1>H\u1ec6 TH\u1ed0NG \u00d4N THI AGRIBANK – NGOC ANH<\/h1>\n <p>N\u1ec1n t\u1ea3ng luy\u1ec7n thi tr\u1ef1c tuy\u1ebfn chuy\u00ean nghi\u1ec7p<\/p>\n <\/div>\n <\/div>\n <div class=\"user-info\" id=\"userInfo\">\n <button id=\"fontSizeHeaderBtn\" style=\"padding:8px 14px;font-size:0.88rem\">\n <i class=\"fas fa-text-height\"><\/i>\n <\/button>\n <button id=\"loginBtn\">\n <i class=\"fas fa-sign-in-alt\"><\/i> \u0110\u0103ng nh\u1eadp\n <\/button>\n <\/div>\n <\/header>\n \n <div class=\"main-content\">\n <div class=\"content-area\" id=\"contentArea\">\n \n <div class=\"content-card\" id=\"dashboard\">\n <div class=\"section-title-container\">\n <h2 class=\"section-title\"><i class=\"fas fa-th-large\"><\/i> B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n<\/h2>\n <div class=\"shuffle-toggle\" id=\"shuffleToggleContainer\">\n <input type=\"checkbox\" id=\"shuffleAnswersToggle\">\n <label for=\"shuffleAnswersToggle\"><i class=\"fas fa-random\"><\/i> \u0110\u1ea3o \u0111\u00e1p \u00e1n<\/label>\n <\/div>\n <\/div>\n \n <div style=\"margin-bottom:20px;padding:15px;background:var(--light);border-radius:var(--radius-md);text-align:center\">\n <p style=\"margin-bottom:10px;color:var(--gray)\"><strong>Tr\u1ea1ng th\u00e1i:<\/strong> <span id=\"dataStatus\">\u0110ang t\u1ea3i…<\/span><\/p>\n <div style=\"display:flex;gap:10px;justify-content:center;flex-wrap:wrap\">\n <button id=\"reloadDataBtn\" style=\"padding:10px 18px;font-size:0.88rem\"><i class=\"fas fa-sync-alt\"><\/i> T\u1ea3i l\u1ea1i d\u1eef li\u1ec7u<\/button>\n <button id=\"clearCacheBtn\" style=\"padding:10px 18px;font-size:0.88rem;background:linear-gradient(135deg,#ff9800,#ff6f00)\"><i class=\"fas fa-trash-alt\"><\/i> X\u00f3a cache<\/button>\n <\/div>\n <\/div>\n \n <div class=\"dashboard-grid\">\n <div class=\"dashboard-card\" id=\"searchKeyword\">\n <div class=\"card-icon\"><i class=\"fas fa-search\"><\/i><\/div>\n <div class=\"card-title\">T\u00ecm ki\u1ebfm t\u1eeb kh\u00f3a<\/div>\n <div class=\"card-description\">T\u00ecm c\u00e2u h\u1ecfi v\u00e0 xem \u0111\u00e1p \u00e1n<\/div>\n <\/div>\n <div class=\"dashboard-card\" id=\"practiceByTopic\">\n <div class=\"card-icon\"><i class=\"fas fa-book-reader\"><\/i><\/div>\n <div class=\"card-title\">\u00d4n t\u1eadp theo ch\u1ee7 \u0111\u1ec1<\/div>\n <div class=\"card-description\">Luy\u1ec7n t\u1eadp v\u00e0 bi\u1ebft ngay \u0111\u00e1p \u00e1n<\/div>\n <\/div>\n <div class=\"dashboard-card\" id=\"customExam\">\n <div class=\"card-icon\"><i class=\"fas fa-sliders-h\"><\/i><\/div>\n <div class=\"card-title\">T\u1ea1o \u0111\u1ec1 t\u00f9y ch\u1ec9nh<\/div>\n <div class=\"card-description\">T\u1ea1o \u0111\u1ec1 theo \u00fd mu\u1ed1n<\/div>\n <\/div>\n <div class=\"dashboard-card\" id=\"savedExams\">\n <div class=\"card-icon\"><i class=\"fas fa-bookmark\"><\/i><\/div>\n <div class=\"card-title\">\u0110\u1ec1 \u0111\u00e3 l\u01b0u<\/div>\n <div class=\"card-description\">C\u00e1c \u0111\u1ec1 thi \u0111\u00e3 t\u1ea1o<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"content-card\" id=\"searchSection\" style=\"display:none\">\n <div class=\"section-header\">\n <h2 class=\"section-title\"><i class=\"fas fa-search\"><\/i> T\u00ecm ki\u1ebfm t\u1eeb kh\u00f3a<\/h2>\n <button class=\"home-btn\" id=\"searchHomeBtn\"><i class=\"fas fa-home\"><\/i> Trang ch\u1ee7<\/button>\n <\/div>\n <div style=\"margin-bottom:30px\">\n <div style=\"display:flex;gap:10px;margin-bottom:20px\">\n <input type=\"text\" id=\"searchInput\" class=\"setting-input\" placeholder=\"Nh\u1eadp t\u1eeb kh\u00f3a c\u1ea7n t\u00ecm...\" style=\"flex:1\">\n <button id=\"searchBtn\" style=\"padding:12px 20px\"><i class=\"fas fa-search\"><\/i> T\u00ecm<\/button>\n <\/div>\n <div style=\"padding:12px;background:#e3f2fd;border-radius:var(--radius-sm);border-left:4px solid #1976d2\">\n <i class=\"fas fa-info-circle\"><\/i> <strong>H\u01b0\u1edbng d\u1eabn:<\/strong> Nh\u1eadp t\u1eeb kh\u00f3a \u0111\u1ec3 t\u00ecm c\u00e1c c\u00e2u h\u1ecfi c\u00f3 ch\u1ee9a t\u1eeb \u0111\u00f3.\n <\/div>\n <\/div>\n <div id=\"searchResults\"><\/div>\n <\/div>\n \n \n <div class=\"content-card\" id=\"topicSelection\" style=\"display:none\">\n <div class=\"section-header\">\n <h2 class=\"section-title\"><i class=\"fas fa-list-ul\"><\/i> \u00d4n t\u1eadp theo ch\u1ee7 \u0111\u1ec1<\/h2>\n <button class=\"home-btn\" id=\"topicHomeBtn\"><i class=\"fas fa-home\"><\/i> Trang ch\u1ee7<\/button>\n <\/div>\n <div class=\"search-box\">\n <input type=\"text\" id=\"topicSearchInput\" placeholder=\"\ud83d\udd0d T\u00ecm ki\u1ebfm ch\u1ee7 \u0111\u1ec1 theo t\u00ean...\">\n <\/div>\n <div class=\"topics-grid\" id=\"topicsGrid\"><\/div>\n <\/div>\n \n \n <div class=\"content-card\" id=\"customExamSection\" style=\"display:none\">\n <div class=\"section-header\">\n <h2 class=\"section-title\"><i class=\"fas fa-sliders-h\"><\/i> T\u1ea1o \u0111\u1ec1 thi t\u00f9y ch\u1ec9nh<\/h2>\n <button class=\"home-btn\" id=\"customHomeBtn\"><i class=\"fas fa-home\"><\/i> Trang ch\u1ee7<\/button>\n <\/div>\n <div style=\"padding:30px;background:var(--light);border-radius:var(--radius-lg)\">\n <div class=\"setting-group\">\n <label class=\"setting-label\">T\u00ean b\u1ed9 \u0111\u1ec1<\/label>\n <input type=\"text\" class=\"setting-input\" id=\"configName\" placeholder=\"V\u00ed d\u1ee5: \u0110\u1ec1 \u00f4n t\u1eadp tu\u1ea7n 1\">\n <\/div>\n <div class=\"remaining-questions\">\n <div style=\"opacity:0.95;margin-bottom:10px\">S\u1ed1 c\u00e2u h\u1ecfi \u0111\u00e3 ch\u1ecdn<\/div>\n <div class=\"remaining-questions-value\" id=\"selectedQuestionsCount\">0<\/div>\n <div style=\"opacity:0.95;margin-top:10px\">\n <div style=\"margin-bottom:8px\">T\u1ed5ng c\u00e2u c\u00f3 s\u1eb5n: <strong><span id=\"totalQuestionsDisplay\">0<\/span><\/strong><\/div>\n <div style=\"color:#ffeb3b\">S\u1ed1 c\u00e2u c\u00f2n c\u00f3 th\u1ec3 ch\u1ecdn th\u00eam: <strong><span id=\"remainingQuestionsCount\">0<\/span><\/strong><\/div>\n <\/div>\n <\/div>\n <div class=\"setting-group\">\n <label class=\"setting-label\">Ch\u1ecdn ch\u1ee7 \u0111\u1ec1 v\u00e0 s\u1ed1 c\u00e2u h\u1ecfi<\/label>\n <div class=\"topics-checklist\" id=\"topicsChecklist\"><\/div>\n <\/div>\n <div class=\"setting-group\">\n <label class=\"setting-label\"><i class=\"fas fa-clock\"><\/i> Th\u1eddi gian thi (ph\u00fat)<\/label>\n <input type=\"number\" class=\"setting-input\" id=\"customExamTime\" value=\"45\" min=\"5\" max=\"180\">\n <\/div>\n <div class=\"setting-group\">\n <label class=\"setting-label\"><i class=\"fas fa-random\"><\/i> T\u1ef7 l\u1ec7 tr\u00f9ng l\u1eb7p c\u00e2u h\u1ecfi gi\u1eefa c\u00e1c l\u1ea7n thi (%)<\/label>\n <input type=\"number\" class=\"setting-input\" id=\"customOverlapPercent\" value=\"20\" min=\"0\" max=\"100\">\n <small style=\"color:var(--gray);display:block;margin-top:8px\"><i class=\"fas fa-info-circle\"><\/i> <strong>0%<\/strong> = Kh\u00f4ng tr\u00f9ng l\u1eb7p | <strong>100%<\/strong> = To\u00e0n b\u1ed9 gi\u1ed1ng nhau<\/small>\n <\/div>\n <div style=\"display:flex;gap:15px;margin-top:25px;flex-wrap:wrap\">\n <button id=\"saveConfigBtn\" class=\"submit-btn\" style=\"flex:1;min-width:200px\"><i class=\"fas fa-save\"><\/i> L\u01b0u c\u1ea5u h\u00ecnh<\/button>\n <button id=\"startCustomExamBtn\" class=\"submit-btn\" style=\"flex:1;min-width:200px\"><i class=\"fas fa-play-circle\"><\/i> B\u1eaft \u0111\u1ea7u thi<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"content-card\" id=\"savedExamsSection\" style=\"display:none\">\n <div class=\"section-header\">\n <h2 class=\"section-title\"><i class=\"fas fa-bookmark\"><\/i> \u0110\u1ec1 thi \u0111\u00e3 l\u01b0u<\/h2>\n <button class=\"home-btn\" id=\"savedHomeBtn\"><i class=\"fas fa-home\"><\/i> Trang ch\u1ee7<\/button>\n <\/div>\n <div style=\"margin-bottom:20px;padding:15px;background:linear-gradient(135deg,#fff9f0 0%,#ffffff 100%);border-radius:var(--radius-md);border-left:4px solid #ff9800\">\n <div style=\"display:flex;align-items:center;gap:12px;margin-bottom:10px\">\n <i class=\"fas fa-info-circle\" style=\"color:#ff9800;font-size:1.5rem\"><\/i>\n <strong style=\"color:#e65100;font-size:1.1rem\">H\u01b0\u1edbng d\u1eabn<\/strong>\n <\/div>\n <div style=\"color:var(--gray);line-height:1.8\">\n <div style=\"margin-bottom:8px\">\ud83d\udccb <strong>\u0110\u1ec1 h\u1ec7 th\u1ed1ng:<\/strong> C\u00e1c b\u1ed9 \u0111\u1ec1 \u0111\u01b0\u1ee3c t\u1ea1o s\u1eb5n b\u1edfi Agribank<\/div>\n <div style=\"margin-bottom:8px\">\ud83d\udc64 <strong>\u0110\u1ec1 c\u1ee7a t\u00f4i:<\/strong> C\u00e1c b\u1ed9 \u0111\u1ec1 b\u1ea1n t\u1ef1 t\u1ea1o<\/div>\n <div>\ud83d\udca1 <strong>L\u01b0u \u00fd:<\/strong> C\u00e0i \u0111\u1eb7t c\u1ee7a \u0111\u1ec1 h\u1ec7 th\u1ed1ng \u0111\u01b0\u1ee3c l\u01b0u ri\u00eang<\/div>\n <\/div>\n <\/div>\n <div class=\"search-box\">\n <input type=\"text\" id=\"savedExamSearchInput\" placeholder=\"\ud83d\udd0d T\u00ecm ki\u1ebfm \u0111\u1ec1 thi theo t\u00ean...\">\n <\/div>\n <div class=\"saved-configs\" id=\"savedConfigsList\"><\/div>\n <\/div>\n \n \n <div class=\"quiz-container\" id=\"quizContainer\">\n <div class=\"quiz-header\">\n <div class=\"quiz-info\">\n <div class=\"timer\" id=\"timer\">\n <i class=\"fas fa-clock\"><\/i>\n <span class=\"time-value\" id=\"timeDisplay\">45:00<\/span>\n <\/div>\n <div class=\"font-size-controls\">\n <button class=\"font-size-btn\" id=\"fontSmBtn\" title=\"Ch\u1eef nh\u1ecf\">A-<\/button>\n <button class=\"font-size-btn active\" id=\"fontMdBtn\" title=\"Ch\u1eef m\u1eb7c \u0111\u1ecbnh\">A<\/button>\n <button class=\"font-size-btn\" id=\"fontLgBtn\" title=\"Ch\u1eef l\u1edbn\">A+<\/button>\n <\/div>\n <\/div>\n <div class=\"quiz-actions\">\n <button class=\"home-btn\" id=\"exitQuizBtn\">\n <i class=\"fas fa-home\"><\/i> <span class=\"btn-text\">Tho\u00e1t<\/span>\n <\/button>\n <button id=\"showAnswerBtn\" class=\"show-answer-btn\" style=\"display:none\">\n <i class=\"fas fa-eye\"><\/i> <span class=\"btn-text\">\u0110\u00e1p \u00e1n<\/span>\n <\/button>\n <button id=\"submitQuizBtn\" class=\"submit-btn\">\n <i class=\"fas fa-paper-plane\"><\/i> <span class=\"btn-text\">N\u1ed9p<\/span>\n <\/button>\n <button id=\"toggleFullscreenBtn\" class=\"fullscreen-btn\">\n <i class=\"fas fa-expand\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"question-container\" id=\"questionContainer\">\n <div class=\"question-header\">\n <div class=\"question-number\" id=\"questionNumber\">\n <i class=\"fas fa-question-circle\"><\/i> C\u00e2u 1\n <\/div>\n \n <div class=\"question-nav-inline\">\n <button id=\"prevBtnInline\" disabled>\n <i class=\"fas fa-chevron-left\"><\/i> Tr\u01b0\u1edbc\n <\/button>\n <button id=\"nextBtnInline\">\n Sau <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <div class=\"question-text\" id=\"questionText\"><\/div>\n <div class=\"options-container\" id=\"optionsContainer\"><\/div>\n <div id=\"answerExplanation\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"content-card result-container\" id=\"resultContainer\">\n <div class=\"result-icon\" id=\"resultIcon\">\ud83c\udf89<\/div>\n <h2 style=\"font-weight:700;margin-bottom:10px\">Ch\u00fac m\u1eebng b\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh!<\/h2>\n <div class=\"score\" id=\"score\">\u0110i\u1ec3m: 0\/0<\/div>\n <div class=\"score-detail\" id=\"scoreDetail\"><\/div>\n <div id=\"userResult\" style=\"margin:20px 0;color:var(--gray);font-size:1rem\"><\/div>\n <div class=\"result-actions\">\n <button id=\"goHomeResultBtn\"><i class=\"fas fa-home\"><\/i> V\u1ec1 trang ch\u1ee7<\/button>\n <button id=\"retryQuizBtn\"><i class=\"fas fa-redo\"><\/i> L\u00e0m l\u1ea1i<\/button>\n <button id=\"showWrongAnswersBtn\" style=\"background:linear-gradient(135deg,var(--danger),#d32f2f)\">\n <i class=\"fas fa-times-circle\"><\/i> Xem c\u00e2u sai\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"quiz-nav-mobile\" id=\"quizNavMobile\">\n <button class=\"nav-btn btn-prev\" id=\"prevBtnMobile\" disabled>\n <i class=\"fas fa-chevron-left\"><\/i> Tr\u01b0\u1edbc\n <\/button>\n <div class=\"nav-center\" id=\"navCenter\">1 \/ 1<\/div>\n <button class=\"nav-btn btn-next\" id=\"nextBtnMobile\">\n Sau <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n 'use strict';\n \n console.log('\ud83d\ude80 Kh\u1edfi \u0111\u1ed9ng \u1ee9ng d\u1ee5ng...');\n \n const API_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbwsRyrWtS4nsUBunCx-70H6wkYWBMH2rgesyopAx2ipMLacsXSRfYwOPOs_Ldjl7OC4\/exec';\n const CACHE_KEY = 'agribank_data_cache';\n const CACHE_VERSION_KEY = 'agribank_cache_version';\n const CACHE_DURATION = 24 * 60 * 60 * 1000;\n const DEFAULT_EXAM_TIME = 45;\n const DEFAULT_OVERLAP_PERCENT = 20;\n \n let topics = [];\n let predefinedExams = [];\n let currentTopic = null;\n let currentQuestions = [];\n let currentQuestionIndex = 0;\n let userAnswers = [];\n let timerInterval = null;\n let timeLeft = 2700;\n let topicQuestionCounts = {};\n let savedConfigs = [];\n let currentUser = null;\n let quizMode = 'practice';\n let showAnswersEnabled = false;\n let currentExamId = null;\n let savedProgress = null;\n let pendingQuizData = null;\n let isFullscreen = false;\n let shuffleAnswersEnabled = false;\n let questionShuffleMap = {};\n let currentPracticeId = null;\n let currentEditingExamId = null;\n let systemExamSettings = {};\n \n \/\/ ================================================================\n \/\/ FIX CRITICAL: addTapListener ho\u00e0n to\u00e0n m\u1edbi\n \/\/ D\u00f9ng pointer events thay v\u00ec mix touch + click \u0111\u1ec3 tr\u00e1nh double fire\n \/\/ ================================================================\n function addTapListener(element, handler) {\n if (!element) return;\n \n \/\/ D\u00f9ng pointerup + pointermove tracking - \u0111\u01a1n gi\u1ea3n nh\u1ea5t, \u00edt bug nh\u1ea5t\n let pointerDown = false;\n let moved = false;\n let startX = 0, startY = 0;\n \n element.addEventListener('pointerdown', function(e) {\n pointerDown = true;\n moved = false;\n startX = e.clientX;\n startY = e.clientY;\n }, { passive: true });\n \n element.addEventListener('pointermove', function(e) {\n if (!pointerDown) return;\n const dx = Math.abs(e.clientX - startX);\n const dy = Math.abs(e.clientY - startY);\n if (dx > 8 || dy > 8) moved = true;\n }, { passive: true });\n \n element.addEventListener('pointerup', function(e) {\n if (pointerDown && !moved) {\n e.preventDefault();\n handler.call(this, e);\n }\n pointerDown = false;\n moved = false;\n });\n \n element.addEventListener('pointercancel', function() {\n pointerDown = false;\n moved = false;\n }, { passive: true });\n }\n \n \/\/ Elements\n const dashboard = document.getElementById('dashboard');\n const searchSection = document.getElementById('searchSection');\n const topicSelection = document.getElementById('topicSelection');\n const customExamSection = document.getElementById('customExamSection');\n const savedExamsSection = document.getElementById('savedExamsSection');\n const quizContainer = document.getElementById('quizContainer');\n const resultContainer = document.getElementById('resultContainer');\n const loadingOverlay = document.getElementById('loadingOverlay');\n const loginModal = document.getElementById('loginModal');\n const fontSizeModal = document.getElementById('fontSizeModal');\n const saveProgressModal = document.getElementById('saveProgressModal');\n const resumeProgressModal = document.getElementById('resumeProgressModal');\n const wrongAnswersModal = document.getElementById('wrongAnswersModal');\n const mainContainer = document.getElementById('mainContainer');\n const mainHeader = document.getElementById('mainHeader');\n const contentArea = document.getElementById('contentArea');\n const examDetailsModal = document.getElementById('examDetailsModal');\n const examSettingsModal = document.getElementById('examSettingsModal');\n const quizNavMobile = document.getElementById('quizNavMobile');\n const practiceProgressModal = document.getElementById('practiceProgressModal');\n \n function isMobile() {\n return window.innerWidth <= 768 || \/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(navigator.userAgent);\n }\n \n function showLoginModal() { loginModal.classList.add('show'); }\n function closeLoginModal() { loginModal.classList.remove('show'); }\n function showFontSizeModal() { fontSizeModal.classList.add('show'); }\n function closeFontSizeModal() { fontSizeModal.classList.remove('show'); }\n \n function changeFontSize(multiplier) {\n document.documentElement.style.setProperty('--font-size-multiplier', multiplier);\n localStorage.setItem('agribank_font_size', multiplier);\n document.querySelectorAll('.font-size-btn').forEach(btn => {\n btn.classList.remove('active');\n const t = btn.textContent.trim();\n if ((t === 'A-' && multiplier === 0.85) ||\n (t === 'A' && multiplier === 1) ||\n (t === 'A+' && multiplier === 1.15)) {\n btn.classList.add('active');\n }\n });\n }\n \n function loadFontSize() {\n const saved = localStorage.getItem('agribank_font_size');\n if (saved) {\n const m = parseFloat(saved);\n document.documentElement.style.setProperty('--font-size-multiplier', m);\n document.querySelectorAll('input[name=\"fontSize\"]').forEach(r => {\n if (parseFloat(r.value) === m) r.checked = true;\n });\n changeFontSize(m);\n }\n }\n \n function toggleShuffleAnswers() {\n shuffleAnswersEnabled = document.getElementById('shuffleAnswersToggle').checked;\n localStorage.setItem('agribank_shuffle_answers', shuffleAnswersEnabled);\n if (quizContainer.style.display !== 'none') {\n questionShuffleMap = {};\n displayQuestion(currentQuestionIndex);\n }\n }\n \n function loadShuffleSettings() {\n const saved = localStorage.getItem('agribank_shuffle_answers');\n if (saved !== null) {\n shuffleAnswersEnabled = saved === 'true';\n const cb = document.getElementById('shuffleAnswersToggle');\n if (cb) cb.checked = shuffleAnswersEnabled;\n }\n }\n \n function hasReferenceAnswer(question) {\n const all = [question.q, question.a, question.b, question.c, question.d].join(' ').toLowerCase();\n return \/c\u1ea3\\s*\\d+\\s*v\u00e0\\s*\\d+|c\u1ea3\\s*[a-d]\\s*v\u00e0\\s*[a-d]|\u0111\u1ec1u\\s*\u0111\u00fang|\u0111\u1ec1u\\s*sai|t\u1ea5t\\s*c\u1ea3\\s*\u0111\u1ec1u|kh\u00f4ng\\s*c\u00e2u\\s*n\u00e0o\\s*\u0111\u00fang\/i.test(all);\n }\n \n function shuffleAnswers(question, questionIndex) {\n if (!shuffleAnswersEnabled || hasReferenceAnswer(question)) {\n return { shuffled: question, mapping: [0,1,2,3] };\n }\n if (questionShuffleMap[questionIndex]) return questionShuffleMap[questionIndex];\n const answers = ['a','b','c','d'].map((k,i) => ({ key: k, text: question[k], originalIndex: i }));\n for (let i = answers.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [answers[i], answers[j]] = [answers[j], answers[i]];\n }\n const shuffledQuestion = { ...question };\n answers.forEach((a,i) => { shuffledQuestion['abcd'[i]] = a.text; });\n const mapping = answers.map(a => a.originalIndex);\n shuffledQuestion.correct = mapping.indexOf(question.correct - 1) + 1;\n const result = { shuffled: shuffledQuestion, mapping };\n questionShuffleMap[questionIndex] = result;\n return result;\n }\n \n function toggleFullscreen() {\n isFullscreen ? exitFullscreenMode() : enterFullscreenMode();\n }\n \n function enterFullscreenMode() {\n if (isMobile()) {\n mainContainer.classList.add('fullscreen-active');\n document.body.classList.add('fullscreen-mode');\n isFullscreen = true;\n updateFullscreenButton(true);\n } else {\n const elem = document.documentElement;\n (elem.requestFullscreen ? elem.requestFullscreen() : Promise.reject())\n .then(() => { isFullscreen = true; updateFullscreenButton(true); })\n .catch(() => {\n mainContainer.classList.add('fullscreen-active');\n document.body.classList.add('fullscreen-mode');\n isFullscreen = true;\n updateFullscreenButton(true);\n });\n }\n }\n \n function exitFullscreenMode() {\n mainContainer.classList.remove('fullscreen-active');\n document.body.classList.remove('fullscreen-mode');\n if (!isMobile() && document.fullscreenElement && document.exitFullscreen) {\n document.exitFullscreen().catch(() => {});\n }\n isFullscreen = false;\n updateFullscreenButton(false);\n }\n \n function updateFullscreenButton(isFs) {\n const btn = document.getElementById('toggleFullscreenBtn');\n if (!btn) return;\n const icon = btn.querySelector('i');\n if (isFs) { icon.className = 'fas fa-compress'; btn.classList.add('active'); }\n else { icon.className = 'fas fa-expand'; btn.classList.remove('active'); }\n }\n \n if (!isMobile()) {\n document.addEventListener('fullscreenchange', () => {\n if (!document.fullscreenElement) {\n mainContainer.classList.remove('fullscreen-active');\n document.body.classList.remove('fullscreen-mode');\n isFullscreen = false;\n updateFullscreenButton(false);\n }\n });\n }\n \n \/\/ FIX: C\u1eadp nh\u1eadt nav center text\n function updateNavCenter() {\n const nav = document.getElementById('navCenter');\n if (nav && currentQuestions.length > 0) {\n nav.textContent = `${currentQuestionIndex + 1} \/ ${currentQuestions.length}`;\n }\n }\n \n function searchQuestions() {\n const keyword = document.getElementById('searchInput').value.trim().toLowerCase();\n const resultsDiv = document.getElementById('searchResults');\n if (!keyword) { resultsDiv.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--gray)\">Vui l\u00f2ng nh\u1eadp t\u1eeb kh\u00f3a<\/p>'; return; }\n resultsDiv.innerHTML = '<div style=\"text-align:center;padding:20px\"><i class=\"fas fa-spinner fa-spin\" style=\"font-size:2rem;color:var(--primary)\"><\/i><\/div>';\n setTimeout(() => {\n const results = [], labels = ['A','B','C','D'], keys = ['a','b','c','d'];\n topics.forEach(topic => {\n topic.questions.forEach(q => {\n if (q.q.toLowerCase().includes(keyword)) {\n results.push({ topic: topic.name, question: q.q, answer: `${labels[q.correct-1]}. ${q[keys[q.correct-1]]}` });\n }\n });\n });\n if (results.length === 0) {\n resultsDiv.innerHTML = `<div style=\"text-align:center;padding:60px 20px\"><i class=\"fas fa-search\" style=\"font-size:4rem;color:var(--gray-light);margin-bottom:20px\"><\/i><h3 style=\"color:var(--gray)\">Kh\u00f4ng t\u00ecm th\u1ea5y k\u1ebft qu\u1ea3<\/h3><\/div>`;\n } else {\n let html = `<div style=\"margin-bottom:20px;padding:15px;background:#e8f5e9;border-radius:var(--radius-md);border-left:4px solid var(--success)\"><strong>T\u00ecm th\u1ea5y ${results.length} c\u00e2u h\u1ecfi<\/strong><\/div>`;\n results.forEach((r,i) => {\n const hq = r.question.replace(new RegExp(keyword,'gi'), m => `<span class=\"keyword-highlight\">${m}<\/span>`);\n html += `<div class=\"search-result-item\"><div class=\"search-result-topic\"><i class=\"fas fa-book\"><\/i> ${r.topic}<\/div><div class=\"search-result-question\"><strong>C\u00e2u ${i+1}:<\/strong> ${hq}<\/div><div class=\"search-result-answer\"><i class=\"fas fa-check-circle\"><\/i> <strong>\u0110\u00e1p \u00e1n:<\/strong> ${r.answer}<\/div><\/div>`;\n });\n resultsDiv.innerHTML = html;\n }\n }, 300);\n }\n \n function signInWithGoogle() {\n const email = prompt('Nh\u1eadp email c\u1ee7a b\u1ea1n:');\n if (email) {\n currentUser = { email, name: email.split('@')[0], loginTime: new Date().toISOString() };\n localStorage.setItem('agribank_user', JSON.stringify(currentUser));\n updateUserUI();\n closeLoginModal();\n loadUserConfigs();\n alert(`\u0110\u0103ng nh\u1eadp th\u00e0nh c\u00f4ng!\\nXin ch\u00e0o ${currentUser.name}!`);\n }\n }\n \n function updateUserUI() {\n const userInfo = document.getElementById('userInfo');\n const fontBtnHtml = `<button id=\"fontSizeHeaderBtn\" style=\"padding:8px 14px;font-size:0.88rem\"><i class=\"fas fa-text-height\"><\/i><\/button>`;\n if (currentUser) {\n userInfo.innerHTML = `${fontBtnHtml}<button id=\"signOutBtn\" style=\"padding:8px 14px;font-size:0.88rem\"><i class=\"fas fa-sign-out-alt\"><\/i> \u0110\u0103ng xu\u1ea5t<\/button>`;\n addTapListener(document.getElementById('signOutBtn'), signOut);\n } else {\n userInfo.innerHTML = `${fontBtnHtml}<button id=\"loginBtn\"><i class=\"fas fa-sign-in-alt\"><\/i> \u0110\u0103ng nh\u1eadp<\/button>`;\n addTapListener(document.getElementById('loginBtn'), showLoginModal);\n }\n addTapListener(document.getElementById('fontSizeHeaderBtn'), showFontSizeModal);\n }\n \n function signOut() {\n if (confirm('B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n \u0111\u0103ng xu\u1ea5t?')) {\n currentUser = null;\n localStorage.removeItem('agribank_user');\n updateUserUI();\n savedConfigs = [];\n goHome();\n }\n }\n \n function checkLogin() {\n const saved = localStorage.getItem('agribank_user');\n if (saved) { currentUser = JSON.parse(saved); updateUserUI(); loadUserConfigs(); }\n loadSystemExamSettings();\n }\n \n function getUserConfigKey() { return currentUser ? `agribank_configs_${currentUser.email}` : 'agribank_configs_guest'; }\n function loadUserConfigs() { const s = localStorage.getItem(getUserConfigKey()); savedConfigs = s ? JSON.parse(s) : []; }\n function saveUserConfigs() { localStorage.setItem(getUserConfigKey(), JSON.stringify(savedConfigs)); }\n function loadSystemExamSettings() { const s = localStorage.getItem('agribank_system_exam_settings'); systemExamSettings = s ? JSON.parse(s) : {}; }\n function saveSystemExamSettings() { localStorage.setItem('agribank_system_exam_settings', JSON.stringify(systemExamSettings)); }\n \n function getExamSettings(config) {\n if (config.isPredefined && systemExamSettings[config.id]) {\n return { time: systemExamSettings[config.id].time || config.time || DEFAULT_EXAM_TIME, overlapPercent: systemExamSettings[config.id].overlapPercent || config.overlapPercent || DEFAULT_OVERLAP_PERCENT };\n }\n return { time: config.time || DEFAULT_EXAM_TIME, overlapPercent: config.overlapPercent || DEFAULT_OVERLAP_PERCENT };\n }\n \n function getProgressKey() {\n if (quizMode === 'exam' && currentExamId) return `progress_exam_${currentExamId}`;\n if (quizMode === 'practice' && currentPracticeId) return `progress_practice_${currentPracticeId}`;\n return null;\n }\n \n function saveProgress() {\n const key = getProgressKey();\n if (!key) return;\n localStorage.setItem(key, JSON.stringify({\n examId: currentExamId, practiceId: currentPracticeId, topic: currentTopic,\n questions: currentQuestions, currentIndex: currentQuestionIndex, answers: userAnswers,\n timeLeft, mode: quizMode, shuffleMap: questionShuffleMap, savedAt: new Date().toISOString()\n }));\n }\n \n function loadProgress() {\n const key = getProgressKey();\n if (!key) return null;\n const s = localStorage.getItem(key);\n return s ? JSON.parse(s) : null;\n }\n \n function clearProgress() { const key = getProgressKey(); if (key) localStorage.removeItem(key); }\n \n function confirmExit() {\n if (quizMode === 'practice') { practiceProgressModal.classList.add('show'); }\n else if (quizMode === 'exam' && currentExamId) { saveProgressModal.classList.add('show'); }\n else { exitFullscreenMode(); showHeader(); goHome(); }\n }\n \n function saveProgressAndExit() { saveProgress(); saveProgressModal.classList.remove('show'); exitFullscreenMode(); showHeader(); goHome(); alert('\u2705 \u0110\u00e3 l\u01b0u ti\u1ebfn \u0111\u1ed9 thi!'); }\n function exitWithoutSaving() { clearProgress(); saveProgressModal.classList.remove('show'); exitFullscreenMode(); showHeader(); goHome(); }\n function savePracticeProgressAndExit() { saveProgress(); practiceProgressModal.classList.remove('show'); exitFullscreenMode(); showHeader(); goHome(); alert('\u2705 \u0110\u00e3 l\u01b0u ti\u1ebfn \u0111\u1ed9 \u00f4n t\u1eadp!'); }\n function exitPracticeWithoutSaving() { clearProgress(); practiceProgressModal.classList.remove('show'); exitFullscreenMode(); showHeader(); goHome(); }\n \n function checkForSavedProgress(topicIndex, questions, time, mode, rangeStart, rangeEnd) {\n if (mode === 'exam') { currentExamId = topicIndex; currentPracticeId = null; }\n else { currentPracticeId = rangeStart != null ? `topic_${topicIndex}_${rangeStart}_${rangeEnd}` : `topic_${topicIndex}_all`; currentExamId = null; }\n const progress = loadProgress();\n if (progress && progress.questions.length > 0) {\n const diffMs = new Date() - new Date(progress.savedAt);\n const diffMins = Math.floor(diffMs \/ 60000);\n const diffHours = Math.floor(diffMins \/ 60);\n const timeText = diffHours > 0 ? `${diffHours}h ${diffMins % 60}p tr\u01b0\u1edbc` : `${diffMins}p tr\u01b0\u1edbc`;\n document.getElementById('resumeProgressText').innerHTML = `L\u1ea7n tr\u01b0\u1edbc b\u1ea1n \u0111ang \u1edf <strong>c\u00e2u ${progress.currentIndex + 1}\/${progress.questions.length}<\/strong><br><small style=\"color:var(--gray)\">L\u01b0u ${timeText}<\/small><br><br>B\u1ea1n c\u00f3 mu\u1ed1n ti\u1ebfp t\u1ee5c kh\u00f4ng?`;\n const topic = mode === 'exam' ? { name: topics[topicIndex]?.name || \"\u0110\u1ec1 thi\", icon: \"\ud83d\udccb\" } : topics[topicIndex];\n pendingQuizData = { topic, questions, time, mode, topicIndex, rangeStart, rangeEnd };\n savedProgress = progress;\n resumeProgressModal.classList.add('show');\n } else {\n const topic = mode === 'exam' ? { name: \"\u0110\u1ec1 thi\", icon: \"\ud83d\udccb\" } : topics[topicIndex];\n startQuiz(topic, questions, time, mode);\n }\n }\n \n function resumeProgress() {\n resumeProgressModal.classList.remove('show');\n if (!savedProgress) return;\n currentTopic = savedProgress.topic;\n currentQuestions = savedProgress.questions;\n currentQuestionIndex = savedProgress.currentIndex;\n userAnswers = savedProgress.answers;\n timeLeft = savedProgress.timeLeft;\n quizMode = savedProgress.mode;\n showAnswersEnabled = false;\n questionShuffleMap = savedProgress.shuffleMap || {};\n if (savedProgress.examId) { currentExamId = savedProgress.examId; currentPracticeId = null; }\n else if (savedProgress.practiceId) { currentPracticeId = savedProgress.practiceId; currentExamId = null; }\n hideAllSections(); hideHeader();\n quizContainer.style.display = 'block';\n quizContainer.classList.add('active');\n contentArea.classList.add('quiz-active');\n document.body.classList.add('quiz-mode');\n document.getElementById('showAnswerBtn').style.display = quizMode === 'exam' ? 'inline-flex' : 'none';\n enterFullscreenMode();\n showQuizNavMobile(true);\n displayQuestion(currentQuestionIndex);\n startTimer();\n savedProgress = null; pendingQuizData = null;\n }\n \n function startNewQuiz() {\n clearProgress();\n resumeProgressModal.classList.remove('show');\n if (pendingQuizData) { startQuiz(pendingQuizData.topic, pendingQuizData.questions, pendingQuizData.time, pendingQuizData.mode); pendingQuizData = null; }\n }\n \n function showWrongAnswers() {\n const wrongList = document.getElementById('wrongAnswersList');\n wrongList.innerHTML = '';\n const labels = ['A','B','C','D'], keys = ['a','b','c','d'];\n let hasWrong = false;\n currentQuestions.forEach((originalQ, i) => {\n const { shuffled: q } = shuffleAnswers(originalQ, i);\n if (userAnswers[i] !== q.correct) {\n hasWrong = true;\n const item = document.createElement('div');\n item.className = 'wrong-answer-item';\n const userLabel = userAnswers[i] ? labels[userAnswers[i]-1] : '?';\n const userText = userAnswers[i] ? q[keys[userAnswers[i]-1]] : 'Kh\u00f4ng tr\u1ea3 l\u1eddi';\n item.innerHTML = `<div class=\"question-num\">C\u00e2u ${i+1}<\/div><div class=\"question-content\">${q.q}<\/div><div class=\"answer-info\"><div style=\"color:var(--danger);margin-bottom:5px\">\u274c B\u1ea1n ch\u1ecdn: <strong>${userLabel}. ${userText}<\/strong><\/div><div class=\"correct-answer\">\u2705 \u0110\u00fang: <strong>${labels[q.correct-1]}. ${q[keys[q.correct-1]]}<\/strong><\/div><\/div>`;\n wrongList.appendChild(item);\n }\n });\n if (!hasWrong) wrongList.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--success)\">\ud83c\udf89 B\u1ea1n \u0111\u00e3 tr\u1ea3 l\u1eddi \u0111\u00fang t\u1ea5t c\u1ea3!<\/p>';\n wrongAnswersModal.classList.add('show');\n }\n \n function showExamDetails(configId) {\n let config = predefinedExams.find(c => c.id === configId) || savedConfigs.find(c => c.id === configId);\n if (!config) return;\n const settings = getExamSettings(config);\n let html = `<div style=\"padding:20px;background:var(--light);border-radius:var(--radius-md);margin-bottom:20px\"><h3 style=\"margin-bottom:15px;color:var(--primary)\"><i class=\"fas fa-file-alt\"><\/i> ${config.name}<\/h3><div><strong>\ud83d\udcdd T\u1ed5ng s\u1ed1 c\u00e2u:<\/strong> ${config.questionCount}<\/div><div><strong>\u23f1\ufe0f Th\u1eddi gian:<\/strong> ${settings.time} ph\u00fat<\/div><div><strong>\ud83d\udd04 T\u1ef7 l\u1ec7 tr\u00f9ng l\u1eb7p:<\/strong> ${settings.overlapPercent}%<\/div><\/div><h4 style=\"margin-bottom:15px\"><i class=\"fas fa-list\"><\/i> C\u1ea5u tr\u00fac:<\/h4><div style=\"max-height:400px;overflow-y:auto\">`;\n config.topics.forEach(ti => {\n const count = config.topicCounts[String(ti)] || 0;\n const t = topics[ti];\n html += `<div style=\"padding:15px;background:white;border-radius:var(--radius-sm);margin-bottom:10px;border-left:4px solid var(--primary);display:flex;justify-content:space-between;align-items:center\"><div><div style=\"font-weight:600\">${t ? t.icon : '\ud83d\udcda'} ${t ? t.name : 'Ch\u1ee7 \u0111\u1ec1 '+ti}<\/div><\/div><div style=\"background:var(--primary);color:white;padding:8px 16px;border-radius:20px;font-weight:700\">${count}<\/div><\/div>`;\n });\n html += '<\/div>';\n document.getElementById('examDetailsContent').innerHTML = html;\n examDetailsModal.classList.add('show');\n }\n \n function showExamSettings(configId) {\n let config = predefinedExams.find(c => c.id === configId);\n const isSystem = !!config;\n if (!config) config = savedConfigs.find(c => c.id === configId);\n if (!config) return;\n currentEditingExamId = configId;\n const settings = getExamSettings(config);\n document.getElementById('editExamTime').value = settings.time;\n document.getElementById('editExamOverlap').value = settings.overlapPercent;\n const resetBtn = document.getElementById('resetExamSettingsBtn');\n resetBtn.style.display = (isSystem && systemExamSettings[configId]) ? 'inline-flex' : 'none';\n examSettingsModal.classList.add('show');\n }\n \n function saveExamSettings() {\n if (!currentEditingExamId) return;\n const newTime = parseInt(document.getElementById('editExamTime').value);\n const newOverlap = parseInt(document.getElementById('editExamOverlap').value);\n if (newTime < 5 || newTime > 180) { alert('\u26a0\ufe0f Th\u1eddi gian ph\u1ea3i t\u1eeb 5-180 ph\u00fat!'); return; }\n if (newOverlap < 0 || newOverlap > 100) { alert('\u26a0\ufe0f T\u1ef7 l\u1ec7 tr\u00f9ng l\u1eb7p ph\u1ea3i t\u1eeb 0-100%!'); return; }\n if (predefinedExams.some(c => c.id === currentEditingExamId)) {\n systemExamSettings[currentEditingExamId] = { time: newTime, overlapPercent: newOverlap };\n saveSystemExamSettings();\n } else {\n const idx = savedConfigs.findIndex(c => c.id === currentEditingExamId);\n if (idx === -1) { alert('\u26a0\ufe0f Kh\u00f4ng t\u00ecm th\u1ea5y \u0111\u1ec1 thi!'); return; }\n savedConfigs[idx].time = newTime;\n savedConfigs[idx].overlapPercent = newOverlap;\n saveUserConfigs();\n }\n examSettingsModal.classList.remove('show');\n currentEditingExamId = null;\n displaySavedConfigs();\n alert('\u2705 \u0110\u00e3 l\u01b0u c\u00e0i \u0111\u1eb7t!');\n }\n \n function resetExamSettings() {\n if (!currentEditingExamId) return;\n if (!predefinedExams.some(c => c.id === currentEditingExamId)) return;\n if (confirm(`Kh\u00f4i ph\u1ee5c v\u1ec1 m\u1eb7c \u0111\u1ecbnh?\\n\u23f1\ufe0f ${DEFAULT_EXAM_TIME} ph\u00fat | \ud83d\udd04 ${DEFAULT_OVERLAP_PERCENT}%`)) {\n delete systemExamSettings[currentEditingExamId];\n saveSystemExamSettings();\n examSettingsModal.classList.remove('show');\n currentEditingExamId = null;\n displaySavedConfigs();\n alert('\u2705 \u0110\u00e3 kh\u00f4i ph\u1ee5c!');\n }\n }\n \n function hideHeader() { mainHeader.classList.add('hidden'); }\n function showHeader() { mainHeader.classList.remove('hidden'); }\n \n \/\/ FIX: Hi\u1ec7n\/\u1ea9n mobile nav bar\n function showQuizNavMobile(show) {\n quizNavMobile.style.display = show ? 'flex' : 'none';\n }\n \n function goHome() {\n if (timerInterval) clearInterval(timerInterval);\n exitFullscreenMode(); showHeader();\n hideAllSections();\n contentArea.classList.remove('quiz-active');\n document.body.classList.remove('quiz-mode');\n dashboard.style.display = 'block';\n showQuizNavMobile(false);\n currentExamId = null; currentPracticeId = null;\n }\n \n function retryQuiz() {\n if (currentExamId) { clearProgress(); window.startSavedConfig(currentExamId); }\n else if (currentPracticeId && currentTopic) { clearProgress(); startQuiz(currentTopic, currentQuestions, Math.ceil(timeLeft \/ 60) || 60, 'practice'); }\n else { goHome(); }\n }\n \n function hideAllSections() {\n [dashboard, searchSection, topicSelection, customExamSection, savedExamsSection, resultContainer].forEach(el => { if (el) el.style.display = 'none'; });\n quizContainer.style.display = 'none';\n quizContainer.classList.remove('active');\n showQuizNavMobile(false);\n }\n \n function showLoading(msg) { loadingOverlay.classList.add('show'); document.querySelector('.loading-text').textContent = msg || '\u0110ang t\u1ea3i...'; }\n function hideLoading() { loadingOverlay.classList.remove('show'); }\n \n function updateDataStatus() {\n const status = document.getElementById('dataStatus');\n if (topics.length === 0) {\n status.innerHTML = '<span style=\"color:var(--danger)\">\u274c Ch\u01b0a c\u00f3 d\u1eef li\u1ec7u<\/span>';\n } else {\n const total = topics.reduce((s,t) => s + t.questions.length, 0);\n const cacheTime = localStorage.getItem(CACHE_KEY + '_time');\n let cacheInfo = '';\n if (cacheTime) { const mins = Math.floor((Date.now() - parseInt(cacheTime)) \/ 60000); const hrs = Math.floor(mins \/ 60); cacheInfo = ` \u2022 Cache: ${hrs > 0 ? hrs+'h '+mins%60+'p' : mins+'p'} tr\u01b0\u1edbc`; }\n status.innerHTML = `<span style=\"color:var(--success)\">\u2705 ${topics.length} ch\u1ee7 \u0111\u1ec1, ${total} c\u00e2u, ${predefinedExams.length} b\u1ed9 \u0111\u1ec1${cacheInfo}<\/span>`;\n }\n }\n \n async function fetchWithTimeout(url, options, timeout) {\n const controller = new AbortController();\n const id = setTimeout(() => controller.abort(), timeout || 15000);\n try { const r = await fetch(url, { ...options, signal: controller.signal }); clearTimeout(id); return r; }\n catch (e) { clearTimeout(id); throw e; }\n }\n \n function getCachedData() {\n try {\n const cached = localStorage.getItem(CACHE_KEY);\n const cacheTime = localStorage.getItem(CACHE_KEY + '_time');\n if (cached && cacheTime && (Date.now() - parseInt(cacheTime)) < CACHE_DURATION) return JSON.parse(cached);\n } catch(e) {}\n return null;\n }\n \n function setCachedData(data) {\n try { localStorage.setItem(CACHE_KEY, JSON.stringify(data)); localStorage.setItem(CACHE_VERSION_KEY, '1.0'); localStorage.setItem(CACHE_KEY + '_time', Date.now().toString()); }\n catch(e) {}\n }\n \n function clearCache() { [CACHE_KEY, CACHE_VERSION_KEY, CACHE_KEY + '_time'].forEach(k => localStorage.removeItem(k)); }\n \n async function loadDataFromAPI() {\n const cached = getCachedData();\n if (cached) { processData(cached); fetchDataInBackground(); return true; }\n for (let i = 1; i <= 2; i++) {\n try {\n const r = await fetchWithTimeout(API_URL, { method: 'GET', headers: { 'Accept': 'application\/json' }, cache: 'no-cache' }, 15000);\n if (!r.ok) throw new Error(`HTTP ${r.status}`);\n const data = await r.json();\n processData(data);\n if (topics.length === 0) throw new Error('D\u1eef li\u1ec7u r\u1ed7ng');\n setCachedData(data);\n return true;\n } catch(e) { if (i < 2) await new Promise(r => setTimeout(r, 1000)); else throw e; }\n }\n }\n \n async function fetchDataInBackground() {\n try { const r = await fetchWithTimeout(API_URL, { method: 'GET', cache: 'no-cache' }, 20000); if (r.ok) { const data = await r.json(); if (data.topics?.length > 0) setCachedData(data); } }\n catch(e) {}\n }\n \n function processData(data) {\n topics = []; predefinedExams = [];\n if (data.topics && Array.isArray(data.topics)) {\n data.topics.forEach(t => { if (t.name && t.questions?.length > 0) topics.push({ name: t.name, icon: t.icon || '\ud83d\udcda', questions: t.questions }); });\n if (data.predefinedExams) {\n predefinedExams = data.predefinedExams.map(exam => ({\n id: `predefined_${exam.name.replace(\/\\s+\/g,'_')}`, name: exam.name, topics: exam.topics || [],\n topicCounts: exam.topicCounts || {}, time: exam.time || DEFAULT_EXAM_TIME,\n questionCount: exam.questionCount || 0, overlapPercent: exam.overlapPercent || DEFAULT_OVERLAP_PERCENT,\n createdAt: 'H\u1ec7 th\u1ed1ng', createdBy: 'Agribank', isPredefined: true\n }));\n }\n } else if (Array.isArray(data)) {\n data.forEach(t => { if (t.name && t.questions?.length > 0) topics.push({ name: t.name, icon: t.icon || '\ud83d\udcda', questions: t.questions }); });\n }\n updateDataStatus();\n updateTopicsChecklist();\n }\n \n function displayTopics(searchTerm) {\n const grid = document.getElementById('topicsGrid');\n grid.innerHTML = '';\n if (topics.length === 0) { grid.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--gray)\">Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u<\/p>'; return; }\n const filtered = searchTerm ? topics.filter(t => t.name.toLowerCase().includes(searchTerm.toLowerCase())) : topics;\n if (filtered.length === 0) { grid.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--gray)\">Kh\u00f4ng t\u00ecm th\u1ea5y ch\u1ee7 \u0111\u1ec1<\/p>'; return; }\n filtered.forEach(topic => {\n const i = topics.indexOf(topic);\n const card = document.createElement('div');\n card.className = 'topic-card';\n card.innerHTML = `<div class=\"topic-header\"><div class=\"topic-icon\">${topic.icon}<\/div><div class=\"topic-name\">${topic.name}<\/div><\/div><div class=\"topic-info\">${topic.questions.length} c\u00e2u h\u1ecfi<\/div><button class=\"expand-btn\" data-topic=\"${i}\"><i class=\"fas fa-cog\"><\/i> C\u00e0i \u0111\u1eb7t<\/button><div class=\"topic-settings\" id=\"settings-${i}\"><div class=\"setting-group\"><label class=\"setting-label\">Th\u1eddi gian (ph\u00fat)<\/label><input type=\"number\" class=\"setting-input\" id=\"time-${i}\" value=\"60\" min=\"5\" max=\"180\"><\/div><div class=\"setting-group\"><label class=\"setting-label\">Ph\u1ea1m vi<\/label><div class=\"range-option\"><input type=\"radio\" id=\"all-${i}\" name=\"range-${i}\" value=\"all\" checked><label for=\"all-${i}\" style=\"cursor:pointer\">T\u1ea5t c\u1ea3 (${topic.questions.length} c\u00e2u)<\/label><\/div><div class=\"range-option\"><input type=\"radio\" id=\"custom-${i}\" name=\"range-${i}\" value=\"custom\"><label for=\"custom-${i}\" style=\"cursor:pointer\">T\u00f9y ch\u1ecdn<\/label><\/div><div class=\"range-inputs-container\" id=\"range-${i}\"><div class=\"range-inputs\"><input type=\"number\" class=\"setting-input\" id=\"start-${i}\" placeholder=\"T\u1eeb\" min=\"1\" max=\"${topic.questions.length}\" value=\"1\"><span>\u0111\u1ebfn<\/span><input type=\"number\" class=\"setting-input\" id=\"end-${i}\" placeholder=\"\u0110\u1ebfn\" min=\"1\" max=\"${topic.questions.length}\" value=\"${topic.questions.length}\"><\/div><\/div><\/div><button class=\"submit-btn start-quiz-btn\" data-topic=\"${i}\" style=\"width:100%;margin-top:15px\"><i class=\"fas fa-play-circle\"><\/i> B\u1eaft \u0111\u1ea7u luy\u1ec7n t\u1eadp<\/button><\/div>`;\n grid.appendChild(card);\n addTapListener(card.querySelector('.expand-btn'), () => { document.getElementById(`settings-${i}`).classList.toggle('show'); });\n addTapListener(card.querySelector('.start-quiz-btn'), () => startQuizFromTopic(i));\n const customRadio = document.getElementById(`custom-${i}`);\n const allRadio = document.getElementById(`all-${i}`);\n const rangeDiv = document.getElementById(`range-${i}`);\n if (customRadio) customRadio.onchange = () => rangeDiv.classList.toggle('show', customRadio.checked);\n if (allRadio) allRadio.onchange = () => rangeDiv.classList.remove('show');\n });\n }\n \n function filterTopics() { displayTopics(document.getElementById('topicSearchInput').value); }\n \n function startQuizFromTopic(i) {\n const topic = topics[i];\n const time = parseInt(document.getElementById(`time-${i}`).value) || 60;\n const rangeType = document.querySelector(`input[name=\"range-${i}\"]:checked`)?.value;\n let questions, rangeStart = null, rangeEnd = null;\n if (rangeType === 'all') {\n questions = [...topic.questions];\n } else {\n rangeStart = Math.max(1, parseInt(document.getElementById(`start-${i}`).value) || 1);\n rangeEnd = Math.min(topic.questions.length, parseInt(document.getElementById(`end-${i}`).value) || topic.questions.length);\n if (rangeStart >= rangeEnd) { alert('\u26a0\ufe0f C\u00e2u b\u1eaft \u0111\u1ea7u ph\u1ea3i nh\u1ecf h\u01a1n c\u00e2u k\u1ebft th\u00fac!'); return; }\n questions = topic.questions.slice(rangeStart - 1, rangeEnd);\n }\n checkForSavedProgress(i, questions, time, 'practice', rangeStart, rangeEnd);\n }\n \n function updateTopicsChecklist() {\n const checklist = document.getElementById('topicsChecklist');\n if (!checklist) return;\n checklist.innerHTML = '';\n if (topics.length === 0) { checklist.innerHTML = '<p style=\"text-align:center;padding:20px\">Ch\u01b0a c\u00f3 ch\u1ee7 \u0111\u1ec1<\/p>'; return; }\n topics.forEach((topic, i) => {\n const item = document.createElement('div');\n item.className = 'topic-check-item';\n item.innerHTML = `<input type=\"checkbox\" id=\"topic-${i}\" style=\"min-width:24px;min-height:24px\"><div class=\"topic-check-content\"><label for=\"topic-${i}\" class=\"topic-check-label\">${topic.icon} ${topic.name} (${topic.questions.length} c\u00e2u)<\/label><input type=\"number\" class=\"topic-question-input\" id=\"count-${i}\" placeholder=\"S\u1ed1 c\u00e2u\" min=\"0\" max=\"${topic.questions.length}\" disabled><\/div>`;\n checklist.appendChild(item);\n topicQuestionCounts[i] = topicQuestionCounts[i] || 0;\n document.getElementById(`topic-${i}`).addEventListener('change', () => toggleTopicCheckbox(i));\n document.getElementById(`count-${i}`).addEventListener('input', () => updateTopicQuestionCount(i));\n });\n document.getElementById('totalQuestionsDisplay').textContent = topics.reduce((s,t) => s + t.questions.length, 0);\n updateRemainingQuestions();\n }\n \n function toggleTopicCheckbox(i) {\n const cb = document.getElementById(`topic-${i}`);\n const inp = document.getElementById(`count-${i}`);\n inp.disabled = !cb.checked;\n if (cb.checked) { inp.value = topics[i].questions.length; topicQuestionCounts[i] = topics[i].questions.length; }\n else { inp.value = ''; topicQuestionCounts[i] = 0; }\n updateRemainingQuestions();\n }\n \n function updateTopicQuestionCount(i) {\n const inp = document.getElementById(`count-${i}`);\n const cb = document.getElementById(`topic-${i}`);\n if (!cb.checked) { topicQuestionCounts[i] = 0; return; }\n const value = parseInt(inp.value) || 0;\n const max = topics[i].questions.length;\n if (value > max) { inp.value = max; topicQuestionCounts[i] = max; alert(`\u26a0\ufe0f Ch\u1ee7 \u0111\u1ec1 n\u00e0y ch\u1ec9 c\u00f3 ${max} c\u00e2u!`); }\n else topicQuestionCounts[i] = Math.max(0, value);\n updateRemainingQuestions();\n }\n \n function updateRemainingQuestions() {\n const selected = Object.values(topicQuestionCounts).reduce((a,b) => a + b, 0);\n const total = topics.reduce((s,t) => s + t.questions.length, 0);\n document.getElementById('selectedQuestionsCount').textContent = selected;\n document.getElementById('totalQuestionsDisplay').textContent = total;\n document.getElementById('remainingQuestionsCount').textContent = Math.max(0, total - selected);\n }\n \n function saveExamConfig() {\n if (!currentUser) { alert('\u26a0\ufe0f Vui l\u00f2ng \u0111\u0103ng nh\u1eadp!'); showLoginModal(); return; }\n const name = document.getElementById('configName').value.trim();\n if (!name) { alert('\u26a0\ufe0f Vui l\u00f2ng nh\u1eadp t\u00ean b\u1ed9 \u0111\u1ec1!'); return; }\n const selected = [], counts = {};\n topics.forEach((t, i) => {\n const cb = document.getElementById(`topic-${i}`);\n if (cb?.checked && topicQuestionCounts[i] > 0) { selected.push(i); counts[i] = topicQuestionCounts[i]; }\n });\n if (selected.length === 0) { alert('\u26a0\ufe0f Vui l\u00f2ng ch\u1ecdn \u00edt nh\u1ea5t m\u1ed9t ch\u1ee7 \u0111\u1ec1!'); return; }\n const total = Object.values(counts).reduce((a,b) => a + b, 0);\n const config = { id: Date.now(), name, topics: selected, topicCounts: counts, time: parseInt(document.getElementById('customExamTime').value) || DEFAULT_EXAM_TIME, questionCount: total, overlapPercent: parseInt(document.getElementById('customOverlapPercent').value) || DEFAULT_OVERLAP_PERCENT, createdAt: new Date().toLocaleDateString('vi-VN'), createdBy: currentUser.name };\n savedConfigs.push(config);\n saveUserConfigs();\n alert(`\u2705 \u0110\u00e3 l\u01b0u \"${name}\"!\\nT\u1ed5ng: ${total} c\u00e2u`);\n document.getElementById('configName').value = '';\n }\n \n function displaySavedConfigs(searchTerm) {\n const list = document.getElementById('savedConfigsList');\n list.innerHTML = '';\n const all = [...predefinedExams, ...savedConfigs];\n if (all.length === 0) { list.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--gray)\">Ch\u01b0a c\u00f3 \u0111\u1ec1 thi n\u00e0o<\/p>'; return; }\n const filtered = searchTerm ? all.filter(c => c.name.toLowerCase().includes(searchTerm.toLowerCase())) : all;\n if (filtered.length === 0) { list.innerHTML = '<p style=\"text-align:center;padding:40px;color:var(--gray)\">Kh\u00f4ng t\u00ecm th\u1ea5y<\/p>'; return; }\n filtered.forEach(config => {\n const card = document.createElement('div');\n card.className = 'config-card';\n if (config.isPredefined) { card.style.borderLeft = '5px solid #ff9800'; card.style.background = 'linear-gradient(135deg,#fff9f0 0%,#ffffff 100%)'; }\n const settings = getExamSettings(config);\n const hasCustom = config.isPredefined && systemExamSettings[config.id];\n const badge = config.isPredefined ? '<span style=\"display:inline-block;padding:4px 12px;background:linear-gradient(135deg,#ff9800,#ff6f00);color:white;border-radius:20px;font-size:0.75rem;font-weight:600;margin-bottom:8px\">\ud83d\udccb \u0110\u1ec1 h\u1ec7 th\u1ed1ng<\/span>' : '<span style=\"display:inline-block;padding:4px 12px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border-radius:20px;font-size:0.75rem;font-weight:600;margin-bottom:8px\">\ud83d\udc64 \u0110\u1ec1 c\u1ee7a t\u00f4i<\/span>';\n const customBadge = hasCustom ? '<span style=\"display:inline-block;padding:4px 12px;background:linear-gradient(135deg,#7b1fa2,#9c27b0);color:white;border-radius:20px;font-size:0.7rem;font-weight:600;margin-left:5px\">\u2699\ufe0f \u0110\u00e3 t\u00f9y ch\u1ec9nh<\/span>' : '';\n card.innerHTML = `${badge}${customBadge}<div class=\"config-name\">${config.name}<\/div><div class=\"config-details\"><div>\ud83d\udcdd S\u1ed1 c\u00e2u: ${config.questionCount}<\/div><div>\u23f1\ufe0f Th\u1eddi gian: ${settings.time} ph\u00fat${hasCustom ? ' (\u0111\u00e3 ch\u1ec9nh s\u1eeda)' : ''}<\/div><div>\ud83d\udd04 T\u1ef7 l\u1ec7 tr\u00f9ng l\u1eb7p: ${settings.overlapPercent}%<\/div><div>\ud83d\udc64 T\u1ea1o b\u1edfi: ${config.createdBy}<\/div><div>\ud83d\udcc5 Ng\u00e0y t\u1ea1o: ${config.createdAt}<\/div><\/div><div style=\"display:flex;gap:8px;margin-top:15px;flex-wrap:wrap\"><button class=\"submit-btn start-exam-btn\" data-id=\"${config.id}\" style=\"flex:1;min-width:100px;padding:10px 12px;font-size:0.88rem\"><i class=\"fas fa-play-circle\"><\/i> B\u1eaft \u0111\u1ea7u<\/button><button class=\"details-btn\" data-id=\"${config.id}\" style=\"padding:10px 12px;font-size:0.82rem;background:linear-gradient(135deg,var(--info),#0288d1)\"><i class=\"fas fa-info-circle\"><\/i><\/button><button class=\"settings-btn\" data-id=\"${config.id}\" style=\"padding:10px 12px;font-size:0.82rem;background:linear-gradient(135deg,#7b1fa2,#9c27b0)\"><i class=\"fas fa-cog\"><\/i><\/button>${!config.isPredefined ? `<button class=\"delete-btn\" data-id=\"${config.id}\" style=\"padding:10px 12px;font-size:0.82rem;background:linear-gradient(135deg,var(--danger),#d32f2f)\"><i class=\"fas fa-trash\"><\/i><\/button>` : ''}<\/div>`;\n addTapListener(card.querySelector('.start-exam-btn'), () => window.startSavedConfig(config.id));\n addTapListener(card.querySelector('.details-btn'), () => showExamDetails(config.id));\n addTapListener(card.querySelector('.settings-btn'), () => showExamSettings(config.id));\n const deleteBtn = card.querySelector('.delete-btn');\n if (deleteBtn) addTapListener(deleteBtn, () => deleteSavedConfig(config.id));\n list.appendChild(card);\n });\n }\n \n function filterSavedExams() { displaySavedConfigs(document.getElementById('savedExamSearchInput').value); }\n \n window.startSavedConfig = function(configId) {\n let config = predefinedExams.find(c => c.id === configId) || savedConfigs.find(c => c.id === configId);\n if (!config) return;\n const settings = getExamSettings(config);\n const historyKey = `exam_history_${configId}`;\n const lastQuestions = JSON.parse(localStorage.getItem(historyKey) || '[]');\n const overlapPercent = settings.overlapPercent;\n let allSelected = [];\n config.topics.forEach(topicIndex => {\n const neededCount = parseInt(config.topicCounts[String(topicIndex)]) || 0;\n if (neededCount === 0 || !topics[topicIndex]) return;\n const available = topics[topicIndex].questions;\n const overlapCount = Math.floor(neededCount * overlapPercent \/ 100);\n let selected = [];\n if (lastQuestions.length > 0 && overlapCount > 0) {\n const hist = lastQuestions.filter(lq => lq.topicIndex === topicIndex && lq.questionIndex < available.length);\n selected.push(...hist.sort(() => 0.5 - Math.random()).slice(0, overlapCount));\n }\n const usedIdx = selected.map(q => q.questionIndex);\n const histIdx = lastQuestions.filter(lq => lq.topicIndex === topicIndex).map(lq => lq.questionIndex);\n const newIdx = available.map((q,idx) => idx).filter(idx => !usedIdx.includes(idx) && !histIdx.includes(idx)).sort(() => 0.5 - Math.random());\n newIdx.slice(0, neededCount - selected.length).forEach(idx => selected.push({ topicIndex, questionIndex: idx, question: available[idx] }));\n if (selected.length < neededCount) {\n const allUsed = selected.map(q => q.questionIndex);\n available.map((q,idx) => idx).filter(idx => !allUsed.includes(idx)).sort(() => 0.5 - Math.random()).slice(0, neededCount - selected.length).forEach(idx => selected.push({ topicIndex, questionIndex: idx, question: available[idx] }));\n }\n allSelected.push(...selected.slice(0, neededCount));\n });\n const shuffled = allSelected.sort(() => 0.5 - Math.random()).slice(0, config.questionCount);\n localStorage.setItem(historyKey, JSON.stringify(shuffled));\n checkForSavedProgress(configId, shuffled.map(item => item.question), settings.time, 'exam');\n };\n \n function deleteSavedConfig(configId) {\n if (predefinedExams.some(c => c.id === configId)) { alert('\u26a0\ufe0f Kh\u00f4ng th\u1ec3 x\u00f3a b\u1ed9 \u0111\u1ec1 h\u1ec7 th\u1ed1ng!'); return; }\n if (confirm('B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n x\u00f3a?')) { savedConfigs = savedConfigs.filter(c => c.id !== configId); saveUserConfigs(); displaySavedConfigs(); }\n }\n \n function startCustomExam() {\n const selected = [];\n topics.forEach((t, i) => { const cb = document.getElementById(`topic-${i}`); if (cb?.checked && topicQuestionCounts[i] > 0) selected.push(i); });\n if (selected.length === 0) { alert('\u26a0\ufe0f Vui l\u00f2ng ch\u1ecdn ch\u1ee7 \u0111\u1ec1 v\u00e0 nh\u1eadp s\u1ed1 c\u00e2u!'); return; }\n const allQ = [];\n selected.forEach(i => { const qs = [...topics[i].questions].sort(() => 0.5 - Math.random()); allQ.push(...qs.slice(0, topicQuestionCounts[i])); });\n currentExamId = `custom_${Date.now()}`;\n currentPracticeId = null;\n startQuiz({ name: \"\u0110\u1ec1 thi t\u00f9y ch\u1ec9nh\", icon: \"\u2699\ufe0f\" }, allQ.sort(() => 0.5 - Math.random()), parseInt(document.getElementById('customExamTime').value) || DEFAULT_EXAM_TIME, 'exam');\n }\n \n function startQuiz(topic, questions, timeMinutes, mode) {\n currentTopic = topic;\n currentQuestions = questions;\n currentQuestionIndex = 0;\n userAnswers = new Array(questions.length).fill(null);\n timeLeft = timeMinutes * 60;\n quizMode = mode;\n showAnswersEnabled = false;\n questionShuffleMap = {};\n \n hideAllSections(); hideHeader();\n quizContainer.style.display = 'block';\n quizContainer.classList.add('active');\n contentArea.classList.add('quiz-active');\n document.body.classList.add('quiz-mode');\n \n const showAnswerBtn = document.getElementById('showAnswerBtn');\n showAnswerBtn.style.display = mode === 'exam' ? 'inline-flex' : 'none';\n showAnswerBtn.innerHTML = '<i class=\"fas fa-eye\"><\/i> <span class=\"btn-text\">\u0110\u00e1p \u00e1n<\/span>';\n showAnswerBtn.style.background = 'linear-gradient(135deg, var(--warning), var(--secondary))';\n \n enterFullscreenMode();\n \/\/ FIX: Hi\u1ec7n mobile nav sau khi quiz start\n showQuizNavMobile(true);\n displayQuestion(0);\n startTimer();\n }\n \n function startTimer() {\n if (timerInterval) clearInterval(timerInterval);\n updateTimerDisplay();\n timerInterval = setInterval(() => {\n timeLeft--;\n updateTimerDisplay();\n if (timeLeft <= 0) { clearInterval(timerInterval); submitQuiz(); }\n }, 1000);\n }\n \n function updateTimerDisplay() {\n const mins = Math.floor(timeLeft \/ 60), secs = timeLeft % 60;\n document.getElementById('timeDisplay').textContent = `${String(mins).padStart(2,'0')}:${String(secs).padStart(2,'0')}`;\n const timer = document.getElementById('timer');\n timer.className = 'timer';\n if (timeLeft <= 60) timer.classList.add('danger');\n else if (timeLeft <= 300) timer.classList.add('warning');\n }\n \n function displayQuestion(index) {\n currentQuestionIndex = index;\n const { shuffled: q } = shuffleAnswers(currentQuestions[index], index);\n \n document.getElementById('questionNumber').innerHTML = `<i class=\"fas fa-question-circle\"><\/i> C\u00e2u ${index + 1}`;\n document.getElementById('questionText').textContent = q.q;\n \n const container = document.getElementById('optionsContainer');\n container.innerHTML = '';\n const labels = ['A','B','C','D'], keys = ['a','b','c','d'];\n \n keys.forEach((key, i) => {\n if (!q[key]) return;\n const optVal = i + 1;\n const isSelected = userAnswers[index] === optVal;\n const isCorrect = optVal === q.correct;\n const option = document.createElement('div');\n option.className = 'option';\n if (isSelected) option.classList.add('selected');\n if (quizMode === 'practice') {\n if (isSelected) option.classList.add(isCorrect ? 'correct' : 'incorrect');\n if (!isSelected && isCorrect && userAnswers[index]) option.classList.add('show-correct');\n }\n if (quizMode === 'exam' && showAnswersEnabled) {\n if (isCorrect) option.classList.add('show-correct');\n if (isSelected && !isCorrect) option.classList.add('incorrect');\n }\n option.innerHTML = `<div class=\"option-label\">${labels[i]}<\/div><div class=\"option-text\">${q[key]}<\/div>`;\n \/\/ FIX: D\u00f9ng addTapListener cho option\n addTapListener(option, () => selectOption(index, optVal, option));\n container.appendChild(option);\n });\n \n \/\/ Explanation\n const expDiv = document.getElementById('answerExplanation');\n expDiv.innerHTML = '';\n if (quizMode === 'practice' && userAnswers[index]) {\n showExplanation(q, userAnswers[index]);\n } else if (quizMode === 'exam' && showAnswersEnabled) {\n if (userAnswers[index]) { showExplanation(q, userAnswers[index]); }\n else { expDiv.innerHTML = `<div class=\"answer-explanation\"><div style=\"font-weight:700;margin-bottom:8px\"><i class=\"fas fa-lightbulb\" style=\"color:var(--warning)\"><\/i> <span style=\"color:var(--warning)\">\u0110\u00e1p \u00e1n:<\/span><\/div><p style=\"color:var(--success);font-weight:600\"><i class=\"fas fa-check-circle\"><\/i> ${'ABCD'[q.correct-1]}. ${q[keys[q.correct-1]]}<\/p><\/div>`; }\n }\n \n \/\/ Update nav buttons\n const isFirst = index === 0;\n const isLast = index === currentQuestions.length - 1;\n document.getElementById('prevBtnInline').disabled = isFirst;\n document.getElementById('nextBtnInline').disabled = isLast;\n document.getElementById('prevBtnMobile').disabled = isFirst;\n document.getElementById('nextBtnMobile').disabled = isLast;\n \n \/\/ FIX: C\u1eadp nh\u1eadt center text\n updateNavCenter();\n \n \/\/ FIX: KH\u00d4NG g\u1ecdi window.scrollTo v\u00ec n\u00f3 cancel touch event \u0111ang x\u1eed l\u00fd\n \/\/ Thay v\u00e0o \u0111\u00f3 scroll container l\u00ean top\n const qContainer = document.getElementById('questionContainer');\n if (qContainer) qContainer.scrollIntoView({ block: 'start', behavior: 'instant' });\n }\n \n function showExplanation(question, selectedAnswer) {\n const expDiv = document.getElementById('answerExplanation');\n const isCorrect = selectedAnswer === question.correct;\n const labels = ['A','B','C','D'], keys = ['a','b','c','d'];\n const ci = question.correct - 1;\n expDiv.innerHTML = `<div class=\"answer-explanation ${isCorrect ? '' : 'incorrect'}\"><div style=\"font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px\"><i class=\"fas ${isCorrect ? 'fa-check-circle' : 'fa-times-circle'}\" style=\"color:var(--${isCorrect ? 'success' : 'danger'})\"><\/i><span style=\"color:var(--${isCorrect ? 'success' : 'danger'})\">${isCorrect ? 'Ch\u00ednh x\u00e1c!' : 'Ch\u01b0a ch\u00ednh x\u00e1c!'}<\/span><\/div><div style=\"font-size:0.85rem\">${isCorrect ? `B\u1ea1n \u0111\u00e3 ch\u1ecdn \u0111\u00fang \u0111\u00e1p \u00e1n <strong>${labels[ci]}<\/strong>.` : `<p style=\"margin-bottom:8px\">B\u1ea1n ch\u1ecdn: <strong>${labels[selectedAnswer-1]}<\/strong>.<\/p><p style=\"color:var(--success);font-weight:600\"><i class=\"fas fa-lightbulb\"><\/i> \u0110\u00e1p \u00e1n \u0111\u00fang: <strong>${labels[ci]}. ${question[keys[ci]]}<\/strong><\/p>`}<\/div><\/div>`;\n }\n \n function selectOption(qIndex, optionIndex, optionElement) {\n userAnswers[qIndex] = optionIndex;\n const { shuffled: q } = shuffleAnswers(currentQuestions[qIndex], qIndex);\n const options = optionElement.parentElement.querySelectorAll('.option');\n options.forEach(opt => opt.classList.remove('selected','correct','incorrect','show-correct'));\n optionElement.classList.add('selected');\n if (quizMode === 'practice') {\n if (optionIndex === q.correct) optionElement.classList.add('correct');\n else { optionElement.classList.add('incorrect'); if (options[q.correct - 1]) options[q.correct - 1].classList.add('show-correct'); }\n showExplanation(q, optionIndex);\n }\n if (quizMode === 'exam' && showAnswersEnabled) {\n options.forEach((opt, i) => { if (i + 1 === q.correct) opt.classList.add('show-correct'); });\n if (optionIndex !== q.correct) optionElement.classList.add('incorrect');\n showExplanation(q, optionIndex);\n }\n }\n \n function submitQuiz() {\n if (timerInterval) clearInterval(timerInterval);\n const unanswered = userAnswers.filter(a => a === null).length;\n if (unanswered > 0 && !confirm(`B\u1ea1n c\u00f2n ${unanswered} c\u00e2u ch\u01b0a tr\u1ea3 l\u1eddi. N\u1ed9p b\u00e0i?`)) { startTimer(); return; }\n let score = 0, wrongCount = 0;\n currentQuestions.forEach((originalQ, i) => {\n const { shuffled: q } = shuffleAnswers(originalQ, i);\n if (userAnswers[i] === q.correct) score++; else wrongCount++;\n });\n clearProgress(); exitFullscreenMode(); showHeader();\n hideAllSections();\n contentArea.classList.remove('quiz-active');\n document.body.classList.remove('quiz-mode');\n showQuizNavMobile(false);\n resultContainer.style.display = 'block';\n const percent = (score \/ currentQuestions.length) * 100;\n document.getElementById('score').textContent = `${score}\/${currentQuestions.length}`;\n document.getElementById('scoreDetail').textContent = `\u0110\u00fang ${score}\/${currentQuestions.length} c\u00e2u (${percent.toFixed(1)}%)`;\n document.getElementById('showWrongAnswersBtn').style.display = wrongCount > 0 ? 'inline-flex' : 'none';\n if (currentUser) {\n document.getElementById('userResult').innerHTML = `<div style=\"padding:15px;background:var(--light);border-radius:var(--radius-md)\"><div><strong>Ng\u01b0\u1eddi thi:<\/strong> ${currentUser.name}<\/div><div><strong>\u0110\u1ec1 thi:<\/strong> ${currentTopic.name}<\/div><div><strong>Th\u1eddi gian:<\/strong> ${new Date().toLocaleString('vi-VN')}<\/div><\/div>`;\n } else { document.getElementById('userResult').innerHTML = ''; }\n const icons = ['\ud83d\ude14','\ud83d\ude0a','\ud83d\udc4d','\ud83c\udf89','\ud83c\udfc6'];\n document.getElementById('resultIcon').textContent = icons[Math.min(4, Math.floor(percent \/ 20))];\n }\n \n \/\/ ================================================================\n \/\/ BIND ALL EVENTS\n \/\/ ================================================================\n function bindAllEvents() {\n \/\/ Dashboard cards\n addTapListener(document.getElementById('searchKeyword'), () => {\n if (topics.length === 0) { alert('\u26a0\ufe0f Ch\u01b0a c\u00f3 d\u1eef li\u1ec7u!'); return; }\n hideAllSections(); searchSection.style.display = 'block';\n document.getElementById('searchInput').value = '';\n document.getElementById('searchResults').innerHTML = '';\n });\n addTapListener(document.getElementById('practiceByTopic'), () => {\n if (topics.length === 0) { alert('\u26a0\ufe0f Ch\u01b0a c\u00f3 d\u1eef li\u1ec7u!'); return; }\n hideAllSections(); topicSelection.style.display = 'block'; displayTopics();\n });\n addTapListener(document.getElementById('customExam'), () => {\n if (topics.length === 0) { alert('\u26a0\ufe0f Ch\u01b0a c\u00f3 d\u1eef li\u1ec7u!'); return; }\n hideAllSections(); customExamSection.style.display = 'block'; updateTopicsChecklist();\n });\n addTapListener(document.getElementById('savedExams'), () => {\n hideAllSections(); savedExamsSection.style.display = 'block'; displaySavedConfigs();\n });\n \n \/\/ Header\n addTapListener(document.getElementById('fontSizeHeaderBtn'), showFontSizeModal);\n addTapListener(document.getElementById('loginBtn'), showLoginModal);\n \n \/\/ Shuffle\n document.getElementById('shuffleAnswersToggle').addEventListener('change', toggleShuffleAnswers);\n \n \/\/ Data\n addTapListener(document.getElementById('reloadDataBtn'), async () => {\n try { showLoading('\u0110ang t\u1ea3i l\u1ea1i...'); topics = []; predefinedExams = []; updateDataStatus(); clearCache(); await loadDataFromAPI(); updateDataStatus(); hideLoading(); alert(`\u2705 Th\u00e0nh c\u00f4ng!\\n${topics.length} ch\u1ee7 \u0111\u1ec1, ${predefinedExams.length} b\u1ed9 \u0111\u1ec1`); }\n catch(e) { hideLoading(); alert('\u274c Kh\u00f4ng t\u1ea3i \u0111\u01b0\u1ee3c! Th\u1eed l\u1ea1i sau.'); }\n });\n addTapListener(document.getElementById('clearCacheBtn'), () => {\n if (confirm('X\u00f3a cache?\\nD\u1eef li\u1ec7u s\u1ebd t\u1ea3i l\u1ea1i t\u1eeb server l\u1ea7n t\u1edbi.')) { clearCache(); updateDataStatus(); alert('\u2705 \u0110\u00e3 x\u00f3a cache!'); }\n });\n \n \/\/ Home buttons\n addTapListener(document.getElementById('searchHomeBtn'), goHome);\n addTapListener(document.getElementById('topicHomeBtn'), goHome);\n addTapListener(document.getElementById('customHomeBtn'), goHome);\n addTapListener(document.getElementById('savedHomeBtn'), goHome);\n \n \/\/ Search\n addTapListener(document.getElementById('searchBtn'), searchQuestions);\n document.getElementById('searchInput').addEventListener('keypress', e => { if (e.key === 'Enter') searchQuestions(); });\n document.getElementById('topicSearchInput').addEventListener('input', filterTopics);\n document.getElementById('savedExamSearchInput').addEventListener('input', filterSavedExams);\n \n \/\/ Quiz controls\n addTapListener(document.getElementById('exitQuizBtn'), confirmExit);\n addTapListener(document.getElementById('submitQuizBtn'), submitQuiz);\n addTapListener(document.getElementById('toggleFullscreenBtn'), toggleFullscreen);\n \n addTapListener(document.getElementById('showAnswerBtn'), function() {\n showAnswersEnabled = !showAnswersEnabled;\n const btn = document.getElementById('showAnswerBtn');\n if (showAnswersEnabled) {\n btn.innerHTML = '<i class=\"fas fa-eye-slash\"><\/i> <span class=\"btn-text\">\u1ea8n<\/span>';\n btn.style.background = 'linear-gradient(135deg, #e65100, #ff6f00)';\n } else {\n btn.innerHTML = '<i class=\"fas fa-eye\"><\/i> <span class=\"btn-text\">\u0110\u00e1p \u00e1n<\/span>';\n btn.style.background = 'linear-gradient(135deg, var(--warning), var(--secondary))';\n }\n displayQuestion(currentQuestionIndex);\n });\n \n \/\/ Desktop nav\n addTapListener(document.getElementById('prevBtnInline'), () => { if (currentQuestionIndex > 0) displayQuestion(currentQuestionIndex - 1); });\n addTapListener(document.getElementById('nextBtnInline'), () => { if (currentQuestionIndex < currentQuestions.length - 1) displayQuestion(currentQuestionIndex + 1); });\n \n \/\/ ================================================================\n \/\/ FIX CRITICAL: Mobile nav buttons - th\u00eam c\u1ea3 click backup\n \/\/ ================================================================\n const prevMobile = document.getElementById('prevBtnMobile');\n const nextMobile = document.getElementById('nextBtnMobile');\n \n addTapListener(prevMobile, function() {\n if (currentQuestionIndex > 0) displayQuestion(currentQuestionIndex - 1);\n });\n addTapListener(nextMobile, function() {\n if (currentQuestionIndex < currentQuestions.length - 1) displayQuestion(currentQuestionIndex + 1);\n });\n \n \/\/ Font size\n addTapListener(document.getElementById('fontSmBtn'), () => changeFontSize(0.85));\n addTapListener(document.getElementById('fontMdBtn'), () => changeFontSize(1));\n addTapListener(document.getElementById('fontLgBtn'), () => changeFontSize(1.15));\n \n \/\/ Modals\n addTapListener(document.getElementById('googleSigninBtn'), signInWithGoogle);\n addTapListener(document.getElementById('closeLoginBtn'), closeLoginModal);\n addTapListener(document.getElementById('closeFontSizeBtn'), closeFontSizeModal);\n addTapListener(document.getElementById('saveProgressBtn'), saveProgressAndExit);\n addTapListener(document.getElementById('exitNoSaveBtn'), exitWithoutSaving);\n addTapListener(document.getElementById('resumeProgressBtn'), resumeProgress);\n addTapListener(document.getElementById('startNewQuizBtn'), startNewQuiz);\n addTapListener(document.getElementById('closeWrongAnswersBtn'), () => wrongAnswersModal.classList.remove('show'));\n addTapListener(document.getElementById('closeExamDetailsBtn'), () => examDetailsModal.classList.remove('show'));\n addTapListener(document.getElementById('saveExamSettingsBtn'), saveExamSettings);\n addTapListener(document.getElementById('resetExamSettingsBtn'), resetExamSettings);\n addTapListener(document.getElementById('closeExamSettingsBtn'), () => { examSettingsModal.classList.remove('show'); currentEditingExamId = null; });\n addTapListener(document.getElementById('savePracticeBtn'), savePracticeProgressAndExit);\n addTapListener(document.getElementById('exitPracticeNoSaveBtn'), exitPracticeWithoutSaving);\n \n \/\/ Result\n addTapListener(document.getElementById('goHomeResultBtn'), goHome);\n addTapListener(document.getElementById('retryQuizBtn'), retryQuiz);\n addTapListener(document.getElementById('showWrongAnswersBtn'), showWrongAnswers);\n \n \/\/ Custom exam\n addTapListener(document.getElementById('saveConfigBtn'), saveExamConfig);\n addTapListener(document.getElementById('startCustomExamBtn'), startCustomExam);\n \n \/\/ Font size radios\n document.querySelectorAll('input[name=\"fontSize\"]').forEach(radio => {\n radio.addEventListener('change', function() { changeFontSize(parseFloat(this.value)); });\n });\n \n \/\/ Close modals on backdrop click\n [loginModal, fontSizeModal, wrongAnswersModal, examDetailsModal].forEach(modal => {\n if (!modal) return;\n modal.addEventListener('pointerdown', function(e) {\n if (e.target === this) this.classList.remove('show');\n });\n });\n }\n \n async function initApp() {\n showLoading('\u0110ang kh\u1edfi \u0111\u1ed9ng...');\n checkLogin();\n loadFontSize();\n loadShuffleSettings();\n bindAllEvents();\n \/\/ Nav bar \u1ea9n ban \u0111\u1ea7u\n showQuizNavMobile(false);\n \n try {\n await loadDataFromAPI();\n updateRemainingQuestions();\n updateDataStatus();\n hideLoading();\n } catch(e) {\n hideLoading();\n const cached = getCachedData();\n alert(cached ? '\u26a0\ufe0f Kh\u00f4ng k\u1ebft n\u1ed1i \u0111\u01b0\u1ee3c!\\n\u2705 \u0110ang d\u00f9ng d\u1eef li\u1ec7u cache c\u0169.' : '\u26a0\ufe0f Kh\u00f4ng k\u1ebft n\u1ed1i \u0111\u01b0\u1ee3c!\\nKi\u1ec3m tra m\u1ea1ng v\u00e0 th\u1eed l\u1ea1i.');\n }\n }\n \n document.addEventListener('DOMContentLoaded', initApp);\n \n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u00d4n Thi Agribank \u0110ang t\u1ea3i d\u1eef li\u1ec7u… \u0110\u0103ng nh\u1eadp \u0110\u0103ng nh\u1eadp \u0111\u1ec3 l\u01b0u ti\u1ebfn \u0111\u1ed9 h\u1ecdc t\u1eadp v\u00e0 theo d\u00f5i k\u1ebft qu\u1ea3 c\u1ee7a b\u1ea1n \u0110\u0103ng nh\u1eadp v\u1edbi Google \u0110\u00f3ng C\u00e0i \u0111\u1eb7t c\u1ee1 ch\u1eef \u0110i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc ch\u1eef khi l\u00e0m b\u00e0i thi K\u00edch th\u01b0\u1edbc ch\u1eef Nh\u1ecf (85%) M\u1eb7c \u0111\u1ecbnh (100%) L\u1edbn (115%) R\u1ea5t l\u1edbn (130%) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":68,"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":147,"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/147"}],"wp:attachment":[{"href":"https:\/\/tracnghiemagr.io.vn\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}