PasteBins

New Paste Browse

<!DOCTYPE html>
<html lang="vi" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ThaiMaster Pro - Học & Tra Cứu Tiếng Thái</title>
  
  <script src="https://cdn.tailwindcss.com"></script>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sarabun:wght@400;600;700&display=swap" rel="stylesheet">

<div id="toast-container" class="fixed bottom-5 right-5 z-50 flex flex-col gap-2 pointer-events-none"></div>

<header class="bg-white dark:bg-[#111827] border-b border-slate-200 dark:border-slate-800 sticky top-0 z-40 shadow-sm dark:shadow-lg transition-colors">
    <div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
      
      
      <div class="flex items-center space-x-3 cursor-pointer" onclick="switchTab('translate')">
        <div id="app-logo-bg" class="bg-gradient-to-tr from-amber-500 to-indigo-600 p-2 rounded-xl text-white font-bold text-lg shadow-md">
          <i class="fa-solid fa-language"></i>
        </div>
        <div>
          <span class="text-xl font-extrabold bg-gradient-to-r from-amber-500 via-indigo-500 to-indigo-600 dark:from-amber-400 dark:via-indigo-300 dark:to-indigo-500 bg-clip-text text-transparent">
            ThaiMaster Pro
          </span>
        </div>
      </div>

<nav class="hidden md:flex space-x-2">
        <button onclick="switchTab('translate')" id="tab-btn-translate" class="nav-tab px-4 py-2 rounded-lg text-sm font-semibold flex items-center space-x-2 bg-indigo-600 text-white transition">
          <i class="fa-solid fa-magnifying-glass"></i>
          <span>Tra cứu</span>
        </button>
        <button onclick="switchTab('reader')" id="tab-btn-reader" class="nav-tab px-4 py-2 rounded-lg text-sm font-semibold flex items-center space-x-2 text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
          <i class="fa-solid fa-book-open"></i>
          <span>Bài đọc</span>
        </button>
        <button onclick="switchTab('vocab')" id="tab-btn-vocab" class="nav-tab px-4 py-2 rounded-lg text-sm font-semibold flex items-center space-x-2 text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
          <i class="fa-solid fa-bookmark"></i>
          <span>Sổ từ vựng</span>
        </button>
        <button onclick="switchTab('practice')" id="tab-btn-practice" class="nav-tab px-4 py-2 rounded-lg text-sm font-semibold flex items-center space-x-2 text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
          <i class="fa-solid fa-graduation-cap"></i>
          <span>Luyện tập</span>
        </button>
      </nav>

<div class="flex items-center space-x-3">
        
        <div class="flex items-center space-x-1.5 bg-amber-500/10 border border-amber-500/30 text-amber-600 dark:text-amber-400 px-3 py-1.5 rounded-xl text-xs font-bold shadow-sm" title="Chuỗi ngày học liên tục">
          <i class="fa-solid fa-fire text-amber-500 text-sm animate-pulse"></i>
          <span id="streak-counter-num">1</span> <span class="hidden sm:inline">ngày</span>
        </div>

<button onclick="openSettingsModal()" class="w-10 h-10 rounded-xl bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 hover:text-amber-500 flex items-center justify-center border border-slate-300 dark:border-slate-700 transition shadow-sm" title="Cài đặt">
          <i class="fa-solid fa-gear text-lg"></i>
        </button>
      </div>
    </div>

<div class="flex md:hidden border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-[#0f172a] text-xs font-medium justify-around py-2">
      <button onclick="switchTab('translate')" id="mob-btn-translate" class="flex flex-col items-center p-1 text-indigo-600 dark:text-indigo-400">
        <i class="fa-solid fa-magnifying-glass text-base mb-0.5"></i>Tra cứu
      </button>
      <button onclick="switchTab('reader')" id="mob-btn-reader" class="flex flex-col items-center p-1 text-slate-500 dark:text-slate-400">
        <i class="fa-solid fa-book-open text-base mb-0.5"></i>Bài đọc
      </button>
      <button onclick="switchTab('vocab')" id="mob-btn-vocab" class="flex flex-col items-center p-1 text-slate-500 dark:text-slate-400">
        <i class="fa-solid fa-bookmark text-base mb-0.5"></i>Từ vựng
      </button>
      <button onclick="switchTab('practice')" id="mob-btn-practice" class="flex flex-col items-center p-1 text-slate-500 dark:text-slate-400">
        <i class="fa-solid fa-graduation-cap text-base mb-0.5"></i>Luyện tập
      </button>
    </div>
  </header>

<main class="flex-grow max-w-5xl w-full mx-auto p-4 md:p-6 space-y-5">

<section id="section-translate" class="tab-content space-y-4">
      <div class="bg-white dark:bg-[#1e293b] rounded-2xl border border-slate-200 dark:border-slate-700/80 shadow-md dark:shadow-xl overflow-hidden transition-colors">
        
        
        <div class="bg-slate-100 dark:bg-[#111827] border-b border-slate-200 dark:border-slate-800 px-4 py-3 flex items-center justify-between">
          <div class="flex items-center space-x-2 md:space-x-4 w-full justify-between md:justify-start">
            <button id="lang-btn-src" class="px-4 py-2 rounded-xl text-sm font-bold bg-indigo-600 text-white flex items-center space-x-2 transition shadow">
              <span>Tiếng Thái</span>
            </button>

<button onclick="swapTranslateDirection()" class="p-2.5 rounded-full bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 text-amber-600 dark:text-amber-400 transition shadow border border-slate-300 dark:border-slate-700" title="Đổi ngôn ngữ">
              <i class="fa-solid fa-arrow-right-arrow-left text-sm"></i>
            </button>

<button id="lang-btn-tgt" class="px-4 py-2 rounded-xl text-sm font-bold bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-700 flex items-center space-x-2 transition">
              <span>Tiếng Việt</span>
            </button>
          </div>

<div id="virtual-keyboard-box" class="hidden bg-slate-50 dark:bg-[#0f172a] border-b border-slate-200 dark:border-slate-800 p-4 space-y-2">
          <div class="flex justify-between items-center pb-2 border-b border-slate-300 dark:border-slate-700 text-xs font-bold text-amber-600 dark:text-amber-400">
            <span>BÀN PHÍM TIẾNG THÁI</span>
            <button onclick="toggleVirtualKeyboard()" class="text-slate-500 hover:text-slate-800 dark:hover:text-white"><i class="fa-solid fa-xmark text-sm"></i></button>
          </div>
          <div id="keyboard-keys-container" class="flex flex-wrap gap-1.5 pt-1">
            
          </div>
        </div>

<div class="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-slate-200 dark:divide-slate-800 items-stretch">
          
          
          <div class="p-5 flex flex-col justify-between min-h-[200px] md:min-h-[240px] bg-slate-50/50 dark:bg-[#1e293b]/50">
            <div class="flex-grow relative w-full">
              <textarea id="input-translate" 
                class="w-full h-full bg-transparent text-slate-800 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none text-2xl resize-none font-thai leading-relaxed font-bold" 
                placeholder="Nhập văn bản..."
                oninput="onInputTranslateChange()"></textarea>
              
              <button id="clear-input-btn" onclick="clearTranslateInput()" class="hidden absolute top-0 right-0 text-slate-400 hover:text-slate-700 dark:hover:text-white p-1">
                <i class="fa-solid fa-circle-xmark text-lg"></i>
              </button>
            </div>

<div class="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400 pt-3 border-t border-slate-200 dark:border-slate-800/80 mt-2">
              <div class="flex items-center space-x-2">
                <button onclick="speakSourceText()" class="hover:text-amber-500 p-2 rounded-lg bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 transition" title="Nghe đọc">
                  <i class="fa-solid fa-volume-high text-base"></i>
                </button>
                <button onclick="startVoiceInput()" class="hover:text-amber-500 p-2 rounded-lg bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 transition" title="Nói qua Micro">
                  <i class="fa-solid fa-microphone text-base"></i>
                </button>
              </div>
              <span id="input-char-count" class="text-slate-400 dark:text-slate-500 font-semibold">0 / 5000</span>
            </div>
          </div>

<div class="p-5 flex flex-col justify-between min-h-[200px] md:min-h-[240px] bg-slate-100/80 dark:bg-[#1a2333]/90 relative">
            
            <div class="flex-grow flex flex-col justify-start space-y-2 overflow-y-auto custom-scrollbar pr-1">
              
              <div id="translation-loading" class="hidden flex items-center space-x-2 text-indigo-600 dark:text-indigo-400 text-sm font-semibold">
                <i class="fa-solid fa-spinner fa-spin text-base"></i>
                <span>Đang tra cứu...</span>
              </div>

<div id="target-main-block" class="space-y-1">
                <p id="res-target-text" class="text-slate-400 italic text-2xl font-bold">Kết quả tra cứu...</p>
                
                
                <div id="phonetic-container" class="hidden pt-1">
                  <p id="res-phonetic" class="text-indigo-600 dark:text-indigo-300 text-base font-semibold font-sans tracking-wide">[Phiên âm]</p>
                </div>
              </div>
            </div>

<div class="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400 pt-3 border-t border-slate-200 dark:border-slate-800/80 mt-2">
              <button onclick="speakTargetText()" class="hover:text-emerald-600 dark:hover:text-green-400 p-2 rounded-lg bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 transition" title="Nghe kết quả">
                <i class="fa-solid fa-volume-high text-base"></i>
              </button>
              
              <button onclick="quickSaveTranslateToVocab()" class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg font-bold text-xs transition shadow flex items-center space-x-1.5">
                <i class="fa-solid fa-bookmark"></i>
                <span>Lưu từ vựng</span>
              </button>
            </div>
          </div>

</div>
      </div>

<div class="bg-white dark:bg-[#1e293b] rounded-xl border border-slate-200 dark:border-slate-700/60 p-4 flex items-center space-x-3 shadow-sm">
        <i class="fa-solid fa-tag text-amber-500"></i>
        <span class="text-xs font-bold text-slate-700 dark:text-slate-300">Lưu vào chủ đề:</span>
        <select id="save-topic-select" class="topic-dropdown-select bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 rounded-lg px-3 py-2 text-slate-800 dark:text-slate-200 text-sm focus:outline-none focus:border-indigo-500 font-semibold flex-grow sm:flex-none">
          
        </select>
      </div>

</section>

<section id="section-reader" class="tab-content hidden relative space-y-4">
      
      
      <div class="sticky top-16 z-30 bg-slate-100 dark:bg-[#0b0f19] pt-2 pb-2 space-y-2">
        
        
        <div class="flex flex-wrap items-center justify-between bg-white/95 dark:bg-[#1e293b]/95 backdrop-blur-sm border border-slate-200 dark:border-slate-800 p-2.5 rounded-xl gap-3 text-sm shadow-md">
          <div class="flex items-center space-x-3">
            <select id="reader-article-select" onchange="changeArticle()" class="bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 text-amber-600 dark:text-amber-400 text-sm font-semibold rounded-lg px-2 py-1.5 focus:outline-none">
              <option value="thailand">Giới thiệu Thái Lan</option>
              <option value="food">Văn hóa ẩm thực</option>
              <option value="travel">Đi lại & Hỏi đường</option>
            </select>
            <button onclick="openCustomReaderModal()" class="text-indigo-600 dark:text-indigo-400 hover:underline font-semibold text-xs border border-indigo-500/30 px-2.5 py-1.5 rounded bg-slate-100 dark:bg-slate-800">
              + Bài mới
            </button>
          </div>

<div id="inline-dict-box" class="hidden bg-white dark:bg-[#1e293b] border border-indigo-500/60 rounded-xl p-3.5 shadow-2xl flex flex-col md:flex-row justify-between items-start md:items-center gap-3 transition-all">
          <div class="flex-1">
            <div class="flex items-center gap-3">
              <h3 id="inline-thai" class="text-3xl font-bold text-amber-600 dark:text-amber-300 font-thai"></h3>
              <button id="inline-speak-btn" class="w-8 h-8 rounded-full bg-indigo-500/20 text-indigo-600 dark:text-indigo-300 hover:bg-indigo-600 hover:text-white flex items-center justify-center transition" title="Nghe đọc">
                <i class="fa-solid fa-volume-high text-xs"></i>
              </button>
            </div>
            
            <p id="inline-phonetic" class="text-indigo-600 dark:text-indigo-300 font-semibold text-sm pt-0.5"></p>
            <p id="inline-viet" class="text-emerald-600 dark:text-green-400 text-xl font-bold pt-1.5"></p>
          </div>

<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full md:w-auto border-t md:border-t-0 border-slate-200 dark:border-slate-800 pt-3 md:pt-0">
            <div class="flex items-center space-x-1.5 bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 rounded-lg px-2 py-1">
              <i class="fa-solid fa-tag text-amber-500 text-xs"></i>
              <select id="inline-topic-select" class="topic-dropdown-select bg-transparent text-slate-800 dark:text-slate-200 text-xs font-semibold focus:outline-none">
                
              </select>
            </div>

</div>

<div class="bg-white dark:bg-[#1e293b] rounded-2xl border border-slate-200 dark:border-slate-700/60 p-5 md:p-8 space-y-6 shadow-md dark:shadow-xl relative z-10 min-h-[450px]">
        <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700/60 pb-3">
          <h3 id="reader-title" class="text-xl font-bold text-amber-600 dark:text-amber-400">Giới thiệu Thái Lan</h3>
          <button onclick="speakThai(getArticleFullText())" class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-xl text-sm font-bold flex items-center space-x-2 transition shadow">
            <i class="fa-solid fa-volume-high text-sm"></i><span>Đọc bài</span>
          </button>
        </div>

<div id="reader-words-container" class="flex flex-wrap gap-2 items-baseline leading-relaxed font-thai text-slate-800 dark:text-slate-100" style="font-size: 28px;">
        </div>
      </div>
    </section>

<section id="section-vocab" class="tab-content hidden space-y-4">
      <div class="bg-white dark:bg-[#1e293b] p-5 rounded-xl border border-slate-200 dark:border-slate-700/60 space-y-4 shadow-md dark:shadow-lg">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <div class="flex items-center space-x-3">
            <div class="p-2.5 bg-amber-500/20 text-amber-500 rounded-xl">
              <i class="fa-solid fa-bookmark text-xl"></i>
            </div>
            <div>
              <h2 class="text-lg font-bold text-slate-900 dark:text-white">Sổ Từ Vựng Cá Nhân</h2>
            </div>
          </div>

<div class="flex items-center space-x-2 flex-wrap gap-y-2">
            <button onclick="openTopicManagerModal()" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold px-3.5 py-2 rounded-lg text-xs flex items-center space-x-1.5 transition shadow">
              <i class="fa-solid fa-folder-gear"></i><span>Quản lý chủ đề</span>
            </button>
            <button onclick="playAllVocabPlaylist()" class="bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-200 font-bold px-3.5 py-2 rounded-lg text-xs flex items-center space-x-1.5 shadow-sm">
              <i class="fa-solid fa-circle-play text-indigo-600 dark:text-indigo-400"></i><span>Nghe tất cả</span>
            </button>
            <button onclick="openAddVocabModal()" class="bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold px-3.5 py-2 rounded-lg text-xs flex items-center space-x-1.5 shadow">
              <i class="fa-solid fa-plus"></i><span>Thêm từ mới</span>
            </button>
          </div>
        </div>

<button onclick="toggleWeakWordsOnlyFilter()" id="weak-words-filter-btn" class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 px-3.5 py-2 rounded-xl text-xs font-bold flex items-center space-x-1.5 whitespace-nowrap shadow-sm">
          <i class="fa-solid fa-triangle-exclamation text-amber-500"></i>
          <span>Chưa thuộc</span>
        </button>
      </div>

<section id="section-practice" class="tab-content hidden space-y-6">
      <div class="bg-white dark:bg-[#1e293b] p-4 rounded-xl border border-slate-200 dark:border-slate-700/60 flex flex-col md:flex-row items-center justify-between gap-4 shadow-sm">
        <div class="flex items-center space-x-2">
          <i class="fa-solid fa-graduation-cap text-amber-500 text-lg"></i>
          <span class="text-xs font-bold text-slate-700 dark:text-slate-300 uppercase">CHỌN CHỦ ĐỀ ÔN TẬP:</span>
        </div>
        <select id="practice-topic-select" onchange="startSelectedPracticeMode()" class="bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-white text-sm font-semibold rounded-lg px-3 py-2 focus:outline-none">
          
        </select>
      </div>

<div class="flex justify-center border-b border-slate-200 dark:border-slate-800 pb-3 gap-2 text-xs md:text-sm font-semibold flex-wrap">
        <button onclick="switchPracticeSubTab('flashcard')" id="prac-subtab-flashcard" class="px-4 py-2.5 rounded-xl bg-indigo-600 text-white flex items-center space-x-1.5 transition shadow">
          <i class="fa-solid fa-clone"></i> <span>Thẻ Nhớ</span>
        </button>
        <button onclick="switchPracticeSubTab('quiz')" id="prac-subtab-quiz" class="px-4 py-2.5 rounded-xl text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 flex items-center space-x-1.5 transition">
          <i class="fa-solid fa-circle-question"></i> <span>Trắc Nghiệm</span>
        </button>
        <button onclick="switchPracticeSubTab('listening')" id="prac-subtab-listening" class="px-4 py-2.5 rounded-xl text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 flex items-center space-x-1.5 transition">
          <i class="fa-solid fa-headphones"></i> <span>Luyện Nghe</span>
        </button>
        <button onclick="switchPracticeSubTab('speaking')" id="prac-subtab-speaking" class="px-4 py-2.5 rounded-xl text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 flex items-center space-x-1.5 transition">
          <i class="fa-solid fa-microphone"></i> <span>Luyện Nói</span>
        </button>
        <button onclick="switchPracticeSubTab('writing')" id="prac-subtab-writing" class="px-4 py-2.5 rounded-xl text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 flex items-center space-x-1.5 transition">
          <i class="fa-solid fa-pen-to-square"></i> <span>Luyện Viết</span>
        </button>
      </div>

<div id="subtab-flashcard" class="max-w-xl mx-auto space-y-4">
        <div class="flex items-center justify-between text-xs font-bold text-slate-500 dark:text-slate-400">
          <span id="card-counter">Thẻ 1 / 6</span>
          <div class="flex items-center space-x-3">
            <span id="mastered-stat-badge" class="text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2.5 py-0.5 rounded border border-emerald-500/20">Đã thuộc: 0</span>
            <button onclick="shufflePracticeCards()" class="text-amber-500 hover:underline flex items-center space-x-1">
              <i class="fa-solid fa-shuffle"></i> <span>Trộn thẻ</span>
            </button>
          </div>
        </div>

<div class="flip-card h-80 w-full cursor-pointer" onclick="toggleCardFlip()">
          <div id="flashcard-inner" class="flip-card-inner relative w-full h-full rounded-2xl bg-gradient-to-b from-indigo-600 to-indigo-900 shadow-2xl p-6 flex flex-col justify-between text-center border border-indigo-400/30">
            
            <div class="flip-card-front absolute inset-0 p-6 flex flex-col justify-between items-center">
              <div class="w-full flex justify-between items-center">
                <span class="bg-indigo-900/80 text-indigo-200 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">TIẾNG THÁI</span>
                <button onclick="event.stopPropagation(); speakThai(getCurrentPracticeWord().thai)" class="w-10 h-10 rounded-full bg-indigo-500/30 hover:bg-indigo-500/60 flex items-center justify-center text-amber-300">
                  <i class="fa-solid fa-volume-high text-lg"></i>
                </button>
              </div>

<div class="my-auto space-y-1">
                <h2 id="card-thai" class="text-5xl font-extrabold text-amber-300 font-thai tracking-wide">สวัสดี</h2>
                <p id="card-phonetic" class="text-indigo-200 text-lg font-medium pt-2">[Xà-wắt-đi]</p>
              </div>

<div class="flip-card-back absolute inset-0 p-6 flex flex-col justify-between items-center bg-slate-900 rounded-2xl border border-indigo-500/40">
              <div class="w-full flex justify-between items-center">
                <span class="bg-emerald-900/80 text-emerald-300 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">TIẾNG VIỆT</span>
                <span id="card-status-badge" class="text-[10px] font-bold px-2 py-0.5 rounded bg-slate-800 text-slate-400">Đang học</span>
              </div>

<div class="w-full grid grid-cols-2 gap-3 pt-2" onclick="event.stopPropagation()">
                <button onclick="markCardMastered(false)" class="bg-slate-800 hover:bg-slate-700 text-red-400 border border-red-500/30 font-bold py-2 rounded-xl text-xs flex items-center justify-center space-x-1 transition">
                  <i class="fa-solid fa-xmark"></i> <span>Chưa thuộc</span>
                </button>
                <button onclick="markCardMastered(true)" class="bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-2 rounded-xl text-xs flex items-center justify-center space-x-1 transition shadow">
                  <i class="fa-solid fa-check"></i> <span>Đã thuộc</span>
                </button>
              </div>
            </div>
          </div>
        </div>

<div class="flex items-center justify-between pt-2">
          <button onclick="prevFlashcard()" class="w-1/2 mr-2 bg-white dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 font-bold py-3 rounded-xl flex items-center justify-center space-x-2 transition border border-slate-200 dark:border-slate-700 shadow-sm">
            <i class="fa-solid fa-arrow-left"></i><span>Trước</span>
          </button>
          <button onclick="nextFlashcard()" class="w-1/2 ml-2 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-3 rounded-xl flex items-center justify-center space-x-2 shadow-lg transition">
            <span>Tiếp</span><i class="fa-solid fa-arrow-right"></i>
          </button>
        </div>
      </div>

<div id="subtab-quiz" class="hidden max-w-xl mx-auto space-y-6">
        <div class="bg-white dark:bg-[#1e293b] rounded-2xl border border-slate-200 dark:border-slate-700 p-6 space-y-6 shadow-md dark:shadow-xl">
          <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700/60 pb-3">
            <span id="quiz-progress-text" class="text-xs font-bold text-amber-600 dark:text-amber-400">Câu 1 / 5</span>
            <span id="quiz-score-badge" class="text-xs font-bold bg-indigo-500/10 text-indigo-600 dark:text-indigo-300 px-3 py-1 rounded-full border border-indigo-500/30">Điểm: 0</span>
          </div>

<div class="text-center py-4 space-y-2">
            <h2 id="quiz-question-thai" class="text-5xl font-extrabold text-amber-500 font-thai">สวัสดี</h2>
            <button onclick="speakThai(document.getElementById('quiz-question-thai').innerText)" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm mt-2">
              <i class="fa-solid fa-volume-high mr-1"></i>Nghe phát âm
            </button>
          </div>

<div id="subtab-listening" class="hidden max-w-xl mx-auto space-y-6">
        <div class="bg-white dark:bg-[#1e293b] rounded-2xl border border-slate-200 dark:border-slate-700 p-6 space-y-6 shadow-md dark:shadow-xl">
          <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700/60 pb-3">
            <span id="listen-progress-text" class="text-xs font-bold text-amber-600 dark:text-amber-400">Câu 1 / 5</span>
            <span id="listen-score-badge" class="text-xs font-bold bg-indigo-500/10 text-indigo-600 dark:text-indigo-300 px-3 py-1 rounded-full border border-indigo-500/30">Điểm: 0</span>
          </div>

<div class="text-center py-6 space-y-4">
            <span class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-bold">Bấm loa để nghe âm thanh từ tiếng Thái:</span>
            <div class="flex justify-center">
              <button onclick="playListeningAudio()" class="w-20 h-20 rounded-full bg-gradient-to-tr from-amber-500 to-indigo-600 hover:scale-105 text-white flex items-center justify-center text-3xl shadow-xl transition">
                <i class="fa-solid fa-volume-high"></i>
              </button>
            </div>
            <p class="text-xs text-indigo-600 dark:text-indigo-300 italic">Chọn nghĩa tiếng Việt đúng của từ vừa nghe:</p>
          </div>

<div id="subtab-speaking" class="hidden max-w-xl mx-auto space-y-6">
        <div class="bg-white dark:bg-[#1e293b] rounded-2xl border border-slate-200 dark:border-slate-700 p-6 space-y-6 shadow-md dark:shadow-xl">
          <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700/60 pb-3">
            <span id="speak-progress-text" class="text-xs font-bold text-amber-600 dark:text-amber-400">Câu 1 / 5</span>
            <span id="speak-score-badge" class="text-xs font-bold bg-indigo-500/10 text-indigo-600 dark:text-indigo-300 px-3 py-1 rounded-full border border-indigo-500/30">Điểm: 0</span>
          </div>

<div class="text-center py-4 space-y-2">
            <span class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-bold">Hãy phát âm chuẩn từ tiếng Thái sau:</span>
            <h2 id="speak-target-thai" class="text-5xl font-extrabold text-amber-500 font-thai">สวัสดี</h2>
            <p id="speak-target-phonetic" class="text-sm font-semibold text-indigo-600 dark:text-indigo-300">[Xà-wắt-đi]</p>
            <p id="speak-target-viet" class="text-base font-bold text-emerald-600 dark:text-green-400">Xin chào</p>
          </div>

<div class="flex flex-col items-center space-y-3 pt-2">
            <button onclick="playSpeakingReferenceAudio()" class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline flex items-center gap-1 font-bold">
              <i class="fa-solid fa-volume-high"></i> Nghe giọng mẫu
            </button>

<button onclick="startSpeakingTest()" id="speak-record-btn" class="w-20 h-20 rounded-full bg-emerald-600 hover:bg-emerald-500 text-white flex items-center justify-center text-3xl shadow-xl transition transform active:scale-95">
              <i class="fa-solid fa-microphone"></i>
            </button>
            <p class="text-xs text-slate-500">Bấm nút Micro để bắt đầu nói</p>
          </div>

<div id="subtab-writing" class="hidden max-w-xl mx-auto space-y-6">
        <div class="bg-white dark:bg-[#1e293b] rounded-2xl border border-slate-200 dark:border-slate-700 p-6 space-y-6 shadow-md dark:shadow-xl">
          <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700/60 pb-3">
            <span id="write-progress-text" class="text-xs font-bold text-amber-600 dark:text-amber-400">Câu 1 / 5</span>
            <span id="write-score-badge" class="text-xs font-bold bg-indigo-500/10 text-indigo-600 dark:text-indigo-300 px-3 py-1 rounded-full border border-indigo-500/30">Điểm: 0</span>
          </div>

<div class="text-center py-3 space-y-1">
            <span class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider">Nhìn nghĩa tiếng Việt & Gõ từ tiếng Thái:</span>
            <h2 id="write-prompt-viet" class="text-3xl font-extrabold text-emerald-600 dark:text-emerald-400 pt-1">Xin chào</h2>
            <p id="write-prompt-phonetic" class="text-xs text-indigo-600 dark:text-indigo-300 font-medium">[Xà-wắt-đi]</p>
          </div>

<div class="space-y-3">
            <input type="text" id="write-input" placeholder="Gõ từ Tiếng Thái tại đây..." 
              class="w-full bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 rounded-xl px-4 py-3 text-2xl font-bold text-amber-500 font-thai text-center focus:outline-none focus:border-indigo-500">
            
            <button onclick="checkWritingAnswer()" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3 rounded-xl shadow transition">
              Kiểm Tra Chính Tả
            </button>
          </div>

</section>

</main>

<div id="topic-manager-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center hidden p-4">
    <div class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700 rounded-2xl max-w-md w-full p-6 space-y-5 shadow-2xl relative max-h-[90vh] flex flex-col">
      <button onclick="closeTopicManagerModal()" class="absolute top-4 right-4 text-slate-400 hover:text-slate-800 dark:hover:text-white">
        <i class="fa-solid fa-xmark text-lg"></i>
      </button>

<div id="settings-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center hidden p-4">
    <div class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700 rounded-2xl max-w-md w-full p-6 space-y-5 shadow-2xl relative max-h-[90vh] overflow-y-auto custom-scrollbar">
      <button onclick="closeSettingsModal()" class="absolute top-4 right-4 text-slate-400 hover:text-slate-800 dark:hover:text-white">
        <i class="fa-solid fa-xmark text-lg"></i>
      </button>

<div class="flex items-center space-x-2 text-amber-500 border-b border-slate-200 dark:border-slate-700 pb-3">
        <i class="fa-solid fa-gear text-xl"></i>
        <h3 class="text-lg font-bold text-slate-900 dark:text-white">Cài Đặt Trang Web</h3>
      </div>

<div class="space-y-4 text-sm text-slate-800 dark:text-slate-200">
        
        
        <div class="bg-slate-100 dark:bg-[#0f172a] border border-slate-200 dark:border-slate-700 rounded-xl p-3.5 space-y-3">
          <label class="block text-xs font-bold text-indigo-600 dark:text-amber-400 uppercase tracking-wider">TÀI KHOẢN ĐỒNG BỘ ĐÁM MÂY (GMAIL):</label>
          
          <div id="user-auth-widget">
            <button id="google-login-btn" onclick="handleGoogleSignIn()" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs py-2.5 rounded-xl flex items-center justify-center space-x-2 transition shadow">
              <i class="fa-brands fa-google text-sm"></i>
              <span>Kết nối với Google / Gmail</span>
            </button>
            
            
            <div id="user-profile-box" class="hidden flex items-center justify-between bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-2.5 rounded-xl">
              <div class="flex items-center space-x-2.5">
                <img id="user-avatar" src="" class="w-8 h-8 rounded-full border border-indigo-400 object-cover" alt="User Avatar">
                <div>
                  <p id="user-name" class="text-xs font-bold text-slate-900 dark:text-slate-100">User</p>
                  <p class="text-[10px] text-emerald-600 dark:text-emerald-400 font-semibold">✓ Đã kết nối Gmail</p>
                </div>
              </div>
              <button onclick="handleSignOut()" class="text-slate-500 hover:text-red-500 px-3 py-1.5 text-xs font-bold bg-slate-100 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-700">
                Đăng xuất
              </button>
            </div>
          </div>
        </div>

<div>
          <div class="flex items-center justify-between mb-1.5">
            <label class="text-xs font-bold text-slate-500 dark:text-slate-400">TỐC ĐỘ PHÁT ÂM (TTS):</label>
            <span id="speech-rate-slider-val" class="text-amber-500 font-bold text-xs">0.75x</span>
          </div>
          <input type="range" id="speech-rate-range" min="0.3" max="1.5" step="0.05" value="0.75" 
            oninput="handleSpeechRateSliderChange(this.value)" 
            class="w-full accent-indigo-600 cursor-pointer bg-slate-200 dark:bg-slate-800 h-2 rounded-lg">
          <div class="flex justify-between text-[10px] text-slate-400 font-bold pt-1">
            <span>0.3x (Chậm)</span>
            <span>0.75x (Chuẩn)</span>
            <span>1.5x (Nhanh)</span>
          </div>
        </div>

<div class="flex items-center justify-between py-2 border-t border-b border-slate-200 dark:border-slate-800">
          <div>
            <p class="font-semibold text-slate-900 dark:text-white">Giao diện Ban đêm (Dark Mode)</p>
            <p class="text-xs text-slate-500 dark:text-slate-400">Chỉnh sáng hoặc tối toàn bộ giao diện</p>
          </div>
          <input type="checkbox" id="dark-mode-toggle" checked onchange="toggleDarkMode(this.checked)" class="w-5 h-5 accent-indigo-600 rounded cursor-pointer">
        </div>

<div>
          <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 mb-2">MỤC TIÊU HỌC HÀNG NGÀY:</label>
          <select id="sett-daily-goal" onchange="changeDailyGoalSetting()" class="w-full bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 rounded-lg px-3 py-2 text-slate-800 dark:text-white font-semibold focus:outline-none">
            <option value="5">🎯 Học 5 từ / ngày (Nhẹ nhàng)</option>
            <option value="10" selected>🎯 Học 10 từ / ngày (Chuẩn)</option>
            <option value="20">🎯 Học 20 từ / ngày (Chăm chỉ)</option>
          </select>
        </div>

<div class="flex items-center justify-between py-2 border-b border-slate-200 dark:border-slate-800">
          <div>
            <p class="font-semibold text-slate-900 dark:text-white">Tự động đọc âm bài tập</p>
            <p class="text-xs text-slate-500 dark:text-slate-400">Phát âm khi mở câu hỏi luyện nghe</p>
          </div>
          <input type="checkbox" id="sett-auto-audio" checked class="w-5 h-5 accent-indigo-600 rounded cursor-pointer">
        </div>

<div class="pt-1 space-y-2">
          <label class="block text-xs font-bold text-slate-500 dark:text-slate-400">SAO LƯU DỮ LIỆU CÁ NHÂN:</label>
          <div class="grid grid-cols-2 gap-2">
            <button onclick="exportVocabJSON()" class="bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 border border-slate-300 dark:border-slate-700 font-bold py-2 rounded-lg text-xs flex items-center justify-center space-x-1">
              <i class="fa-solid fa-download"></i> <span>Tải sao lưu</span>
            </button>
            <label class="bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 border border-slate-300 dark:border-slate-700 font-bold py-2 rounded-lg text-xs flex items-center justify-center space-x-1 cursor-pointer">
              <i class="fa-solid fa-upload"></i> <span>Khôi phục tệp</span>
              <input type="file" id="import-json-file" accept=".json" onchange="importVocabJSON(event)" class="hidden">
            </label>
          </div>
        </div>

<div class="pt-2 border-t border-slate-200 dark:border-slate-800">
          <button onclick="resetAllDataPrompt()" class="w-full bg-red-500/10 hover:bg-red-500/20 text-red-500 border border-red-500/30 font-bold py-2 rounded-xl text-xs flex items-center justify-center space-x-2 transition">
            <i class="fa-solid fa-rotate-left"></i>
            <span>Đặt lại dữ liệu ban đầu</span>
          </button>
        </div>
      </div>

<div id="vocab-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center hidden p-4">
    <div class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700 rounded-2xl max-w-md w-full p-6 space-y-4 shadow-2xl relative">
      <button onclick="closeVocabModal()" class="absolute top-4 right-4 text-slate-400 hover:text-slate-800 dark:hover:text-white">
        <i class="fa-solid fa-xmark text-lg"></i>
      </button>
      <h3 id="vocab-modal-title" class="text-lg font-bold text-amber-500">Từ Vựng</h3>
      <div class="space-y-3 text-sm">
        <input type="text" id="modal-input-thai" placeholder="Tiếng Thái (VD: ขอบคุณ)" class="w-full bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 rounded-lg px-3 py-2 text-slate-800 dark:text-white font-thai focus:outline-none focus:border-indigo-500">
        <input type="text" id="modal-input-phonetic" placeholder="Phiên âm (VD: Khọp-khun)" class="w-full bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 rounded-lg px-3 py-2 text-slate-800 dark:text-white focus:outline-none focus:border-indigo-500">
        <input type="text" id="modal-input-viet" placeholder="Nghĩa Tiếng Việt" class="w-full bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 rounded-lg px-3 py-2 text-slate-800 dark:text-white focus:outline-none focus:border-indigo-500">
        <select id="modal-input-topic" class="topic-dropdown-select w-full bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 rounded-lg px-3 py-2 text-slate-800 dark:text-white focus:outline-none focus:border-indigo-500 font-semibold">
          
        </select>
      </div>
      <div class="pt-3 flex justify-end space-x-2">
        <button onclick="closeVocabModal()" class="px-4 py-2 bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-slate-300 rounded-lg text-xs font-semibold">Hủy</button>
        <button onclick="saveVocabFromModal()" class="px-5 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-lg text-xs">Lưu</button>
      </div>
    </div>
  </div>

<div id="custom-reader-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center hidden p-4">
    <div class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700 rounded-2xl max-w-lg w-full p-6 space-y-4 shadow-2xl relative">
      <button onclick="closeCustomReaderModal()" class="absolute top-4 right-4 text-slate-400 hover:text-slate-800 dark:hover:text-white">
        <i class="fa-solid fa-xmark text-lg"></i>
      </button>
      <h3 class="text-lg font-bold text-amber-500">Dán Bài Đọc Mới</h3>
      <div class="space-y-3">
        <input type="text" id="custom-reader-title" placeholder="Tiêu đề bài đọc..." class="w-full bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-800 dark:text-white focus:outline-none focus:border-indigo-500">
        <textarea id="custom-reader-text" rows="5" placeholder="Dán văn bản tiếng Thái vào đây..." class="w-full bg-slate-100 dark:bg-[#0f172a] border border-slate-300 dark:border-slate-700 rounded-lg px-3 py-2 text-base text-slate-800 dark:text-white font-thai focus:outline-none focus:border-indigo-500 resize-none"></textarea>
      </div>
      <div class="pt-2 flex justify-end space-x-2">
        <button onclick="closeCustomReaderModal()" class="px-4 py-2 bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-slate-300 rounded-lg text-xs font-semibold">Hủy</button>
        <button onclick="submitCustomArticle()" class="px-5 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-lg text-xs">Tạo bài đọc</button>
      </div>
    </div>
  </div>

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
    import { getAuth, signInWithCustomToken, signInAnonymously, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
    import { getFirestore, doc, setDoc, getDoc, collection, onSnapshot } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";

const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : { apiKey: "demo", authDomain: "demo.firebaseapp.com", projectId: "demo" };
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
    const db = getFirestore(app);
    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-thai-app';

let currentUser = null;

onAuthStateChanged(auth, (user) => {
      currentUser = user;
      window.currentUser = user;

const profileBox = document.getElementById('user-profile-box');
      const loginBtn = document.getElementById('google-login-btn');
      const avatarImg = document.getElementById('user-avatar');
      const userNameEl = document.getElementById('user-name');

if (user && !user.isAnonymous) {
        if (profileBox) profileBox.classList.remove('hidden');
        if (loginBtn) loginBtn.classList.add('hidden');
        if (avatarImg) avatarImg.src = user.photoURL || "https://api.dicebear.com/7.x/bottts/svg?seed=" + user.uid;
        if (userNameEl) userNameEl.innerText = user.displayName || user.email?.split('@')[0] || "Học viên";
      } else {
        if (profileBox) profileBox.classList.add('hidden');
        if (loginBtn) loginBtn.classList.remove('hidden');
      }

if (user) {
        const userDocRef = doc(db, 'artifacts', appId, 'users', user.uid, 'userdata', 'profile');
        onSnapshot(userDocRef, (snapshot) => {
          if (snapshot.exists()) {
            const data = snapshot.data();
            if (data.vocabulary) {
              window.vocabulary = data.vocabulary;
              window.renderVocabCards();
              window.updateVocabCounter();
            }
            if (data.topics) {
              window.topics = data.topics;
              window.updateAllTopicDropdowns();
              window.renderTopicFilters();
            }
            if (data.streak) {
              document.getElementById('streak-counter-num').innerText = data.streak;
            }
          }
        }, (err) => {});
      }
    });

<script>
    const apiKey = "";

let defaultVocabulary = [
      { id: 1, thai: 'ต้มยำกุ้ง', phonetic: 'Tôm-yam-gúng', viet: 'Súp Tom Yum', topic: 'Ẩm thực & Món ăn', mastered: false },
      { id: 2, thai: 'โรงแรม', phonetic: 'Rông-ram', viet: 'Khách sạn', topic: 'Du lịch & Khách sạn', mastered: false },
      { id: 3, thai: 'สบายดีไหม', phonetic: 'Xà-bai-đi-mảy', viet: 'Bạn khỏe không?', topic: 'Giao tiếp hàng ngày', mastered: false },
      { id: 4, thai: 'ขอโทษ', phonetic: 'Khỏ-thốt', viet: 'Xin lỗi', topic: 'Giao tiếp hàng ngày', mastered: false },
      { id: 5, thai: 'สวัสดี', phonetic: 'Xà-wắt-đi', viet: 'Xin chào', topic: 'Giao tiếp hàng ngày', mastered: false },
      { id: 6, thai: 'ขอบคุณ', phonetic: 'Khọp-khun', viet: 'Cảm ơn', topic: 'Giao tiếp hàng ngày', mastered: false }
    ];

let vocabulary = [...defaultVocabulary];
    let translationDirection = 'TH_TO_VI'; 
    let currentReaderFontSize = 28; 
    let topics = ['Tất cả từ', 'Giao tiếp hàng ngày', 'Du lịch & Khách sạn', 'Ẩm thực & Món ăn'];
    let selectedTopic = 'Tất cả từ';
    let selectedWordElement = null;
    let speechRate = 0.75;
    let dailyGoal = 10;
    let showWeakOnly = false;
    let translateDebounceTimer = null;
    let autoNextTimer = null;

let practiceList = [];
    let practiceIndex = 0;
    let isFlipped = false;
    let currentPracticeSubTab = 'flashcard';

let quizCurrentIndex = 0;
    let quizScore = 0;
    let currentQuizWord = null;

const thaiKeys = [
      'ก','ข','ค','ง','จ','ฉ','ช','ซ','ฌ','ญ','ด','ต','ถ','ท','ธ','น',
      'บ','ป','ผ','ฝ','พ','ฟ','ภ','ม','ย','ร','ล','ว','ศ','ษ','ส','ห','ฬ','อ','ฮ',
      'ะ','า','ิ','ี','ึ','ื','ุ','ู','เ','แ','โ','ใ','ไ','็','่','้','๊','๋'
    ];

const dictionaryDB = {
      'ต้มยำกุ้ง': { viet: 'Súp Tom Yum', phonetic: 'Tôm-yam-gúng' },
      'สวัสดี': { viet: 'Xin chào', phonetic: 'Xà-wắt-đi' },
      'ขอบคุณ': { viet: 'Cảm ơn', phonetic: 'Khọp-khun' },
      'สบายดีไหม': { viet: 'Bạn khỏe không?', phonetic: 'Xà-bai-đi-mảy' },
      'โรงแรม': { viet: 'Khách sạn', phonetic: 'Rông-ram' },
      'ขอโทษ': { viet: 'Xin lỗi', phonetic: 'Khỏ-thốt' },
      'เท่าไหร่': { viet: 'Bao nhiêu tiền', phonetic: 'Thao-rài' },
      'ประเทศไทย': { viet: 'Nước Thái Lan', phonetic: 'Prà-thêt-thai' },
      'เป็น': { viet: 'Là / Ở', phonetic: 'Pen' },
      'ประเทศ': { viet: 'Quốc gia', phonetic: 'Prà-thêt' },
      'ใน': { viet: 'Ở trong', phonetic: 'Nai' },
      'ภูมิภาค': { viet: 'Khu vực', phonetic: 'Phūm-mí-phâk' },
      'เอเชีย': { viet: 'Châu Á', phonetic: 'E-chia' },
      'ตะวันออกเฉียงใต้': { viet: 'Đông Nam', phonetic: 'Tà-wan-ọk-chhiềng-tái' },
      'มี': { viet: 'Có', phonetic: 'Mī' },
      'กรุงเทพมหานคร': { viet: 'Thủ đô Bangkok', phonetic: 'Krung-thêp-má-hă-ná-khọn' },
      'เมืองหลวง': { viet: 'Thủ đô', phonetic: 'Mương-luổng' },
      'คนไทย': { viet: 'Người Thái Lan', phonetic: 'Khon-thai' },
      'ความ': { viet: 'Sự / Niềm', phonetic: 'Khwam' },
      'เป็นกันเอง': { viet: 'Thân thiện', phonetic: 'Pen-kan-eng' },
      'และ': { viet: 'Và', phonetic: 'Lá' },
      'ยินดี': { viet: 'Vui mừng', phonetic: 'Yin-dī' },
      'ต้อนรับ': { viet: 'Đón tiếp', phonetic: 'Tón-ráp' },
      'นักท่องเที่ยว': { viet: 'Khách du lịch', phonetic: 'Nák-thông-thiệu' },
      'อาหารไทย': { viet: 'Món ăn Thái', phonetic: 'A-hăn-thai' },
      'ชื่อเสียง': { viet: 'Nổi tiếng', phonetic: 'Chứ-sỉa-ng' },
      'ระดับโลก': { viet: 'Tầm thế giới', phonetic: 'Rá-dặp-lôk' },
      'เช่น': { viet: 'Ví dụ như', phonetic: 'Chên' },
      'ผัดไทย': { viet: 'Pad Thai', phonetic: 'Phặt-thai' },

'xin chào': { thai: 'สวัสดี', phonetic: 'Xà-wắt-đi' },
      'cảm ơn': { thai: 'ขอบคุณ', phonetic: 'Khọp-khun' },
      'xin lỗi': { thai: 'ขอโทษ', phonetic: 'Khỏ-thốt' },
      'khách sạn': { thai: 'โรงแรม', phonetic: 'Rông-ram' },
      'bạn khỏe không?': { thai: 'สบายดีไหม', phonetic: 'Xà-bai-đi-mảy' }
    };

let articles = {
      thailand: {
        title: "Giới thiệu Thái Lan",
        words: ["ประเทศไทย", "เป็น", "ประเทศ", "ใน", "ภูมิภาค", "เอเชีย", "ตะวันออกเฉียงใต้", "มี", "กรุงเทพมหานคร", "เป็น", "เมืองหลวง", "คนไทย", "มี", "ความ", "เป็นกันเอง", "และ", "ยินดี", "ต้อนรับ", "นักท่องเที่ยว"]
      },
      food: {
        title: "Văn hóa ẩm thực Thái",
        words: ["อาหารไทย", "มี", "ชื่อเสียง", "ระดับโลก", "เช่น", "ต้มยำกุ้ง", "และ", "ผัดไทย"]
      },
      travel: {
        title: "Đi lại & Hỏi đường",
        words: ["โรงแรม", "สบายดีไหม", "ขอโทษ", "สวัสดี", "ขอบคุณ"]
      }
    };

window.onload = function() {
      renderVirtualKeyboard();
      updateAllTopicDropdowns();
      renderTopicFilters();
      renderVocabCards();
      renderReaderWords('thailand');
      updateVocabCounter();
      checkStreakOnLoad();
      startSelectedPracticeMode();
    };

// EXPOSE SETTINGS MODAL FUNCTIONS DIRECTLY TO WINDOW OBJECT
    window.openSettingsModal = function() {
      const modal = document.getElementById('settings-modal');
      if (modal) modal.classList.remove('hidden');
    };

window.closeSettingsModal = function() {
      const modal = document.getElementById('settings-modal');
      if (modal) modal.classList.add('hidden');
    };

function checkStreakOnLoad() {
      const today = new Date().toDateString();
      const lastVisit = localStorage.getItem('tm_last_visit');
      let streak = parseInt(localStorage.getItem('tm_streak') || '1');

if (lastVisit) {
        const lastDate = new Date(lastVisit);
        const diffDays = Math.floor((new Date(today) - lastDate) / (1000 * 60 * 60 * 24));
        if (diffDays === 1) {
          streak += 1;
        } else if (diffDays > 1) {
          streak = 1;
        }
      }
      localStorage.setItem('tm_last_visit', today);
      localStorage.setItem('tm_streak', streak.toString());
      document.getElementById('streak-counter-num').innerText = streak;
    }

function switchTab(tabId) {
      document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
      document.getElementById(`section-${tabId}`).classList.remove('hidden');

document.querySelectorAll('.nav-tab').forEach(btn => {
        btn.classList.remove('bg-indigo-600', 'text-white');
        btn.classList.add('text-slate-400', 'hover:text-slate-200');
      });

const activeBtn = document.getElementById(`tab-btn-${tabId}`);
      if (activeBtn) {
        activeBtn.classList.remove('text-slate-400', 'hover:text-slate-200');
        activeBtn.classList.add('bg-indigo-600', 'text-white');
      }

if (tabId === 'practice') startSelectedPracticeMode();
    }

// LIGHT / DARK MODE TOGGLE
    function toggleDarkMode(isDark) {
      if (isDark) {
        document.documentElement.classList.add('dark');
        document.body.className = "min-h-screen flex flex-col bg-[#0b0f19] text-slate-100 dark:bg-[#0b0f19] dark:text-slate-100 custom-scrollbar transition-colors duration-300";
      } else {
        document.documentElement.classList.remove('dark');
        document.body.className = "min-h-screen flex flex-col bg-slate-100 text-slate-900 custom-scrollbar transition-colors duration-300";
      }
      showToast(isDark ? "Giao diện Ban đêm" : "Giao diện Ban ngày");
    }

// SLIDER SPEECH RATE
    function handleSpeechRateSliderChange(val) {
      speechRate = parseFloat(val);
      document.getElementById('speech-rate-slider-val').innerText = `${speechRate}x`;
    }

// PRACTICE LOGIC & WEAK WORDS TOGGLE
    function toggleWeakWordsOnlyFilter() {
      showWeakOnly = !showWeakOnly;
      const btn = document.getElementById('weak-words-filter-btn');
      if (showWeakOnly) {
        btn.className = "bg-amber-500/20 border border-amber-500 text-amber-500 dark:text-amber-300 px-3.5 py-2 rounded-xl text-xs font-bold flex items-center space-x-1.5 whitespace-nowrap shadow-sm";
        showToast("Hiển thị các từ chưa thuộc!");
      } else {
        btn.className = "bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 px-3.5 py-2 rounded-xl text-xs font-bold flex items-center space-x-1.5 whitespace-nowrap shadow-sm";
      }
      renderVocabCards();
    }

function renderVocabCards() {
      const grid = document.getElementById('vocab-cards-grid');
      const term = document.getElementById('search-vocab').value.toLowerCase();
      grid.innerHTML = '';

let filtered = vocabulary.filter(item => (selectedTopic === 'Tất cả từ' || item.topic === selectedTopic) && (item.thai.toLowerCase().includes(term) || item.viet.toLowerCase().includes(term)));

if (showWeakOnly) {
        filtered = filtered.filter(v => !v.mastered);
      }

if (filtered.length === 0) return grid.innerHTML = `<div class="col-span-full text-center py-10 text-slate-500 text-sm">Không tìm thấy từ vựng nào!</div>`;

filtered.forEach(item => {
        const card = document.createElement('div');
        card.className = 'bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700/60 rounded-xl p-5 space-y-2 relative transition shadow-sm hover:shadow-md dark:shadow-none hover:border-indigo-500/50';
        card.innerHTML = `
          <div class="flex items-start justify-between">
            <div>
              <div class="flex items-center space-x-2">
                <h3 class="text-3xl font-bold text-amber-500 dark:text-amber-300 font-thai tracking-wide">${item.thai}</h3>
                ${item.mastered ? '<span class="text-[10px] bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30 font-bold px-1.5 py-0.5 rounded">Đã thuộc</span>' : ''}
              </div>
              <p class="text-xs font-semibold text-indigo-600 dark:text-indigo-300 pt-0.5">[${item.phonetic}]</p>
            </div>
            <div class="flex items-center space-x-1">
              <button onclick="speakThai('${item.thai}')" class="p-2 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-500/20 rounded-lg"><i class="fa-solid fa-volume-high"></i></button>
              <button onclick="deleteVocab(${item.id})" class="p-2 text-slate-400 hover:text-red-500 rounded-lg"><i class="fa-solid fa-trash-can"></i></button>
            </div>
          </div>
          <p class="text-emerald-600 dark:text-green-400 font-bold text-lg pt-1">${item.viet}</p>
          <div class="pt-2 border-t border-slate-200 dark:border-slate-800 text-[10px] font-bold text-amber-500 dark:text-amber-400 uppercase tracking-wider">
            🏷️ ${item.topic}
          </div>
        `;
        grid.appendChild(card);
      });
    }

function changeDailyGoalSetting() {
      dailyGoal = parseInt(document.getElementById('sett-daily-goal').value);
      updateVocabCounter();
      showToast(`Mục tiêu: ${dailyGoal} từ/ngày!`);
    }

function openTopicManagerModal() { renderTopicManagerList(); document.getElementById('topic-manager-modal').classList.remove('hidden'); }
    function closeTopicManagerModal() { document.getElementById('topic-manager-modal').classList.add('hidden'); }

function addNewTopicFromManager() {
      const input = document.getElementById('new-topic-name-input');
      const val = input.value.trim();
      if (!val) return showToast('Nhập tên chủ đề!');
      if (topics.includes(val)) return showToast('Chủ đề này đã có!');

topics.push(val);
      input.value = '';
      updateAllTopicDropdowns();
      renderTopicFilters();
      renderTopicManagerList();
      showToast(`Đã tạo chủ đề "${val}"!`);
    }

// READER SECTION
    function zoomFontSize(delta) {
      currentReaderFontSize = Math.max(18, Math.min(48, currentReaderFontSize + delta));
      document.getElementById('reader-words-container').style.fontSize = `${currentReaderFontSize}px`;
      document.getElementById('font-size-indicator').innerText = `${currentReaderFontSize}px`;
    }

function renderReaderWords(articleKey) {
      const article = articles[articleKey];
      if (!article) return;
      document.getElementById('reader-title').innerText = article.title;
      const container = document.getElementById('reader-words-container');
      container.innerHTML = '';
      container.style.fontSize = `${currentReaderFontSize}px`;

article.words.forEach((word) => {
        const wordSpan = document.createElement('span');
        wordSpan.className = 'cursor-pointer px-1 py-0.5 rounded hover:bg-amber-500/20 hover:text-amber-500 dark:hover:text-amber-300 transition duration-150 border border-transparent';
        wordSpan.innerText = word;
        wordSpan.onclick = () => {
          if (selectedWordElement) {
            selectedWordElement.classList.remove('bg-indigo-600/40', 'border-indigo-400', 'text-amber-500');
          }
          selectedWordElement = wordSpan;
          wordSpan.classList.add('bg-indigo-600/40', 'border-indigo-400', 'text-amber-500');
          showInlineDict(word);
        };
        container.appendChild(wordSpan);
      });
    }

function changeArticle() { renderReaderWords(document.getElementById('reader-article-select').value); }
    function getArticleFullText() { const key = document.getElementById('reader-article-select').value; return articles[key] ? articles[key].words.join('') : ''; }

async function showInlineDict(word) {
      let info = dictionaryDB[word];
      document.getElementById('inline-thai').innerText = word;
      
      if (info) {
        document.getElementById('inline-phonetic').innerText = `[${info.phonetic}]`;
        document.getElementById('inline-viet').innerText = info.viet;
      } else {
        document.getElementById('inline-phonetic').innerText = `[Đang tra...]`;
        document.getElementById('inline-viet').innerText = `Đang lấy dịch nghĩa...`;

function closeInlineDict() {
      document.getElementById('inline-dict-box').classList.add('hidden');
      if (selectedWordElement) {
        selectedWordElement.classList.remove('bg-indigo-600/40', 'border-indigo-400', 'text-amber-500');
        selectedWordElement = null;
      }
    }

function openCustomReaderModal() { document.getElementById('custom-reader-modal').classList.remove('hidden'); }
    function closeCustomReaderModal() { document.getElementById('custom-reader-modal').classList.add('hidden'); }
    function submitCustomArticle() {
      const title = document.getElementById('custom-reader-title').value.trim() || 'Bài đọc tự tạo';
      const text = document.getElementById('custom-reader-text').value.trim();
      if (!text) return showToast('Vui lòng nhập nội dung!');

const words = text.split(/\s+/);
      const customKey = 'custom_' + Date.now();
      articles[customKey] = { title, words };

const select = document.getElementById('reader-article-select');
      const opt = document.createElement('option');
      opt.value = customKey; opt.innerText = title;
      select.appendChild(opt); select.value = customKey;

renderReaderWords(customKey);
      closeCustomReaderModal();
      showToast('Đã tạo bài đọc mới!');
    }

// VOCABULARY VAULT
    function renderTopicFilters() {
      const filterBar = document.getElementById('category-filter-bar');
      filterBar.innerHTML = '';
      topics.forEach(top => {
        const count = top === 'Tất cả từ' ? vocabulary.length : vocabulary.filter(v => v.topic === top).length;
        const btn = document.createElement('button');
        btn.className = `px-3.5 py-1.5 rounded-lg text-xs font-semibold whitespace-nowrap flex items-center space-x-1.5 transition ${selectedTopic === top ? 'bg-indigo-600 text-white' : 'bg-slate-200 dark:bg-[#0f172a] text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border border-slate-300 dark:border-slate-700'}`;
        btn.innerHTML = `<span>${top}</span> <span class="text-[10px] bg-black/20 dark:bg-black/30 px-1.5 py-0.5 rounded-full">${count}</span>`;
        btn.onclick = () => { selectedTopic = top; renderTopicFilters(); renderVocabCards(); };
        filterBar.appendChild(btn);
      });
    }

function playAllVocabPlaylist() {
      if (vocabulary.length === 0) return;
      let idx = 0;
      function playNext() {
        if (idx >= vocabulary.length) return;
        speakThai(vocabulary[idx].thai);
        idx++;
        setTimeout(playNext, 2500);
      }
      playNext();
    }

function openAddVocabModal() {
      editingVocabId = null;
      document.getElementById('vocab-modal-title').innerText = "Thêm Từ Vựng";
      document.getElementById('modal-input-thai').value = '';
      document.getElementById('modal-input-phonetic').value = '';
      document.getElementById('modal-input-viet').value = '';
      document.getElementById('vocab-modal').classList.remove('hidden');
    }

function closeVocabModal() { document.getElementById('vocab-modal').classList.add('hidden'); }

function saveVocabFromModal() {
      const thai = document.getElementById('modal-input-thai').value.trim();
      const phonetic = document.getElementById('modal-input-phonetic').value.trim() || 'Phiên âm';
      const viet = document.getElementById('modal-input-viet').value.trim();
      const topic = document.getElementById('modal-input-topic').value;

if (!thai || !viet) return showToast('Nhập đủ từ Thái và nghĩa Việt!');
      vocabulary.unshift({ id: Date.now(), thai, phonetic, viet, topic, mastered: false });
      renderTopicFilters(); renderVocabCards(); updateVocabCounter(); closeVocabModal();
      showToast('Đã thêm từ mới!');
    }

function deleteVocab(id) {
      vocabulary = vocabulary.filter(v => v.id !== id);
      renderTopicFilters(); renderVocabCards(); updateVocabCounter();
      showToast('Đã xóa từ!');
    }

// PRACTICE LOGIC
    function switchPracticeSubTab(subTab) {
      currentPracticeSubTab = subTab;
      ['flashcard', 'quiz', 'listening', 'speaking', 'writing'].forEach(st => {
        const btn = document.getElementById(`prac-subtab-${st}`);
        const sec = document.getElementById(`subtab-${st}`);
        if (st === subTab) {
          btn.className = 'px-4 py-2.5 rounded-xl bg-indigo-600 text-white flex items-center space-x-1.5 transition shadow';
          sec.classList.remove('hidden');
        } else {
          btn.className = 'px-4 py-2.5 rounded-xl text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 flex items-center space-x-1.5 transition';
          sec.classList.add('hidden');
        }
      });
      startSelectedPracticeMode();
    }

function startSelectedPracticeMode() {
      clearTimeout(autoNextTimer);
      const selectedTop = document.getElementById('practice-topic-select').value;
      practiceList = selectedTop === 'all' ? [...vocabulary] : vocabulary.filter(v => v.topic === selectedTop);
      if (practiceList.length === 0) practiceList = [...vocabulary];

if (currentPracticeSubTab === 'flashcard') { practiceIndex = 0; updateFlashcardUI(); }
      else if (currentPracticeSubTab === 'quiz') { quizCurrentIndex = 0; quizScore = 0; setupQuizQuestion(); }
      else if (currentPracticeSubTab === 'listening') { quizCurrentIndex = 0; quizScore = 0; setupListeningQuestion(); }
      else if (currentPracticeSubTab === 'speaking') { quizCurrentIndex = 0; quizScore = 0; setupSpeakingQuestion(); }
      else if (currentPracticeSubTab === 'writing') { quizCurrentIndex = 0; quizScore = 0; setupWritingQuestion(); }
    }

// 1. Flashcards
    function getCurrentPracticeWord() { return practiceList[practiceIndex] || vocabulary[0]; }
    function toggleCardFlip() { const card = document.querySelector('.flip-card'); isFlipped = !isFlipped; isFlipped ? card.classList.add('flipped') : card.classList.remove('flipped'); }
    
    function updateFlashcardUI() {
      document.querySelector('.flip-card').classList.remove('flipped'); isFlipped = false;
      const current = getCurrentPracticeWord();
      
      const masteredCount = practiceList.filter(v => v.mastered).length;
      document.getElementById('card-counter').innerText = `Thẻ ${practiceIndex + 1} / ${practiceList.length}`;
      document.getElementById('mastered-stat-badge').innerText = `Đã thuộc: ${masteredCount}/${practiceList.length}`;
      
      document.getElementById('card-thai').innerText = current.thai;
      document.getElementById('card-phonetic').innerText = `[${current.phonetic}]`;
      document.getElementById('card-viet').innerText = current.viet;
      document.getElementById('card-category').innerText = current.topic;

const statusBadge = document.getElementById('card-status-badge');
      if (current.mastered) {
        statusBadge.innerText = "✓ Đã thuộc";
        statusBadge.className = "text-[10px] font-bold px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-400 border border-emerald-500/30";
      } else {
        statusBadge.innerText = "Đang học";
        statusBadge.className = "text-[10px] font-bold px-2 py-0.5 rounded bg-slate-800 text-slate-400";
      }
    }

function markCardMastered(isMastered) {
      const current = getCurrentPracticeWord();
      current.mastered = isMastered;
      if (isMastered) showToast(`Đánh dấu "${current.thai}" là Đã thuộc!`);
      renderVocabCards();
      nextFlashcard();
    }

// 2. Quiz Trắc nghiệm
    function setupQuizQuestion() {
      clearTimeout(autoNextTimer);
      document.getElementById('quiz-feedback-box').classList.add('hidden');
      document.getElementById('quiz-next-btn').classList.add('hidden');
      if (quizCurrentIndex >= practiceList.length) {
        document.getElementById('quiz-question-thai').innerText = "🎉 Hoàn Thành!";
        document.getElementById('quiz-options-grid').innerHTML = `<div class="text-center py-6 space-y-3"><p class="text-xl font-bold text-amber-500">Điểm số: ${quizScore} / ${practiceList.length}</p><button onclick="startSelectedPracticeMode()" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold px-6 py-2.5 rounded-xl">Làm lại</button></div>`;
        return;
      }
      currentQuizWord = practiceList[quizCurrentIndex];
      document.getElementById('quiz-progress-text').innerText = `Câu ${quizCurrentIndex + 1} / ${practiceList.length}`;
      document.getElementById('quiz-score-badge').innerText = `Điểm: ${quizScore}`;
      document.getElementById('quiz-question-thai').innerText = currentQuizWord.thai;

let choices = [currentQuizWord.viet];
      let pool = vocabulary.filter(v => v.viet !== currentQuizWord.viet).sort(() => 0.5 - Math.random());
      for (let i = 0; i < Math.min(3, pool.length); i++) choices.push(pool[i].viet);
      choices.sort(() => 0.5 - Math.random());

const grid = document.getElementById('quiz-options-grid'); grid.innerHTML = '';
      choices.forEach(choice => {
        const btn = document.createElement('button');
        btn.className = 'w-full bg-slate-100 dark:bg-[#0f172a] hover:bg-indigo-500/20 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 font-semibold p-4 rounded-xl text-left transition text-base';
        btn.innerText = choice; btn.onclick = () => answerQuiz(choice, btn); grid.appendChild(btn);
      });
    }

// 3. Kỹ năng Luyện Nghe
    function setupListeningQuestion() {
      clearTimeout(autoNextTimer);
      document.getElementById('listen-feedback-box').classList.add('hidden');
      document.getElementById('listen-next-btn').classList.add('hidden');

if (quizCurrentIndex >= practiceList.length) {
        document.getElementById('listen-options-grid').innerHTML = `<div class="text-center py-6 space-y-3"><p class="text-xl font-bold text-amber-500">Hoàn thành luyện nghe! Điểm số: ${quizScore} / ${practiceList.length}</p><button onclick="startSelectedPracticeMode()" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold px-6 py-2.5 rounded-xl">Luyện nghe lại</button></div>`;
        return;
      }

currentQuizWord = practiceList[quizCurrentIndex];
      document.getElementById('listen-progress-text').innerText = `Câu ${quizCurrentIndex + 1} / ${practiceList.length}`;
      document.getElementById('listen-score-badge').innerText = `Điểm: ${quizScore}`;

if (document.getElementById('sett-auto-audio').checked) playListeningAudio();

const grid = document.getElementById('listen-options-grid'); grid.innerHTML = '';
      choices.forEach(choice => {
        const btn = document.createElement('button');
        btn.className = 'w-full bg-slate-100 dark:bg-[#0f172a] hover:bg-indigo-500/20 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 font-semibold p-4 rounded-xl text-left transition text-base';
        btn.innerText = choice; btn.onclick = () => answerListening(choice, btn); grid.appendChild(btn);
      });
    }

function playListeningAudio() {
      if (currentQuizWord) speakThai(currentQuizWord.thai);
    }

// 4. Kỹ năng Luyện Nói / Phát Âm
    function setupSpeakingQuestion() {
      clearTimeout(autoNextTimer);
      document.getElementById('speak-feedback-box').classList.add('hidden');
      document.getElementById('speak-next-btn').classList.add('hidden');

if (quizCurrentIndex >= practiceList.length) {
        document.getElementById('speak-target-thai').innerText = "🎉 Hoàn Thành!";
        document.getElementById('speak-target-phonetic').innerText = `Điểm số: ${quizScore} / ${practiceList.length}`;
        document.getElementById('speak-target-viet').innerText = "";
        return;
      }

currentQuizWord = practiceList[quizCurrentIndex];
      document.getElementById('speak-progress-text').innerText = `Câu ${quizCurrentIndex + 1} / ${practiceList.length}`;
      document.getElementById('speak-score-badge').innerText = `Điểm: ${quizScore}`;
      document.getElementById('speak-target-thai').innerText = currentQuizWord.thai;
      document.getElementById('speak-target-phonetic').innerText = `[${currentQuizWord.phonetic}]`;
      document.getElementById('speak-target-viet').innerText = currentQuizWord.viet;
    }

function playSpeakingReferenceAudio() {
      if (currentQuizWord) speakThai(currentQuizWord.thai);
    }

function startSpeakingTest() {
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
      if (!SpeechRecognition) return showToast('Trình duyệt không hỗ trợ microphone!');

const recognition = new SpeechRecognition();
      recognition.lang = 'th-TH';
      recognition.start();

const btn = document.getElementById('speak-record-btn');
      btn.className = "w-20 h-20 rounded-full bg-red-600 animate-pulse text-white flex items-center justify-center text-3xl shadow-xl transition";

recognition.onresult = (event) => {
        btn.className = "w-20 h-20 rounded-full bg-emerald-600 hover:bg-emerald-500 text-white flex items-center justify-center text-3xl shadow-xl transition";
        const spokenText = event.results[0][0].transcript.trim();
        const feedback = document.getElementById('speak-feedback-box');
        feedback.classList.remove('hidden');

if (spokenText.includes(currentQuizWord.thai) || currentQuizWord.thai.includes(spokenText)) {
          quizScore++;
          feedback.className = 'p-3 rounded-xl text-center font-bold text-sm bg-emerald-500/20 text-emerald-600 dark:text-emerald-300 border border-emerald-500/30';
          feedback.innerText = `🎉 Xuất sắc! Phát âm chuẩn: "${spokenText}". Tự động chuyển câu...`;
          autoNextTimer = setTimeout(() => { nextSpeakingQuestion(); }, 1200);
        } else {
          feedback.className = 'p-3 rounded-xl text-center font-bold text-sm bg-red-500/20 text-red-500 border border-red-500/30';
          feedback.innerText = `😅 Hệ thống nghe được: "${spokenText}". Bạn hãy thử lại!`;
          document.getElementById('speak-next-btn').classList.remove('hidden');
        }
        document.getElementById('speak-score-badge').innerText = `Điểm: ${quizScore}`;
      };

recognition.onerror = () => {
        btn.className = "w-20 h-20 rounded-full bg-emerald-600 hover:bg-emerald-500 text-white flex items-center justify-center text-3xl shadow-xl transition";
        showToast("Không nghe rõ giọng nói. Hãy nói lại!");
      };
    }
    function nextSpeakingQuestion() { quizCurrentIndex++; setupSpeakingQuestion(); }

// 5. Kỹ năng Luyện Viết
    function setupWritingQuestion() {
      clearTimeout(autoNextTimer);
      document.getElementById('write-feedback-box').classList.add('hidden');
      document.getElementById('write-next-btn').classList.add('hidden');
      document.getElementById('write-input').value = '';

if (quizCurrentIndex >= practiceList.length) {
        document.getElementById('write-prompt-viet').innerText = "🎉 Hoàn Thành!";
        document.getElementById('write-prompt-phonetic').innerText = `Điểm số: ${quizScore} / ${practiceList.length}`;
        return;
      }

currentQuizWord = practiceList[quizCurrentIndex];
      document.getElementById('write-progress-text').innerText = `Câu ${quizCurrentIndex + 1} / ${practiceList.length}`;
      document.getElementById('write-score-badge').innerText = `Điểm: ${quizScore}`;
      document.getElementById('write-prompt-viet').innerText = currentQuizWord.viet;
      document.getElementById('write-prompt-phonetic').innerText = `[Phiên âm: ${currentQuizWord.phonetic}]`;
    }

function checkWritingAnswer() {
      const typed = document.getElementById('write-input').value.trim();
      const feedback = document.getElementById('write-feedback-box');
      feedback.classList.remove('hidden');

if (typed === currentQuizWord.thai) {
        quizScore++;
        feedback.className = 'p-3 rounded-xl text-center font-bold text-sm bg-emerald-500/20 text-emerald-600 dark:text-emerald-300 border border-emerald-500/30';
        feedback.innerText = `🎉 Xuất sắc! Bạn đã gõ đúng "${currentQuizWord.thai}". Tự động chuyển câu...`;
        speakThai(currentQuizWord.thai);
        
        autoNextTimer = setTimeout(() => { nextWritingQuestion(); }, 1200);
      } else {
        feedback.className = 'p-3 rounded-xl text-center font-bold text-sm bg-red-500/20 text-red-500 border border-red-500/30';
        feedback.innerText = `❌ Chưa chính xác. Từ đúng là: "${currentQuizWord.thai}"`;
        document.getElementById('write-next-btn').classList.remove('hidden');
      }

document.getElementById('write-score-badge').innerText = `Điểm: ${quizScore}`;
    }
    function nextWritingQuestion() { quizCurrentIndex++; setupWritingQuestion(); }

</script>
</body>
</html>

Paste Settings

Paste Title : [Optional]

Paste Folder : [Optional]

Syntax Highlighting : [Optional]

Paste Expiration : [Optional]

Paste Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Recent Pastes

TELEGRAM 11-17 LEAKS
Plaintext | 5 | 12 minutes ago
TELEGRAM T33n С.P 11-17
Plaintext | 3 | 38 minutes ago
С.P T33n TELEGRAM
Plaintext | 5 | 1 hour ago
NEW UPDATED 08.08.26 ĆP FOLDERS
Plaintext | 11 | 1 hour ago
MEGA 11-17 T33n С.P
Plaintext | 7 | 1 hour ago
t33N
Plaintext | 25 | 1 hour ago
T33n VIDEO TELEGRAM
Plaintext | 11 | 1 hour ago

Paste Settings

Site Languages