.glass-navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: 75px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; z-index: 1000;
    background: rgba(255, 255, 255, 0.15); /* กระจกฝ้าบางๆ */
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
body.dark-mode .glass-navbar {
    background: rgba(15, 23, 42, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-navbar.scrolled {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
body.dark-mode .glass-navbar.scrolled {
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* หน้าต่าง Login & Register */
.auth-container {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; padding: 20px;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px);
}
.auth-box {
    background: var(--glass-bg); backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid var(--glass-border); border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2); padding: 40px 30px;
    width: 100%; max-width: 420px; text-align: center;
    animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-box h1 { color: var(--primary-dark); margin-bottom: 5px; font-size: 28px; }
.auth-box .sub-title { color: var(--text-muted); margin-bottom: 25px; font-size: 16px; }
.auth-link { margin-top: 15px; color: var(--primary-color); cursor: pointer; font-weight: bold; transition: 0.3s; }
.auth-link:hover { text-decoration: underline; }
/* --- ปุ่ม Icon & Auth --- */
.icon-btn {
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%; width: 45px; height: 45px; color: white; font-size: 18px;
    cursor: pointer; position: relative; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.icon-btn:hover { transform: scale(1.1); background: rgba(255, 255, 255, 0.2); }
.noti-dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; background: #ff453a; border-radius: 50%; box-shadow: 0 0 8px #ff453a; }

.auth-btn {
    padding: 10px 20px; border-radius: 30px; font-size: 16px; font-weight: bold;
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); border: 1px solid transparent;
}
.auth-btn.login-state { background: var(--theme-lightblue); color: #050b14; box-shadow: 0 4px 15px rgba(0, 170, 255, 0.3); }
.auth-btn.logout-state { background: rgba(255, 69, 58, 0.15); color: #ff453a; border-color: rgba(255, 69, 58, 0.3); }
.auth-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* --- Main Content & Banner --- */
.main-content { padding-top: 100px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.banner-wrapper { width: 90%; max-width: 1200px; margin-bottom: 40px; }
.banner-container {
    width: 100%; aspect-ratio: 5 / 1; border-radius: 32px; overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4); border: 1px solid var(--glass-border);
}
.banner-container img { width: 100%; height: 100%; object-fit: cover; }

/* --- Section ทั่วไป --- */
.content-section { width: 90%; max-width: 1200px; margin-bottom: 50px; }
.section-title { margin-bottom: 20px; border-left: 4px solid var(--theme-lightblue); padding-left: 15px; font-size: 24px; }

/* --- ประกาศ Grid 1x3 --- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-item { aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; position: relative; border: 1px solid var(--glass-border); box-shadow: 0 15px 35px rgba(0,0,0,0.3); }
.news-item img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s ease; }

.overlay-item .glass-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 51, 102, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center; z-index: 2;
}
.see-more-btn {
    background: var(--theme-yellow); color: var(--theme-blue); border: none;
    padding: 12px 24px; border-radius: 30px; font-size: 16px; font-weight: bold;
    cursor: pointer; box-shadow: 0 8px 20px rgba(255, 204, 0, 0.3); transition: transform 0.3s;
}
.see-more-btn:hover { transform: scale(1.05); }

/* --- คอร์สเรียน Grid --- */
.posters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.poster-card {
    background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border);
    border-radius: 24px; overflow: hidden; transition: transform 0.3s; cursor: pointer;
}
.poster-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.4); }
.poster-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.poster-info { padding: 20px; }
.poster-title { font-size: 20px; color: var(--theme-yellow); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* --- Skeleton Loading --- */
.skeleton-bg {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%; animation: loading 1.5s infinite;
}
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- FAB Button --- */
.fab-btn {
    position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px;
    background: var(--theme-yellow); color: var(--theme-blue); border-radius: 50%;
    font-size: 24px; border: none; cursor: pointer; box-shadow: 0 10px 25px rgba(255, 204, 0, 0.4);
    z-index: 9900; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fab-btn:hover { transform: scale(1.1); }

/* --- 🛠️ แก้บัคเมนูด้านข้าง (Side Menu) --- */
.glass-side-menu {
    position: fixed;
    top: 75px; /* ให้อยู่ใต้ Navbar */
    left: -300px; /* ซ่อนไว้ขอบจอซ้าย */
    width: 260px;
    height: calc(100vh - 75px);
    background: rgba(5, 11, 20, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-right: 1px solid var(--glass-border);
    transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 999;
    padding: 20px;
}
.glass-side-menu.active { left: 0; } /* เลื่อนออกมาเมื่อกดปุ่ม */
.user-profile-section { color: white; font-size: 18px; font-weight: bold; margin-bottom: 15px; }
.glass-divider { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 15px 0; }

/* --- 📋 กระดานประกาศ (Glass Board) --- */
.glass-board {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.board-title {
    text-align: center;
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

/* --- 📊 สถิติยอดวิว ยอดแชร์ & ปุ่มแชร์ --- */
.post-stats {
    display: flex; gap: 15px; color: var(--text-secondary);
    font-size: 14px; margin-bottom: 15px; font-weight: 500;
}
.post-stats i { color: var(--theme-lightblue); }

.glass-btn {
    width: 100%; padding: 12px; border-radius: 20px; font-size: 14px; font-weight: bold;
    background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer; transition: all 0.3s; display: flex; justify-content: center; align-items: center; gap: 8px;
}
.glass-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }

/* --- 🔍 หน้าต่าง Modal รายละเอียดโพสต์ --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px);
    display: flex; justify-content: center; align-items: center;
    z-index: 10000; opacity: 1; transition: opacity 0.3s; padding: 20px;
}
.modal-overlay.hidden { opacity: 0; pointer-events: none; }
.modal-content {
    width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto;
    position: relative; padding: 30px;
}
.close-btn {
    position: absolute; top: 15px; right: 15px; background: rgba(255,255,255,0.1);
    border: none; color: white; width: 35px; height: 35px; border-radius: 50%;
    cursor: pointer; font-size: 18px; transition: 0.3s;
}
.close-btn:hover { background: #ff453a; }
.detail-img { width: 100%; border-radius: 16px; margin-bottom: 20px; object-fit: cover; }
.detail-title { color: var(--theme-yellow); margin-bottom: 10px; }
.detail-stats { justify-content: center; font-size: 16px; margin-bottom: 20px; }
.detail-desc { color: white; line-height: 1.6; margin-bottom: 25px; white-space: pre-wrap; }
.share-btn-large { background: var(--theme-blue); border-color: var(--theme-lightblue); font-size: 16px; }
.share-btn-large:hover { background: var(--theme-lightblue); color: #000; }

/* =========================================
   1. แก้ไขเมนู (แอนิเมชัน บนลงล่าง & สกอร์บาร์)
   ========================================= */
.glass-side-menu {
    position: fixed;
    top: -150%; /* ซ่อนไว้ด้านบนจอ */
    left: 20px;
    width: 280px;
    height: auto;
    max-height: calc(100vh - 100px); /* ความยาวปรับตามเนื้อหา แต่ไม่เกินจอ */
    overflow-y: auto; /* เพิ่มสกอร์บาร์เมื่อเนื้อหายาวเกิน */
    background: rgba(5, 11, 20, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    transition: top 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* แอนิเมชันสปริงแนวตั้ง */
    z-index: 999;
    padding: 20px;
}
.glass-side-menu.active {
    top: 85px; /* เลื่อนลงมาใต้ Navbar */
}

.dynamic-text {
    color: #ffffff !important;
    mix-blend-mode: difference;
    position: relative;
    z-index: 1001;
    display: inline-block;
}

/* --- 2. สไตล์เมนูด้านข้าง (ตามภาพตัวอย่าง) --- */
.glass-side-menu {
    background: var(--menu-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    box-shadow: 5px 0 25px rgba(0,0,0,0.1);
}

.menu-category-header {
    color: var(--theme-lightblue);
    font-size: 18px;
    padding: 15px;
    background: transparent;
    user-select: none !important;
    -webkit-user-select: none !important; 
    -moz-user-select: none !important; 
    -ms-user-select: none !important;
}
.menu-category-header:hover { background: var(--menu-hover); }

.menu-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}
.menu-list.open {
    max-height: 1000px; /* เปิดให้ยาวพอที่จะแสดงรายการทั้งหมด */
}

.menu-category-header i.fa-chevron-down {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* เมื่อหมวดหมู่ถูกเปิด (มีคลาส active) ให้หมุนลูกศรชี้ขึ้น (180 องศา) */
.menu-category-header.active i.fa-chevron-down {
    transform: rotate(180deg);
}
.menu-list li a {
    text-decoration: none !important; /* เอาเส้นใต้ออก */
    display: flex; align-items: center; gap: 15px;
    padding: 12px 20px 12px 30px;
    color: var(--text-primary);
    font-size: 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
    user-select: none !important;
    -webkit-user-select: none !important; 
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* เวลาเอาเมาส์ชี้ สว่างขึ้นนิดนึง */
.menu-list li a:hover {
    background: var(--menu-hover);
    filter: brightness(1.2);
    transform: translateX(5px); /* เลื่อนขวานิดๆ ให้ดูมีมิติ */
}

/* หน้าที่กำลังเปิดอยู่ (สว่างที่สุด) */
.menu-list li a.active-menu {
    background: rgba(0, 170, 255, 0.15);
    color: var(--theme-lightblue);
    font-weight: bold;
    border-left: 4px solid var(--theme-lightblue);
    border-radius: 0 12px 12px 0;
}

/* --- 3. หน้าต่างเลือกธีม (Theme Previews) --- */
.theme-options {
    display: flex; gap: 15px; margin-top: 20px;
}
.theme-card {
    flex: 1; border: 2px solid var(--glass-border); border-radius: 16px;
    padding: 15px; text-align: center; cursor: pointer; transition: 0.3s;
    background: var(--menu-bg); color: var(--text-primary);
}
.theme-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.theme-card.selected { border-color: var(--theme-lightblue); box-shadow: 0 0 15px rgba(0, 170, 255, 0.3); }

.preview-box {
    width: 100%; height: 80px; border-radius: 8px; margin-bottom: 10px;
    display: flex; justify-content: center; align-items: center; font-size: 24px;
}
.preview-glass {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative; overflow: hidden;
}
.preview-glass::after {
    content: ''; position: absolute; width: 60%; height: 60%;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); border-radius: 8px;
}
.preview-solid { background: var(--bg-color); border: 1px solid #ccc; }

/* --- 4. ธีมทั่วไป (Solid Theme) --- */
body.theme-solid .glass-card,
body.theme-solid .glass-board,
body.theme-solid .glass-navbar,
body.theme-solid .glass-side-menu {
    background: var(--bg-color) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(128, 128, 128, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

/* =========================================
   3. หัวข้อแคปซูล (Capsule Title)
   ========================================= */
.capsule-title {
    display: inline-block;
    background: rgba(255, 204, 0, 0.15); /* พื้นหลังสีเหลืองโปร่งแสง */
    color: var(--theme-yellow);
    padding: 10px 30px;
    border-radius: 50px; /* ทำเป็นรูปแคปซูล */
    border: 1px solid rgba(255, 204, 0, 0.3);
    font-size: 24px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
}

/* =========================================
   4. บังคับประกาศ 1 แถว 3 รูป (ทุกอุปกรณ์)
   ========================================= */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important; /* บังคับ 3 คอลัมน์เสมอ */
    gap: 15px;
}
.news-item {
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--glass-border);
    cursor: pointer;
}
.news-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: opacity 0.5s ease;
}

/* =========================================
   1. ระบบกระจกใส (ปรับความทึบได้ตามที่ผู้ใช้ตั้งค่า)
   ========================================= */
:root {
    /* ตัวแปรความทึบกระจก (JS จะเป็นตัวเปลี่ยนค่านี้) */
    --user-glass-alpha: 0.15; 
}

/* =========================================
   🌟 Apple VisionOS / iPadOS Glass Effect (แก้ไขใหม่สมบูรณ์)
   (กระจกหนา มีแสงสะท้อนขอบ ไม่มีช่องว่าง)
   ========================================= */

/* 1. กำหนดตัวแปรเริ่มต้น */
/* =========================================
   🌟 Simple Glass Effect (กลับมาใช้แบบเดิมตามที่ต้องการ)
   (กระจกใสเรียบง่าย + แก้บัค Dropdown + แก้บัคโหมดมืด)
   ========================================= */

:root {
    --user-glass-alpha: 0.15; 
    --user-glass-blur: 25px; /* 🟢 ตัวแปรความเบลอเริ่มต้น */
}

body { margin: 0; padding: 0; }

/* ล็อกพื้นหลังให้อยู่กับที่ */
.ambient-background { 
    position: fixed !important; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    margin: 0; 
    z-index: -1; 
    pointer-events: none; 
}

.main-content { padding-top: 95px !important; } 

/* 🎯 บังคับ Navbar ล็อกติดขอบบนเสมอ */
.glass-navbar {
    position: fixed !important;
    top: 0; left: 0; width: 100%; z-index: 1000;
}

/* 🎯 นำกระจกไปใช้กับทุกส่วน */
.glass-navbar, .glass-navbar.scrolled,
.glass-card, .glass-board, .glass-side-menu,
.auth-box, .custom-alert-box,
.form-control, input, select, textarea {
    background: rgba(255, 255, 255, var(--user-glass-alpha)) !important;
    
    /* 🟢 ใช้ตัวแปรความเบลอที่ผู้ใช้ปรับ */
    backdrop-filter: blur(var(--user-glass-blur)) saturate(150%) !important;
    -webkit-backdrop-filter: blur(var(--user-glass-blur)) saturate(150%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important; 
    
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.2), 
        inset 0 -1px 1px rgba(0, 0, 0, 0.02), 
        0 10px 30px rgba(0, 0, 0, 0.1) !important; 
        
    color: var(--text-primary);
}

/* 🎯 แก้ไข Dropdown (select/option) ให้มองเห็นข้อความ */
select option {
    background-color: #ffffff;
    color: #000000;
}

/* 🌙 โหมดมืด (Dark Mode) */
body.dark-mode .glass-navbar, body.dark-mode .glass-navbar.scrolled,
body.dark-mode .glass-card, body.dark-mode .glass-board, body.dark-mode .glass-side-menu,
body.dark-mode .auth-box, body.dark-mode .custom-alert-box,
body.dark-mode .form-control, body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
    background: rgba(15, 23, 42, var(--user-glass-alpha)) !important;
    
    /* 🟢 ย้ำคำสั่งเบลอในโหมดมืด เพื่อป้องกันเบราว์เซอร์แสดงผลเพี้ยน */
    backdrop-filter: blur(var(--user-glass-blur)) saturate(150%) !important;
    -webkit-backdrop-filter: blur(var(--user-glass-blur)) saturate(150%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important;
    
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.3) !important;
        
    color: #ffffff;
}

/* 🎯 แก้ไข Dropdown (select/option) ในโหมดมืด */
body.dark-mode select option {
    background-color: #0f172a !important; /* พื้นหลังสีเข้ม */
    color: #ffffff !important; /* ตัวหนังสือสีขาว */
}

/* 🚫 กรณีผู้ใช้ "ปิด" เอฟเฟกต์กระจก */
body.disable-glass .glass-navbar, body.disable-glass .glass-navbar.scrolled,
body.disable-glass .glass-card, body.disable-glass .glass-board, body.disable-glass .glass-side-menu,
body.disable-glass .auth-box, body.disable-glass .custom-alert-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-color) !important;
    border: 1px solid rgba(128, 128, 128, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

/* ปิดการทำงานของ ::before (ลบขอบบิดเบี้ยวทิ้ง) */
.glass-card::before, .glass-board::before, .glass-side-menu::before, .glass-navbar::before {
    display: none !important;
}

body.theme-minimal .ambient-background {
    display: none !important;
}


#navBrandName {
    color: var(--theme-blue) !important;
    mix-blend-mode: normal !important; 
    text-shadow: none !important;
}
body.dark-mode #navBrandName {
    color: var(--theme-yellow) !important;
}

.live-preview-container {
    width: 100%; height: 150px; border-radius: 16px;
    background: url('../assets/banner.jpg') center/cover; /* ใช้รูปแบนเนอร์เป็นพื้นหลังพรีวิว */
    position: relative; display: flex; justify-content: center; align-items: center;
    margin-bottom: 20px; border: 1px solid var(--glass-border);
    overflow: hidden;
}
.live-preview-glass {
    width: 80%; height: 60%; border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold; font-size: 18px; color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transition: all 0.2s ease;
}

.capsule-title {
    background: rgba(0, 170, 255, 0.1); /* พื้นหลังฟ้าอ่อนๆ */
    color: var(--theme-blue); /* สีน้ำเงินเข้ม */
    border: 1px solid rgba(0, 170, 255, 0.3);
}
body.dark-mode .capsule-title {
    color: #ffffff; /* สีขาวในโหมดมืด */
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* หัวข้อ Section ทั่วไป */
.section-title {
    color: var(--theme-blue) !important;
}
body.dark-mode .section-title {
    color: #ffffff !important;
}

/* =========================================
   4. ปรับปรุงการ์ดโพสต์ (ให้อ่านง่ายโดยไม่ต้องมีเงา)
   ========================================= */
.poster-info {
    padding: 20px;
    color: var(--text-primary) !important; /* ดำในโหมดสว่าง, ขาวในโหมดมืด */
}
.poster-info p, .poster-info span, .poster-info h3 {
    color: var(--text-primary) !important;
}

/* กรณีใช้ธีมสีสัน (Colorful) ให้เบลอกรอบคอร์สเรียนให้หนักขึ้น */
body:not(.theme-minimal):not(.disable-glass) .poster-card {
    backdrop-filter: blur(50px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode:not(.theme-minimal):not(.disable-glass) .poster-card {
    background: rgba(15, 23, 42, 0.3) !important;
}
body:not(.theme-minimal):not(.disable-glass) .poster-info {
    background: transparent !important; /* ให้ความเบลอทะลุขึ้นมา */
}

/* ปรับปรุงปุ่มแชร์ในคอร์สเรียน */
.share-course-btn {
    background: var(--theme-blue) !important;
    color: #ffffff !important;
    border: none !important;
}
body.dark-mode .share-course-btn {
    background: var(--theme-yellow) !important;
    color: var(--theme-blue) !important;
}
body.theme-liquid-glass .poster-info {
    background: transparent; /* ถ้าเปิดกระจกใส ให้โปร่งแสง */
}

.poster-title {
    color: var(--theme-blue);
    font-weight: bold;
}
body.dark-mode .poster-title {
    color: #ffffff;
}

/* =========================================
   5. ปรับปรุงหน้าต่างดูรายละเอียดโพสต์ (Modal)
   ========================================= */
.modal-content {
    background: var(--bg-color) !important; /* บังคับพื้นหลัง Modal ให้เป็นสีทึบ (ขาว/ดำ) เสมอเพื่อให้อ่านง่าย */
    color: var(--text-primary);
}
body.theme-liquid-glass .modal-content {
    background: rgba(255, 255, 255, var(--user-glass-alpha)) !important;
}
body.dark-mode.theme-liquid-glass .modal-content {
    background: rgba(15, 23, 42, var(--user-glass-alpha)) !important;
}

.detail-title {
    color: var(--theme-blue);
    font-size: 24px;
    font-weight: bold;
}
body.dark-mode .detail-title {
    color: #ffffff;
}

.detail-desc {
    color: var(--text-primary); /* ดำในโหมดสว่าง, ขาวในโหมดมืด */
    font-size: 16px;
    line-height: 1.6;
}

.close-btn {
    background: var(--theme-blue);
    color: white;
}
body.dark-mode .close-btn {
    background: rgba(255,255,255,0.2);
}

.theme-toggle-btn {
    width: 100%; padding: 12px; border-radius: 12px; font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(0, 0, 0, 0.05); /* พื้นหลังเทาอ่อนในโหมดสว่าง */
    color: var(--text-primary);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s; margin-bottom: 15px;
}
body.dark-mode .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.1); /* พื้นหลังขาวโปร่งแสงในโหมดมืด */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.theme-toggle-btn:hover { background: rgba(0, 0, 0, 0.1); }
body.dark-mode .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.2); }

#menuBtn { color: #000000 !important; }
body.dark-mode #menuBtn { color: #ffffff !important; }

#userProfileSection, 
#userRoleText {
    color: #000000 !important;
    transition: color 0.3s ease;
}
body.dark-mode #userProfileSection, 
body.dark-mode #userRoleText {
    color: var(--theme-yellow) !important;
}

/* =========================================
   หน้าต่าง Login & Register (Split Screen)
   ========================================= */
.auth-split-box {
    display: flex; width: 100%; max-width: 1000px; gap: 40px;
    align-items: center; justify-content: center;
}
.auth-left, .auth-right {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
}

/* ข้อความต้อนรับด้านซ้าย */
.desktop-welcome {
    background: rgba(255, 255, 255, 0.85) !important; /* ใส่พื้นหลังกระจกสีขาว */
    padding: 30px 40px !important;
    border-radius: 20px !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: var(--theme-blue) !important;
    display: inline-block;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
body.dark-mode .desktop-welcome {
    background: rgba(15, 23, 42, 0.75) !important; /* พื้นหลังกระจกสีมืด */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--theme-yellow) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.mobile-welcome {
    font-size: 24px; color: var(--theme-blue); line-height: 1.4; margin-bottom: 20px; text-align: center; display: none;
}
body.dark-mode .mobile-welcome { color: var(--theme-yellow); }

.desktop-only { display: flex; flex-direction: column; }
.mobile-only { display: none; }

/* จัดปุ่มให้อยู่กึ่งกลางกรอบ */
.btn-center {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
}
.auth-btn {
    width: 80%; /* ไม่เต็มกรอบ แต่อยู่ตรงกลาง */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.desktop-pdpa-box { padding: 25px; max-height: 80vh; display: flex; flex-direction: column; }
.desktop-pdpa-scroll {
    flex-grow: 1; overflow-y: auto; padding: 15px; background: rgba(0, 0, 0, 0.05);
    border-radius: 12px; margin-bottom: 15px; max-height: 350px; color: var(--text-primary);
    font-size: 14px; line-height: 1.6; border: 1px solid var(--glass-border);
}
body.dark-mode .desktop-pdpa-scroll { background: rgba(255, 255, 255, 0.05); }
.desktop-pdpa-actions { display: flex; gap: 10px; }
.desktop-pdpa-actions button { flex: 1; transition: all 0.3s; }
.desktop-pdpa-actions button:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(100%); }

@media (max-width: 768px) {
    .auth-split-box { flex-direction: column; gap: 0; }
    .desktop-only { display: none !important; } /* ซ่อนฝั่งซ้ายบนมือถือ */
    .mobile-only { display: block; } /* แสดงข้อความต้อนรับด้านบน */
    .auth-right { width: 100%; }
}

.floating-line-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #00B900; /* สีเขียว Line */
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    box-shadow: 0 10px 25px rgba(0, 185, 0, 0.4);
    cursor: pointer;
    z-index: 9900;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}
.floating-line-btn:hover {
    transform: scale(1.15);
}

.custom-alert-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center;
    z-index: 100000; /* ให้อยู่บนสุด */
    opacity: 1; transition: opacity 0.3s; padding: 20px;
}
.custom-alert-overlay.hidden { opacity: 0; pointer-events: none; }

.custom-alert-box {
    background: var(--bg-color);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px;
    width: 100%; max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transform: scale(1); transition: transform 0.3s;
}
.custom-alert-overlay.hidden .custom-alert-box { transform: scale(0.8); }

.custom-alert-text {
    color: var(--text-primary); /* ดำในโหมดสว่าง ขาวในโหมดมืด */
    font-size: 18px;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* =========================================
   1. แก้ไขปุ่ม Log In / Log Out แถบบน (ห้ามตกบรรทัด)
   ========================================= */
.nav-right .auth-btn {
    white-space: nowrap !important; /* บังคับให้อยู่บรรทัดเดียวเสมอ */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* ระยะห่างระหว่างไอคอนกับตัวหนังสือ */
    padding: 8px 20px !important;
    width: auto !important; /* ให้ปุ่มขยายตามความยาวตัวหนังสือ */
}

/* =========================================
   2. แก้ไขกล่อง Login / Register ให้สว่างและอ่านง่าย
   ========================================= */
/* --- โหมดสว่าง (Light Mode) --- */
.auth-box {
    background: rgba(255, 255, 255, 0.9) !important; /* พื้นหลังสีขาวสว่าง โปร่งแสงนิดๆ */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important; /* เงาบางๆ ให้กล่องลอยขึ้นมา */
    color: #1a1a1a !important; /* ตัวหนังสือสีดำเข้ม */
}

/* ช่องกรอกข้อมูลในโหมดสว่าง */
.auth-input {
    margin-bottom: 15px !important; /* เว้นระยะห่างระหว่างช่อง 15px */
}
.auth-input::placeholder {
    color: #666666 !important; /* สี Placeholder */
}

/* ลิงก์ด้านล่าง (ลงทะเบียน / กลับหน้าแรก) ในโหมดสว่าง */
.auth-link {
    color: var(--theme-blue) !important; /* สีน้ำเงิน */
    font-weight: bold !important;
}

/* --- โหมดมืด (Dark Mode) --- */
body.dark-mode .auth-box {
    background: rgba(30, 41, 59, 0.85) !important; /* พื้นหลังสีกรมท่าเข้ม */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important; /* ตัวหนังสือสีขาว */
}

/* ช่องกรอกข้อมูลในโหมดมืด */
body.dark-mode .auth-input {
    background: rgba(0, 0, 0, 0.4) !important; /* พื้นหลังช่องกรอกสีดำโปร่งแสง */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important; /* ตัวหนังสือที่พิมพ์เป็นสีขาว */
}
body.dark-mode .auth-input::placeholder {
    color: #aaaaaa !important;
}

/* ลิงก์ด้านล่าง (ลงทะเบียน / กลับหน้าแรก) ในโหมดมืด */
body.dark-mode .auth-link {
    color: var(--theme-yellow) !important; /* สีเหลือง */
}

.main-content {
    width: 95% !important;
    max-width: 1200px !important;
    margin: 0 auto !important; /* บังคับให้อยู่กึ่งกลาง ซ้าย-ขวา เท่ากัน */
    display: block !important;
}

.content-section {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto 40px auto !important; /* จัดกึ่งกลางแต่ละ Section */
}

/* บังคับให้หัวข้อ Section อยู่ตรงกลาง */
.section-title {
    text-align: center !important;
    margin-bottom: 25px !important;
    width: 100%;
}

/* จัดกึ่งกลางกล่องประกาศและคอร์สเรียน */
.capsule-container, .posters-grid {
    justify-content: center !important;
    margin: 0 auto !important;
}

/* =========================================
   แก้ไขกรอบโพสต์คอร์สเรียนให้ชัดเจน (ไม่กลืนกับพื้นหลัง)
   ========================================= */

/* 1. ธีมสีสัน (Colorful) - โหมดสว่าง */
.poster-card {
    border: 1px solid rgba(0, 170, 255, 0.4) !important; /* ขอบสีฟ้าอ่อน */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important; /* เงาบางๆ */
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s, border 0.3s;
}
.poster-card:hover {
    border: 1px solid rgba(0, 170, 255, 0.8) !important; /* ขอบเข้มขึ้นตอนเอาเมาส์ชี้ */
    box-shadow: 0 15px 35px rgba(0, 170, 255, 0.2) !important;
}

/* 2. ธีมสีสัน (Colorful) - โหมดมืด */
body.dark-mode .poster-card {
    border: 1px solid rgba(255, 255, 255, 0.25) !important; /* ขอบสีขาวโปร่งแสง */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .poster-card:hover {
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.1) !important;
}

/* 3. ธีมมินิมอล (Solid) - โหมดสว่าง */
body.theme-minimal .poster-card {
    border: 1px solid rgba(0, 0, 0, 0.15) !important; /* ขอบสีเทาเข้มขึ้นนิดนึง */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

/* 4. ธีมมินิมอล (Solid) - โหมดมืด */
body.dark-mode.theme-minimal .poster-card {
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* ขอบสีเทาสว่าง */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

body.theme-minimal .glass-navbar.scrolled {
    background: var(--bg-color) !important; /* ใช้สีพื้นหลังหลัก (ขาว/ดำ) */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2) !important;
}

.nav-left .icon-btn {
    color: #000000 !important; /* โหมดสว่าง: สีดำ */
}
body.dark-mode .nav-left .icon-btn {
    color: #ffffff !important; /* โหมดมืด: สีขาว */
}

/* =========================================
   แก้ไขแบนเนอร์ให้อยู่กึ่งกลาง ขนาดเท่าเดิม และไม่ทับประกาศ
   ========================================= */
.banner-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 40px !important; /* ดันประกาศลงไป 40px ไม่ให้ทับกัน */
}

.banner-container {
    width: 100% !important;
    max-width: 1200px !important; /* ขนาดกว้างสุดของเว็บ */
    aspect-ratio: 5 / 1 !important; /* บังคับสัดส่วนแนวยาว */
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 0 auto !important; /* จัดกึ่งกลาง */
}

#mainBanner {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* ให้รูปเต็มกรอบพอดี ไม่เบี้ยว */
}

/* =========================================
   1. ไอคอนหมุนโหลดแบบไล่สี (Gradient Spinner)
   ========================================= */
.loading-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; padding: 40px 0;
}
.gradient-spinner {
    width: 50px; height: 50px; border-radius: 50%;
    background: conic-gradient(var(--theme-blue), var(--theme-yellow), var(--theme-blue));
    animation: spin 1s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
}
@keyframes spin { 100% { transform: rotate(360deg); } }
.loading-text { margin-top: 15px; color: var(--theme-blue); font-weight: bold; font-size: 16px; }
body.dark-mode .loading-text { color: var(--theme-yellow); }

/* =========================================
   2. แก้ไขพื้นหลังกล่อง PDPA ให้อ่านง่าย
   ========================================= */
.desktop-pdpa-scroll, .pdpa-scroll-area {
    background: #ffffff !important; /* โหมดสว่าง: พื้นขาว */
    color: #000000 !important; /* ตัวหนังสือดำ */
    border: 1px solid rgba(0,0,0,0.1) !important;
}
body.dark-mode .desktop-pdpa-scroll, body.dark-mode .pdpa-scroll-area {
    background: #000000 !important; /* โหมดมืด: พื้นดำ */
    color: #ffffff !important; /* ตัวหนังสือขาว */
    border: 1px solid rgba(255,255,255,0.2) !important;
}

/* =========================================
   3. รูปภาพหน้าเข้าสู่ระบบ (4:3)
   ========================================= */
.login-welcome-img {
    width: 100%; max-width: 450px; aspect-ratio: 4 / 3;
    object-fit: cover; border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    margin: 0 auto 20px auto; display: block;
}
body.dark-mode .login-welcome-img { box-shadow: 0 15px 35px rgba(0,0,0,0.5); }

/* =========================================
   แก้ไขกล่อง PDPA ให้เป็นสีทึบ (ขาว/ดำ) ทั้งกรอบนอกและกรอบใน
   ========================================= */
/* โหมดสว่าง (Light Mode) */
.desktop-pdpa-box, .pdpa-modal-content {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #dddddd !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}
.desktop-pdpa-scroll, .pdpa-scroll-area {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    color: #000000 !important;
}

/* โหมดมืด (Dark Mode) */
body.dark-mode .desktop-pdpa-box, body.dark-mode .pdpa-modal-content {
    background: #000000 !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
body.dark-mode .desktop-pdpa-scroll, body.dark-mode .pdpa-scroll-area {
    background: #000000 !important;
    border: 1px solid #444444 !important;
    color: #ffffff !important;
}

/* =========================================
   1. เปลี่ยนปุ่ม "เข้าสู่ระบบ" เป็นสีเหลือง
   ========================================= */
#btn-login {
    background-color: var(--theme-yellow) !important;
    color: #1a1a1a !important; /* ตัวหนังสือสีดำให้อ่านชัดบนพื้นเหลือง */
    font-weight: bold;
}

/* =========================================
   2. ปรับแต่งป็อปอัพแจ้งเตือน (Custom Alert) ให้รองรับทุกธีม
   ========================================= */
.custom-alert-box {
    color: var(--text-primary) !important;
}
/* ธีมมินิมอล (Solid) */
body.theme-minimal .custom-alert-box {
    background: var(--bg-color) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(128, 128, 128, 0.2) !important;
}

/* =========================================
   🎯 ปรับแต่ง Custom Alert (แยกอิสระจากค่าที่ผู้ใช้ปรับ)
   ========================================= */

/* 1. กรณีเปิดกระจกใส (Glass Effect ON) */
/* โหมดสว่าง (Light Mode) */
body:not(.disable-glass) .custom-alert-box {
    background: rgba(255, 255, 255, 0.85) !important; /* กระจกขาวโปร่งแสงคงที่ */
    backdrop-filter: blur(25px) saturate(180%) !important; /* ค่าเบลอคงที่ ไม่สน Slider */
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
}
body:not(.disable-glass) .custom-alert-text {
    color: #000000 !important; /* ตัวหนังสือสีดำ */
}

/* โหมดมืด (Dark Mode) */
body.dark-mode:not(.disable-glass) .custom-alert-box {
    background: rgba(15, 23, 42, 0.85) !important; /* กระจกดำ/กรมท่าโปร่งแสงคงที่ */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important;
}
body.dark-mode:not(.disable-glass) .custom-alert-text {
    color: #ffffff !important; /* ตัวหนังสือสีขาว */
}

/* ========================================= */

/* 2. กรณีปิดกระจกใส (Glass Effect OFF) */
/* โหมดสว่าง (Light Mode) */
body.disable-glass .custom-alert-box {
    background: #ffffff !important; /* พื้นทึบสีขาว */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #dddddd !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}
body.disable-glass .custom-alert-text {
    color: #000000 !important; /* ตัวหนังสือสีดำ */
}

/* โหมดมืด (Dark Mode) */
body.dark-mode.disable-glass .custom-alert-box {
    background: #0f172a !important; /* พื้นทึบสีดำ/กรมท่าเข้ม */
    border: 1px solid #333333 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important;
}
body.dark-mode.disable-glass .custom-alert-text {
    color: #ffffff !important; /* ตัวหนังสือสีขาว */
}

/* =========================================
   4. เลย์เอาต์หน้าต่างรายละเอียด (แบ่งซ้าย-ขวา บนคอม/ไอแพด)
   ========================================= */
.detail-split-layout {
    display: flex; flex-direction: column; gap: 20px;
}
.detail-left { width: 100%; }
.detail-right { width: 100%; display: flex; flex-direction: column; }

@media (min-width: 768px) {
    .detail-split-layout { flex-direction: row; align-items: flex-start; }
    .detail-left { flex: 1; position: sticky; top: 0; }
    .detail-right { flex: 1; }
}
.detail-img { cursor: zoom-in; transition: transform 0.3s; }
.detail-img:hover { transform: scale(1.02); }

/* =========================================
   5. ระบบดูรูปภาพเต็มจอ (Fullscreen Viewer)
   ========================================= */
.fullscreen-viewer {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.95); z-index: 999999;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.fullscreen-viewer.active { opacity: 1; pointer-events: auto; }
.fullscreen-viewer img {
    max-width: 95%; max-height: 95%; object-fit: contain;
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.fullscreen-close {
    position: absolute; top: 20px; right: 30px;
    color: white; font-size: 40px; cursor: pointer; transition: 0.3s;
}
.fullscreen-close:hover { color: var(--theme-yellow); transform: scale(1.1); }

#global-page-loader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--bg-color); z-index: 990; 
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#global-page-loader.hidden {
    opacity: 0; visibility: hidden;
}