.magnifier {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.magnifier-image {
    cursor: none;
}

.magnifying-glass {
    position: absolute;
    z-index: 1;
    background: #e5e5e5 no-repeat;
    border: solid #ebebeb;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.magnifying-glass.circle {
    border-radius: 50%;
}
.magnifying-glass.visible {
    opacity: 1;
}


.transform-component-module_wrapper__7HFJe {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    overflow: hidden;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    margin: 0;
    padding: 0;
}
.transform-component-module_content__uCDPE {
    display: flex;
    flex-wrap: wrap;
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: 0;
    padding: 0;
    transform-origin: 0% 0%;
}
.transform-component-module_content__uCDPE img {
    pointer-events: none;
}


.lf-progress {
    -webkit-appearance: none;
    -moz-apperance: none;
    width: 100%;
    /* margin: 0 10px; */
    height: 4px;
    border-radius: 3px;
    cursor: pointer;
}
.lf-progress:focus {
    outline: none;
    border: none;
}
.lf-progress::-moz-range-track {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}
.lf-progress::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    height: 13px;
    width: 13px;
    border: 0;
    border-radius: 50%;
    background: #0fccce;
    cursor: pointer;
}
.lf-progress::-moz-range-thumb {
    -moz-appearance: none !important;
    height: 13px;
    width: 13px;
    border: 0;
    border-radius: 50%;
    background: #0fccce;
    cursor: pointer;
}
.lf-progress::-ms-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.lf-progress::-ms-fill-lower {
    background: #ccc;
    border-radius: 3px;
}
.lf-progress::-ms-fill-upper {
    background: #ccc;
    border-radius: 3px;
}
.lf-progress::-ms-thumb {
    border: 0;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #0fccce;
    cursor: pointer;
}
.lf-progress:focus::-ms-fill-lower {
    background: #ccc;
}
.lf-progress:focus::-ms-fill-upper {
    background: #ccc;
}
.lf-player-container :focus {
    outline: 0;
}
.lf-popover {
    position: relative;
}

.lf-popover-content {
    display: inline-block;
    position: absolute;
    opacity: 1;
    visibility: visible;
    transform: translate(0, -10px);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.lf-popover-content.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(0, 0px);
}

.lf-player-btn-container {
    display: flex;
    align-items: center;
}
.lf-player-btn {
    cursor: pointer;
    fill: #999;
    width: 14px;
}

.lf-player-btn.active {
    fill: #555;
}

.lf-popover {
    position: relative;
}

.lf-popover-content {
    display: inline-block;
    position: absolute;
    background-color: #ffffff;
    opacity: 1;

    transform: translate(0, -10px);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
    padding: 10px;
}

.lf-popover-content.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(0, 0px);
}

.lf-arrow {
    position: absolute;
    z-index: -1;
    content: "";
    bottom: -9px;
    border-style: solid;
    border-width: 10px 10px 0px 10px;
}

.lf-left-align,
.lf-left-align .lfarrow {
    left: 0;
    right: unset;
}

.lf-right-align,
.lf-right-align .lf-arrow {
    right: 0;
    left: unset;
}

.lf-text-input {
    border: 1px #ccc solid;
    border-radius: 5px;
    padding: 3px;
    width: 60px;
    margin: 0;
}

.lf-color-picker {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 90px;
}

.lf-color-selectors {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lf-color-component {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    align-items: center;
    justify-content: center;
}

.lf-color-component strong {
    width: 40px;
}

.lf-color-component input[type="range"] {
    margin: 0 0 0 10px;
}

.lf-color-component input[type="number"] {
    width: 50px;
    margin: 0 0 0 10px;
}

.lf-color-preview {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-left: 5px;
}

.lf-preview {
    height: 60px;
    width: 60px;
}

.lf-popover-snapshot {
    width: 150px;
}
.lf-popover-snapshot h5 {
    margin: 5px 0 10px 0;
    font-size: 0.75rem;
}
.lf-popover-snapshot a {
    display: block;
    text-decoration: none;
}
.lf-popover-snapshot a:before {
    content: "⥼";
    margin-right: 5px;
}
.lf-popover-snapshot .lf-note {
    display: block;
    margin-top: 10px;
    color: #999;
}
.lf-player-controls > div {
    margin-right: 5px;
    margin-left: 5px;
}
.lf-player-controls > div:first-child {
    margin-left: 0px;
}
.lf-player-controls > div:last-child {
    margin-right: 0px;
}


.rfm-marquee-container {
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    position: relative;
    width: var(--width);
    transform: var(--transform);
}
.rfm-marquee-container:hover div {
    animation-play-state: var(--pause-on-hover);
}
.rfm-marquee-container:active div {
    animation-play-state: var(--pause-on-click);
}

.rfm-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
}
.rfm-overlay::before,
.rfm-overlay::after {
    background: linear-gradient(to right, var(--gradient-color), rgba(255, 255, 255, 0));
    content: "";
    height: 100%;
    position: absolute;
    width: var(--gradient-width);
    z-index: 2;
    pointer-events: none;
    touch-action: none;
}
.rfm-overlay::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}
.rfm-overlay::before {
    left: 0;
    top: 0;
}

.rfm-marquee {
    flex: 0 0 auto;
    min-width: var(--min-width);
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
    animation-play-state: var(--play);
    animation-delay: var(--delay);
    animation-direction: var(--direction);
}
@keyframes scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.rfm-initial-child-container {
    flex: 0 0 auto;
    display: flex;
    min-width: auto;
    flex-direction: row;
    align-items: center;
}

.rfm-child {
    transform: var(--transform);
}

.swal2-popup.swal2-toast {
    box-sizing: border-box;
    grid-column: 1/4 !important;
    grid-row: 1/4 !important;
    grid-template-columns: min-content auto min-content;
    padding: 1em;
    overflow-y: hidden;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.075), 1px 2px 4px rgba(0, 0, 0, 0.075), 1px 3px 8px rgba(0, 0, 0, 0.075), 2px 4px 16px rgba(0, 0, 0, 0.075);
    pointer-events: all;
}
.swal2-popup.swal2-toast > * {
    grid-column: 2;
}
.swal2-popup.swal2-toast .swal2-title {
    margin: 0.5em 1em;
    padding: 0;
    font-size: 1em;
    text-align: initial;
}
.swal2-popup.swal2-toast .swal2-loading {
    justify-content: center;
}
.swal2-popup.swal2-toast .swal2-input {
    height: 2em;
    margin: 0.5em;
    font-size: 1em;
}
.swal2-popup.swal2-toast .swal2-validation-message {
    font-size: 1em;
}
.swal2-popup.swal2-toast .swal2-footer {
    margin: 0.5em 0 0;
    padding: 0.5em 0 0;
    font-size: 0.8em;
}
.swal2-popup.swal2-toast .swal2-close {
    grid-column: 3/3;
    grid-row: 1/99;
    align-self: center;
    width: 0.8em;
    height: 0.8em;
    margin: 0;
    font-size: 2em;
}
.swal2-popup.swal2-toast .swal2-html-container {
    margin: 0.5em 1em;
    padding: 0;
    overflow: initial;
    font-size: 1em;
    text-align: initial;
}
.swal2-popup.swal2-toast .swal2-html-container:empty {
    padding: 0;
}
.swal2-popup.swal2-toast .swal2-loader {
    grid-column: 1;
    grid-row: 1/99;
    align-self: center;
    width: 2em;
    height: 2em;
    margin: 0.25em;
}
.swal2-popup.swal2-toast .swal2-icon {
    grid-column: 1;
    grid-row: 1/99;
    align-self: center;
    width: 2em;
    min-width: 2em;
    height: 2em;
    margin: 0 0.5em 0 0;
}
.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 1.8em;
    font-weight: bold;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
    width: 2em;
    height: 2em;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    top: 0.875em;
    width: 1.375em;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^="swal2-x-mark-line"][class$="left"] {
    left: 0.3125em;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^="swal2-x-mark-line"][class$="right"] {
    right: 0.3125em;
}
.swal2-popup.swal2-toast .swal2-actions {
    justify-content: flex-start;
    height: auto;
    margin: 0;
    margin-top: 0.5em;
    padding: 0 0.5em;
}
.swal2-popup.swal2-toast .swal2-styled {
    margin: 0.25em 0.5em;
    padding: 0.4em 0.6em;
    font-size: 1em;
}
.swal2-popup.swal2-toast .swal2-success {
    border-color: #a5dc86;
}
.swal2-popup.swal2-toast .swal2-success [class^="swal2-success-circular-line"] {
    position: absolute;
    width: 1.6em;
    height: 3em;
    border-radius: 50%;
}
.swal2-popup.swal2-toast .swal2-success [class^="swal2-success-circular-line"][class$="left"] {
    top: -0.8em;
    left: -0.5em;
    transform: rotate(-45deg);
    transform-origin: 2em 2em;
    border-radius: 4em 0 0 4em;
}
.swal2-popup.swal2-toast .swal2-success [class^="swal2-success-circular-line"][class$="right"] {
    top: -0.25em;
    left: 0.9375em;
    transform-origin: 0 1.5em;
    border-radius: 0 4em 4em 0;
}
.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
    width: 2em;
    height: 2em;
}
.swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
    top: 0;
    left: 0.4375em;
    width: 0.4375em;
    height: 2.6875em;
}
.swal2-popup.swal2-toast .swal2-success [class^="swal2-success-line"] {
    height: 0.3125em;
}
.swal2-popup.swal2-toast .swal2-success [class^="swal2-success-line"][class$="tip"] {
    top: 1.125em;
    left: 0.1875em;
    width: 0.75em;
}
.swal2-popup.swal2-toast .swal2-success [class^="swal2-success-line"][class$="long"] {
    top: 0.9375em;
    right: 0.1875em;
    width: 1.375em;
}
.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
    animation: swal2-toast-animate-success-line-tip 0.75s;
}
.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
    animation: swal2-toast-animate-success-line-long 0.75s;
}
.swal2-popup.swal2-toast.swal2-show {
    animation: swal2-toast-show 0.5s;
}
.swal2-popup.swal2-toast.swal2-hide {
    animation: swal2-toast-hide 0.1s forwards;
}
div:where(.swal2-container) {
    display: grid;
    position: fixed;
    z-index: 1060;
    inset: 0;
    box-sizing: border-box;
    grid-template-areas: "top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end";
    grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
    height: 100%;
    padding: 0.625em;
    overflow-x: hidden;
    transition: background-color 0.1s;
    -webkit-overflow-scrolling: touch;
}
div:where(.swal2-container).swal2-backdrop-show,
div:where(.swal2-container).swal2-noanimation {
    background: rgba(0, 0, 0, 0.4);
}
div:where(.swal2-container).swal2-backdrop-hide {
    background: rgba(0, 0, 0, 0) !important;
}
div:where(.swal2-container).swal2-top-start,
div:where(.swal2-container).swal2-center-start,
div:where(.swal2-container).swal2-bottom-start {
    grid-template-columns: minmax(0, 1fr) auto auto;
}
div:where(.swal2-container).swal2-top,
div:where(.swal2-container).swal2-center,
div:where(.swal2-container).swal2-bottom {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
div:where(.swal2-container).swal2-top-end,
div:where(.swal2-container).swal2-center-end,
div:where(.swal2-container).swal2-bottom-end {
    grid-template-columns: auto auto minmax(0, 1fr);
}
div:where(.swal2-container).swal2-top-start > .swal2-popup {
    align-self: start;
}
div:where(.swal2-container).swal2-top > .swal2-popup {
    grid-column: 2;
    place-self: start center;
}
div:where(.swal2-container).swal2-top-end > .swal2-popup,
div:where(.swal2-container).swal2-top-right > .swal2-popup {
    grid-column: 3;
    place-self: start end;
}
div:where(.swal2-container).swal2-center-start > .swal2-popup,
div:where(.swal2-container).swal2-center-left > .swal2-popup {
    grid-row: 2;
    align-self: center;
}
div:where(.swal2-container).swal2-center > .swal2-popup {
    grid-column: 2;
    grid-row: 2;
    place-self: center center;
}
div:where(.swal2-container).swal2-center-end > .swal2-popup,
div:where(.swal2-container).swal2-center-right > .swal2-popup {
    grid-column: 3;
    grid-row: 2;
    place-self: center end;
}
div:where(.swal2-container).swal2-bottom-start > .swal2-popup,
div:where(.swal2-container).swal2-bottom-left > .swal2-popup {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
}
div:where(.swal2-container).swal2-bottom > .swal2-popup {
    grid-column: 2;
    grid-row: 3;
    place-self: end center;
}
div:where(.swal2-container).swal2-bottom-end > .swal2-popup,
div:where(.swal2-container).swal2-bottom-right > .swal2-popup {
    grid-column: 3;
    grid-row: 3;
    place-self: end end;
}
div:where(.swal2-container).swal2-grow-row > .swal2-popup,
div:where(.swal2-container).swal2-grow-fullscreen > .swal2-popup {
    grid-column: 1/4;
    width: 100%;
}
div:where(.swal2-container).swal2-grow-column > .swal2-popup,
div:where(.swal2-container).swal2-grow-fullscreen > .swal2-popup {
    grid-row: 1/4;
    align-self: stretch;
}
div:where(.swal2-container).swal2-no-transition {
    transition: none !important;
}
div:where(.swal2-container) div:where(.swal2-popup) {
    display: none;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 100%);
    width: 32em;
    max-width: 100%;
    padding: 0 0 1.25em;
    border: none;
    border-radius: 5px;
    background: #fff;
    color: #545454;
    font-family: inherit;
    font-size: 1rem;
}
div:where(.swal2-container) div:where(.swal2-popup):focus {
    outline: none;
}
div:where(.swal2-container) div:where(.swal2-popup).swal2-loading {
    overflow-y: hidden;
}
div:where(.swal2-container) h2:where(.swal2-title) {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0.8em 1em 0;
    color: inherit;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
}
div:where(.swal2-container) div:where(.swal2-actions) {
    display: flex;
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 1.25em auto 0;
    padding: 0;
}
div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled[disabled] {
    opacity: 0.4;
}
div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}
div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:active {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}
div:where(.swal2-container) div:where(.swal2-loader) {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    margin: 0 1.875em;
    animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    border-width: 0.25em;
    border-style: solid;
    border-radius: 100%;
    border-color: #2778c4 rgba(0, 0, 0, 0) #2778c4 rgba(0, 0, 0, 0);
}
div:where(.swal2-container) button:where(.swal2-styled) {
    margin: 0.3125em;
    padding: 0.625em 1.1em;
    transition: box-shadow 0.1s;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);
    font-weight: 500;
}
div:where(.swal2-container) button:where(.swal2-styled):not([disabled]) {
    cursor: pointer;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    border: 0;
    border-radius: 0.25em;
    background: initial;
    background-color: #7066e0;
    color: #fff;
    font-size: 1em;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(112, 102, 224, 0.5);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-deny {
    border: 0;
    border-radius: 0.25em;
    background: initial;
    background-color: #dc3741;
    color: #fff;
    font-size: 1em;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-deny:focus {
    box-shadow: 0 0 0 3px rgba(220, 55, 65, 0.5);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
    border: 0;
    border-radius: 0.25em;
    background: initial;
    background-color: #6e7881;
    color: #fff;
    font-size: 1em;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:focus {
    box-shadow: 0 0 0 3px rgba(110, 120, 129, 0.5);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-default-outline:focus {
    box-shadow: 0 0 0 3px rgba(100, 150, 200, 0.5);
}
div:where(.swal2-container) button:where(.swal2-styled):focus {
    outline: none;
}
div:where(.swal2-container) button:where(.swal2-styled)::-moz-focus-inner {
    border: 0;
}
div:where(.swal2-container) div:where(.swal2-footer) {
    margin: 1em 0 0;
    padding: 1em 1em 0;
    border-top: 1px solid #eee;
    color: inherit;
    font-size: 1em;
    text-align: center;
}
div:where(.swal2-container) .swal2-timer-progress-bar-container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    grid-column: auto !important;
    overflow: hidden;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
div:where(.swal2-container) div:where(.swal2-timer-progress-bar) {
    width: 100%;
    height: 0.25em;
    background: rgba(0, 0, 0, 0.2);
}
div:where(.swal2-container) img:where(.swal2-image) {
    max-width: 100%;
    margin: 2em auto 1em;
}
div:where(.swal2-container) button:where(.swal2-close) {
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: -1.2em;
    padding: 0;
    overflow: hidden;
    transition: color 0.1s, box-shadow 0.1s;
    border: none;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0);
    color: #ccc;
    font-family: monospace;
    font-size: 2.5em;
    cursor: pointer;
    justify-self: end;
}
div:where(.swal2-container) button:where(.swal2-close):hover {
    transform: none;
    background: rgba(0, 0, 0, 0);
    color: #f27474;
}
div:where(.swal2-container) button:where(.swal2-close):focus {
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(100, 150, 200, 0.5);
}
div:where(.swal2-container) button:where(.swal2-close)::-moz-focus-inner {
    border: 0;
}
div:where(.swal2-container) .swal2-html-container {
    z-index: 1;
    justify-content: center;
    margin: 1em 1.6em 0.3em;
    padding: 0;
    overflow: auto;
    color: inherit;
    font-size: 1.125em;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    word-wrap: break-word;
    word-break: break-word;
}
div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) input:where(.swal2-file),
div:where(.swal2-container) textarea:where(.swal2-textarea),
div:where(.swal2-container) select:where(.swal2-select),
div:where(.swal2-container) div:where(.swal2-radio),
div:where(.swal2-container) label:where(.swal2-checkbox) {
    margin: 1em 2em 3px;
}
div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) input:where(.swal2-file),
div:where(.swal2-container) textarea:where(.swal2-textarea) {
    box-sizing: border-box;
    width: auto;
    transition: border-color 0.1s, box-shadow 0.1s;
    border: 1px solid #d9d9d9;
    border-radius: 0.1875em;
    background: rgba(0, 0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(0, 0, 0, 0);
    color: inherit;
    font-size: 1.125em;
}
div:where(.swal2-container) input:where(.swal2-input).swal2-inputerror,
div:where(.swal2-container) input:where(.swal2-file).swal2-inputerror,
div:where(.swal2-container) textarea:where(.swal2-textarea).swal2-inputerror {
    border-color: #f27474 !important;
    box-shadow: 0 0 2px #f27474 !important;
}
div:where(.swal2-container) input:where(.swal2-input):focus,
div:where(.swal2-container) input:where(.swal2-file):focus,
div:where(.swal2-container) textarea:where(.swal2-textarea):focus {
    border: 1px solid #b4dbed;
    outline: none;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(100, 150, 200, 0.5);
}
div:where(.swal2-container) input:where(.swal2-input)::placeholder,
div:where(.swal2-container) input:where(.swal2-file)::placeholder,
div:where(.swal2-container) textarea:where(.swal2-textarea)::placeholder {
    color: #ccc;
}
div:where(.swal2-container) .swal2-range {
    margin: 1em 2em 3px;
    background: #fff;
}
div:where(.swal2-container) .swal2-range input {
    width: 80%;
}
div:where(.swal2-container) .swal2-range output {
    width: 20%;
    color: inherit;
    font-weight: 600;
    text-align: center;
}
div:where(.swal2-container) .swal2-range input,
div:where(.swal2-container) .swal2-range output {
    height: 2.625em;
    padding: 0;
    font-size: 1.125em;
    line-height: 2.625em;
}
div:where(.swal2-container) .swal2-input {
    height: 2.625em;
    padding: 0 0.75em;
}
div:where(.swal2-container) .swal2-file {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    background: rgba(0, 0, 0, 0);
    font-size: 1.125em;
}
div:where(.swal2-container) .swal2-textarea {
    height: 6.75em;
    padding: 0.75em;
}
div:where(.swal2-container) .swal2-select {
    min-width: 50%;
    max-width: 100%;
    padding: 0.375em 0.625em;
    background: rgba(0, 0, 0, 0);
    color: inherit;
    font-size: 1.125em;
}
div:where(.swal2-container) .swal2-radio,
div:where(.swal2-container) .swal2-checkbox {
    align-items: center;
    justify-content: center;
    background: #fff;
    color: inherit;
}
div:where(.swal2-container) .swal2-radio label,
div:where(.swal2-container) .swal2-checkbox label {
    margin: 0 0.6em;
    font-size: 1.125em;
}
div:where(.swal2-container) .swal2-radio input,
div:where(.swal2-container) .swal2-checkbox input {
    flex-shrink: 0;
    margin: 0 0.4em;
}
div:where(.swal2-container) label:where(.swal2-input-label) {
    display: flex;
    justify-content: center;
    margin: 1em auto 0;
}
div:where(.swal2-container) div:where(.swal2-validation-message) {
    align-items: center;
    justify-content: center;
    margin: 1em 0 0;
    padding: 0.625em;
    overflow: hidden;
    background: #f0f0f0;
    color: #666;
    font-size: 1em;
    font-weight: 300;
}
div:where(.swal2-container) div:where(.swal2-validation-message)::before {
    content: "!";
    display: inline-block;
    width: 1.5em;
    min-width: 1.5em;
    height: 1.5em;
    margin: 0 0.625em;
    border-radius: 50%;
    background-color: #f27474;
    color: #fff;
    font-weight: 600;
    line-height: 1.5em;
    text-align: center;
}
div:where(.swal2-container) .swal2-progress-steps {
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    margin: 1.25em auto;
    padding: 0;
    background: rgba(0, 0, 0, 0);
    font-weight: 600;
}
div:where(.swal2-container) .swal2-progress-steps li {
    display: inline-block;
    position: relative;
}
div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step {
    z-index: 20;
    flex-shrink: 0;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background: #2778c4;
    color: #fff;
    line-height: 2em;
    text-align: center;
}
div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
    background: #2778c4;
}
div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step {
    background: #add8e6;
    color: #fff;
}
div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
    background: #add8e6;
}
div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step-line {
    z-index: 10;
    flex-shrink: 0;
    width: 2.5em;
    height: 0.4em;
    margin: 0 -1px;
    background: #2778c4;
}
div:where(.swal2-icon) {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 2.5em auto 0.6em;
    border: 0.25em solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    border-color: #000;
    font-family: inherit;
    line-height: 5em;
    cursor: default;
    user-select: none;
}
div:where(.swal2-icon) .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 3.75em;
}
div:where(.swal2-icon).swal2-error {
    border-color: #f27474;
    color: #f27474;
}
div:where(.swal2-icon).swal2-error .swal2-x-mark {
    position: relative;
    flex-grow: 1;
}
div:where(.swal2-icon).swal2-error [class^="swal2-x-mark-line"] {
    display: block;
    position: absolute;
    top: 2.3125em;
    width: 2.9375em;
    height: 0.3125em;
    border-radius: 0.125em;
    background-color: #f27474;
}
div:where(.swal2-icon).swal2-error [class^="swal2-x-mark-line"][class$="left"] {
    left: 1.0625em;
    transform: rotate(45deg);
}
div:where(.swal2-icon).swal2-error [class^="swal2-x-mark-line"][class$="right"] {
    right: 1em;
    transform: rotate(-45deg);
}
div:where(.swal2-icon).swal2-error.swal2-icon-show {
    animation: swal2-animate-error-icon 0.5s;
}
div:where(.swal2-icon).swal2-error.swal2-icon-show .swal2-x-mark {
    animation: swal2-animate-error-x-mark 0.5s;
}
div:where(.swal2-icon).swal2-warning {
    border-color: #facea8;
    color: #f8bb86;
}
div:where(.swal2-icon).swal2-warning.swal2-icon-show {
    animation: swal2-animate-error-icon 0.5s;
}
div:where(.swal2-icon).swal2-warning.swal2-icon-show .swal2-icon-content {
    animation: swal2-animate-i-mark 0.5s;
}
div:where(.swal2-icon).swal2-info {
    border-color: #9de0f6;
    color: #3fc3ee;
}
div:where(.swal2-icon).swal2-info.swal2-icon-show {
    animation: swal2-animate-error-icon 0.5s;
}
div:where(.swal2-icon).swal2-info.swal2-icon-show .swal2-icon-content {
    animation: swal2-animate-i-mark 0.8s;
}
div:where(.swal2-icon).swal2-question {
    border-color: #c9dae1;
    color: #87adbd;
}
div:where(.swal2-icon).swal2-question.swal2-icon-show {
    animation: swal2-animate-error-icon 0.5s;
}
div:where(.swal2-icon).swal2-question.swal2-icon-show .swal2-icon-content {
    animation: swal2-animate-question-mark 0.8s;
}
div:where(.swal2-icon).swal2-success {
    border-color: #a5dc86;
    color: #a5dc86;
}
div:where(.swal2-icon).swal2-success [class^="swal2-success-circular-line"] {
    position: absolute;
    width: 3.75em;
    height: 7.5em;
    border-radius: 50%;
}
div:where(.swal2-icon).swal2-success [class^="swal2-success-circular-line"][class$="left"] {
    top: -0.4375em;
    left: -2.0635em;
    transform: rotate(-45deg);
    transform-origin: 3.75em 3.75em;
    border-radius: 7.5em 0 0 7.5em;
}
div:where(.swal2-icon).swal2-success [class^="swal2-success-circular-line"][class$="right"] {
    top: -0.6875em;
    left: 1.875em;
    transform: rotate(-45deg);
    transform-origin: 0 3.75em;
    border-radius: 0 7.5em 7.5em 0;
}
div:where(.swal2-icon).swal2-success .swal2-success-ring {
    position: absolute;
    z-index: 2;
    top: -0.25em;
    left: -0.25em;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    border: 0.25em solid rgba(165, 220, 134, 0.3);
    border-radius: 50%;
}
div:where(.swal2-icon).swal2-success .swal2-success-fix {
    position: absolute;
    z-index: 1;
    top: 0.5em;
    left: 1.625em;
    width: 0.4375em;
    height: 5.625em;
    transform: rotate(-45deg);
}
div:where(.swal2-icon).swal2-success [class^="swal2-success-line"] {
    display: block;
    position: absolute;
    z-index: 2;
    height: 0.3125em;
    border-radius: 0.125em;
    background-color: #a5dc86;
}
div:where(.swal2-icon).swal2-success [class^="swal2-success-line"][class$="tip"] {
    top: 2.875em;
    left: 0.8125em;
    width: 1.5625em;
    transform: rotate(45deg);
}
div:where(.swal2-icon).swal2-success [class^="swal2-success-line"][class$="long"] {
    top: 2.375em;
    right: 0.5em;
    width: 2.9375em;
    transform: rotate(-45deg);
}
div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tip {
    animation: swal2-animate-success-line-tip 0.75s;
}
div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-long {
    animation: swal2-animate-success-line-long 0.75s;
}
div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-circular-line-right {
    animation: swal2-rotate-success-circular-line 4.25s ease-in;
}
[class^="swal2"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.swal2-show {
    animation: swal2-show 0.3s;
}
.swal2-hide {
    animation: swal2-hide 0.15s forwards;
}
.swal2-noanimation {
    transition: none;
}
.swal2-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}
.swal2-rtl .swal2-close {
    margin-right: initial;
    margin-left: 0;
}
.swal2-rtl .swal2-timer-progress-bar {
    right: 0;
    left: auto;
}
@keyframes swal2-toast-show {
    0% {
        transform: translateY(-0.625em) rotateZ(2deg);
    }
    33% {
        transform: translateY(0) rotateZ(-2deg);
    }
    66% {
        transform: translateY(0.3125em) rotateZ(2deg);
    }
    100% {
        transform: translateY(0) rotateZ(0deg);
    }
}
@keyframes swal2-toast-hide {
    100% {
        transform: rotateZ(1deg);
        opacity: 0;
    }
}
@keyframes swal2-toast-animate-success-line-tip {
    0% {
        top: 0.5625em;
        left: 0.0625em;
        width: 0;
    }
    54% {
        top: 0.125em;
        left: 0.125em;
        width: 0;
    }
    70% {
        top: 0.625em;
        left: -0.25em;
        width: 1.625em;
    }
    84% {
        top: 1.0625em;
        left: 0.75em;
        width: 0.5em;
    }
    100% {
        top: 1.125em;
        left: 0.1875em;
        width: 0.75em;
    }
}
@keyframes swal2-toast-animate-success-line-long {
    0% {
        top: 1.625em;
        right: 1.375em;
        width: 0;
    }
    65% {
        top: 1.25em;
        right: 0.9375em;
        width: 0;
    }
    84% {
        top: 0.9375em;
        right: 0;
        width: 1.125em;
    }
    100% {
        top: 0.9375em;
        right: 0.1875em;
        width: 1.375em;
    }
}
@keyframes swal2-show {
    0% {
        transform: scale(0.7);
    }
    45% {
        transform: scale(1.05);
    }
    80% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes swal2-hide {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.5);
        opacity: 0;
    }
}
@keyframes swal2-animate-success-line-tip {
    0% {
        top: 1.1875em;
        left: 0.0625em;
        width: 0;
    }
    54% {
        top: 1.0625em;
        left: 0.125em;
        width: 0;
    }
    70% {
        top: 2.1875em;
        left: -0.375em;
        width: 3.125em;
    }
    84% {
        top: 3em;
        left: 1.3125em;
        width: 1.0625em;
    }
    100% {
        top: 2.8125em;
        left: 0.8125em;
        width: 1.5625em;
    }
}
@keyframes swal2-animate-success-line-long {
    0% {
        top: 3.375em;
        right: 2.875em;
        width: 0;
    }
    65% {
        top: 3.375em;
        right: 2.875em;
        width: 0;
    }
    84% {
        top: 2.1875em;
        right: 0;
        width: 3.4375em;
    }
    100% {
        top: 2.375em;
        right: 0.5em;
        width: 2.9375em;
    }
}
@keyframes swal2-rotate-success-circular-line {
    0% {
        transform: rotate(-45deg);
    }
    5% {
        transform: rotate(-45deg);
    }
    12% {
        transform: rotate(-405deg);
    }
    100% {
        transform: rotate(-405deg);
    }
}
@keyframes swal2-animate-error-x-mark {
    0% {
        margin-top: 1.625em;
        transform: scale(0.4);
        opacity: 0;
    }
    50% {
        margin-top: 1.625em;
        transform: scale(0.4);
        opacity: 0;
    }
    80% {
        margin-top: -0.375em;
        transform: scale(1.15);
    }
    100% {
        margin-top: 0;
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes swal2-animate-error-icon {
    0% {
        transform: rotateX(100deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}
@keyframes swal2-rotate-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes swal2-animate-question-mark {
    0% {
        transform: rotateY(-360deg);
    }
    100% {
        transform: rotateY(0);
    }
}
@keyframes swal2-animate-i-mark {
    0% {
        transform: rotateZ(45deg);
        opacity: 0;
    }
    25% {
        transform: rotateZ(-25deg);
        opacity: 0.4;
    }
    50% {
        transform: rotateZ(15deg);
        opacity: 0.8;
    }
    75% {
        transform: rotateZ(-5deg);
        opacity: 1;
    }
    100% {
        transform: rotateX(0);
        opacity: 1;
    }
}
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow: hidden;
}
body.swal2-height-auto {
    height: auto !important;
}
body.swal2-no-backdrop .swal2-container {
    background-color: rgba(0, 0, 0, 0) !important;
    pointer-events: none;
}
body.swal2-no-backdrop .swal2-container .swal2-popup {
    pointer-events: all;
}
body.swal2-no-backdrop .swal2-container .swal2-modal {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
@media print {
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
        overflow-y: scroll !important;
    }
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) > [aria-hidden="true"] {
        display: none;
    }
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
        position: static !important;
    }
}
body.swal2-toast-shown .swal2-container {
    box-sizing: border-box;
    width: 360px;
    max-width: 100%;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}
body.swal2-toast-shown .swal2-container.swal2-top {
    inset: 0 auto auto 50%;
    transform: translateX(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right {
    inset: 0 0 auto auto;
}
body.swal2-toast-shown .swal2-container.swal2-top-start,
body.swal2-toast-shown .swal2-container.swal2-top-left {
    inset: 0 auto auto 0;
}
body.swal2-toast-shown .swal2-container.swal2-center-start,
body.swal2-toast-shown .swal2-container.swal2-center-left {
    inset: 50% auto auto 0;
    transform: translateY(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-center {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}
body.swal2-toast-shown .swal2-container.swal2-center-end,
body.swal2-toast-shown .swal2-container.swal2-center-right {
    inset: 50% 0 auto auto;
    transform: translateY(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-bottom-start,
body.swal2-toast-shown .swal2-container.swal2-bottom-left {
    inset: auto auto 0 0;
}
body.swal2-toast-shown .swal2-container.swal2-bottom {
    inset: auto auto 0 50%;
    transform: translateX(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-bottom-end,
body.swal2-toast-shown .swal2-container.swal2-bottom-right {
    inset: auto 0 0 auto;
}



@media (max-width: 937px) {
    .template-d {
        display:none;
    }

    .template-mo {
        display:block;
    }

}


@media (min-width: 938px) {
    .template-d {
        display:block;
    }

    .template-mo {
        display:none;
    }
    .btn-contact {
        display:block!important;
    }
}

/*.slide-img {
      overflow-x: auto;

}*/

.slide-img {
    overflow-x: auto;

}

/*.slide-img::-webkit-scrollbar {
  display: none !important;
}*/
.slide-img::-webkit-scrollbar {
    width: 0;
}


#headlessui-disclosure-panel-\:r4\: {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
    max-height: 0;
    opacity: 0;
    /*margin: -16px;*/

}

#headlessui-disclosure-panel-\:r4\:.open {
    max-height: 2000px;
    opacity: 1;
}

#headlessui-disclosure-button-\:r0\: svg {
    transition: transform 0.3s ease-in-out;
}



.toggle-panel {
    overflow: hidden;
    transition:
        max-height 0.3s ease-in-out,
        opacity 0.2s ease-in-out,
        padding 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.toggle-panel[data-headlessui-state="open"] {
    max-height: 2000px; /* ตั้งค่าสูงกว่าความสูงจริงของ content */
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.toggle-panel[data-headlessui-state="open"] {
    max-height: 3000px; /* ปรับตามความสูงของเนื้อหาของคุณ */
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.toggle-icon {
    transition: transform 0.3s ease-in-out;
}

.toggle-icon.rotated {
    transform: rotate(180deg);
}


.toggle-panel {
    overflow: hidden;
    transition:
        max-height 0.3s ease-in-out,
        opacity 0.2s ease-in-out,
        padding 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.toggle-panel.open {
    max-height: 3000px;
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.toggle-icon {
    transition: transform 0.3s ease-in-out;
}

.toggle-icon.rotated {
    transform: rotate(180deg);
}


.css-3rzy7s .contact-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: 0.1s;
    border-color: rgb(255, 255, 255);
}


.css-3rzy7s .contact-ring-1 {
    height: 82px;
    width: 82px;
    animation: 2s linear 0s infinite normal none running contact-ring-keys-1;
}





/* Overlay background */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Black with 70% opacity */
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Modal container - this should wrap your existing div */
.modal-container {
    position: relative;
    z-index: 1001;
    max-width: 55%;
    max-height: 66vh;
    overflow-y: hidden;
    overflow-x: hidden;
    display: block;
    margin: auto;
    top: 16%;
}

/* Close button area */
.modal-close-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    cursor: pointer;
}


#swiper-wrapper-55d64c2c4fbc16a8 {
    overflow-x: auto;
}


.slider-container {
    overflow-x: auto;
    width: 100%;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.slider-container::-webkit-scrollbar {
    display: none; /* ซ่อน scrollbar ใน Chrome/Safari */
}

.slider-track {
    display: flex;
    gap: 20px;
    user-select: none;
    width: max-content;
}

.slider-container.grabbing {
    cursor: grabbing;
    scroll-snap-type: none; /* ปิด snap ขณะลาก */
}





#modal-promotion {
    display: none;
}

/* เมื่อ modal ถูกแสดง */
#modal-promotion.css-3h90qm {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 201;
    overflow: auto;
}

/* พื้นหลังทึบ */
#modal-promotion .bg-black\/80 {
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 1rem;
}

/* ตัว modal หลัก */
#modal-promotion .relative.max-w-\[1370px\] {
    position: relative;
    max-width: 1370px;
    width: 100%;
    min-width: 470px;
    max-height: 90%;
    background: radial-gradient(49.1% 56.8% at 50% 0%, rgba(38, 58, 89, 0.8) 0%, rgba(38, 58, 89, 0.63) 30.08%, rgba(7, 20, 44, 0.8) 100%);
    border-radius: 0.5rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.25rem;
}

/* เส้นขอบบน */
#modal-promotion .absolute.top-0.left-0.h-\[1px\].w-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 26.03%, rgb(255, 255, 255) 48.56%, rgba(255, 255, 255, 0) 72.48%);
}

/* ส่วนหัว modal */
#modal-promotion .w-full.flex.gap-7 {
    display: flex;
    width: 100%;
    gap: 1.75rem;
}

/* ไอคอนและชื่อโปรโมชั่น */
#modal-promotion .flex.items-center.gap-4 {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ปุ่มปิด */
#modal-promotion .flex.gap-5.ml-auto {
    display: flex;
    gap: 1.25rem;
    margin-left: auto;
}

/* ส่วนเนื้อหา */
#modal-promotion .flex-1.flex.flex-col.gap-7 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    width: 1300px;
    max-height: 670px;
    overflow: hidden;
}


#modal-promotion .h-\[68px\].flex {
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    background-color: rgb(8, 18, 39);
}


#modal-promotion .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 0.75rem;
    background: linear-gradient(360deg, rgba(7, 20, 44, 0.6) -5.86%, rgba(38, 58, 89, 0.6) 104.05%);
}


#modal-promotion .css-1okmrak {
    width: 100%;
}

#modal-promotion .flex.flex-wrap.min-h-\[300px\] {
    display: flex;
    flex-wrap: wrap;
    min-height: 300px;
}


#modal-promotion .overflow-hidden.w-1\/3 {
    width: 33.333333%;
    overflow: hidden;
    padding: 0 0.5rem;
}

#modal-promotion .w-full.h-full.flex.flex-col {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0.375rem;
    cursor: pointer;
    background-color: rgba(8, 15, 28, 0.698);
}


#modal-promotion .relative.pb-\[41\.6\%\] {
    position: relative;
    padding-bottom: 41.6%;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    overflow: hidden;
}

#modal-promotion .absolute.inset-0 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#modal-promotion .text-\[20px\] {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    padding: 0.75rem;
}



#modal-news {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 201;
    display: none;
}


#modal-news.css-3h90qm {
    display: block;
}


#modal-news .bg-black\/80 {
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 1rem;
}


#modal-news .relative.max-w-\[1370px\] {
    position: relative;
    max-width: 1370px;
    width: fit-content;
    min-width: 470px;
    max-height: 90%;
    background: radial-gradient(49.1% 56.8% at 50% 0%, rgba(38, 58, 89, 0.8) 0%, rgba(38, 58, 89, 0.63) 30.08%, rgba(7, 20, 44, 0.8) 100%);
    border-radius: 0.5rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.25rem 1.25rem 2rem;
}


#modal-news .absolute.top-0.left-0.h-\[1px\] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 26.03%, rgb(255, 255, 255) 48.56%, rgba(255, 255, 255, 0) 72.48%);
}


#modal-news .w-full.flex.gap-7 {
    display: flex;
    width: 100%;
    gap: 1.75rem;
}


#modal-news .flex.items-center.gap-4 {
    display: flex;
    align-items: center;
    gap: 1rem;
}


#modal-news .flex.gap-5.ml-auto {
    display: flex;
    gap: 1.25rem;
    margin-left: auto;
}


#modal-news .w-\[1000px\] {
    width: 1000px;
    height: 100%;
}


#modal-news .grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    height: 100%;
}


#modal-news .overflow-x-auto {
    overflow-x: hidden;
    overflow-y: auto;
    height: 600px;
    padding-right: 8px;
}


#modal-news .rounded-\[10px\] {
    border-radius: 10px;
    margin-bottom: 16px;
}


#modal-news .relative.rounded-\[10px\] {
    position: relative;
    border-radius: 10px;
    width: 470px;
    height: 127px;
    display: flex;
    align-items: center;
    background-color: rgb(8, 15, 28);
}


#modal-news .mr-\[12px\] {
    margin-right: 12px;
    flex-shrink: 0;
    width: 127px;
    height: 127px;
    border-radius: 10px 0 0 10px;
    object-fit: cover;
}


#modal-news .flex.flex-col.w-\[300px\] {
    display: flex;
    flex-direction: column;
    width: 300px;
    gap: 12px;
    height: 90px;
}


#modal-news .text-\[18px\] {
    font-size: 18px;
    font-weight: bold;
    line-height: 26px;
    color: white;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


#modal-news .border-t {
    border-top: 1px solid;
    opacity: 0.3;
    width: 300px;
}


#modal-news .text-sm {
    font-size: 14px;
    font-weight: bold;
    margin-top: 12px;
}


#modal-news .absolute.top-\[0px\].right-\[0px\] {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    font-weight: bold;
    padding: 2px 8px;
    display: inline-flex;
    border-radius: 0 10px 0 4px;
    background: linear-gradient(to right bottom, rgb(0, 255, 255), rgb(1, 110, 195));
}


#modal-news .transform.rotate-90 {
    position: absolute;
    top: 50%;
    height: 1px;
    width: 100%;
    transform: rotate(90deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 25.03%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 78.48%);
}

#modal-news .flex-1.h-\[600px\] {
    flex: 1;
    height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 12px;
}

#modal-news .pb-\[37\.5\%\] {
    padding-bottom: 37.5%;
    height: 0;
    border-radius: 0.375rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


#modal-news .rounded-b-md {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    background-color: rgb(8, 15, 28);
    border: 1px solid rgb(47, 69, 113);
    padding: 1rem;
    color: white;
    font-size: 14px;
    text-align: left;
}


#modal-news .rounded-t-\[6px\] {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: rgb(20, 44, 92);
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: white;
    font-size: 14px;
    font-weight: bold;
}


#modal-news .text-neutral-300 {
    color: rgb(209 213 219);
    font-size: 14px;
    font-weight: normal;
    text-align: right;
}


#modal-news button[style*="linear-gradient"] {
    box-shadow: rgb(77, 103, 142) 0px 3px 3px 0px;
    background: linear-gradient(to top, rgb(1, 110, 195), rgb(0, 255, 255));
    padding: 2px;
    border-radius: 10px;
    overflow: hidden;
}


#modal-news button[style*="background: none"] {
    background: none;
    box-shadow: none;
    padding: 2px;
    border-radius: 10px;
    overflow: hidden;
}


#modal-event-d {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 201;
    display: none;
}


#modal-event-d.css-3h90qm {
    display: block;
}


#modal-event-d .bg-black\/80 {
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 1rem;
}


#modal-event-d .relative.max-w-\[1370px\] {
    position: relative;
    max-width: 1370px;
    width: 1060px;
    min-width: 470px;
    max-height: 90%;
    background: radial-gradient(49.1% 56.8% at 50% 0%, rgba(38, 58, 89, 0.8) 0%, rgba(38, 58, 89, 0.63) 30.08%, rgba(7, 20, 44, 0.8) 100%);
    border-radius: 0.5rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.25rem 1.25rem 2rem;
}


#modal-event-d .absolute.top-0.left-0.h-\[1px\] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 26.03%, rgb(255, 255, 255) 48.56%, rgba(255, 255, 255, 0) 72.48%);
}


#modal-event-d .w-full.flex.gap-7 {
    display: flex;
    width: 100%;
    gap: 1.75rem;
}


#modal-event-d .flex.items-center.gap-4 {
    display: flex;
    align-items: center;
    gap: 1rem;
}


#modal-event-d .flex.gap-5.ml-auto {
    display: flex;
    gap: 1.25rem;
    margin-left: auto;
}


#modal-event-d .flex.gap-5.w-\[1000px\] {
    display: flex;
    gap: 1.25rem;
    width: 1000px;
    max-height: 70vh;
    padding-bottom: 0.5rem;
}


#modal-event-d .w-1\/2.h-auto {
    width: 50%;
    height: auto;
}


#modal-event-d .w-1\/2.h-auto {
    width: 50%;
    height: auto;
}


#modal-event-d .w-\[1\.5px\].h-auto {
    width: 1.5px;
    height: auto;
    background: linear-gradient(rgb(32, 46, 65) 0%, rgb(203, 203, 203) 50%, rgb(32, 46, 65) 100%);
}


#modal-event-d .w-\[460px\].h-\[131px\] {
    width: 460px;
    height: 131px;
    position: relative;
    margin-bottom: 1rem;
}


#modal-event-d .pointer-events-none .cursor-pointer {
    background-color: rgb(8, 15, 28);
    border-radius: 0.5rem;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


#modal-event-d .cursor-pointer .absolute.w-\[99\%\] {
    background-color: rgb(8, 15, 28);
    border-radius: 0.375rem;
    width: 99%;
    height: 97%;
    position: absolute;
    top: 2px;
    left: 2px;
}


#modal-event-d .blok {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    background: linear-gradient(rgb(0, 255, 255) 0.01%, rgb(59, 130, 246) 100%);
    box-shadow: rgb(122, 174, 253) 0px 0px 4px 1px;
}


#modal-event-d .w-\[126px\].h-full {
    width: 126px;
    height: 100%;
}


#modal-event-d .flex.flex-col.w-full {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    padding: 0.75rem 0;
}


#modal-event-d .text-lg.font-bold {
    font-size: 1.125rem;
    font-weight: bold;
    color: white;
}


#modal-event-d .w-full.h-\[1px\] {
    width: 100%;
    height: 1px;
    background-color: rgb(117, 117, 117);
    max-width: 300px;
}


#modal-event-d .text-\[15px\] {
    font-size: 0.9375rem;
    color: white;
    opacity: 0.3;
}


#modal-event-d .w-\[460px\].h-full {
    width: 460px;
    height: 100%;
}


#modal-event-d .flex.flex-row.p-3 {
    display: flex;
    flex-direction: row;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: rgb(8, 18, 39);
}


#modal-event-d button[style*="linear-gradient"] {
    width: 72px;
    height: 44px;
    font-weight: bold;
    font-size: 0.875rem;
    border-radius: 0.375rem 0 0 0.375rem;
    color: white;
    background: linear-gradient(rgb(0, 255, 255), rgb(1, 110, 195));
}


#modal-event-d button[style*="background: transparent"] {
    width: 72px;
    height: 44px;
    font-weight: bold;
    font-size: 0.875rem;
    border-radius: 0 0.375rem 0.375rem 0;
    color: rgb(97, 117, 147);
    background: transparent;
}


#modal-event-d .bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
    height: 3px;
    border-radius: 1px;
    border-width: 1px;
}


#modal-event-d table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgb(44, 68, 118);
    color: rgb(34, 34, 34);
    font-size: 0.875rem;
    text-align: center;
    margin-top: 1rem;
}


#modal-event-d thead tr {
    position: sticky;
    top: 0;
    z-index: 10;
    color: white;
    font-size: 1rem;
    height: 44px;
}


#modal-event-d tbody tr {
    border-top: 1px solid rgb(16, 16, 16);
}


#modal-event-d tbody tr:nth-child(odd) {
    background-color: rgb(16, 29, 55);
}

#modal-event-d tbody tr:nth-child(even) {
    background-color: rgb(8, 15, 28);
}


#modal-event-d .w-\[86px\].h-8 {
    width: 86px;
    height: 32px;
    border-radius: 0.375rem;
    opacity: 0.7;
    background-color: rgb(43, 54, 66);
    cursor: not-allowed;
}

#modal-event-d .no-scrollbar {
    scrollbar-width: none;
}

#modal-event-d .no-scrollbar::-webkit-scrollbar {
    display: none;
}



/*
 ซ่อนทุก element อื่น 
body > *:not(.css-1fmvhmq) {
  display: none !important;
}


 ซ่อนทั้งหมดโดยเริ่มต้น 
.css-1fmvhmq {
  display: none;
}

 แสดงเฉพาะเมื่อหน้าจอเล็กกว่า 750px 
@media (max-width: 749px) {
  .css-1fmvhmq {
      display: block;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 9999;
      top: 0;
      left: 0;
      
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      z-index: 9999;
      background-color: #04091d; 
      overflow: hidden;
  }
}
*/

.icon-co {
    filter: var(--icon-color);
    /*filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(203deg) brightness(118%) contrast(119%);*/
}



/*  
  .css-1fmvhmq {
  display: none;
}


body > * {
  display: revert;
}


@media (max-width: 749px) {

  .css-1fmvhmq:not([style*="display: none"]) ~ *,
  .css-1fmvhmq:not([style*="display: none"]) + * {
    display: none !important;
  }
  

  .css-1fmvhmq:not([style*="display: none"]) {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: #04091d;
    overflow: auto;
  }
}*/




/* แอนิเมชันสำหรับการแสดงและซ่อนเนื้อหา */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease forwards;
}


#highlights, #promotion, #event, #news {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* สไตล์ไอคอนเมื่อแท็บ active/inactive */
#highlights div > div:first-child,
#promotion div > div:last-child,
#event div > div:last-child,
#news div > div:last-child {
    display: block;
}

/*#highlights div > div:last-child,
#promotion div > div:first-child,
#event div > div:first-child,
#news div > div:first-child {
    display: none;
}*/

/* เมื่อแท็บ active */
#highlights.active div > div:first-child,
#promotion.active div > div:first-child,
#event.active div > div:first-child,
#news.active div > div:first-child {
    display: none;
}

#highlights.active div > div:last-child,
#promotion.active div > div:last-child,
#event.active div > div:last-child,
#news.active div > div:last-child {
    display: block;
}



.hide {
    display: none !important;
}



.body-lock-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* สไตล์สำหรับ modal */
#modal-promotion-m  , #modal-news-m ,  #modal-event-m , #modal-history-m ,  #modal-notify-m , #modal-howto-m ,
#modal-bonus-m  ,  #modal-commission-m , #modal-coupon-m , #modal-friend-m , #modal-level-m {
    display: none; /* เริ่มต้นซ่อนไว้ */
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(4, 9, 29, 0.9); /* พื้นหลังสีดำโปร่งใส */
    z-index: 1000; /* ให้อยู่ด้านบนสุด */
    overflow: auto; /* ให้เนื้อหาใน modal เลื่อนได้ถ้าจำเป็น */
}


/* สไตล์พื้นฐานของ modal */
/*#modal-promotion-m.css-1fmvhmq {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  overflow: auto;
  background-color: rgba(4, 9, 29, 0.9);
  
   เพิ่ม transition สำหรับ animation 
  opacity: 0;
  visibility: hidden;
  transition: 
    opacity 0.3s ease-out,
    visibility 0.3s ease-out;
}

 สไตล์เมื่อ modal ถูกแสดง 
#modal-promotion-m.css-1fmvhmq.show {
  display: block;
  opacity: 1;
  visibility: visible;
}*/


#modal-promotion-m.css-1fmvhmq , #modal-news-m.css-1fmvhmq , #modal-event-m.css-1fmvhmq , #modal-history-m.css-1fmvhmq ,
#modal-notify-m.css-1fmvhmq , #modal-howto-m.css-1fmvhmq , #modal-bonus-m.css-1fmvhmq , #modal-commission-m.css-1fmvhmq ,
#modal-coupon-m.css-1fmvhmq , #modal-friend-m.css-1fmvhmq , #modal-level-m.css-1fmvhmq {
    /* ... */
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

#modal-promotion-m.css-1fmvhmq.show , #modal-news-m.css-1fmvhmq.show , #modal-event-m.css-1fmvhmq.show, #modal-history-m.css-1fmvhmq.show  ,
#modal-notify-m.css-1fmvhmq.show , #modal-howto-m.css-1fmvhmq.show , #modal-bonus-m.css-1fmvhmq.show , #modal-commission-m.css-1fmvhmq.show ,
#modal-coupon-m.css-1fmvhmq.show , #modal-friend-m.css-1fmvhmq.show , #modal-level-m.css-1fmvhmq.show {
    /* ... */
    transform: translateX(0);
}


#modal-promotion-m .modal-content  , #modal-news-m .modal-content  , #modal-event-m .modal-content ,  #modal-history-m .modal-content ,
#modal-notify-m .modal-content ,  #modal-howto-m .modal-content , #modal-bonus-m .modal-content , #modal-commission-m .modal-content ,
#modal-coupon-m .modal-content , #modal-friend-m .modal-content , #modal-level-m .modal-content {
    transform: translateY(20px);
    transition: transform 0.3s ease-out;
}

#modal-promotion-m.show .modal-content , #modal-news-m.show .modal-content  , #modal-event-m.show .modal-content ,
#modal-history-m.show .modal-content , #modal-notify-m.show .modal-content  , #modal-howto-m.show .modal-content ,
#modal-bonus-m.show .modal-content ,  #modal-commission-m.show .modal-content ,  #modal-coupon-m.show .modal-content ,
#modal-friend-m.show .modal-content ,  #modal-level-m.show .modal-content {
    transform: translateY(0);
}



/* Animation สำหรับ Modal Container */
#modal-coupon  {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-coupon[style*="display: block"] {
    opacity: 1;
    display: block;
}


#modal-coupon > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-coupon[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}


#modal-coupon > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-coupon[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}


#modal-coupon .modal-coupon-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-coupon[style*="display: block"] .modal-coupon-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}


#modal-coupon input {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-coupon[style*="display: block"] input {
    transform: translateY(0);
    opacity: 1;
}


#modal-coupon .coupon-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-coupon[style*="display: block"] .coupon-submit-button {
    transform: translateY(0);
    opacity: 1;
}


#modal-withdraw {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-withdraw[style*="display: block"] {
    opacity: 1;
    display: block;
}


#modal-withdraw > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-withdraw[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}


#modal-withdraw > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-withdraw[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}


#modal-withdraw .modal-withdraw-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-withdraw[style*="display: block"] .modal-withdraw-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}


#modal-withdraw input {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-withdraw[style*="display: block"] input {
    transform: translateY(0);
    opacity: 1;
}


#modal-withdraw .withdraw-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-withdraw[style*="display: block"] .withdraw-submit-button {
    transform: translateY(0);
    opacity: 1;
}


#modal-withdraw .withdraw-info {
    transition: all 0.4s ease-out 0.1s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-withdraw[style*="display: block"] .withdraw-info {
    transform: translateY(0);
    opacity: 1;
}


#modal-deposit {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-deposit[style*="display: block"] {
    opacity: 1;
    display: block;
}


#modal-deposit > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-deposit[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}


#modal-deposit > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-deposit[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}


#modal-deposit .modal-deposit-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-deposit[style*="display: block"] .modal-deposit-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}


#modal-deposit input,
#modal-deposit select {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-deposit[style*="display: block"] input,
#modal-deposit[style*="display: block"] select {
    transform: translateY(0);
    opacity: 1;
}


#modal-deposit .deposit-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-deposit[style*="display: block"] .deposit-submit-button {
    transform: translateY(0);
    opacity: 1;
}


#modal-deposit .payment-method {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-deposit[style*="display: block"] .payment-method {
    transform: translateY(0);
    opacity: 1;
}


#modal-deposit .deposit-alert {
    transition: all 0.4s ease-out 0.25s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-deposit[style*="display: block"] .deposit-alert {
    transform: translateY(0);
    opacity: 1;
}


#modal-affiliate {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-affiliate[style*="display: block"] {
    opacity: 1;
    display: block;
}

#modal-affiliate > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-affiliate[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}


#modal-affiliate > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-affiliate[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}


#modal-affiliate .modal-affiliate-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-affiliate[style*="display: block"] .modal-affiliate-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}


#modal-affiliate input,
#modal-affiliate textarea {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-affiliate[style*="display: block"] input,
#modal-affiliate[style*="display: block"] textarea {
    transform: translateY(0);
    opacity: 1;
}


#modal-affiliate .affiliate-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-affiliate[style*="display: block"] .affiliate-submit-button {
    transform: translateY(0);
    opacity: 1;
}


#modal-affiliate .affiliate-link {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-affiliate[style*="display: block"] .affiliate-link {
    transform: translateY(0);
    opacity: 1;
}


#modal-affiliate .affiliate-stats {
    transition: all 0.4s ease-out 0.25s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-affiliate[style*="display: block"] .affiliate-stats {
    transform: translateY(0);
    opacity: 1;
}

/* Animation สำหรับรายการ referrals */
#modal-affiliate .referral-list {
    transition: all 0.4s ease-out 0.35s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-affiliate[style*="display: block"] .referral-list {
    transform: translateY(0);
    opacity: 1;
}



#modal-commission {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-commission[style*="display: block"] {
    opacity: 1;
    display: block;
}

/* Backdrop Animation */
#modal-commission > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-commission[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Content Animation */
#modal-commission > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-commission[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* Close Button Animation */
#modal-commission .modal-commission-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-commission[style*="display: block"] .modal-commission-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

/* Input Fields Animation */
#modal-commission input,
#modal-commission select {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-commission[style*="display: block"] input,
#modal-commission[style*="display: block"] select {
    transform: translateY(0);
    opacity: 1;
}

/* Submit Button Animation */
#modal-commission .commission-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-commission[style*="display: block"] .commission-submit-button {
    transform: translateY(0);
    opacity: 1;
}

/* Commission Stats Animation */
#modal-commission .commission-stats {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-commission[style*="display: block"] .commission-stats {
    transform: translateY(0);
    opacity: 1;
}

/* History Table Animation */
#modal-commission .commission-history {
    transition: all 0.4s ease-out 0.25s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-commission[style*="display: block"] .commission-history {
    transform: translateY(0);
    opacity: 1;
}

/* Progress Bar Animation */
#modal-commission .commission-progress {
    transition: all 0.4s ease-out 0.35s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-commission[style*="display: block"] .commission-progress {
    transform: translateY(0);
    opacity: 1;
}

/* Tier Info Animation */
#modal-commission .tier-info {
    transition: all 0.4s ease-out 0.45s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-commission[style*="display: block"] .tier-info {
    transform: translateY(0);
    opacity: 1;
}


.menu-button {
    transition: all 0.3s ease;
}


/* Animation */
.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ปุ่ม Active */
.menu-button.active {
    position: relative;
    z-index: 1;
}

.button-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}


.content-wrapper {
    display: none;
}

.content-wrapper:not(.hidden) {
    display: block;
}




#modal-friend-d {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-friend-d[style*="display: block"] {
    opacity: 1;
    display: block;
}

/* Backdrop Animation */
#modal-friend-d > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-friend-d[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Content Animation */
#modal-friend-d > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-friend-d[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* Close Button Animation */
#modal-friend-d .modal-friend-d-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-friend-d[style*="display: block"] .modal-friend-d-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

/* Input Fields Animation */
#modal-friend-d input,
#modal-friend-d textarea {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-friend-d[style*="display: block"] input,
#modal-friend-d[style*="display: block"] textarea {
    transform: translateY(0);
    opacity: 1;
}

/* Button Animation */
#modal-friend-d .friend-d-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-friend-d[style*="display: block"] .friend-d-submit-button {
    transform: translateY(0);
    opacity: 1;
}

/* Friend List Animation */
#modal-friend-d .friend-list {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-friend-d[style*="display: block"] .friend-list {
    transform: translateY(0);
    opacity: 1;
}

/* Invitation Section Animation */
#modal-friend-d .invitation-section {
    transition: all 0.4s ease-out 0.25s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-friend-d[style*="display: block"] .invitation-section {
    transform: translateY(0);
    opacity: 1;
}

/* Status Badge Animation */
#modal-friend-d .status-badge {
    transition: all 0.4s ease-out 0.35s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-friend-d[style*="display: block"] .status-badge {
    transform: translateY(0);
    opacity: 1;
}

/* Bonus Info Animation */
#modal-friend-d .bonus-info {
    transition: all 0.4s ease-out 0.45s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-friend-d[style*="display: block"] .bonus-info {
    transform: translateY(0);
    opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #modal-friend-d > div:first-child > div {
        transform: scale(0.9) translateY(10px);
    }

    #modal-friend-d[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }
}


#modal-news {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-news[style*="display: block"] {
    opacity: 1;
    display: block;
}

/* Backdrop Animation */
#modal-news > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-news[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Content Animation */
#modal-news > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-news[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* Close Button Animation */
#modal-news .modal-news-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-news[style*="display: block"] .modal-news-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

/* News Content Animation */
#modal-news .news-content {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-news[style*="display: block"] .news-content {
    transform: translateY(0);
    opacity: 1;
}

/* News Title Animation */
#modal-news .news-title {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-news[style*="display: block"] .news-title {
    transform: translateY(0);
    opacity: 1;
}

/* News Date Animation */
#modal-news .news-date {
    transition: all 0.4s ease-out 0.25s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-news[style*="display: block"] .news-date {
    transform: translateY(0);
    opacity: 1;
}

/* News Image Animation */
#modal-news .news-image {
    transition: all 0.4s ease-out 0.35s;
    transform: scale(0.95);
    opacity: 0;
}

#modal-news[style*="display: block"] .news-image {
    transform: scale(1);
    opacity: 1;
}

/* News Description Animation */
#modal-news .news-description {
    transition: all 0.4s ease-out 0.45s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-news[style*="display: block"] .news-description {
    transform: translateY(0);
    opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #modal-news > div:first-child > div {
        transform: scale(0.9) translateY(10px);
    }

    #modal-news[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }

    #modal-news .news-content {
        transition-delay: 0.1s;
    }
}



#modal-event {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-event[style*="display: block"] {
    opacity: 1;
    display: block;
}

/* Backdrop Animation */
#modal-event > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-event[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Content Animation */
#modal-event > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-event[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* Close Button Animation */
#modal-event .modal-event-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-event[style*="display: block"] .modal-event-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

/* Event Content Animation */
#modal-event .event-content {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-event[style*="display: block"] .event-content {
    transform: translateY(0);
    opacity: 1;
}

/* Event Title Animation */
#modal-event .event-title {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-event[style*="display: block"] .event-title {
    transform: translateY(0);
    opacity: 1;
}

/* Event Date Animation */
#modal-event .event-date {
    transition: all 0.4s ease-out 0.25s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-event[style*="display: block"] .event-date {
    transform: translateY(0);
    opacity: 1;
}

/* Event Image Animation */
#modal-event .event-image {
    transition: all 0.4s ease-out 0.35s;
    transform: scale(0.95);
    opacity: 0;
}

#modal-event[style*="display: block"] .event-image {
    transform: scale(1);
    opacity: 1;
}

/* Event Description Animation */
#modal-event .event-description {
    transition: all 0.4s ease-out 0.45s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-event[style*="display: block"] .event-description {
    transform: translateY(0);
    opacity: 1;
}

/* Event Button Animation */
#modal-event .event-button {
    transition: all 0.4s ease-out 0.5s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-event[style*="display: block"] .event-button {
    transform: translateY(0);
    opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #modal-event > div:first-child > div {
        transform: scale(0.9) translateY(10px);
    }

    #modal-event[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }

    #modal-event .event-content {
        transition-delay: 0.1s;
    }
}


#modal-history-d {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-history-d[style*="display: block"] {
    opacity: 1;
    display: block;
}

/* Backdrop Animation */
#modal-history-d > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-history-d[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Content Animation */
#modal-history-d > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-history-d[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* Close Button Animation */
#modal-history-d .modal-history-d-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-history-d[style*="display: block"] .modal-history-d-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

/* Input Animation */
#modal-history-d input {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-history-d[style*="display: block"] input {
    transform: translateY(0);
    opacity: 1;
}

/* Submit Button Animation */
#modal-history-d .history-d-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-history-d[style*="display: block"] .history-d-submit-button {
    transform: translateY(0);
    opacity: 1;
}

/* History List Animation */
#modal-history-d .history-list {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-history-d[style*="display: block"] .history-list {
    transform: translateY(0);
    opacity: 1;
}

/* History Item Animation */
#modal-history-d .history-item {
    transition: all 0.4s ease-out 0.25s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-history-d[style*="display: block"] .history-item {
    transform: translateY(0);
    opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #modal-history-d > div:first-child > div {
        transform: scale(0.9) translateY(10px);
    }

    #modal-history-d[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }
}


#modal-level-d {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-level-d[style*="display: block"] {
    opacity: 1;
    display: block;
}

/* Backdrop Animation */
#modal-level-d > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-level-d[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Content Animation */
#modal-level-d > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-level-d[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* Close Button Animation */
#modal-level-d .modal-level-d-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-level-d[style*="display: block"] .modal-level-d-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

/* Input Animation */
#modal-level-d input {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-level-d[style*="display: block"] input {
    transform: translateY(0);
    opacity: 1;
}

/* Submit Button Animation */
#modal-level-d .level-d-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-level-d[style*="display: block"] .level-d-submit-button {
    transform: translateY(0);
    opacity: 1;
}

/* Level Progress Animation */
#modal-level-d .level-progress {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-level-d[style*="display: block"] .level-progress {
    transform: translateY(0);
    opacity: 1;
}

/* Level Badge Animation */
#modal-level-d .level-badge {
    transition: all 0.4s ease-out 0.25s;
    transform: scale(0.8);
    opacity: 0;
}

#modal-level-d[style*="display: block"] .level-badge {
    transform: scale(1);
    opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #modal-level-d > div:first-child > div {
        transform: scale(0.9) translateY(10px);
    }

    #modal-level-d[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }
}




#modal-commission-d {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-commission-d[style*="display: block"] {
    opacity: 1;
    display: block;
}

/* Backdrop Animation */
#modal-commission-d > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-commission-d[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Content Animation */
#modal-commission-d > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-commission-d[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* Close Button Animation */
#modal-commission-d .modal-commission-d-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-commission-d[style*="display: block"] .modal-commission-d-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

/* Input Animation */
#modal-commission-d input {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-commission-d[style*="display: block"] input {
    transform: translateY(0);
    opacity: 1;
}

/* Submit Button Animation */
#modal-commission-d .commission-d-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-commission-d[style*="display: block"] .commission-d-submit-button {
    transform: translateY(0);
    opacity: 1;
}

/* Commission Details Animation */
#modal-commission-d .commission-details {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-commission-d[style*="display: block"] .commission-details {
    transform: translateY(0);
    opacity: 1;
}

/* History Table Animation */
#modal-commission-d .history-table {
    transition: all 0.4s ease-out 0.25s;
    transform: translateY(15px);
    opacity: 0;
}

#modal-commission-d[style*="display: block"] .history-table {
    transform: translateY(0);
    opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #modal-commission-d > div:first-child > div {
        transform: scale(0.9) translateY(15px);
    }

    #modal-commission-d[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }
}



#modal-howto-d {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-howto-d[style*="display: block"] {
    opacity: 1;
    display: block;
}

/* Backdrop Animation */
#modal-howto-d > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-howto-d[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Content Animation */
#modal-howto-d > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-howto-d[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* Close Button Animation */
#modal-howto-d .modal-howto-d-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-howto-d[style*="display: block"] .modal-howto-d-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

/* Input Animation */
#modal-howto-d input {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-howto-d[style*="display: block"] input {
    transform: translateY(0);
    opacity: 1;
}

/* Submit Button Animation */
#modal-howto-d .howto-d-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-howto-d[style*="display: block"] .howto-d-submit-button {
    transform: translateY(0);
    opacity: 1;
}

/* Step Container Animation */
#modal-howto-d .howto-step {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-howto-d[style*="display: block"] .howto-step {
    transform: translateY(0);
    opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #modal-howto-d > div:first-child > div {
        transform: scale(0.9) translateY(15px);
    }

    #modal-howto-d[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }
}




#modal-notify-d {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-notify-d[style*="display: block"] {
    opacity: 1;
    display: block;
}

/* Backdrop Animation */
#modal-notify-d > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-notify-d[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Content Animation */
#modal-notify-d > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-notify-d[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}


#modal-notify-d .modal-notify-d-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-notify-d[style*="display: block"] .modal-notify-d-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}


#modal-notify-d input {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-notify-d[style*="display: block"] input {
    transform: translateY(0);
    opacity: 1;
}


#modal-notify-d .notify-d-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-notify-d[style*="display: block"] .notify-d-submit-button {
    transform: translateY(0);
    opacity: 1;
}

#modal-notify-d .notification-list {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-notify-d[style*="display: block"] .notification-list {
    transform: translateY(0);
    opacity: 1;
}


#modal-notify-d .notification-item {
    transition: all 0.4s ease-out 0.25s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-notify-d[style*="display: block"] .notification-item {
    transform: translateY(0);
    opacity: 1;
}


@media (max-width: 768px) {
    #modal-notify-d > div:first-child > div {
        transform: scale(0.9) translateY(10px);
    }

    #modal-notify-d[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }
}


#modal-contact {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-contact[style*="display: block"] {
    opacity: 1;
    display: block;
}


#modal-contact > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-contact[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}


#modal-contact > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-contact[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}


#modal-contact .modal-contact-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-contact[style*="display: block"] .modal-contact-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}


#modal-contact input,
#modal-contact textarea {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-contact[style*="display: block"] input,
#modal-contact[style*="display: block"] textarea {
    transform: translateY(0);
    opacity: 1;
}


#modal-contact .contact-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-contact[style*="display: block"] .contact-submit-button {
    transform: translateY(0);
    opacity: 1;
}


#modal-contact .contact-info {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-contact[style*="display: block"] .contact-info {
    transform: translateY(0);
    opacity: 1;
}


@media (max-width: 768px) {
    #modal-contact > div:first-child > div {
        transform: scale(0.9) translateY(10px);
    }

    #modal-contact[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }
}


#modal-menu {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-menu[style*="display: block"] {
    opacity: 1;
    display: block;
}


#modal-menu > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-menu[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}


#modal-menu > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-menu[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}


#modal-menu .modal-menu-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-menu[style*="display: block"] .modal-menu-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}


#modal-menu .menu-item {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-menu[style*="display: block"] .menu-item {
    transform: translateY(0);
    opacity: 1;
}


#modal-menu .menu-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-menu[style*="display: block"] .menu-button {
    transform: translateY(0);
    opacity: 1;
}


@media (max-width: 768px) {
    #modal-menu > div:first-child > div {
        transform: scale(0.9) translateY(10px);
    }

    #modal-menu[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }

    #modal-menu .menu-item {
        transition-delay: 0.1s;
    }
}


#modal-deposit-d {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    display: none;
}

#modal-deposit-d[style*="display: block"] {
    opacity: 1;
    display: block;
}

/* Backdrop Animation */
#modal-deposit-d > div:first-child {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s ease-out;
}

#modal-deposit-d[style*="display: block"] > div:first-child {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Content Animation */
#modal-deposit-d > div:first-child > div {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4),
        opacity 0.4s ease-out,
        filter 0.4s ease-out;
    filter: blur(2px);
}

#modal-deposit-d[style*="display: block"] > div:first-child > div {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* Close Button Animation */
#modal-deposit-d .modal-deposit-d-close {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

#modal-deposit-d[style*="display: block"] .modal-deposit-d-close {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

/* Input Fields Animation */
#modal-deposit-d input,
#modal-deposit-d select {
    transition: all 0.4s ease-out 0.2s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-deposit-d[style*="display: block"] input,
#modal-deposit-d[style*="display: block"] select {
    transform: translateY(0);
    opacity: 1;
}

/* Submit Button Animation */
#modal-deposit-d .deposit-d-submit-button {
    transition: all 0.4s ease-out 0.3s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-deposit-d[style*="display: block"] .deposit-d-submit-button {
    transform: translateY(0);
    opacity: 1;
}

/* Payment Methods Animation */
#modal-deposit-d .payment-method {
    transition: all 0.4s ease-out 0.15s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-deposit-d[style*="display: block"] .payment-method {
    transform: translateY(0);
    opacity: 1;
}

/* Amount Section Animation */
#modal-deposit-d .amount-section {
    transition: all 0.4s ease-out 0.25s;
    transform: translateY(10px);
    opacity: 0;
}

#modal-deposit-d[style*="display: block"] .amount-section {
    transform: translateY(0);
    opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #modal-deposit-d > div:first-child > div {
        transform: scale(0.9) translateY(10px);
    }

    #modal-deposit-d[style*="display: block"] > div:first-child > div {
        transform: scale(1) translateY(0);
    }
}

/*css silde game*/

/* เพิ่ม CSS นี้ */
/*.swiper {
  overflow: hidden;
  position: relative;
  width: 100%;
  touch-action: pan-y;
  user-select: none;
}*/

.swiper-wrapper {
    display: flex;
    transition: transform 0.3s ease-out;
    will-change: transform;
    cursor: grab;
    height: 100%;
}

.swiper-wrapper.grabbing {
    cursor: grabbing;
}

.carousel-item {
    flex: 0 0 auto;
    transition: transform 0.2s;
    width: 126px;
    margin: 0 20px;
}

.carousel-item:active {
    transform: scale(0.98);
}

.css-3rzy7s .contact-ring-2 {
    height: 112px;
    width: 112px;
    animation: 2s linear 0s infinite normal none running contact-ring-keys-2;
}

.css-3rzy7s .contact-ring-3 {
    height: 132px;
    width: 132px;
    animation: 2s linear 0s infinite normal none running contact-ring-keys-3;
}

.css-3rzy7s .contact-icon-btn {
    animation: 2s ease-in-out 0s infinite normal none running contact-icon-btn-keys;
    transition: 0.2s;
}

@keyframes contact-ring-keys-1 {
    0%, 15% {
        opacity: 0;
    }
    30% {
        opacity: 1;
        border-width: 2px;
        box-shadow: rgb(255, 255, 255) 0px 0px 12px;
    }
    45% {
        opacity: 1;
        border-width: 6px;
        filter: blur(2px);
    }
    60% {
        opacity: 0.3;
        border-width: 0.5px;
        filter: blur(1px);
    }
    75%, 100% {
        opacity: 0;
    }
}



@keyframes contact-ring-keys-2 {
    0%, 30% {
        opacity: 0;
    }
    45% {
        opacity: 0.7;
        border-width: 1px;
        filter: blur(1px);
    }
    60% {
        opacity: 0.7;
        border-width: 4px;
        filter: blur(2px);
    }
    75% {
        opacity: 0.2;
        border-width: 0.5px;
        filter: blur(1px);
    }
    80%, 100% {
        opacity: 0;
    }
}


@keyframes contact-ring-keys-3 {
    0%, 30% {
        opacity: 0;
    }
    45% {
        opacity: 0.5;
        border-width: 0.5px;
        filter: blur(1px);
    }
    60% {
        opacity: 0.3;
        border-width: 1px;
        filter: blur(1px);
    }
    75% {
        opacity: 0.3;
        border-width: 2px;
        filter: blur(2px);
    }
    90% {
        opacity: 0.1;
        border-width: 0.5px;
        filter: blur(1px);
    }
    95%, 100% {
        opacity: 0;
    }
}


@keyframes contact-btn-keys {
    0% {
        height: 72px;
        width: 72px;
        background-color: rgb(3, 7, 24);
    }
    10% {
        height: 67px;
        width: 67px;
        background-color: rgb(19, 94, 209);
    }
    20% {
        height: 67px;
        width: 67px;
        background-color: rgb(19, 94, 209);
    }
    25% {
        height: 77px;
        width: 77px;
        background-color: rgb(19, 94, 209);
    }
    35% {
        height: 72px;
        width: 72px;
        background-color: rgb(3, 7, 24);
    }
    55% {
        height: 72px;
        width: 72px;
        background-color: rgb(3, 7, 24);
    }
    100% {
        height: 72px;
        width: 72px;
        background-color: rgb(7, 24, 59);
    }
}

@keyframes contact-icon-btn-keys {
    0%, 9% {
        mix-blend-mode: normal;
    }
    10%, 34% {
        mix-blend-mode: plus-lighter;
    }
    5%, 100% {
        mix-blend-mode: normal;
    }
}

/* สไตล์เมื่อปุ่มจำนวนเงินถูกเลือก */
.amount-button-active {
    background-color: rgb(6, 28, 69) !important;
    border-image: linear-gradient(165deg, rgb(0, 255, 255) -17.16%, rgb(1, 110, 195) 91.36%) 1 !important;
}

.amount-button-active div {
    opacity: 1 !important;
}

/* สไตล์เมื่อปุ่มยืนยันพร้อมใช้งาน */
.confirm-button-active {
    background: linear-gradient(165deg, rgb(0, 255, 255) -17.16%, rgb(1, 110, 195) 91.36%) !important;
    color: white !important;
    cursor: pointer !important;
}


.confirm-button-active {
    background: linear-gradient(165deg, rgb(0, 255, 255) -17.16%, rgb(1, 110, 195) 91.36%) !important;
    background-image: linear-gradient(165deg, rgb(0, 255, 255) -17.16%, rgb(1, 110, 195) 91.36%) !important;
    color: white !important;
    cursor: pointer !important;
    border: none !important;
}

/* สไตล์ปุ่มยืนยันปกติ */
.confirm-button-inactive {
    background-color: rgb(43, 54, 66) !important;
    color: rgb(85, 85, 85) !important;
    cursor: default !important;
}



.text-\[\#B5B5B5\] {
    /*color: rgb(255 232 232)!important;*/
    color : var(--font-theme-color)!important;
}

.top-bar  {
    background: var(--top-bar) !important;
}

.bg-b {
    background-color: var(--bg-other-color) !important;
}

.bg-sl {
    background-color: var(--menu-left-color) !important;
}
.bg-bu{
background-color : var(--top-bar-under);
}

.footer-bar {
    background: var(--top-bar) !important;
}


.text-c {
    color : var(--text-dif-theme) !important;
    font-weight: bold !important;

}

.modal-c {
    background : var(--modal-theme-color) !important;
}


/*.tagactive {
  background-color: var(--btn-theme-color)!important;
  box-shadow: 
    rgb(255, 255, 255) 0px 2px 4px 0px inset,
    rgba(0, 0, 0, 0.247) 0px 4px 4px 0px,
    rgba(0, 0, 0, 0.247) 0px -2px 1px 0px inset,
    rgba(0, 0, 0, 0.247) 0px 4px 4px 0px;
}*/


.bg-l-menu {
    background: var(--btn-left)!important;
}

.bg-left-menu {
    background: var(--btn-button-left)!important;
}


.btn-left {
    background: var(--btn-menu-left)!important;
    border-color: var(--btn-border-left)!important;
}

.text-w {
    color : var(--text-color-btn) !important;
}


.template-mo {
        /*background-color: rgb(0 0 0)!important;*/
}

.box-co {
    background: var(--btn-menu-left)!important;
}


.line-c {
    background-color: var(--text-color-btn)!important;
}

.hilight-bar-c {
    background: var(--bg-highlight)!important;
}

.hilight-bg {
    background : var(--btn-menu-left)!important;
}
.hlight-b {
    background : var(--btn-button-left)!important;
    border-radius: 10px;
}



.btn-tab-active {
    background: var(--btn-menu-left) !important;
    box-shadow: rgb(2, 120, 199) 0px 0px 7.5px 0px !important;
}

.active-tab-text {
    color: white !important;
}

.bg-btn-login {
    background : var(--btn-login-color)!important;
     background-origin: border-box;
    background-clip: content-box, border-box;
    border: 1px solid #ffe6a1;
    border-radius: 8px;
}
.bg-btn-reg {
     background : var(--btn-reg-color)!important;
     background-origin: border-box;
    background-clip: content-box, border-box;
    border: none;
    border-radius: 8px;
}


.min-h-full , .footer-c , .bd-c {
    background-color: var(--bg-main-color)!important;	  	
}

.c-lang {
 background: var(--bg-highlight)!important;
}


.btn-active-d {
        box-shadow: var(--bg-highlight) 0px -4px 9px 0px !important;
          background: var(--bg-highlight)!important;
}


.bg-wl {
        background-color: var(--top-bar-under)!important;
}


.txt-c {
    color: var(--text-color-btn) !important;
}


.icon-c {
    color:  var(--txt-white) !important;
}