:root {
                --color-primary-50: 240 253 244;
                --color-primary-100: 220 252 231;
                --color-primary-200: 187 247 208;
                --color-primary-300: 134 239 172;
                --color-primary-400: 74 222 128;
                --color-primary-500: 34 197 94;
                --color-primary-600: 22 163 74;
                --color-primary-700: 21 128 61;
                --color-primary-800: 22 101 52;
                --color-primary-900: 20 83 45;
                --color-primary-950: 5 46 22;
                --color-primary-DEFAULT: var(--color-primary-500);

                --color-gray-50: 249 250 251;
                --color-gray-100: 243 244 246;
                --color-gray-200: 229 231 235;
                --color-gray-300: 209 213 219;
                --color-gray-400: 156 163 175;
                --color-gray-500: 107 114 128;
                --color-gray-600: 75 85 99;
                --color-gray-700: 55 65 81;
                --color-gray-800: 31 41 55;
                --color-gray-900: 17 24 39;
                --color-gray-950: 3 7 18;
            }

            .dark {
                --color-primary-DEFAULT: var(--color-primary-400);
            }
            
                :root {
                --v-theme-background: 255, 255, 255;
                --v-theme-background-overlay-multiplier: 1;
                --v-theme-surface: 255, 255, 255;
                --v-theme-surface-overlay-multiplier: 1;
                --v-theme-surface-bright: 255, 255, 255;
                --v-theme-surface-bright-overlay-multiplier: 1;
                --v-theme-surface-light: 238, 238, 238;
                --v-theme-surface-light-overlay-multiplier: 1;
                --v-theme-surface-variant: 66, 66, 66;
                --v-theme-surface-variant-overlay-multiplier: 2;
                --v-theme-on-surface-variant: 238, 238, 238;
                --v-theme-primary: 250, 41, 86;
                --v-theme-primary-overlay-multiplier: 1;
                --v-theme-primary-darken-1: 31, 85, 146;
                --v-theme-primary-darken-1-overlay-multiplier: 2;
                --v-theme-secondary: 72, 169, 166;
                --v-theme-secondary-overlay-multiplier: 1;
                --v-theme-secondary-darken-1: 1, 135, 134;
                --v-theme-secondary-darken-1-overlay-multiplier: 1;
                --v-theme-error: 176, 0, 32;
                --v-theme-error-overlay-multiplier: 2;
                --v-theme-info: 33, 150, 243;
                --v-theme-info-overlay-multiplier: 1;
                --v-theme-success: 76, 175, 80;
                --v-theme-success-overlay-multiplier: 1;
                --v-theme-warning: 251, 140, 0;
                --v-theme-warning-overlay-multiplier: 1;
                --v-theme-on-background: 0, 0, 0;
                --v-theme-on-surface: 0, 0, 0;
                --v-theme-on-surface-bright: 0, 0, 0;
                --v-theme-on-surface-light: 0, 0, 0;
                --v-theme-on-primary: 255, 255, 255;
                --v-theme-on-primary-darken-1: 255, 255, 255;
                --v-theme-on-secondary: 255, 255, 255;
                --v-theme-on-secondary-darken-1: 255, 255, 255;
                --v-theme-on-error: 255, 255, 255;
                --v-theme-on-info: 255, 255, 255;
                --v-theme-on-success: 255, 255, 255;
                --v-theme-on-warning: 255, 255, 255;
                --v-border-color: 0, 0, 0;
                --v-border-opacity: 0.12;
                --v-high-emphasis-opacity: 0.87;
                --v-medium-emphasis-opacity: 0.6;
                --v-disabled-opacity: 0.38;
                --v-idle-opacity: 0.04;
                --v-hover-opacity: 0.04;
                --v-focus-opacity: 0.12;
                --v-selected-opacity: 0.08;
                --v-activated-opacity: 0.12;
                --v-pressed-opacity: 0.12;
                --v-dragged-opacity: 0.08;
                --v-theme-kbd: 33, 37, 41;
                --v-theme-on-kbd: 255, 255, 255;
                --v-theme-code: 245, 245, 245;
                --v-theme-on-code: 0, 0, 0;
            }
            .v-theme--light {
                color-scheme: normal;
                --v-theme-background: 255, 255, 255;
                --v-theme-background-overlay-multiplier: 1;
                --v-theme-surface: 255, 255, 255;
                --v-theme-surface-overlay-multiplier: 1;
                --v-theme-surface-bright: 255, 255, 255;
                --v-theme-surface-bright-overlay-multiplier: 1;
                --v-theme-surface-light: 238, 238, 238;
                --v-theme-surface-light-overlay-multiplier: 1;
                --v-theme-surface-variant: 66, 66, 66;
                --v-theme-surface-variant-overlay-multiplier: 2;
                --v-theme-on-surface-variant: 238, 238, 238;
                --v-theme-primary: 250, 41, 86;
                --v-theme-primary-overlay-multiplier: 1;
                --v-theme-primary-darken-1: 31, 85, 146;
                --v-theme-primary-darken-1-overlay-multiplier: 2;
                --v-theme-secondary: 72, 169, 166;
                --v-theme-secondary-overlay-multiplier: 1;
                --v-theme-secondary-darken-1: 1, 135, 134;
                --v-theme-secondary-darken-1-overlay-multiplier: 1;
                --v-theme-error: 176, 0, 32;
                --v-theme-error-overlay-multiplier: 2;
                --v-theme-info: 33, 150, 243;
                --v-theme-info-overlay-multiplier: 1;
                --v-theme-success: 76, 175, 80;
                --v-theme-success-overlay-multiplier: 1;
                --v-theme-warning: 251, 140, 0;
                --v-theme-warning-overlay-multiplier: 1;
                --v-theme-on-background: 0, 0, 0;
                --v-theme-on-surface: 0, 0, 0;
                --v-theme-on-surface-bright: 0, 0, 0;
                --v-theme-on-surface-light: 0, 0, 0;
                --v-theme-on-primary: 255, 255, 255;
                --v-theme-on-primary-darken-1: 255, 255, 255;
                --v-theme-on-secondary: 255, 255, 255;
                --v-theme-on-secondary-darken-1: 255, 255, 255;
                --v-theme-on-error: 255, 255, 255;
                --v-theme-on-info: 255, 255, 255;
                --v-theme-on-success: 255, 255, 255;
                --v-theme-on-warning: 255, 255, 255;
                --v-border-color: 0, 0, 0;
                --v-border-opacity: 0.12;
                --v-high-emphasis-opacity: 0.87;
                --v-medium-emphasis-opacity: 0.6;
                --v-disabled-opacity: 0.38;
                --v-idle-opacity: 0.04;
                --v-hover-opacity: 0.04;
                --v-focus-opacity: 0.12;
                --v-selected-opacity: 0.08;
                --v-activated-opacity: 0.12;
                --v-pressed-opacity: 0.12;
                --v-dragged-opacity: 0.08;
                --v-theme-kbd: 33, 37, 41;
                --v-theme-on-kbd: 255, 255, 255;
                --v-theme-code: 245, 245, 245;
                --v-theme-on-code: 0, 0, 0;
            }
            .v-theme--dark {
                color-scheme: dark;
                --v-theme-background: 18, 18, 18;
                --v-theme-background-overlay-multiplier: 1;
                --v-theme-surface: 33, 33, 33;
                --v-theme-surface-overlay-multiplier: 1;
                --v-theme-surface-bright: 204, 191, 214;
                --v-theme-surface-bright-overlay-multiplier: 2;
                --v-theme-surface-light: 66, 66, 66;
                --v-theme-surface-light-overlay-multiplier: 1;
                --v-theme-surface-variant: 163, 163, 163;
                --v-theme-surface-variant-overlay-multiplier: 2;
                --v-theme-on-surface-variant: 66, 66, 66;
                --v-theme-primary: 33, 150, 243;
                --v-theme-primary-overlay-multiplier: 2;
                --v-theme-primary-darken-1: 39, 124, 193;
                --v-theme-primary-darken-1-overlay-multiplier: 2;
                --v-theme-secondary: 84, 182, 178;
                --v-theme-secondary-overlay-multiplier: 2;
                --v-theme-secondary-darken-1: 72, 169, 166;
                --v-theme-secondary-darken-1-overlay-multiplier: 2;
                --v-theme-error: 207, 102, 121;
                --v-theme-error-overlay-multiplier: 2;
                --v-theme-info: 33, 150, 243;
                --v-theme-info-overlay-multiplier: 2;
                --v-theme-success: 76, 175, 80;
                --v-theme-success-overlay-multiplier: 2;
                --v-theme-warning: 251, 140, 0;
                --v-theme-warning-overlay-multiplier: 2;
                --v-theme-on-background: 255, 255, 255;
                --v-theme-on-surface: 255, 255, 255;
                --v-theme-on-surface-bright: 0, 0, 0;
                --v-theme-on-surface-light: 255, 255, 255;
                --v-theme-on-primary: 255, 255, 255;
                --v-theme-on-primary-darken-1: 255, 255, 255;
                --v-theme-on-secondary: 255, 255, 255;
                --v-theme-on-secondary-darken-1: 255, 255, 255;
                --v-theme-on-error: 255, 255, 255;
                --v-theme-on-info: 255, 255, 255;
                --v-theme-on-success: 255, 255, 255;
                --v-theme-on-warning: 255, 255, 255;
                --v-border-color: 255, 255, 255;
                --v-border-opacity: 0.12;
                --v-high-emphasis-opacity: 1;
                --v-medium-emphasis-opacity: 0.7;
                --v-disabled-opacity: 0.5;
                --v-idle-opacity: 0.1;
                --v-hover-opacity: 0.04;
                --v-focus-opacity: 0.12;
                --v-selected-opacity: 0.08;
                --v-activated-opacity: 0.12;
                --v-pressed-opacity: 0.16;
                --v-dragged-opacity: 0.08;
                --v-theme-kbd: 33, 37, 41;
                --v-theme-on-kbd: 255, 255, 255;
                --v-theme-code: 52, 52, 52;
                --v-theme-on-code: 204, 204, 204;
            }
            .bg-background {
                --v-theme-overlay-multiplier: var(--v-theme-background-overlay-multiplier);
                background-color: rgb(var(--v-theme-background)) !important;
                color: rgb(var(--v-theme-on-background)) !important;
            }
            .bg-surface {
                --v-theme-overlay-multiplier: var(--v-theme-surface-overlay-multiplier);
                background-color: rgb(var(--v-theme-surface)) !important;
                color: rgb(var(--v-theme-on-surface)) !important;
            }
            .bg-surface-bright {
                --v-theme-overlay-multiplier: var(--v-theme-surface-bright-overlay-multiplier);
                background-color: rgb(var(--v-theme-surface-bright)) !important;
                color: rgb(var(--v-theme-on-surface-bright)) !important;
            }
            .bg-surface-light {
                --v-theme-overlay-multiplier: var(--v-theme-surface-light-overlay-multiplier);
                background-color: rgb(var(--v-theme-surface-light)) !important;
                color: rgb(var(--v-theme-on-surface-light)) !important;
            }
            .bg-surface-variant {
                --v-theme-overlay-multiplier: var(--v-theme-surface-variant-overlay-multiplier);
                background-color: rgb(var(--v-theme-surface-variant)) !important;
                color: rgb(var(--v-theme-on-surface-variant)) !important;
            }
            .bg-primary {
                --v-theme-overlay-multiplier: var(--v-theme-primary-overlay-multiplier);
                background-color: rgb(var(--v-theme-primary)) !important;
                color: rgb(var(--v-theme-on-primary)) !important;
            }
            .bg-primary-darken-1 {
                --v-theme-overlay-multiplier: var(--v-theme-primary-darken-1-overlay-multiplier);
                background-color: rgb(var(--v-theme-primary-darken-1)) !important;
                color: rgb(var(--v-theme-on-primary-darken-1)) !important;
            }
            .bg-secondary {
                --v-theme-overlay-multiplier: var(--v-theme-secondary-overlay-multiplier);
                background-color: rgb(var(--v-theme-secondary)) !important;
                color: rgb(var(--v-theme-on-secondary)) !important;
            }
            .bg-secondary-darken-1 {
                --v-theme-overlay-multiplier: var(--v-theme-secondary-darken-1-overlay-multiplier);
                background-color: rgb(var(--v-theme-secondary-darken-1)) !important;
                color: rgb(var(--v-theme-on-secondary-darken-1)) !important;
            }
            .bg-error {
                --v-theme-overlay-multiplier: var(--v-theme-error-overlay-multiplier);
                background-color: rgb(var(--v-theme-error)) !important;
                color: rgb(var(--v-theme-on-error)) !important;
            }
            .bg-info {
                --v-theme-overlay-multiplier: var(--v-theme-info-overlay-multiplier);
                background-color: rgb(var(--v-theme-info)) !important;
                color: rgb(var(--v-theme-on-info)) !important;
            }
            .bg-success {
                --v-theme-overlay-multiplier: var(--v-theme-success-overlay-multiplier);
                background-color: rgb(var(--v-theme-success)) !important;
                color: rgb(var(--v-theme-on-success)) !important;
            }
            .bg-warning {
                --v-theme-overlay-multiplier: var(--v-theme-warning-overlay-multiplier);
                background-color: rgb(var(--v-theme-warning)) !important;
                color: rgb(var(--v-theme-on-warning)) !important;
            }
            .text-background {
                color: rgb(var(--v-theme-background)) !important;
            }
            .border-background {
                --v-border-color: var(--v-theme-background);
            }
            .text-surface {
                color: rgb(var(--v-theme-surface)) !important;
            }
            .border-surface {
                --v-border-color: var(--v-theme-surface);
            }
            .text-surface-bright {
                color: rgb(var(--v-theme-surface-bright)) !important;
            }
            .border-surface-bright {
                --v-border-color: var(--v-theme-surface-bright);
            }
            .text-surface-light {
                color: rgb(var(--v-theme-surface-light)) !important;
            }
            .border-surface-light {
                --v-border-color: var(--v-theme-surface-light);
            }
            .text-surface-variant {
                color: rgb(var(--v-theme-surface-variant)) !important;
            }
            .border-surface-variant {
                --v-border-color: var(--v-theme-surface-variant);
            }
            .on-surface-variant {
                color: rgb(var(--v-theme-on-surface-variant)) !important;
            }
            .text-primary {
                color: rgb(var(--v-theme-primary)) !important;
            }
            .border-primary {
                --v-border-color: var(--v-theme-primary);
            }
            .text-primary-darken-1 {
                color: rgb(var(--v-theme-primary-darken-1)) !important;
            }
            .border-primary-darken-1 {
                --v-border-color: var(--v-theme-primary-darken-1);
            }
            .text-secondary {
                color: rgb(var(--v-theme-secondary)) !important;
            }
            .border-secondary {
                --v-border-color: var(--v-theme-secondary);
            }
            .text-secondary-darken-1 {
                color: rgb(var(--v-theme-secondary-darken-1)) !important;
            }
            .border-secondary-darken-1 {
                --v-border-color: var(--v-theme-secondary-darken-1);
            }
            .text-error {
                color: rgb(var(--v-theme-error)) !important;
            }
            .border-error {
                --v-border-color: var(--v-theme-error);
            }
            .text-info {
                color: rgb(var(--v-theme-info)) !important;
            }
            .border-info {
                --v-border-color: var(--v-theme-info);
            }
            .text-success {
                color: rgb(var(--v-theme-success)) !important;
            }
            .border-success {
                --v-border-color: var(--v-theme-success);
            }
            .text-warning {
                color: rgb(var(--v-theme-warning)) !important;
            }
            .border-warning {
                --v-border-color: var(--v-theme-warning);
            }
            .on-background {
                color: rgb(var(--v-theme-on-background)) !important;
            }
            .on-surface {
                color: rgb(var(--v-theme-on-surface)) !important;
            }
            .on-surface-bright {
                color: rgb(var(--v-theme-on-surface-bright)) !important;
            }
            .on-surface-light {
                color: rgb(var(--v-theme-on-surface-light)) !important;
            }
            .on-primary {
                color: rgb(var(--v-theme-on-primary)) !important;
            }
            .on-primary-darken-1 {
                color: rgb(var(--v-theme-on-primary-darken-1)) !important;
            }
            .on-secondary {
                color: rgb(var(--v-theme-on-secondary)) !important;
            }
            .on-secondary-darken-1 {
                color: rgb(var(--v-theme-on-secondary-darken-1)) !important;
            }
            .on-error {
                color: rgb(var(--v-theme-on-error)) !important;
            }
            .on-info {
                color: rgb(var(--v-theme-on-info)) !important;
            }
            .on-success {
                color: rgb(var(--v-theme-on-success)) !important;
            }
            .on-warning {
                color: rgb(var(--v-theme-on-warning)) !important;
            }

            .bg-fr {
    background: #00366c;
    background: linear-gradient(142deg, #00366c, #550013);
}
            
            
#modal-login .v-overlay__content {
    transform-origin: center center;
    will-change: transform;
  }
  
  #modal-login .v-overlay__scrim {
    will-change: opacity;
  }
  
  
  @keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spining {
  animation: spin 2s linear infinite;
}


/*[id^="tab-"] {
    transition: opacity 0.5s ease-in-out;
}*/
  
/*   #form-register {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

   เมื่อเรียกใช้งาน ให้แสดงและค่อยๆ ปรากฏ 
  #form-register.show {
    display: block;
    opacity: 1;
  }

   ซ่อน content-main โดยไม่ให้มี animation 
  #content-main.hide {
    display: none;
  }*/
  
  
  
    @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  #form-register {
    display: none;
    opacity: 0;
    height: 100%;
  }

  #form-register.show {
    display: block;
    animation: fadeIn 0.2s ease-in-out forwards;
  }

  #content-main.hide {
    display: none;
  }
  
  
  .h-100 {
      height: 100%;
  }
  
  

#right-menu-content {
  position: fixed;
  top: 0;
  right: -330px; 
  width: 330px;
  height: 100vh;
  background-color: #fff;
  z-index: 1000;
  transition: right 0.3s ease-in-out; 
  overflow-y: auto;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}


#right-menu-content.show {
  right: 0;
}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}


.overlay.show {
  display: block;
}




[id^="content-"] {
    transition: opacity 0.3s ease-in-out;
}

.shadow-box-game {
    transition: all 0.3s ease;
}

.shadow-box-game:hover {
    transform: scale(1.05);
}

.router-link-active {
    filter: none !important;
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    color: white !important;
}

.router-link-active p {
    color: white !important;
}



/* Custom dropdown styles */
.bank-dropdown-container {
  position: relative;
  width: 100%;
}

.bank-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border: 1px solid rgba(57, 57, 57, 0.5);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  display: none;
  margin-top: 4px;
}

.bank-dropdown-menu.show {
  display: block;
}

.bank-option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.bank-option:hover {
  background-color: #f5f5f5;
}

.bank-logo {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  object-fit: contain;
}

.bank-name {
  font-size: 14px;
  color: #333;
}

.bank-placeholder {
  color: #999;
  font-style: italic;
}

/* Hide original input */
.bank-input-hidden {
  display: none;
}