/* ===== START Line ส===== */
 .contact-fix-layout {
     position: fixed;
     right: 20px;
     bottom: 20px;
     z-index: 9999;
 }

 .fix-blog-layout-contact {
     position: relative;
     /* สำหรับ badge */
     width: 56px;
     height: 56px;
     border-radius: 999px;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
     cursor: pointer;
     user-select: none;
 }

 .fix-blog-layout-contact img {
     width: 30px;
     height: 30px;
     display: block;
 }

 .contact-main,
 .contact-item {
     display: block;
     text-decoration: none;
 }

 /* ===== slide menu ===== */
 .contact-slide {
     position: absolute;
     right: 70px;
     top: 0;
     display: flex;
     gap: 10px;

     opacity: 0;
     transform: translateX(20px);
     pointer-events: none;
     transition: all .25s ease;
 }

 .contact-fix-layout.active .contact-slide {
     opacity: 1;
     transform: translateX(0);
     pointer-events: auto;
 }

 .contact-badge {
     position: absolute;
     top: -9px;
     /* right: -4px; */
     min-width: 18px;
     /* height: 18px; */
     padding: 0px 7px;
     background: #ff2d2d;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     line-height: 18px;
     text-align: center;
     border-radius: 999px;
     /* box-shadow: 0 0 0 2px #fff; */
     font-size: 5px;
 }

 .contact-badge.hide {
     display: none;
 }

 /* ===== END Line ส===== */

 @keyframes zoomInOut {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.2);
     }

     100% {
         transform: scale(1);
     }
 }

 .my-swal {
     background: transparent
 }

 .startLoading .content-startLoading {
     text-align: center
 }

 .startLoading .content-startLoading .img-logo {
     margin: 0 auto;
     width: 200px
 }

 .startLoading .content-startLoading .img-logo img {
     height: auto;
     width: 100%
 }

 .startLoading .content-startLoading .img-logo-sub {
     cursor: pointer;
     height: auto;
     margin: 0 auto;
     padding-top: 1rem;
     width: 170px
 }

 .startLoading .content-startLoading .img-logo-sub img {
     height: auto;
     width: 100%
 }

 .startLoading .content-startLoading.trans-late {
     transform: translateY(-100px)
 }

 @media screen and (max-width:1023px) {
     .startLoading .content-startLoading.trans-late {
         transform: translateY(-80px)
     }
 }

 @media screen and (max-width:600px) {
     .startLoading .content-startLoading.trans-late {
         transform: translateY(-50px)
     }
 }

 .startLoading .progressbar {
     border-bottom: 1px solid hsla(0, 0%, 100%, .25);
     border-radius: 20px;
     box-shadow: 0 4px 8px -4px hsla(0, 0%, 100%, .4), 0 -3px 3px -3px hsla(0, 0%, 100%, .25), inset 0 0 12px 0 rgba(0, 0, 0, .5);
     display: block;
     height: 20px;
     margin: 10px auto;
     padding: 5px 20px;
     position: relative;
     width: 350px
 }

 .startLoading .blog-status-label {
     background: transparent;
     bottom: 0;
     height: 30px;
     left: 0;
     position: absolute;
     transition: width 1s ease;
     width: 60px
 }

 .startLoading .label {
     align-items: center;
     background: linear-gradient(180deg, #4c4c4c, #262626);
     border-radius: 5px;
     bottom: -40px;
     display: flex;
     height: 30px;
     justify-content: center;
     opacity: 0;
     position: absolute;
     right: 0;
     transition: all 1s ease;
     width: 60px
 }

 .startLoading .label:before {
     background: linear-gradient(135deg, #565656, #4c4c4c 50%);
     box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .15);
     -webkit-clip-path: polygon(50% 40%, 0 100%, 100% 100%);
     clip-path: polygon(50% 40%, 0 100%, 100% 100%);
     content: "";
     display: block;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#565656", endColorstr="#4c4c4c", GradientType=1);
     height: 10px;
     left: 10px;
     position: absolute;
     top: -9px;
     width: 10px
 }

 .startLoading .label span {
     display: block;
     font-size: 1rem;
     font-weight: 700;
     transform: translateY(1px)
 }

 .startLoading .active-progress {
     opacity: 1 !important
 }

 .startLoading .progressbar:before {
     background: #222;
     border: 1px solid rgba(0, 0, 0, .8);
     border-radius: 24px;
     box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, .65);
     content: "";
     display: block;
     height: 16px;
     left: 0;
     position: absolute;
     top: 2px;
     width: 350px
 }

 .startLoading .bar {
     border-radius: 20px;
     display: block;
     height: 16px;
     left: 0;
     overflow: hidden;
     position: absolute;
     top: 2px;
     transition: width 1s ease;
     width: 0
 }

 .startLoading .bar.color4 {
     background: linear-gradient(180deg, var(--theme-color-1), var(--theme-color-2));
     box-shadow: 0 0 10px 1px var(--theme-color-1), inset 0 1px 0 1px hsla(0, 0%, 100%, .45), inset 1px 0 0 1px hsla(0, 0%, 100%, .25), inset -1px 0 0 1px hsla(0, 0%, 100%, .25)
 }

 .startLoading .bar:before {
     background: radial-gradient(ellipse at center, hsla(0, 0%, 100%, .35) 0, hsla(0, 0%, 100%, .15) 50%, hsla(0, 0%, 100%, .05) 51%, hsla(0, 0%, 100%, .01) 100%);
     content: "";
     display: block;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=1);
     height: 100%;
     left: -15px;
     position: absolute;
     top: -15%;
     width: 606px
 }

 .startLoading .bar:after {
     background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .6) 98%, hsla(0, 0%, 100%, 0));
     border-radius: 0 20px 20px 0;
     content: "";
     display: block;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#00ffffff", GradientType=1);
     height: 20px;
     position: absolute;
     right: 0;
     top: 0;
     width: 64px
 }

 .startLoading .bar span {
     animation: glitter 5s linear infinite;
     background: url(/images/bg-progress.webp) 0 0;
     border-radius: 20px;
     display: block;
     height: 54px;
     left: 0;
     opacity: .15;
     position: absolute;
     top: 0;
     width: 100%
 }

 @keyframes glitter {
     0% {
         background-position: 0 0
     }

     to {
         background-position: 0 -375px
     }
 }

 @media screen and (max-width:1023px) {

     .startLoading .content-startLoading .img-logo,
     .startLoading .content-startLoading .img-logo-sub {
         margin: 0 auto;
         width: 160px
     }

     .startLoading .progressbar,
     .startLoading .progressbar:before {
         width: 250px
     }

     .startLoading .label {
         bottom: -38px;
         height: 28px;
         position: absolute;
         width: 50px
     }

     .startLoading .label span {
         font-size: .9rem
     }
 }

 @media screen and (max-width:600px) {

     .startLoading .progressbar,
     .startLoading .progressbar:before {
         width: 250px
     }

     .startLoading .label {
         bottom: -38px;
         height: 28px;
         position: absolute;
         width: 50px
     }

     .startLoading .label span {
         font-size: .9rem
     }
 }

 @keyframes progressGrow {
     from {
         width: 0%;
     }

     to {
         width: 50%;
     }
 }

 .startLoading .bar.color4.animate-progress {
     animation: progressGrow 10s ease-out forwards;
 }

 .startLoading .bar.color4.animate-progress-end {
     width: 100%;
 }




 /* START BANNER  */
 #banner-main .v-window__container {
     display: flex;
     flex-direction: row;
     width: 100%;
     height: 100%;
     transition: transform 0.5s ease;
 }

 #banner-main .v-window-item {
     flex: 0 0 100%;
     width: 100%;
     height: 100%;
     display: block;
 }


 #game-play-provider img {
     width: 100%;
     max-width: 510px;
 }


 .layout-container {
     /* max-width: 1000px; */
     margin: auto;
 }

 .gameClose {
     /* filter: grayscale(); */
     display: none;
 }

 .filter-gray {
     filter: brightness(0.2);
 }

 #btn_amount_affiliate {
     padding: 2px 10px !important;
 }

 .game_border_radius {
     border-radius: 15px;
     box-shadow: 0px 0px 4px red;
 }

 </style><style>.card-member-deposit {
     border-radius: 10px;
 }

 #card-slide-withdraw-deposit {
     height: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-end;
     box-sizing: border-box;
     padding: 5px;
     width: 100%;
 }

 @media (max-width : 500px) {
     #card-slide-withdraw-deposit {
         font-size: 8px;
         height: 257px;
     }

     .card-member-deposit {
         font-size: 10px;
     }

     .card-member-deposit .header-member-deposit img {
         height: 10px;
     }
 }

 @media (max-height : 700px) {
     .v-card__text.notOverFlow {
         max-height: calc(90vh - 60px) !important;
     }
 }

 #game-category .box-category-game,
 .game-category .box-category-game,
 .card-member-deposit,
 .card-game-wrapper img,
 .v-navigation-drawer,
 .main-nav {
     background: linear-gradient(180deg, var(--theme-color-1) 0, var(--theme-color-2) 100%);
 }

 /* 
  #game-category .box-category-game.active-category,
  .game-category .box-category-game.active-category {
    background: linear-gradient(180deg,
        var(--themeActive-color-1) 0,
        var(--themeActive-color-2) 100%);
  } */


 #simple-slider {
     width: 100%;
     max-width: 600px;
     aspect-ratio: 1 / 1;
     /* ✅ สี่เหลี่ยมจัตุรัส */
     overflow: hidden;
     position: relative;
     border-radius: 16px;
     margin: 0 auto;
 }

 .slider-container {
     display: flex;
     transition: transform 0.5s ease;
 }

 .slider-container {
     display: flex;
     width: 300%;
     /* 3 slides */
     height: 100%;
     transition: transform 0.5s ease;
 }

 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .slider-controls {
     position: absolute;
     bottom: 10px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 8px;
     z-index: 10;
 }

 .slider-controls button {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     border: none;
     background: rgba(0, 0, 0, 0.5);
     cursor: pointer;
 }

 .slider-controls button.active {
     background: var(--themeActive-color-1);
 }

 #modalCodition img {
     width: 100%;
 }

 /* END BANNER */