/* =====================================================================
   VS Kit — ธีมสีประจำระบบ (สีเมนูซ้าย + สีเน้นของปุ่ม/ไอคอน/หัวตาราง)
   ใช้: โหลดต่อจาก vs-app.css แล้วใส่คลาสที่ <body>  เช่น  <body class="vs-theme-emerald">
   ไม่ใส่คลาส = ม่วงคราม (โทนเดิมของระบบจัดตารางสอน)
   ทุกระบบใช้ธีมไม่ซ้ำกัน — หัวหน้าโครงการกำหนดธีมไว้ใน BRIEF.md ของแต่ละระบบ
   ส่วนอื่น (การ์ดสถิติหลากสี, ป้ายสถานะ, ปุ่มเขียว/ส้ม/แดง) คงเดิม เพื่อให้ความหมายของสีเหมือนกันทุกระบบ
   ===================================================================== */
:root {
    --sb-a: #4f46e5; --sb-b: #7c3aed; --sb-glow: rgba(124, 58, 237, .25); --sb-mark: #FFCC70;
    --ac: #5E5CE6; --ac-2: #BF5AF2; --ac-ink: #3730a3; --ac-soft: #eef2ff; --ac-line: #e0e7ff; --ac-head: #f5f7ff;
    --hero-1: #1e3a8a; --hero-2: #4338ca; --hero-3: #0f766e;
}
/* 1. ม่วงคราม (ค่าเริ่มต้น) */
.vs-theme-indigo { }
/* 2. เขียวมรกต */
.vs-theme-emerald { --sb-a: #047857; --sb-b: #10b981; --sb-glow: rgba(16, 185, 129, .28); --sb-mark: #FDE68A;
    --ac: #059669; --ac-2: #34d399; --ac-ink: #065f46; --ac-soft: #ecfdf5; --ac-line: #a7f3d0; --ac-head: #f0fdf7;
    --hero-1: #064e3b; --hero-2: #059669; --hero-3: #0891b2; }
/* 3. ฟ้าน้ำทะเลสาบ (เขียวอมฟ้า) */
.vs-theme-lagoon { --sb-a: #0f766e; --sb-b: #0891b2; --sb-glow: rgba(8, 145, 178, .28); --sb-mark: #FDE68A;
    --ac: #0d9488; --ac-2: #22d3ee; --ac-ink: #115e59; --ac-soft: #f0fdfa; --ac-line: #99f6e4; --ac-head: #f0fdfa;
    --hero-1: #134e4a; --hero-2: #0d9488; --hero-3: #0369a1; }
/* 4. ส้มพระอาทิตย์ตก */
.vs-theme-sunset { --sb-a: #ea580c; --sb-b: #db2777; --sb-glow: rgba(234, 88, 12, .28); --sb-mark: #FEF08A;
    --ac: #f97316; --ac-2: #ec4899; --ac-ink: #9a3412; --ac-soft: #fff7ed; --ac-line: #fed7aa; --ac-head: #fff7ed;
    --hero-1: #9a3412; --hero-2: #ea580c; --hero-3: #be185d; }
/* 5. ทองอำพัน */
.vs-theme-amber { --sb-a: #b45309; --sb-b: #d97706; --sb-glow: rgba(217, 119, 6, .3); --sb-mark: #FFFFFF;
    --ac: #d97706; --ac-2: #f59e0b; --ac-ink: #92400e; --ac-soft: #fffbeb; --ac-line: #fde68a; --ac-head: #fffbeb;
    --hero-1: #78350f; --hero-2: #b45309; --hero-3: #ca8a04; }
/* 6. ชมพูกุหลาบ */
.vs-theme-rose { --sb-a: #be185d; --sb-b: #e11d48; --sb-glow: rgba(225, 29, 72, .26); --sb-mark: #FDE68A;
    --ac: #e11d48; --ac-2: #f472b6; --ac-ink: #9f1239; --ac-soft: #fff1f2; --ac-line: #fecdd3; --ac-head: #fff1f2;
    --hero-1: #881337; --hero-2: #e11d48; --hero-3: #c026d3; }
/* 7. แดงเพลิง */
.vs-theme-crimson { --sb-a: #b91c1c; --sb-b: #ea580c; --sb-glow: rgba(220, 38, 38, .26); --sb-mark: #FDE68A;
    --ac: #dc2626; --ac-2: #f97316; --ac-ink: #991b1b; --ac-soft: #fef2f2; --ac-line: #fecaca; --ac-head: #fef2f2;
    --hero-1: #7f1d1d; --hero-2: #dc2626; --hero-3: #ea580c; }
/* 8. ม่วงองุ่น (ม่วงอมบานเย็น) */
.vs-theme-grape { --sb-a: #6d28d9; --sb-b: #a21caf; --sb-glow: rgba(162, 28, 175, .26); --sb-mark: #FDE68A;
    --ac: #9333ea; --ac-2: #d946ef; --ac-ink: #6b21a8; --ac-soft: #faf5ff; --ac-line: #e9d5ff; --ac-head: #faf5ff;
    --hero-1: #4c1d95; --hero-2: #9333ea; --hero-3: #c026d3; }
/* 9. เขียวป่า */
.vs-theme-forest { --sb-a: #166534; --sb-b: #4d7c0f; --sb-glow: rgba(22, 101, 52, .28); --sb-mark: #FDE68A;
    --ac: #16a34a; --ac-2: #84cc16; --ac-ink: #14532d; --ac-soft: #f0fdf4; --ac-line: #bbf7d0; --ac-head: #f0fdf4;
    --hero-1: #14532d; --hero-2: #15803d; --hero-3: #65a30d; }
/* 10. กรมท่ายามค่ำ (น้ำเงินเข้ม + ฟ้าสด) */
.vs-theme-midnight { --sb-a: #0f172a; --sb-b: #1e3a5f; --sb-glow: rgba(15, 23, 42, .35); --sb-mark: #38BDF8;
    --ac: #0284c7; --ac-2: #22d3ee; --ac-ink: #075985; --ac-soft: #f0f9ff; --ac-line: #bae6fd; --ac-head: #f0f9ff;
    --hero-1: #0f172a; --hero-2: #1e40af; --hero-3: #0891b2; }
/* 11. ม่วงพลัม (ม่วงอมชมพู) */
.vs-theme-plum { --sb-a: #7e22ce; --sb-b: #db2777; --sb-glow: rgba(219, 39, 119, .26); --sb-mark: #FDE68A;
    --ac: #a855f7; --ac-2: #ec4899; --ac-ink: #7e22ce; --ac-soft: #fdf4ff; --ac-line: #f5d0fe; --ac-head: #fdf4ff;
    --hero-1: #581c87; --hero-2: #a21caf; --hero-3: #db2777; }
/* 12. ปะการัง (ชมพูส้ม) */
.vs-theme-coral { --sb-a: #e11d48; --sb-b: #f97316; --sb-glow: rgba(249, 115, 22, .28); --sb-mark: #FEF08A;
    --ac: #f43f5e; --ac-2: #fb923c; --ac-ink: #be123c; --ac-soft: #fff1f2; --ac-line: #fecdd3; --ac-head: #fff5f5;
    --hero-1: #9f1239; --hero-2: #f43f5e; --hero-3: #f97316; }
/* 13. มิ้นต์ (เขียวมิ้นต์ + เขียวมะนาว) */
.vs-theme-mint { --sb-a: #0d9488; --sb-b: #65a30d; --sb-glow: rgba(13, 148, 136, .28); --sb-mark: #FEF08A;
    --ac: #14b8a6; --ac-2: #84cc16; --ac-ink: #115e59; --ac-soft: #f0fdfa; --ac-line: #99f6e4; --ac-head: #f0fdfa;
    --hero-1: #134e4a; --hero-2: #0d9488; --hero-3: #4d7c0f; }
/* 14. ฟ้าสดใส */
.vs-theme-sky { --sb-a: #0284c7; --sb-b: #06b6d4; --sb-glow: rgba(6, 182, 212, .28); --sb-mark: #FEF08A;
    --ac: #0ea5e9; --ac-2: #22d3ee; --ac-ink: #075985; --ac-soft: #f0f9ff; --ac-line: #bae6fd; --ac-head: #f0f9ff;
    --hero-1: #0c4a6e; --hero-2: #0284c7; --hero-3: #0d9488; }
/* 15. น้ำตาลโกโก้ (น้ำตาลอมส้ม) */
.vs-theme-cocoa { --sb-a: #7c2d12; --sb-b: #c2410c; --sb-glow: rgba(124, 45, 18, .3); --sb-mark: #FDE68A;
    --ac: #c2410c; --ac-2: #f59e0b; --ac-ink: #7c2d12; --ac-soft: #fff7ed; --ac-line: #fed7aa; --ac-head: #fff7ed;
    --hero-1: #431407; --hero-2: #9a3412; --hero-3: #d97706; }
/* 16. ทับทิม-ม่วง (แดงอมม่วง) */
.vs-theme-ruby { --sb-a: #9f1239; --sb-b: #7e22ce; --sb-glow: rgba(159, 18, 57, .28); --sb-mark: #FDE68A;
    --ac: #be123c; --ac-2: #a855f7; --ac-ink: #881337; --ac-soft: #fff1f2; --ac-line: #fecdd3; --ac-head: #fff1f2;
    --hero-1: #4c0519; --hero-2: #be123c; --hero-3: #7e22ce; }

/* 17. น้ำเงินราชวงศ์ */
.vs-theme-royal { --sb-a: #1e3a8a; --sb-b: #2563eb; --sb-glow: rgba(37, 99, 235, .28); --sb-mark: #FDE68A;
    --ac: #2563eb; --ac-2: #60a5fa; --ac-ink: #1e3a8a; --ac-soft: #eff6ff; --ac-line: #bfdbfe; --ac-head: #eff6ff;
    --hero-1: #172554; --hero-2: #1d4ed8; --hero-3: #0284c7; }
/* 18. เทาเหล็ก + เขียวน้ำทะเล */
.vs-theme-steel { --sb-a: #334155; --sb-b: #475569; --sb-glow: rgba(51, 65, 85, .3); --sb-mark: #5EEAD4;
    --ac: #0d9488; --ac-2: #14b8a6; --ac-ink: #134e4a; --ac-soft: #f0fdfa; --ac-line: #99f6e4; --ac-head: #f1f5f9;
    --hero-1: #1e293b; --hero-2: #334155; --hero-3: #0f766e; }
/* 19. แสงเหนือ (เขียวอมฟ้า → ม่วง) */
.vs-theme-aurora { --sb-a: #0f766e; --sb-b: #7c3aed; --sb-glow: rgba(124, 58, 237, .25); --sb-mark: #FDE68A;
    --ac: #0d9488; --ac-2: #8b5cf6; --ac-ink: #115e59; --ac-soft: #f0fdfa; --ac-line: #ccfbf1; --ac-head: #f0fdfa;
    --hero-1: #134e4a; --hero-2: #0f766e; --hero-3: #6d28d9; }
/* 20. สนธยา (ครามเข้ม → ชมพู) */
.vs-theme-dusk { --sb-a: #312e81; --sb-b: #be185d; --sb-glow: rgba(190, 24, 93, .25); --sb-mark: #FDE68A;
    --ac: #6366f1; --ac-2: #ec4899; --ac-ink: #3730a3; --ac-soft: #eef2ff; --ac-line: #c7d2fe; --ac-head: #f5f3ff;
    --hero-1: #1e1b4b; --hero-2: #4338ca; --hero-3: #be185d; }
/* 21. นกยูง (ฟ้าเข้ม → เขียว) */
.vs-theme-peacock { --sb-a: #155e75; --sb-b: #15803d; --sb-glow: rgba(21, 128, 61, .26); --sb-mark: #FDE68A;
    --ac: #0e7490; --ac-2: #22c55e; --ac-ink: #164e63; --ac-soft: #ecfeff; --ac-line: #a5f3fc; --ac-head: #ecfeff;
    --hero-1: #083344; --hero-2: #0e7490; --hero-3: #15803d; }
/* 22. ส้มเขียวหวาน (ส้ม → เหลือง) */
.vs-theme-tangerine { --sb-a: #ea580c; --sb-b: #ca8a04; --sb-glow: rgba(234, 88, 12, .28); --sb-mark: #FFFFFF;
    --ac: #ea580c; --ac-2: #eab308; --ac-ink: #9a3412; --ac-soft: #fff7ed; --ac-line: #fed7aa; --ac-head: #fffbeb;
    --hero-1: #7c2d12; --hero-2: #ea580c; --hero-3: #ca8a04; }
/* 23. ดินโคลน (เทาหิน → เหลืองดินเผา) */
.vs-theme-earth { --sb-a: #57534e; --sb-b: #a16207; --sb-glow: rgba(87, 83, 78, .3); --sb-mark: #FDE68A;
    --ac: #a16207; --ac-2: #ca8a04; --ac-ink: #713f12; --ac-soft: #fefce8; --ac-line: #fef08a; --ac-head: #fafaf9;
    --hero-1: #292524; --hero-2: #57534e; --hero-3: #a16207; }
/* 24. ไซเบอร์ (ฟ้าน้ำทะเล → บานเย็น) */
.vs-theme-cyber { --sb-a: #0e7490; --sb-b: #a21caf; --sb-glow: rgba(162, 28, 175, .26); --sb-mark: #FDE68A;
    --ac: #0891b2; --ac-2: #d946ef; --ac-ink: #155e75; --ac-soft: #ecfeff; --ac-line: #a5f3fc; --ac-head: #fdf4ff;
    --hero-1: #164e63; --hero-2: #0e7490; --hero-3: #a21caf; }
/* 25. รุ่งอรุณ (ชมพู → ทอง) */
.vs-theme-sunrise { --sb-a: #db2777; --sb-b: #f59e0b; --sb-glow: rgba(245, 158, 11, .28); --sb-mark: #FFFFFF;
    --ac: #ec4899; --ac-2: #f59e0b; --ac-ink: #9d174d; --ac-soft: #fdf2f8; --ac-line: #fbcfe8; --ac-head: #fff7ed;
    --hero-1: #831843; --hero-2: #db2777; --hero-3: #d97706; }
/* 26. ลูกกวาด (ชมพู → ม่วงอ่อน) */
.vs-theme-candy { --sb-a: #ec4899; --sb-b: #8b5cf6; --sb-glow: rgba(139, 92, 246, .26); --sb-mark: #FEF08A;
    --ac: #ec4899; --ac-2: #8b5cf6; --ac-ink: #9d174d; --ac-soft: #fdf2f8; --ac-line: #fbcfe8; --ac-head: #faf5ff;
    --hero-1: #831843; --hero-2: #db2777; --hero-3: #7c3aed; }

/* 27. เขียว Excel (เขียวเข้ม → เขียว Excel) */
.vs-theme-excel { --sb-a: #0b5d33; --sb-b: #1f8a4c; --sb-glow: rgba(31, 138, 76, .28); --sb-mark: #BBF7D0;
    --ac: #16a34a; --ac-2: #22c55e; --ac-ink: #14532d; --ac-soft: #f0fdf4; --ac-line: #bbf7d0; --ac-head: #f0fdf4;
    --hero-1: #052e16; --hero-2: #15803d; --hero-3: #0d9488; }
/* 28. มะนาว (เขียวมะกอก → เขียวมะนาว) */
.vs-theme-lime { --sb-a: #3f6212; --sb-b: #84cc16; --sb-glow: rgba(132, 204, 22, .28); --sb-mark: #ECFCCB;
    --ac: #65a30d; --ac-2: #a3e635; --ac-ink: #365314; --ac-soft: #f7fee7; --ac-line: #d9f99d; --ac-head: #f7fee7;
    --hero-1: #1a2e05; --hero-2: #4d7c0f; --hero-3: #65a30d; }
/* 29. ทองคำ (น้ำตาลทอง → เหลืองทอง) */
.vs-theme-gold { --sb-a: #92400e; --sb-b: #eab308; --sb-glow: rgba(234, 179, 8, .28); --sb-mark: #FFFFFF;
    --ac: #ca8a04; --ac-2: #facc15; --ac-ink: #713f12; --ac-soft: #fefce8; --ac-line: #fef08a; --ac-head: #fefce8;
    --hero-1: #422006; --hero-2: #a16207; --hero-3: #ca8a04; }
/* 30. กราไฟต์ (ดำกราไฟต์ → เทาเข้ม (ปุ่มสีอำพัน)) */
.vs-theme-graphite { --sb-a: #18181b; --sb-b: #3f3f46; --sb-glow: rgba(63, 63, 70, .30); --sb-mark: #FBBF24;
    --ac: #d97706; --ac-2: #f59e0b; --ac-ink: #78350f; --ac-soft: #fffbeb; --ac-line: #fde68a; --ac-head: #fafaf9;
    --hero-1: #18181b; --hero-2: #3f3f46; --hero-3: #b45309; }
/* 31. แตงโม (เขียวเปลือก → แดงเนื้อแตงโม) */
.vs-theme-watermelon { --sb-a: #15803d; --sb-b: #e11d48; --sb-glow: rgba(225, 29, 72, .26); --sb-mark: #BBF7D0;
    --ac: #e11d48; --ac-2: #fb7185; --ac-ink: #881337; --ac-soft: #fff1f2; --ac-line: #fecdd3; --ac-head: #f0fdf4;
    --hero-1: #14532d; --hero-2: #15803d; --hero-3: #e11d48; }
/* 32. ลาเวนเดอร์ (ม่วงเข้ม → ม่วงลาเวนเดอร์) */
.vs-theme-lavender { --sb-a: #5b21b6; --sb-b: #a78bfa; --sb-glow: rgba(167, 139, 250, .30); --sb-mark: #FDE68A;
    --ac: #7c3aed; --ac-2: #a78bfa; --ac-ink: #4c1d95; --ac-soft: #f5f3ff; --ac-line: #ddd6fe; --ac-head: #f5f3ff;
    --hero-1: #2e1065; --hero-2: #6d28d9; --hero-3: #8b5cf6; }
/* 33. เขียวเสจ (เขียวหม่นเข้ม → เขียวเสจ) */
.vs-theme-sage { --sb-a: #3f4f3a; --sb-b: #6b8f71; --sb-glow: rgba(107, 143, 113, .30); --sb-mark: #FEF3C7;
    --ac: #4d7c5a; --ac-2: #84a98c; --ac-ink: #2f3e2c; --ac-soft: #f3f7f2; --ac-line: #d4e2d4; --ac-head: #f3f7f2;
    --hero-1: #1f2a1c; --hero-2: #4d6b4f; --hero-3: #7a9a6b; }

/* 34. เบอร์รี่ (ม่วงไวน์ → แดงเบอร์รี่) */
.vs-theme-berry { --sb-a: #701a75; --sb-b: #be123c; --sb-glow: rgba(190, 18, 60, .28); --sb-mark: #FDE68A;
    --ac: #be185d; --ac-2: #e11d48; --ac-ink: #831843; --ac-soft: #fdf2f8; --ac-line: #fbcfe8; --ac-head: #fdf2f8;
    --hero-1: #4a044e; --hero-2: #a21caf; --hero-3: #e11d48; }

/* 35. ทะเลลึก (น้ำเงินทะเล → ฟ้าคราม) */
.vs-theme-ocean { --sb-a: #0c4a6e; --sb-b: #0284c7; --sb-glow: rgba(2, 132, 199, .28); --sb-mark: #FDE68A;
    --ac: #0369a1; --ac-2: #0ea5e9; --ac-ink: #0c4a6e; --ac-soft: #f0f9ff; --ac-line: #bae6fd; --ac-head: #f0f9ff;
    --hero-1: #082f49; --hero-2: #0369a1; --hero-3: #38bdf8; }

/* 36. ชาเขียว (เขียวมัทฉะ → เหลืองอ่อน) */
.vs-theme-matcha { --sb-a: #365314; --sb-b: #65a30d; --sb-glow: rgba(101, 163, 13, .28); --sb-mark: #FEF9C3;
    --ac: #4d7c0f; --ac-2: #84cc16; --ac-ink: #365314; --ac-soft: #f7fee7; --ac-line: #d9f99d; --ac-head: #f7fee7;
    --hero-1: #1a2e05; --hero-2: #4d7c0f; --hero-3: #a3e635; }

/* 37. ส้มอิฐ (น้ำตาลแดง → ส้มอิฐ) */
.vs-theme-terracotta { --sb-a: #7c2d12; --sb-b: #c2410c; --sb-glow: rgba(194, 65, 12, .28); --sb-mark: #FDE68A;
    --ac: #c2410c; --ac-2: #ea580c; --ac-ink: #7c2d12; --ac-soft: #fff7ed; --ac-line: #fed7aa; --ac-head: #fff7ed;
    --hero-1: #431407; --hero-2: #9a3412; --hero-3: #f97316; }

/* 38. ฟ้าน้ำแข็ง (น้ำเงินเทา → ฟ้าน้ำแข็ง) */
.vs-theme-glacier { --sb-a: #1e3a5f; --sb-b: #3b82a0; --sb-glow: rgba(59, 130, 160, .28); --sb-mark: #E0F2FE;
    --ac: #2b6f8f; --ac-2: #5fa8c6; --ac-ink: #1e3a5f; --ac-soft: #f1f8fb; --ac-line: #cbe4ee; --ac-head: #f1f8fb;
    --hero-1: #13263f; --hero-2: #2b6f8f; --hero-3: #7cc4de; }

/* 39. ชมพูพีช (ชมพูเข้ม → พีช) */
.vs-theme-peach { --sb-a: #9d174d; --sb-b: #f472b6; --sb-glow: rgba(244, 114, 182, .30); --sb-mark: #FFEDD5;
    --ac: #db2777; --ac-2: #fb923c; --ac-ink: #831843; --ac-soft: #fff1f2; --ac-line: #fecdd3; --ac-head: #fff1f2;
    --hero-1: #701a3e; --hero-2: #db2777; --hero-3: #fb923c; }

/* 40. นีออนเทอร์ควอยซ์ (เขียวน้ำทะเลเข้ม → เทอร์ควอยซ์) */
.vs-theme-turquoise { --sb-a: #134e4a; --sb-b: #14b8a6; --sb-glow: rgba(20, 184, 166, .28); --sb-mark: #FEF08A;
    --ac: #0d9488; --ac-2: #2dd4bf; --ac-ink: #134e4a; --ac-soft: #f0fdfa; --ac-line: #99f6e4; --ac-head: #f0fdfa;
    --hero-1: #042f2e; --hero-2: #0f766e; --hero-3: #2dd4bf; }

/* 41. น้ำเงินกรมท่า (กรมท่า → ทองอ่อน) */
.vs-theme-navy { --sb-a: #172554; --sb-b: #1e40af; --sb-glow: rgba(30, 64, 175, .30); --sb-mark: #FCD34D;
    --ac: #1e40af; --ac-2: #3b82f6; --ac-ink: #172554; --ac-soft: #eff6ff; --ac-line: #bfdbfe; --ac-head: #eff6ff;
    --hero-1: #0b1437; --hero-2: #1e3a8a; --hero-3: #ca8a04; }

/* 42. มะม่วง (เหลืองมะม่วง → ส้ม) */
.vs-theme-mango { --sb-a: #a16207; --sb-b: #f59e0b; --sb-glow: rgba(245, 158, 11, .30); --sb-mark: #FFFFFF;
    --ac: #d97706; --ac-2: #facc15; --ac-ink: #78350f; --ac-soft: #fefce8; --ac-line: #fde68a; --ac-head: #fefce8;
    --hero-1: #713f12; --hero-2: #ca8a04; --hero-3: #f59e0b; }

/* 43. อเมทิสต์ (ม่วงคราม → ม่วงอเมทิสต์) */
.vs-theme-amethyst { --sb-a: #3b0764; --sb-b: #9333ea; --sb-glow: rgba(147, 51, 234, .28); --sb-mark: #FDE68A;
    --ac: #7e22ce; --ac-2: #a855f7; --ac-ink: #3b0764; --ac-soft: #faf5ff; --ac-line: #e9d5ff; --ac-head: #faf5ff;
    --hero-1: #2e1065; --hero-2: #7e22ce; --hero-3: #c084fc; }

/* 44. โคบอลต์ */
.vs-theme-cobalt { --sb-a: #1e3a8a; --sb-b: #2563eb; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FDE68A;
    --ac: #1d4ed8; --ac-2: #60a5fa; --ac-ink: #1e3a8a; --ac-soft: #eff6ff; --ac-line: #bfdbfe; --ac-head: #eff6ff;
    --hero-1: #0f1f4d; --hero-2: #1d4ed8; --hero-3: #22d3ee; }

/* 45. หยก */
.vs-theme-jade { --sb-a: #064e3b; --sb-b: #059669; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FEF08A;
    --ac: #047857; --ac-2: #34d399; --ac-ink: #064e3b; --ac-soft: #ecfdf5; --ac-line: #a7f3d0; --ac-head: #ecfdf5;
    --hero-1: #022c22; --hero-2: #047857; --hero-3: #6ee7b7; }

/* 46. หญ้าฝรั่น */
.vs-theme-saffron { --sb-a: #9a3412; --sb-b: #f59e0b; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FFFFFF;
    --ac: #ea580c; --ac-2: #fbbf24; --ac-ink: #7c2d12; --ac-soft: #fffbeb; --ac-line: #fde68a; --ac-head: #fffbeb;
    --hero-1: #7c2d12; --hero-2: #ea580c; --hero-3: #facc15; }

/* 47. กล้วยไม้ */
.vs-theme-orchid { --sb-a: #86198f; --sb-b: #d946ef; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FEF3C7;
    --ac: #c026d3; --ac-2: #e879f9; --ac-ink: #701a75; --ac-soft: #fdf4ff; --ac-line: #f5d0fe; --ac-head: #fdf4ff;
    --hero-1: #4a044e; --hero-2: #a21caf; --hero-3: #f0abfc; }

/* 48. หินชนวน */
.vs-theme-slate { --sb-a: #1e293b; --sb-b: #475569; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FDE68A;
    --ac: #334155; --ac-2: #64748b; --ac-ink: #0f172a; --ac-soft: #f8fafc; --ac-line: #cbd5e1; --ac-head: #f8fafc;
    --hero-1: #0f172a; --hero-2: #334155; --hero-3: #38bdf8; }

/* 49. เชอร์รี่ */
.vs-theme-cherry { --sb-a: #881337; --sb-b: #e11d48; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FEF3C7;
    --ac: #be123c; --ac-2: #fb7185; --ac-ink: #881337; --ac-soft: #fff1f2; --ac-line: #fecdd3; --ac-head: #fff1f2;
    --hero-1: #4c0519; --hero-2: #be123c; --hero-3: #fb923c; }

/* 50. นกเป็ดน้ำ */
.vs-theme-teal { --sb-a: #115e59; --sb-b: #0891b2; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FEF08A;
    --ac: #0e7490; --ac-2: #22d3ee; --ac-ink: #164e63; --ac-soft: #ecfeff; --ac-line: #a5f3fc; --ac-head: #ecfeff;
    --hero-1: #083344; --hero-2: #0e7490; --hero-3: #2dd4bf; }

/* 51. มอส */
.vs-theme-moss { --sb-a: #1c3d2e; --sb-b: #3f7d58; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FEF3C7;
    --ac: #2f6b4a; --ac-2: #5fa77a; --ac-ink: #1c3d2e; --ac-soft: #f0f7f2; --ac-line: #c7e3d1; --ac-head: #f0f7f2;
    --hero-1: #10261c; --hero-2: #2f6b4a; --hero-3: #86c79c; }

/* 52. ทองแดง */
.vs-theme-copper { --sb-a: #7a3e1d; --sb-b: #b8692f; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FFFFFF;
    --ac: #a0522d; --ac-2: #d08a4f; --ac-ink: #5c2e15; --ac-soft: #fdf6ef; --ac-line: #f1d3b5; --ac-head: #fdf6ef;
    --hero-1: #4a240f; --hero-2: #a0522d; --hero-3: #e0a96d; }

/* 53. ยีนส์ */
.vs-theme-denim { --sb-a: #1f3a68; --sb-b: #3e64a8; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FDE68A;
    --ac: #33558f; --ac-2: #6a8fd0; --ac-ink: #1f3a68; --ac-soft: #f1f5fc; --ac-line: #c9d7f0; --ac-head: #f1f5fc;
    --hero-1: #132544; --hero-2: #33558f; --hero-3: #8fb0e8; }

/* 54. ราสเบอร์รี่ */
.vs-theme-raspberry { --sb-a: #7d1546; --sb-b: #c2185b; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FEF3C7;
    --ac: #ad1457; --ac-2: #ec407a; --ac-ink: #6a0f3b; --ac-soft: #fdf0f5; --ac-line: #f8c4d8; --ac-head: #fdf0f5;
    --hero-1: #4a0a2a; --hero-2: #ad1457; --hero-3: #f06292; }

/* 55. มะกอก */
.vs-theme-olive { --sb-a: #4a4a14; --sb-b: #7a7a1f; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FFFFFF;
    --ac: #6b6b1a; --ac-2: #a3a33a; --ac-ink: #3d3d10; --ac-soft: #fafaf0; --ac-line: #e5e5b8; --ac-head: #fafaf0;
    --hero-1: #2e2e0b; --hero-2: #6b6b1a; --hero-3: #c2c25a; }

/* 56. ไพลิน */
.vs-theme-sapphire { --sb-a: #172a6e; --sb-b: #3b5bdb; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FDE68A;
    --ac: #364fc7; --ac-2: #5c7cfa; --ac-ink: #1b2a5e; --ac-soft: #edf2ff; --ac-line: #bac8ff; --ac-head: #edf2ff;
    --hero-1: #0f1a45; --hero-2: #364fc7; --hero-3: #748ffc; }

/* 57. พิสตาชิโอ */
.vs-theme-pistachio { --sb-a: #3d5a1e; --sb-b: #7cb342; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FFFFFF;
    --ac: #689f38; --ac-2: #9ccc65; --ac-ink: #33691e; --ac-soft: #f4f9ec; --ac-line: #d4e8b8; --ac-head: #f4f9ec;
    --hero-1: #25390f; --hero-2: #689f38; --hero-3: #aed581; }

/* 58. ฟลามิงโก */
.vs-theme-flamingo { --sb-a: #9c1f5a; --sb-b: #f06595; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FFF3BF;
    --ac: #e64980; --ac-2: #f783ac; --ac-ink: #862e5c; --ac-soft: #fff0f6; --ac-line: #fcc2d7; --ac-head: #fff0f6;
    --hero-1: #5c0f35; --hero-2: #d6336c; --hero-3: #ffa8a8; }

/* 59. อาร์กติก */
.vs-theme-arctic { --sb-a: #0b4f6c; --sb-b: #22a3c4; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FFFFFF;
    --ac: #1592b4; --ac-2: #4cc3e0; --ac-ink: #0b4f6c; --ac-soft: #ecfafe; --ac-line: #b6ecf8; --ac-head: #ecfafe;
    --hero-1: #06334a; --hero-2: #1592b4; --hero-3: #7fdcef; }

/* 60. คาราเมล */
.vs-theme-caramel { --sb-a: #7c4a1e; --sb-b: #c7843a; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FFFFFF;
    --ac: #b26f2a; --ac-2: #e0a35e; --ac-ink: #5e3612; --ac-soft: #fdf6ec; --ac-line: #f1d6b0; --ac-head: #fdf6ec;
    --hero-1: #4a2a0c; --hero-2: #b26f2a; --hero-3: #f2c27b; }

/* 61. ไวโอเล็ต */
.vs-theme-violet { --sb-a: #4c1d95; --sb-b: #7c3aed; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FDE68A;
    --ac: #6d28d9; --ac-2: #a78bfa; --ac-ink: #3b0f80; --ac-soft: #f5f3ff; --ac-line: #ddd6fe; --ac-head: #f5f3ff;
    --hero-1: #2e1065; --hero-2: #6d28d9; --hero-3: #c4b5fd; }

/* 62. ใบไม้ผลิ */
.vs-theme-spring { --sb-a: #14633f; --sb-b: #2fb67c; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FFFFFF;
    --ac: #20a06a; --ac-2: #5fd39b; --ac-ink: #0f5132; --ac-soft: #ecfbf3; --ac-line: #b7ecd2; --ac-head: #ecfbf3;
    --hero-1: #0a3d26; --hero-2: #20a06a; --hero-3: #8be0b6; }

/* 63. ทานตะวัน */
.vs-theme-sunflower { --sb-a: #8a5a00; --sb-b: #eab308; --sb-glow: rgba(0, 0, 0, .22); --sb-mark: #FFFFFF;
    --ac: #ca8a04; --ac-2: #fde047; --ac-ink: #6b4500; --ac-soft: #fefce8; --ac-line: #fef08a; --ac-head: #fefce8;
    --hero-1: #5a3a00; --hero-2: #ca8a04; --hero-3: #fde047; }

/* ---------- ผูกตัวแปรธีมเข้ากับส่วนประกอบ ---------- */
.app-sidebar { background: linear-gradient(180deg, var(--sb-a) 0%, var(--sb-b) 100%); box-shadow: 4px 0 25px var(--sb-glow); }
.sb-link.active { border-left-color: var(--sb-mark); }
.tb-title i { color: var(--ac); }
.tb-term { background: var(--ac-soft); color: var(--ac-ink); border-color: var(--ac-line); }
.tb-burger { color: var(--ac-ink); background: var(--ac-soft); }
.tb-burger:hover { background: var(--ac-line); }
.btn-x.primary { background: linear-gradient(135deg, var(--ac), var(--ac-2)); box-shadow: 0 8px 18px -8px var(--ac); }
.btn-x.ghost { color: var(--ac-ink); }
.btn-x.ghost:hover:not(:disabled) { background: var(--ac-soft); }
.btn-x.soft { background: var(--ac-soft); color: var(--ac-ink); border-color: var(--ac-line); }
.btn-x.cta { background-image: linear-gradient(120deg, var(--ac), var(--ac-2) 55%, #FF375F); box-shadow: 0 14px 28px -12px var(--ac); }
.icon-btn { background: var(--ac-soft); color: var(--ac-ink); }
.icon-btn:hover { background: var(--ac); color: #fff; }
.icon-btn.edit, .icon-btn.del { }  /* ปุ่มแก้ไข (เหลือง) / ลบ (แดง) คงสีเดิม */
.msec { color: var(--ac-ink); border-bottom-color: var(--ac-line); }
.msec i { background: linear-gradient(135deg, var(--ac), var(--ac-2)); }
.dt thead th { color: var(--ac-ink); background: var(--ac-head); border-bottom-color: var(--ac-line); }
.num-pill { color: var(--ac-ink); background: var(--ac-soft); }
.seg a.active, .seg button.active { color: var(--ac-ink); }
.form-control:focus, .form-select:focus { border-color: var(--ac); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ac) 18%, transparent); }
.hero:not([class*="hero--"]) { --h1: var(--hero-1); --h2: var(--hero-2); --h3: var(--hero-3); }
.sheet-head { --s1: var(--hero-2); --s2: var(--ac); --s3: var(--ac-2); }
.swal-x .swal2-confirm.btn-x.primary { background: linear-gradient(135deg, var(--ac), var(--ac-2)); }
.icon-btn.edit { background: #fef3c7; color: #b45309; }
.icon-btn.del { background: #fee2e2; color: #dc2626; }
.icon-btn.del:hover { background: #dc2626; color: #fff; }