.card {
    background-color: rgb(35,35,35, 0.99); 
    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 50%);
    border-radius: 20px;
}

.breadcrumb {
    background: linear-gradient(180deg,#626166,#3d3a3d)!important;
    border-radius: 15px 15px 0px 0px;
}

.modal {
    color: black;
}

.swal2-container { 
    color: black;
}

.input-group-text {
    border: 1px solid var(--primaroo);
}

.navbar-mobile {
    overflow: hidden;
    background-color: #FFF;
    position: fixed;
    bottom: 0;
    width: 100%;
    color: white;
}

.btn-action {
    border-style: dashed;
    border-radius: 5px;
    border-width: 1.5px;
    padding: 0px;
    /* color: #3cb371; */
}

.list_number {
    overflow-y: auto;
}

.btn-list-duplicatenumber:hover {
    color: #6c757d;
    background-color: #FFF;
}

.btn-reversnumber:hover {
    color: #18A2B8;
    background-color: #FFF;
}

.title1 {
    color: white;
    text-shadow: 0 0 10px #0099ff, 0 0 15px #884aff;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: white;
}
.title2 {
    color: white;
    text-shadow: 0 0 10px #FF0000, 0 0 15px #0000FF;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: white;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1000px;
    }
}

/* .mobile */
@media only screen and (max-width: 600px) {
    .desktop {
        display: none;
    }
    .navber-dasktop {
        padding: 0px;
    }
    .card-credit {
        padding: 0px;
    }
    /* .card-animation {
        top: 100px!important;
    } */
    .bread-crumb {
        font-size: small;
    }

    /* body {
        font-size: 3.5vw!important;
    }
    a {
        font-size: 3.5vw!important;
    } */
}

/* desktop */
@media only screen and (min-width: 600px) {
    .mobile {
        display: none;
    }
    .bread-crumb {
        font-size: medium;
    }
}

.marquee-container{
    width:100%;
    overflow:hidden;
    position:relative;
}

.marquee{
    display:inline-block;
    white-space:nowrap;
    padding-left:100%;
    animation: marquee 25s linear infinite;
}

/* ===== notice bar (v10 style) — ใช้ได้ทุกหน้า ===== */
.v10-notice{
    display:flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(180deg, rgba(40,40,40,0.85) 0%, rgba(12,12,12,0.9) 100%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:100px;
    padding:8px 14px;
    margin-top:10px;
    margin-bottom:10px;
}

.v10-notice > i{
    color:var(--primaroo);
    flex:0 0 auto;
}

.v10-notice .marquee-container{
    overflow:hidden;
    flex:1;
    width:auto;
}

@keyframes marquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-100%);
    }
}

/* ===== Advert Swiper (mySwiper) ===== */
.mySwiper{
    padding:14px 6px 14px !important;
    overflow:visible;
}

/* หมายเหตุ: <swiper-slide> เป็น custom element (tag) ไม่ใช่ .swiper-slide (class)
   จึงต้อง target ด้วยชื่อ tag ตรง ๆ ถึงจะโดน */
.mySwiper swiper-slide{
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .45s cubic-bezier(.16,1,.3,1),
               opacity .45s ease,
               filter .45s ease;
    transform:scale(.9);
    opacity:.55;
    filter:saturate(.85);
}

.mySwiper swiper-slide img,
.mySwiper swiper-slide a img{
    display:block;
    width:100%;
    height:auto;
    border-radius:16px !important;
    border:2px solid rgba(255,255,255,.12) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.55),
               0 4px 10px rgba(0,0,0,.35) !important;
}

.mySwiper swiper-slide.swiper-slide-active,
.mySwiper swiper-slide.swiper-slide-fully-visible{
    transform:scale(1);
    opacity:1;
    filter:none;
}

.mySwiper swiper-slide.swiper-slide-active img{
    border-color:var(--primaroo) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 24px var(--primaroo) !important;
}

/* pagination อยู่ใน shadow DOM ของ swiper-container -> ใช้ ::part */
.mySwiper::part(bullet),
.mySwiper::part(bullet-active){
    background:var(--primaroo);
    opacity:.4;
    width:8px;
    height:8px;
    transition:width .3s ease,opacity .3s ease;
}

.mySwiper::part(bullet-active){
    opacity:1;
    width:22px;
    border-radius:6px;
}

/* ===== Modal ประกาศ (modal_notify) ===== */
.modal_notify{
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.modal_notify .modal-dialog{
    max-width:440px;
}

.modal_notify .modal-content{
    position:relative;
    overflow:visible;
    border:1px solid var(--primaroo) !important;
    border-radius:18px !important;
    background:linear-gradient(160deg,#141414 0%,#000 100%) !important;
    box-shadow:0 10px 40px rgba(0,0,0,.65),0 0 22px var(--primaroo) !important;
}

.modal_notify .modal-header{
    min-height:0;
    padding:0 !important;
}

.modal_notify .modal-body{
    position:relative;
    padding:0 !important;
    border-radius:18px;
    overflow:visible;
}

.modal_notify .modal-body img{
    display:block;
    width:100%;
    border-radius:18px;
}

/* ปุ่มปิด */
.modal_notify .close{
    position:absolute;
    top:-14px;
    right:-14px;
    z-index:5;
    width:34px;
    height:34px;
    margin:0 !important;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff !important;
    font-size:15px;
    line-height:1;
    opacity:1;
    border-radius:50%;
    background:linear-gradient(145deg,#ff4d4d,#c30d0d);
    box-shadow:0 3px 10px rgba(0,0,0,.5);
    transition:transform .2s ease,box-shadow .2s ease;
}

.modal_notify .close:hover{
    color:#fff !important;
    transform:rotate(90deg) scale(1.08);
    box-shadow:0 4px 14px rgba(255,77,77,.6);
}

.modal_notify .close:focus{
    outline:none;
}

/* แอนิเมชันตอนเปิด */
.modal_notify.show .modal-dialog{
    animation:modalNotifyPop .35s cubic-bezier(.16,1,.3,1);
}

@keyframes modalNotifyPop{
    0%{
        opacity:0;
        transform:translateY(18px) scale(.9);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* ===== รายการเกม #gameList (การ์ดเกม) — ใช้ทุกหน้า ===== */
/* ข้ามการเรนเดอร์การ์ดที่ยังเลื่อนไม่ถึง -> initial paint ไวขึ้น + สกรอลลื่น */
#gamelist-item > [class*="col-"]{
    content-visibility:auto;
    contain-intrinsic-size:auto 130px;
}

#gamelist-item .items__provider__image.game{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 4px 14px rgba(0,0,0,.35);
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#gamelist-item .items__provider__image.game:hover,
#gamelist-item .items__provider__image.game:active{
    transform:translateY(-4px);
    border-color:var(--primaroo);
    box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 16px var(--primaroo);
}

/* ภาพเกม: จองพื้นที่ด้วย aspect-ratio (ลด layout shift) + เต็มการ์ด + ซูมตอน hover */
#gamelist-item .items__provider__image.game img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    border-radius:12px;
    background:#181717;
    object-fit:cover;
    transition:transform .35s ease;
}
#gamelist-item .items__provider__image.game:hover img{
    transform:scale(1.06);
}

/* ชื่อเกม: แถบไล่เฉดด้านล่าง + ตัดข้อความยาว */
#gamelist-item .items__provider__image.game > .d-flex{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:16px 8px 6px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%);
    pointer-events:none;
}
#gamelist-item .items__provider__image.game > .d-flex span{
    max-width:100%;
    color:#fff;
    font-size:11px;
    font-weight:600;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow:0 1px 3px rgba(0,0,0,.8);
}

/* การ์ดค่าย #provider: เงาลอย + hover ยกตัว (+ ขอบทองเรืองแสง ถ้าเปิดใช้) — ทุกหน้า */
#provider .items__provider__image{
    cursor:pointer;
    /* box-shadow:0 4px 14px rgba(0,0,0,.35); */
    transition:transform .25s ease, box-shadow .25s ease;
}
#provider .items__provider__image:hover,
#provider .items__provider__image:active{
    transform:translateY(-4px);
    /* box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 16px var(--primaroo); */
}
/* ภาพเกมหน้า /play/games: จองพื้นที่ด้วย aspect-ratio กัน layout shift ตอนรูปทยอยโหลด (รูปสะดุด) */
/* #provider .items__provider__image img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    border-radius:12px;
    background:#181717;
    object-fit:cover;
} */

/* หัวข้อค่ายที่เลือก + ปุ่มย้อนกลับ */
#gameList #providerName{
    font-weight:700;
    font-size:15px;
    vertical-align:middle;
}
#gameList #logoURL{
    border-radius:8px;
}
#gameList #btn_back{
    cursor:pointer;
    transition:transform .2s ease;
}
#gameList #btn_back:hover{
    transform:translateX(-3px);
}