fix test

src/features/toeic/components/TestSession.tsx

@@ -346,11 +346,22 @@ export function TestSession() {
     [answers],
   )
 
+  const [showSubmitConfirm, setShowSubmitConfirm] = useState(false)
+
   const handleSubmit = useCallback(() => {
     submitExam(totalSeconds > 0 ? totalSeconds - timeLeft : timeUsed)
     navigate({ to: '/toeic/result' })
   }, [submitExam, navigate, totalSeconds, timeLeft, timeUsed])
 
+  // Manual click → confirm if any unanswered; auto (timer expire) skips confirm.
+  const requestSubmit = useCallback(() => {
+    if (totalQuestions > 0 && answeredCount < totalQuestions) {
+      setShowSubmitConfirm(true)
+    } else {
+      handleSubmit()
+    }
+  }, [totalQuestions, answeredCount, handleSubmit])
+
   useEffect(() => {
     if (parts.length === 0) return
     const id = setInterval(() => {
@@ -398,7 +409,7 @@ export function TestSession() {
         timeUsed={timeUsed}
         totalQuestions={totalQuestions}
         answeredCount={answeredCount}
-        onSubmit={handleSubmit}
+        onSubmit={requestSubmit}
       />
 
       <div className="flex flex-1 overflow-hidden">
@@ -497,6 +508,49 @@ export function TestSession() {
         onPrev={() => setCurrentPart(currentPartIndex - 1)}
         onNext={() => setCurrentPart(currentPartIndex + 1)}
       />
+
+      {showSubmitConfirm && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center px-4"
+          style={{ background: 'rgba(15, 17, 20, 0.5)' }}
+          onClick={() => setShowSubmitConfirm(false)}
+        >
+          <div
+            className="w-full max-w-md rounded-2xl p-6 shadow-2xl"
+            style={{ background: 'var(--at-surface)', border: '1px solid var(--at-line)' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div
+              className="at-serif"
+              style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--at-ink)', marginBottom: 8 }}
+            >
+              Nộp bài <i style={{ fontStyle: 'italic', color: 'var(--at-brand)' }}>ngay?</i>
+            </div>
+            <p style={{ fontSize: 14, color: 'var(--at-mute)', lineHeight: 1.55, marginBottom: 20 }}>
+              Bạn còn{' '}
+              <b style={{ color: 'var(--at-bad)' }}>{totalQuestions - answeredCount}</b>/{totalQuestions} câu
+              chưa trả lời. Các câu chưa trả lời sẽ tính là{' '}
+              <b>bỏ qua</b> và không có điểm.
+            </p>
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={() => setShowSubmitConfirm(false)}
+                className="px-4 py-2 rounded-lg text-sm font-semibold transition-colors hover:bg-[var(--at-line-2)]"
+                style={{ background: 'var(--at-surface)', border: '1px solid var(--at-line)', color: 'var(--at-ink-2)' }}
+              >
+                Tiếp tục làm
+              </button>
+              <button
+                onClick={() => { setShowSubmitConfirm(false); handleSubmit() }}
+                className="px-4 py-2 rounded-lg text-sm font-semibold text-white transition-[filter] hover:brightness-110"
+                style={{ background: '#e53935' }}
+              >
+                Nộp bài
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }