.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2263 .elementor-element.elementor-element-629ffe4{text-align:center;}.elementor-2263 .elementor-element.elementor-element-629ffe4 .elementor-heading-title{font-family:"Kanit", Sans-serif;font-weight:600;color:#DADADA;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2263 .elementor-element.elementor-element-423d60d{text-align:center;font-family:"Kanit", Sans-serif;font-size:30px;font-weight:600;color:#FFDF00;}.elementor-2263 .elementor-element.elementor-element-0045255{text-align:center;font-family:"Kanit", Sans-serif;font-size:24px;font-weight:800;color:#FFF300;}.elementor-2263 .elementor-element.elementor-element-bcec461 > .elementor-widget-container{margin:-20px 0px 0px 0px;}@media(max-width:767px){.elementor-2263 .elementor-element.elementor-element-629ffe4 > .elementor-widget-container{margin:50px 0px 0px 0px;}.elementor-2263 .elementor-element.elementor-element-629ffe4 .elementor-heading-title{font-size:24px;}.elementor-2263 .elementor-element.elementor-element-423d60d{font-size:30px;}.elementor-2263 .elementor-element.elementor-element-0045255{font-size:24px;}.elementor-2263 .elementor-element.elementor-element-bcec461 > .elementor-widget-container{margin:-20px 0px 0px 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-bcec461 *//* 2. โค้ด CSS */

:root {
    /* ***แก้ไข: เพิ่มความกว้างเป็น 95% ของหน้าจอ (ใหญ่ขึ้นเล็กน้อย)*** */
    --viewport-width: 95vw; 
    /* ให้ความกว้างแต่ละรีลคำนวณโดย Flexbox */
    --reel-base-width: 31.66vw; /* 95/3 */
    /* ***สำคัญ: ความสูงของสัญลักษณ์ ต้องถูกคำนวณจากความกว้างที่ถูกต้อง*** */
    /* ถ้าสัญลักษณ์เป็นจัตุรัส ใช้ 31.66vw */
    --symbol-height: 70vw; /* <--- ปรับค่านี้ตามอัตราส่วนภาพจริงของคุณ */
}

.slot-game-container {
    width: var(--viewport-width);
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; 
    box-sizing: border-box; 
}

.slot-viewport {
    height: var(--symbol-height); 
    width: 100%; 
    overflow: hidden; 
    box-sizing: border-box; 
    border: 3px solid #FFD700; 
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); 
    position: relative;
}

#slot-grid {
    margin-bottom: 0;
    overflow-y: hidden; 
    height: 100%; 
    display: flex; 
    width: 100%;
    gap: 0; 
    padding: 0;
    box-sizing: border-box;
}


.slot-reel {
    display: flex; 
    flex-direction: column; 
    flex: 1 1 0; 
    width: auto; 
    transition: transform 0.05s linear; 
    height: auto; 
    box-sizing: border-box;

    /* ***แก้ไขสำคัญ: ลบ Transform เริ่มต้นออก!*** */
    /* Transform จะถูกกำหนดโดย JavaScript เพื่อแสดงสัญลักษณ์แรก */
    /* transform: translateY(-9999px); ถูกลบออกจาก CSS */
}

.slot-reel img {
    width: 100%; 
    height: var(--symbol-height); 
    object-fit: contain; 
}

/* **กฎอื่น ๆ ใช้ตามเดิม** */
#spin-button {
    padding: 3vw 6vw; 
    font-size: 5vw;
    background: #ff0000; 
    color: white; 
    border: none; 
    border-radius: 10px; 
    cursor: pointer; 
    font-weight: bold; 
    margin-top: 15px; 
    width: 100%; 
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-43742c8 *//* --- 1. สไตล์คอนเทนเนอร์หลักและส่วนหัว (แก้ไข) --- */
.transaction-list-container {
    max-width: 500px; /* กำหนดความกว้างสูงสุดเพื่อให้ดูดีบนมือถือ */
    margin: 20px auto; /* จัดกึ่งกลาง */
    padding: 10px;
    background-color: transparent; /* ตั้งเป็นโปร่งใสเพื่อให้เห็นภาพพื้นหลัง */
    font-family: 'Arial', sans-serif; /* เลือกฟอนต์ที่อ่านง่าย */
    
    /* ************************************** */
    /* *** เพิ่ม/แก้ไขส่วนนี้สำหรับ Animation *** */
    height: 400px; /* กำหนดความสูงที่แน่นอนเพื่อจำกัดจำนวนการ์ดที่แสดง */
    overflow: hidden; /* ซ่อนเนื้อหาที่เกินความสูงที่กำหนด */
    position: relative; /* สำคัญสำหรับการวางซ้อน (Stacking Context) */
    /* ************************************** */
}

.list-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: white; /* เปลี่ยนเป็นสีขาวเพื่อให้เห็นบนพื้นหลังทึบ */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    
    /* ************************************** */
    /* *** เพิ่มส่วนนี้เพื่อตรึงส่วนหัวไว้ด้านบน *** */
    position: sticky; 
    top: 0;
    z-index: 10; /* ให้ส่วนหัวอยู่บนสุด */
    background: rgba(0, 0, 0, 0.7); /* เพิ่มพื้นหลังทึบให้ส่วนหัวเพื่อไม่ให้รายการเลื่อนทับ */
    padding: 10px; 
    /* ************************************** */
}
/* .header-logo, .header-text (ใช้โค้ดเดิม) */

/* --- 2. สไตล์ของการ์ดแต่ละรายการ (แก้ไข) --- */
.transaction-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* สไตล์การ์ด */
    background: rgba(255, 255, 255, 0.95); /* สีขาวกึ่งโปร่งใสเล็กน้อย */
    padding: 15px 20px;
    margin-bottom: 12px; /* ระยะห่างระหว่างการ์ด */
    border-radius: 10px; /* ขอบโค้งมน */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* เงาให้ดูนูนขึ้นมา */
    
    /* เส้นขอบสีด้านซ้าย (สำหรับตกแต่งคล้ายในรูป) */
    border-left: 4px solid #f99011; /* สีส้ม/ทอง */
    
    /* ************************************** */
    /* *** เพิ่ม Transition เพื่อความนุ่มนวล *** */
    transition: all 0.7s ease-in-out, opacity 0.4s; 
    /* ************************************** */
}
/* .transaction-card:hover (ใช้โค้ดเดิม) */

/* ************************************** */
/* *** เพิ่ม Class สำหรับรายการใหม่ที่รอ Animation *** */
/* ************************************** */
.card-entering {
    opacity: 0;
    transform: translateY(-20px); /* ให้รายการใหม่เข้ามาจากด้านบนเล็กน้อย */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7f80512 *//* --- CSS ที่เพิ่มเพื่อจัดกึ่งกลางแนวนอน (ไม่ตรึงจอ) --- */
.center-wrapper-horizontal {
    /* ใช้ text-align: center เพื่อจัดกึ่งกลางองค์ประกอบที่เป็น inline-flex */
    text-align: center; 
    
    /* กำหนดระยะห่างด้านบน/ล่าง (ถ้าต้องการ) */
    margin: 20px auto; 
    width: 100%; /* ให้ใช้ความกว้างเต็มที่เพื่อจัดกึ่งกลางได้ */
}


/* --- สไตล์ปุ่มหลัก --- */
.online-badge {
    /* ลบ position: fixed, top, left, transform, z-index ออก */
    display: inline-flex;
    align-items: center;
    padding: 10px 25px;
    border-radius: 50px; /* ทำให้ขอบโค้งมนมาก */
    background-color: rgba(0, 0, 0, 0.4); /* พื้นหลังมืดกึ่งโปร่งใส */
    
    /* สไตล์ Neon Effect สีเขียว */
    border: 2px solid #00FF00; /* เส้นขอบสีเขียวนีออน */
    box-shadow: 
        0 0 10px rgba(0, 255, 0, 0.6), /* เรืองแสงรอบนอก */
        inset 0 0 5px rgba(0, 255, 0, 0.3); /* เรืองแสงด้านใน */
}

/* --- สไตล์จุดสีเขียวกระพริบ (Dot Indicator) --- */
.dot-indicator {
    width: 12px;
    height: 12px;
    background-color: #00FF00;
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: 0 0 8px #00FF00; /* ให้จุดเรืองแสง */
    
    /* Animation กระพริบ */
    animation: pulse-online 1.5s infinite alternate; 
}

@keyframes pulse-online {
    0% { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- สไตล์ข้อความและตัวเลข --- */
.text-label {
    font-size: 1.2em;
    font-weight: bold;
    color: #FFFFFF; /* สีขาวสำหรับข้อความทั่วไป */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    margin-right: 5px;
}

.count-number {
    font-size: 1.8em; /* ตัวเลขขนาดใหญ่และเด่น */
    font-weight: 900;
    color: #00FF00; /* สีเขียวนีออนสำหรับตัวเลข */
    margin: 0 5px;
    
    /* สไตล์ตัวเลขให้เรืองแสงเล็กน้อย */
    text-shadow: 
        0 0 5px rgba(0, 255, 0, 0.8),
        0 0 15px rgba(0, 255, 0, 0.3);
}

/* --- การตอบสนองบนมือถือ (ปรับขนาด) --- */
@media (max-width: 600px) {
    .online-badge {
        padding: 8px 15px;
    }
    .text-label {
        font-size: 1em;
    }
    .count-number {
        font-size: 1.5em;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-34cb943 *//* --- สไตล์ Pop-up (Modal) --- */
.slot-popup-backdrop {
    position: fixed; /* ตรึงตำแหน่งไว้บนหน้าจอ */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* พื้นหลังมืดโปร่งใส */
    
    /* จัดกึ่งกลาง Pop-up */
    display: none; /* **ซ่อนไว้ก่อน** (JavaScript จะเปลี่ยนเป็น flex เมื่อต้องแสดง) */
    justify-content: center;
    align-items: center;
    
    z-index: 10000; /* ให้ Pop-up อยู่บนสุดของทุกองค์ประกอบ */
    opacity: 0;
    transition: opacity 0.3s ease; /* Animation การปรากฏ */
}

.slot-popup-content {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    transform: scale(0.8); /* เล็กกว่าเดิมเล็กน้อย */
    transition: transform 0.3s ease;
    
    /* **เพิ่ม:** จำกัดความกว้างเพื่อให้พอดีกับข้อความ */
    max-width: 400px; 
    width: 90%;
}

/* คลาสสำหรับ JavaScript ในการแสดง Pop-up */
.slot-popup-backdrop.show {
    display: flex; /* แสดง Pop-up */
    opacity: 1;
}

.slot-popup-backdrop.show .slot-popup-content {
    transform: scale(1); /* ขยายให้เต็มขนาด */
}

/* --- สไตล์ข้อความ Pop-up (ปรับปรุง) --- */
.popup-message {
    /* **แก้ไข:** ปรับขนาด, จัดชิดซ้าย, เพิ่มระยะห่างบรรทัด */
    font-size: 1.1em; 
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: left; 
    line-height: 1.5; /* เพิ่มระยะห่างบรรทัดเพื่อให้ข้อความอ่านง่าย */
}

/* --- สไตล์สำหรับรายการโบนัสภายในข้อความ --- */
.offer-list {
    display: block;
    margin: 10px 0 15px 0;
    font-weight: 900;
    font-size: 1.2em;
    padding-left: 10px; 
    color: #00897b; /* สีเน้นรายการโบนัส */
}

/* --- สไตล์ปุ่ม "รับสิทธิพิเศษ" (Claim Button) --- */
.claim-button {
    display: block; 
    width: 100%;
    margin: 20px auto 0 auto; /* จัดกึ่งกลางและเพิ่มระยะห่างด้านบน */
    padding: 15px 20px;
    
    /* สไตล์ Neon/เน้นสี */
    background: linear-gradient(135deg, #00FF00, #00AA00); /* สีเขียวเด่น */
    color: #000;
    text-decoration: none; /* ลบขีดเส้นใต้ของลิงก์ */
    font-size: 1.3em;
    font-weight: 900;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 255, 0, 0.5); /* เงาเรืองแสง */
    
    /* Animation เล็กน้อยเมื่อวางเมาส์เหนือปุ่ม */
    transition: all 0.2s ease;
    border: 2px solid #00AA00;
    text-align: center;
}

.claim-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 255, 0, 0.7);
}

/* ลบสไตล์ .popup-close-button ออกตามที่คุณต้องการ *//* End custom CSS */