:root {
            --bg-dark: #0d1117;
            --container-bg: #161b22;
            --border-color: #30363d;
            --text-primary: #c9d1d9;
            --text-secondary: #8b949e;
            --accent-color: #58a6ff;
            --accent-hover: #79c0ff;
            --shadow-color: rgba(0, 0, 0, 0.4);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        @keyframes move-blob-1 { 0%{transform:translate(0,0)} 50%{transform:translate(300px,150px)} 100%{transform:translate(0,0)} }
        @keyframes move-blob-2 { 0%{transform:translate(0,0)} 50%{transform:translate(-200px,-100px)} 100%{transform:translate(0,0)} }
        @keyframes move-blob-3 { 0%{transform:translate(0,0)} 50%{transform:translate(100px,-250px)} 100%{transform:translate(0,0)} }
        
        @keyframes twinkle { 0%{opacity:0.2} 50%{opacity:0.8} 100%{opacity:0.2} }
        @keyframes slide-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        
        /* --- (แก้ไข) เพิ่ม Keyframes สำหรับ Fade Animation --- */
        @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

        body {
            font-family: 'Kanit', sans-serif;
            min-height: 100vh;
            background-color: var(--bg-dark);
            color: var(--text-primary);
            display: flex; justify-content: center; align-items: center;
            padding: 2rem;
            overflow: hidden;
        }

        .background-container {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
        }
        .aurora-bg {
            position: absolute; top:0; left:0; width:100%; height:100%;
            filter: blur(120px); opacity: 0.7;
        }
        .blob { position: absolute; border-radius: 50%; }
        .blob.one { width: 400px; height: 400px; top: -100px; left: -100px; background: rgba(88,166,255,0.4); animation: move-blob-1 20s infinite alternate; }
        .blob.two { width: 300px; height: 300px; bottom: -50px; right: -50px; background: rgba(139,92,246,0.4); animation: move-blob-2 18s infinite alternate; }
        .blob.three { width: 250px; height: 250px; top: 50%; left: 40%; background: rgba(34,197,94,0.3); animation: move-blob-3 22s infinite alternate; }
        
        .stars-bg, .stars-bg-2 {
            position: absolute; top:0; left:0; width:100%; height:100%;
            background: transparent;
            animation: twinkle 5s infinite linear;
        }
        .stars-bg-2 { animation-duration: 8s; animation-delay: 2s; }
        .stars-bg:after, .stars-bg-2:after {
            content: "";
            position: absolute;
            width: 1px; height: 1px;
            background: white;
            box-shadow: 79vw 26vh 1px, 6vw 42vh 0px, 9vw 3vh 0px, 33vw 40vh 1px, 65vw 8vh 1px, 86vw 33vh 1px, 3vw 98vh 0px,
                        15vw 55vh 0px, 50vw 80vh 1px, 95vw 45vh 0px, 20vw 10vh 1px, 80vw 70vh 0px, 5vw 90vh 1px;
        }

        .portfolio-container {
            display: flex; width: 100%; max-width: 1200px;
            height: 80vh; max-height: 700px;
            background-color: rgba(22, 27, 34, 0.8);
            backdrop-filter: blur(12px);
            border-radius: 20px; border: 1px solid var(--border-color);
            box-shadow: 0 20px 50px var(--shadow-color);
            overflow: hidden;
            opacity: 0;
            animation: slide-in 1s 0.2s ease-out forwards;
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .portfolio-container.page-exit { opacity: 0; transform: scale(0.95); }

        .spotlight-container { flex-basis: 65%; display: flex; flex-direction: column; position: relative; }
        .project-list-container { flex-basis: 35%; padding: 2rem 1rem 2rem 2rem; overflow-y: auto; border-left: 1px solid var(--border-color); background-color: rgba(13, 17, 23, 0.5); }
        
        .spotlight-image-wrapper { flex-grow: 1; overflow: hidden; position: relative; }
        #spotlight-image { width: 100%; height: 100%; object-fit: contain; }
        
        /* --- (แก้ไข) เพิ่มคลาสสำหรับควบคุมอนิเมชั่น Fade --- */
        #spotlight-image.fading {
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }
        
        .spotlight-info { padding: 2rem; background: linear-gradient(to top, rgba(22, 27, 34, 1), transparent); position: absolute; bottom: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; }
        #spotlight-title { font-size: 1.75rem; font-weight: 700; overflow: hidden; }
        .char { display: inline-block; transform: translateY(110%); transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); }

        #spotlight-link {
            display: inline-block; background-color: var(--accent-color);
            color: var(--bg-dark); text-decoration: none;
            padding: 0.75rem 1.5rem; border-radius: 10px;
            font-weight: 700; transition: background-color 0.3s ease;
        }
        #spotlight-link:hover { background-color: var(--accent-hover); }
        .list-header {
            font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem;
            padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);
        }
        .project-list-item {
            padding: 1rem; margin-bottom: 1rem; border-radius: 10px;
            cursor: pointer; transition: background-color 0.3s ease;
            color: var(--text-secondary);
        }
        .project-list-item:hover { background-color: rgba(88, 166, 255, 0.1); color: var(--text-primary); }
        .project-list-item.active { background-color: var(--accent-color); color: var(--bg-dark); font-weight: 500; }
        
        /* --- (แก้ไข) เพิ่ม CSS สำหรับ Custom Scrollbar --- */
        .project-list-container::-webkit-scrollbar {
            width: 8px;
        }
        .project-list-container::-webkit-scrollbar-track {
            background: transparent;
        }
        .project-list-container::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 10px;
            border: 2px solid var(--container-bg);
        }
        .project-list-container::-webkit-scrollbar-thumb:hover {
            background-color: var(--text-secondary);
        }

        /* === (แก้ไข) ส่วนของการทำ Responsive Design ให้สวยงาม === */
@media (max-width: 992px) {
    body {
        padding: 0; /* สำหรับหน้าจอมือถือ ให้ container เต็มจอ */
    }

    .portfolio-container {
        flex-direction: column; /* เปลี่ยนเป็นแนวตั้ง */
        height: 100vh;
        max-height: none;
        border-radius: 0;
        border: none;
    }

    .spotlight-container {
        height: 60vh; /* ให้ส่วนแสดงผลหลักสูง 60% ของหน้าจอ */
    }
    
    .spotlight-info {
        /* ลด padding ลงเล็กน้อยสำหรับจอแท็บเล็ต */
        padding: 1.5rem;
    }

    #spotlight-title {
        /* ลดขนาดฟอนต์หัวข้อหลัก */
        font-size: 1.5rem;
    }

    .project-list-container {
        flex-basis: auto; /* ไม่ต้องกำหนด flex-basis */
        height: 40vh; /* ให้ส่วนรายการสูง 40% ของหน้าจอ */
        border-left: none;
        border-top: 1px solid var(--border-color);
        /* ปรับ padding ให้เหมาะสม */
        padding: 1.5rem 1rem;
    }
    
    .list-header {
        /* ลดขนาดฟอนต์หัวข้อรายการ */
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
}

/* --- เพิ่มการปรับปรุงสำหรับหน้าจอมือถือที่เล็กลงมาอีก --- */
@media (max-width: 768px) {
    .spotlight-info {
        flex-direction: column; /* จัดเรียง Title และปุ่มในแนวตั้ง */
        align-items: flex-start; /* จัดชิดซ้าย */
        gap: 1rem; /* เพิ่มช่องว่างระหว่าง Title และปุ่ม */
    }

    #spotlight-title {
        font-size: 1.3rem; /* ลดขนาดฟอนต์ลงอีกสำหรับจอมือถือ */
    }

    #spotlight-link {
        /* ลดขนาดปุ่มเล็กน้อย */
        padding: 0.6rem 1.2rem;
    }
    
}
        /* --- (อัปเดต) CSS สำหรับ Dropdown UI ใหม่ --- */

        /* สไตล์พื้นฐานของทุกไอเทมในลิสต์ */
        .project-list-item {
            padding: 12px 15px;
            border-radius: 6px;
            margin-bottom: 5px;
            transition: background-color 0.3s ease, color 0.3s ease;
            cursor: pointer;
        }

        .project-list-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* คอนเทนเนอร์ของ Dropdown */
        .project-dropdown-container {
            position: relative; /* สำคัญมากสำหรับเส้นเชื่อม */
            border-radius: 6px;
            transition: background-color 0.3s ease;
        }

        /* สไตล์เมื่อ Dropdown ถูกเปิด หรือมีรายการย่อยถูกเลือก */
        .project-dropdown-container.open,
        .project-dropdown-container.active {
            background-color: rgba(255, 255, 255, 0.05);
        }


        /* --- เส้นเชื่อมแนวตั้ง (Visual Connector) --- */
        .project-dropdown-container::before {
            content: '';
            position: absolute;
            left: 21px; /* จัดตำแหน่งให้อยู่กึ่งกลางของ padding */
            top: 45px; /* เริ่มหลังไอเทมหลัก */
            bottom: 10px;
            width: 2px;
            background-color: rgba(255, 255, 255, 0.15);
            border-radius: 2px;
            transform: scaleY(0); /* ซ่อนไว้ในตอนแรก */
            transform-origin: top;
            transition: transform 0.4s ease;
        }

        /* เมื่อ Dropdown เปิด ให้เส้นเชื่อมขยายออก */
        .project-dropdown-container.open::before {
            transform: scaleY(1);
        }


        /* ลิสต์ของรายการย่อย */
        .sub-project-list {
            padding-left: 20px; /* ขยับรายการย่อยเข้ามา */
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out;
        }

        .project-dropdown-container.open .sub-project-list {
            max-height: 500px;
        }

        /* --- อนิเมชันของรายการย่อย (Stagger Animation) --- */
        .sub-item {
            position: relative;
            padding-left: 25px;
            opacity: 0; /* ซ่อนไว้ตอนแรก */
            transform: translateX(-15px); /* ขยับไปทางซ้ายเล็กน้อย */
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        /* เมื่อ Dropdown เปิด ให้รายการย่อยแสดงผล */
        .project-dropdown-container.open .sub-item {
            opacity: 0.7;
            transform: translateX(0);
        }

        .project-dropdown-container.open .sub-item:hover {
            opacity: 1;
        }

        /* --- สไตล์เมื่อ Active หรือถูกเลือก --- */

        /* สำหรับไอเทมปกติที่ถูกเลือก */
        .project-list-item.active:not(.dropdown-toggle) {
            background-color: rgba(90, 150, 255, 0.2);
            font-weight: 500;
            color: #fff;
        }

        /* สำหรับรายการย่อยที่ถูกเลือก */
        .sub-item.active {
            opacity: 1;
            font-weight: 500;
            color: #fff;
        }

        /* เพิ่มแถบ Indicator ด้านซ้ายของรายการย่อยที่ถูกเลือก */
        .sub-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 70%;
            width: 4px;
            background-color: #87CEEB; /* สีฟ้า Sky Blue */
            border-radius: 4px;
        }


        /* ลูกศรชี้ลงของ Dropdown */
        .dropdown-toggle .dropdown-arrow {
            transition: transform 0.3s ease;
        }

        .project-dropdown-container.open .dropdown-toggle .dropdown-arrow {
            transform: rotate(180deg);
        }
        /* --- จบส่วน CSS อัปเดต --- */