* {
    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;
}

.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 {
    /* 1. ส่วนสีพื้นหลังภายในกล่อง - ปรับให้เข้มขึ้นเล็กน้อยเพื่อให้ขอบสีทองตัดกับพื้นหลังชัดเจน */
    background-color: rgb(253, 255, 157); 
    
    /* 2. ส่วนสีของขอบ - เพิ่มความขาวสว่าง (#ffffff) แทรกตรงกลางเพื่อให้ขอบดูมีความเงาใสเหมือนสะท้อนแสง */
    background-image: linear-gradient(135deg, #3b3b3b 0%, #2c2c2c 50%, #333333 100%); 
    
    /* 3. การแยกพื้นหลังออกจากขอบ */
    background-origin: border-box;
    background-clip: padding-box, border-box;

    /* 4. เพิ่มความชัดของขอบ - เพิ่มความหนาเป็น 3px และใส่เงาฟุ้งสีทอง (Glow effect) */
    border: 5px solid transparent; 
    border-radius: 25px; 
    /* ขนาดขอบ | รูปแบบขอบ | สีขอบ */
    border: 3px solid #dbb449;
    box-shadow: 0 0 15px rgba(163, 163, 163, 0.3), inset 0 0 5px rgba(0, 0, 0, 0.2);

    /* สไตล์การจัดวาง */
    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 100%);
    padding: 20px; border-radius: 20px; text-decoration: none;
    display: block; text-align: center;
    animation: button-bounce 2s infinite ease-in-out;
}

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

@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: #ffe58f; text-decoration: none; font-size: 16px; font-weight: 500; }

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

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

/*ในส่วนนี้เป็นส่วนของโลโก้ KST777*/

/* นำเข้าฟอนต์ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

.logo-container {
    display: inline-flex; /* ใช้ inline เพื่อไม่ให้กินพื้นที่ทั้งบรรทัด */
    align-items: center;
    font-family: 'Archivo Black', sans-serif;
    gap: -5px; /* ลดช่องว่างตามสัดส่วน */
    background: transparent;
    padding: 5px;
    position: relative;
    overflow: hidden;
}

/* เอฟเฟกต์แสงปาด (ปรับให้บางลงตามขนาดโลโก้) */
.logo-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-15deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { left: -150%; }
    30% { left: 150%; }
    100% { left: 150%; }
}

.logo-text {
    font-size: 20px; /* ลดจาก 80px ลง 75% เหลือ 20px */
    font-weight: 900;
    font-style: italic;
    letter-spacing: 1px; /* ลดระยะห่างตัวอักษรให้ดูคมชัดในขนาดเล็ก */
    line-height: 1.2;
    display: inline-block;
}

/* ส่วนของ KST */
.kst {
    background: linear-gradient(to bottom, #d4af37 5%, #ffff80 50%, #d4af37 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 0px 1px rgba(220, 220, 0, 0.6));
    padding-right: 3px; /* ป้องกันหางตัว T ขาดในขนาดเล็ก */
}

/* ส่วนกล่องสีทองด้านหลัง 777 */
.logo-box {
    background: linear-gradient(135deg, #d4af37 0%, #ffff80 50%, #d4af37 100%);
    padding: 1px 6px; /* ลด padding ให้กะทัดรัด */
    border-radius: 2px; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0,0,0,0.3);
    transform: skewX(-15deg); 
    margin-left: 4px;
}

/* ส่วนของเลข 777 */
.numbers {
    color: #000;
    -webkit-text-fill-color: #000;
    font-size: 18px; /* ลดจาก 75px ลง 75% เหลือประมาณ 18px */
    margin-bottom: 0px;
    transform: skewX(15deg); 
    font-style: normal;
}

/* ----------------ปุ่ม----------------*/
/* --- เพิ่ม Keyframes สำหรับจอยเกม (เด้ง 2 ที) --- */
@keyframes joy-bounce {
    0%, 20%, 50%, 80%, 100% { transform: scale(1); }
    10% { transform: scale(1.3); } /* เด้งครั้งที่ 1 */
    30% { transform: scale(1.3); } /* เด้งครั้งที่ 2 */
}

/* --- เพิ่ม Keyframes สำหรับปุ่มหลัก (เด้งตาม) --- */
@keyframes button-pop {
    0%, 60%, 100% { transform: scale(1); }
    75% { transform: scale(1.05); } /* ปุ่มขยายตามจังหวะหลังจากจอยเด้ง */
}

/* คอนเทนเนอร์หลัก - เพิ่ม animation เด้งทั้งปุ่ม */
.footer-game-console {
    display: flex;
    width: 100%;
    max-width: 350px; 
    height: 75px;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Kanit', sans-serif;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    background-color: #1a1a1a;
    
    /* สั่งให้ปุ่มเด้งวนลูป */
    animation: button-pop 3s infinite ease-in-out;
}

/* คอนเทนเนอร์หลัก */
.footer-game-console {
    display: flex;
    width: 100%;
    max-width: 350px; 
    height: 75px;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Kanit', sans-serif;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    background-color: #1a1a1a;
}

/* พื้นหลังสีทอง */
.container-detail {
    flex: 1;
    background: linear-gradient(to bottom, #f7e06a 0%, #d4af37 45%, #9c7a1a 100%);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    clip-path: polygon(0% 0%, 92% 0%, 100% 100%, 0% 100%);
    padding-right: 30px; /* เพิ่ม padding ขวาเพื่อให้เนื้อหา Play Game อยู่กลางพื้นที่สีทองมากขึ้น */
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.amount-request-game {
    color: #000;
    font-weight: 900;
    font-size: 24px; 
    line-height: 1;
    margin-bottom: 2px;
}

/* ส่วนจำนวนสมาชิก - ปรับให้ชิดกัน */
.user-count {
    color: #000;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px; /* ลดระยะห่างระหว่างไอคอนและตัวเลขให้ชิดกันมากที่สุด */
    opacity: 0.9;
}
/* คอนเทนเนอร์ควบคุมจอย + ข้อความ */
.favorite-tab {
    display: flex;
    flex-direction: column; /* จัดจอยเกมไว้บน ข้อความไว้ล่าง */
    align-items: center;
    justify-content: center;
    
    /* --- ส่วนที่ใช้ย้ายตำแหน่งจอยเกม (ซ้าย-ขวา-บน-ล่าง) --- */
    /* translate(ขยับซ้ายขวา, ขยับขึ้นลง) */
    /* ค่าบวก = ขวา/ลง | ค่าลบ = ซ้าย/บน */
    transform: translate(-38px, 0px); 
}

/* ไอคอนสมาชิกในบรรทัดที่สอง */
.game-icons {
    width: 20px; /* ปรับขนาดให้พอดีกับตัวหนังสือ */
    filter: brightness(0); /* ปรับให้เป็นสีดำเพื่อให้เข้ากับตัวหนังสือบรรทัดสอง */
    margin-right: 0px;
}

/* ส่วนแถบสีดำด้านขวา (ปรับให้เอียง 100% ตามรูป) */
.favorite-tab {
    width: 45px; /* ขยายความกว้างเพื่อให้เห็นความเอียงชัดขึ้น */
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    margin-left: 50px; /* ดึงแถบดำให้มาซ้อนทับส่วนเอียงของสีทอง */
    z-index: 2;
    padding-left: 15px; 
}

/* ปรับแต่งจอยเกมให้ขนาดพอดี */
.game-icon {
    width: 65px; 
    filter: brightness(0) invert(1); /* สีขาว */
    display: block;
}

/* หัวใจ */
.favorite-heart {
    position: absolute;
    color: #fff;
    font-size: 16px;
    bottom: 5px;
    right: 8px;
    opacity: 0.3;
    transition: all 0.3s;
}

.favorite-tab.active .favorite-heart {
    color: #ff4757;
    opacity: 1;
    transform: scale(1.1);
}