@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600;700;900&display=swap');
    :root {
      --bg-body: #05080f;
      --gold-main: #d4af37;
      --sidebar-width: 85px;
      --card-bg: linear-gradient(145deg, #1e232e, #11141a);

      /* Leaderboard */
      --neon-green: #00ff41;
      --light-green: #afffa8;
      --neon-gold: #ffd700;
      --bg-black-glass: rgba(0, 0, 0, 0.85);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }

     /* 1. ลบพื้นหลังออกจาก body เดิมก่อน เพื่อไม่ให้ซ้อนกัน */
body {
    margin: 0;
    padding: 0;
    font-family: 'Prompt', sans-serif;
    color: #fff;
    padding-bottom: 80px;
    min-height: 100vh;
    background-color: #000; /* สีรองพื้น */
    position: relative; /* สำคัญ */
}

/* 2. สร้างพื้นหลังใหม่ด้วยวิธี ::before (เทคนิคแก้ภาพซูมบนมือถือ) */
body::before {
    content: "";
    position: fixed; /* สั่งให้รูปติดอยู่กับหน้าจอ ไม่ใช่หน้าเว็บ */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* ส่งไปอยู่หลังสุด */
    
    /* --- ตั้งค่ารูปสำหรับคอมพิวเตอร์ (แนวนอน) --- */
    background-image: url('/images/background/web.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 3. ตั้งค่ารูปสำหรับมือถือ (เมื่อจอกว้างน้อยกว่า 768px) */
@media (max-width: 768px) {
    body::before {
        /* เปลี่ยนเป็นรูปแนวตั้ง */
        background-image: url('/images/background/mobile.webp');
        
        /* เทคนิค: ถ้าอยากให้เห็นครบทั้งใบ ไม่โดนตัดขอบเลย ให้ใช้ contain */
        /* แต่ถ้าอยากให้เต็มจอสวยๆ โดยไม่สนใจขอบนิดหน่อย ให้ใช้ cover เหมือนเดิม */
        background-size: 100% 100%; /* บังคับยืดให้พอดีจอเป๊ะ (อาจจะสัดส่วนเพี้ยนนิดหน่อยแต่เห็นครบ) */
        
        /* หรือถ้าอยากให้สัดส่วนเป๊ะ แต่ยอมให้ขอบเหลือที่ว่าง ใช้บรรทัดล่างนี้แทนครับ */
        /* background-size: contain; */
    }
}

/* ตัวแก้ปัญหาเดิม (เผื่อมีค้างอยู่) */
.app-content {
    background: none !important;
}

    /* =========================
       HERO / BANNER
       ========================= */
    .hero-wrapper{
      width: min(100%, 1200px);
      margin: 6px auto 15px;
      padding: 8px 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    }

    /* =========================
   SWIPER / MAIN SLIDER (ฉบับแก้ไข: ภาพเต็มไม่โดนตัด)
   ========================= */
.main-slider {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    
    /* ✅ แก้จุดที่ 1: ยกเลิกการบังคับสัดส่วน ให้กล่องยืดตามความสูงของรูปจริง */
    aspect-ratio: auto; 
    height: auto; 
    background: rgba(0, 0, 0, 0.25);
}

/* ✅ แก้จุดที่ 2: ปรับความสูงของ Swiper ให้ยืดตามรูป (height: auto) */
.swiper, .swiper-wrapper, .swiper-slide { 
    width: 100%; 
    height: auto !important; 
}

.swiper-slide { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.swiper-slide img {
    width: 100%; 
    /* ✅ แก้จุดที่ 3: ให้ความสูงปรับตามรูป และใช้ contain เพื่อให้เห็นภาพครบ 100% */
    height: auto; 
    display: block;
    object-fit: contain; 
    transform: translateZ(0);
}

.swiper-button-next, .swiper-button-prev { color: #d4af37 !important; transform: scale(0.6); }
.swiper-pagination-bullet-active { background: #d4af37 !important; }

    /* =========================
       MAIN LAYOUT
       ========================= */
    .main-container {
      display: flex; align-items: flex-start;
      padding: 0 10px; gap: 15px;
      max-width: 1600px; margin: 0 auto;
    }

    /* SIDEBAR */
    .sidebar {
      width: var(--sidebar-width); min-width: var(--sidebar-width);
      background: rgba(30, 30, 35, 0.8); backdrop-filter: blur(10px);
      border-radius: 15px; padding: 15px 5px;
      border: 1px solid rgba(212, 175, 55, 0.1);
      display: flex; flex-direction: column; gap: 10px;
      position: sticky; top: 10px; z-index: 50;
    }

    .cat-item{
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      padding: 10px 2px; border-radius: 12px; cursor:pointer;
      transition: .25s; color:#888; border:1px solid transparent;
      background: rgba(0,0,0,0.2);
    }
    .cat-icon-img{ width:35px; height:35px; object-fit:contain; margin-bottom:5px; transition:.25s; }
    .cat-item span{ font-size:10px; font-weight:500; text-align:center; line-height:1.2; }
    .cat-item:hover, .cat-item.active{
      background: linear-gradient(to bottom, rgba(212,175,55,0.2), rgba(0,0,0,0));
      border: 1px solid var(--gold-main); color:#fff;
      box-shadow: 0 0 15px rgba(212,175,55,0.15);
    }
    .cat-item:hover .cat-icon-img, .cat-item.active .cat-icon-img{ filter: grayscale(0); transform: scale(1.08); }

    /* CONTENT */
    .content-area { 
    flex: 1; 
    /* เปลี่ยนจาก hidden เป็น visible หรือ overflow-x: hidden แทน */
    overflow-x: hidden;  /* ซ่อนแค่แนวนอนกันเบี้ยว */
    overflow-y: auto;    /* แนวตั้งให้เลื่อนได้ปกติ */
    padding-bottom: 120px; /* ✅ เพิ่มบรรทัดนี้: ดันเนื้อหาล่างสุดให้พ้นเมนู "ฝาก-ถอน" */
    }

    .section-title {
    /* --- โค้ดเดิมของคุณ (เก็บไว้ครบ) --- */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--gold-main);
    display: flex;
    align-items: center;
    gap: 8px;
    /* เพิ่มความฟุ้งของเงาตัวหนังสือให้สว่างวาบขึ้น */
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.8); 

    /* --- ส่วนที่ปรับให้แผ่นหลังเด่นขึ้น --- */
    background: rgba(0, 0, 0, 0.9); /* ปรับเป็นสีดำเกือบสนิท (90%) ให้ตัดกับพื้นหลัง */
    padding: 12px 20px;              /* ขยายพื้นที่ขอบบนล่างให้ดูหนาขึ้น */
    border-radius: 12px;             /* มนมุมเหมือนการ์ด */
    
    /* เพิ่มเส้นขอบทองจางๆ ให้ดูมีมิติ ไม่จมหายไปกับพื้นหลัง */
    border: 1px solid rgba(212, 175, 55, 0.2); 
}

    /* GAME GRID - 🚀 ปรับปรุง 3: เพิ่ม content-visibility ช่วย render */
    .game-grid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
      content-visibility: auto; /* Browser จะ render เฉพาะส่วนที่เห็น ช่วยให้ลื่นขึ้นมาก */
      contain-intrinsic-size: 1px 500px;
    }

    /* GAME CARD */
    .game-card{
      position:relative; border-radius:18px; overflow:hidden;
      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 10px 24px rgba(0,0,0,0.55);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      text-decoration:none; display:block; z-index:1;
    }
    .game-card:hover{
      transform: translateY(-4px); border-color: rgba(212,175,55,0.35);
      box-shadow: 0 16px 32px rgba(0,0,0,0.7);
    }
    .card-img-wrapper{
      position:relative; width:100%; padding-top:100%;
      overflow:hidden; background: transparent;
    }
    .card-img-wrapper img{
      position:absolute; inset:0; width:100%; height:100%;
      display:block; object-fit:cover; object-position:center;
      transform: scale(1.001); transition: transform .25s ease;
    }
    .game-card:hover .card-img-wrapper img{ transform: scale(1.06); }

    /* HOT BADGE */
    @keyframes flicker{ 0%{opacity:1; transform:scale(1);} 50%{opacity:.8; transform:scale(1.1);} 100%{opacity:1; transform:scale(1);} }
    .hot-badge{
      position:absolute; top:5px; right:5px;
      background: linear-gradient(135deg, #ff0000, #ff4500);
      color:#fff; font-size:9px; font-weight:800; padding: 2px 6px;
      border-radius:4px; box-shadow: 0 0 10px #ff4500; border: 1px solid #ffaa00;
      z-index:10; display:flex; align-items:center; gap:3px;
    }
    .hot-badge i{ animation: flicker .5s infinite; color:#ffff00; }

    /* HORIZONTAL SCROLL */
    .horizontal-scroll-container{
      display:flex; overflow-x:auto; gap:15px; padding: 10px 5px 25px;
      scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch;
      margin-bottom: 20px;
    }
    .horizontal-scroll-container::-webkit-scrollbar{ display:none; }
    .scroll-item{ flex:0 0 auto; width:150px; scroll-snap-align:start; position:relative; }

    /* RANKING HEADER */
    .ranking-header{
      position:relative; background: linear-gradient(90deg, #8b0000 0%, #3a0000 100%);
      padding: 12px 20px; border-radius: 12px; margin: 30px 0 15px;
      border-left: 5px solid #ff4500; display:flex; align-items:center; gap:10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.6);
    }
    .ranking-header h3{ margin:0; font-size: 1.2rem; font-weight:700; color:#fff; text-transform:uppercase; }
    .fire-icon{ color:#ffff00; font-size:1.5rem; animation: flicker 1s infinite; }

    /* RANK NUM */
    .rank-num{
      position:absolute; bottom:-15px; left:-8px;
      font-size:3.5rem; font-weight:900; font-style:italic; line-height:1;
      z-index:20; pointer-events:none; font-family:'Prompt',sans-serif; color:transparent;
    }
    .r-1{ background: linear-gradient(180deg, #ffd700, #e6ac00); -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter: drop-shadow(2px 2px 0px #000); }
    .r-2{ background: linear-gradient(180deg, #ffffff, #b3b3b3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter: drop-shadow(2px 2px 0px #000); }
    .r-3{ background: linear-gradient(180deg, #ff9966, #cc3300); -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter: drop-shadow(2px 2px 0px #000); }
    .r-other{ font-size:2.5rem; bottom:-8px; left:-5px; -webkit-text-stroke: 1.5px #fff; color:#333; filter: drop-shadow(1px 1px 2px rgba(255,255,255,0.5)); }

    /* PROMO */
    .promo-card{
      background: var(--card-bg); border-radius: 15px; overflow:hidden;
      border: 1px solid rgba(212,175,55,0.2); margin-bottom: 20px; transition: .25s;
    }
    .promo-card:hover{ border-color: var(--gold-main); transform: translateY(-3px); }
    .promo-img{ width:100%; height:auto; display:block; }
    .promo-content{ padding: 15px; }
    .promo-title{ color: var(--gold-main); font-size:18px; font-weight:700; margin:0; }
    .promo-badge-red{
      background:#ff0000; color:#ffff00; display:inline-block;
      padding: 2px 10px; font-size:12px; font-weight:bold; border-radius:4px;
      margin:10px 0; box-shadow: 0 0 8px rgba(255,0,0,0.5);
    }
    .promo-desc{ color:#94a3b8; font-size:13px; line-height:1.5; margin-bottom: 15px; }
    .promo-btn{
      background: linear-gradient(90deg, #d4af37, #f1c40f); color:#000;
      border:none; padding: 8px 20px; border-radius: 8px; font-weight:bold;
      cursor:pointer; transition:.2s; width:100%;
    }
    .promo-btn:hover{ box-shadow: 0 0 15px var(--gold-main); transform: scale(1.02); }

   /* ============================================== */
/* 🏆 LEADERBOARD (GLASS STYLE - แก้ไขใหม่)      */
/* ============================================== */

.lb-wrapper {
  
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(10px);         /* คำสั่งเบลอฉากหลัง */
    -webkit-backdrop-filter: blur(10px); /* รองรับ Safari/iPhone */
    
    /* เส้นขอบจางๆ ให้ดูมีมิติ */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* เงานุ่มๆ */
    
    border-radius: 15px; 
    overflow: hidden; 
    margin: 40px 0 25px; 
}

.lb-header {
  
    background: rgba(255, 255, 255, 0.03); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    padding: 12px 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.lb-title { 
    font-size: 1.2rem; 
    font-weight: 800; 
    color: #fff; 
    text-transform: uppercase; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.lb-title i { 
    color: var(--neon-gold); 
    font-size: 1.4rem; 
    text-shadow: 0 0 10px var(--neon-gold); 
}

.lb-live-dot { 
    width: 8px; 
    height: 8px; 
    background: var(--neon-green); 
    border-radius: 50%; 
    box-shadow: 0 0 8px var(--neon-green); 
    animation: flicker 1s infinite; 
}

.lb-header-cols { 
    display: flex; 
    padding: 8px 15px; 
    background: rgba(0, 0, 0, 0.2); /* ปรับให้เข้มกว่าพื้นหลังนิดหน่อย */
    color: #aaa; 
    font-size: .8rem; 
    font-weight: 500; 
}

.col-rank { width: 15%; text-align: center; } 
.col-user { width: 40%; text-align: left; padding-left: 10px; } 
.col-game { width: 20%; text-align: center; } 
.col-amt { width: 25%; text-align: right; }

.lb-list { display: flex; flex-direction: column; }

.lb-row {
    display: flex; 
    align-items: center; 
    padding: 10px 15px;
    
    /* ✅ ของใหม่: พื้นหลังใส */
    background: transparent; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
    transition: .25s;
}

/* เพิ่ม Effect ตอนเอาเมาส์ชี้ ให้สว่างขึ้นนิดนึง */
.lb-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lb-row:last-child { border-bottom: none; }

.lb-row.fade-update { animation: bgFlash .5s ease; }

@keyframes bgFlash { 
    0% { background: rgba(0, 255, 65, 0); } 
    50% { background: rgba(0, 255, 65, 0.2); } 
    100% { background: rgba(0, 255, 65, 0); } 
}

.lb-rank-badge { 
    width: 28px; 
    height: 28px; 
    line-height: 28px; 
    text-align: center; 
    border-radius: 50%; 
    font-weight: 900; 
    font-size: .9rem; 
    margin: 0 auto; 
    color: #fff; 
    text-shadow: 1px 1px 2px #000; 
}

.lb-rank-1 { background: linear-gradient(135deg, #ffd700, #e6ac00); box-shadow: 0 0 10px rgba(255, 215, 0, .5); }
.lb-rank-2 { background: linear-gradient(135deg, #e0e0e0, #b0b0b0); }
.lb-rank-3 { background: linear-gradient(135deg, #cd7f32, #a0522d); }
.lb-rank-ot { color: #888; font-size: 1rem; }

.lb-user { 
    font-family: monospace; 
    font-size: 1rem; 
    color: #fff; 
    letter-spacing: .5px; 
}

.lb-game-icon { 
    width: 35px; 
    height: 35px; 
    border-radius: 6px; 
    object-fit: cover; 
    border: 1px solid rgba(255,255,255,0.2); 
}

.lb-amt { 
    color: var(--light-green); 
    font-weight: 700; 
    font-size: 1rem; 
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.2); 
}

    /* MOBILE */
    @media (max-width: 768px){
      .hero-wrapper{ padding: 0; margin: 0 0 12px 0; width:100%; box-shadow:none; }
      .main-slider{ max-width: 100%; aspect-ratio: unset; height: auto; border-radius: 0; border: none; box-shadow: none; }
      .swiper, .swiper-wrapper, .swiper-slide{ height: auto !important; }
      .swiper-slide img{ width: 100%; height: auto; object-fit: cover; display: block; }
      .main-container{ padding: 0 8px; gap: 10px; }
      .sidebar{ width: 75px; min-width: 75px; padding: 10px 5px; }
      .cat-item{ padding: 8px 2px; }
      .cat-icon-img{ width:30px; height:30px; }
      .cat-item span{ font-size:9px; }
      .game-grid{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .scroll-item{ width: 130px; }
      .rank-num{ font-size: 3rem; bottom: -12px; left: -5px; }
    }
    
    /* FIX BANNER PADDING */
    .hero-wrapper { padding: 10px 15px; margin-top: 5px; }
    @media (max-width: 768px) { .hero-wrapper { padding: 0; } }

   /* =========================
   📢 NEWS TICKER (COMPACT VERSION)
   ========================= */
.news-alert-box {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px; /* ปรับให้มนขึ้น ดูทันสมัย */
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
    
    /* ✅ 1. ลดความสูงลง (จากเดิม 40px) */
    height: 32px; 
}

/* กล่องไอคอนด้านซ้าย (บีบให้สั้นลง) */
.news-icon-badge {
    background: linear-gradient(135deg, #d4af37, #f1c40f);
    color: #000;
    font-weight: 700;
    
    /* ✅ 2. ลดขนาดฟอนต์หัวข้อ */
    font-size: 12px; 
    
    /* ✅ 3. บีบระยะห่างด้านใน (Padding) ให้ชิดขึ้น */
    padding: 0 8px 0 12px; 
    
    height: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 5px 0 10px rgba(0,0,0,0.5);
    
    /* ✅ 4. ปรับมุมตัดให้ชันขึ้น (กินที่น้อยลง) */
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%); 
    padding-right: 20px; /* เผื่อที่ให้มุมตัดนิดหน่อย */
}

.news-icon-badge i {
    font-size: 14px;
    animation: bellShake 2s infinite;
}

/* พื้นที่ข้อความวิ่ง */
.news-scroller {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.news-content-text {
    display: inline-block;
    white-space: nowrap;
    color: #ddd; 
    font-size: 12px; /* ลดตัวหนังสือวิ่งให้สมส่วน */
    padding-left: 100%;
    animation: marquee-scroll 25s linear infinite;
}

.news-content-text span {
    color: #00ff41;
    font-weight: 600;
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.3);
}

/* Animation */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes bellShake {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0); }
}

/* === QA ACCORDION STYLES === */
    .qa-container { display: flex; flex-direction: column; gap: 15px; padding: 10px 5px; }
    .qa-item { 
        background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); 
        border-radius: 12px; overflow: hidden; transition: 0.3s;
    }
    .qa-item.active { border-color: var(--gold-main); background: rgba(0,0,0,0.4); }
    
    .qa-header { 
        padding: 15px; cursor: pointer; display: flex; justify-content: space-between; 
        align-items: center; font-weight: 600; color: #fff;
    }
    .qa-header:hover { color: var(--gold-main); }
    .qa-question { font-size: 1.1rem; }
    .qa-icon { transition: 0.3s; color: #888; }
    .qa-item.active .qa-icon { transform: rotate(180deg); color: var(--gold-main); }

    .qa-body { 
        max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; 
        background: rgba(0,0,0,0.2); 
    }
    .qa-content-inner { padding: 15px; border-top: 1px solid rgba(255,255,255,0.05); }
    .qa-img { max-width: 100%; border-radius: 8px; margin-bottom: 10px; border: 1px solid #444; }
    .qa-answer { color: #ccc; line-height: 1.6; font-size: 0.95rem; }

    /* 1. กรอบรางเลื่อน */
    .slip-slider-wrapper {
        width: 100%;
        height: 100px; /* ปรับความสูงให้พอดีกับบัตร */
        overflow: hidden;
        position: relative;
        margin-bottom: 20px;
        background: rgba(0, 0, 0, 0.3); /* พื้นหลังจางๆ */
        border-top: 1px solid rgba(184, 134, 11, 0.5); /* เส้นทองจางๆ */
        border-bottom: 1px solid rgba(184, 134, 11, 0.5);
        
        /* เฟดหัวท้าย */
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        
        /* จัดให้อยู่ตรงกลางแนวตั้ง */
        display: flex;
        align-items: center;
        z-index: 10;
    }

    /* 2. รางวิ่ง */
    .slip-track {
        display: flex;
        gap: 15px;
        width: max-content;
        animation: slip-scroll 200s linear infinite;
    }
    
    /* หยุดเมื่อชี้ */
    .slip-slider-wrapper:hover .slip-track {
        animation-play-state: paused;
    }

    /* 3. ตัวบัตร (Slip Card) */
    .slip-card {
        width: 200px;
        flex-shrink: 0;
        background: linear-gradient(145deg, #1a1a1a, #0d0d0d); /* ดำไล่เฉด */
        border: 1px solid #333;
        border-radius: 8px;
        padding: 8px 12px;
        position: relative;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        transition: transform 0.3s;
    }

    /* เส้นขอบสีแยกประเภท */
    .slip-card.deposit { border-left: 4px solid #00ff88; } /* แถบซ้ายเขียว */
    .slip-card.withdraw { border-left: 4px solid #ff453a; } /* แถบซ้ายแดง */

    .slip-card:hover {
        transform: translateY(-5px);
        background: #222;
        border-color: #b8860b; /* ชี้แล้วขอบทอง */
        z-index: 20;
    }

    /* รายละเอียดในบัตร */
    .slip-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 4px;
    }

    .slip-user { font-size: 12px; color: #fff; font-weight: bold; }
    .slip-badge { 
        font-size: 9px; padding: 2px 6px; border-radius: 4px; 
        font-weight: bold; text-transform: uppercase;
    }
    .badge-dep { background: rgba(0, 255, 136, 0.15); color: #00ff88; border: 1px solid #00ff88; }
    .badge-wit { background: rgba(255, 69, 58, 0.15); color: #ff453a; border: 1px solid #ff453a; }

    .slip-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .slip-amount {
        font-family: 'Courier New', monospace;
        font-size: 16px;
        font-weight: bold;
        color: #ffd700; /* สีทอง */
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    }
    
    .slip-game {
        font-size: 10px;
        color: #888;
        display: flex;
        align-items: center;
        gap: 3px;
    }

    /* Animation */
    @keyframes slip-scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

   /* =========================================
   ระบบโหลดภาพหมุนๆ สีเทา (V.3 แก้บั๊กรูปหาย 100%)
========================================= */
.card-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
}

/* วงแหวนหมุน สีเทา */
.card-img-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    margin-left: -14px;
    border: 3px solid #333333;
    border-top-color: #999999;
    border-radius: 50%;
    animation: spinLoader 0.8s linear infinite;
    z-index: 1; /* ให้อยู่หลังรูป */
}

@keyframes spinLoader {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ปิดวงแหวนทิ้งทันทีที่ภาพโหลดเสร็จ (ป้องกันการทะลุในรูป PNG) */
.card-img-wrapper.is-loaded::after {
    display: none !important;
    animation: none !important;
}

/* ตั้งค่ารูปเกม (ไม่ต้องมี opacity: 0 แล้ว ป้องกันรูปล่องหน) */
.card-img-wrapper img.game-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2; /* ให้อยู่ทับวงแหวน */
    color: transparent; /* ซ่อนตัวอักษร alt ระหว่างรอโหลด */
}