.nobg{
	background-color: #ffffff00 !important;
    border-radius: 20px;
    box-shadow: 0px 1px 9px 8px #24242700 !important;
    color: #fff;
	
}
#page-container {
   
  background-color: #edf0f70a!important; 
}

.bd-login{
    background: linear-gradient(89deg, rgb(10 23 93) 0%, rgb(60 88 235) 50%, rgb(8 22 92) 100%) !important;
	border-radius: 10px;
}
.btn-login, .btn-primary{
	    background: linear-gradient(180deg, rgb(149 154 156) 0%, rgb(254 254 254) 25%, rgb(218 221 224) 50%, rgb(254 254 254) 75%, rgb(114 115 116) 100%);
   font-size: 16px;
    color: #000;
    padding: 8px;
    border-radius: 10px;
}
a{
	color:#fff;
}
.bd-silver{
	background: linear-gradient(85deg, rgb(144 144 144) 0%, rgb(234 234 234) 20%, rgb(139 139 139) 50%, rgb(206 206 206) 80%, rgb(115 115 115) 100%) !important;
    padding: 3px;
    border-radius: 10px;
}
.txt-topic{
	    font-size: 18px !important;
    text-shadow: 1px 3px 3px black;
}
#page-header {
    z-index: 1030 !important;
      box-shadow: 2px 4px 6px 1px #1f1f1f !important;
    background-color: #0c1b6a;
    background: linear-gradient(89deg, rgb(10 23 93) 0%, rgb(60 88 235) 50%, rgb(8 22 92) 100%) !important;
}

.input-group-text{
	border: 1px solid #b0aeae;
	background: linear-gradient(180deg, rgb(149 154 156) 0%, rgb(254 254 254) 25%, rgb(218 221 224) 50%, rgb(254 254 254) 75%, rgb(114 115 116) 100%);}
	
	    .content {
       background-color: #ffffff;
        border-radius: 10px;
    }
	
	.bg-gray-darker {
    background-color: #132689 !important;
}
 #sidebar {
    color: #dfe4f1!important;
    background-color: #dae6ff !important;
    box-shadow: none;
}
.nav-main-dark .nav-main-link, .sidebar-dark #sidebar .nav-main-link, .page-header-dark #page-header .nav-main-link, .dark-mode #side-overlay .nav-main-link, .dark-mode #main-container .nav-main-link {
    color: #0b4567;
}
.bg-danger {
    background-color: #314acd !important;
    border-radius: 10px 10px 0px 0;
}

.block{
box-shadow: 0px -1px 5px 1px rgb(22 60 145 / 74%), 0 1px 2px rgba(214, 221, 237, 0.5);
}
    .content.content-full {
        background-color: #080d1f52;
    }
	
	
/*.bg-light {
    box-shadow: 2px 4px 6px 1px #1f1f1f !important;
    background-color: #0c1b6a;
    background: linear-gradient(89deg, rgb(10 23 93) 0%, rgb(33 70 150) 50%, rgb(8 22 92) 100%) !important;
    border-radius: 10px;
    border: 1px solid #0a225b;
}*/

.ent-sb {
  background-image: url(../../images/fifafive/sbobet.png) !important;
    background-position: center;
    border-radius: 10px;
	box-shadow: 2px 4px 6px 1px #1f1f1f !important;
    border-radius: 10px;
    border: 1px solid #0a225b;
    padding-bottom: 30px;
    padding-top: 30px;
}
.ent-lotto {
   	 box-shadow: 2px 4px 6px 1px #1f1f1f !important;
   background-image: url(../../images/fifafive/Lotto.png) !important;
    background-position: center;
    border-radius: 10px;
    border: 1px solid #0a225b;
    padding-bottom: 30px;
    padding-top: 30px;
}
.ent-nova {
    	 box-shadow: 2px 4px 6px 1px #1f1f1f !important;
    background-image: url(../../images/fifafive/sbobet.png) !important;
    background-position: center;
    border-radius: 10px;
    border: 1px solid #0a225b;
    padding-bottom: 30px;
    padding-top: 30px;
}
.ent-gclub {
   	 box-shadow: 2px 4px 6px 1px #1f1f1f !important;
  background-image: url(../../images/fifafive/Gclub.png) !important;
    background-position: center;
    border-radius: 10px;
    border: 1px solid #0a225b;
    padding-bottom: 30px;
    padding-top: 30px;
}
.ent-ufa {
   	 box-shadow: 2px 4px 6px 1px #1f1f1f !important;
   background-image: url(../../images/fifafive/sbobet.png) !important;
    background-position: center;
    border-radius: 10px;
    border: 1px solid #0a225b;
    padding-bottom: 30px;
    padding-top: 30px;
}
.ent-holiday {
  	 box-shadow: 2px 4px 6px 1px #1f1f1f !important;
  background-image: url(../../images/fifafive/holiday.png) !important;
    background-position: center;
    border-radius: 10px;
    border: 1px solid #0a225b;
    padding-bottom: 30px;
    padding-top: 30px;
}


	@media (min-width: 992px) {
    .menu-mb {
        display: none !important;
    }
}

/* =========================================================
   REGISTER FORM - CLEAN FINAL CSS
   CSS ONLY / ไม่แก้ HTML / ไม่เพิ่ม CLASS
========================================================= */

:root {
    --reg-blue: #2865e8;
    --reg-blue-dark: #1f56d2;
    --reg-navy: #08245f;
    --reg-text: #12264f;
    --reg-muted: #8e9db8;
    --reg-border: #bfd0ef;
    --reg-border-soft: #dce5f4;
    --reg-input-bg: #fbfcff;
    --reg-card: #ffffff;
    --reg-head: #f7f9fe;
    --reg-success: #24b36b;
    --reg-danger: #e34c5c;
}

/* ========================= STEPPER ========================= */
.progress.mb-3[style*="height: 7px"] {
    position: relative !important;
    display: block !important;
    width: calc(100% - 30px) !important;
    max-width: 100% !important;
    height: 168px !important;
    margin: 0px auto 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: var(--reg-head) !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    border-bottom: 1px solid #e3e8f3 !important;
    border-radius: 13px 13px 0 0 !important;
   /* box-shadow: 0 18px 45px rgba(15,48,111,.18) !important;*/
}
.progress.mb-3[style*="height: 7px"] .progress-bar {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.progress.mb-3:has(.progress-bar[style*="33.33%"]) {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27448%27%20height%3D%27168%27%20viewBox%3D%270%200%20448%20168%27%3E%3Cline%20x1%3D%27108%27%20y1%3D%27108%27%20x2%3D%27208%27%20y2%3D%27108%27%20stroke%3D%27%23dce3ef%27%20stroke-width%3D%272%27%2F%3E%3Cline%20x1%3D%27240%27%20y1%3D%27108%27%20x2%3D%27340%27%20y2%3D%27108%27%20stroke%3D%27%23dce3ef%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2792%27%20cy%3D%27108%27%20r%3D%2716%27%20fill%3D%27%232865e8%27%2F%3E%3Ctext%20x%3D%2792%27%20y%3D%27112%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2Csans-serif%27%20font-size%3D%2712%27%20font-weight%3D%27700%27%20fill%3D%27%23ffffff%27%3E1%3C%2Ftext%3E%3Ccircle%20cx%3D%27224%27%20cy%3D%27108%27%20r%3D%2716%27%20fill%3D%27%23e8edf6%27%2F%3E%3Ctext%20x%3D%27224%27%20y%3D%27112%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2Csans-serif%27%20font-size%3D%2712%27%20font-weight%3D%27700%27%20fill%3D%27%237f8fa9%27%3E2%3C%2Ftext%3E%3Ccircle%20cx%3D%27356%27%20cy%3D%27108%27%20r%3D%2716%27%20fill%3D%27%23e8edf6%27%2F%3E%3Ctext%20x%3D%27356%27%20y%3D%27112%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2Csans-serif%27%20font-size%3D%2712%27%20font-weight%3D%27700%27%20fill%3D%27%237f8fa9%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2792%27%20y%3D%27146%27%20text-anchor%3D%27middle%27%20font-family%3D%27Tahoma%2CArial%2Csans-serif%27%20font-size%3D%2710%27%20fill%3D%27%2371819d%27%3E%E0%B8%9A%E0%B8%B1%E0%B8%8D%E0%B8%8A%E0%B8%B5%E0%B8%9C%E0%B8%B9%E0%B9%89%E0%B9%83%E0%B8%8A%E0%B9%89%3C%2Ftext%3E%3Ctext%20x%3D%27224%27%20y%3D%27146%27%20text-anchor%3D%27middle%27%20font-family%3D%27Tahoma%2CArial%2Csans-serif%27%20font-size%3D%2710%27%20fill%3D%27%2371819d%27%3E%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AA%E0%B8%A1%E0%B8%B2%E0%B8%8A%E0%B8%B4%E0%B8%81%3C%2Ftext%3E%3Ctext%20x%3D%27356%27%20y%3D%27146%27%20text-anchor%3D%27middle%27%20font-family%3D%27Tahoma%2CArial%2Csans-serif%27%20font-size%3D%2710%27%20fill%3D%27%2371819d%27%3E%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B9%80%E0%B8%9E%E0%B8%B4%E0%B9%88%E0%B8%A1%E0%B9%80%E0%B8%95%E0%B8%B4%E0%B8%A1%3C%2Ftext%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 448px 168px !important;
}
.progress.mb-3:has(.progress-bar[style*="66.66%"]) {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27448%27%20height%3D%27168%27%20viewBox%3D%270%200%20448%20168%27%3E%3Cline%20x1%3D%27108%27%20y1%3D%27108%27%20x2%3D%27208%27%20y2%3D%27108%27%20stroke%3D%27%232865e8%27%20stroke-width%3D%272%27%2F%3E%3Cline%20x1%3D%27240%27%20y1%3D%27108%27%20x2%3D%27340%27%20y2%3D%27108%27%20stroke%3D%27%23dce3ef%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2792%27%20cy%3D%27108%27%20r%3D%2716%27%20fill%3D%27%232865e8%27%2F%3E%3Ctext%20x%3D%2792%27%20y%3D%27112%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2Csans-serif%27%20font-size%3D%2712%27%20font-weight%3D%27700%27%20fill%3D%27%23ffffff%27%3E1%3C%2Ftext%3E%3Ccircle%20cx%3D%27224%27%20cy%3D%27108%27%20r%3D%2716%27%20fill%3D%27%232865e8%27%2F%3E%3Ctext%20x%3D%27224%27%20y%3D%27112%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2Csans-serif%27%20font-size%3D%2712%27%20font-weight%3D%27700%27%20fill%3D%27%23ffffff%27%3E2%3C%2Ftext%3E%3Ccircle%20cx%3D%27356%27%20cy%3D%27108%27%20r%3D%2716%27%20fill%3D%27%23e8edf6%27%2F%3E%3Ctext%20x%3D%27356%27%20y%3D%27112%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2Csans-serif%27%20font-size%3D%2712%27%20font-weight%3D%27700%27%20fill%3D%27%237f8fa9%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2792%27%20y%3D%27146%27%20text-anchor%3D%27middle%27%20font-family%3D%27Tahoma%2CArial%2Csans-serif%27%20font-size%3D%2710%27%20fill%3D%27%2371819d%27%3E%E0%B8%9A%E0%B8%B1%E0%B8%8D%E0%B8%8A%E0%B8%B5%E0%B8%9C%E0%B8%B9%E0%B9%89%E0%B9%83%E0%B8%8A%E0%B9%89%3C%2Ftext%3E%3Ctext%20x%3D%27224%27%20y%3D%27146%27%20text-anchor%3D%27middle%27%20font-family%3D%27Tahoma%2CArial%2Csans-serif%27%20font-size%3D%2710%27%20fill%3D%27%2371819d%27%3E%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AA%E0%B8%A1%E0%B8%B2%E0%B8%8A%E0%B8%B4%E0%B8%81%3C%2Ftext%3E%3Ctext%20x%3D%27356%27%20y%3D%27146%27%20text-anchor%3D%27middle%27%20font-family%3D%27Tahoma%2CArial%2Csans-serif%27%20font-size%3D%2710%27%20fill%3D%27%2371819d%27%3E%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B9%80%E0%B8%9E%E0%B8%B4%E0%B9%88%E0%B8%A1%E0%B9%80%E0%B8%95%E0%B8%B4%E0%B8%A1%3C%2Ftext%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 448px 168px !important;
}
.progress.mb-3:has(.progress-bar[style*="100%"]) {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27448%27%20height%3D%27168%27%20viewBox%3D%270%200%20448%20168%27%3E%3Cline%20x1%3D%27108%27%20y1%3D%27108%27%20x2%3D%27208%27%20y2%3D%27108%27%20stroke%3D%27%232865e8%27%20stroke-width%3D%272%27%2F%3E%3Cline%20x1%3D%27240%27%20y1%3D%27108%27%20x2%3D%27340%27%20y2%3D%27108%27%20stroke%3D%27%232865e8%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2792%27%20cy%3D%27108%27%20r%3D%2716%27%20fill%3D%27%232865e8%27%2F%3E%3Ctext%20x%3D%2792%27%20y%3D%27112%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2Csans-serif%27%20font-size%3D%2712%27%20font-weight%3D%27700%27%20fill%3D%27%23ffffff%27%3E1%3C%2Ftext%3E%3Ccircle%20cx%3D%27224%27%20cy%3D%27108%27%20r%3D%2716%27%20fill%3D%27%232865e8%27%2F%3E%3Ctext%20x%3D%27224%27%20y%3D%27112%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2Csans-serif%27%20font-size%3D%2712%27%20font-weight%3D%27700%27%20fill%3D%27%23ffffff%27%3E2%3C%2Ftext%3E%3Ccircle%20cx%3D%27356%27%20cy%3D%27108%27%20r%3D%2716%27%20fill%3D%27%232865e8%27%2F%3E%3Ctext%20x%3D%27356%27%20y%3D%27112%27%20text-anchor%3D%27middle%27%20font-family%3D%27Arial%2Csans-serif%27%20font-size%3D%2712%27%20font-weight%3D%27700%27%20fill%3D%27%23ffffff%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2792%27%20y%3D%27146%27%20text-anchor%3D%27middle%27%20font-family%3D%27Tahoma%2CArial%2Csans-serif%27%20font-size%3D%2710%27%20fill%3D%27%2371819d%27%3E%E0%B8%9A%E0%B8%B1%E0%B8%8D%E0%B8%8A%E0%B8%B5%E0%B8%9C%E0%B8%B9%E0%B9%89%E0%B9%83%E0%B8%8A%E0%B9%89%3C%2Ftext%3E%3Ctext%20x%3D%27224%27%20y%3D%27146%27%20text-anchor%3D%27middle%27%20font-family%3D%27Tahoma%2CArial%2Csans-serif%27%20font-size%3D%2710%27%20fill%3D%27%2371819d%27%3E%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AA%E0%B8%A1%E0%B8%B2%E0%B8%8A%E0%B8%B4%E0%B8%81%3C%2Ftext%3E%3Ctext%20x%3D%27356%27%20y%3D%27146%27%20text-anchor%3D%27middle%27%20font-family%3D%27Tahoma%2CArial%2Csans-serif%27%20font-size%3D%2710%27%20fill%3D%27%2371819d%27%3E%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B9%80%E0%B8%9E%E0%B8%B4%E0%B9%88%E0%B8%A1%E0%B9%80%E0%B8%95%E0%B8%B4%E0%B8%A1%3C%2Ftext%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 448px 168px !important;
}

/* ========================= CARD / TITLE ========================= */
#form-register {
    position: relative !important;
    width: calc(100% - 30px) !important;
   /* max-width: 448px !important;*/
     max-width: 90% !important;
    margin: 0 auto 40px !important;
    padding: 25px 29px 26px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    border-top: 0 !important;
    border-radius: 0 0 13px 13px !important;
   /* box-shadow: 0 20px 45px rgba(15,48,111,.18) !important;*/
    color: var(--reg-text) !important;
    font-size: 14px !important;
}
#form-register::before {
    content: "สมัครสมาชิก" !important;
    position: absolute !important;
    top: -139px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    color: var(--reg-navy) !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    z-index: 20 !important;
    pointer-events: none !important;
}
#form-register::after {
    position: absolute !important;
    top: -108px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    color: #8b98b4 !important;
    font-size: 12px !important;
    z-index: 20 !important;
    pointer-events: none !important;
}
body:has(.progress-bar[style*="33.33%"]) #form-register::after { content: "ขั้นตอน 1 จาก 3" !important; }
body:has(.progress-bar[style*="66.66%"]) #form-register::after { content: "ขั้นตอน 2 จาก 3" !important; }
body:has(.progress-bar[style*="100%"]) #form-register::after { content: "ขั้นตอน 3 จาก 3" !important; }

/* ========================= STEP DISPLAY / D-NONE ========================= */
#form-register .js-step { display: none !important; }
#form-register .js-step.js-step-active { display: block !important; }
#form-register .form-group.row:not(.d-none) {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 0 14px !important;
}
#form-register .form-group.row.d-none { display: none !important; }

/* ========================= LABEL / COLUMNS ========================= */
#form-register .col-form-label,
#form-register .bd-font {
    font-size: 14px !important;
}
#form-register .col-form-label {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 0 6px !important;
    margin: 0 !important;
    color: #112652 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}
#form-register .form-group.row > .col-lg-8 {
    position: relative !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* ========================= INPUT / SELECT ========================= */
#form-register .form-control,
#form-register input.form-control,
#form-register select.form-control {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 8px 45px 8px 43px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--reg-border) !important;
    border-radius: 9px !important;
    background: var(--reg-input-bg) !important;
    background-image: none !important;
    color: #19305e !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    outline: none !important;
}
#form-register .form-control::placeholder {
    color: #a1adc4 !important;
    opacity: 1 !important;
    font-size: 14px !important;
}
#form-register .form-control:focus {
    border-color: #4d7deb !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(39,101,233,.08) !important;
}
#form-register .form-control:disabled,
#form-register .form-control[readonly] {
    opacity: 1 !important;
    background: #f7f9fd !important;
    color: #75839f !important;
    -webkit-text-fill-color: #75839f !important;
}
#form-register .form-control.is-valid { border-color: #85d5ad !important; background-image: none !important; }
#form-register .form-control.is-invalid { border-color: #e7606e !important; background-image: none !important; }
#form-register select.form-control { cursor: pointer !important; appearance: auto !important; -webkit-appearance: auto !important; }

/* ========================= LEFT ICONS ========================= */
#form-register .col-lg-8:has(> #tel)::before,
#form-register .col-lg-8:has(> #aio_password)::before,
#form-register .col-lg-8:has(> #aio_password_confirmation)::before,
#form-register .col-lg-8:has(> #agent)::before,
#form-register .col-lg-8:has(> #nickname)::before,
#form-register .col-lg-8:has(> #bank)::before,
#form-register .col-lg-8:has(> #bank_num)::before,
#form-register .col-lg-8:has(> #referer)::before,
#form-register .col-lg-8:has(> #keyf)::before {
    content: "" !important;
    position: absolute !important;
    left: 15px !important;
    top: 23px !important;
    width: 16px !important;
    height: 16px !important;
    transform: translateY(-50%) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px !important;
    z-index: 5 !important;
    pointer-events: none !important;
}
#form-register .col-lg-8:has(> #tel)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2393a3c0%27%20stroke-width%3D%272%27%3E%3Crect%20x%3D%277%27%20y%3D%272%27%20width%3D%2710%27%20height%3D%2720%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M10%2018h4%27%2F%3E%3C%2Fsvg%3E") !important; }
#form-register .col-lg-8:has(> #aio_password)::before,
#form-register .col-lg-8:has(> #aio_password_confirmation)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2393a3c0%27%20stroke-width%3D%272%27%3E%3Crect%20x%3D%274%27%20y%3D%2710%27%20width%3D%2716%27%20height%3D%2711%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010V7a4%204%200%200%201%208%200v3%27%2F%3E%3C%2Fsvg%3E") !important; }
#form-register .col-lg-8:has(> #agent)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2393a3c0%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M8%2012h4M10%2010v4%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2711%27%20r%3D%271%27%20fill%3D%27%2393a3c0%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2714%27%20r%3D%271%27%20fill%3D%27%2393a3c0%27%2F%3E%3Cpath%20d%3D%27M6%208h12c2%200%203%202%203%205l-1%205c-.3%201.5-2%202-3%201l-3-3H10l-3%203c-1%201-2.7.5-3-1l-1-5c0-3%201-5%203-5z%27%2F%3E%3C%2Fsvg%3E") !important; }
#form-register .col-lg-8:has(> #nickname)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2393a3c0%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M4%2021a8%208%200%200%201%2016%200%27%2F%3E%3C%2Fsvg%3E") !important; }
#form-register .col-lg-8:has(> #bank)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2393a3c0%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M3%209h18M5%209v8M9%209v8M15%209v8M19%209v8M3%2020h18M12%203l9%204H3l9-4z%27%2F%3E%3C%2Fsvg%3E") !important; }
#form-register .col-lg-8:has(> #bank_num)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2393a3c0%27%20stroke-width%3D%272%27%3E%3Crect%20x%3D%272%27%20y%3D%275%27%20width%3D%2720%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M2%2010h20%27%2F%3E%3C%2Fsvg%3E") !important; }
#form-register .col-lg-8:has(> #referer)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2393a3c0%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M22%202%209%2015M22%202l-7%2020-4-9-9-4%2020-7z%27%2F%3E%3C%2Fsvg%3E") !important; }
#form-register .col-lg-8:has(> #keyf)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2393a3c0%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2715%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27m11%2012%209-9M17%206l2%202M14%209l2%202%27%2F%3E%3C%2Fsvg%3E") !important; }

/* ========================= VALIDATION ========================= */
#form-register .fv-plugins-icon.fa-check {
    position: absolute !important;
    right: 13px !important;
    top: 23px !important;
    width: 20px !important;
    height: 20px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: var(--reg-success) !important;
    color: #fff !important;
    font-family: Arial,sans-serif !important;
    font-size: 0 !important;
    box-shadow: 0 2px 5px rgba(37,182,107,.18) !important;
    z-index: 10 !important;
}
#form-register .fv-plugins-icon.fa-check::before {
    content: "✓" !important;
    color: #fff !important;
    font-family: Arial,sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
#form-register .fv-plugins-icon:not(.fa-check) { background: transparent !important; }
#form-register .fv-plugins-icon:not(.fa-check)::before { content: "" !important; }
#form-register .col-lg-8:has(> select.form-control) .fv-plugins-icon.fa-check { right: 30px !important; }
#form-register .fv-plugins-message-container,
#form-register small,
#form-register small.text-danger {
    font-size: 14px !important;
    line-height: 1.4 !important;
}
#form-register .fv-plugins-message-container { margin-top: 5px !important; color: var(--reg-danger) !important; }
#form-register small.text-danger { display: block !important; margin-top: 3px !important; color: var(--reg-danger) !important; }

/* ========================= STEP 2: ACCOUNT NAME ========================= */
#form-register .js-step[data-step="2"] .form-group.row:has(#yourtitle) {
    display: grid !important;
    grid-template-columns: 24% minmax(0,1fr) minmax(0,1fr) !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    width: 100% !important;
    margin: 0 0 14px !important;
}
#form-register .js-step[data-step="2"] .form-group.row:has(#yourtitle) > label {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 6px !important;
}
#form-register .js-step[data-step="2"] .form-group.row:has(#yourtitle) > .col-lg-2,
#form-register .js-step[data-step="2"] .form-group.row:has(#yourtitle) > .col-lg-3 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    position: relative !important;
}
#form-register .js-step[data-step="2"] #yourtitle,
#form-register .js-step[data-step="2"] #yourname,
#form-register .js-step[data-step="2"] #yourlastname {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    padding-left: 12px !important;
    padding-right: 38px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}
#form-register .js-step[data-step="2"] .form-group.row:has(#yourtitle) > .col-lg-2 .fv-plugins-icon.fa-check,
#form-register .js-step[data-step="2"] .form-group.row:has(#yourtitle) > .col-lg-3 .fv-plugins-icon.fa-check {
    top: 23px !important;
    right: 9px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}
#form-register .js-step[data-step="2"] .form-group.row:has(#yourtitle) > .col-lg-2:has(select) .fv-plugins-icon.fa-check {
    right: 27px !important;
}

/* English-name fields: JS/d-none เดิมเป็นคนควบคุมว่าจะโชว์หรือซ่อน */
#form-register #extraEngNameFields:not(.d-none) {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
}
#form-register #extraEngNameFields.d-none { display: none !important; }
#form-register #extraEngNameFields > label {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 6px !important;
    margin: 0 !important;
}
#form-register #extraEngNameFields > div.col-lg-4 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    position: relative !important;
}
#form-register #extraEngNameFields .form-control { padding-left: 12px !important; padding-right: 38px !important; }

/* ========================= OFFSETS ========================= */
#form-register .offset-lg-4,
#form-register .offset-md-4 { margin-left: 0 !important; }

/* ========================= STEP 3 BONUS ========================= */
#form-register .js-step[data-step="3"] .form-group-bonus {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 0 16px !important;
    padding: 14px !important;
    background: #f8faff !important;
    border: 1px solid var(--reg-border-soft) !important;
    border-radius: 10px !important;
}
#form-register .js-step[data-step="3"] .form-group-bonus > label {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #11254d !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
#form-register .js-step[data-step="3"] .form-group-bonus > .col-lg-8.pt-2 {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
#form-register .js-step[data-step="3"] .form-group-bonus .form-check-inline {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-height: 57px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#form-register .js-step[data-step="3"] .form-group-bonus .form-check-label {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 57px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 12px 22px 48px !important;
    background: #fff !important;
    border: 1px solid #cbd8ee !important;
    border-radius: 9px !important;
    color: #536684 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}
#form-register .js-step[data-step="3"] .form-group-bonus .form-check-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
}
#form-register .js-step[data-step="3"] .form-group-bonus .form-check-inline:has(.form-check-input:checked) .form-check-label {
    border-color: var(--reg-blue) !important;
    background: #f5f8ff !important;
    box-shadow: 0 0 0 3px rgba(40,101,232,.10) !important;
    color: var(--reg-blue) !important;
}
/* รับโบนัส: gift icon เทา / น้ำเงินเมื่อเลือก */
#form-register .js-step[data-step="3"] .form-check-inline:first-of-type .form-check-label::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2393a3c0%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%278%27%20width%3D%2718%27%20height%3D%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M5%2012v9h14v-9M12%208v13%27%2F%3E%3Cpath%20d%3D%27M12%208H7.5A2.5%202.5%200%201%201%2010%205.5C10%207%2012%208%2012%208Z%27%2F%3E%3Cpath%20d%3D%27M12%208h4.5A2.5%202.5%200%201%200%2014%205.5C14%207%2012%208%2012%208Z%27%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    border-radius: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
}
#form-register .js-step[data-step="3"] .form-check-inline:first-of-type:has(.form-check-input:checked) .form-check-label::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232865e8%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%278%27%20width%3D%2718%27%20height%3D%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M5%2012v9h14v-9M12%208v13%27%2F%3E%3Cpath%20d%3D%27M12%208H7.5A2.5%202.5%200%201%201%2010%205.5C10%207%2012%208%2012%208Z%27%2F%3E%3Cpath%20d%3D%27M12%208h4.5A2.5%202.5%200%201%200%2014%205.5C14%207%2012%208%2012%208Z%27%2F%3E%3C%2Fsvg%3E") !important;
}
#form-register .js-step[data-step="3"] .form-check-inline:first-of-type .form-check-label::after {
    content: "เลือกโปรโมชั่นต้อนรับ" !important;
    position: absolute !important;
    left: 48px !important;
    bottom: 7px !important;
    color: #7182a2 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
}
/* ไม่รับ: วงกลมเทา / น้ำเงินเมื่อเลือก */
#form-register .js-step[data-step="3"] .form-check-inline:nth-of-type(2) .form-check-label::before {
    content: "✓" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 21px !important;
    height: 21px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #9aa8bd !important;
    color: #fff !important;
    font-family: Arial,sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    z-index: 4 !important;
}
#form-register .js-step[data-step="3"] .form-check-inline:nth-of-type(2):has(.form-check-input:checked) .form-check-label::before {
    background: var(--reg-blue) !important;
}
#form-register .js-step[data-step="3"] .form-check-inline:nth-of-type(2) .form-check-label::after {
    content: "สมัครแบบปกติ" !important;
    position: absolute !important;
    left: 48px !important;
    bottom: 7px !important;
    color: #7182a2 !important;
    font-size: 10px !important;
}
#form-register .js-step[data-step="3"] .form-group-bonus > .col-lg-8.offset-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}
#form-register .form-group-bonus .fv-plugins-icon { display: none !important; }

/* ========================= STEP 3 OTHER FIELDS ========================= */
#form-register .js-step[data-step="3"] .form-group.row:has(#referer) { margin-bottom: 12px !important; }
#form-register .js-step[data-step="3"] #referer { margin-bottom: 0 !important; }
#form-register .js-step[data-step="3"] label[for="keyf"] { display: none !important; }
#form-register .js-step[data-step="3"] .form-group.row:has(#keyf) > .col-lg-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   BUTTONS - FINAL
   STEP 1 = NEXT 100%
   STEP 2 / STEP 3 = 50 / 50
========================================================= */


/* กล่องครอบปุ่ม */
#form-register
> .d-flex.justify-content-between {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    width: 100% !important;

    gap: 10px !important;

    margin: 21px 0 0 !important;
    padding: 0 !important;

    align-items: stretch !important;
}


/* =========================================================
   WRAPPER ปุ่มก่อนหน้า
========================================================= */

#form-register
> .d-flex.justify-content-between
> .fs {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: none !important;
}


/* =========================================================
   ปุ่มก่อนหน้า
========================================================= */

#form-register
#prevButton {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    border: 1px solid #d4dfef !important;

    border-radius: 9px !important;

    background: #ffffff !important;

    color: #536785 !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    box-shadow: none !important;

    flex: none !important;
}


/* icon ก่อนหน้า */
#form-register
#prevButton i {
    margin-right: 7px !important;
}


/* =========================================================
   ปุ่มต่อไป
========================================================= */

#form-register
#nextButton {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    border: 0 !important;

    border-radius: 9px !important;

    background: var(--reg-blue) !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    box-shadow:
        0 7px 18px rgba(39,101,233,.22) !important;

    flex: none !important;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


#form-register
#nextButton:hover {
    background:
        var(--reg-blue-dark) !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 20px rgba(39,101,233,.28) !important;
}


/* icon ต่อไป */
#form-register
#nextButton i {
    margin-left: 7px !important;
}


/* =========================================================
   STEP 1
   prevButton มี d-none
   ซ่อนช่องซ้าย แล้วให้ NEXT กินเต็ม 2 columns
========================================================= */

#form-register
> .d-flex.justify-content-between
> .fs:has(#prevButton.d-none) {
    display: none !important;
}


#form-register
> .d-flex.justify-content-between:has(#prevButton.d-none)
> #nextButton {
    grid-column: 1 / -1 !important;

    width: 100% !important;
}


/* =========================================================
   STEP 2
   ก่อนหน้า 50% / ต่อไป 50%
========================================================= */

body:has(.progress-bar[style*="66.66%"])
#form-register
> .d-flex.justify-content-between {
    grid-template-columns:
        minmax(0,1fr) minmax(0,1fr) !important;
}


/* =========================================================
   STEP 3
   ย้อนกลับ 50% / ยืนยันสมัครสมาชิก 50%
========================================================= */

body:has(.progress-bar[style*="100%"])
#form-register
> .d-flex.justify-content-between {
    grid-template-columns:
        minmax(0,1fr) minmax(0,1fr) !important;
}


/* =========================================================
   STEP 3 NEXT TEXT
========================================================= */

body:has(.progress-bar[style*="100%"])
#form-register
#nextButton {
    font-size: 0 !important;
}


body:has(.progress-bar[style*="100%"])
#form-register
#nextButton::before {
    content: "ยืนยันสมัครสมาชิก" !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1 !important;
}


body:has(.progress-bar[style*="100%"])
#form-register
#nextButton i {
    display: none !important;
}


body:has(.progress-bar[style*="100%"])
#form-register
#nextButton::after {
    content: "✓" !important;

    margin-left: 7px !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
}


/* =========================================================
   STEP 3 PREV TEXT
========================================================= */

body:has(.progress-bar[style*="100%"])
#form-register
#prevButton {
    font-size: 0 !important;
}


body:has(.progress-bar[style*="100%"])
#form-register
#prevButton i {
    display: none !important;
}


body:has(.progress-bar[style*="100%"])
#form-register
#prevButton::before {
    content: "←  ย้อนกลับ" !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1 !important;
}


/* =========================================================
   MOBILE
   ยังแบ่ง 50 / 50 เหมือน Desktop
========================================================= */

@media (max-width: 575.98px) {

    #form-register
    > .d-flex.justify-content-between {
        grid-template-columns:
            minmax(0,1fr) minmax(0,1fr) !important;

        gap: 8px !important;
    }


    /* STEP 1 NEXT เต็ม */
    #form-register
    > .d-flex.justify-content-between:has(#prevButton.d-none)
    > #nextButton {
        grid-column:
            1 / -1 !important;
    }


    #form-register
    #prevButton,

    #form-register
    #nextButton {
        width: 100% !important;

        min-width: 0 !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        font-size: 14px !important;

        white-space: nowrap !important;
    }


    body:has(.progress-bar[style*="100%"])
    #form-register
    #prevButton::before,

    body:has(.progress-bar[style*="100%"])
    #form-register
    #nextButton::before {
        font-size: 14px !important;
    }

}


/* ========================= MOBILE ========================= */
@media (max-width: 575.98px) {
    .progress.mb-3[style*="height: 7px"] {
        width: calc(100% - 24px) !important;
        height: 160px !important;
        margin-top: 18px !important;
        background-size: 100% 160px !important;
    }
    #form-register {
        width: calc(100% - 24px) !important;
        padding: 23px 20px 24px !important;
        margin-bottom: 25px !important;
    }
    #form-register::before { top: -134px !important; font-size: 23px !important; }
    #form-register::after { top: -104px !important; font-size: 11px !important; }
    #form-register .js-step[data-step="2"] .form-group.row:has(#yourtitle) {
        grid-template-columns: 27% minmax(0,1fr) minmax(0,1fr) !important;
        column-gap: 6px !important;
    }
    #form-register #extraEngNameFields:not(.d-none) {
        grid-template-columns: 1fr !important;
        row-gap: 7px !important;
    }
    #form-register .js-step[data-step="3"] .form-group-bonus > .col-lg-8.pt-2 {
        grid-template-columns: 1fr 1fr !important;
    }
  
}

.block-menu1 {
    background-color: #191c25;
    color: #c8d6e5;
    border-radius: 1rem;
    margin-bottom: 15px;
    padding: 0.5rem 1rem;
}
.block-menu1 .block-title {
    color: #c8d6e5;
}

.account-balance {
    display: flex;
    align-items: center;
    background-color: #191c25;
    color: #c8d6e5;
    border-radius: 1rem;
    padding: 0.65em 1em;
}
.account-balance > .info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    line-height: 1;
}
.account-balance > .ic {
    height: 2.5em;
    object-fit: contain;
    margin-right: 1em;
}
.account-balance > .info > .title {
    font-size: 0.9em;
    font-weight: 200;
    text-align: left;
    color: #c8d6e5;
}
.account-balance > .info > .grid {
    display: flex;
    align-items: center;
}
.account-balance > .info > .grid > .amount {
    text-align: left;
    font-size: 1.3em;
    margin-top: auto;
    color: #c8d6e5;
}

.btn-refresh-credit {
    cursor: pointer;
}

.claimable_all_commission_box.card-commission {
    width: 80%;
    padding: 5px;
    color: #c8d6e5 !important;
    background: #004eff;
    background: linear-gradient(180deg, #004eff 0%, #060060 100%);
}
.claimable_all_commission_box.card-commission p {
    color: #c8d6e5;
}

.block-games {
    background-color: #191c25;
    color: #c8d6e5;
    border-radius: 1rem;
    margin-top: 15px;
}
.block-games .block-header {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom: none;
    color: #000;
    background: #ff9500;
    background: linear-gradient(0deg, #ff9500 0%, #ffe700 100%);
    padding: 0.5rem 1rem;
}
.block-games .block-title {
    color: #000;
}
.block-games .block-content {
    padding: 0px;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.block-games .game-group {
    padding: 0.5rem 0.5rem 0.5rem;
}
.game-group .flex-column {
    width: auto;
}
.game-group .menu-left-btn {
    background: transparent;
    box-shadow: none;
}
.game-group .menu-left-btn img {
    width: 60px;
    height: 59px;
    margin-top: 0px;
}
.game-group .active .menu-left-btn {
    background: #004eff;
    background: linear-gradient(180deg, #004eff 0%, #060060 100%);
}
.game-group .active .menu-left-btn img {
    width: 65px;
    height: 66px;
}
@media (min-width: 576px) {
    .game-group .menu-left-btn {
        width: 75px;
        height: 74px;
    }
}

.provider_menu.ribbon {
    position: relative;
    overflow: visible;
}
.provider_menu.ribbon .ribbon-box {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 50px;
    height: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
}
.provider_menu.ribbon .ribbon-box::before {
    display: none;
}
.provider_menu.ribbon .ribbon-box img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
}
.provider_menu.ribbon.ribbon-modern .ribbon-box {
    border-radius: 0 0 0 8px;
}
.provider_menu.ribbon.ribbon-danger .ribbon-box {
    animation: none;
}

.block-game-recently {
    background-color: #222f3e;
    color: #c8d6e5;
    padding: 0.5rem 0.5rem 0.5rem;
}
.block-game-recently h4 {
    font-size: 0.9em;
    margin-bottom: 5px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-recently-icon-block .swiper-slide {
    border-radius: 12px;
    border: 2px solid #e7c151;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    height: 50px;
    width: 50px !important;
}

.game-offcanvas {
    height: 100% !important;
    background-color: #191c25;
}
.game-offcanvas .offcanvas-body .row {
    padding-bottom: 150px;
}
.game-offcanvas .offcanvas-header {
    background: #ff9500;
    background: linear-gradient(0deg, #ff9500 0%, #ffe700 100%);
    color: #000 !important;
}
.game-offcanvas .offcanvas-title {
    color: #000 !important;
}
.game-offcanvas .offcanvas-body {
    color: #c8d6e5 !important;
}
.game_image {
    border-radius: 0px;
}
.block-list-game .block-header {
    color: #c8d6e5 !important;
    background: #004eff;
    background: linear-gradient(180deg, #004eff 0%, #060060 100%);
    text-align: center !important;
}
.block-list-game .block-header p {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center !important;
    margin-bottom: 0px;
}
.block-list-game .block-footer {
    background: #ff9500;
    background: linear-gradient(0deg, #ff9500 0%, #ffe700 100%);
    color: #000 !important;
    text-align: center !important;
    overflow: hidden;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}