@charset "utf-8";
/* CSS Document */

/* กำหนดสีธีมและสไตล์หลัก */
        :root {
            --color-primary: #ec4899; /* Pink-500 for Love */
            --color-secondary: #ffcc00; /* Amber-300 */
            --color-bg-dark: #1f2937; /* Gray-800 */
            --color-card-back: #4a148c; /* Red-500 for Love cards */
        }
	
		html {
			min-height: 100vh;
		}
        
        body {
            font-family: 'Poppins', 'Noto Sans Thai', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
			background: linear-gradient(to bottom, #0f0c29, #302b63, #4a148c); /*var(--color-bg-dark); */
			background-image: url('/template/assets/images/bg.jpg');
			background-attachment: fixed;
			background-size: cover; /* contain */
			background-position: center center;
			background-repeat: no-repeat;
			top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
			z-index: -1; /*ให้ภาพอยู่ด้านหลังเนื้อหา*/
			min-height: 100vh;
            overflow-x: hidden;
        }
		
		.logo-container {
		  display: flex;
		  justify-content: center;
		  padding-top: 2rem;
		}

		.logo-container img {
		  width: 150px;
		}
	
		@media (max-width: 600px) {
			.logo-container img {
		  		width: 130px;
			}
		}

		.mt-15 {
			margin-top: 15px;
		}

		.mt-20 {
			margin-top: 20px;
		}
		
		.mb-15 {
			margin-bottom: 15px;
		}

		.mb-20 {
			margin-bottom: 20px;
		}

		/* กำหนดสีหลัก (Mystical Gold & Purple) */
:root {
    --color-dark-base: #0B0014; /* ดำเข้ม */
    --color-primary-purple: #5A189A; /* ม่วงหลัก */
    --color-accent-pink: #E040FB; /* ชมพูอมม่วง */
    --color-gold-highlight: #FFD24D; /* ทองสว่าง */
    --color-text-light: #F0F0F0;
}

/* --- Base & Body --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
	
	/* --- Hero Section --- */
.hero-section {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(11, 0, 20, 0.9), rgba(90, 24, 154, 0.4)), url('/template/assets/images/bg_01.png') no-repeat center center/cover;
}

.hero-section h2 {
    color: var(--color-gold-highlight);
    margin-bottom: 5px;
}

.hero-section p {
    color: var(--color-accent-pink);
    margin-bottom: 30px;
}

.cta-button {
    padding: 15px 40px;
    box-shadow: 0 8px 20px rgba(224, 64, 251, 0.6);
    transition: transform 0.3s, background-color 0.3s;
	color: #FFFFFF;
}

.cta-button:hover, .cta-button:visited, .cta-button:active {
    transform: translateY(-5px);
	color: #FFFFFF;
}

/* Card UI (Content Grid) */
.featured-services {
    padding: 100px 20px;
    margin: 0 auto;
}

.featured-services h3 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-gold-highlight);
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px;
}

.info-card {
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s, border-color 0.3s;
    text-align: center;
	background: linear-gradient(135deg, rgba(11, 0, 20, 0.9), rgba(90, 24, 154, 0.4)), url('/template/assets/images/bg_02.jpg') no-repeat center center/cover;
}

.info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(224, 64, 251, 0.3);
}

.info-card h4 {
    color: var(--color-accent-pink);
    margin-bottom: 10px;
}

.card-link {
    display: inline-block;
    margin-top: 15px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
	transition: transform 0.3s, background-color 0.3s;
	color: #FFFFFF;
}

.card-link:hover, .card-link:visited, .card-link:active {
	box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
	color: #FFFFFF;
}

/* --- Footer (Center) --- */
.main-footer {
    text-align: center;
    padding: 25px 20px;
    background-color: var(--color-primary-purple);
    /*border-top: 5px solid var(--color-gold-highlight);*/
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.footer-content p {
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 1.0);
}

@media (max-width: 600px) {
			.footer-content p {
				font-size: 0.7rem;
			}
		}

.social-links a {
    color: var(--color-gold-highlight);
    font-size: 1.8rem;
    margin: 0 15px;
    transition: color 0.3s, transform 0.3s;
}

.social-links a:hover {
    color: var(--color-accent-pink);
    transform: scale(1.2);
}

        /* สไตล์ Back Card */
        .back-card {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 1.0rem; /* 0.75rem rounded-xl */
            border: 3px solid var(--color-secondary);
            background-color: var(--color-card-back);
            background-image: url('/template/assets/images/card/backcard.png'); /* ใช้ backcard.jpg */
            background-size: cover;
            background-position: center;
            /*box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(255,255,255,0.3);*/
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s ease-in-out, box-shadow 0.3s;
            transform-style: preserve-3d;
        }

        .back-card:hover {
            transform: translateY(-8px) scale(1.03); /* เพิ่มการยกขึ้นเล็กน้อย */
            box-shadow: 0 /*18*/ 10px /*36*/ 15px rgba(0,0,0,0.7), inset 0 0 15px rgba(255,255,255,0.5);
        }

        /* สไตล์สำหรับแผงไพ่ที่ต้องการ Scroll Bar */
        .card-carousel {
            white-space: nowrap; 
            overflow-x: auto; /* ทำให้เกิด Scroll Bar แนวนอน */
			padding-top: 1.0rem;
			padding-left: 1.0rem;
			padding-right: 1.0rem;
            padding-bottom: 1.5rem; /* เพิ่มพื้นที่สำหรับ Scroll Bar */
            
            /* Custom Scroll Bar Styling (Webkit - Chrome, Safari) */
            &::-webkit-scrollbar {
                height: 12px;
            }

            &::-webkit-scrollbar-track {
				background-color: #1f1437; /* Darker track */
                /*background: #374151;*/ /* Gray-700 */
                border-radius: 10px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: var(--color-primary); /* Pink-500 */
                border-radius: 10px;
                border: 3px solid #374151;
            }

            /* Custom Scroll Bar Styling (Firefox) */
            scrollbar-width: /*thin*/ auto !important;
            scrollbar-color: var(--color-primary) #374151;
        }
        /* Custom scrollbar styling */
        .scroll-container::-webkit-scrollbar {
            height: 8px;
        }
        .scroll-container::-webkit-scrollbar-thumb {
            background-color: #6d28d9; /* Indigo thumb */
            border-radius: 4px;
        }
        .scroll-container::-webkit-scrollbar-track {
            background-color: #1f1437; /* Darker track */
        }
		.w-48 {
    		width: 10rem !important;
		}
		.h-72 {
    		height: 16rem !important;
		}
		.shadow-2xl {
    		/*--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    		--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);*/
			box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8), 0 5px 15px rgba(0, 0, 0, 0.5) !important;
		}
		.p-6 {
    		padding-top: 1.0rem !important;
			padding-left: 1.0rem !important;
			padding-right: 1.0rem !important;
			padding-bottom: 1.5rem !important;
		}
		.bg-gray-700\/50 {
    		/*background-color: rgb(55 65 81 / 0.5) !important;*/
    		--tw-bg-opacity: 1 !important;
    		background-color: rgb(45 7 63 / var(--tw-bg-opacity, 1)) !important;
		}
		.border-pink-700 {
   			--tw-border-opacity: 1 !important;
    		border-color: rgb(190 24 93 / var(--tw-border-opacity, 1)) !important;
		}
		.border-4 {
    		border-width: 4px !important;
		}
		.rounded-3xl {
    		border-radius: 1.5rem !important;
		}
		.rounded-xl {
    	border-radius: 0.75rem;
		}
		.border-t-4 {
    		border-top-width: 4px;
		}
		.border-t-5 {
    		border-top-width: 5px;
		}
		.border-yellow-500 {
    		--tw-border-opacity: 1;
    		border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
		}
	
	
		/* Modal Backdrop (รวม Blur Effect) */
        #menuModal {
            z-index: -1; /* หรือค่าที่สูงกว่าเนื้อหาหลัก */
    		opacity: 0;
    		visibility: hidden;
            pointer-events: none;
            display: flex; 
            justify-content: center; 
            align-items: center; 
            background-color: rgba(0, 0, 0, 0); 
            transition: background-color 0.4s ease; 
            backdrop-filter: blur(0px); /* เริ่มต้นไม่เบลอ */
        }

        /* เมื่อเมนูเปิด */
        #menuModal.open {
			z-index: 1000; /* หรือค่าที่สูงกว่าเนื้อหาหลัก */
            opacity: 1;
			visibility: visible;
            pointer-events: auto;
            background-color: rgba(0, 0, 0, 0.4); 
            backdrop-filter: blur(10px); /* เพิ่มความเบลอ (Magic/Dreamy Effect) */
        }

        /* Menu Content Wrapper (Card หลัก) */
        #menuContentWrapper {
            width: 90vw; 
            max-width: 380px; 
            /* แก้ไขตามที่ร้องขอ: กำหนดความสูงคงที่ที่ 70vh และจำกัดสูงสุดที่ 500px */
            height: 70vh; 
            max-height: 500px; 
            
            position: relative;
            overflow: hidden; /* เพื่อซ่อนส่วนที่เลื่อนออกไป */
            
            /* Pop-up Transition: Scale and Opacity */
            transform: scale(0.95); 
            opacity: 0;
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1.2), opacity 0.3s;
            
            /* [Magic Theme] Glassmorphism Styling (ม่วง, ชมพู) */
            background-color: rgba(60, 20, 80, 0.9); /* Dark Purple Glass */
            border-radius: 20px; /* โค้งมนมากขึ้น */
            padding: 25px; /* เพิ่ม Padding */
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 100, 200, 0.4); /* เงาลึกขึ้นและมีแสงชมพูเรืองๆ */
            border: 1px solid rgba(255, 192, 203, 0.6); /* Light Pink Border */
        }

        /* เมื่อเมนูเปิด (สำหรับ Pop-up) */
        #menuModal.open #menuContentWrapper {
            transform: scale(1); 
            opacity: 1; 
        }

        /* สไตล์ของแต่ละ Level ที่ซ้อนทับกัน (Absolute Position) */
        .menu-level {
            width: 100%;
            /* กลับไปใช้ height 100% เพื่อให้ยืดเต็มพื้นที่ของ Wrapper และให้ Flexbox ภายในทำงาน */
            height: 100%; 
            position: absolute;
            top: 0;
            left: 0;
            padding: 25px; 
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
            
            /* FIX 2: ใช้ Flexbox ในการจัดการพื้นที่แนวตั้ง */
            display: flex;
            flex-direction: column;
            
            /* FIX 2: ปิด Scrollbar ด้านนอก/ระดับ Level นี้ */
            overflow-y: hidden; 
        }

        /* เมนูหลักเริ่มต้นให้แสดงผล */
        .menu-level.main {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(0);
        }

        /* Transition: เมื่อเมนูหลักถูกซ่อน */
        .menu-level.slide-out {
            opacity: 0;
            pointer-events: none;
            transform: translateX(-20px); /* เลื่อนออกไปทางซ้ายเล็กน้อย */
        }

        /* Transition: เมื่อเมนูย่อยเข้ามาแสดงผล */
        .menu-level.slide-in {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(0); /* เลื่อนเข้ามาจากด้านขวาเล็กน้อย */
        }
        
        /* สไตล์สำหรับ Scrollbar ภายในเมนู */
        .menu-scroll-area {
            /* FIX 3: ให้พื้นที่นี้ขยายเพื่อกินพื้นที่ที่เหลือทั้งหมด (Header/Footer) */
            flex-grow: 1; 
            /* FIX 3: กำหนด height เป็น 0 เพื่อให้ flex-grow ทำงานได้ถูกต้องเมื่อมี overflow */
            height: 0; 
            overflow-y: auto;
            padding-right: 5px;
            margin-top: 10px;
        }
        
        /* ปรับปรุงระยะห่างของรายการเมนู */
        .menu-item {
            font-family: 'Poppins', 'Noto Sans Thai', sans-serif;
            padding: 14px 18px; /* เพิ่ม Padding */
            margin-bottom: 10px; /* เพิ่ม Margin */
            border-radius: 12px; /* โค้งมนมากขึ้น */

            cursor: pointer;
            transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* เงาเข้มขึ้น */
            color: #f8f8f8; /* Off-white for text */
            background-color: rgba(255, 255, 255, 0.1); /* พื้นหลังโปร่งแสงสำหรับรายการ */
            border: 1px solid rgba(255, 255, 255, 0.15); /* ขอบอ่อนๆ */
        }

        /* [Magic Theme] Hover State ของรายการเมนู */
        .menu-item:hover {
            background-color: rgba(255, 100, 200, 0.25); /* Pinkish hover effect */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); 
            border-color: rgba(255, 100, 200, 0.4);
        }

        /* [Magic Theme] สีของหัวข้อและปุ่มควบคุม */
        .menu-level h1, .menu-level h2 {
            color: #FFD700; /* Gold Headings */
            text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); /* เรืองแสงเล็กน้อย */
        }
        
        .menu-level .text-gray-500 { /* ปุ่มปิด (X) */
            color: #FFD700; /* Gold */
            transition: color 0.15s;
        }
        .menu-level .text-gray-500:hover {
            color: #fff; /* White Hover */
        }
        
        /* [Magic Theme] สีของปุ่มย้อนกลับ (Back Button) ในเมนูย่อย */
        .menu-level button.text-indigo-600 {
            color: #FFD700; /* Gold Arrow */
            transition: color 0.15s;
        }
        .menu-level button.text-indigo-600:hover {
            color: #fff; /* White Hover */
        }

        /* [Magic Theme] สีของลูกศร (Chevron) และไอคอนในรายการ */
        .menu-item .fa-chevron-right, .menu-item .fa-arrow-left {
            color: #FFD700; /* Gold Icon */
        }

        /* [Magic Theme] สีเส้นแบ่ง (Border-bottom) */
        .border-b {
            border-color: rgba(255, 215, 0, 0.4) !important; /* Gold divider */
        }

        /* [Magic Theme] จัดการกับ Class สีเดิมเพื่อให้เป็นสีตามธีม */
        .menu-item.bg-indigo-50, .menu-item.bg-green-50, 
        .menu-item.bg-red-50, .menu-item.bg-yellow-50, 
        .menu-item.bg-white {
            background-color: rgba(255, 255, 255, 0.1); /* Unified background for items */
            color: #f8f8f8; /* Off-white text */
        }

        .menu-item.bg-indigo-50:hover, .menu-item.bg-green-50:hover, 
        .menu-item.bg-red-50:hover, .menu-item.bg-yellow-50:hover, 
        .menu-item.bg-white:hover {
            background-color: rgba(255, 100, 200, 0.25); /* Pinkish hover effect */
        }

        .menu-item.text-indigo-800, .menu-item.text-green-700, 
        .menu-item.text-red-700, .menu-item.text-yellow-700, 
        .menu-item.text-gray-700 {
            color: #f8f8f8; /* Unified Off-white Text */
        }

        /* Custom Scrollbar Styling (Optional) */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.6); /* Gold */
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #FFD700; /* Brighter Gold */
        }

		.rounded-xxl {
			border-radius: 2.0rem;
		}
	
		.disable-right-click {
		  pointer-events: none;
		}

		.animate-float {
			animation: float 3s 
			ease-in-out infinite;
	}