* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Kanit', sans-serif;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body, html {
    width: 100%; height: 100%;
    overflow: hidden; background-color: #000;
    display: flex; justify-content: center; align-items: center;
    position: fixed;
}

.main-app {
    position: relative;
    width: 100vw; height: 100vh;
    max-width: 430px; max-height: 932px; 
    overflow: hidden; background: #000;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

.bg-slider {
    display: flex; width: 100%; height: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; position: absolute;
    top: 0; left: 0; z-index: 1;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.bg-slider::-webkit-scrollbar { display: none; }
.bg-slider:active { cursor: grabbing; }

.slide-item {
    min-width: 100%; height: 100%;
    scroll-snap-align: start;
    flex-shrink: 0;
    pointer-events: none; /* ยอมให้ event ไปถึงตัว slider */
}

.slide-img, .slide-video {
    width: 100%; height: 100%;
    object-fit: cover; background-size: cover; background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-radius 0.6s;
}

.is-scrolling .slide-img, 
.is-scrolling .slide-video {
    transform: scale(0.85);
    border-radius: 40px;
}

.img-1 { background-image: url('https://img2.pic.in.th/03f723e5c85ee31d8f.jpg'); }
.img-2 { background-image: url('https://img5.pic.in.th/file/secure-sv1/028ae9347628b78e20.jpg'); }
.img-3 { background-image: url('https://img2.pic.in.th/012412a82cdfeda5cd.jpg'); }
.img-4 { background-image: url('https://img2.pic.in.th/05efb10ef1e48fdcfc.jpg'); }
.img-5 { background-image: url('https://img5.pic.in.th/file/secure-sv1/048064cad15f3d6e24.jpg'); }

.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 100%);
    pointer-events: none; z-index: 2;
}

.ui-content {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; display: flex; flex-direction: column;
    justify-content: space-between; padding: 40px 25px 35px;
    pointer-events: none;
}

header, .bonus-box, .action-area, .btn-register, .footer-links a { pointer-events: auto; }

header { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 28px; font-weight: 800; font-style: italic; }
.logo .mnl { color: #FF8C00; }
.logo .num { color: #FFFFFF; }

.bonus-box {
    background: rgba(110, 0, 111, 0.4); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 25px; padding: 25px 20px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    margin-bottom: 25px; text-align: center;
    min-height: 150px; display: flex; flex-direction: column; justify-content: center;
}

.bonus-box h1 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.bonus-box h1 b { color: #FAFF00; }
.bonus-box p { color: #fff; font-size: 15px; line-height: 1.4; }

.btn-register {
    width: 100%; background: linear-gradient(180deg, #FAFF00 0%, #ffe017 50%);
    padding: 5px; border-radius: 10px; text-decoration: none;
    display: block; text-align: center;
    animation: button-bounce 2s infinite ease-in-out;
}

.btn-register strong { display: block; font-size: 30px; color: #000; font-weight: 600; }
.btn-register span { font-size: 13px; color: #333; font-weight: 600; }

.btn-register strong { 
    display: block; 
    font-size: 30px; 
    color: #000; 
    font-weight: 600; 
    /* margin-bottom: 5px;  <-- ถ้าใส่ตรงนี้ จะถักถางตัวล่างลงไปอีก */
}

.btn-register span { 
    display: block; /* เพิ่มตัวนี้เพื่อให้สั่ง margin ได้แม่นยำ */
    font-size: 13px; 
    color: #333; 
    font-weight: 600; 
    margin-top: -5px; /* <-- ใส่ค่าติดลบเพื่อขยับข้อความเล็กขึ้นไปหาตัวใหญ่ */
}

@keyframes button-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.footer-links { display: flex; justify-content: space-around; margin-top: 25px; }
.footer-links a { color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; }

.menu-top { 
    display: flex; 
    gap: 15px; /* เพิ่มระยะห่างระหว่างคำเล็กน้อยให้ดูสบายตาขึ้น */
}

.menu-top span { 
    color: #ffffff; /* เปลี่ยนเป็นสีขาว */
    font-size: 11px; 
    font-weight: 800; /* ปรับให้ตัวหนาขึ้น */
    letter-spacing: 1px; 
    text-shadow: 0 0 5px rgba(0,0,0,0.5); /* เพิ่มเงาเล็กน้อยเพื่อให้ชัดเจนบนพื้นหลังทุกแบบ */
}