/* Main CSS - สไตล์หลักของเว็บไซต์ */

/* Custom Styles & Themes */
:root {
    /* [ธีมหลัก] - ธีมสีม่วง (ดั้งเดิม) + ไล่สีทอง */
    --theme-primary: linear-gradient(135deg, #4B0082, #9040eb);
    /* ม่วง -> ทองกลาง */
    --theme-primary-solid: #4B0082;
    /* ม่วงเข้ม */
    --theme-secondary: #FFD700;
    /* ทองสว่าง (เน้น, ไอคอน) */
    --theme-tertiary: #8A2BE2;
    /* ม่วงสว่าง (สำรอง) */
    --theme-gold: #4B0082;
    /* ม่วงเข้ม (สำหรับ body.theme-gold จะถูก override) */
    --theme-primary-hover: linear-gradient(135deg, #3a0066, #9040eb);
    /* ม่วงเข้ม -> ทองสว่าง */
}

body.theme-blue {
    /* [EDIT] - ไล่สีฟ้าไปหาสีทอง */
    --theme-primary: linear-gradient(135deg, #1e3a8a, #D4AF37);
    /* น้ำเงิน -> ทองกลาง */
    --theme-primary-solid: #1e3a8a;
    --theme-secondary: #FFD700;
    /* ทองสว่าง */
    --theme-tertiary: #60a5fa;
    /* สีฟ้าอ่อน (คงไว้) */
    --theme-gold: #1e40af;
    /* น้ำเงินเข้ม */
    --theme-primary-hover: linear-gradient(135deg, #1c347b, #E6B800);
    /* น้ำเงินเข้ม -> ทองเข้ม */
}

body.theme-green {
    /* [EDIT] - ไล่สีเขียวไปหาสีทอง */
    --theme-primary: linear-gradient(135deg, #059669, #D4AF37);
    /* เขียว -> ทองกลาง */
    --theme-primary-solid: #059669;
    --theme-secondary: #FFD700;
    /* ทองสว่าง */
    --theme-tertiary: #34d399;
    /* สีเขียวอ่อน (คงไว้) */
    --theme-gold: #047857;
    /* เขียวเข้ม */
    --theme-primary-hover: linear-gradient(135deg, #047d57, #E6B800);
    /* เขียวเข้ม -> ทองเข้ม */
}

/* *** NEW THEMES ADDED *** */
body.theme-orange {
    /* [EDIT] - ไล่สีส้มไปหาสีทอง */
    --theme-primary: linear-gradient(135deg, #f97316, #E6B800);
    /* ส้ม -> ทอง */
    --theme-primary-solid: #f97316;
    --theme-secondary: #FFD700;
    /* ทองสว่าง */
    --theme-tertiary: #fed7aa;
    /* ส้มอ่อน (คงไว้) */
    --theme-gold: #ea580c;
    /* ส้มเข้ม */
    --theme-primary-hover: linear-gradient(135deg, #ea580c, #D4AF37);
    /* ส้มเข้ม -> ทองกลาง */
}

body.theme-red {
    /* [EDIT] - ไล่สีแดงไปหาสีทอง */
    --theme-primary: linear-gradient(135deg, #dc2626, #D4AF37);
    /* แดง -> ทองกลาง */
    --theme-primary-solid: #dc2626;
    --theme-secondary: #FFD700;
    /* ทองสว่าง */
    --theme-tertiary: #fecaca;
    /* แดงอ่อน (คงไว้) */
    --theme-gold: #b91c1c;
    /* แดงเข้ม */
    --theme-primary-hover: linear-gradient(135deg, #b91c1c, #E6B800);
    /* แดงเข้ม -> ทองเข้ม */
}

body.theme-pink {
    /* [EDIT] - ไล่สีชมพูไปหาสีทอง */
    --theme-primary: linear-gradient(135deg, #db2777, #E6B800);
    /* ชมพู -> ทอง */
    --theme-primary-solid: #db2777;
    --theme-secondary: #FFD700;
    /* ทองสว่าง */
    --theme-tertiary: #fbcfe8;
    /* ชมพูอ่อน (คงไว้) */
    --theme-gold: #be185d;
    /* ชมพูเข้ม */
    --theme-primary-hover: linear-gradient(135deg, #be185d, #D4AF37);
    /* ชมพูเข้ม -> ทองกลาง */
}

body.theme-dark {
    /* [EDIT] - ไล่สีเทาไปหาสีทอง */
    --theme-primary: linear-gradient(135deg, #4b5563, #D4AF37);
    /* เทา -> ทองกลาง */
    --theme-primary-solid: #4b5563;
    --theme-secondary: #FFD700;
    /* ทองสว่าง */
    --theme-tertiary: #d1d5db;
    /* เทาอ่อน (คงไว้) */
    --theme-gold: #374151;
    /* เทาเข้ม */
    --theme-primary-hover: linear-gradient(135deg, #374151, #E6B800);
    /* เทาเข้ม -> ทองเข้ม */
}

/* [NEW] - เทมเพลตสีทอง (หรูหรา) */
body.theme-gold {
    --theme-primary: linear-gradient(135deg, #A07900, #E6B800);
    /* ไล่สีทองเข้มไปสว่าง */
    --theme-primary-solid: #A07900;
    /* สีทองเข้ม (สำหรับตัวอักษร, border) */
    --theme-secondary: #FFD700;
    /* สีทองสว่าง (เน้น, ไอคอน) */
    --theme-tertiary: #D4AF37;
    /* สีทองกลาง (สำรอง) */
    --theme-gold: #8B5A2B;
    /* สีทองเข้มอมน้ำตาล (สำหรับ hover) */
    --theme-primary-hover: linear-gradient(135deg, #8B5A2B, #D4AF37);
    /* ไล่สีตอน hover */
}

/* [NEW] - เทมเพลตสีม่วง (สว่าง) */
body.theme-purple {
    --theme-primary: linear-gradient(135deg, #8A2BE2, #D4AF37);
    /* ม่วงสว่าง -> ทองกลาง */
    --theme-primary-solid: #8A2BE2;
    /* ม่วงสว่าง */
    --theme-secondary: #FFD700;
    /* ทองสว่าง (เน้น, ไอคอน) */
    --theme-tertiary: #4B0082;
    /* ม่วงเข้ม (สำรอง) */
    --theme-gold: #4B0082;
    --theme-primary-hover: linear-gradient(135deg, #7a1fb5, #E6B800);
    /* ม่วงกลาง -> ทองสว่าง */
}
body.theme-cyan {
    /* [NEW] - ไล่สีฟ้า(cyan)ไปหาสีทอง */
    --theme-primary: linear-gradient(135deg, #008cff, #D4AF37); /* Teal -> ทองกลาง */
    --theme-primary-solid: #078af5; /* Teal เข้ม */
    --theme-secondary: #FFD700; /* ทองสว่าง */
    --theme-tertiary: #29b4f5; /* Teal สว่าง (คงไว้) */
    --theme-gold: #0f2776; /* Teal เข้มมาก */
    --theme-primary-hover: linear-gradient(135deg, #0f2776, #E6B800); /* Teal เข้มมาก -> ทองเข้ม */
}

body {
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    overflow-x: hidden; /* FIX: ป้องกันการเลื่อนแนวนอน (ล้นจอ) */
}

/* Font size classes */
body.font-sm {
    font-size: 14px;
}

body.font-lg {
    font-size: 18px;
}

/* Helper for gradient backgrounds */
.bg-theme-primary {
    background: var(--theme-primary);
}

.bg-theme-primary-hover:hover {
    background: var(--theme-primary-hover);
}

.text-theme-primary-solid {
    color: var(--theme-primary-solid);
}

.hover\:text-theme-primary-solid:hover {
    color: var(--theme-primary-solid);
}

.border-theme-secondary {
    border-color: var(--theme-secondary);
}

.text-theme-secondary {
    color: var(--theme-secondary);
}

.bg-theme-secondary {
    background: var(--theme-secondary);
}

.bg-theme-tertiary {
    background: var(--theme-tertiary);
}

.text-theme-tertiary {
    color: var(--theme-tertiary);
}

.border-theme-tertiary {
    border-color: var(--theme-tertiary);
}

/* สีทองเข้ม (Dark Gold) - เพิ่มใหม่! */
.bg-theme-gold {
    background: var(--theme-gold);
}

.text-theme-gold {
    color: var(--theme-gold);
}

.border-theme-gold {
    border-color: var(--theme-gold);
}

/* Tab Styles */
.tab-active {
    border-color: var(--theme-primary-solid) !important;
    color: var(--theme-primary-solid) !important;
}



/* Popup Animation */
#welcome-popup,
#bottom-left-popup {
    animation: popup-fade-in 0.5s ease-out;
}

@keyframes popup-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* --- CSS สำหรับแถบข่าววิ่ง --- */

.notification-bar-text {
    /* กำหนดให้ animation ทำงาน */
    animation: marquee-animation 40s linear infinite;
}

.notification-bar-text:hover {
    /* ทำให้ animation หยุดเมื่อผู้ใช้เอาเมาส์ไปชี้ */
    animation-play-state: paused;
}

/* สร้าง Keyframes สำหรับการเคลื่อนไหว */
@keyframes marquee-animation {
    0% {
        /* จุดเริ่มต้น: อยู่ที่ตำแหน่งปกติ */
        transform: translateX(0%);
    }

    100% {
        /* จุดสิ้นสุด: เลื่อนไปทางซ้ายจนสุดข้อความ */
        transform: translateX(-100%);
    }
}

/* --- START: Cookie Consent Banner Styles --- */
#cookie-consent-banner {
    /* ซ่อนไว้ด้านล่างและโปร่งใสโดยค่าเริ่มต้น */
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    pointer-events: none; /* ปิดการคลิกเมื่อซ่อนอยู่ */
}

#cookie-consent-banner.show {
    /* แสดงผลโดยเลื่อนขึ้นมาและทำให้ทึบแสง */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* เปิดการคลิกเมื่อแสดง */
}
/* --- END: Cookie Consent Banner Styles --- */