/* กำหนดตัวแปรสีสำหรับ Neon Effect (ใช้ในกรณีที่ไม่ได้ใช้ Tailwind Config) */
:root {
    --electric-blue: #00FFFF; 
    --shadow-color: #0077FF; /* Blue Glow */
}

/* 1. Neon Glow Effect for Text (Hero Section H1) */
.text-shadow-neon {
    text-shadow: 0 0 7px var(--electric-blue),
                 0 0 15px var(--shadow-color),
                 0 0 25px rgba(0, 119, 255, 0.5); /* Layer 3: wider soft glow */
}

.text-shadow-neon-subtle {
    text-shadow: 0 0 3px var(--electric-blue); 
}

/* 2. Logo Glow */
.logo-neon-glow {
    text-shadow: 0 0 5px var(--electric-blue);
}


/* 3. Style for Navigation Links */
.nav-link, .mobile-nav-link {
    font-weight: 500; /* Medium */
    letter-spacing: 0.05em; /* Tracking Widest */
    transition: color 0.3s, text-shadow 0.3s;
}

.nav-link:hover, .mobile-nav-link:hover {
    color: var(--electric-blue);
    text-shadow: 0 0 5px var(--electric-blue); /* Subtle Glow on Hover */
}


/* 4. Neon Glow Button Effect */
.btn-neon-glow {
    /* ใช้สีฟ้าอ่อนเป็นพื้นหลังปุ่ม */
    border: 2px solid var(--electric-blue);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.7); /* Neon Glow */
    transition: box-shadow 0.4s ease-in-out, transform 0.3s;
}

.btn-neon-glow:hover {
    box-shadow: 0 0 25px rgba(0, 255, 255, 1);
    transform: translateY(-2px); /* Lift up effect */
}


/* 5. Feature Card Style (Holographic Look) */
.feature-card {
    background-color: #1a1a1a; /* Darker BG */
    border: 1px solid var(--electric-blue);
    padding: 2.5rem;
    border-radius: 1rem; 
    transition: transform 0.4s, box-shadow 0.4s;
    /* สร้างขอบแบบ Holographic */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.feature-card:hover {
    transform: translateY(-8px); /* Lift up prominently on hover */
    box-shadow: 0 15px 30px rgba(0, 255, 255, 0.5); 
    background-color: #202020; /* Subtle change on hover */
}

/* 6. Detail Card for Sub-Menus */
.detail-card {
    background-color: #1a1a1a;
    padding: 2rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s;
}

.detail-card:hover {
    background-color: #1e1e1e;
}

/* 7. Image Neon Glow Filter */
.logo-filter-neon {
    /* ใช้ filter: drop-shadow เพื่อจำลอง Neon Glow รอบรูปภาพ */
    filter: drop-shadow(0 0 5px var(--electric-blue)) 
            drop-shadow(0 0 10px rgba(0, 119, 255, 0.5));
    transition: filter 0.3s ease-in-out;
}

.logo-filter-neon:hover {
    filter: drop-shadow(0 0 8px var(--electric-blue)) 
            drop-shadow(0 0 15px var(--shadow-color));
}

/* เพิ่ม Padding ด้านล่างให้เมนูหลักที่มี Dropdown เพื่อให้ Dropdown มีพื้นที่เชื่อมต่อ */
.nav-link {
    /* ... (โค้ดเดิม) ... */
    padding-bottom: 0.5rem; /* เพิ่มช่องว่างด้านล่าง 0.5rem */
}