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

 /* มือถือ: แถบเมนูล่าง (#x-footer) เป็น fixed อยู่ล่างสุด ปุ่มลอยต้องอยู่เหนือมัน
    ไม่งั้นปุ่มล่างสุดของชุด (ไลน์/เทเลแกรม/แชท) ไปทับปุ่ม "โปรโมชั่น"
    ค่านี้เป็นค่าตั้งต้นก่อน JS วัดความสูงจริง (adjustContactBottom ใน home.js) */
 @media only screen and (max-width: 993px) {
     .contact-fix-layout {
         bottom: 84px;
     }
 }

 .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;
 }

 /* แอดมินปิด agent = แบรนด์นี้ไม่มีค่ายนี้ → ซ่อนทิ้ง */
 .gameClose {
     /* filter: grayscale(); */
     display: none;
 }

 /* ค่ายยังเปิดอยู่ แต่โบนัสที่ลูกค้าถือเล่นไม่ได้ → ทำเทาไว้ให้เห็นว่ามีค่ายนี้อยู่
    ห้ามใส่ pointer-events:none — ต้องกดได้ เพื่อให้ขึ้นข้อความบอกว่าติดโบนัสอยู่ */
 .gameLockBonus {
     filter: grayscale(1);
     opacity: 0.55;
     cursor: not-allowed;
 }

 .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 */

 /* ===== SEO Article (v2 — บทความ SEO จากหลังบ้าน, dynamic) ===== */
 /* order:1 + width:100% => ขึ้นแถวเต็มความกว้างต่อจากโลโก้/คำอธิบาย ก่อนบล็อก TAG (ลำดับ: โลโก้ → description → บทความ → tags) */
 .main-footer-seo .wrap-footer-group .section-seo-article {
     order: 1;
     width: 100%;
     padding: 0 1rem;
     margin-bottom: 1rem;
     box-sizing: border-box;
 }

 .seo-article-v2 {
     max-width: 960px;
     margin: 0 auto;
     color: rgba(255, 255, 255, .78);
     font-size: 13px;
     line-height: 1.75;
     word-break: break-word;
     overflow-wrap: anywhere;
 }

 .seo-article-v2 h1,
 .seo-article-v2 h2,
 .seo-article-v2 h3,
 .seo-article-v2 h4 {
     color: #fff;
     line-height: 1.4;
 }

 .seo-article-v2 a {
     color: var(--themeActive-color-1, #ffd54a);
 }

 .seo-article-v2 img {
     max-width: 100%;
     height: auto;
 }

 .seo-article-v2 table {
     max-width: 100%;
 }
 /* END SEO Article (v2) */
/* ── เส้นทางโอนในแท็บฝากทศนิยม (KBank/KTB): โอนเข้า (บัญชีเว็บ) / โอนจาก (บัญชีลูกค้า) ── */
.dep-route-label { font-size: 0.95rem; font-weight: 700; margin: 14px 0 6px; color: #fff; text-align: left; }
.dep-route-label.dep-route-to { color: #7be495; }
.dep-route-label.dep-route-from { color: #8fb6ff; }
.dep-acc { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); margin-bottom: 6px; font-family: Roboto, 'Noto Sans Thai', sans-serif; }
.dep-acc-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: #fff; background: #1e4db7; }
.dep-acc-logo { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid #fff; object-fit: cover; flex: 0 0 44px; }
.dep-acc-head-info { min-width: 0; }
.dep-acc-code { font-size: 15px; font-weight: 800; line-height: 1.2; }
.dep-acc-bank { font-size: 12px; opacity: 0.9; }
.dep-acc-name { font-size: 13px; font-weight: 600; margin-top: 2px; }
.dep-acc-body { background: #fff; color: #1a2540; padding: 10px 14px 12px; }
.dep-acc-label { font-size: 12px; color: #6b7a99; margin-bottom: 4px; }
.dep-acc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dep-acc-no { font-size: 1.35rem; font-weight: 800; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; color: #1a2540; }
.dep-acc-from .dep-acc-no { color: #1e4db7; }
.dep-acc .dep-acc-copy { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #3ad83a, #539000); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); white-space: nowrap; }
.dep-acc .dep-acc-copy .dep-copy-ico { width: 14px; height: 14px; flex: 0 0 14px; }
/* ปุ่มคัดลอกยอดเงิน ใต้ยอด (ใช้ทั้ง KBank/KTB) + บรรทัดเวลา */
.dep-amount-copy { display: inline-flex; align-items: center; gap: 6px; margin: 2px auto 10px; background: linear-gradient(180deg, #3ad83a, #539000); color: #fff; border: none; border-radius: 20px; padding: 6px 16px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.dep-amount-copy .dep-copy-ico { width: 14px; height: 14px; }
.dep-time-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; }
.dep-time-count { color: rgb(238, 104, 104); font-weight: bold; font-size: 16px; margin-left: 4px; }
.dep-route-note { margin: 6px 0 4px; font-size: 0.8rem; color: #ff8a80; line-height: 1.45; text-align: left; }