/* assets/css/course-themes.css */
/* Dynamic Course Themes - 20 Beautiful Presets */

/* ============================================
   CSS Variables สำหรับธีมเริ่มต้น
   ============================================ */
:root {
    --course-primary: #0d6efd;
    --course-secondary: #6c757d;
    --course-background: #ffffff;
    --course-text: #212529;
    --course-card-bg: #ffffff;
    --course-header-bg: var(--course-primary);
    --course-header-text: #ffffff;
    --course-progress-bg: #e9ecef;
    --course-progress-fill: var(--course-primary);
    --course-btn-primary: var(--course-primary);
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: var(--course-primary);
    --course-badge-text: #ffffff;
    --course-border: #dee2e6;
    --course-module-hover: rgba(0, 0, 0, 0.03);
}

/* ============================================
   ธีมที่ 1: พระบรมราโชบาย - เขียวทองหรูหรา
   ============================================ */
.theme-HM001 {
    --course-primary: #1a5c2a;
    --course-secondary: #c9a84c;
    --course-background: #f7f3e8;
    --course-text: #2c3e50;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #1a5c2a, #0d3316);
    --course-header-text: #ffffff;
    --course-progress-bg: #e8e0c8;
    --course-progress-fill: linear-gradient(90deg, #1a5c2a, #c9a84c);
    --course-btn-primary: #1a5c2a;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #c9a84c;
    --course-badge-text: #2c3e50;
    --course-border: #d4c9a8;
    --course-module-hover: rgba(26, 92, 42, 0.05);
}

/* ============================================
   ธีมที่ 2: เทคโนโลยีดิจิทัล - ม่วงนีออน
   ============================================ */
.theme-TECH001 {
    --course-primary: #6c2bd9;
    --course-secondary: #ff6ec7;
    --course-background: #f8f5ff;
    --course-text: #1a0a3e;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #6c2bd9, #4a1d8a);
    --course-header-text: #ffffff;
    --course-progress-bg: #f0e6ff;
    --course-progress-fill: linear-gradient(90deg, #6c2bd9, #ff6ec7);
    --course-btn-primary: #6c2bd9;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #ff6ec7;
    --course-badge-text: #1a0a3e;
    --course-border: #e0d6f5;
    --course-module-hover: rgba(108, 43, 217, 0.05);
}

/* ============================================
   ธีมที่ 3: วิทยาศาสตร์ - ฟ้าน้ำเงินเข้ม
   ============================================ */
.theme-SCI001 {
    --course-primary: #0a3d62;
    --course-secondary: #3c9ed9;
    --course-background: #e8f4fd;
    --course-text: #1a1a2e;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #0a3d62, #072a45);
    --course-header-text: #ffffff;
    --course-progress-bg: #d4e8f7;
    --course-progress-fill: linear-gradient(90deg, #0a3d62, #3c9ed9);
    --course-btn-primary: #0a3d62;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #3c9ed9;
    --course-badge-text: #ffffff;
    --course-border: #c5ddf5;
    --course-module-hover: rgba(10, 61, 98, 0.05);
}

/* ============================================
   ธีมที่ 4: คณิตศาสตร์ - ส้มอิฐอบอุ่น
   ============================================ */
.theme-MATH001 {
    --course-primary: #d35400;
    --course-secondary: #f39c12;
    --course-background: #fef9f0;
    --course-text: #3e2723;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #d35400, #a04000);
    --course-header-text: #ffffff;
    --course-progress-bg: #fdebd0;
    --course-progress-fill: linear-gradient(90deg, #d35400, #f39c12);
    --course-btn-primary: #d35400;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #f39c12;
    --course-badge-text: #3e2723;
    --course-border: #f5d5b0;
    --course-module-hover: rgba(211, 84, 0, 0.05);
}

/* ============================================
   ธีมที่ 5: ภาษาไทย - แดงชาดคลาสสิก
   ============================================ */
.theme-THAI001 {
    --course-primary: #b71c1c;
    --course-secondary: #ffab91;
    --course-background: #fef5f0;
    --course-text: #3e1111;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #b71c1c, #7f0000);
    --course-header-text: #ffffff;
    --course-progress-bg: #fce4dc;
    --course-progress-fill: linear-gradient(90deg, #b71c1c, #ffab91);
    --course-btn-primary: #b71c1c;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #ffab91;
    --course-badge-text: #3e1111;
    --course-border: #f5c6b8;
    --course-module-hover: rgba(183, 28, 28, 0.05);
}

/* ============================================
   ธีมที่ 6: ภาษาอังกฤษ - น้ำเงินรอยัลบลู
   ============================================ */
.theme-ENG001 {
    --course-primary: #1a237e;
    --course-secondary: #42a5f5;
    --course-background: #e8eaf6;
    --course-text: #0d1137;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #1a237e, #0d1542);
    --course-header-text: #ffffff;
    --course-progress-bg: #c5cae9;
    --course-progress-fill: linear-gradient(90deg, #1a237e, #42a5f5);
    --course-btn-primary: #1a237e;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #42a5f5;
    --course-badge-text: #ffffff;
    --course-border: #b3bce6;
    --course-module-hover: rgba(26, 35, 126, 0.05);
}

/* ============================================
   ธีมที่ 7: ศิลปะ - ม่วงลาเวนเดอร์
   ============================================ */
.theme-ART001 {
    --course-primary: #7b1fa2;
    --course-secondary: #e1bee7;
    --course-background: #fdf8fe;
    --course-text: #2a0845;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #7b1fa2, #4a0072);
    --course-header-text: #ffffff;
    --course-progress-bg: #f3e5f5;
    --course-progress-fill: linear-gradient(90deg, #7b1fa2, #e1bee7);
    --course-btn-primary: #7b1fa2;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #e1bee7;
    --course-badge-text: #2a0845;
    --course-border: #e1d0f0;
    --course-module-hover: rgba(123, 31, 162, 0.05);
}

/* ============================================
   ธีมที่ 8: ดนตรี - ชมพูกุหลาบ
   ============================================ */
.theme-MUSIC001 {
    --course-primary: #ad1457;
    --course-secondary: #f48fb1;
    --course-background: #fef5f8;
    --course-text: #3e0028;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #ad1457, #6d0038);
    --course-header-text: #ffffff;
    --course-progress-bg: #fce4ec;
    --course-progress-fill: linear-gradient(90deg, #ad1457, #f48fb1);
    --course-btn-primary: #ad1457;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #f48fb1;
    --course-badge-text: #3e0028;
    --course-border: #f5c6d8;
    --course-module-hover: rgba(173, 20, 87, 0.05);
}

/* ============================================
   ธีมที่ 9: พลศึกษา - เขียวมะนาวสดใส
   ============================================ */
.theme-PE001 {
    --course-primary: #558b2f;
    --course-secondary: #aed581;
    --course-background: #f5faf0;
    --course-text: #1b3a0a;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #558b2f, #33691e);
    --course-header-text: #ffffff;
    --course-progress-bg: #e8f5d0;
    --course-progress-fill: linear-gradient(90deg, #558b2f, #aed581);
    --course-btn-primary: #558b2f;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #aed581;
    --course-badge-text: #1b3a0a;
    --course-border: #c8e6a8;
    --course-module-hover: rgba(85, 139, 47, 0.05);
}

/* ============================================
   ธีมที่ 10: สังคมศึกษา - น้ำตาลดิน
   ============================================ */
.theme-SOC001 {
    --course-primary: #5d4037;
    --course-secondary: #bcaaa4;
    --course-background: #faf7f5;
    --course-text: #3e2723;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #5d4037, #3e2723);
    --course-header-text: #ffffff;
    --course-progress-bg: #efe5de;
    --course-progress-fill: linear-gradient(90deg, #5d4037, #bcaaa4);
    --course-btn-primary: #5d4037;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #bcaaa4;
    --course-badge-text: #3e2723;
    --course-border: #d7ccc8;
    --course-module-hover: rgba(93, 64, 55, 0.05);
}

/* ============================================
   ธีมที่ 11: การงานอาชีพ - เทาน้ำเงินมืออาชีพ
   ============================================ */
.theme-CAREER001 {
    --course-primary: #37474f;
    --course-secondary: #90a4ae;
    --course-background: #f5f7f8;
    --course-text: #1a2327;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #37474f, #1a2327);
    --course-header-text: #ffffff;
    --course-progress-bg: #e0e5e8;
    --course-progress-fill: linear-gradient(90deg, #37474f, #90a4ae);
    --course-btn-primary: #37474f;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #90a4ae;
    --course-badge-text: #ffffff;
    --course-border: #cfd8dc;
    --course-module-hover: rgba(55, 71, 79, 0.05);
}

/* ============================================
   ธีมที่ 12: ภาษาจีน - แดงทองมงคล
   ============================================ */
.theme-CHINESE001 {
    --course-primary: #c62828;
    --course-secondary: #ffd54f;
    --course-background: #fff8f0;
    --course-text: #3e0000;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #c62828, #8e0000);
    --course-header-text: #ffffff;
    --course-progress-bg: #ffe8d6;
    --course-progress-fill: linear-gradient(90deg, #c62828, #ffd54f);
    --course-btn-primary: #c62828;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #ffd54f;
    --course-badge-text: #3e0000;
    --course-border: #f5c6a0;
    --course-module-hover: rgba(198, 40, 40, 0.05);
}

/* ============================================
   ธีมที่ 13: ภาษาญี่ปุ่น - ชมพูซากุระ
   ============================================ */
.theme-JAPAN001 {
    --course-primary: #e91e63;
    --course-secondary: #f8bbd0;
    --course-background: #fff5f8;
    --course-text: #3e0020;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #e91e63, #b4003a);
    --course-header-text: #ffffff;
    --course-progress-bg: #fde0e9;
    --course-progress-fill: linear-gradient(90deg, #e91e63, #f8bbd0);
    --course-btn-primary: #e91e63;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #f8bbd0;
    --course-badge-text: #3e0020;
    --course-border: #f5c6d8;
    --course-module-hover: rgba(233, 30, 99, 0.05);
}

/* ============================================
   ธีมที่ 14: เกาหลี - ม่วงพาสเทล
   ============================================ */
.theme-KOREAN001 {
    --course-primary: #7c4dff;
    --course-secondary: #b388ff;
    --course-background: #f8f5ff;
    --course-text: #1a0a3e;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #7c4dff, #4a00b4);
    --course-header-text: #ffffff;
    --course-progress-bg: #ede7f6;
    --course-progress-fill: linear-gradient(90deg, #7c4dff, #b388ff);
    --course-btn-primary: #7c4dff;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #b388ff;
    --course-badge-text: #1a0a3e;
    --course-border: #d1c4e9;
    --course-module-hover: rgba(124, 77, 255, 0.05);
}

/* ============================================
   ธีมที่ 15: ฟิสิกส์ - ฟ้าเทอร์ควอยซ์
   ============================================ */
.theme-PHYSICS001 {
    --course-primary: #00695c;
    --course-secondary: #80cbc4;
    --course-background: #f0fafa;
    --course-text: #00251a;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #00695c, #003d33);
    --course-header-text: #ffffff;
    --course-progress-bg: #d0f0ec;
    --course-progress-fill: linear-gradient(90deg, #00695c, #80cbc4);
    --course-btn-primary: #00695c;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #80cbc4;
    --course-badge-text: #00251a;
    --course-border: #b2dfdb;
    --course-module-hover: rgba(0, 105, 92, 0.05);
}

/* ============================================
   ธีมที่ 16: เคมี - เขียวน้ำทะเล
   ============================================ */
.theme-CHEM001 {
    --course-primary: #0277bd;
    --course-secondary: #4fc3f7;
    --course-background: #f0f8ff;
    --course-text: #002f4a;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #0277bd, #004c8c);
    --course-header-text: #ffffff;
    --course-progress-bg: #d0ecff;
    --course-progress-fill: linear-gradient(90deg, #0277bd, #4fc3f7);
    --course-btn-primary: #0277bd;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #4fc3f7;
    --course-badge-text: #002f4a;
    --course-border: #b3e5fc;
    --course-module-hover: rgba(2, 119, 189, 0.05);
}

/* ============================================
   ธีมที่ 17: ชีววิทยา - เขียวธรรมชาติ
   ============================================ */
.theme-BIO001 {
    --course-primary: #2e7d32;
    --course-secondary: #a5d6a7;
    --course-background: #f2faf2;
    --course-text: #0a2e0a;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #2e7d32, #1b5e20);
    --course-header-text: #ffffff;
    --course-progress-bg: #d8f0d8;
    --course-progress-fill: linear-gradient(90deg, #2e7d32, #a5d6a7);
    --course-btn-primary: #2e7d32;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #a5d6a7;
    --course-badge-text: #0a2e0a;
    --course-border: #c8e6c9;
    --course-module-hover: rgba(46, 125, 50, 0.05);
}

/* ============================================
   ธีมที่ 18: ดาราศาสตร์ - ม่วงอวกาศ
   ============================================ */
.theme-ASTRO001 {
    --course-primary: #1a0033;
    --course-secondary: #9c27b0;
    --course-background: #f8f0ff;
    --course-text: #0d0020;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #1a0033, #0d001a);
    --course-header-text: #ffffff;
    --course-progress-bg: #e8d5f5;
    --course-progress-fill: linear-gradient(90deg, #1a0033, #9c27b0);
    --course-btn-primary: #1a0033;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #9c27b0;
    --course-badge-text: #ffffff;
    --course-border: #d4b8e8;
    --course-module-hover: rgba(26, 0, 51, 0.05);
}

/* ============================================
   ธีมที่ 19: ภูมิศาสตร์ - น้ำเงินเขียวโลก
   ============================================ */
.theme-GEO001 {
    --course-primary: #004d40;
    --course-secondary: #4db6ac;
    --course-background: #f0f8f6;
    --course-text: #001a14;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #004d40, #00261f);
    --course-header-text: #ffffff;
    --course-progress-bg: #d0ece8;
    --course-progress-fill: linear-gradient(90deg, #004d40, #4db6ac);
    --course-btn-primary: #004d40;
    --course-btn-primary-text: #ffffff;
    --course-badge-bg: #4db6ac;
    --course-badge-text: #001a14;
    --course-border: #b2dfdb;
    --course-module-hover: rgba(0, 77, 64, 0.05);
}

/* ============================================
   ธีมที่ 20: การเขียนโปรแกรม - ดำเทคเข้ม
   ============================================ */
.theme-CODE001 {
    --course-primary: #1e1e1e;
    --course-secondary: #4ec9b0;
    --course-background: #f8f9fa;
    --course-text: #1e1e1e;
    --course-card-bg: #ffffff;
    --course-header-bg: linear-gradient(135deg, #1e1e1e, #0a0a0a);
    --course-header-text: #4ec9b0;
    --course-progress-bg: #e0e0e0;
    --course-progress-fill: linear-gradient(90deg, #1e1e1e, #4ec9b0);
    --course-btn-primary: #1e1e1e;
    --course-btn-primary-text: #4ec9b0;
    --course-badge-bg: #4ec9b0;
    --course-badge-text: #1e1e1e;
    --course-border: #cccccc;
    --course-module-hover: rgba(30, 30, 30, 0.05);
}

/* ============================================
   นำธีมไปใช้กับ elements ต่างๆ
   ============================================ */
.course-page {
    background-color: var(--course-background);
    color: var(--course-text);
}

.course-page .navbar {
    background: var(--course-header-bg) !important;
    color: var(--course-header-text) !important;
}

.course-page .navbar .nav-link {
    color: var(--course-header-text) !important;
}

.course-page .card {
    background-color: var(--course-card-bg);
    border-color: var(--course-border);
}

.course-page .card-header {
    background: var(--course-header-bg);
    color: var(--course-header-text);
}

.course-page .btn-primary {
    background-color: var(--course-btn-primary);
    border-color: var(--course-btn-primary);
    color: var(--course-btn-primary-text);
}

.course-page .btn-primary:hover {
    opacity: 0.9;
    background-color: var(--course-btn-primary);
}

.course-page .btn-outline-primary {
    color: var(--course-btn-primary);
    border-color: var(--course-btn-primary);
}

.course-page .btn-outline-primary:hover {
    background-color: var(--course-btn-primary);
    color: var(--course-btn-primary-text);
}

.course-page .progress {
    background-color: var(--course-progress-bg);
}

.course-page .progress-bar {
    background: var(--course-progress-fill);
}

.course-page .badge {
    background-color: var(--course-badge-bg);
    color: var(--course-badge-text);
}

.course-page .module-card:hover {
    background-color: var(--course-module-hover);
}

.course-page .breadcrumb {
    background-color: transparent;
}

.course-page .breadcrumb-item a {
    color: var(--course-primary);
}

.course-page .breadcrumb-item.active {
    color: var(--course-text);
}

/* ปรับแต่ง Progress Bar ให้สวยงาม */
.progress-bar-theme {
    background: var(--course-progress-fill);
    border-radius: 20px;
    transition: width 0.6s ease;
}

/* ปรับแต่ง Navbar */
.navbar-themed {
    background: var(--course-header-bg) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar-themed .navbar-brand {
    color: var(--course-header-text) !important;
    font-weight: bold;
}

/* ปรับแต่ง Footer */
.footer-themed {
    background: var(--course-header-bg);
    color: var(--course-header-text);
}