{{-- Modal Quét & Đồng bộ Writing --}}
<div id="sync_writing_modal" class="fixed inset-0 z-50 hidden bg-slate-900/50 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-slate-100 transform transition-all">
        <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-4">
            <div class="flex items-center gap-3">
                <div class="p-2 bg-blue-50 text-blue-600 rounded-lg">
                    <i data-lucide="refresh-cw" class="w-5 h-5"></i>
                </div>
                <h3 class="font-extrabold text-slate-800 text-base">Quét & Đồng bộ dữ liệu Writing</h3>
            </div>
            <button id="btn_close_sync_modal" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg hover:bg-slate-100 transition-all">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <div id="sync_modal_content" class="py-2">
            {{-- Bước 1: Đang quét --}}
            <div id="sync_step_scan" class="text-center py-6">
                <div class="inline-block animate-spin text-blue-600 mb-3">
                    <i data-lucide="loader-2" class="w-8 h-8"></i>
                </div>
                <p class="text-slate-600 font-medium text-sm">Đang quét các bài thi IELTS Writing bị thiếu dữ liệu chi tiết...</p>
            </div>

            {{-- Bước 2: Kết quả quét --}}
            <div id="sync_step_result" class="hidden text-center py-4">
                <div class="w-12 h-12 bg-amber-50 text-amber-500 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i data-lucide="alert-circle" class="w-6 h-6"></i>
                </div>
                <h4 class="font-bold text-slate-800 text-lg mb-1" id="sync_result_count">Tìm thấy 0 bài thi</h4>
                <p class="text-slate-500 text-sm mb-6" id="sync_result_desc">Bài thi IELTS Writing (Section type 3) bị thiếu dữ liệu chi tiết trong DB.</p>
                <button id="btn_confirm_sync" class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold text-sm rounded-xl shadow-md shadow-blue-200 transition-all flex items-center justify-center gap-2">
                    <i data-lucide="play" class="w-4 h-4"></i> Xác nhận đồng bộ ngay
                </button>
            </div>

            {{-- Bước 3: Tiến trình đồng bộ --}}
            <div id="sync_step_progress" class="hidden py-4">
                <div class="flex justify-between text-xs font-bold text-slate-600 mb-2">
                    <span>Đang tiến hành đồng bộ...</span>
                    <span id="sync_progress_percent">0%</span>
                </div>
                <div class="w-full bg-slate-100 rounded-full h-3 mb-4 overflow-hidden">
                    <div id="sync_progress_bar" class="bg-blue-600 h-3 rounded-full transition-all duration-300 w-0"></div>
                </div>
                <p class="text-center text-xs text-slate-500 font-medium" id="sync_progress_status">Đang xử lý 0 / 0 bài thi...</p>
            </div>

            {{-- Bước 4: Hoàn tất --}}
            <div id="sync_step_complete" class="hidden text-center py-4">
                <div class="w-12 h-12 bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i data-lucide="check-circle-2" class="w-6 h-6"></i>
                </div>
                <h4 class="font-bold text-slate-800 text-lg mb-1">Đồng bộ hoàn tất!</h4>
                <p class="text-slate-500 text-sm mb-6" id="sync_complete_desc">Đã cập nhật xong dữ liệu chi tiết cho các bài thi.</p>
                <button id="btn_finish_sync" class="w-full py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-sm rounded-xl transition-all">
                    Đóng cửa sổ
                </button>
            </div>
        </div>
    </div>
</div>