feat: Add "My Courses" page for enrolled course management and "Course Discovery" page for browsing and enrolling in courses.

Frontend-Learner/pages/browse/discovery.vue

@@ -284,7 +284,7 @@ onMounted(() => {
 
           <!-- Course Syllabus -->
           <div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-sm border border-slate-100 dark:border-slate-700">
-            <h3 class="text-xl font-bold mb-6 text-slate-900 dark:text-white flex items-center gap-2">
+            <h3 class="text-xl font-bold mb-6 text-slate-900 flex items-center gap-2">
                <span class="w-1 h-6 bg-blue-500 rounded-full"></span>
                {{ $t('course.courseContent') }}
             </h3>

Frontend-Learner/pages/dashboard/my-courses.vue

@@ -213,19 +213,9 @@ const downloadCertificate = () => {
           
           <h3 class="text-2xl font-bold text-slate-800 mb-12">{{ selectedCertCourse?.title || 'Course Title' }}</h3>
 
-          <div class="flex justify-between items-end px-12 mt-auto">
+          <div class="flex justify-end items-end px-12 mt-auto">
             <div class="text-center">
-              <div class="w-48 border-b border-slate-800 mb-2 pb-2 italic font-serif text-lg">Course Instructor</div>
-              <div class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('certificate.directorSignature') }}</div>
-            </div>
-            
-            <div class="w-24 h-24 bg-gradient-to-br from-amber-300 to-amber-600 rounded-full flex flex-col items-center justify-center text-white border-4 border-white shadow-xl rotate-12 -mt-4">
-               <span class="text-[10px] uppercase font-bold tracking-widest opacity-80">Certified</span>
-               <span class="font-black text-xl">PASS</span>
-            </div>
-
-            <div class="text-center">
-              <div class="w-48 border-b border-slate-800 mb-2 pb-2">{{ new Date().toLocaleDateString() }}</div>
+              <div class="w-48 border-b border-slate-800 mb-2 pb-2">{{ new Date().toLocaleDateString('th-TH', { year: 'numeric', month: '2-digit', day: '2-digit' }) }}</div>
               <div class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('certificate.issueDate') }}</div>
             </div>
           </div>

Frontend-Learner/คู่มืออธิบาย/dev.md

@@ -0,0 +1,101 @@
+# 📚 ระบบห้องเรียน (Classroom Module)
+
+> **Location:** `pages/classroom/`
+
+โมดูลนี้เป็นหัวใจหลักของระบบ e-Learning ทำหน้าที่จัดการประสบการณ์การเรียนรู้ทั้งหมด ตั้งแต่การรับชมวิดีโอ การทำแบบฝึกหัด ไปจนถึงการวัดผลสอบ ออกแบบโดยเน้น **"ผู้เรียนเป็นศูนย์กลาง" (Learner-Centric)** และมีความปลอดภัยสูง
+
+---
+
+## 🗺️ User Flow (เส้นทางการเรียนรู้)
+
+1.  **เข้าคลาสเรียน**: ผู้ใช้เลือกคอร์สจาก "คอร์สของฉัน" ระบบจะพาเข้าสู่หน้า `learning.vue`
+2.  **เรียนรู้เนื้อหา**:
+    - ระบบเช็คสิทธิ์ (Locked/Unlocked) อัตโนมัติ
+    - ดูวิดีโอ (Video Player) พร้อมระบบจำเวลาเดิม (Resume)
+    - ดาวน์โหลดเอกสารประกอบ (Attachments)
+3.  **บันทึกผล**: เมื่อดูจบหรือทำ Progress ระบบจะบันทึกให้อัตโนมัติแบบ Real-time
+4.  **วัดผลสอบ**: เมื่อเรียนครบ เข้าสู่หน้า `quiz.vue` เพื่อทำข้อสอบจับเวลา
+5.  **ประเมินผล**: ทราบผลสอบทันที (Pass/Fail) พร้อมเฉลยคะแนน
+
+---
+
+## 1. 📺 หน้าเรียน (`learning.vue`)
+
+**หน้าที่:** พื้นที่หลักสำหรับการเรียนรู้ รองรับ Video Streaming และเอกสารการสอน
+
+### 🎨 การออกแบบ (Design Concept)
+
+- **Focus Mode**: ใช้ Layout พิเศษ (`layout: false`) ตัดเมนูรบกวนออก ให้พื้นที่วิดีโอใหญ่ที่สุด
+- **Smart Sidebar**: แถบเมนูบทเรียนทางซ้าย
+  - _Desktop_: กางออกเสมอ เพื่อให้เห็นภาพรวมเนื้อหา
+  - _Mobile_: ซ่อนอัตโนมัติ (Drawer) เรียกดูได้เมื่อต้องการ
+- **Responsive Player**: เครื่องเล่นวิดีโอที่ปรับขนาดตามหน้าจอ และมี Custom Controls ที่สวยงาม
+
+### ⚙️ ระบบเบื้องหลัง (Technical Logic)
+
+- **Video Resume**: จำวินาทีล่าสุดที่ดูค้างไว้ กลับมาดูต่อได้ทันที (ดึงจาก Hybrid Storage)
+- **Hybrid Saving System**:
+  1.  **Local Save**: บันทึกทุก 5 วินาทีลงเครื่องผู้ใช้ (กันเน็ตหลุด)
+  2.  **Server Save**: บันทึกทุก 15 วินาทีลงฐานข้อมูล (Sync ข้ามอุปกรณ์)
+  3.  **Anti-Cheat**: ระบบป้องกันการลากข้าม (Seek Forward) ไปยังจุดที่ยังดูไม่ถึง
+
+---
+
+## 2. 📝 หน้าสอบ (`quiz.vue`)
+
+**หน้าที่:** ระบบสอบวัดผลมาตรฐาน พร้อมตัวจับเวลาและการคำนวณคะแนน
+
+### <20> รูปแบบการทำงาน (State Machine)
+
+หน้าจอนี้ทำงานแบบ **Single Page Application** เปลี่ยนสถานะโดยไม่ต้องโหลดหน้าใหม่ แบ่งเป็น 3 States:
+
+1.  **🟢 Start**: หน้าเตรียมตัว บอกกฎกติกา จำนวนข้อ และเวลาที่ให้
+2.  **🟡 Taking**: หน้าทำข้อสอบ
+    - มี **Countdown Timer** นับถอยหลัง
+    - โจทย์ 1 ข้อต่อ 1 หน้า (Pagination) เพื่อโฟกัสทีละข้อ
+3.  **🔴 Result**: หน้าสรุปผล แจ้งคะแนนและสถานะ (ผ่าน/ไม่ผ่าน) ทันที
+
+### 🛡️ ความปลอดภัย (Security)
+
+- **Randomization**: สุ่มลำดับข้อ (Shuffle Questions) และสลับตัวเลือก (Shuffle Choices) ทุกครั้งที่สอบ
+- **Backend Grading**: ส่งคำตอบไปตรวจที่ Server เท่านั้น ไม่มีการเฉลยค้างไว้ใน Code ฝั่งหน้าบ้าน (ป้องกันการแอบดูเฉลย)
+
+---
+
+## 🛠️ โครงสร้างทางเทคนิค (Technical Stack)
+
+การทำงานของระบบขับเคลื่อนด้วยการเชื่อมต่อข้อมูลและ Component ที่ทันสมัย:
+
+### 📥 1. แหล่งข้อมูล (Data Sources & Composables)
+
+- **`useCourse` (Core Logic)**:
+  - `fetchCourseLearningInfo`: ดึงผังบทเรียน
+  - `fetchLessonContent`: ดึงวิดีโอ/โจทย์
+  - `saveVideoProgress`: บันทึกเวลาเรียน
+  - `submitQuiz`: ส่งคำตอบสอบ
+- **`useAuth`**: ระบุตัวตนผู้เรียนเพื่อบันทึกข้อมูลได้ถูกต้อง
+- **`useMediaPrefs`**: ระบบจำค่าเสียง (Volume Memory) ไม่ต้องปรับเสียงใหม่ทุกครั้งที่เปลี่ยนบท
+
+### 🧩 2. ชิ้นส่วนหน้าจอ (Quasar Components)
+
+- **Layout**: `q-layout`, `q-header`, `q-drawer` (จัดโครงสร้าง Responsive)
+- **Interaction**: `q-btn` (ปุ่ม), `q-dialog` (Popup แจ้งเตือน)
+- **Feedback**: `q-spinner` (โหลด), `q-icon` (สัญลักษณ์สถานะ)
+- **Data**: `q-list`, `q-item` (รายการบทเรียน)
+
+---
+
+## ✨ จุดเด่นสำหรับนำเสนอ (Key Highlights)
+
+1.  **Seamless Experience**: เรียนต่อได้ทันทีไม่ต้องจำว่าถึงไหน (Resume Playback)
+2.  **Robust Data Saving**: เน็ตหลุดวิก็ไม่หาย ด้วยระบบบันทึก 2 ชั้น (Hybrid Save)
+3.  **Modern & Clean UI**: ดีไซน์สบายตา ลดสิ่งรบกวน เหมาะกับการเรียนรู้นานๆ
+4.  **Secure Testing**: ระบบสอบที่เชื่อถือได้ ป้องกันการลอกและแอบดูเฉลย
+
+---
+
+## 🚀 แผนพัฒนาต่อยอด (Future Roadmap)
+
+- [ ] **Comment & Q&A**: ระบบถาม-ตอบ ใต้คลิปวิดีโอ
+- [ ] **Video Bookmarks**: ปักหมุดช่วงเวลาสำคัญในวิดีโอ
+- [ ] **Interactive Video**: คำถามเด้งขึ้นมาระหว่างดูวิดีโอ (Pop-up Quiz)