/*
 * RMW presentation refresh
 * Visual-only overrides. Existing PHP, DOM IDs, events and data contracts remain unchanged.
 */

/* Promotion page: consistent artwork, readable copy and comfortable spacing */
.rmw-promotion-page {
    padding: 34px 20px 52px !important;
}

.rmw-promotion-page > .container {
    max-width: 1240px;
}

.rmw-promotion-page .row {
    align-items: stretch;
    margin-right: -10px;
    margin-left: -10px;
}

.rmw-promotion-page .-promotion-card-link {
    display: flex;
    max-width: none;
    margin: 0 0 20px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.rmw-promotion-page .-promotion-card-link > a {
    display: flex !important;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.rmw-promotion-page .x-card.-multi-card {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 15%, transparent) !important;
    border-radius: 18px !important;
    background: linear-gradient(155deg, var(--rmw-accent) 0%, var(--rmw-accent) 100%) !important;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--rmw-surface-deep) 24%, transparent);
}

.rmw-promotion-page .x-card.-multi-card::before {
    display: none !important;
}

.rmw-promotion-page .x-card.-multi-card .-img-container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--rmw-surface);
}

.rmw-promotion-page .x-card.-multi-card .-img-container .-img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    transform: none;
    transition: transform .3s ease;
}

.rmw-promotion-page .x-card.-multi-card:hover .-img-container .-img {
    transform: scale(1.035);
}

.rmw-promotion-page .x-card.-multi-card .card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    padding: 17px 18px 19px !important;
}

.rmw-promotion-page .x-card.-multi-card .-title-container {
    width: 100%;
    margin: 0 !important;
    text-align: left;
}

.rmw-promotion-page .x-card.-multi-card .-title {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--rmw-white) !important;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    overflow-wrap: anywhere;
    word-break: normal;
}

.rmw-promotion-page .x-card.-multi-card .card-footer:empty {
    display: none;
}

/* Promotion detail modal */
.rmw-promotion-modal .modal-dialog {
    width: calc(100% - 28px);
    max-width: 760px;
    margin: 24px auto;
}

.rmw-promotion-modal .modal-content {
    max-height: calc(100vh - 48px);
    overflow: hidden;
    color: var(--rmw-white);
    border: 1px solid color-mix(in srgb, var(--rmw-white) 16%, transparent) !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, var(--rmw-accent) 0%, var(--rmw-surface) 100%) !important;
    box-shadow: 0 24px 70px color-mix(in srgb, var(--rmw-surface-deep) 55%, transparent);
}

.rmw-promotion-modal .close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--rmw-white) !important;
    text-shadow: none;
    opacity: 1;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 28%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rmw-surface-deep) 62%, transparent);
}

.rmw-promotion-modal .-modal-header {
    min-height: 0;
    padding: 0 !important;
    border: 0;
}

.rmw-promotion-modal .-modal-body {
    padding: 0 !important;
    overflow-x: hidden;
}

.rmw-promotion-modal .x-card.-single-card {
    min-height: 0;
    padding: 0 0 20px !important;
    overflow: visible;
    color: var(--rmw-white);
    background: transparent !important;
}

.rmw-promotion-modal .x-card.-single-card .-img-container {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--rmw-surface-deep);
}

.rmw-promotion-modal .x-card.-single-card .-img-container .-img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: contain;
    object-position: center;
}

.rmw-promotion-modal .x-card.-single-card .card-body {
    padding: 20px 24px 4px !important;
}

.rmw-promotion-modal .x-card.-single-card .-title-container {
    margin: 0 0 14px !important;
    padding: 0 48px 14px 0;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--rmw-white) 15%, transparent);
}

.rmw-promotion-modal .x-card.-single-card .-title {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--rmw-white) !important;
    font-size: 1.25rem !important;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.rmw-promotion-modal .-promotion-content {
    max-width: 100%;
    padding: 0 !important;
    color: color-mix(in srgb, var(--rmw-white) 94%, transparent);
    font-size: .95rem !important;
    line-height: 1.75;
    overflow-x: auto;
    overflow-wrap: anywhere;
}

.rmw-promotion-modal .-promotion-content img,
.rmw-promotion-modal .-promotion-content video,
.rmw-promotion-modal .-promotion-content iframe {
    max-width: 100% !important;
    height: auto !important;
}

.rmw-promotion-modal .-promotion-content table {
    max-width: 100%;
}

.rmw-promotion-modal .card-footer {
    display: flex;
    justify-content: center;
    padding: 16px 24px 0 !important;
}

.rmw-promotion-modal .card-footer .-btn {
    position: static !important;
    width: min(100%, 320px) !important;
    margin: 0 !important;
    padding: 13px 22px !important;
    color: var(--rmw-surface) !important;
    font-weight: 700;
    border: 0;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--rmw-primary), var(--rmw-primary)) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--rmw-surface-deep) 28%, transparent);
}

@media (max-width: 767.98px) {
    .rmw-promotion-page {
        padding: 20px 10px 96px !important;
    }

    .rmw-promotion-page .row {
        margin-right: -6px;
        margin-left: -6px;
    }

    .rmw-promotion-page .-promotion-card-link {
        margin-bottom: 12px !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .rmw-promotion-page .x-card.-multi-card {
        border-radius: 14px !important;
    }

    .rmw-promotion-page .x-card.-multi-card .card-body {
        padding: 13px 14px 15px !important;
    }

    .rmw-promotion-page .x-card.-multi-card .-title {
        font-size: .9rem !important;
        line-height: 1.45;
    }

    .rmw-promotion-modal .modal-dialog {
        width: calc(100% - 16px);
        margin: 8px auto;
    }

    .rmw-promotion-modal .modal-content {
        max-height: calc(100vh - 16px);
        border-radius: 16px !important;
    }

    .rmw-promotion-modal .x-card.-single-card .card-body {
        padding: 18px 16px 2px !important;
    }

    .rmw-promotion-modal .x-card.-single-card .-title-container {
        padding-right: 42px;
    }

    .rmw-promotion-modal .x-card.-single-card .-title {
        font-size: 1.08rem !important;
    }

    .rmw-promotion-modal .-promotion-content {
        font-size: .9rem !important;
        line-height: 1.7;
    }

    .rmw-promotion-modal .card-footer {
        padding: 14px 16px 0 !important;
    }
}

@media (max-width: 575.98px) {
    .rmw-promotion-page .-promotion-card-link {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .rmw-promotion-page .x-card.-multi-card .-title {
        font-size: .96rem !important;
    }
}

/* depositModal v19: remove white actions and improve bank-logo contrast */
#depositModal .btn-select-method-dp.active {
    color: var(--rmw-white) !important;
    border-color: color-mix(in srgb, var(--rmw-primary) 82%, transparent) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--rmw-accent) 96%, transparent), color-mix(in srgb, var(--rmw-surface) 98%, transparent)) !important;
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--rmw-surface-deep) 34%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 20%, transparent) !important;
}

#depositModal .btn-select-method-dp.active .-btn-inner-content-title {
    color: var(--rmw-white) !important;
    text-shadow: 0 1px 5px color-mix(in srgb, var(--rmw-surface-deep) 38%, transparent);
}

#depositModal .btn-select-method-dp .-ic-wrapper,
#depositModal .btn-select-method-dp.active .-ic-wrapper {
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 55%, transparent) !important;
    background: linear-gradient(145deg, var(--rmw-surface-deep), var(--rmw-surface-deep)) !important;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--rmw-white) 5%, transparent),
        0 6px 14px color-mix(in srgb, var(--rmw-surface-deep) 28%, transparent);
}

#depositModal .btn-select-method-dp .-ic {
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--rmw-white) 32%, transparent));
}

#depositModal .cicle-bank {
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 72%, transparent) !important;
    background:
        radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--rmw-white) 15%, transparent), transparent 34%),
        linear-gradient(145deg, var(--rmw-surface), var(--rmw-surface-deep)) !important;
    box-shadow:
        inset 0 0 0 3px color-mix(in srgb, var(--rmw-white) 4.5%, transparent),
        0 9px 20px color-mix(in srgb, var(--rmw-surface-deep) 30%, transparent);
}

#depositModal .img-bank,
#depositModal #bank-deposit-img,
#depositModal #bank-payment-img {
    padding: 3px;
    border-radius: 12px;
    background: transparent !important;
    filter:
        drop-shadow(0 0 2px color-mix(in srgb, var(--rmw-white) 85%, transparent))
        drop-shadow(0 3px 4px color-mix(in srgb, var(--rmw-bg-deep) 38%, transparent));
}

#depositModal #btn-copy-accno,
#depositModal #btn-copy-accno-true,
#depositModal #btn-slip,
#depositModal .btn.-submit,
#depositModal .crypto-btn {
    color: var(--rmw-text-strong) !important;
    border: 1px solid var(--rmw-border-gold) !important;
    background: var(--rmw-button-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
    text-shadow: none;
}

#depositModal #btn-copy-accno:hover,
#depositModal #btn-copy-accno-true:hover,
#depositModal #btn-slip:hover,
#depositModal .btn.-submit:hover,
#depositModal .crypto-btn:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

#depositModal .step-counter {
    color: var(--rmw-primary-contrast) !important;
    border: 1px solid var(--rmw-primary-strong);
    background: var(--rmw-active-background) !important;
}

/* Complete theme isolation v20.
 * Keep every visible and hidden component on the active template_color_* palette. */
html body .modal-backdrop.show {
    background-color: var(--rmw-bg-deep) !important;
}

html body .rmw-promotion-page,
html body .x-promotion-index.rmw-promotion-page {
    color: var(--rmw-text) !important;
    background: var(--rmw-page-background) !important;
}

html body .rmw-promotion-page .x-card.-multi-card,
html body .x-promotion-index.rmw-promotion-page .x-card.-multi-card {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-card-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .rmw-promotion-page .x-card.-multi-card:hover,
html body .rmw-promotion-page .x-card.-multi-card:focus-within {
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-surface-hover) !important;
    box-shadow: var(--rmw-shadow) !important;
}

html body .rmw-promotion-page .x-card.-multi-card .-img-container,
html body .rmw-promotion-modal .x-card.-single-card .-img-container {
    background: var(--rmw-surface-deep) !important;
}

html body .rmw-promotion-page .x-card.-multi-card .card-body,
html body .rmw-promotion-page .x-card.-multi-card .card-footer {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
}

html body .rmw-promotion-page .x-card.-multi-card .-title,
html body .rmw-promotion-page .x-card.-multi-card .-title-container,
html body .rmw-promotion-page .-promotion-card-link,
html body .rmw-promotion-page .-promotion-card-link > a {
    color: var(--rmw-text-strong) !important;
}

html body .rmw-promotion-modal .modal-content,
html body .rmw-promotion-modal .x-card.-single-card {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-modal-background) !important;
    box-shadow: var(--rmw-shadow) !important;
}

html body .rmw-promotion-modal .x-card.-single-card .card-body,
html body .rmw-promotion-modal .x-card.-single-card .card-footer,
html body .rmw-promotion-modal .x-card.-single-card .-modal-header,
html body .rmw-promotion-modal .x-card.-single-card .-modal-body {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
}

html body .rmw-promotion-modal .close,
html body #accountModal .-modal-main-account > .modal-content > .close {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-surface-strong) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .rmw-promotion-modal .close:hover,
html body .rmw-promotion-modal .close:focus,
html body #accountModal .-modal-main-account > .modal-content > .close:hover,
html body #accountModal .-modal-main-account > .modal-content > .close:focus {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

html body .rmw-promotion-modal .-title,
html body .rmw-promotion-modal .-title-container {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border) !important;
}

html body .rmw-promotion-modal .-promotion-content,
html body .rmw-promotion-modal .-promotion-content p,
html body .rmw-promotion-modal .-promotion-content li,
html body .rmw-promotion-modal .-promotion-content span,
html body .rmw-promotion-modal .-promotion-content td,
html body .rmw-promotion-modal .-promotion-content th {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
}

html body .rmw-promotion-modal .card-footer .-btn {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .rmw-promotion-modal .card-footer .-btn:hover,
html body .rmw-promotion-modal .card-footer .-btn:focus {
    color: var(--rmw-text-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

html body #accountModal,
html body #accountModal .modal-dialog,
html body #accountModal .-modal-main-account .-modal-body {
    color: var(--rmw-text) !important;
}

html body #accountModal .-modal-main-account > .modal-content {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-modal-background) !important;
    box-shadow: var(--rmw-shadow) !important;
}

html body #accountModal .x-modal-account-menu,
html body #accountModal .x-modal-account-menu .navbar-nav {
    color: var(--rmw-text) !important;
    background: transparent !important;
}

html body #accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link,
html body #accountModal .x-invitation-menu-wrapper .-btn-menu {
    color: var(--rmw-muted) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-nav-background) !important;
    box-shadow: none !important;
}

html body #accountModal .x-modal-account-menu .nav-link .-text-menu,
html body #accountModal .x-modal-account-menu .nav-link i,
html body #accountModal .x-modal-account-menu .nav-link svg {
    color: var(--rmw-muted) !important;
}

html body #accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link:hover,
html body #accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link:focus,
html body #accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link.active,
html body #accountModal .x-invitation-menu-wrapper .-btn-menu:hover,
html body #accountModal .x-invitation-menu-wrapper .-btn-menu:focus,
html body #accountModal .x-invitation-menu-wrapper .-btn-menu.-active,
html body #accountModal .x-invitation-menu-wrapper .-btn-menu.active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body #accountModal .x-modal-account-menu .nav-link:hover .-text-menu,
html body #accountModal .x-modal-account-menu .nav-link:focus .-text-menu,
html body #accountModal .x-modal-account-menu .nav-link.active .-text-menu,
html body #accountModal .x-modal-account-menu .nav-link:hover i,
html body #accountModal .x-modal-account-menu .nav-link.active i {
    color: var(--rmw-primary-contrast) !important;
}

html body #accountModal .-layout-account,
html body #accountModal .desktop-modal-content,
html body #accountModal .desktop-modal-content > div {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-panel-background) !important;
}

html body #accountModal .desktop-modal-content > div[style*="display: none"],
html body #accountModal .desktop-modal-content > div.d-none {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-panel-background) !important;
}

html body #accountModal .x-title-modal,
html body #accountModal .modal-title {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border) !important;
}

html body #accountModal .x-profile-group-trace-body .-profile-info-wrapper,
html body #accountModal .x-profile-group-trace-body .-bank-info-wrapper,
html body #accountModal .-change-password-container,
html body #accountModal .-coupon-member-detail,
html body #accountModal .cashback-content > .x-invitation-overview,
html body #accountModal .x-invitation-overview,
html body #accountModal .remark-cashback,
html body #accountModal .card-remark-cb,
html body #accountModal .container-coupon,
html body #accountModal .-account-promotion-container,
html body #accountModal .-no-result-container {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-card-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body #accountModal .x-profile-info.-group-trace-type .-profile-image-wrapper,
html body #accountModal .x-profile-bank-info .-bank-detail .-img {
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-surface-deep) !important;
}

html body #accountModal .x-profile-info .-username-wrapper .-label,
html body #accountModal .x-profile-bank-info .-heading-title,
html body #accountModal .x-profile-bank-info .-bank-name .-label,
html body #accountModal .dataTables_info,
html body #accountModal .dataTables_length,
html body #accountModal .dataTables_filter {
    color: var(--rmw-muted) !important;
}

html body #accountModal .x-profile-info .-username-wrapper .-label-highlight,
html body #accountModal .btn-tranparent,
html body #accountModal .btn-tranparent a {
    color: var(--rmw-primary-soft) !important;
}

html body #accountModal .x-profile-info .-username-wrapper .-value,
html body #accountModal .x-profile-bank-info .-bank-detail .-name,
html body #accountModal .x-profile-bank-info .-bank-name,
html body #accountModal .x-profile-bank-info .-bank-name .-value,
html body #accountModal .-text-container,
html body #accountModal .container-coupon,
html body #accountModal .card-remark-cb p,
html body #accountModal .cashback-content p,
html body #accountModal label,
html body #accountModal p,
html body #accountModal li,
html body #accountModal span:not(.select2-selection__rendered) {
    color: var(--rmw-text) !important;
}

html body #accountModal input,
html body #accountModal select,
html body #accountModal textarea,
html body #accountModal .form-control,
html body #accountModal .x-coupon-input,
html body #accountModal .select2-selection,
html body #accountModal .dataTables_filter input,
html body #accountModal .dataTables_length select {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-input-background) !important;
    box-shadow: none !important;
}

html body #accountModal input::placeholder,
html body #accountModal textarea::placeholder,
html body #accountModal .form-control::placeholder {
    color: var(--rmw-subtle) !important;
}

html body #accountModal .table-responsive,
html body #accountModal .table,
html body #accountModal table.dataTable {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-surface-deep) !important;
}

html body #accountModal .table thead th,
html body #accountModal table.dataTable thead th {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-surface-strong) !important;
}

html body #accountModal .table tbody tr,
html body #accountModal .table tbody td,
html body #accountModal table.dataTable tbody tr,
html body #accountModal table.dataTable tbody td {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
}

html body #accountModal .paginate_button,
html body #accountModal .page-link {
    color: var(--rmw-muted) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-button-background) !important;
}

html body #accountModal .paginate_button:hover,
html body #accountModal .paginate_button.current,
html body #accountModal .page-item.active .page-link {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

html body #accountModal .x-profile-info .-btn-change-password,
html body #accountModal .x-admin-contact a,
html body #accountModal .btn.-submit,
html body #accountModal .-btn-header-login,
html body #accountModal .btn-primary {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body #accountModal .x-profile-info .-btn-change-password:hover,
html body #accountModal .x-admin-contact a:hover,
html body #accountModal .btn.-submit:hover,
html body #accountModal .-btn-header-login:hover,
html body #accountModal .btn-primary:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

html body #depositModal,
html body #withdrawModal {
    --cashier-surface: var(--rmw-card-background);
    --cashier-surface-soft: var(--rmw-surface);
    --cashier-border: var(--rmw-border);
    --cashier-highlight: var(--rmw-primary-soft);
    --deposit-bg: var(--rmw-bg-soft);
    --deposit-panel: var(--rmw-card-background);
    --deposit-card: var(--rmw-surface-strong);
    --deposit-border: var(--rmw-border);
    --deposit-text: var(--rmw-text);
    --deposit-muted: var(--rmw-muted);
    --deposit-accent: var(--rmw-primary);
}

html body #depositModal .modal-body,
html body #withdrawModal .modal-body,
html body #depositModal .-layout-deposit,
html body #withdrawModal .-layout-withdraw,
html body #depositModal .tab-content,
html body #withdrawModal .tab-content {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
}

/* Mobile account drawer theme lock v21.
 * Every color comes from the active template_color_*.css file. */
html body .x-menu-account-list-sidebar,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-nav-background) !important;
    box-shadow: var(--rmw-shadow) !important;
}

html body .x-menu-account-list-sidebar .-overlay {
    background: var(--rmw-bg-deep) !important;
}

html body .x-menu-account-list-sidebar .-modal-profile-mobile,
html body .x-menu-account-list-sidebar .-modal-profile-mobile .-balance-container,
html body .x-menu-account-list-sidebar .-modal-profile-mobile .-balance-container .-text-username {
    color: var(--rmw-text-strong) !important;
    background: transparent !important;
}

html body .x-menu-account-list-sidebar .-modal-profile-mobile .fa-times {
    color: var(--rmw-text-strong) !important;
}

html body .x-menu-account-list-sidebar .-modal-profile-mobile .fa-times:hover,
html body .x-menu-account-list-sidebar .-modal-profile-mobile .fa-times:focus {
    color: var(--rmw-primary-soft) !important;
}

html body .x-menu-account-list-sidebar .-modal-profile-mobile .-balance-container .-amount,
html body .x-menu-account-list-sidebar .text-green-lighter {
    color: var(--rmw-primary-soft) !important;
}

html body .x-menu-account-list-sidebar .-modal-profile-mobile .-balance-container .-user-balance,
html body .x-menu-account-list-sidebar .-modal-profile-mobile .-balance-container .-user-balance .-inner-box-wrapper {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-surface-deep) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-menu-account-list-sidebar .-btn-balance,
html body .x-menu-account-list-sidebar .-btn-balance .fas {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
}

html body .x-menu-account-list-sidebar .-pending-approved {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-surface) !important;
}

html body .x-menu-account-list-sidebar .-pending-approved .fas,
html body .x-menu-account-list-sidebar .-pending-approved .x-queue-number-expression {
    color: var(--rmw-primary-soft) !important;
}

html body .x-menu-account-list-sidebar .-transaction-button-wrapper {
    background: transparent !important;
}

html body .x-menu-account-list-sidebar .x-transaction-button-v2,
html body .x-menu-account-list-sidebar .x-transaction-button-v2.-deposit,
html body .x-menu-account-list-sidebar .x-transaction-button-v2.-withdraw {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background-color: var(--rmw-surface-strong) !important;
    background-image: none !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-menu-account-list-sidebar .x-transaction-button-v2.-deposit {
    border-color: var(--rmw-success) !important;
}

html body .x-menu-account-list-sidebar .x-transaction-button-v2.-withdraw {
    border-color: var(--rmw-danger) !important;
}

html body .x-menu-account-list-sidebar .x-transaction-button-v2 .-title,
html body .x-menu-account-list-sidebar .x-transaction-button-v2 .-sub-title {
    color: var(--rmw-text-strong) !important;
}

html body .x-menu-account-list-sidebar .x-transaction-button-v2:hover,
html body .x-menu-account-list-sidebar .x-transaction-button-v2:focus,
html body .x-menu-account-list-sidebar .x-transaction-button-v2:active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item button.nav-link,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item a.nav-link {
    color: var(--rmw-muted) !important;
    border: 1px solid var(--rmw-border) !important;
    border-left: 4px solid var(--rmw-primary) !important;
    background: var(--rmw-card-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link .-text-menu,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link i,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link svg {
    color: var(--rmw-text) !important;
}

html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item.active .nav-link,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:hover,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:focus,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item.active .nav-link .-text-menu,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:hover .-text-menu,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:focus .-text-menu,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:active .-text-menu {
    color: var(--rmw-primary-contrast) !important;
    text-shadow: none !important;
}

/* Final theme lock: remains last so no component-specific hard-coded palette can win. */
html body,
html body #main__content {
    color: var(--rmw-text) !important;
    background-color: var(--rmw-bg) !important;
}

html body::before {
    background: var(--rmw-page-background) !important;
}

html body .x-header.js-header-selector,
html body .x-header.js-header-selector.-sticky,
html body .x-header .navbar,
html body .rmw-header-shell {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-header-background) !important;
}

html body .rmw-left-menu,
html body .rmw-reference-menu,
html body .navbarCategory,
html body .fix_footer2.show_m,
html body .x-footer.-ezl.-logged {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-nav-background) !important;
}

html body .rmw-left-menu__item,
html body .rmw-reference-menu a,
html body .navbarCategory a,
html body .navbarCategory button,
html body .navbarCategory .nav-link,
html body .fix_footer2.show_m a {
    color: var(--rmw-muted) !important;
}

html body .rmw-left-menu__item:hover,
html body .rmw-reference-menu a:hover,
html body .navbarCategory a:hover,
html body .navbarCategory button:hover,
html body .navbarCategory .nav-link:hover,
html body .fix_footer2.show_m a:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

html body .rmw-left-menu__item.is-active,
html body .rmw-reference-menu .is-active,
html body .rmw-reference-menu .active,
html body .navbarCategory .is-active,
html body .navbarCategory .active,
html body .fix_footer2.show_m .is-active,
html body .fix_footer2.show_m .active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

html body .x-header.js-header-selector.-anon .rmw-reference-menu .rmw-reference-menu__item:hover,
html body .x-header.js-header-selector.-anon .rmw-reference-menu .rmw-reference-menu__item:focus {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-button-hover-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-header.js-header-selector.-anon .rmw-reference-menu .rmw-reference-menu__item.is-active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: inset 0 -3px 0 var(--rmw-primary), var(--rmw-shadow-soft) !important;
}

html body .x-header.js-header-selector.-anon .rmw-reference-menu .rmw-reference-menu__item.is-active i,
html body .x-header.js-header-selector.-anon .rmw-reference-menu .rmw-reference-menu__item.is-active span {
    color: var(--rmw-primary-contrast) !important;
}

html body .x-quick-transaction-buttons .btn,
html body .x-quick-transaction-buttons a,
html body .x-quick-transaction-buttons button {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-button-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-quick-transaction-buttons .btn:hover,
html body .x-quick-transaction-buttons a:hover,
html body .x-quick-transaction-buttons button:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

html body .rmw-announcer,
html body .x-title-with-tag-header,
html body .rmw-lottery-board,
html body .rmw-lottery-card,
html body .rmw-provider-section,
html body .rmw-section-panel,
html body .x-ranking-wrapper,
html body .x-ranking-list,
html body .rmw-promotion-card {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-panel-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .rmw-announcer i,
html body .x-title-with-tag-header i,
html body .rmw-section-title,
html body .rmw-lottery-board .-title,
html body .x-ranking-wrapper .-title {
    color: var(--rmw-primary-strong) !important;
}

html body .x-game-list-item-macro-in-share .-inner-wrapper,
html body .x-game-list-item-macro .-inner-wrapper,
html body .x-promotion-list-item,
html body .rmw-promotion-card {
    border-color: var(--rmw-border) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body #accountModal .modal-content,
html body #depositModal .modal-content,
html body #withdrawModal .modal-content,
html body #loginModal .modal-content,
html body #registerModal .modal-content,
html body #historyModal .modal-content,
html body #transactionModal .modal-content {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-modal-background) !important;
    box-shadow: var(--rmw-shadow) !important;
}

html body .modal .modal-content h1,
html body .modal .modal-content h2,
html body .modal .modal-content h3,
html body .modal .modal-content h4,
html body .modal .modal-content h5,
html body .modal .modal-content h6,
html body .modal .modal-content label,
html body .modal .modal-title {
    color: var(--rmw-text-strong) !important;
}

html body .modal .form-control,
html body .modal input,
html body .modal select,
html body .modal textarea,
html body .select2-container--default .select2-selection--single,
html body .select2-dropdown {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-input-background) !important;
}

html body .modal .form-control::placeholder,
html body .modal input::placeholder,
html body .modal textarea::placeholder {
    color: var(--rmw-subtle) !important;
    opacity: 1;
}

html body #depositModal #btn-copy-accno,
html body #depositModal #btn-copy-accno-true,
html body #depositModal #btn-slip,
html body #depositModal .btn.-submit,
html body #depositModal .crypto-btn,
html body #withdrawModal .btn.-submit,
html body #loginModal .btn-primary,
html body #registerModal .btn-primary {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-gold) !important;
    background: var(--rmw-button-background) !important;
}

html body #depositModal #btn-copy-accno:hover,
html body #depositModal #btn-copy-accno-true:hover,
html body #depositModal #btn-slip:hover,
html body #depositModal .btn.-submit:hover,
html body #depositModal .crypto-btn:hover,
html body #withdrawModal .btn.-submit:hover,
html body #loginModal .btn-primary:hover,
html body #registerModal .btn-primary:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

html body #depositModal .btn-select-method-dp.active,
html body #withdrawModal .btn-select-method-wd.active,
html body #depositModal .step-counter,
html body #withdrawModal .step-counter {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

/* =========================================================
 * Theme token bridge
 * All visible palette decisions come from template_color_*.css.
 * ======================================================= */
html,
body,
#main__content,
#main__content.-sticky {
    color: var(--rmw-text) !important;
    background-color: var(--rmw-bg) !important;
}

body::before {
    background: var(--rmw-page-background) !important;
}

.x-header.js-header-selector,
.x-header.js-header-selector.-sticky,
.x-header .navbar,
.x-header .navbar-collapse,
.rmw-header-shell {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-header-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

.rmw-left-menu,
.rmw-reference-menu,
.fix_footer2.show_m,
.x-footer.-ezl.-logged,
.x-footer.-ezl.-logged .-logged-wrapper,
.x-footer.-ezl.-logged .-footer-inner-wrapper {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-nav-background) !important;
}

.rmw-left-menu__item,
.rmw-reference-menu a,
.rmw-reference-menu button,
.fix_footer2.show_m a,
.fix_footer2.show_m button,
.x-footer.-ezl.-logged a {
    color: var(--rmw-muted) !important;
    border-color: transparent !important;
    background-color: transparent !important;
}

.rmw-left-menu__item:hover,
.rmw-reference-menu a:hover,
.rmw-reference-menu button:hover,
.fix_footer2.show_m a:hover,
.fix_footer2.show_m button:hover,
.x-footer.-ezl.-logged a:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

.rmw-left-menu__item.is-active,
.rmw-reference-menu a.is-active,
.rmw-reference-menu .active,
.fix_footer2.show_m a.is-active,
.fix_footer2.show_m .active,
.x-footer.-ezl.-logged a.active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: 0 5px 14px rgba(var(--rmw-shadow-rgb), .28) !important;
}

.x-quick-transaction-buttons .btn,
.x-quick-transaction-buttons a,
.x-quick-transaction-buttons button,
.btn-select-method-dp,
.btn-select-method-wd,
.rmw-theme-button,
.x-header .-btn-login,
.x-header .-btn-register {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-button-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

.x-quick-transaction-buttons .btn:hover,
.x-quick-transaction-buttons a:hover,
.x-quick-transaction-buttons button:hover,
.btn-select-method-dp:hover,
.btn-select-method-wd:hover,
.rmw-theme-button:hover,
.x-header .-btn-login:hover,
.x-header .-btn-register:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

.navbarCategory,
.navbarCategory .navbar-nav,
.navbarCategory .nav,
.navbarCategory .-category-wrapper {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-nav-background) !important;
}

.navbarCategory a,
.navbarCategory button,
.navbarCategory .nav-link {
    color: var(--rmw-muted) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-card-background) !important;
}

.navbarCategory a:hover,
.navbarCategory button:hover,
.navbarCategory .nav-link:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

.navbarCategory a.active,
.navbarCategory a.is-active,
.navbarCategory button.active,
.navbarCategory .nav-link.active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

.rmw-announcer,
.x-title-with-tag-header,
.rmw-lottery-board,
.rmw-lottery-card,
.rmw-provider-section,
.rmw-section-panel,
.x-ranking-wrapper,
.x-ranking-list,
.x-card,
.card:not(.border-0) {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-panel-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

.rmw-announcer i,
.rmw-announcer .fa,
.rmw-announcer .fas,
.x-title-with-tag-header .fa,
.x-title-with-tag-header .fas,
.rmw-lottery-board .-title,
.rmw-lottery-card .-title,
.rmw-section-title,
.x-ranking-wrapper .-title {
    color: var(--rmw-primary-strong) !important;
}

.rmw-lottery-number,
.rmw-lottery-number--hero,
.rmw-lottery-number--two,
.x-ranking-list .-amount,
.x-ranking-list .-score {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-border-gold) !important;
    background: var(--rmw-active-background) !important;
}

.x-game-list-item-macro-in-share .-inner-wrapper,
.x-game-list-item-macro .-inner-wrapper,
.x-promotion-list-item,
.rmw-promotion-card {
    border-color: var(--rmw-border) !important;
    background: var(--rmw-card-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

.x-game-list-item-macro-in-share:hover .-inner-wrapper,
.x-game-list-item-macro:hover .-inner-wrapper,
.x-promotion-list-item:hover,
.rmw-promotion-card:hover {
    border-color: var(--rmw-border-gold) !important;
    box-shadow: var(--rmw-shadow) !important;
}

#accountModal .modal-content,
#depositModal .modal-content,
#withdrawModal .modal-content,
#loginModal .modal-content,
#registerModal .modal-content,
#historyModal .modal-content,
#transactionModal .modal-content,
.modal.rmw-modal .modal-content {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-modal-background) !important;
    box-shadow: var(--rmw-shadow) !important;
}

#accountModal .modal-header,
#accountModal .modal-footer,
#depositModal .modal-header,
#depositModal .modal-footer,
#withdrawModal .modal-header,
#withdrawModal .modal-footer,
#loginModal .modal-header,
#loginModal .modal-footer,
#registerModal .modal-header,
#registerModal .modal-footer,
#historyModal .modal-header,
#historyModal .modal-footer,
#transactionModal .modal-header,
#transactionModal .modal-footer {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: rgba(var(--rmw-white-rgb), .035) !important;
}

#accountModal .modal-title,
#depositModal .modal-title,
#withdrawModal .modal-title,
#loginModal .modal-title,
#registerModal .modal-title,
#historyModal .modal-title,
#transactionModal .modal-title,
.modal .modal-content h1,
.modal .modal-content h2,
.modal .modal-content h3,
.modal .modal-content h4,
.modal .modal-content h5,
.modal .modal-content h6,
.modal .modal-content label {
    color: var(--rmw-text-strong) !important;
}

.modal .modal-content .text-muted,
.modal .modal-content small,
.modal .modal-content .description,
.modal .modal-content .-description {
    color: var(--rmw-muted) !important;
}

#accountModal input,
#accountModal select,
#accountModal textarea,
#depositModal input,
#depositModal select,
#depositModal textarea,
#withdrawModal input,
#withdrawModal select,
#withdrawModal textarea,
#loginModal input,
#loginModal select,
#loginModal textarea,
#registerModal input,
#registerModal select,
#registerModal textarea,
#historyModal input,
#historyModal select,
#transactionModal input,
#transactionModal select,
.select2-container--default .select2-selection--single,
.select2-dropdown {
    color: var(--rmw-text-strong) !important;
    caret-color: var(--rmw-primary) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-input-background) !important;
}

.modal .form-control::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
    color: var(--rmw-subtle) !important;
    opacity: 1;
}

#accountModal .btn-primary,
#depositModal .btn-primary,
#depositModal .btn.-submit,
#depositModal .crypto-btn,
#withdrawModal .btn-primary,
#withdrawModal .btn.-submit,
#loginModal .btn-primary,
#registerModal .btn-primary,
#historyModal .btn-primary,
#transactionModal .btn-primary {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-gold) !important;
    background: var(--rmw-button-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

#accountModal .btn-primary:hover,
#depositModal .btn-primary:hover,
#depositModal .btn.-submit:hover,
#depositModal .crypto-btn:hover,
#withdrawModal .btn-primary:hover,
#withdrawModal .btn.-submit:hover,
#loginModal .btn-primary:hover,
#registerModal .btn-primary:hover,
#historyModal .btn-primary:hover,
#transactionModal .btn-primary:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

#depositModal .btn-select-method-dp.active,
#withdrawModal .btn-select-method-wd.active,
#depositModal .step-counter,
#withdrawModal .step-counter {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

.table,
.dataTable,
.dataTables_wrapper,
.dataTables_wrapper label,
.dataTables_info,
.dataTables_empty {
    color: var(--rmw-text) !important;
}

.table thead th,
.dataTable thead th {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-surface-strong) !important;
}

.table tbody td,
.dataTable tbody td {
    color: var(--rmw-muted) !important;
    border-color: var(--rmw-border) !important;
    background: rgba(var(--rmw-white-rgb), .025) !important;
}

.pagination .page-link,
.dataTables_paginate .paginate_button {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-card-background) !important;
}

.pagination .active .page-link,
.dataTables_paginate .paginate_button.current {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

.text-muted,
.-text-muted,
.rmw-muted {
    color: var(--rmw-muted) !important;
}

.text-danger,
.-text-danger {
    color: var(--rmw-danger) !important;
}

.text-success,
.-text-success {
    color: var(--rmw-success) !important;
}

/* rmw-reference-menu v36 final hover and active separation lock */
@media (min-width: 992px) {
    .x-header.js-header-selector.-anon .x-menu {
        flex-basis: 482px !important;
        width: 482px !important;
        max-width: 482px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu {
        grid-template-columns: none !important;
        grid-auto-columns: 90px !important;
        grid-auto-flow: column;
        width: 482px !important;
        max-width: 482px !important;
        height: 64px !important;
        padding: 3px !important;
        overflow: hidden !important;
        isolation: isolate;
        gap: 6px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item,
    .x-header.js-header-selector.-anon .rmw-reference-menu__item.-favorite {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 5px 6px !important;
        margin: 0 !important;
        overflow: hidden;
        flex-direction: column !important;
        color: color-mix(in srgb, var(--rmw-white) 78%, transparent) !important;
        border: 1px solid transparent !important;
        border-radius: 9px !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        gap: 3px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item:hover,
    .x-header.js-header-selector.-anon .rmw-reference-menu__item:focus,
    .x-header.js-header-selector.-anon .rmw-reference-menu__item.is-active {
        z-index: 2;
        color: var(--rmw-white) !important;
        border-color: color-mix(in srgb, var(--rmw-primary) 30%, transparent) !important;
        background: linear-gradient(180deg, color-mix(in srgb, var(--rmw-accent) 82%, transparent), color-mix(in srgb, var(--rmw-accent) 78%, transparent)) !important;
        box-shadow: inset 0 -3px 0 var(--rmw-primary), inset 0 0 0 1px color-mix(in srgb, var(--rmw-white) 4%, transparent) !important;
        transform: none !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item:focus-visible {
        outline: 0;
        box-shadow: inset 0 -3px 0 var(--rmw-primary), inset 0 0 0 2px color-mix(in srgb, var(--rmw-primary) 72%, transparent) !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item i,
    .x-header.js-header-selector.-anon .rmw-reference-menu__item.-favorite i {
        width: 19px !important;
        height: 19px !important;
        margin: 0 !important;
        font-size: .9rem !important;
        line-height: 19px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item span {
        font-size: .66rem !important;
        line-height: 1.15 !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .x-header.js-header-selector.-anon .x-menu {
        flex-basis: 412px !important;
        width: 412px !important;
        max-width: 412px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu {
        grid-auto-columns: 76px !important;
        width: 412px !important;
        max-width: 412px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item,
    .x-header.js-header-selector.-anon .rmw-reference-menu__item.-favorite {
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item span {
        font-size: .61rem !important;
    }
}

/* Homepage government lottery result v26 */
.rmw-government-lottery {
    width: 100%;
    padding: 12px 20px 20px;
}

.rmw-government-lottery__shell {
    position: relative;
    width: min(100%, 980px);
    padding: 20px;
    margin: 0 auto;
    overflow: hidden;
    color: var(--rmw-text-strong);
    border: 1px solid var(--rmw-border-gold);
    border-radius: 22px;
    background: var(--rmw-panel-background);
    box-shadow: var(--rmw-shadow);
}

.rmw-government-lottery__shell::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
    background: var(--rmw-active-background);
}

.rmw-government-lottery__header,
.rmw-government-lottery__heading,
.rmw-government-lottery__draw,
.rmw-lottery-number-row {
    display: flex;
    align-items: center;
}

.rmw-government-lottery__header {
    position: relative;
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rmw-border);
    gap: 18px;
}

.rmw-government-lottery__heading {
    min-width: 0;
    gap: 12px;
}

.rmw-government-lottery__seal {
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--rmw-primary-contrast);
    font-size: 1.2rem;
    border: 1px solid var(--rmw-primary-strong);
    border-radius: 15px;
    background: var(--rmw-active-background);
    box-shadow: var(--rmw-shadow-soft);
}

.rmw-government-lottery__eyebrow {
    margin-bottom: 2px;
    color: var(--rmw-primary-strong);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.rmw-government-lottery__title {
    margin: 0;
    color: var(--rmw-text-strong);
    font-size: clamp(1.08rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.rmw-government-lottery__draw {
    flex: 0 0 auto;
    align-items: flex-end;
    flex-direction: column;
    padding: 8px 12px;
    text-align: right;
    border: 1px solid var(--rmw-border-gold);
    border-radius: 12px;
    background: var(--rmw-input-background);
    gap: 2px;
}

.rmw-government-lottery__draw span {
    color: var(--rmw-text-strong);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.35;
}

.rmw-government-lottery__draw small {
    color: var(--rmw-muted);
    font-size: .68rem;
    line-height: 1.4;
}

.rmw-government-lottery__results {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-top: 14px;
    gap: 10px;
}

.rmw-lottery-prize {
    display: flex;
    grid-column: span 2;
    min-width: 0;
    min-height: 112px;
    padding: 14px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border: 1px solid var(--rmw-border);
    border-radius: 16px;
    background: var(--rmw-card-background);
    box-shadow: var(--rmw-shadow-soft);
    gap: 9px;
}

.rmw-lottery-prize--first,
.rmw-lottery-prize--adjacent {
    grid-column: span 3;
    min-height: 138px;
}

.rmw-lottery-prize--first {
    border-color: var(--rmw-border-gold);
    background: var(--rmw-button-background);
}

.rmw-lottery-prize__label {
    display: block;
    width: 100%;
    min-height: 2.5em;
    color: var(--rmw-muted);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.rmw-lottery-number-row {
    justify-content: center;
    width: 100%;
    min-width: 0;
    gap: 10px;
}

.rmw-lottery-number {
    display: inline-flex;
    min-width: 0;
    padding: 7px 10px;
    align-items: center;
    justify-content: center;
    color: var(--rmw-primary-strong);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    white-space: nowrap;
    border: 1px solid var(--rmw-border-gold);
    border-radius: 10px;
    background: var(--rmw-surface-deep);
    text-shadow: 0 2px 10px rgba(var(--rmw-shadow-rgb), .28);
}

.rmw-lottery-number--hero {
    padding: 9px 18px;
    color: var(--rmw-primary-soft);
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: .13em;
}

.rmw-lottery-number--two {
    min-width: 86px;
    font-size: clamp(2rem, 4vw, 2.65rem);
}

.rmw-government-lottery__notice {
    margin: 13px 0 0;
    color: var(--rmw-subtle);
    font-size: .7rem;
    line-height: 1.5;
    text-align: center;
}

.rmw-government-lottery__notice i {
    margin-right: 4px;
    color: var(--rmw-primary-strong);
}

@media (max-width: 767.98px) {
    .rmw-government-lottery {
        padding: 10px 9px 16px;
    }

    .rmw-government-lottery__shell {
        padding: 16px 12px;
        border-radius: 17px;
    }

    .rmw-government-lottery__header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .rmw-government-lottery__seal {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .rmw-government-lottery__draw {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        gap: 10px;
    }

    .rmw-government-lottery__results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .rmw-lottery-prize,
    .rmw-lottery-prize--first,
    .rmw-lottery-prize--adjacent {
        grid-column: span 2;
        min-height: 0;
        padding: 12px 9px;
    }

    .rmw-lottery-prize:not(.rmw-lottery-prize--first):not(.rmw-lottery-prize--adjacent) {
        grid-column: span 1;
    }

    .rmw-lottery-prize.rmw-lottery-prize--last-two {
        grid-column: 1 / -1 !important;
        justify-self: center;
        width: calc(50% - 4px);
    }

    .rmw-lottery-prize__label {
        min-height: 2.4em;
        font-size: .7rem;
    }

    .rmw-lottery-number-row {
        gap: 6px;
    }

    .rmw-lottery-number {
        padding: 7px 8px;
        font-size: clamp(1.08rem, 6vw, 1.45rem);
        letter-spacing: .05em;
    }

    .rmw-lottery-number--hero {
        font-size: clamp(1.9rem, 10vw, 2.55rem);
        letter-spacing: .1em;
    }
}

@media (max-width: 359.98px) {
    .rmw-government-lottery__draw {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .rmw-lottery-number {
        padding-right: 6px;
        padding-left: 6px;
        font-size: 1rem;
    }
}

/* Homepage announcer v29: x-title-with-tag-header under banner */
.x-title-with-tag-header {
    position: relative;
    width: calc(100% - 40px);
    max-width: none;
    height: 46px;
    padding: 0 !important;
    margin: 9px auto 13px !important;
    overflow: hidden;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 32%, transparent);
    border-radius: 13px;
    background:
        radial-gradient(circle at 8% 0, color-mix(in srgb, var(--rmw-primary) 16%, transparent), transparent 34%),
        linear-gradient(90deg, color-mix(in srgb, var(--rmw-surface) 98%, transparent), color-mix(in srgb, var(--rmw-accent) 96%, transparent), color-mix(in srgb, var(--rmw-surface) 98%, transparent)) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--rmw-surface-deep) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 8%, transparent);
}

.x-title-with-tag-header::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    content: "\f0a1";
    color: var(--rmw-surface);
    font-family: "Font Awesome 5 Free", FontAwesome;
    font-size: 1rem;
    font-weight: 900;
    border-right: 1px solid color-mix(in srgb, var(--rmw-primary) 36%, transparent);
    background: linear-gradient(145deg, var(--rmw-primary), var(--rmw-primary));
    box-shadow: 6px 0 14px color-mix(in srgb, var(--rmw-surface-deep) 18%, transparent);
}

.x-title-with-tag-header .container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none !important;
    height: 100%;
    padding: 0 0 0 48px !important;
    margin: 0 !important;
    overflow: hidden;
}

.x-title-with-tag-header .-title {
    display: block;
    width: max-content;
    min-width: max-content;
    padding-left: 100%;
    margin: 0 !important;
    color: var(--rmw-white) !important;
    font-size: .94rem !important;
    font-weight: 600;
    line-height: 44px;
    letter-spacing: .01em;
    white-space: nowrap;
    text-shadow: 0 1px 7px color-mix(in srgb, var(--rmw-surface-deep) 32%, transparent);
    animation: rmw-announcement-marquee 20s linear infinite;
    will-change: transform;
}

.x-title-with-tag-header:hover .-title {
    animation-play-state: paused;
}

@keyframes rmw-announcement-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-100%, 0, 0);
    }
}

@media (max-width: 991.98px) {
    .x-title-with-tag-header {
        width: calc(100% - 16px);
        max-width: none;
        height: 42px;
        margin: 7px auto 10px !important;
        border-radius: 11px;
    }

    .x-title-with-tag-header::before {
        width: 42px;
        font-size: .9rem;
    }

    .x-title-with-tag-header .container {
        padding-left: 42px !important;
    }

    .x-title-with-tag-header .-title {
        font-size: .78rem !important;
        line-height: 40px;
        animation-duration: 16s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .x-title-with-tag-header .-title {
        width: 100%;
        min-width: 0;
        padding: 0 12px;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        animation: none;
    }
}

/* Rank section v32: theme-token palette */
.x-index-content-main-container.-logged .slip-title {
    position: relative;
    width: fit-content;
    padding: 0 0 7px 14px;
    margin: 4px 0 12px !important;
    color: var(--rmw-text-strong) !important;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 2px 8px rgba(var(--rmw-shadow-rgb), .34);
}

.x-index-content-main-container.-logged .slip-title::before {
    position: absolute;
    top: 3px;
    bottom: 9px;
    left: 0;
    width: 4px;
    content: "";
    border-radius: 4px;
    background: var(--rmw-active-background);
    box-shadow: var(--rmw-shadow-soft);
}

.x-index-content-main-container.-logged .slip-slider {
    padding: 4px 3px 13px;
    margin-bottom: 14px;
}

.x-index-content-main-container.-logged .slip-card {
    color: var(--rmw-text-strong) !important;
    border: 1px solid var(--rmw-border-gold);
    background: var(--rmw-card-background) !important;
    box-shadow: var(--rmw-shadow-soft);
}

.x-index-content-main-container.-logged .slip-phone {
    color: var(--rmw-text-strong);
    font-size: .92rem;
}

.x-index-content-main-container.-logged .slip-amount {
    margin-top: 3px;
    color: var(--rmw-primary-strong);
    font-size: 1.1rem;
    text-shadow: 0 1px 7px rgba(var(--rmw-shadow-rgb), .3);
}

.x-index-content-main-container.-logged .slip-game,
.x-index-content-main-container.-logged .slip-time {
    color: var(--rmw-muted);
    opacity: 1;
}

.x-index-content-main-container.-logged .ranking-card {
    color: var(--rmw-text-strong);
    border: 1px solid var(--rmw-border-gold);
    background: var(--rmw-panel-background) !important;
    box-shadow: var(--rmw-shadow);
}

.x-index-content-main-container.-logged .ranking-title {
    display: flex;
    align-items: center;
    padding: 3px 2px 14px;
    margin-bottom: 10px;
    color: var(--rmw-text-strong);
    font-size: 1.18rem;
    font-weight: 700;
    border-bottom: 1px solid var(--rmw-border);
    gap: 9px;
}

.x-index-content-main-container.-logged .ranking-title .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
    color: var(--rmw-primary-contrast);
    border: 1px solid var(--rmw-primary-strong);
    border-radius: 11px;
    background: var(--rmw-active-background);
    box-shadow: var(--rmw-shadow-soft);
}

.x-index-content-main-container.-logged .rank-item,
.x-index-content-main-container.-logged .rank-row {
    color: var(--rmw-text-strong);
    border: 1px solid var(--rmw-border);
    background: var(--rmw-card-background) !important;
    box-shadow: var(--rmw-shadow-soft);
}

.x-index-content-main-container.-logged .rank-item:hover,
.x-index-content-main-container.-logged .rank-row:hover {
    border-color: var(--rmw-border-gold);
    background: var(--rmw-button-hover-background) !important;
}

.x-index-content-main-container.-logged .rank-user,
.x-index-content-main-container.-logged .rank-left > div > div:first-child {
    color: var(--rmw-text-strong);
}

.x-index-content-main-container.-logged .label-today,
.x-index-content-main-container.-logged .rank-row-mid {
    color: var(--rmw-muted);
    opacity: 1;
}

.x-index-content-main-container.-logged .amount-big,
.x-index-content-main-container.-logged .rank-row-amount {
    color: var(--rmw-primary-strong) !important;
    font-weight: 700;
    text-shadow: 0 1px 7px rgba(var(--rmw-shadow-rgb), .3);
}

.x-index-content-main-container.-logged .badge-game {
    color: var(--rmw-primary-contrast);
    border: 1px solid var(--rmw-primary-strong);
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft);
}

.x-index-content-main-container.-logged .rank-circle {
    color: var(--rmw-text-strong);
    border: 1px solid var(--rmw-border-strong);
    background: rgba(var(--rmw-white-rgb), .1) !important;
}

.x-index-content-main-container.-logged .rank-row:nth-child(1) .rank-circle {
    color: var(--rmw-primary-contrast);
    border-color: var(--rmw-primary-strong);
    background: var(--rmw-active-background) !important;
}

.x-index-content-main-container.-logged .rank-row:nth-child(2) .rank-circle {
    color: var(--rmw-surface-deep);
    border-color: var(--rmw-white);
    background: linear-gradient(145deg, var(--rmw-white), var(--rmw-muted)) !important;
}

.x-index-content-main-container.-logged .rank-row:nth-child(3) .rank-circle {
    color: var(--rmw-white);
    border-color: var(--rmw-primary);
    background: linear-gradient(145deg, var(--rmw-primary), var(--rmw-surface)) !important;
}

@media (max-width: 767.98px) {
    .x-index-content-main-container.-logged .slip-title {
        margin-top: 0 !important;
        font-size: 1rem;
    }

    .x-index-content-main-container.-logged .slip-card {
        border-radius: 13px;
    }

    .x-index-content-main-container.-logged .ranking-card {
        width: 100%;
        border-radius: 15px;
    }

    .x-index-content-main-container.-logged .ranking-title {
        font-size: 1rem;
    }

    .x-index-content-main-container.-logged .rank-row {
        border-radius: 12px;
    }

    .x-index-content-main-container.-logged .rank-row-mid {
        min-width: 0;
        padding: 0 6px;
        font-size: .72rem;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .x-index-content-main-container.-logged .rank-row-amount {
        font-size: .78rem;
    }
}

/* Desktop reference menu v33: compact dynamic-width buttons */
@media (min-width: 992px) {
    .x-header.js-header-selector.-anon {
        height: 80px !important;
        min-height: 80px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .x-header.js-header-selector.-anon > .-inner-container {
        height: 64px;
        min-height: 64px;
        gap: 12px !important;
    }

    .x-header.js-header-selector.-anon .x-menu {
        display: flex;
        flex: 0 0 468px !important;
        align-items: center;
        width: 468px !important;
        max-width: 468px;
        height: 64px;
        overflow: visible;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu {
        display: grid;
        grid-template-columns: none;
        grid-auto-columns: 90px;
        grid-auto-flow: column;
        width: 468px !important;
        max-width: 468px;
        height: 64px;
        padding: 3px;
        overflow: hidden;
        border-radius: 13px;
        gap: 3px;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item {
        width: 90px;
        min-width: 90px !important;
        height: 56px;
        min-height: 56px;
        padding: 5px 6px !important;
        border-radius: 9px !important;
        gap: 3px;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item i {
        width: 19px;
        height: 19px;
        font-size: .9rem;
        line-height: 19px;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item span {
        font-size: .66rem;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .x-header.js-header-selector.-anon #headerContent {
        margin-left: auto !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .x-header.js-header-selector.-anon .x-menu {
        flex-basis: 398px !important;
        width: 398px !important;
        max-width: 398px;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu {
        grid-auto-columns: 76px;
        width: 398px !important;
        max-width: 398px;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item {
        width: 76px;
        min-width: 76px !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item span {
        font-size: .61rem;
    }
}

@media (min-width: 1200px) {
    .x-header.js-header-selector.-anon .x-menu {
        margin-left: auto !important;
    }

    .x-header.js-header-selector.-anon #headerContent {
        margin-left: 18px !important;
    }
}

/* Mobile bottom navigation v21 */
@media screen and (max-width: 800px) {
    .fix_footer2.show_m {
        position: fixed;
        z-index: 2400;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex !important;
        align-items: flex-end;
        justify-content: space-around;
        width: 100%;
        height: auto !important;
        min-height: calc(72px + env(safe-area-inset-bottom));
        padding: 7px 7px calc(7px + env(safe-area-inset-bottom)) !important;
        margin: 0;
        overflow: visible;
        text-align: center;
        border-top: 1px solid color-mix(in srgb, var(--rmw-primary) 30%, transparent) !important;
        background:
            radial-gradient(circle at 50% -35%, color-mix(in srgb, var(--rmw-primary) 17%, transparent), transparent 34%),
            linear-gradient(180deg, color-mix(in srgb, var(--rmw-surface) 97%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 98.5%, transparent)) !important;
        box-shadow: 0 -12px 35px color-mix(in srgb, var(--rmw-surface-deep) 42%, transparent) !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        isolation: isolate;
    }

    .fix_footer2.show_m::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: -1;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--rmw-accent) 25%, var(--rmw-primary) 50%, var(--rmw-accent) 75%, transparent);
        opacity: .9;
    }

    .fix_footer2.show_m > a {
        position: relative;
        display: flex !important;
        float: none !important;
        flex: 1 1 20%;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        min-width: 0;
        min-height: 58px;
        padding: 5px 3px 3px !important;
        margin: 0 2px;
        color: color-mix(in srgb, var(--rmw-white) 78%, transparent) !important;
        font-family: Kanit, "FC Iconic Text", "Helvetica Neue", Arial, sans-serif !important;
        line-height: 1;
        text-decoration: none;
        border: 1px solid transparent;
        border-radius: 13px;
        background: transparent !important;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
    }

    .fix_footer2.show_m > a:hover,
    .fix_footer2.show_m > a:focus,
    .fix_footer2.show_m > a:active,
    .fix_footer2.show_m > a.active {
        color: var(--rmw-primary) !important;
        border-color: color-mix(in srgb, var(--rmw-primary) 24%, transparent);
        background: color-mix(in srgb, var(--rmw-white) 7.5%, transparent) !important;
        outline: 0;
        transform: translateY(-1px);
    }

    .fix_footer2.show_m > a > span.link_ico,
    .fix_footer2.show_m > a > span.link_ico2 {
        position: static;
        display: inline-flex !important;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
        width: 36px !important;
        height: 36px !important;
        padding: 0;
        margin: 0 0 3px !important;
        overflow: hidden;
        color: currentColor;
        font-size: 16px;
        line-height: 1;
        border: 1px solid color-mix(in srgb, var(--rmw-white) 15%, transparent) !important;
        border-radius: 12px !important;
        background: color-mix(in srgb, var(--rmw-surface-deep) 42%, transparent) !important;
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 6%, transparent);
    }

    .fix_footer2.show_m > a:hover > span.link_ico,
    .fix_footer2.show_m > a:hover > span.link_ico2,
    .fix_footer2.show_m > a:focus > span.link_ico,
    .fix_footer2.show_m > a:focus > span.link_ico2,
    .fix_footer2.show_m > a.active > span.link_ico,
    .fix_footer2.show_m > a.active > span.link_ico2 {
        border-color: color-mix(in srgb, var(--rmw-primary) 46%, transparent) !important;
        background: color-mix(in srgb, var(--rmw-surface) 68%, transparent) !important;
    }

    .fix_footer2.show_m i {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0 !important;
        color: currentColor !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }

    .fix_footer2.show_m strong {
        position: static;
        display: block;
        float: none !important;
        width: 100%;
        min-width: 0;
        padding: 0 1px;
        margin: 0 !important;
        overflow: hidden;
        color: currentColor !important;
        font-size: .66rem !important;
        font-weight: 500 !important;
        line-height: 1.25;
        text-align: center;
        text-overflow: ellipsis;
        text-shadow: 0 1px 4px color-mix(in srgb, var(--rmw-surface-deep) 40%, transparent);
        white-space: nowrap;
    }

    .fix_footer2.show_m > a.fix_c {
        overflow: visible;
        border: 0 !important;
        background: transparent !important;
        transform: none;
    }

    .fix_footer2.show_m > a.fix_c:hover,
    .fix_footer2.show_m > a.fix_c:focus,
    .fix_footer2.show_m > a.fix_c:active {
        transform: none;
    }

    .fix_footer2.show_m > a.fix_c > span.link_ico.ico_3 {
        position: relative;
        top: auto;
        display: flex !important;
        width: 60px !important;
        height: 60px !important;
        flex: 0 0 60px;
        align-items: center;
        justify-content: center;
        padding: 6px;
        margin: 0 0 -1px !important;
        overflow: hidden;
        color: var(--rmw-white);
        border: 2px solid var(--rmw-primary) !important;
        border-radius: 50% !important;
        background:
            radial-gradient(circle at 36% 25%, color-mix(in srgb, var(--rmw-white) 18%, transparent), transparent 30%),
            linear-gradient(145deg, var(--rmw-accent), var(--rmw-surface)) !important;
        box-shadow:
            0 8px 22px color-mix(in srgb, var(--rmw-surface-deep) 46%, transparent),
            0 0 0 5px color-mix(in srgb, var(--rmw-surface) 86%, transparent),
            inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 20%, transparent) !important;
        transform: translateY(-15px);
    }

    .fix_footer2.show_m > a.fix_c > span.link_ico.ico_3 img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: 46px;
        max-height: 46px;
        padding: 0;
        margin: 0 !important;
        object-fit: contain;
        object-position: center;
        border-radius: 50%;
        filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--rmw-surface-deep) 35%, transparent));
    }
}

@media screen and (max-width: 360px) {
    .fix_footer2.show_m {
        padding-right: 4px !important;
        padding-left: 4px !important;
    }

    .fix_footer2.show_m > a {
        margin-right: 0;
        margin-left: 0;
        padding-right: 1px !important;
        padding-left: 1px !important;
    }

    .fix_footer2.show_m strong {
        font-size: .59rem !important;
    }

    .fix_footer2.show_m > a > span.link_ico,
    .fix_footer2.show_m > a > span.link_ico2 {
        width: 33px !important;
        height: 33px !important;
        flex-basis: 33px;
    }

    .fix_footer2.show_m > a.fix_c > span.link_ico.ico_3 {
        width: 56px !important;
        height: 56px !important;
        flex-basis: 56px;
    }
}

/* EZL logged footer v20 */
.x-footer.-ezl.-logged {
    position: relative;
    clear: both;
    margin-top: 42px;
    overflow: hidden;
    color: var(--rmw-text-strong);
    border-top: 1px solid var(--rmw-border-gold);
    background: var(--rmw-nav-background) !important;
    box-shadow: var(--rmw-shadow);
}

.x-footer.-ezl.-logged::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--rmw-accent) 24%, var(--rmw-primary-strong) 50%, var(--rmw-accent) 76%, transparent);
    opacity: .9;
}

.x-footer.-ezl.-logged .-inner-wrapper {
    position: relative;
    padding: 42px 20px 30px !important;
    color: var(--rmw-text-strong);
    background-color: transparent !important;
    background-image: var(--rmw-panel-background) !important;
    background-position: center !important;
    background-size: cover !important;
}

.x-footer.-ezl.-logged .-inner-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(color-mix(in srgb, var(--rmw-white) 1.8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--rmw-white) 1.8%, transparent) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: linear-gradient(to bottom, color-mix(in srgb, var(--rmw-bg-deep) 70%, transparent), transparent 78%);
    mask-image: linear-gradient(to bottom, color-mix(in srgb, var(--rmw-bg-deep) 70%, transparent), transparent 78%);
}

.x-footer.-ezl.-logged .-inner-wrapper > .container,
.x-footer.-ezl.-logged .-terms-wrapper {
    position: relative;
    z-index: 1;
}

.x-footer.-ezl.-logged .-inner-wrapper > .container {
    width: 100%;
    max-width: 1180px;
    padding-right: 18px;
    padding-left: 18px;
    margin-right: auto;
    margin-left: auto;
}

.x-footer.-ezl.-logged .-footer-menu,
.x-footer.-ezl.-logged .-block-tag {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.x-footer.-ezl.-logged .-footer-menu .row {
    margin-right: 0;
    margin-left: 0;
}

.x-footer.-ezl.-logged .-footer-menu .row > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.x-footer.-ezl.-logged .-inner-wrapper .-text-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 760px;
    padding: 0;
    margin: 0 auto 22px;
    color: var(--rmw-text-strong) !important;
    font-size: 1.16rem !important;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .02em;
    text-align: center;
    overflow-wrap: anywhere;
    gap: 16px;
}

.x-footer.-ezl.-logged .-inner-wrapper .-text-title::before,
.x-footer.-ezl.-logged .-inner-wrapper .-text-title::after {
    content: "";
    flex: 1 1 80px;
    max-width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rmw-primary-strong));
}

.x-footer.-ezl.-logged .-inner-wrapper .-text-title::after {
    background: linear-gradient(90deg, var(--rmw-primary-strong), transparent);
}

.x-footer.-ezl.-logged .-tags-list {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 1060px;
    padding: 18px;
    margin: 0 auto;
    border: 1px solid var(--rmw-border);
    border-radius: 18px;
    background: var(--rmw-card-background);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 5%, transparent);
    gap: 9px;
}

.x-footer.-ezl.-logged .-btn-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    max-width: 100%;
    padding: 8px 14px !important;
    margin: 0 !important;
    color: var(--rmw-text) !important;
    font-size: .82rem !important;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    text-decoration: none;
    overflow-wrap: anywhere;
    border: 1px solid var(--rmw-border) !important;
    border-radius: 999px !important;
    background: var(--rmw-card-background) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 5.5%, transparent);
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.x-footer.-ezl.-logged .-btn-tag:hover,
.x-footer.-ezl.-logged .-btn-tag:focus {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-gold) !important;
    background: var(--rmw-button-hover-background) !important;
    box-shadow: var(--rmw-shadow-soft);
    transform: translateY(-1px);
}

.x-footer.-ezl.-logged .list-pathnership {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1060px;
    padding: 18px;
    margin: 0 auto;
    border: 1px solid var(--rmw-border);
    border-radius: 18px;
    background: var(--rmw-card-background);
    gap: 10px;
}

.x-footer.-ezl.-logged .list-pathnership > img {
    flex: 1 1 86px;
    max-width: 120px;
}

.x-footer.-ezl.-logged .img-pathnership {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 58px !important;
    padding: 9px;
    margin: 0 !important;
    object-fit: contain;
    object-position: center;
    border: 1px solid var(--rmw-border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--rmw-white) 5.5%, transparent);
    filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--rmw-bg-deep) 32%, transparent));
}

.x-footer.-ezl.-logged .-terms-wrapper {
    margin: 24px auto 0 !important;
    font-size: .88rem;
    line-height: 1.4;
    text-align: center;
}

.x-footer.-ezl.-logged .-terms-wrapper .-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    color: var(--rmw-primary-strong) !important;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--rmw-border-gold);
    border-radius: 999px;
    background: var(--rmw-card-background);
}

.x-footer.-ezl.-logged .-terms-wrapper .-link:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-primary-strong);
    background: var(--rmw-button-hover-background);
}

.x-footer.-ezl.-logged .-copy-right-container {
    position: relative;
    z-index: 2;
    padding: 15px 20px calc(15px + env(safe-area-inset-bottom)) !important;
    color: var(--rmw-muted);
    border-top: 1px solid var(--rmw-border);
    background: var(--rmw-surface-deep) !important;
}

.x-footer.-ezl.-logged .-copy-right-container .-copy-right-text {
    max-width: 100%;
    margin: 0;
    color: var(--rmw-muted) !important;
    font-size: .82rem !important;
    font-weight: 400;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

@media (min-width: 1200px) {
    body.rmw-has-left-menu .x-footer.-ezl.-logged {
        width: calc(100% - 228px);
        margin-left: 228px;
    }
}

@media (max-width: 767.98px) {
    .x-footer.-ezl.-logged {
        margin-top: 28px;
    }

    .x-footer.-ezl.-logged .-inner-wrapper {
        padding: 30px 10px 24px !important;
    }

    .x-footer.-ezl.-logged .-inner-wrapper > .container {
        padding-right: 8px;
        padding-left: 8px;
    }

    .x-footer.-ezl.-logged .-inner-wrapper .-text-title {
        margin: 0 auto 16px !important;
        font-size: 1rem !important;
        gap: 10px;
    }

    .x-footer.-ezl.-logged .-inner-wrapper .-text-title::before,
    .x-footer.-ezl.-logged .-inner-wrapper .-text-title::after {
        flex-basis: 32px;
        max-width: 54px;
    }

    .x-footer.-ezl.-logged .-tags-list {
        padding: 13px 10px;
        border-radius: 15px;
        gap: 7px;
    }

    .x-footer.-ezl.-logged .-btn-tag {
        min-height: 36px;
        padding: 7px 11px !important;
        font-size: .76rem !important;
    }

    .x-footer.-ezl.-logged .list-pathnership {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 12px;
        border-radius: 15px;
        gap: 8px;
    }

    .x-footer.-ezl.-logged .img-pathnership {
        height: 52px !important;
        padding: 8px;
    }

    .x-footer.-ezl.-logged .-terms-wrapper {
        margin-top: 19px !important;
    }

    .x-footer.-ezl.-logged .-copy-right-container {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    .x-footer.-ezl.-logged .-btn-tag {
        flex: 1 1 calc(50% - 7px);
    }

    .x-footer.-ezl.-logged .list-pathnership {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#depositModal #payment-qrcode,
#depositModal .payment-img,
#depositModal .crypto-address-qr,
#depositModal .img-guide-tx {
    border: 2px solid color-mix(in srgb, var(--rmw-primary) 64%, transparent);
    background:
        linear-gradient(145deg, var(--rmw-primary-soft), var(--rmw-primary-soft)) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--rmw-surface-deep) 30%, transparent);
}

html,
body {
    color: var(--rmw-text);
    background-color: var(--rmw-bg) !important;
}

body,
button,
input,
select,
textarea,
.btn,
.form-control {
    font-family: Kanit, "FC Iconic Text", "Helvetica Neue", Arial, sans-serif !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--rmw-accent) 20%, transparent), transparent 35%),
        radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--rmw-primary) 10%, transparent), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--rmw-surface-deep) 88%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 97%, transparent));
}

.body-bg {
    scrollbar-color: color-mix(in srgb, var(--rmw-primary) 45%, transparent) transparent;
}

/* Desktop left navigation, inspired by the reference layout */
.rmw-left-menu {
    position: fixed;
    z-index: 1015;
    top: 64px;
    bottom: 0;
    left: 0;
    width: 228px;
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
    color: var(--rmw-text);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--rmw-surface-deep) 98%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 99%, transparent));
    border-right: 1px solid var(--rmw-border);
    box-shadow: 14px 0 34px color-mix(in srgb, var(--rmw-bg-deep) 22%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.rmw-left-menu ~ .body-bg {
    width: calc(100% - 228px);
    margin-left: 228px;
}

.rmw-left-menu__brand {
    display: grid;
    place-items: center;
    min-height: 72px;
    padding: 8px 12px 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--rmw-border);
}

.rmw-left-menu__brand img {
    display: block;
    width: auto;
    max-width: 162px;
    max-height: 52px;
    object-fit: contain;
}

.rmw-left-menu__brand-name {
    display: block;
    margin-top: 4px;
    color: var(--rmw-primary-strong);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    text-shadow: 0 2px 12px color-mix(in srgb, var(--rmw-bg-deep) 50%, transparent);
}

.rmw-left-menu__nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--rmw-primary) 36%, transparent) transparent;
}

.rmw-left-menu__item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    color: var(--rmw-muted) !important;
    text-align: left;
    text-decoration: none !important;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 13px;
    outline: 0;
    cursor: pointer;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.rmw-left-menu__item:hover,
.rmw-left-menu__item:focus,
.rmw-left-menu__item.is-active {
    color: var(--rmw-text) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--rmw-accent) 20%, transparent), color-mix(in srgb, var(--rmw-primary) 10%, transparent));
    border-color: color-mix(in srgb, var(--rmw-primary) 28%, transparent);
    transform: translateX(2px);
}

.rmw-left-menu__item.is-active {
    box-shadow: inset 3px 0 0 var(--rmw-primary);
}

.rmw-left-menu__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    color: var(--rmw-primary-strong);
    background: color-mix(in srgb, var(--rmw-white) 6.5%, transparent);
    border: 1px solid color-mix(in srgb, var(--rmw-white) 7.5%, transparent);
    border-radius: 10px;
}

.rmw-left-menu__item span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 500;
}

.rmw-left-menu__divider {
    height: 1px;
    margin: 7px 8px;
    background: var(--rmw-border);
}

.rmw-left-menu__footer {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 10px;
    margin-top: 8px;
    color: var(--rmw-muted);
    border-top: 1px solid var(--rmw-border);
    font-size: .75rem;
}

.rmw-left-menu__status {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: var(--rmw-success);
    border-radius: 50%;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rmw-success) 10%, transparent);
}

/* Header */
.x-header {
    min-height: 64px;
    padding: 8px 18px !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 90%, transparent) !important;
    border-bottom: 1px solid var(--rmw-border) !important;
    box-shadow: 0 10px 32px color-mix(in srgb, var(--rmw-bg-deep) 25%, transparent) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.x-header .-inner-container {
    max-width: 1480px;
    margin: 0 auto;
    gap: 12px;
}

.x-header a,
.x-header button {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.x-header a:hover,
.x-header button:hover {
    transform: translateY(-1px);
}

.x-header .navbar-nav .nav-link,
.x-header-btn-support,
.x-header .btn {
    border-radius: var(--rmw-radius-sm) !important;
}

.x-header .navbar-nav .nav-link:hover,
.x-header .navbar-nav .nav-link.active {
    color: var(--rmw-primary-strong) !important;
    background: color-mix(in srgb, var(--rmw-primary) 10%, transparent) !important;
}

/* Banner */
.x-homepage-banner-container {
    padding: 16px 16px 0;
}

.x-banner-slide-wrapper {
    max-width: 1480px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--rmw-border);
    border-radius: var(--rmw-radius-lg);
    box-shadow: var(--rmw-shadow);
    background: var(--rmw-bg-soft);
}

.x-banner-slide-wrapper .-slide-inner-wrapper,
.x-banner-slide-wrapper img {
    border-radius: var(--rmw-radius-lg);
}

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

.x-banner-slide-wrapper .slick-dots {
    bottom: 12px;
}

.x-banner-slide-wrapper .slick-dots li button::before {
    color: color-mix(in srgb, var(--rmw-white) 70%, transparent) !important;
}

.x-banner-slide-wrapper .slick-dots li.slick-active button::before {
    color: var(--rmw-primary) !important;
}

/* Main content and section headers */
.x-index-content-main-container,
.x-promotion-index,
.x-category-total-game {
    position: relative;
}

.x-index-content-main-container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 18px 16px 34px;
}

.x-title-with-tag-header .-title,
.x-title-modal,
.x-promotion-index h1,
.x-promotion-index h2,
.x-promotion-index h3 {
    color: var(--rmw-text) !important;
    letter-spacing: .01em;
}

.x-title-with-tag-header .-title {
    margin: 8px 0 16px;
    font-size: clamp(1.15rem, 2vw, 1.7rem) !important;
    font-weight: 600 !important;
}

/* Quick actions */
.x-quick-transaction-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 720px;
    margin: 0 auto 22px !important;
}

.x-quick-transaction-buttons > .-btn {
    min-height: 76px;
    margin: 0 !important;
    padding: 12px 16px !important;
    overflow: hidden;
    color: var(--rmw-text) !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--rmw-surface) 96%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 96%, transparent)) !important;
    border: 1px solid var(--rmw-border) !important;
    border-radius: var(--rmw-radius) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.x-quick-transaction-buttons > .-btn:hover {
    transform: translateY(-3px);
    border-color: var(--rmw-border-gold) !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--rmw-bg-deep) 30%, transparent) !important;
}

.x-quick-transaction-buttons .-ic-wrapper {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--rmw-white) 8%, transparent);
}

.x-quick-transaction-buttons .-ic {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain;
}

.x-quick-transaction-buttons .-btn-inner-content-title {
    font-weight: 600;
}

.x-quick-transaction-buttons .-btn-inner-content-sub-title {
    color: var(--rmw-muted) !important;
    font-size: .78rem;
}

/* Category navigation */
.x-category-total-game .nav-menu {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.x-category-total-game .nav-menu::-webkit-scrollbar {
    display: none;
}

.x-category-total-game .-menu-parent {
    gap: 10px;
    flex-wrap: nowrap !important;
    justify-content: center;
    padding: 6px 2px 14px;
}

.x-category-total-game .-list-parent {
    padding: 0 !important;
    flex: 0 0 auto;
}

.x-category-button {
    overflow: hidden;
    border: 1px solid var(--rmw-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--rmw-shadow-soft);
    transition: transform .2s ease, border-color .2s ease, filter .2s ease !important;
}

.x-category-button:hover {
    transform: translateY(-2px);
    border-color: var(--rmw-border-gold) !important;
    filter: brightness(1.08);
}

/* Game/provider cards */
.x-game-list-item,
.x-game-card,
.x-card,
.-game-card,
.-provider-card {
    border-radius: var(--rmw-radius) !important;
}

.x-game-list-item,
.x-game-card,
.-game-card {
    overflow: hidden;
    border: 1px solid var(--rmw-border) !important;
    background: var(--rmw-surface) !important;
    box-shadow: var(--rmw-shadow-soft);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.x-game-list-item:hover,
.x-game-card:hover,
.-game-card:hover {
    transform: translateY(-4px);
    border-color: var(--rmw-border-gold) !important;
    box-shadow: var(--rmw-shadow);
}

.x-game-list-item img,
.x-game-card img,
.-game-card img {
    width: 100%;
    object-fit: cover;
}

/* Promotions */
.x-promotion-index {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

.x-promotion-index .-promotion-card-link {
    margin-bottom: 18px;
}

.x-promotion-index .x-card.-multi-card,
.x-promotion-index .x-card.-single-card {
    height: 100%;
    overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--rmw-surface-deep) 98%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 98%, transparent)) !important;
    border: 1px solid var(--rmw-border) !important;
    border-radius: var(--rmw-radius) !important;
    box-shadow: var(--rmw-shadow-soft);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.x-promotion-index .x-card.-multi-card:hover {
    transform: translateY(-4px);
    border-color: var(--rmw-border-gold) !important;
    box-shadow: var(--rmw-shadow);
}

.x-promotion-index .-cover-wrapper,
.x-promotion-index .-img {
    overflow: hidden;
}

.x-promotion-index .-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.x-promotion-index .-title {
    padding: 14px 16px 16px;
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.45;
}

/* Forms and wallet */
.x-form-control,
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 46px;
    color: var(--rmw-text) !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 72%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 14%, transparent) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.x-form-control:focus,
.form-control:focus {
    border-color: var(--rmw-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmw-primary) 14%, transparent) !important;
}

.form-control::placeholder,
.x-form-control::placeholder {
    color: color-mix(in srgb, var(--rmw-accent) 75%, transparent) !important;
}

.btn-primary,
.btn.-submit,
button.-submit,
a.-submit {
    min-height: 46px;
    color: var(--rmw-surface-deep) !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--rmw-primary-strong), var(--rmw-primary)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--rmw-primary) 20%, transparent) !important;
}

.btn-primary:hover,
.btn.-submit:hover,
button.-submit:hover,
a.-submit:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.x-transaction-current-balance,
.-profile-detail-box,
.-deposit-notice-inner-wrapper,
.ddl-btn-wd {
    border-radius: var(--rmw-radius) !important;
}

.x-transaction-current-balance,
.-profile-detail-box,
.-deposit-notice-inner-wrapper {
    background: color-mix(in srgb, var(--rmw-surface-deep) 78%, transparent) !important;
    border: 1px solid var(--rmw-border) !important;
}

.js-customer-balance,
#balance-withdraw,
#profile-balance {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--rmw-primary-strong) !important;
}

/* Modal / profile / cashier / history */
.modal-backdrop.show {
    opacity: .72 !important;
    backdrop-filter: blur(4px);
}

.x-modal .modal-dialog {
    padding: 12px;
}

.x-modal .modal-content,
.modal .modal-content {
    overflow: hidden;
    color: var(--rmw-text);
    background: linear-gradient(160deg, color-mix(in srgb, var(--rmw-surface-deep) 98%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 99%, transparent)) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 13%, transparent) !important;
    border-radius: var(--rmw-radius-lg) !important;
    box-shadow: 0 26px 70px color-mix(in srgb, var(--rmw-bg-deep) 50%, transparent) !important;
}

.x-modal .modal-header,
.modal .modal-header {
    min-height: 58px;
    border-bottom: 1px solid var(--rmw-border) !important;
    background: color-mix(in srgb, var(--rmw-white) 2.5%, transparent);
}

.x-modal .modal-body,
.modal .modal-body {
    color: var(--rmw-text);
    scrollbar-color: color-mix(in srgb, var(--rmw-primary) 45%, transparent) transparent;
}

.x-modal .close,
.modal .close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--rmw-text) !important;
    background: color-mix(in srgb, var(--rmw-white) 9%, transparent) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    z-index: 5;
}

.x-modal .close:hover,
.modal .close:hover {
    background: color-mix(in srgb, var(--rmw-accent) 20%, transparent) !important;
    color: var(--rmw-danger) !important;
}

.x-invitation-menu-wrapper {
    display: grid;
    grid-auto-flow: column;
    gap: 6px;
    padding: 5px;
    background: color-mix(in srgb, var(--rmw-white) 5.5%, transparent);
    border: 1px solid var(--rmw-border);
    border-radius: 14px;
}

.x-invitation-menu-wrapper .-btn-menu {
    padding: 10px 14px;
    color: var(--rmw-muted) !important;
    border-radius: 10px !important;
}

.x-invitation-menu-wrapper .-btn-menu.-active,
.x-invitation-menu-wrapper .-btn-menu.active {
    color: var(--rmw-surface-deep) !important;
    background: var(--rmw-primary) !important;
}

.table {
    color: var(--rmw-text) !important;
    border-collapse: separate;
    border-spacing: 0 6px;
}

.table thead th {
    color: var(--rmw-muted) !important;
    border: 0 !important;
    font-weight: 500;
}

.table tbody tr {
    background: color-mix(in srgb, var(--rmw-white) 4%, transparent);
}

.table tbody td {
    border: 0 !important;
    vertical-align: middle;
}

.npop-news-slider-img {
    border-radius: var(--rmw-radius) !important;
}

/* Fixed mobile navigation */
.fix_footer2 {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 94%, transparent) !important;
    border-top: 1px solid color-mix(in srgb, var(--rmw-white) 12%, transparent) !important;
    box-shadow: 0 -12px 34px color-mix(in srgb, var(--rmw-bg-deep) 35%, transparent) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.fix_footer2 > a {
    min-width: 0;
    color: var(--rmw-muted) !important;
    border-radius: 12px;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.fix_footer2 > a:hover,
.fix_footer2 > a:focus,
.fix_footer2 > a.active {
    color: var(--rmw-primary-strong) !important;
    background: color-mix(in srgb, var(--rmw-primary) 9%, transparent);
}

.fix_footer2 .fix_c {
    background: linear-gradient(145deg, color-mix(in srgb, var(--rmw-primary) 22%, transparent), color-mix(in srgb, var(--rmw-primary) 6%, transparent)) !important;
    border: 1px solid var(--rmw-border-gold);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--rmw-bg-deep) 30%, transparent);
}

.fix_footer2 strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem !important;
    font-weight: 500 !important;
}

.fix_footer2 i {
    color: currentColor !important;
}

/* Loading feedback without layout jumps */
.loading,
.-loading,
.js-loading {
    border-radius: var(--rmw-radius) !important;
    background: linear-gradient(100deg, color-mix(in srgb, var(--rmw-white) 4%, transparent) 20%, color-mix(in srgb, var(--rmw-white) 10%, transparent) 40%, color-mix(in srgb, var(--rmw-white) 4%, transparent) 60%) !important;
    background-size: 200% 100% !important;
    animation: rmw-shimmer 1.4s linear infinite;
}

@keyframes rmw-shimmer {
    to {
        background-position-x: -200%;
    }
}

@media (max-width: 991.98px) {
    .rmw-left-menu {
        display: none;
    }

    .rmw-left-menu ~ .body-bg {
        width: 100%;
        margin-left: 0;
    }

    .x-header {
        min-height: 56px;
        padding: 6px 10px !important;
    }

    .x-homepage-banner-container {
        padding: 10px 10px 0;
    }

    .x-banner-slide-wrapper,
    .x-banner-slide-wrapper .-slide-inner-wrapper,
    .x-banner-slide-wrapper img {
        border-radius: 14px;
    }

    .x-index-content-main-container {
        padding: 12px 10px 98px;
    }

    .x-quick-transaction-buttons {
        gap: 8px;
        margin-bottom: 14px !important;
    }

    .x-quick-transaction-buttons > .-btn {
        min-height: 68px;
        padding: 9px 8px !important;
        border-radius: 14px !important;
    }

    .x-quick-transaction-buttons .-ic-wrapper {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .x-quick-transaction-buttons .-ic {
        width: 30px !important;
        height: 30px !important;
    }

    .x-quick-transaction-buttons .-btn-inner-content-title {
        font-size: .84rem;
    }

    .x-category-total-game .-menu-parent {
        justify-content: flex-start;
        padding-inline: 2px;
    }

    .x-modal .modal-dialog,
    .modal .modal-dialog {
        margin: 0 auto;
        padding: 8px;
        min-height: 100%;
    }

    .x-modal .modal-content,
    .modal .modal-content {
        max-height: calc(100vh - 16px);
        border-radius: 18px !important;
    }

    .line-float-wrap {
        bottom: 92px !important;
    }
}

@media (max-width: 575.98px) {
    .x-header .-inner-container {
        gap: 6px;
        flex-wrap: nowrap;
    }

    .x-header .x-menu {
        display: none !important;
    }

    .x-header .custom-dropdown-container {
        display: none !important;
    }

    .x-header .lang-container {
        width: 40px !important;
        flex: 0 0 40px;
    }

    .x-header .-btn-header-register,
    .x-header .-btn-header-login {
        width: 68px !important;
        min-width: 68px !important;
        padding: 6px 5px !important;
        margin-right: 3px !important;
        font-size: .69rem !important;
        white-space: nowrap;
    }

    .x-homepage-banner-container {
        padding-inline: 8px;
    }

    .x-banner-slide-wrapper img {
        aspect-ratio: 2 / 1;
        object-fit: cover;
    }

    .x-index-content-main-container {
        padding-inline: 8px;
    }

    .x-quick-transaction-buttons > .-btn {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }

    .x-quick-transaction-buttons .-btn-inner-content-sub-title {
        display: none;
    }

    .x-promotion-index {
        padding: 16px 8px 98px;
    }

    .x-promotion-index .-promotion-card-link {
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 10px;
    }

    .x-promotion-index .-title {
        padding: 10px 11px 12px;
        font-size: .82rem !important;
    }

    .fix_footer2 {
        min-height: 68px;
    }
}

/* Reference-style desktop head navigation */
.rmw-reference-menu {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    height: 80px;
    min-width: 0;
}

.rmw-reference-menu__item {
    min-width: 78px;
    min-height: 80px;
    display: flex;
    flex: 0 1 104px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 9px;
    color: color-mix(in srgb, var(--rmw-white) 80%, transparent) !important;
    text-align: center;
    text-decoration: none !important;
    background: transparent;
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--rmw-white) 4.5%, transparent);
    border-radius: 0 !important;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.rmw-reference-menu__item:last-child {
    border-right: 1px solid color-mix(in srgb, var(--rmw-white) 4.5%, transparent);
}

.rmw-reference-menu__item i {
    color: var(--rmw-accent);
    font-size: 1.38rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--rmw-surface-deep) 28%, transparent));
}

.rmw-reference-menu__item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .76rem;
    font-weight: 600;
}

.rmw-reference-menu__item:hover,
.rmw-reference-menu__item:focus,
.rmw-reference-menu__item.is-active {
    color: var(--rmw-white) !important;
    background: color-mix(in srgb, var(--rmw-accent) 66%, transparent);
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--rmw-primary) 90%, transparent);
}

.rmw-reference-menu__item:hover i,
.rmw-reference-menu__item:focus i,
.rmw-reference-menu__item.is-active i {
    color: var(--rmw-white);
}

.rmw-reference-menu__item.-favorite {
    min-width: 142px;
    flex-basis: 164px;
    flex-direction: row;
    gap: 8px;
}

.rmw-reference-menu__item.-favorite i {
    font-size: 1rem;
}

@media (min-width: 992px) {
    .x-header .-inner-container {
        height: 80px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        gap: 0 !important;
    }

    .x-header .-inner-container > div:first-child {
        display: none;
    }

    .x-header #headerBrand {
        width: 154px;
        flex: 0 0 154px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 12px;
    }

    .x-header #headerBrand .navbar-brand {
        margin: 0;
        padding: 0;
    }

    .x-header #headerBrand img {
        max-width: 142px !important;
        max-height: 62px !important;
        object-fit: contain;
    }

    .x-header .x-menu {
        min-width: 0;
        display: flex !important;
        flex: 1 1 auto;
        align-items: stretch;
    }

    .x-header .rmw-reference-menu {
        width: 100%;
    }

    .x-header .x-menu > .-menu-container {
        display: none !important;
    }

    .x-header #headerContent {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding-left: 8px;
    }
}

@media (min-width: 1200px) {
    .x-header #headerContent .custom-dropdown-container {
        display: none !important;
    }

    .rmw-reference-menu__item {
        min-width: 82px;
        flex: 0 0 96px;
    }

    .rmw-reference-menu__item.-favorite {
        min-width: 96px;
        flex: 0 0 96px;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 7px 9px;
    }

    .rmw-reference-menu__item.-favorite i {
        font-size: 1.38rem;
    }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .rmw-reference-menu__item {
        min-width: 66px;
        flex-basis: 82px;
        padding-inline: 5px;
    }

    .rmw-reference-menu__item.-favorite {
        min-width: 108px;
        flex-basis: 118px;
    }

    .rmw-reference-menu__item span {
        font-size: .68rem;
    }

    .x-header #headerBrand {
        width: 128px;
        flex-basis: 128px;
    }
}

@media (max-width: 991.98px) {
    .rmw-reference-menu {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
 * PIGAUTO-inspired proportion and color pass
 * Recreated for the existing RMW DOM and event contracts.
 * ======================================================= */
html,
body {
    background: var(--rmw-bg) !important;
}

body::before {
    background: var(--rmw-page-background) !important;
}

.body-bg {
    background: var(--rmw-page-background) !important;
}

/* Exact desktop proportions from the visual reference */
.x-header {
    min-height: 80px !important;
    height: 80px;
    padding: 8px 22px !important;
    background: var(--rmw-header-background) !important;
    border-bottom-color: var(--rmw-border) !important;
    box-shadow:
        0 2px 4px -1px color-mix(in srgb, var(--rmw-bg-deep) 20%, transparent),
        0 4px 5px color-mix(in srgb, var(--rmw-bg-deep) 14%, transparent),
        0 1px 10px color-mix(in srgb, var(--rmw-bg-deep) 12%, transparent) !important;
}

.x-header .navbar-brand img,
.x-header .-logo {
    max-height: 58px !important;
}

.x-header .navbar-nav .nav-link,
.x-header .-menu-link {
    min-height: 64px;
    padding: 8px 14px !important;
    color: var(--rmw-muted) !important;
    border-radius: 0 !important;
}

.x-header .navbar-nav .nav-link:hover,
.x-header .navbar-nav .nav-link.active,
.x-header .-menu-link:hover {
    color: var(--rmw-text-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

.x-header .-btn-header-register,
.x-header .-btn-header-login,
.x-header-btn-support {
    min-height: 40px;
    color: var(--rmw-text-strong) !important;
    background: var(--rmw-button-background) !important;
    border: 1px solid var(--rmw-border-strong) !important;
    box-shadow: var(--rmw-shadow-soft);
}

.x-header .-btn-header-register {
    border-color: var(--rmw-border-gold) !important;
}

.rmw-left-menu {
    top: 80px;
    width: 245px;
    padding: 12px 14px;
    background: var(--rmw-nav-background);
    border-right-color: var(--rmw-border);
    box-shadow: var(--rmw-shadow-soft);
}

.rmw-left-menu ~ .body-bg {
    width: calc(100% - 245px);
    margin-left: 245px;
}

.rmw-left-menu__brand {
    min-height: 72px;
    padding: 5px 12px 12px;
    margin-bottom: 8px;
}

.rmw-left-menu__brand img {
    max-width: 172px;
    max-height: 54px;
}

.rmw-left-menu__brand-name {
    color: var(--rmw-text-strong);
    font-size: .88rem;
}

.rmw-left-menu__nav {
    gap: 4px;
    padding-top: 4px;
}

.rmw-left-menu__item {
    min-height: 64px;
    gap: 13px;
    padding: 8px 13px;
    color: var(--rmw-muted) !important;
    border: 0;
    border-left: 3px solid var(--rmw-border-strong);
    border-radius: 0 14px 14px 0;
}

.rmw-left-menu__item:hover,
.rmw-left-menu__item:focus,
.rmw-left-menu__item.is-active {
    color: var(--rmw-text-strong) !important;
    background: var(--rmw-button-hover-background);
    border-left-color: var(--rmw-primary);
    transform: translateX(2px);
}

.rmw-left-menu__item.is-active {
    box-shadow: none;
}

.rmw-left-menu__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    color: var(--rmw-text-strong);
    background: rgba(var(--rmw-white-rgb), .09);
    border-color: var(--rmw-border);
    border-radius: 12px;
    font-size: 1.04rem;
}

.rmw-left-menu__item span:last-child {
    font-size: .96rem;
    font-weight: 500;
}

.rmw-left-menu__footer {
    color: var(--rmw-muted);
}

.x-homepage-banner-container {
    padding: 16px 20px 0;
}

.x-banner-slide-wrapper {
    max-width: none;
    border-color: var(--rmw-border);
    border-radius: 8px;
    background: var(--rmw-surface-deep);
    box-shadow: var(--rmw-shadow);
}

.x-banner-slide-wrapper .-slide-inner-wrapper,
.x-banner-slide-wrapper img {
    border-radius: 8px;
}

.x-index-content-main-container {
    max-width: none;
    padding: 16px 20px 36px;
}

.x-quick-transaction-buttons {
    max-width: 760px;
    gap: 10px;
    margin: 0 auto 18px !important;
}

.x-quick-transaction-buttons > .-btn {
    min-height: 70px;
    background: var(--rmw-button-background) !important;
    border-color: var(--rmw-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

.x-quick-transaction-buttons > .-btn:hover {
    border-color: var(--rmw-border-strong) !important;
    box-shadow: var(--rmw-shadow) !important;
}

.x-quick-transaction-buttons .-ic-wrapper {
    background: rgba(var(--rmw-white-rgb), .1);
    border-radius: 10px;
}

.x-quick-transaction-buttons .-btn-inner-content-sub-title {
    color: var(--rmw-muted) !important;
}

.x-title-with-tag-header {
    margin: 10px 0 14px;
    padding: 9px 14px;
    background: var(--rmw-panel-background);
    border-radius: 6px;
}

.x-title-with-tag-header .container {
    max-width: none;
    padding: 0;
}

.x-title-with-tag-header .-title {
    margin: 0;
    color: var(--rmw-text-strong) !important;
    font-size: 1.3rem !important;
}

.x-category-total-game .-menu-parent {
    justify-content: flex-start;
    gap: 8px;
}

.x-category-button {
    border-color: var(--rmw-border) !important;
    border-radius: 8px !important;
    background: var(--rmw-card-background);
    box-shadow: var(--rmw-shadow-soft);
}

.x-category-button:hover {
    border-color: var(--rmw-border-strong) !important;
}

.x-game-list-item,
.x-game-card,
.-game-card {
    background: var(--rmw-card-background) !important;
    border-color: var(--rmw-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--rmw-shadow-soft);
}

.x-game-list-item:hover,
.x-game-card:hover,
.-game-card:hover {
    border-color: var(--rmw-border-strong) !important;
}

.x-promotion-index {
    max-width: none;
    padding: 18px 20px 42px;
}

.x-promotion-index .x-card.-multi-card,
.x-promotion-index .x-card.-single-card {
    background: var(--rmw-panel-background) !important;
    border-color: var(--rmw-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--rmw-shadow-soft);
}

.x-promotion-index .-title {
    color: var(--rmw-text-strong) !important;
}

.x-form-control,
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    color: var(--rmw-text-strong) !important;
    background: var(--rmw-input-background) !important;
    border-color: var(--rmw-border-strong) !important;
}

.x-modal .modal-content,
.modal .modal-content {
    background: var(--rmw-modal-background) !important;
    border-color: var(--rmw-border) !important;
}

.x-modal .modal-header,
.modal .modal-header {
    background: rgba(var(--rmw-white-rgb), .05);
}

.x-transaction-current-balance,
.-profile-detail-box,
.-deposit-notice-inner-wrapper {
    background: var(--rmw-card-background) !important;
    border-color: var(--rmw-border) !important;
}

.fix_footer2 {
    background: var(--rmw-nav-background) !important;
    border-top-color: var(--rmw-border) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

.fix_footer2 > a {
    color: var(--rmw-muted) !important;
}

.fix_footer2 > a:hover,
.fix_footer2 > a:focus,
.fix_footer2 > a.active {
    color: var(--rmw-text-strong) !important;
    background: var(--rmw-button-hover-background);
}

.fix_footer2 .fix_c {
    background: var(--rmw-button-background) !important;
    border-color: var(--rmw-border-strong);
}

@media (max-width: 991.98px) {
    .x-header {
        min-height: 48px !important;
        height: 48px;
        padding: 4px 9px !important;
    }

    .x-header .navbar-brand img,
    .x-header .-logo {
        max-height: 38px !important;
    }

    .rmw-left-menu ~ .body-bg {
        width: 100%;
        margin-left: 0;
    }

    .x-homepage-banner-container {
        padding: 10px 8px 0;
    }

    .x-banner-slide-wrapper,
    .x-banner-slide-wrapper .-slide-inner-wrapper,
    .x-banner-slide-wrapper img {
        border-radius: 8px;
    }

    .x-index-content-main-container {
        padding: 10px 8px 0px;
    }

    .x-title-with-tag-header {
        margin: 8px 0 10px;
        padding: 8px 10px;
    }

    .x-title-with-tag-header .-title {
        font-size: 1.05rem !important;
    }

    .x-quick-transaction-buttons {
        gap: 6px;
        margin-bottom: 10px !important;
    }

    .x-quick-transaction-buttons > .-btn {
        min-height: 66px;
        border-radius: 8px !important;
    }
}

@media (max-width: 575.98px) {
    .x-header .-btn-header-register,
    .x-header .-btn-header-login {
        min-height: 34px;
        font-size: .66rem !important;
    }

    .x-banner-slide-wrapper img {
        aspect-ratio: 2 / 1;
    }

    .x-quick-transaction-buttons > .-btn {
        padding: 7px 5px !important;
    }

    .fix_footer2 {
        min-height: 68px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    }
}

/* Deposit and withdraw cashier modals */
#depositModal,
#withdrawModal {
    --cashier-surface: color-mix(in srgb, var(--rmw-surface) 78%, transparent);
    --cashier-surface-soft: color-mix(in srgb, var(--rmw-white) 7.5%, transparent);
    --cashier-border: color-mix(in srgb, var(--rmw-white) 16%, transparent);
    --cashier-highlight: var(--rmw-primary-soft);
}

#depositModal .modal-dialog {
    width: min(620px, calc(100% - 24px));
    max-width: 620px !important;
}

#withdrawModal .modal-dialog {
    width: min(540px, calc(100% - 24px));
    max-width: 540px !important;
}

#depositModal .modal-content,
#withdrawModal .modal-content {
    overflow: visible;
    background:
        radial-gradient(circle at 15% -10%, color-mix(in srgb, var(--rmw-white) 18%, transparent), transparent 35%),
        linear-gradient(155deg, var(--rmw-accent) 0%, var(--rmw-accent) 48%, var(--rmw-surface) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 20%, transparent) !important;
    border-radius: 24px !important;
    box-shadow:
        0 30px 80px color-mix(in srgb, var(--rmw-surface-deep) 58%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 16%, transparent) !important;
}

#depositModal .modal-header,
#withdrawModal .modal-header {
    position: relative;
    min-height: 76px;
    padding: 20px 68px 15px;
    background: transparent !important;
    border: 0 !important;
}

#depositModal .modal-header::after,
#withdrawModal .modal-header::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: 0;
    left: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rmw-white) 28%, transparent), transparent);
}

#depositModal .x-title-modal,
#withdrawModal .x-title-modal {
    color: var(--rmw-white) !important;
    font-size: clamp(1.28rem, 2vw, 1.55rem) !important;
    font-weight: 700 !important;
    line-height: 1.25;
    letter-spacing: .01em;
    text-shadow: 0 2px 14px color-mix(in srgb, var(--rmw-surface-deep) 35%, transparent);
}

#depositModal .close,
#withdrawModal .close {
    position: absolute;
    top: 17px;
    right: 18px;
    width: 40px;
    height: 40px;
    margin: 0;
    color: var(--rmw-white) !important;
    background: color-mix(in srgb, var(--rmw-white) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 13%, transparent);
    box-shadow: none;
}

#depositModal .close:hover,
#withdrawModal .close:hover {
    color: var(--rmw-white) !important;
    background: color-mix(in srgb, var(--rmw-white) 20%, transparent) !important;
    transform: rotate(6deg);
}

#depositModal .modal-body,
#withdrawModal .modal-body {
    padding: 22px 26px 28px;
    overflow-x: hidden;
}

#depositModal .group-dp-method {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#depositModal .btn-select-method-dp {
    display: flex;
    min-width: 0;
    min-height: 92px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 12px 10px !important;
    color: color-mix(in srgb, var(--rmw-white) 72%, transparent) !important;
    background: var(--cashier-surface-soft) !important;
    border: 1px solid var(--cashier-border) !important;
    border-radius: 16px !important;
    filter: grayscale(1);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 7%, transparent);
    transition: border-color .2s ease, background .2s ease, transform .2s ease, filter .2s ease;
}

#depositModal .btn-select-method-dp:hover {
    color: var(--rmw-white) !important;
    background: color-mix(in srgb, var(--rmw-white) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--rmw-white) 32%, transparent) !important;
    filter: grayscale(.25);
    transform: translateY(-2px);
}

#depositModal .btn-select-method-dp.active {
    color: var(--rmw-surface) !important;
    background: linear-gradient(145deg, var(--rmw-white), var(--cashier-highlight)) !important;
    border-color: var(--rmw-white) !important;
    filter: none;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--rmw-surface-deep) 28%, transparent);
}

#depositModal .btn-select-method-dp .-ic-wrapper {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin: 0;
    background: color-mix(in srgb, var(--rmw-white) 92%, transparent);
    border-radius: 13px;
}

#depositModal .btn-select-method-dp .-ic {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

#depositModal .btn-select-method-dp .-btn-inner-content,
#depositModal .btn-select-method-dp .-btn-inner-content-title {
    max-width: 100%;
    padding: 0;
    margin: 0;
    color: inherit !important;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.25;
}

#depositModal hr.method {
    height: 1px;
    margin: 18px 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rmw-white) 20%, transparent), transparent);
    border: 0;
}

#depositModal .dp-method,
#depositModal .-deposit-notice-inner-wrapper:not(.group-dp-method) {
    padding: 16px !important;
    background: var(--cashier-surface) !important;
    border: 1px solid var(--cashier-border) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 7%, transparent);
}

#depositModal .card-bank-full,
#depositModal .card-bank,
#withdrawModal .ddl-btn-wd {
    min-height: 104px;
    padding: 16px !important;
    margin-right: 0;
    margin-left: 0;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 24%, transparent) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--rmw-surface-deep) 22%, transparent);
}

#depositModal .card-bank-full p {
    margin-bottom: 5px;
    color: var(--rmw-white);
    font-weight: 600;
}

#depositModal #btn-copy-accno,
#depositModal #btn-slip {
    width: 100%;
    min-height: 46px;
    margin: 0 !important;
    color: var(--rmw-white) !important;
    font-weight: 600;
    background: color-mix(in srgb, var(--rmw-white) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 20%, transparent) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#depositModal #btn-copy-accno:hover,
#depositModal #btn-slip:hover {
    background: color-mix(in srgb, var(--rmw-white) 18%, transparent) !important;
    transform: translateY(-1px);
}

#depositModal .form-control,
#withdrawModal .form-control {
    min-height: 52px;
    color: var(--rmw-white) !important;
    font-size: 1rem;
    background: color-mix(in srgb, var(--rmw-surface-deep) 52%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 20%, transparent) !important;
    border-radius: 13px !important;
}

#depositModal .form-control:focus,
#withdrawModal .form-control:focus {
    border-color: color-mix(in srgb, var(--rmw-white) 70%, transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rmw-white) 10%, transparent) !important;
}

#withdrawModal #group-btn-wd-credit {
    position: relative;
    display: block !important;
    width: 100%;
    margin-bottom: 14px !important;
}

#withdrawModal #creditWD {
    width: 100%;
    min-height: 62px;
    padding: 8px 58px;
    color: var(--rmw-white) !important;
    font-size: 1.32rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#withdrawModal #group-btn-wd-credit .-btn-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--rmw-white);
    background: color-mix(in srgb, var(--rmw-white) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rmw-white) 18%, transparent);
    border-radius: 12px;
    transform: translateY(-50%);
}

#withdrawModal #group-btn-wd-credit .-icon-left {
    left: 8px;
}

#withdrawModal #group-btn-wd-credit .-icon-right {
    right: 8px;
}

#withdrawModal #group-btn-wd-credit .-btn-icon:hover {
    background: color-mix(in srgb, var(--rmw-white) 22%, transparent);
}

#withdrawModal .x-transaction-current-balance {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px !important;
    margin-bottom: 14px;
    background: var(--cashier-surface) !important;
    border: 1px solid var(--cashier-border) !important;
    border-radius: 16px !important;
}

#withdrawModal .x-transaction-current-balance .-label {
    color: color-mix(in srgb, var(--rmw-white) 68%, transparent);
    font-size: .86rem;
}

#withdrawModal .x-transaction-current-balance .-balance-wrapper {
    display: flex;
    align-items: center;
    gap: 9px;
}

#withdrawModal #balance-withdraw {
    color: var(--rmw-white) !important;
    font-size: 1.25rem;
    font-weight: 700;
}

#withdrawModal #btn-transaction-balance-reload {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--rmw-white) !important;
    background: color-mix(in srgb, var(--rmw-white) 10%, transparent);
    border-radius: 10px;
}

#withdrawModal .ddl-btn-wd {
    width: 100%;
    min-height: 92px;
    text-align: left;
}

#withdrawModal #bankAccountWD {
    width: 100%;
    padding: 0;
    color: color-mix(in srgb, var(--rmw-white) 92%, transparent);
    background: transparent;
    border: 0;
    opacity: 1;
}

#withdrawModal .dropdown-menu {
    padding: 7px 0 0;
    border: 0;
}

#withdrawModal .dropdown-bank {
    margin-bottom: 7px;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 18%, transparent);
    border-radius: 14px;
}

#withdrawModal .btn.-submit {
    width: 100%;
    min-height: 50px;
    margin-top: 5px !important;
    color: var(--rmw-surface) !important;
    font-size: 1rem;
    font-weight: 700 !important;
    background: linear-gradient(145deg, var(--rmw-white), var(--rmw-primary-soft)) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--rmw-surface-deep) 24%, transparent) !important;
}

@media (max-width: 575.98px) {
    #depositModal,
    #withdrawModal {
        padding-right: 0 !important;
    }

    #depositModal .modal-dialog,
    #withdrawModal .modal-dialog {
        width: 100%;
        max-width: 100% !important;
        min-height: 100%;
        align-items: flex-end;
        padding: 0;
        margin: 0;
    }

    #depositModal .modal-content,
    #withdrawModal .modal-content {
        max-height: calc(94vh - env(safe-area-inset-top));
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }

    #depositModal .modal-header,
    #withdrawModal .modal-header {
        min-height: 68px;
        padding: 18px 58px 13px;
    }

    #depositModal .close,
    #withdrawModal .close {
        top: 14px;
        right: 14px;
    }

    #depositModal .modal-body,
    #withdrawModal .modal-body {
        padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
    }

    #depositModal .group-dp-method {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #depositModal .btn-select-method-dp {
        min-height: 82px;
        padding: 9px 7px !important;
    }

    #depositModal .dp-method,
    #depositModal .-deposit-notice-inner-wrapper:not(.group-dp-method) {
        padding: 12px !important;
    }

    #withdrawModal #creditWD {
        min-height: 58px;
        font-size: 1.16rem;
    }
}

/* RMW v6: viewport-safe cashier and unified lobby cards */
#depositModal .modal-dialog,
#withdrawModal .modal-dialog {
    height: auto !important;
    max-height: calc(100vh - 32px) !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    align-items: stretch !important;
}

#depositModal .modal-content,
#withdrawModal .modal-content {
    display: flex;
    max-height: calc(100vh - 32px) !important;
    flex-direction: column;
    overflow: hidden !important;
}

#depositModal .modal-header,
#withdrawModal .modal-header {
    flex: 0 0 auto;
}

#depositModal .modal-body,
#withdrawModal .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--rmw-white) 35%, transparent) transparent;
}

#depositModal .modal-body::-webkit-scrollbar,
#withdrawModal .modal-body::-webkit-scrollbar {
    width: 6px;
}

#depositModal .modal-body::-webkit-scrollbar-thumb,
#withdrawModal .modal-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--rmw-white) 32%, transparent);
    border-radius: 999px;
}

#depositModal .img-guide-tx,
#withdrawModal .img-guide-tx {
    display: block;
    width: min(100%, 300px);
    height: auto;
    margin: 18px auto 4px;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 14%, transparent);
    border-radius: 14px;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--rmw-surface-deep) 25%, transparent);
}

.x-provider-category {
    margin-bottom: 24px;
}

.x-provider-category .-game-title-wrapper {
    margin-bottom: 12px;
}

.x-provider-category .-game-title {
    color: var(--rmw-white) !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}

.x-provider-category .-provider-card-item {
    padding-top: 4px;
    padding-bottom: 8px;
}

.x-game-list-item-macro-in-share .-inner-wrapper {
    overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--rmw-accent) 90%, transparent), color-mix(in srgb, var(--rmw-surface) 96%, transparent)) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 13%, transparent) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--rmw-surface-deep) 26%, transparent);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.x-game-list-item-macro-in-share .-inner-wrapper .-cover-img,
.x-game-list-item-macro-in-share .-inner-wrapper .-overlay {
    border-radius: 13px !important;
}

.x-game-list-item-macro-in-share:hover .-inner-wrapper {
    border-color: color-mix(in srgb, var(--rmw-white) 34%, transparent) !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--rmw-surface-deep) 38%, transparent);
    transform: translateY(-3px);
}

.x-game-list-item-macro-in-share .-title {
    margin-top: 8px;
    color: color-mix(in srgb, var(--rmw-white) 90%, transparent) !important;
    font-size: .85rem !important;
    font-weight: 500;
    line-height: 1.35;
}

.x-game-list-item-macro-in-share .-btn-play {
    color: var(--rmw-surface) !important;
    font-weight: 700 !important;
    background: linear-gradient(145deg, var(--rmw-white), var(--rmw-primary-soft)) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--rmw-surface-deep) 24%, transparent);
}

.x-category-total-game .nav-menu {
    padding: 4px 0 8px;
}

.x-category-button {
    min-height: 58px;
    overflow: hidden;
    border-radius: 12px !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.x-category-button:hover {
    border-color: color-mix(in srgb, var(--rmw-white) 34%, transparent) !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--rmw-surface-deep) 32%, transparent);
    transform: translateY(-2px);
}

.x-promotion-index .x-card.-multi-card,
.x-promotion-index .x-card.-single-card {
    overflow: hidden;
    border-radius: 16px !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.x-promotion-index .x-card.-multi-card:hover,
.x-promotion-index .x-card.-single-card:hover {
    border-color: color-mix(in srgb, var(--rmw-white) 30%, transparent) !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--rmw-surface-deep) 34%, transparent);
    transform: translateY(-3px);
}

.x-quick-transaction-buttons > .-btn {
    position: relative;
    overflow: hidden;
}

.x-quick-transaction-buttons > .-btn::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -35%;
    width: 36%;
    height: 220%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rmw-white) 20%, transparent), transparent);
    transform: rotate(18deg);
    transition: left .45s ease;
}

.x-quick-transaction-buttons > .-btn:hover::after {
    left: 120%;
}

@media (max-width: 991.98px) {
    .x-provider-category {
        margin-bottom: 0px;
    }

    .x-game-list-item-macro-in-share .-inner-wrapper {
        border-radius: 11px !important;
    }

    .x-game-list-item-macro-in-share .-inner-wrapper .-cover-img,
    .x-game-list-item-macro-in-share .-inner-wrapper .-overlay {
        border-radius: 10px !important;
    }
}

@media (max-width: 575.98px) {
    #depositModal .modal-dialog,
    #withdrawModal .modal-dialog {
        max-height: calc(94vh - env(safe-area-inset-top)) !important;
        margin: auto 0 0 !important;
    }

    #depositModal .modal-content,
    #withdrawModal .modal-content {
        max-height: calc(94vh - env(safe-area-inset-top)) !important;
    }

    .x-category-button {
        min-height: 54px;
    }

    .x-game-list-item-macro-in-share:hover .-inner-wrapper,
    .x-promotion-index .x-card.-multi-card:hover,
    .x-promotion-index .x-card.-single-card:hover {
        transform: none;
    }
}

/* Prevent hidden mobile account panels from widening the document */
html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

@media (max-width: 991.98px) {
    .body-bg,
    .x-main-container,
    .x-index-content-main-container,
    .x-homepage-banner-container {
        max-width: 100vw;
    }

    .x-modal-account-menu-mobile {
        max-width: min(82vw, 320px);
    }
}

/* accountModal visibility guard.
   Applies only after Bootstrap has added .show; the hidden state stays original. */
#accountModal.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2060 !important;
}

#accountModal.show .modal-dialog,
#accountModal.show .modal-content,
#accountModal.show .modal-body {
    opacity: 1 !important;
    visibility: visible !important;
}

#accountModal.show .modal-dialog {
    transform: none !important;
}

#accountModal.show .modal-content {
    color: var(--rmw-white);
    background: var(--rmw-accent) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-accent) 46%, transparent) !important;
    border-radius: 15px !important;
    box-shadow: 0 24px 65px color-mix(in srgb, var(--rmw-surface-deep) 55%, transparent) !important;
}

#accountModal.show .x-modal-account-menu .nav-link {
    color: var(--rmw-white);
    background: linear-gradient(100deg, var(--rmw-bg-deep), var(--rmw-bg-deep)) !important;
    border-left: 5px solid var(--rmw-accent) !important;
}

#accountModal.show .x-modal-account-menu .nav-link .-text-menu {
    color: var(--rmw-white) !important;
}

#accountModal.show .x-modal-account-menu .nav-link.active,
#accountModal.show .x-modal-account-menu .nav-link:hover {
    background: linear-gradient(100deg, var(--rmw-surface-strong), var(--rmw-bg-deep)) !important;
    border-left-color: var(--rmw-accent) !important;
}

#accountModal.show .x-title-modal {
    color: var(--rmw-white) !important;
    font-weight: 700;
}

#accountModal.show .x-profile-group-trace-body .-profile-info-wrapper,
#accountModal.show .x-profile-group-trace-body .-bank-info-wrapper {
    color: var(--rmw-white);
    background: var(--rmw-surface);
    border: 1px solid color-mix(in srgb, var(--rmw-accent) 38%, transparent);
    border-radius: 10px;
}

/* Mobile account uses the original slide-in sidebar, not #accountModal. */
@media (max-width: 1199.98px) {
    .x-menu-account-list-sidebar {
        right: -100vw;
        width: min(86vw, 340px);
        min-width: 0;
        height: 100dvh;
        z-index: 2200 !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: right .28s ease, opacity .2s ease, visibility 0s linear .28s;
    }

    .x-menu-account-list-sidebar.-open {
        right: 0 !important;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .x-menu-account-list-sidebar .x-modal-account-menu-mobile {
        width: 100%;
        min-width: 0 !important;
        max-width: none;
        height: 100dvh;
        padding: 16px 14px calc(80px + env(safe-area-inset-bottom));
        color: var(--rmw-white);
        background: linear-gradient(180deg, var(--rmw-accent), var(--rmw-surface)) !important;
        box-shadow: -18px 0 50px color-mix(in srgb, var(--rmw-bg-deep) 42%, transparent);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 2202 !important;
    }

    .x-menu-account-list-sidebar .-overlay {
        right: 0;
        left: auto;
        width: 100vw;
        z-index: 2201 !important;
        background: color-mix(in srgb, var(--rmw-bg-deep) 68%, transparent);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link {
        min-height: 48px;
        color: var(--rmw-white);
        background: linear-gradient(100deg, var(--rmw-bg-deep), var(--rmw-bg-deep)) !important;
        border: 0;
        border-left: 5px solid var(--rmw-accent);
        border-radius: 0 9px 9px 0;
    }

    .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link .-text-menu {
        color: var(--rmw-white) !important;
        font-weight: 600;
    }

    .x-menu-account-list-sidebar .x-modal-account-menu-mobile .-modal-profile-mobile .-balance-container,
    .x-menu-account-list-sidebar .x-modal-account-menu-mobile .-modal-profile-mobile .-balance-container .-text-username {
        color: var(--rmw-white);
    }

    .x-menu-account-list-sidebar .x-modal-account-menu-mobile .-modal-profile-mobile .-balance-container .-user-balance .-inner-box-wrapper {
        background: color-mix(in srgb, var(--rmw-bg-deep) 28%, transparent);
        border: 1px solid color-mix(in srgb, var(--rmw-white) 13%, transparent);
    }
}

/* LuckyWheel page */
.rmw-luckywheel-page {
    min-height: calc(100vh - 64px);
    padding-bottom: 56px;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--rmw-primary) 12%, transparent), transparent 28%),
        radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--rmw-accent) 11%, transparent), transparent 34%);
}

.rmw-luckywheel-page .x-invitation-index-container {
    padding-top: 20px;
}

.rmw-luckywheel-page .x-cover-invitation-container {
    max-width: 1120px;
    margin: 0 auto 22px;
    padding: 0 18px;
}

.rmw-luckywheel-page .x-cover-invitation-container .-cover-invitation-wrapper {
    position: relative;
    height: clamp(190px, 20vw, 280px);
    overflow: hidden;
    background-position: center 48% !important;
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 28%, transparent);
    border-radius: 22px;
    box-shadow: 0 20px 46px color-mix(in srgb, var(--rmw-bg-deep) 30%, transparent);
}

.rmw-luckywheel-page .x-cover-invitation-container .-cover-invitation-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rmw-surface-deep) 94%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 42%, transparent) 48%, color-mix(in srgb, var(--rmw-surface-deep) 4%, transparent));
    pointer-events: none;
}

.rmw-luckywheel-page .x-cover-invitation-container .-content-wrapper {
    position: relative;
    z-index: 1;
    max-width: 48%;
    margin-left: clamp(28px, 5vw, 72px);
}

.rmw-luckywheel-page .x-cover-invitation-container .-content-wrapper .-title {
    margin: 0 0 8px;
    color: var(--rmw-white);
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: .01em;
    background: linear-gradient(180deg, var(--rmw-primary-soft), var(--rmw-primary) 72%, var(--rmw-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 5px 14px color-mix(in srgb, var(--rmw-bg-deep) 38%, transparent));
}

.rmw-luckywheel-page .x-cover-invitation-container .-content-wrapper .-sub-title {
    max-width: 480px;
    margin: 0;
    color: color-mix(in srgb, var(--rmw-white) 82%, transparent);
    font-size: clamp(.95rem, 1.5vw, 1.25rem);
    line-height: 1.55;
}

.rmw-luckywheel-page .-invitation-info-wrapper:empty {
    display: none;
}

.rmw-luckywheel-page .-info-panel-wrapper {
    position: relative;
    z-index: 2;
    padding: 0 18px;
}

.rmw-luckywheel-page .-info-panel-wrapper > .container {
    width: 100%;
    max-width: 1040px;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, .8fr);
    align-items: center;
    gap: 24px;
    margin: 0 auto;
    padding: 26px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--rmw-surface-deep) 96%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 98%, transparent));
    border: 1px solid color-mix(in srgb, var(--rmw-white) 11%, transparent);
    border-radius: 24px;
    box-shadow: 0 24px 58px color-mix(in srgb, var(--rmw-bg-deep) 32%, transparent);
}

.rmw-luckywheel-page #eventCode,
.rmw-luckywheel-page #spinSound {
    display: none !important;
}

.rmw-luckywheel-page #drawing {
    position: relative;
    min-width: 0;
    min-height: 480px;
    display: grid;
    place-items: center;
    padding: 14px;
    color: color-mix(in srgb, var(--rmw-white) 78%, transparent);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--rmw-primary) 14%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 10%, transparent) 56%, transparent 72%),
        color-mix(in srgb, var(--rmw-white) 2.5%, transparent);
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 17%, transparent);
    border-radius: 20px;
}

.rmw-luckywheel-page #drawing::before {
    content: "";
    position: absolute;
    inset: 7%;
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 12%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 55px color-mix(in srgb, var(--rmw-primary) 8%, transparent);
    pointer-events: none;
}

.rmw-luckywheel-page #drawing > svg {
    position: relative;
    z-index: 1;
    width: min(100%, 450px) !important;
    height: auto !important;
    filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--rmw-bg-deep) 40%, transparent));
}

.rmw-luckywheel-page #drawing .lds-ellipsis {
    position: relative;
    z-index: 2;
}

.rmw-luckywheel-page .x-invitation-overview-panel {
    min-width: 0;
}

.rmw-luckywheel-page .x-invitation-base .-content-outer-wrapper {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.rmw-luckywheel-page .x-invitation-overview .-menu-list {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
    overflow: visible;
    background: transparent;
    border: 0;
}

.rmw-luckywheel-page .x-invitation-overview .-menu-list-item {
    min-height: 112px;
    align-items: flex-start;
    padding: 18px 20px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--rmw-white) 9%, transparent), color-mix(in srgb, var(--rmw-white) 3.5%, transparent));
    border: 1px solid color-mix(in srgb, var(--rmw-white) 10%, transparent);
    border-radius: 16px;
    box-shadow: 0 12px 25px color-mix(in srgb, var(--rmw-bg-deep) 18%, transparent);
}

.rmw-luckywheel-page .x-invitation-overview .-menu-list-item::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 10px;
    height: 10px;
    background: var(--rmw-primary);
    border-radius: 50%;
    box-shadow: 0 0 15px color-mix(in srgb, var(--rmw-primary) 75%, transparent);
}

.rmw-luckywheel-page .x-invitation-overview .-menu-list-item:not(:last-child)::before {
    display: none;
}

.rmw-luckywheel-page .x-invitation-overview .-menu-list-item .-label {
    margin-bottom: 8px;
    color: color-mix(in srgb, var(--rmw-white) 64%, transparent);
    font-size: .9rem;
    font-weight: 500;
}

.rmw-luckywheel-page .x-invitation-overview .-menu-list-item .-value {
    margin: 0;
    color: var(--rmw-primary);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 750;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.rmw-luckywheel-page .x-invitation-overview > .fs-10 {
    margin-top: 16px;
    padding: 14px 15px;
    color: color-mix(in srgb, var(--rmw-white) 70%, transparent);
    font-size: .82rem !important;
    line-height: 1.6;
    background: color-mix(in srgb, var(--rmw-accent) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--rmw-accent) 18%, transparent);
    border-radius: 13px;
}

.rmw-luckywheel-page .x-invitation-overview > .fs-10 span {
    color: var(--rmw-white);
    font-weight: 700;
}

#RewardRecv .modal-content {
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rmw-primary) 18%, transparent), transparent 38%),
        linear-gradient(155deg, var(--rmw-surface-deep), var(--rmw-surface-deep)) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 30%, transparent) !important;
    border-radius: 20px !important;
}

#RewardRecv .modal-body {
    padding: 38px 24px 26px;
    color: var(--rmw-white);
    font-size: 1.12rem;
    font-weight: 600;
}

#RewardRecv #imgReward {
    width: 138px;
    height: 138px;
    padding: 10px;
    object-fit: contain;
    background: color-mix(in srgb, var(--rmw-white) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 27%, transparent);
    border-radius: 24px;
    box-shadow: 0 15px 34px color-mix(in srgb, var(--rmw-bg-deep) 26%, transparent);
}

#RewardRecv #descReward {
    margin-top: 16px;
    color: var(--rmw-primary) !important;
    font-size: 1.35rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .rmw-luckywheel-page {
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }

    .rmw-luckywheel-page .x-invitation-index-container {
        padding-top: 12px;
    }

    .rmw-luckywheel-page .x-cover-invitation-container {
        margin-bottom: 14px;
        padding: 0 12px;
    }

    .rmw-luckywheel-page .-info-panel-wrapper {
        padding: 0 12px;
    }

    .rmw-luckywheel-page .-info-panel-wrapper > .container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
        border-radius: 19px;
    }

    .rmw-luckywheel-page #drawing {
        min-height: 0;
        padding: 8px;
    }

    .rmw-luckywheel-page #drawing > svg {
        width: min(100%, 430px) !important;
    }

    .rmw-luckywheel-page .x-invitation-overview .-menu-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rmw-luckywheel-page .x-invitation-overview .-menu-list-item {
        min-height: 94px;
        padding: 14px;
    }
}

@media (max-width: 575.98px) {
    .rmw-luckywheel-page .x-cover-invitation-container .-cover-invitation-wrapper {
        height: 150px;
        background-position: 62% center !important;
        border-radius: 15px;
    }

    .rmw-luckywheel-page .x-cover-invitation-container .-content-wrapper {
        max-width: 58%;
        margin-left: 18px;
    }

    .rmw-luckywheel-page .x-cover-invitation-container .-content-wrapper .-title {
        font-size: 1.75rem;
    }

    .rmw-luckywheel-page .x-cover-invitation-container .-content-wrapper .-sub-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: .78rem;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .rmw-luckywheel-page .-info-panel-wrapper > .container {
        padding: 11px;
    }

    .rmw-luckywheel-page #drawing {
        border-radius: 15px;
    }

    .rmw-luckywheel-page .x-invitation-overview .-menu-list {
        gap: 8px;
    }

    .rmw-luckywheel-page .x-invitation-overview .-menu-list-item {
        min-height: 84px;
        padding: 12px;
        border-radius: 12px;
    }

    .rmw-luckywheel-page .x-invitation-overview .-menu-list-item .-label {
        font-size: .72rem;
    }

    .rmw-luckywheel-page .x-invitation-overview .-menu-list-item .-value {
        font-size: 1.25rem;
    }
}

/* Keep Promotion presentation rules last in the cascade. */
.x-promotion-index.rmw-promotion-page {
    padding: 34px 20px 52px !important;
}

.x-promotion-index.rmw-promotion-page .x-card.-multi-card {
    min-height: 0;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 15%, transparent) !important;
    border-radius: 18px !important;
    background: linear-gradient(155deg, var(--rmw-accent) 0%, var(--rmw-accent) 100%) !important;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--rmw-surface-deep) 24%, transparent);
}

.x-promotion-index.rmw-promotion-page .x-card.-multi-card:hover {
    border-color: color-mix(in srgb, var(--rmw-primary) 62%, transparent) !important;
    box-shadow: 0 17px 36px color-mix(in srgb, var(--rmw-surface-deep) 34%, transparent);
    transform: translateY(-3px);
}

.x-promotion-index.rmw-promotion-page .x-card.-multi-card .-img-container .-img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
}

.x-promotion-index.rmw-promotion-page .x-card.-multi-card .-title {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--rmw-white) !important;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .x-promotion-index.rmw-promotion-page {
        padding: 20px 10px 96px !important;
    }

    .x-promotion-index.rmw-promotion-page .x-card.-multi-card {
        border-radius: 14px !important;
    }
}

/* accountModal v17: readable, balanced and responsive without changing its contract */
#accountModal.show {
    padding: 16px !important;
    overflow-x: hidden;
    overflow-y: auto;
}

#accountModal .modal-dialog.-modal-main-account {
    width: calc(100% - 24px);
    max-width: 1040px !important;
    min-height: calc(100% - 32px);
    margin: 16px auto;
}

#accountModal .-modal-main-account > .modal-content {
    width: 100%;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    color: var(--rmw-white) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 18%, transparent) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 86% 6%, color-mix(in srgb, var(--rmw-accent) 20%, transparent), transparent 30%),
        linear-gradient(145deg, var(--rmw-accent) 0%, var(--rmw-surface) 100%) !important;
    box-shadow: 0 28px 80px color-mix(in srgb, var(--rmw-surface-deep) 62%, transparent) !important;
}

#accountModal .-modal-main-account > .modal-content > .close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--rmw-white) !important;
    font-size: 1rem;
    text-shadow: none;
    opacity: 1;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 30%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rmw-surface-deep) 62%, transparent);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--rmw-surface-deep) 25%, transparent);
}

#accountModal .-modal-main-account > .modal-content > .close:hover {
    color: var(--rmw-surface) !important;
    background: var(--rmw-white);
}

#accountModal .-modal-main-account .-modal-body {
    display: flex !important;
    min-height: 560px;
    max-height: calc(100dvh - 32px);
    padding: 70px 24px 24px !important;
    gap: 22px;
    overflow: hidden !important;
}

#accountModal .x-modal-account-menu {
    flex: 0 0 230px;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
}

#accountModal .x-modal-account-menu .navbar-nav {
    height: 100%;
    padding: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--rmw-white) 36%, transparent) transparent;
}

#accountModal .x-modal-account-menu .navbar-nav .nav-item,
#accountModal .x-modal-account-menu .navbar-nav .nav-item:not(:last-child) {
    margin: 0 0 9px !important;
}

#accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 54px;
    padding: 10px 13px !important;
    color: var(--rmw-white) !important;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 14%, transparent) !important;
    border-left: 1px solid color-mix(in srgb, var(--rmw-white) 14%, transparent) !important;
    border-radius: 13px !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 62%, transparent) !important;
    box-shadow: none;
    gap: 11px;
}

#accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link:hover,
#accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link.active {
    color: var(--rmw-surface) !important;
    border-color: color-mix(in srgb, var(--rmw-primary) 82%, transparent) !important;
    border-left-color: color-mix(in srgb, var(--rmw-primary) 82%, transparent) !important;
    background: linear-gradient(135deg, var(--rmw-primary-soft), var(--rmw-primary-soft)) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--rmw-surface-deep) 20%, transparent);
}

#accountModal .x-modal-account-menu .nav-link .-icon-image {
    flex: 0 0 34px;
    width: 34px !important;
    height: 34px !important;
    max-width: 34px;
    margin: 0 !important;
    object-fit: contain;
    object-position: center;
}

#accountModal .x-modal-account-menu .nav-link .-text-menu {
    min-width: 0;
    color: var(--rmw-white) !important;
    font-size: .94rem !important;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

#accountModal .x-modal-account-menu .nav-link:hover .-text-menu,
#accountModal .x-modal-account-menu .nav-link.active .-text-menu {
    color: var(--rmw-surface) !important;
    font-weight: 700;
}

#accountModal .x-modal-account-menu .-logout .nav-link {
    border-color: color-mix(in srgb, var(--rmw-accent) 28%, transparent) !important;
}

#accountModal .-layout-account {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    padding: 24px !important;
    color: var(--rmw-white) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 14%, transparent);
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 38%, transparent) !important;
}

#accountModal .desktop-modal-content,
#accountModal .desktop-modal-content > div {
    min-width: 0;
    max-width: 100%;
}

#accountModal .x-title-modal {
    width: 100%;
    max-width: none;
    padding: 0 52px 14px 0;
    margin: 0 0 22px !important;
    color: var(--rmw-white) !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    line-height: 1.4;
    text-align: left !important;
    overflow-wrap: anywhere;
    border-bottom: 1px solid color-mix(in srgb, var(--rmw-white) 16%, transparent);
}

#accountModal .x-title-modal::after {
    display: none !important;
}

#accountModal .x-profile-group-trace-body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
    align-items: stretch;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    gap: 16px;
}

#accountModal .x-profile-group-trace-body .-profile-info-wrapper,
#accountModal .x-profile-group-trace-body .-bank-info-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 20px !important;
    color: var(--rmw-white) !important;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 16%, transparent) !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 38%, transparent) !important;
}

#accountModal .x-profile-info.-group-trace-type {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 16px;
}

#accountModal .x-profile-info.-group-trace-type .-profile-image-wrapper {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    padding: 8px;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 38%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--rmw-white) 8%, transparent);
}

#accountModal .x-profile-info-image,
#accountModal .x-profile-info-image .-img,
#accountModal .x-profile-info.-group-trace-type .-profile-image-wrapper .-img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: contain;
    object-position: center;
}

#accountModal .x-profile-info.-group-trace-type .-inner-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

#accountModal .x-profile-info .-username-wrapper {
    min-width: 0;
    gap: 7px;
}

#accountModal .x-profile-info .-username-wrapper .-label,
#accountModal .x-profile-bank-info .-heading-title,
#accountModal .x-profile-bank-info .-bank-name .-label {
    color: var(--rmw-primary-soft) !important;
    font-size: .9rem;
    line-height: 1.5;
}

#accountModal .x-profile-info .-username-wrapper .-label-highlight {
    color: var(--rmw-primary) !important;
    font-weight: 700;
}

#accountModal .x-profile-info .-username-wrapper .-value,
#accountModal .x-profile-bank-info .-bank-detail .-name,
#accountModal .x-profile-bank-info .-bank-name .-value {
    color: var(--rmw-white) !important;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#accountModal .btn-tranparent,
#accountModal .btn-tranparent a {
    color: var(--rmw-primary) !important;
}

#accountModal .x-profile-info .-btn-change-password,
#accountModal .x-admin-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    margin-top: 14px;
    color: var(--rmw-surface) !important;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    border-radius: 10px;
    background: var(--rmw-primary);
}

#accountModal .-change-password-container {
    padding: 16px;
    margin-top: 14px !important;
    color: var(--rmw-white);
    border: 1px solid color-mix(in srgb, var(--rmw-white) 16%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--rmw-surface-deep) 40%, transparent);
}

#accountModal .-change-password-container .form-control,
#accountModal .x-coupon-input {
    min-height: 46px;
    padding: 10px 13px;
    color: var(--rmw-white) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 24%, transparent) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 52%, transparent) !important;
}

#accountModal .form-control::placeholder {
    color: color-mix(in srgb, var(--rmw-white) 68%, transparent) !important;
}

#accountModal .x-profile-bank-info .-bank-detail {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 12px 0 14px;
    gap: 11px;
}

#accountModal .x-profile-bank-info .-bank-detail .-img {
    flex: 0 0 48px;
    width: 48px !important;
    height: 48px !important;
    max-width: 48px;
    padding: 3px;
    margin: 0 !important;
    object-fit: contain;
    object-position: center;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 25%, transparent);
    background: var(--rmw-white);
}

#accountModal .x-profile-bank-info .-bank-name {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    color: var(--rmw-white) !important;
    line-height: 1.5;
    gap: 3px 6px;
}

#accountModal .x-admin-contact {
    margin-top: 14px;
}

#accountModal .x-invitation-menu-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 16px;
    gap: 8px;
}

#accountModal .x-invitation-menu-wrapper .-btn-menu {
    flex: 1 1 150px;
    min-height: 44px;
    padding: 10px 14px;
    color: var(--rmw-white) !important;
    line-height: 1.4;
    white-space: normal;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 18%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--rmw-surface-deep) 42%, transparent);
}

#accountModal .x-invitation-menu-wrapper .-btn-menu.-active,
#accountModal .x-invitation-menu-wrapper .-btn-menu.active {
    color: var(--rmw-surface) !important;
    font-weight: 700;
    background: var(--rmw-primary) !important;
}

#accountModal .table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 14%, transparent);
    border-radius: 13px;
}

#accountModal .table {
    min-width: 520px;
    margin: 0;
    color: var(--rmw-white) !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 26%, transparent);
}

#accountModal .table thead th {
    padding: 12px 10px;
    color: var(--rmw-primary) !important;
    line-height: 1.4;
    vertical-align: middle;
    border-color: color-mix(in srgb, var(--rmw-white) 14%, transparent) !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 50%, transparent);
}

#accountModal .table tbody td {
    padding: 11px 10px;
    color: var(--rmw-white) !important;
    line-height: 1.45;
    vertical-align: middle;
    border-color: color-mix(in srgb, var(--rmw-white) 10%, transparent) !important;
}

#accountModal .-coupon-member-detail,
#accountModal .cashback-content,
#accountModal .x-invitation-overview,
#accountModal .remark-cashback,
#accountModal .card-remark-cb {
    max-width: 100%;
    color: var(--rmw-white) !important;
}

#accountModal .-coupon-member-detail,
#accountModal .cashback-content > .x-invitation-overview,
#accountModal .remark-cashback {
    padding: 16px !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 14%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--rmw-surface-deep) 30%, transparent);
}

#accountModal .-coupon-member-detail img,
#accountModal .-no-result-container img,
#accountModal .-account-promotion-container img {
    display: block;
    width: auto;
    max-width: min(100%, 260px) !important;
    height: auto !important;
    max-height: 220px;
    margin-right: auto;
    margin-left: auto;
    object-fit: contain;
}

#accountModal .-text-container,
#accountModal .container-coupon,
#accountModal .card-remark-cb p,
#accountModal .cashback-content p {
    color: var(--rmw-white) !important;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

#accountModal .btn.-submit,
#accountModal .-btn-header-login {
    min-height: 46px;
    padding: 11px 18px !important;
    color: var(--rmw-surface) !important;
    font-weight: 700 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, var(--rmw-primary), var(--rmw-primary-soft)) !important;
}

@media (max-width: 767.98px) {
    #accountModal.show {
        padding: 0 !important;
    }

    #accountModal .modal-dialog.-modal-main-account {
        width: 100%;
        max-width: 100% !important;
        min-height: 100%;
        margin: 0;
        align-items: flex-end;
    }

    #accountModal .-modal-main-account > .modal-content {
        height: min(94dvh, 820px);
        max-height: 94dvh;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 22px 22px 0 0 !important;
    }

    #accountModal .-modal-main-account .-modal-body {
        flex-direction: column;
        min-height: 0;
        height: 100%;
        max-height: none;
        padding: 64px 12px calc(14px + env(safe-area-inset-bottom)) !important;
        gap: 10px;
    }

    #accountModal .x-modal-account-menu {
        flex: 0 0 auto;
        width: 100%;
        overflow: visible;
    }

    #accountModal .x-modal-account-menu .navbar-nav {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: auto;
        padding: 2px 2px 7px;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 7px;
    }

    #accountModal .x-modal-account-menu .navbar-nav .nav-item,
    #accountModal .x-modal-account-menu .navbar-nav .nav-item:not(:last-child) {
        flex: 0 0 148px;
        margin: 0 !important;
    }

    #accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link {
        min-height: 50px;
        padding: 8px 10px !important;
        gap: 8px;
    }

    #accountModal .x-modal-account-menu .nav-link .-icon-image {
        flex-basis: 30px;
        width: 30px !important;
        height: 30px !important;
    }

    #accountModal .x-modal-account-menu .nav-link .-text-menu {
        font-size: .82rem !important;
    }

    #accountModal .-layout-account {
        flex: 1 1 auto;
        width: 100% !important;
        min-height: 0;
        padding: 18px 14px !important;
        border-radius: 15px !important;
    }

    #accountModal .x-title-modal {
        padding-right: 42px;
        margin-bottom: 16px !important;
        font-size: 1.2rem !important;
    }

    #accountModal .x-profile-group-trace-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    #accountModal .x-profile-group-trace-body .-profile-info-wrapper,
    #accountModal .x-profile-group-trace-body .-bank-info-wrapper {
        padding: 16px !important;
    }
}

@media (max-width: 420px) {
    #accountModal .x-profile-info.-group-trace-type {
        flex-direction: column;
        align-items: center;
    }

    #accountModal .x-profile-info.-group-trace-type .-inner-wrapper {
        width: 100%;
        text-align: left;
    }

    #accountModal .x-profile-info.-group-trace-type .-profile-image-wrapper {
        flex-basis: 82px;
        width: 82px;
        height: 82px;
    }

    #accountModal .-layout-account {
        padding: 15px 12px !important;
    }

    #accountModal .x-profile-group-trace-body .-profile-info-wrapper,
    #accountModal .x-profile-group-trace-body .-bank-info-wrapper {
        padding: 14px !important;
    }
}

/* depositModal v18: clear hierarchy, equal imagery and comfortable spacing */
#depositModal {
    --deposit-bg: var(--rmw-surface);
    --deposit-panel: color-mix(in srgb, var(--rmw-surface-deep) 48%, transparent);
    --deposit-panel-strong: color-mix(in srgb, var(--rmw-surface-deep) 62%, transparent);
    --deposit-border: color-mix(in srgb, var(--rmw-white) 18%, transparent);
    --deposit-text: var(--rmw-white);
    --deposit-muted: var(--rmw-primary-soft);
    --deposit-accent: var(--rmw-primary);
}

#depositModal .modal-dialog {
    width: min(690px, calc(100% - 28px));
    max-width: 690px !important;
    margin: 16px auto !important;
}

#depositModal .modal-content {
    color: var(--deposit-text) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 20%, transparent) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--rmw-accent) 22%, transparent), transparent 34%),
        linear-gradient(150deg, var(--rmw-accent) 0%, var(--rmw-surface) 52%, var(--rmw-surface) 100%) !important;
    box-shadow: 0 30px 85px color-mix(in srgb, var(--rmw-surface-deep) 65%, transparent) !important;
}

#depositModal .modal-header {
    min-height: 78px;
    padding: 21px 72px 16px !important;
}

#depositModal .x-title-modal {
    max-width: 100%;
    margin: 0 auto !important;
    color: var(--rmw-white) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

#depositModal .close {
    top: 17px;
    right: 18px;
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--rmw-white) !important;
    text-shadow: none;
    opacity: 1;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 30%, transparent) !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 50%, transparent) !important;
}

#depositModal .modal-body {
    padding: 24px 28px 30px !important;
    color: var(--rmw-white) !important;
}

#depositModal .x-deposit-form,
#depositModal .-deposit-container,
#depositModal .-form {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

#depositModal .group-dp-method {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    gap: 11px;
}

#depositModal .btn-select-method-dp {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 108px;
    padding: 13px 9px !important;
    color: var(--rmw-white) !important;
    text-decoration: none;
    border: 1px solid var(--deposit-border) !important;
    border-radius: 16px !important;
    background: var(--deposit-panel) !important;
    filter: none !important;
    gap: 9px;
}

#depositModal .btn-select-method-dp:hover {
    color: var(--rmw-white) !important;
    border-color: color-mix(in srgb, var(--rmw-primary) 58%, transparent) !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 65%, transparent) !important;
    transform: translateY(-2px);
}

#depositModal .btn-select-method-dp.active {
    color: var(--rmw-surface) !important;
    border-color: var(--rmw-primary-soft) !important;
    background: linear-gradient(145deg, var(--rmw-primary-soft), var(--rmw-primary-soft)) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--rmw-surface-deep) 26%, transparent);
}

#depositModal .btn-select-method-dp .-ic-wrapper {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 7px;
    margin: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 24%, transparent);
    border-radius: 14px;
    background: var(--rmw-white);
}

#depositModal .btn-select-method-dp .-ic {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 36px;
    max-height: 36px;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

#depositModal .btn-select-method-dp .-btn-inner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

#depositModal .btn-select-method-dp .-btn-inner-content-title {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: .87rem !important;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

#depositModal hr.method {
    margin: 22px 0 !important;
}

#depositModal .dp-method,
#depositModal .-deposit-notice-inner-wrapper:not(.group-dp-method) {
    width: 100%;
    max-width: 100%;
    padding: 20px !important;
    color: var(--rmw-white) !important;
    border: 1px solid var(--deposit-border) !important;
    border-radius: 18px !important;
    background: var(--deposit-panel) !important;
}

#depositModal .dp-method > .row,
#depositModal .dp-method > form > .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#depositModal .card-bank-full,
#depositModal .card-bank,
#depositModal .ddl-btn-payment,
#depositModal .dropdown-bank {
    width: 100%;
    min-height: 112px;
    padding: 17px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    color: var(--rmw-white) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 28%, transparent) !important;
    border-radius: 17px !important;
    box-shadow: 0 13px 28px color-mix(in srgb, var(--rmw-surface-deep) 24%, transparent);
}

#depositModal .card-bank-full > [class*="col-"],
#depositModal .card-bank > [class*="col-"] {
    display: flex;
    min-width: 0;
    justify-content: center;
    flex-direction: column;
}

#depositModal .card-bank-full p,
#depositModal .card-bank p,
#depositModal .ddl-btn-payment p,
#depositModal .dropdown-bank p {
    max-width: 100%;
    margin: 2px 0 !important;
    color: var(--rmw-white) !important;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#depositModal .bank,
#depositModal .cicle-bank {
    display: flex;
    align-items: center;
    justify-content: center;
}

#depositModal .cicle-bank {
    width: 74px;
    height: 74px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 38%, transparent);
    border-radius: 20px;
    background: var(--rmw-white);
}

#depositModal .img-bank,
#depositModal #bank-deposit-img,
#depositModal #bank-payment-img {
    display: block;
    width: 60px !important;
    height: 60px !important;
    max-width: 60px;
    max-height: 60px;
    margin: 0 auto;
    object-fit: contain !important;
    object-position: center;
}

#depositModal #btn-copy-accno,
#depositModal #btn-copy-accno-true,
#depositModal #btn-slip,
#depositModal .btn.-submit,
#depositModal .crypto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 12px 17px !important;
    margin: 10px 0 0 !important;
    color: var(--rmw-surface) !important;
    font-size: .98rem;
    font-weight: 700 !important;
    line-height: 1.4;
    white-space: normal;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--rmw-primary-soft), var(--rmw-primary-soft)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--rmw-surface-deep) 24%, transparent) !important;
}

#depositModal #btn-copy-accno:hover,
#depositModal #btn-copy-accno-true:hover,
#depositModal #btn-slip:hover,
#depositModal .btn.-submit:hover,
#depositModal .crypto-btn:hover {
    color: var(--rmw-surface-deep) !important;
    background: linear-gradient(135deg, var(--rmw-primary-soft), var(--rmw-primary-soft)) !important;
    transform: translateY(-1px);
}

#depositModal .form-control,
#depositModal .select-bank,
#depositModal .crypto-select,
#depositModal .crypto-amt {
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    padding: 11px 14px;
    color: var(--rmw-white) !important;
    font-size: 1rem;
    line-height: 1.4;
    opacity: 1 !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 24%, transparent) !important;
    border-radius: 12px !important;
    background: var(--deposit-panel-strong) !important;
}

#depositModal .form-control::placeholder,
#depositModal .crypto-amt::placeholder {
    color: color-mix(in srgb, var(--rmw-white) 70%, transparent) !important;
}

#depositModal .select-bank:disabled,
#depositModal input:disabled {
    color: var(--rmw-white) !important;
    -webkit-text-fill-color: var(--rmw-white);
    opacity: 1 !important;
}

#depositModal .ddl-btn-payment {
    height: auto;
    text-align: left;
}

#depositModal .ddl-btn-payment .row,
#depositModal .dropdown-bank .row {
    width: 100%;
    margin: 0;
}

#depositModal .ddl-btn-payment [class*="col-"],
#depositModal .dropdown-bank [class*="col-"] {
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
}

#depositModal .ddl-btn-payment .text-white,
#depositModal .dropdown-bank .text-white,
#depositModal .dropdown-bank span {
    color: var(--rmw-white) !important;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#depositModal .dropdown-menu {
    width: 100%;
    padding: 8px 0 0;
    border: 0;
}

#depositModal .dropdown-menu li + li {
    margin-top: 8px;
}

#depositModal .dropdown-item:hover,
#depositModal .dropdown-item:focus {
    color: var(--rmw-white) !important;
    filter: brightness(1.08);
}

#depositModal .stepper-wrapper {
    width: 100%;
    margin: 0 0 20px;
}

#depositModal .stepper-item {
    min-width: 0;
}

#depositModal .step-counter {
    color: var(--rmw-surface) !important;
    background: var(--deposit-accent) !important;
}

#depositModal .step-name {
    padding: 0 4px;
    color: var(--rmw-white) !important;
    font-size: .78rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

#depositModal #payment-content .mt-4,
#depositModal #payment-content .f-1,
#depositModal #payment-content .f-8,
#depositModal #payment-qr-content,
#depositModal #bankPayment,
#depositModal #guildPayment,
#depositModal #payment-amt,
#depositModal #payment-cd {
    color: var(--rmw-white) !important;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

#depositModal #payment-content .mt-4 {
    padding: 14px !important;
    margin: 18px 0 0 !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 13%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--rmw-surface-deep) 30%, transparent);
}

#depositModal #payment-qrcode,
#depositModal .payment-img,
#depositModal .crypto-address-qr,
#depositModal .img-guide-tx {
    display: block;
    width: min(100%, 300px) !important;
    height: auto !important;
    max-height: 300px;
    padding: 8px;
    margin: 14px auto !important;
    object-fit: contain;
    object-position: center;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 22%, transparent);
    border-radius: 16px;
    background: var(--rmw-white);
}

#depositModal .crypto-container {
    width: 100%;
    max-width: 100%;
    color: var(--rmw-white) !important;
}

#depositModal .crypto-header {
    margin: 14px 0 7px;
    color: var(--deposit-accent) !important;
    font-weight: 700;
    line-height: 1.45;
}

#depositModal .crypto-box,
#depositModal .crypto-address-box,
#depositModal .pending-crypto {
    width: 100%;
    max-width: 100%;
    padding: 14px !important;
    color: var(--rmw-white) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 16%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--rmw-surface-deep) 34%, transparent);
}

#depositModal .crypto-address {
    max-width: 100%;
    margin: 0;
    color: var(--rmw-white) !important;
    font-size: .86rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-all;
}

#depositModal .crypto-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

#depositModal .text-dark {
    color: var(--rmw-white) !important;
}

#depositModal p,
#depositModal label,
#depositModal .label,
#depositModal .value {
    max-width: 100%;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    #depositModal .modal-dialog {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px) !important;
        margin: 8px auto !important;
    }

    #depositModal .modal-content {
        max-height: calc(100dvh - 16px) !important;
        border-radius: 20px !important;
    }

    #depositModal .modal-header {
        min-height: 70px;
        padding: 18px 60px 14px !important;
    }

    #depositModal .x-title-modal {
        font-size: 1.28rem !important;
    }

    #depositModal .modal-body {
        padding: 19px 16px calc(22px + env(safe-area-inset-bottom)) !important;
    }

    #depositModal .group-dp-method {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    #depositModal .btn-select-method-dp {
        min-height: 94px;
        padding: 11px 8px !important;
    }

    #depositModal .btn-select-method-dp .-ic-wrapper {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    #depositModal .dp-method,
    #depositModal .-deposit-notice-inner-wrapper:not(.group-dp-method) {
        padding: 15px !important;
    }
}

@media (max-width: 575.98px) {
    #depositModal .modal-dialog {
        width: 100%;
        max-width: 100% !important;
        min-height: 100%;
        margin: auto 0 0 !important;
    }

    #depositModal .modal-content {
        max-height: calc(94dvh - env(safe-area-inset-top)) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 22px 22px 0 0 !important;
    }

    #depositModal .modal-body {
        padding-right: 13px !important;
        padding-left: 13px !important;
    }

    #depositModal .card-bank-full,
    #depositModal .card-bank,
    #depositModal .ddl-btn-payment,
    #depositModal .dropdown-bank {
        min-height: 104px;
        padding: 14px !important;
    }

    #depositModal .cicle-bank {
        width: 64px;
        height: 64px;
        border-radius: 17px;
    }

    #depositModal .img-bank,
    #depositModal #bank-deposit-img,
    #depositModal #bank-payment-img {
        width: 52px !important;
        height: 52px !important;
    }

    #depositModal .card-bank-full p,
    #depositModal .card-bank p {
        font-size: .9rem;
    }
}

/* navbarCategory v22 */
#navbarCategory {
    width: 100%;
    min-width: 0;
    padding: 10px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 12%, transparent);
    border-radius: 18px;
    background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--rmw-accent) 20%, transparent), transparent 38%), linear-gradient(155deg, color-mix(in srgb, var(--rmw-surface-deep) 92%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 95%, transparent));
    box-shadow: 0 14px 32px color-mix(in srgb, var(--rmw-surface-deep) 22%, transparent);
}

#navbarCategory .-menu-parent {
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    gap: 9px;
}

#navbarCategory .-menu-parent > .-list-parent {
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
}

#navbarCategory .-menu-parent > .-list-parent > div {
    width: 100%;
}

#navbarCategory .x-category-button.-category-button-v2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0;
    min-height: 64px;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    color: var(--rmw-white) !important;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 14%, transparent) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--rmw-accent) 82%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 90%, transparent)) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 7%, transparent);
    isolation: isolate;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#navbarCategory .x-category-button.-category-button-v2::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rmw-surface-deep) 20%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 58%, transparent));
}

#navbarCategory .x-category-button.-category-button-v2:hover,
#navbarCategory .x-category-button.-category-button-v2:focus {
    border-color: color-mix(in srgb, var(--rmw-primary) 55%, transparent) !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--rmw-surface-deep) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 12%, transparent);
    outline: 0;
    transform: translateY(-2px);
}

#navbarCategory .x-category-button.-category-button-v2.active,
#navbarCategory .x-category-button.-category-button-v2:not(.collapsed)[data-toggle="collapse"] {
    border-color: color-mix(in srgb, var(--rmw-primary) 82%, transparent) !important;
    background: linear-gradient(145deg, var(--rmw-accent), var(--rmw-surface)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--rmw-surface-deep) 32%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--rmw-primary) 16%, transparent);
}

#navbarCategory .x-category-button.-category-button-v2 .-img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 64px !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
}

#navbarCategory .x-category-button.-category-button-v2 .-hover {
    display: none;
}

#navbarCategory .x-category-button.-category-button-v2:hover .-default,
#navbarCategory .x-category-button.-category-button-v2.active .-default,
#navbarCategory .x-category-button.-category-button-v2:not(.collapsed)[data-toggle="collapse"] .-default {
    display: none;
}

#navbarCategory .x-category-button.-category-button-v2:hover .-hover,
#navbarCategory .x-category-button.-category-button-v2.active .-hover,
#navbarCategory .x-category-button.-category-button-v2:not(.collapsed)[data-toggle="collapse"] .-hover {
    display: block;
}

#navbarCategory .x-category-button.-category-button-v2 .-text-btn-image {
    position: absolute !important;
    z-index: 3;
    top: 50% !important;
    left: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 22px);
    min-width: 0;
    padding: 0 8px;
    margin: 0 !important;
    color: var(--rmw-white) !important;
    font-size: .94rem !important;
    font-weight: 600;
    line-height: 1.35 !important;
    text-align: center;
    text-shadow: 0 2px 7px color-mix(in srgb, var(--rmw-surface-deep) 82%, transparent);
    transform: translate(-50%, -50%) !important;
}

#navbarCategory .-menu-text-wrapper,
#navbarCategory .-text-desktop,
#navbarCategory .-text-mobile {
    display: block;
    width: 100%;
    min-width: 0;
    color: inherit !important;
    line-height: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
}

#navbarCategory .x-category-button.-category-button-v2 .-badge {
    z-index: 4;
    bottom: 6px;
    left: 6px;
    padding: 3px 8px;
    color: var(--rmw-primary-contrast);
    font-weight: 700;
    line-height: 1.3;
    border-radius: 999px;
    background: var(--rmw-primary-strong);
}

#navbarCategory .x-category-button.-category-button-v2.-is-collapse .fas {
    margin-left: 7px;
    color: var(--rmw-primary-strong) !important;
}

#navbarCategory .x-menu-collapse-container {
    width: 100%;
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid var(--rmw-border);
    border-radius: 13px;
    background: var(--rmw-nav-background);
}

@media (min-width: 992px) {
    #navbarCategory .-menu-parent {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 991.98px) {
    #navbarCategory {
        padding: 9px 8px 7px;
        overflow: hidden;
        border-radius: 15px;
    }

    #navbarCategory .-menu-parent {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        justify-content: flex-start;
        padding: 1px 1px 7px !important;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
    }

    #navbarCategory .-menu-parent::-webkit-scrollbar {
        display: none;
    }

    #navbarCategory .-menu-parent > .-list-parent {
        flex: 0 0 122px;
        width: 122px !important;
        min-width: 122px !important;
        scroll-snap-align: start;
    }

    #navbarCategory .x-category-button.-category-button-v2,
    #navbarCategory .x-category-button.-category-button-v2 .-img {
        min-height: 62px;
        height: 62px !important;
    }

    #navbarCategory .x-category-button.-category-button-v2 .-text-btn-image {
        width: calc(100% - 14px);
        padding: 0 4px;
        font-size: .78rem !important;
    }
}

@media (max-width: 380px) {
    #navbarCategory .-menu-parent > .-list-parent {
        flex-basis: 108px;
        width: 108px !important;
        min-width: 108px !important;
    }

    #navbarCategory .x-category-button.-category-button-v2 .-text-btn-image {
        font-size: .72rem !important;
    }
}

/* navbarCategory v23: image-free grid, no horizontal slider */
#navbarCategory {
    padding: 12px;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 11%, transparent);
    border-radius: 18px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--rmw-surface-deep) 72%, transparent), color-mix(in srgb, var(--rmw-surface-deep) 84%, transparent));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--rmw-surface-deep) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 4%, transparent);
}

#navbarCategory .-menu-parent {
    overflow: visible !important;
    scroll-snap-type: none !important;
    scrollbar-width: auto;
}

#navbarCategory .x-category-button.-category-button-v2 {
    min-height: 54px;
    padding: 10px 13px !important;
    overflow: hidden;
    color: color-mix(in srgb, var(--rmw-white) 90%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 12%, transparent) !important;
    border-radius: 13px !important;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--rmw-white) 9%, transparent), transparent 32%),
        linear-gradient(145deg, var(--rmw-surface), var(--rmw-surface-deep)) !important;
    box-shadow: 0 5px 13px color-mix(in srgb, var(--rmw-surface-deep) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 6%, transparent);
}

#navbarCategory .x-category-button.-category-button-v2::before {
    content: "";
    position: relative;
    z-index: 3;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-right: 10px;
}

#navbarCategory .x-category-button.-category-button-v2::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 34%;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent, color-mix(in srgb, var(--rmw-white) 7%, transparent));
    transform: skewX(-16deg) translateX(35%);
}

#navbarCategory .x-category-button.-category-button-v2 .-img,
#navbarCategory .x-category-button.-category-button-v2 .-default,
#navbarCategory .x-category-button.-category-button-v2 .-hover {
    display: none !important;
}

#navbarCategory .x-category-button.-category-button-v2 .-text-btn-image {
    position: relative !important;
    z-index: 3;
    top: auto !important;
    left: auto !important;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0 !important;
    color: inherit !important;
    font-size: .9rem !important;
    font-weight: 600;
    line-height: 1.4 !important;
    text-align: left;
    text-shadow: 0 1px 4px color-mix(in srgb, var(--rmw-surface-deep) 35%, transparent);
    transform: none !important;
}

#navbarCategory .-text-desktop {
    display: block !important;
}

#navbarCategory .-text-mobile {
    display: none !important;
}

#navbarCategory .x-category-button.-category-button-v2:hover,
#navbarCategory .x-category-button.-category-button-v2:focus {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-gold) !important;
    background: var(--rmw-button-hover-background) !important;
    box-shadow: var(--rmw-shadow-soft);
    transform: translateY(-2px);
}

#navbarCategory .x-category-button.-category-button-v2.active,
#navbarCategory .x-category-button.-category-button-v2:not(.collapsed)[data-toggle="collapse"] {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft);
}

#navbarCategory .x-category-button.-category-button-v2.active::before,
#navbarCategory .x-category-button.-category-button-v2:not(.collapsed)[data-toggle="collapse"]::before {
    border-color: var(--rmw-primary-contrast);
    background: var(--rmw-accent-strong);
    box-shadow: 0 0 0 4px var(--rmw-border);
}

#navbarCategory .x-category-button.-category-button-v2.active .-text-btn-image,
#navbarCategory .x-category-button.-category-button-v2:not(.collapsed)[data-toggle="collapse"] .-text-btn-image {
    color: var(--rmw-primary-contrast) !important;
    text-shadow: none;
}

#navbarCategory .x-category-button.-category-button-v2.-is-collapse .fas {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    margin-left: 8px;
    color: currentColor !important;
}

#navbarCategory.-main-popup .x-category-button.-category-button-v2{
    min-height: 80px;
    padding: 5px 2px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--rmw-surface-deep) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 5%, transparent);
    gap: 4px;
}
#navbarCategory.-main-popup  .x-category-button.-category-button-v2::before {
    flex-basis: 50px;
    width: 50px;
    height: 18px;
    margin: 0;
    font-size: 15px;
    border-radius: 6px;
}
@media (min-width: 992px) {
    #navbarCategory .-menu-parent {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    #navbarCategory .-menu-parent > .-list-parent {
        width: 100% !important;
    }
}

@media (max-width: 991.98px) {
    #navbarCategory {
        padding: 10px;
        border-radius: 16px;
    }

    #navbarCategory .-menu-parent {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
        padding: 0 !important;
        overflow: visible !important;
        gap: 8px;
    }

    #navbarCategory .-menu-parent > .-list-parent {
        width: 100% !important;
        min-width: 0 !important;
    }

    #navbarCategory .x-category-button.-category-button-v2 {
        min-height: 58px;
        height: 100% !important;
        padding: 9px 7px !important;
        flex-direction: column;
        gap: 6px;
    }

    #navbarCategory .x-category-button.-category-button-v2::before {
        flex-basis: 8px;
        width: 8px;
        height: 8px;
        margin: 0;
    }

    #navbarCategory .x-category-button.-category-button-v2 .-text-btn-image {
        flex: 0 1 auto;
        width: 100%;
        justify-content: center;
        font-size: .72rem !important;
        line-height: 1.3 !important;
        text-align: center;
    }

    #navbarCategory .-text-desktop {
        display: none !important;
    }

    #navbarCategory .-text-mobile {
        display: block !important;
    }
}

@media (max-width: 575.98px) {
    #navbarCategory .-menu-parent {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    #navbarCategory .x-category-button.-category-button-v2 {
        min-height: 60px;
    }
}

@media (max-width: 360px) {
    #navbarCategory {
        padding: 8px;
    }

    #navbarCategory .-menu-parent {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #navbarCategory .x-category-button.-category-button-v2 .-text-btn-image {
        font-size: .7rem !important;
    }
}

/* Header -anon v24: balanced spacing for anonymous and logged content */
.x-header.js-header-selector.-anon {
    min-height: 80px !important;
    height: auto !important;
    padding: 8px 20px !important;
    border-bottom: 1px solid var(--rmw-border) !important;
    background: var(--rmw-header-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

.x-header.js-header-selector.-anon > .-inner-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1540px;
    min-width: 0;
    min-height: 64px;
    padding: 0 8px !important;
    margin: 0 auto;
    gap: 18px !important;
}

.x-header.js-header-selector.-anon #headerBrand {
    display: flex;
    flex: 0 0 150px;
    align-items: center;
    justify-content: center;
    width: 150px;
    min-width: 0;
    padding: 0 16px 0 0 !important;
    margin: 0 !important;
    border-right: 1px solid var(--rmw-border);
}

.x-header.js-header-selector.-anon #headerBrand .navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
}

.x-header.js-header-selector.-anon #headerBrand .navbar-brand .-logo {
    width: auto !important;
    max-width: 134px !important;
    height: auto !important;
    max-height: 58px !important;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

.x-header.js-header-selector.-anon .x-menu {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-width: 0;
    margin: 0;
}

.x-header.js-header-selector.-anon .rmw-reference-menu {
    display: grid;
    grid-template-columns: repeat(6, minmax(72px, 1fr));
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding: 3px;
    margin: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 10%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--rmw-surface-deep) 20%, transparent);
    gap: 4px;
}

.x-header.js-header-selector.-anon .rmw-reference-menu__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-width: 0 !important;
    min-height: 58px;
    padding: 7px 8px !important;
    margin: 0 !important;
    color: color-mix(in srgb, var(--rmw-white) 78%, transparent) !important;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-right: 0 !important;
    border-radius: 11px !important;
    background: transparent;
    gap: 5px;
}

.x-header.js-header-selector.-anon .rmw-reference-menu__item:hover,
.x-header.js-header-selector.-anon .rmw-reference-menu__item:focus,
.x-header.js-header-selector.-anon .rmw-reference-menu__item.is-active {
    color: var(--rmw-white) !important;
    border-color: color-mix(in srgb, var(--rmw-primary) 32%, transparent) !important;
    background: color-mix(in srgb, var(--rmw-accent) 62%, transparent) !important;
    transform: none;
}

.x-header.js-header-selector.-anon .rmw-reference-menu__item i {
    width: 22px;
    height: 22px;
    margin: 0;
    color: currentColor !important;
    font-size: 1rem;
    line-height: 22px;
}

.x-header.js-header-selector.-anon .rmw-reference-menu__item span {
    display: block;
    width: 100%;
    min-width: 0;
    color: currentColor !important;
    font-size: .69rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.x-header.js-header-selector.-anon #headerContent {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-width: 0;
    padding: 0 0 0 2px !important;
    margin: 0;
}

.x-header.js-header-selector.-anon #headerContent > .d-flex,
.x-header.js-header-selector.-anon #headerContent > .x-logged,
.x-header.js-header-selector.-anon #headerContent .x-logged {
    align-items: center;
    min-width: 0;
    margin: 0;
    gap: 9px;
}

.x-header.js-header-selector.-anon #headerContent .custom-dropdown-container,
.x-header.js-header-selector.-anon #headerContent .lang-container,
.x-header.js-header-selector.-anon #headerContent .-transaction-outer-container,
.x-header.js-header-selector.-anon #headerContent .-profile-outer-container {
    flex: 0 0 auto;
    margin: 0 !important;
}

.x-header.js-header-selector.-anon .x-header-btn-support.-in-anon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 44px;
    padding: 5px 9px;
    gap:5px;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 16%, transparent) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 42%, transparent) !important;
}

.x-header.js-header-selector.-anon .x-header-btn-support.-in-anon .-ic {
    display: block;
    width: auto !important;
    max-width: 108px;
    height: auto !important;
    max-height: 34px;
    margin: 0;
    object-fit: contain;
}

.x-header.js-header-selector.-anon .lang-container {
    width: 44px !important;
    /*height: 44px;*/
}

.x-header.js-header-selector.-anon .lang-btn-authen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 8px !important;
    border: 1px solid color-mix(in srgb, var(--rmw-white) 18%, transparent) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 42%, transparent) !important;
}

.x-header.js-header-selector.-anon .lang-icon {
    display: block;
    width: 25px !important;
    height: 25px !important;
    margin: 0;
    object-fit: cover;
    border-radius: 50%;
}

.x-header.js-header-selector.-anon .-btn-header-register,
.x-header.js-header-selector.-anon .-btn-header-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 92px !important;
    min-height: 44px;
    padding: 9px 15px !important;
    margin: 0 !important;
    font-size: .88rem !important;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    border-radius: 12px !important;
}

.x-header.js-header-selector.-anon .-btn-header-register {
    color: var(--rmw-white) !important;
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 55%, transparent) !important;
    background: color-mix(in srgb, var(--rmw-surface-deep) 52%, transparent) !important;
}

.x-header.js-header-selector.-anon .-btn-header-login {
    color: var(--rmw-surface-deep) !important;
    border: 1px solid var(--rmw-primary) !important;
    background: linear-gradient(135deg, var(--rmw-primary), var(--rmw-primary)) !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--rmw-surface-deep) 20%, transparent);
}

.x-header.js-header-selector.-anon .-transaction-outer-container {
    display: flex;
    align-items: center;
    gap: 7px;
}

.x-header.js-header-selector.-anon .-transaction-outer-container .btn {
    min-height: 42px;
    padding-right: 13px !important;
    padding-left: 13px !important;
    margin: 0 !important;
    border-radius: 11px !important;
}

.x-header.js-header-selector.-anon .-profile-outer-container {
    padding-left: 10px;
    border-left: 1px solid color-mix(in srgb, var(--rmw-white) 12%, transparent);
}

@media (max-width: 1199.98px) {
    .x-header.js-header-selector.-anon > .-inner-container {
        gap: 12px !important;
    }

    .x-header.js-header-selector.-anon #headerBrand {
        flex-basis: 126px;
        width: 126px;
        padding-right: 10px !important;
    }

    .x-header.js-header-selector.-anon #headerBrand .navbar-brand .-logo {
        max-width: 112px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item span {
        font-size: .63rem;
    }
}

@media (max-width: 991.98px) {
    .x-header.js-header-selector.-anon {
        min-height: 62px !important;
        padding: 7px 12px !important;
    }

    .x-header.js-header-selector.-anon > .-inner-container {
        min-height: 48px;
        padding: 0 !important;
        gap: 10px !important;
    }

    .x-header.js-header-selector.-anon #headerBrand {
        flex: 0 1 124px;
        width: auto;
        max-width: 124px;
        padding: 0 !important;
        border-right: 0;
    }

    .x-header.js-header-selector.-anon #headerBrand .navbar-brand .-logo {
        max-width: 112px !important;
        max-height: 44px !important;
    }

    .x-header.js-header-selector.-anon .x-menu {
        display: none !important;
    }

    .x-header.js-header-selector.-anon #headerContent {
        flex: 1 1 auto;
        justify-content: flex-end;
        padding: 0 !important;
    }

    .x-header.js-header-selector.-anon #headerContent > .d-flex,
    .x-header.js-header-selector.-anon #headerContent > .x-logged,
    .x-header.js-header-selector.-anon #headerContent .x-logged {
        justify-content: flex-end;
        gap: 7px;
    }

    .x-header.js-header-selector.-anon .-profile-outer-container {
        padding-left: 7px;
    }
}

@media (max-width: 575.98px) {
    .x-header.js-header-selector.-anon {
        min-height: 60px !important;
        padding: 6px 9px !important;
    }

    .x-header.js-header-selector.-anon > .-inner-container {
        gap: 7px !important;
    }

    .x-header.js-header-selector.-anon #headerBrand {
        flex: 1 1 auto;
        max-width: 102px;
        justify-content: flex-start;
    }

    .x-header.js-header-selector.-anon #headerBrand .navbar-brand .-logo {
        max-width: 96px !important;
        max-height: 40px !important;
    }

    .x-header.js-header-selector.-anon #headerContent > .d-flex {
        gap: 6px;
    }

    .x-header.js-header-selector.-anon #headerContent .custom-dropdown-container {
        display: none !important;
    }

    .x-header.js-header-selector.-anon .lang-container,
    .x-header.js-header-selector.-anon .lang-btn-authen {
        width: 38px !important;
        height: 38px !important;
    }

    .x-header.js-header-selector.-anon .lang-btn-authen {
        padding: 7px !important;
        border-radius: 10px !important;
    }

    .x-header.js-header-selector.-anon .lang-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .x-header.js-header-selector.-anon .-btn-header-register,
    .x-header.js-header-selector.-anon .-btn-header-login {
        min-width: 66px !important;
        min-height: 38px;
        padding: 7px 8px !important;
        font-size: .69rem !important;
        border-radius: 10px !important;
    }
}

@media (max-width: 360px) {
    .x-header.js-header-selector.-anon {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .x-header.js-header-selector.-anon #headerBrand {
        max-width: 82px;
    }

    .x-header.js-header-selector.-anon #headerBrand .navbar-brand .-logo {
        max-width: 78px !important;
    }

    .x-header.js-header-selector.-anon .lang-container,
    .x-header.js-header-selector.-anon .lang-btn-authen {
        width: 34px !important;
        height: 36px !important;
    }

    .x-header.js-header-selector.-anon .-btn-header-register,
    .x-header.js-header-selector.-anon .-btn-header-login {
        min-width: 60px !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
        font-size: .64rem !important;
    }
}

/* Header -anon v25: hard layout boundaries and overlap guards */
.x-header.js-header-selector.-anon,
.x-header.js-header-selector.-anon *,
.x-header.js-header-selector.-anon *::before,
.x-header.js-header-selector.-anon *::after {
    box-sizing: border-box;
}

.x-header.js-header-selector.-anon {
    position: sticky;
    top: 0;
    z-index: 1050;
    overflow: visible !important;
    isolation: isolate;
}

.x-header.js-header-selector.-anon > .-inner-container {
    position: relative;
    flex-wrap: nowrap !important;
    overflow: visible;
}

.x-header.js-header-selector.-anon > .-inner-container > * {
    position: relative;
    min-width: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none;
}

.x-header.js-header-selector.-anon .rmw-reference-menu {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.x-header.js-header-selector.-anon #headerContent,
.x-header.js-header-selector.-anon #headerContent > .d-flex,
.x-header.js-header-selector.-anon #headerContent > .x-logged,
.x-header.js-header-selector.-anon #headerContent .x-logged {
    flex-wrap: nowrap !important;
    overflow: visible;
}

.x-header.js-header-selector.-anon #headerContent > .d-flex {
    width: auto;
    max-width: 100%;
}

.x-header.js-header-selector.-anon .custom-dropdown-container,
.x-header.js-header-selector.-anon .lang-container {
    position: relative;
    z-index: 3;
}

.x-header.js-header-selector.-anon .custom-dropdown-menu,
.x-header.js-header-selector.-anon .lang-menu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1060 !important;
    max-width: min(320px, calc(100vw - 18px));
    max-height: calc(100vh - 82px);
    overflow-x: hidden;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .x-header.js-header-selector.-anon > .-inner-container > div:first-child {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .x-header.js-header-selector.-anon .x-header-btn-support.-in-anon .-ic {
        max-width: 94px;
    }

    .x-header.js-header-selector.-anon .-btn-header-register,
    .x-header.js-header-selector.-anon .-btn-header-login {
        min-width: 86px !important;
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

@media (max-width: 991.98px) {
    .x-header.js-header-selector.-anon > .-inner-container > div:first-child {
        display: flex !important;
        flex: 0 0 25px;
        align-items: center;
        justify-content: flex-start;
        width: 25px;
        max-width: 25px;
        z-index: 4;
    }

    .x-header.js-header-selector.-anon #headerBrand {
        flex-shrink: 1;
        z-index: 2;
    }

    .x-header.js-header-selector.-anon #headerContent {
        flex: 1 1 0;
        width: auto;
        max-width: calc(100% - 42px);
        z-index: 3;
    }

    .x-header.js-header-selector.-anon #headerContent > .d-flex,
    .x-header.js-header-selector.-anon #headerContent > .x-logged,
    .x-header.js-header-selector.-anon #headerContent .x-logged {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .x-header.js-header-selector.-anon > .-inner-container {
        gap: 5px !important;
    }

    .x-header.js-header-selector.-anon #headerContent > .d-flex {
        gap: 4px;
    }
}

/* rmw-reference-menu v36 cascade lock: keep states inside each grid cell */
@media (min-width: 992px) {
    .x-header.js-header-selector.-anon .x-menu {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu {
        width: max-content !important;
        max-width: 100% !important;
        grid-template-columns: none !important;
        grid-auto-columns: 90px !important;
        grid-auto-flow: column !important;
        height: 64px !important;
        padding: 3px !important;
        overflow: hidden !important;
        isolation: isolate;
        gap: 6px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item,
    .x-header.js-header-selector.-anon .rmw-reference-menu__item.-favorite {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        flex: 0 0 90px !important;
        flex-direction: column !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 5px 6px !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: color-mix(in srgb, var(--rmw-white) 78%, transparent) !important;
        border: 1px solid transparent !important;
        border-radius: 9px !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        gap: 3px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item:hover,
    .x-header.js-header-selector.-anon .rmw-reference-menu__item:focus,
    .x-header.js-header-selector.-anon .rmw-reference-menu__item.is-active {
        z-index: 2;
        color: var(--rmw-white) !important;
        border-color: color-mix(in srgb, var(--rmw-primary) 30%, transparent) !important;
        background: linear-gradient(180deg, color-mix(in srgb, var(--rmw-accent) 82%, transparent), color-mix(in srgb, var(--rmw-accent) 78%, transparent)) !important;
        box-shadow: inset 0 -3px 0 var(--rmw-primary), inset 0 0 0 1px color-mix(in srgb, var(--rmw-white) 4%, transparent) !important;
        transform: none !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item:focus-visible {
        outline: 0;
        box-shadow: inset 0 -3px 0 var(--rmw-primary), inset 0 0 0 2px color-mix(in srgb, var(--rmw-primary) 72%, transparent) !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .x-header.js-header-selector.-anon .x-menu {
        flex-basis: auto !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu {
        grid-auto-columns: 76px !important;
    }

    .x-header.js-header-selector.-anon .rmw-reference-menu__item,
    .x-header.js-header-selector.-anon .rmw-reference-menu__item.-favorite {
        flex-basis: 76px !important;
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
    }
}

/* navbarCategory desktop visibility and compact mobile layout v29 */
@media (min-width: 992px) {
    #navbarCategory {
        display: none !important;
    }

    .x-index-content-main-container.-logged > .x-category-total-game.-v2:has(#navbarCategory) {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .x-index-content-main-container.-logged > .x-category-total-game.-v2:has(#navbarCategory) {
        display: block !important;
        padding: 0 8px !important;
        margin: 5px 0 10px !important;
    }

    .x-index-content-main-container.-logged > .x-category-total-game.-v2 #navbarCategory {
        display: block !important;
    }
}

@media (max-width: 575.98px) {
    #navbarCategory {
        padding: 7px !important;
        border-radius: 13px;
        box-shadow: 0 8px 20px color-mix(in srgb, var(--rmw-surface-deep) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 4%, transparent);
    }

    #navbarCategory .-menu-parent {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: stretch;
        overflow: hidden !important;
        gap: 4px !important;
    }

    #navbarCategory .-menu-parent > .-list-parent {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    #navbarCategory .x-category-button.-category-button-v2 {
        min-height: 48px;
        padding: 2px 2px !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 10px color-mix(in srgb, var(--rmw-surface-deep) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 5%, transparent);
        gap: 4px;
    }

    #navbarCategory .x-category-button.-category-button-v2::before {
        flex-basis: 6px;
        width: 6px;
        height: 6px;
        border-width: 1px;
    }

    #navbarCategory .x-category-button.-category-button-v2 .-text-btn-image {
        font-size: .59rem !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #navbarCategory .-text-mobile,
    #navbarCategory .-menu-text-wrapper {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 359.98px) {
    #navbarCategory {
        padding: 6px !important;
    }

    #navbarCategory .-menu-parent {
        display: flex !important;
        flex-flow: row nowrap !important;
        gap: 3px !important;
    }

    #navbarCategory .x-category-button.-category-button-v2 {
        min-height: 44px;
        padding: 4px 1px !important;
    }

    #navbarCategory .x-category-button.-category-button-v2 .-text-btn-image {
        font-size: .53rem !important;
    }
}

/* Shared mobile content scroll offset fix v31 */
@media (max-width: 991.98px) {
    #main__content.-sticky {
        padding-top: 0 !important;
    }

    .x-category-index .-nav-menu-container.-sticky {
        top: 62px !important;
    }
}

@media (max-width: 575.98px) {
    .x-category-index .-nav-menu-container.-sticky {
        top: 60px !important;
    }
}

/* navbarCategory game-type icons v30 */
#navbarCategory .x-category-button.-category-button-v2::before {
    content: "\f11b";
    display: inline-flex;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-right: 9px;
    align-items: center;
    justify-content: center;
    color: var(--rmw-primary);
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    margin: auto;
}

#navbarCategory .x-category-button[href="./Favorite"]::before {
    content: "\f004";
}

#navbarCategory .x-category-button[href="./Hothit"]::before {
    content: "\f06d";
}

#navbarCategory .x-category-button[href="./Casino"]::before {
    content: "\f522";
}

#navbarCategory .x-category-button[href="./Slot"]::before {
    content: "\f11b";
}

#navbarCategory .x-category-button[href="./Sport"]::before {
    content: "\f1e3";
}

#navbarCategory .x-category-button[href="./Cardgame"]::before {
    content: "\f24d";
}

#navbarCategory .x-category-button[href="./Lotto"]::before {
    content: "\f3ff";
}

#navbarCategory .x-category-button.-category-button-v2.active::before,
#navbarCategory .x-category-button.-category-button-v2:not(.collapsed)[data-toggle="collapse"]::before {
    color: var(--rmw-text-strong);
    border-color: var(--rmw-border-gold);
    background: var(--rmw-accent-strong);
    box-shadow: var(--rmw-shadow-soft);
}

@media (max-width: 575.98px) {
    #navbarCategory .x-category-button.-category-button-v2::before {
        flex-basis: 18px;
        width: 18px;
        height: 18px;
        margin: 0;
        font-size: 17px;
        border-radius: 6px;
    }
}

@media (max-width: 359.98px) {
    #navbarCategory .x-category-button.-category-button-v2::before {
        flex-basis: 16px;
        width: 16px;
        height: 16px;
        font-size: 9px;
        border-radius: 5px;
    }
}

/* Mobile quick transaction buttons v28 */
@media (max-width: 767.98px) {
    .x-quick-transaction-buttons.js-quick-transaction-buttons {
        width: 100%;
        max-width: 560px;
        padding: 4px 4px 8px !important;
        margin: 0 auto 16px !important;
        gap: 9px !important;
    }

    .x-quick-transaction-buttons.js-quick-transaction-buttons > .-btn {
        min-width: 0;
        min-height: 84px;
        padding: 10px 8px !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: var(--rmw-white) !important;
        border: 1px solid color-mix(in srgb, var(--rmw-primary) 28%, transparent) !important;
        border-radius: 14px !important;
        background: var(--rmw-button-background) !important;
        box-shadow: 0 9px 20px color-mix(in srgb, var(--rmw-surface-deep) 26%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 16%, transparent) !important;
        gap: 6px;
    }

    .x-quick-transaction-buttons.js-quick-transaction-buttons > .-btn:active {
        border-color: color-mix(in srgb, var(--rmw-primary) 62%, transparent) !important;
        background: linear-gradient(155deg, var(--rmw-accent) 0%, var(--rmw-accent) 56%, var(--rmw-surface) 100%) !important;
        transform: translateY(1px);
    }

    .x-quick-transaction-buttons.js-quick-transaction-buttons .-ic-wrapper {
        display: flex;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0 !important;
        align-items: center;
        justify-content: center;
        border: 1px solid color-mix(in srgb, var(--rmw-primary) 28%, transparent);
        border-radius: 13px;
        background: color-mix(in srgb, var(--rmw-surface-deep) 28%, transparent);
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rmw-white) 10%, transparent);
    }

    .x-quick-transaction-buttons.js-quick-transaction-buttons .-ic {
        width: 34px !important;
        height: 34px !important;
        object-fit: contain;
        filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--rmw-surface-deep) 28%, transparent));
    }

    .x-quick-transaction-buttons.js-quick-transaction-buttons .-btn-inner-content {
        width: 100%;
        margin: 0 !important;
        align-items: center;
        text-align: center;
    }

    .x-quick-transaction-buttons.js-quick-transaction-buttons .-btn-inner-content-title {
        width: 100%;
        color: var(--rmw-white) !important;
        font-size: .88rem !important;
        font-weight: 600;
        line-height: 1.25;
        overflow-wrap: anywhere;
        text-shadow: 0 1px 4px color-mix(in srgb, var(--rmw-surface-deep) 35%, transparent);
    }
}

@media (max-width: 359.98px) {
    .x-quick-transaction-buttons.js-quick-transaction-buttons {
        gap: 6px !important;
    }

    .x-quick-transaction-buttons.js-quick-transaction-buttons > .-btn {
        min-height: 80px;
        padding: 8px 5px !important;
    }

    .x-quick-transaction-buttons.js-quick-transaction-buttons .-ic-wrapper {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .x-quick-transaction-buttons.js-quick-transaction-buttons .-ic {
        width: 31px !important;
        height: 31px !important;
    }

    .x-quick-transaction-buttons.js-quick-transaction-buttons .-btn-inner-content-title {
        font-size: .8rem !important;
    }
}

/* Lobby compact lottery and complete provider index v27 */
.rmw-government-lottery {
    padding: 8px 20px 14px;
}

.rmw-government-lottery__shell {
    width: min(100%, 880px);
    padding: 14px;
    border-radius: 17px;
}

.rmw-government-lottery__header {
    padding-bottom: 10px;
    gap: 12px;
}

.rmw-government-lottery__heading {
    gap: 9px;
}

.rmw-government-lottery__seal {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1rem;
}

.rmw-government-lottery__title {
    font-size: clamp(.98rem, 1.7vw, 1.25rem);
}

.rmw-government-lottery__draw {
    padding: 6px 10px;
}

.rmw-government-lottery__results {
    padding-top: 10px;
    gap: 7px;
}

.rmw-lottery-prize {
    min-height: 82px;
    padding: 9px;
    border-radius: 13px;
    gap: 6px;
}

.rmw-lottery-prize--first,
.rmw-lottery-prize--adjacent {
    min-height: 104px;
}

.rmw-lottery-prize__label {
    min-height: 2.35em;
    font-size: .7rem;
}

.rmw-lottery-number {
    padding: 5px 8px;
    font-size: clamp(1.1rem, 2.3vw, 1.5rem);
}

.rmw-lottery-number--hero {
    padding: 7px 14px;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
}

.rmw-lottery-number--two {
    min-width: 72px;
    font-size: clamp(1.55rem, 3.3vw, 2.05rem);
}

.rmw-government-lottery__notice {
    margin-top: 9px;
    font-size: .66rem;
}

.x-footer.-ezl.-logged .rmw-footer-provider-tags {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
}

.x-footer.-ezl.-logged .rmw-footer-provider-tags__group {
    flex: 0 0 100%;
    margin: 5px 0 1px;
    color: var(--rmw-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.x-footer.-ezl.-logged .rmw-footer-provider-tags .-btn-tag {
    display: inline-flex;
    min-height: 30px;
    margin: 0 !important;
    padding: 5px 11px !important;
    align-items: center;
    color: color-mix(in srgb, var(--rmw-white) 90%, transparent) !important;
    font-size: .72rem !important;
    line-height: 1.2;
    border: 1px solid color-mix(in srgb, var(--rmw-primary) 20%, transparent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--rmw-white) 5.5%, transparent) !important;
}

@media (max-width: 767.98px) {
    .rmw-government-lottery {
        padding: 7px 9px 12px;
    }

    .rmw-government-lottery__shell {
        padding: 11px 9px;
        border-radius: 14px;
    }

    .rmw-government-lottery__header {
        gap: 7px;
    }

    .rmw-government-lottery__seal {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .rmw-government-lottery__draw {
        padding: 5px 8px;
    }

    .rmw-government-lottery__results {
        gap: 6px;
    }

    .rmw-lottery-prize,
    .rmw-lottery-prize--first,
    .rmw-lottery-prize--adjacent {
        min-height: 0;
        padding: 8px 6px;
        border-radius: 11px;
        gap: 5px;
    }

    .rmw-lottery-prize__label {
        min-height: 2.25em;
        font-size: .64rem;
    }

    .rmw-lottery-number {
        padding: 4px 6px;
        font-size: clamp(1rem, 4.8vw, 1.3rem);
    }

    .rmw-lottery-number--hero {
        padding: 6px 10px;
        font-size: clamp(1.55rem, 7vw, 1.95rem);
    }

    .rmw-lottery-number--two {
        min-width: 62px;
        font-size: clamp(1.4rem, 6.3vw, 1.75rem);
    }

    .x-footer.-ezl.-logged .rmw-footer-provider-tags {
        gap: 6px;
    }

    .x-footer.-ezl.-logged .rmw-footer-provider-tags .-btn-tag {
        min-height: 27px;
        padding: 4px 9px !important;
        font-size: .66rem !important;
    }
}

/* One-tap game/provider cards: keep the existing destination, remove the second play action */
.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay {
    z-index: 3 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    transition: none !important;
}

.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay .-overlay-inner,
.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay .-overlay-inner .-wrapper-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    display: block !important;
}

.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay .-btn.-btn-play {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    cursor: pointer;
}

.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay .-btn.-btn-play:hover,
.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay .-btn.-btn-play:active {
    color: transparent !important;
    background: transparent !important;
}

.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay .-btn.-btn-play .fas,
.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay .-btn.-btn-play .-text-btn,
.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay .-btn.-btn-play::before,
.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay .-btn.-btn-play::after {
    display: none !important;
}

.x-game-list-item-macro-in-share:not(.-cannot-entry) .-inner-wrapper .-overlay .-btn.-btn-play:focus-visible {
    outline: 3px solid var(--rmw-primary) !important;
    outline-offset: -3px;
}

/* Theme cascade lock: this is intentionally placed after all component styling. */
html body,
html body #main__content {
    color: var(--rmw-text) !important;
    background-color: var(--rmw-bg) !important;
}

html body::before {
    background: var(--rmw-page-background) !important;
}

html body .x-header.js-header-selector,
html body .x-header.js-header-selector.-sticky,
html body .x-header .navbar,
html body .rmw-header-shell {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-header-background) !important;
}

html body .rmw-left-menu,
html body .rmw-reference-menu,
html body .navbarCategory,
html body .fix_footer2.show_m,
html body .x-footer.-ezl.-logged {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-nav-background) !important;
}

html body .rmw-left-menu__item,
html body .rmw-reference-menu a,
html body .navbarCategory a,
html body .navbarCategory button,
html body .navbarCategory .nav-link,
html body .fix_footer2.show_m a {
    color: var(--rmw-muted) !important;
}

html body .rmw-left-menu__item:hover,
html body .rmw-reference-menu a:hover,
html body .navbarCategory a:hover,
html body .navbarCategory button:hover,
html body .navbarCategory .nav-link:hover,
html body .fix_footer2.show_m a:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

html body .rmw-left-menu__item.is-active,
html body .rmw-reference-menu .is-active,
html body .rmw-reference-menu .active,
html body .navbarCategory .is-active,
html body .navbarCategory .active,
html body .fix_footer2.show_m .is-active,
html body .fix_footer2.show_m .active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

html body .x-quick-transaction-buttons .btn,
html body .x-quick-transaction-buttons a,
html body .x-quick-transaction-buttons button {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-button-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .rmw-announcer,
html body .x-title-with-tag-header,
html body .rmw-lottery-board,
html body .rmw-lottery-card,
html body .rmw-provider-section,
html body .rmw-section-panel,
html body .x-ranking-wrapper,
html body .x-ranking-list,
html body .rmw-promotion-card {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-panel-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body #accountModal .modal-content,
html body #depositModal .modal-content,
html body #withdrawModal .modal-content,
html body #loginModal .modal-content,
html body #registerModal .modal-content,
html body #historyModal .modal-content,
html body #transactionModal .modal-content {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-modal-background) !important;
    box-shadow: var(--rmw-shadow) !important;
}

html body .modal .modal-content h1,
html body .modal .modal-content h2,
html body .modal .modal-content h3,
html body .modal .modal-content h4,
html body .modal .modal-content h5,
html body .modal .modal-content h6,
html body .modal .modal-content label,
html body .modal .modal-title {
    color: var(--rmw-text-strong) !important;
}

html body .modal .form-control,
html body .modal input,
html body .modal select,
html body .modal textarea,
html body .select2-container--default .select2-selection--single,
html body .select2-dropdown {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-input-background) !important;
}

html body .modal .form-control::placeholder,
html body .modal input::placeholder,
html body .modal textarea::placeholder {
    color: var(--rmw-subtle) !important;
    opacity: 1;
}

/* depositModal v19 final color and bank-logo contrast lock */
#depositModal .btn-select-method-dp.active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

#depositModal .btn-select-method-dp.active .-btn-inner-content-title {
    color: var(--rmw-primary-contrast) !important;
    text-shadow: none;
}

#depositModal .btn-select-method-dp .-ic-wrapper,
#depositModal .btn-select-method-dp.active .-ic-wrapper {
    border: 1px solid var(--rmw-border-gold) !important;
    background: var(--rmw-surface-deep) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

#depositModal .btn-select-method-dp .-ic {
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--rmw-white) 32%, transparent));
}

#depositModal .cicle-bank {
    border: 1px solid var(--rmw-border-gold) !important;
    background: var(--rmw-surface-deep) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

#depositModal .img-bank,
#depositModal #bank-deposit-img,
#depositModal #bank-payment-img {
    padding: 3px;
    border-radius: 12px;
    background: transparent !important;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--rmw-white) 85%, transparent)) drop-shadow(0 3px 4px color-mix(in srgb, var(--rmw-bg-deep) 38%, transparent));
}

#depositModal #btn-copy-accno,
#depositModal #btn-copy-accno-true,
#depositModal #btn-slip,
#depositModal .btn.-submit,
#depositModal .crypto-btn {
    color: var(--rmw-text-strong) !important;
    border: 1px solid var(--rmw-border-gold) !important;
    background: var(--rmw-button-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
    text-shadow: none;
}

#depositModal #btn-copy-accno:hover,
#depositModal #btn-copy-accno-true:hover,
#depositModal #btn-slip:hover,
#depositModal .btn.-submit:hover,
#depositModal .crypto-btn:hover {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-button-hover-background) !important;
}

#depositModal .step-counter {
    color: var(--rmw-primary-contrast) !important;
    border: 1px solid var(--rmw-primary-strong);
    background: var(--rmw-active-background) !important;
}

/* Theme isolation v20 final cascade: must remain at the end of main.css. */
html body .rmw-promotion-page,
html body .x-promotion-index.rmw-promotion-page {
    color: var(--rmw-text) !important;
    background: var(--rmw-page-background) !important;
}

html body .rmw-promotion-page .x-card.-multi-card {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-card-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .rmw-promotion-page .x-card.-multi-card:hover,
html body .rmw-promotion-page .x-card.-multi-card:focus-within {
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-surface-hover) !important;
    box-shadow: var(--rmw-shadow) !important;
}

html body .rmw-promotion-page .x-card.-multi-card .-img-container,
html body .rmw-promotion-modal .x-card.-single-card .-img-container {
    background: var(--rmw-surface-deep) !important;
}

html body .rmw-promotion-page .x-card.-multi-card .card-body,
html body .rmw-promotion-page .x-card.-multi-card .card-footer,
html body .rmw-promotion-page .x-card.-multi-card .-title-container {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
}

html body .rmw-promotion-page .x-card.-multi-card .-title,
html body .rmw-promotion-page .-promotion-card-link,
html body .rmw-promotion-page .-promotion-card-link > a {
    color: var(--rmw-text-strong) !important;
}

html body .rmw-promotion-modal .modal-content,
html body .rmw-promotion-modal .x-card.-single-card,
html body #accountModal .-modal-main-account > .modal-content {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-modal-background) !important;
    box-shadow: var(--rmw-shadow) !important;
}

html body .rmw-promotion-modal .x-card.-single-card .card-body,
html body .rmw-promotion-modal .x-card.-single-card .card-footer,
html body .rmw-promotion-modal .-modal-header,
html body .rmw-promotion-modal .-modal-body {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
}

html body .rmw-promotion-modal .close,
html body #accountModal .-modal-main-account > .modal-content > .close {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-surface-strong) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .rmw-promotion-modal .close:hover,
html body .rmw-promotion-modal .close:focus,
html body #accountModal .-modal-main-account > .modal-content > .close:hover,
html body #accountModal .-modal-main-account > .modal-content > .close:focus {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

html body .rmw-promotion-modal .-title,
html body .rmw-promotion-modal .-title-container,
html body .rmw-promotion-modal .-promotion-content,
html body .rmw-promotion-modal .-promotion-content * {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
}

html body .rmw-promotion-modal .card-footer .-btn {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body #accountModal .x-modal-account-menu,
html body #accountModal .x-modal-account-menu .navbar-nav {
    color: var(--rmw-text) !important;
    background: transparent !important;
}

html body #accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link,
html body #accountModal .x-invitation-menu-wrapper .-btn-menu {
    color: var(--rmw-muted) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-nav-background) !important;
    box-shadow: none !important;
}

html body #accountModal .x-modal-account-menu .nav-link .-text-menu,
html body #accountModal .x-modal-account-menu .nav-link i,
html body #accountModal .x-modal-account-menu .nav-link svg {
    color: var(--rmw-muted) !important;
}

html body #accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link:hover,
html body #accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link:focus,
html body #accountModal .x-modal-account-menu .navbar-nav .nav-item .nav-link.active,
html body #accountModal .x-invitation-menu-wrapper .-btn-menu:hover,
html body #accountModal .x-invitation-menu-wrapper .-btn-menu:focus,
html body #accountModal .x-invitation-menu-wrapper .-btn-menu.-active,
html body #accountModal .x-invitation-menu-wrapper .-btn-menu.active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body #accountModal .x-modal-account-menu .nav-link:hover .-text-menu,
html body #accountModal .x-modal-account-menu .nav-link:focus .-text-menu,
html body #accountModal .x-modal-account-menu .nav-link.active .-text-menu,
html body #accountModal .x-modal-account-menu .nav-link:hover i,
html body #accountModal .x-modal-account-menu .nav-link.active i {
    color: var(--rmw-primary-contrast) !important;
}

html body #accountModal .-layout-account,
html body #accountModal .desktop-modal-content,
html body #accountModal .desktop-modal-content > div,
html body #accountModal .desktop-modal-content > div[style*="display: none"],
html body #accountModal .desktop-modal-content > div.d-none {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-panel-background) !important;
}

html body #accountModal .x-title-modal,
html body #accountModal .modal-title {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border) !important;
}

html body #accountModal .x-profile-group-trace-body .-profile-info-wrapper,
html body #accountModal .x-profile-group-trace-body .-bank-info-wrapper,
html body #accountModal .-change-password-container,
html body #accountModal .-coupon-member-detail,
html body #accountModal .cashback-content > .x-invitation-overview,
html body #accountModal .x-invitation-overview,
html body #accountModal .remark-cashback,
html body #accountModal .card-remark-cb,
html body #accountModal .container-coupon,
html body #accountModal .-account-promotion-container,
html body #accountModal .-no-result-container {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-card-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body #accountModal .x-profile-info.-group-trace-type .-profile-image-wrapper,
html body #accountModal .x-profile-bank-info .-bank-detail .-img {
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-surface-deep) !important;
}

html body #accountModal .x-profile-info .-username-wrapper .-label,
html body #accountModal .x-profile-bank-info .-heading-title,
html body #accountModal .x-profile-bank-info .-bank-name .-label,
html body #accountModal .dataTables_info,
html body #accountModal .dataTables_length,
html body #accountModal .dataTables_filter {
    color: var(--rmw-muted) !important;
}

html body #accountModal .x-profile-info .-username-wrapper .-label-highlight,
html body #accountModal .btn-tranparent,
html body #accountModal .btn-tranparent a {
    color: var(--rmw-primary-soft) !important;
}

html body #accountModal .x-profile-info .-username-wrapper .-value,
html body #accountModal .x-profile-bank-info .-bank-detail .-name,
html body #accountModal .x-profile-bank-info .-bank-name,
html body #accountModal .x-profile-bank-info .-bank-name .-value,
html body #accountModal .-text-container,
html body #accountModal .container-coupon,
html body #accountModal .card-remark-cb p,
html body #accountModal .cashback-content p,
html body #accountModal label,
html body #accountModal p,
html body #accountModal li {
    color: var(--rmw-text) !important;
}

html body #accountModal input,
html body #accountModal select,
html body #accountModal textarea,
html body #accountModal .form-control,
html body #accountModal .x-coupon-input,
html body #accountModal .select2-selection,
html body #accountModal .dataTables_filter input,
html body #accountModal .dataTables_length select {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background: var(--rmw-input-background) !important;
    box-shadow: none !important;
}

html body #accountModal input::placeholder,
html body #accountModal textarea::placeholder,
html body #accountModal .form-control::placeholder {
    color: var(--rmw-subtle) !important;
}

html body #accountModal .table-responsive,
html body #accountModal .table,
html body #accountModal table.dataTable {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-surface-deep) !important;
}

html body #accountModal .table thead th,
html body #accountModal table.dataTable thead th {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-surface-strong) !important;
}

html body #accountModal .table tbody tr,
html body #accountModal .table tbody td,
html body #accountModal table.dataTable tbody tr,
html body #accountModal table.dataTable tbody td {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
}

html body #accountModal .paginate_button,
html body #accountModal .page-link {
    color: var(--rmw-muted) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-button-background) !important;
}

html body #accountModal .paginate_button:hover,
html body #accountModal .paginate_button.current,
html body #accountModal .page-item.active .page-link,
html body #accountModal .x-profile-info .-btn-change-password,
html body #accountModal .x-admin-contact a,
html body #accountModal .btn.-submit,
html body #accountModal .-btn-header-login,
html body #accountModal .btn-primary {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body #depositModal,
html body #withdrawModal {
    --cashier-surface: var(--rmw-card-background);
    --cashier-surface-soft: var(--rmw-surface);
    --cashier-border: var(--rmw-border);
    --cashier-highlight: var(--rmw-primary-soft);
    --deposit-bg: var(--rmw-bg-soft);
    --deposit-panel: var(--rmw-card-background);
    --deposit-card: var(--rmw-surface-strong);
    --deposit-border: var(--rmw-border);
    --deposit-text: var(--rmw-text);
    --deposit-muted: var(--rmw-muted);
    --deposit-accent: var(--rmw-primary);
}

html body #depositModal .modal-body,
html body #withdrawModal .modal-body,
html body #depositModal .-layout-deposit,
html body #withdrawModal .-layout-withdraw,
html body #depositModal .tab-content,
html body #withdrawModal .tab-content {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
}

/* Mobile account drawer final theme lock v22: applies while visible and hidden. */
html body .x-menu-account-list-sidebar,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-nav-background) !important;
    box-shadow: var(--rmw-shadow) !important;
}

html body .x-menu-account-list-sidebar .-overlay {
    background: var(--rmw-bg-deep) !important;
}

html body .x-menu-account-list-sidebar .-modal-profile-mobile,
html body .x-menu-account-list-sidebar .-modal-profile-mobile .-balance-container,
html body .x-menu-account-list-sidebar .-modal-profile-mobile .-balance-container .-text-username,
html body .x-menu-account-list-sidebar .-modal-profile-mobile .fas {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
}

html body .x-menu-account-list-sidebar .-modal-profile-mobile .-balance-container .-amount,
html body .x-menu-account-list-sidebar .text-green-lighter,
html body .x-menu-account-list-sidebar .-pending-approved .x-queue-number-expression {
    color: var(--rmw-primary-soft) !important;
}

html body .x-menu-account-list-sidebar .-modal-profile-mobile .-balance-container .-user-balance,
html body .x-menu-account-list-sidebar .-modal-profile-mobile .-balance-container .-user-balance .-inner-box-wrapper,
html body .x-menu-account-list-sidebar .-pending-approved {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border) !important;
    background: var(--rmw-surface-deep) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-menu-account-list-sidebar .-transaction-button-wrapper,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item {
    color: var(--rmw-text) !important;
    border-color: var(--rmw-border) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .x-menu-account-list-sidebar .x-transaction-button-v2,
html body .x-menu-account-list-sidebar .x-transaction-button-v2.-deposit,
html body .x-menu-account-list-sidebar .x-transaction-button-v2.-withdraw {
    color: var(--rmw-text-strong) !important;
    border: 1px solid var(--rmw-border-strong) !important;
    background-color: var(--rmw-surface-strong) !important;
    background-image: none !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-menu-account-list-sidebar .x-transaction-button-v2 .-title,
html body .x-menu-account-list-sidebar .x-transaction-button-v2 .-sub-title {
    color: var(--rmw-text-strong) !important;
}

html body .x-menu-account-list-sidebar .x-transaction-button-v2:hover,
html body .x-menu-account-list-sidebar .x-transaction-button-v2:focus,
html body .x-menu-account-list-sidebar .x-transaction-button-v2:active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
}

html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item button.nav-link,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item a.nav-link {
    color: var(--rmw-text) !important;
    border: 1px solid var(--rmw-border) !important;
    border-left: 4px solid var(--rmw-primary) !important;
    background: var(--rmw-card-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link .-text-menu,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link i,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link svg {
    color: var(--rmw-text) !important;
}

html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item.active .nav-link,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:hover,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:focus,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background: var(--rmw-active-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item.active .nav-link .-text-menu,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:hover .-text-menu,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:focus .-text-menu,
html body .x-menu-account-list-sidebar .x-modal-account-menu-mobile .navbar-nav .nav-item .nav-link:active .-text-menu {
    color: var(--rmw-primary-contrast) !important;
    text-shadow: none !important;
}

/* Quick transaction final theme lock v23.
 * Keep the lazy-loaded promotion/deposit/withdraw artwork from restoring an old palette. */
html body .x-quick-transaction-buttons.js-quick-transaction-buttons > .-btn,
html body .x-quick-transaction-buttons.js-quick-transaction-buttons > a.-btn,
html body .x-quick-transaction-buttons.js-quick-transaction-buttons > button.-btn {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-border-strong) !important;
    background-color: var(--rmw-surface-strong) !important;
    background-image: var(--rmw-button-background) !important;
    box-shadow: var(--rmw-shadow-soft) !important;
}

html body .x-quick-transaction-buttons.js-quick-transaction-buttons > .-btn:hover,
html body .x-quick-transaction-buttons.js-quick-transaction-buttons > .-btn:focus {
    color: var(--rmw-text-strong) !important;
    border-color: var(--rmw-primary-strong) !important;
    background-color: var(--rmw-surface-hover) !important;
    background-image: var(--rmw-button-hover-background) !important;
}

html body .x-quick-transaction-buttons.js-quick-transaction-buttons > .-btn:active {
    color: var(--rmw-primary-contrast) !important;
    border-color: var(--rmw-primary-strong) !important;
    background-color: var(--rmw-primary) !important;
    background-image: var(--rmw-active-background) !important;
}

html body .x-quick-transaction-buttons.js-quick-transaction-buttons .-ic-wrapper {
    border-color: var(--rmw-border) !important;
    background: var(--rmw-surface-deep) !important;
    box-shadow: none !important;
}

html body .x-quick-transaction-buttons.js-quick-transaction-buttons .-btn-inner-content-title {
    color: var(--rmw-text-strong) !important;
    text-shadow: none !important;
}

html body .x-quick-transaction-buttons.js-quick-transaction-buttons .-btn-inner-content-sub-title {
    color: var(--rmw-muted) !important;
}

html body .x-quick-transaction-buttons.js-quick-transaction-buttons > .-btn::before,
html body .x-quick-transaction-buttons.js-quick-transaction-buttons > .-btn::after {
    border-color: var(--rmw-border) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Header deposit/withdraw actions v24: distinct meaning, shared theme tokens. */
html body .x-header .-transaction-outer-container .btn.-btn-deposit,
html body .x-header .-transaction-outer-container .btn.-btn-withdraw {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    min-width: 104px;
    min-height: 46px;
    padding: 7px 14px 7px 10px !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 13px !important;
    box-shadow: var(--rmw-shadow-soft) !important;
    transition: transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html body .x-header .-transaction-outer-container .btn.-btn-deposit {
    color: var(--rmw-primary-contrast) !important;
    border-color: color-mix(in srgb, var(--rmw-success) 72%, var(--rmw-white)) !important;
    background-color: var(--rmw-success) !important;
    background-image: linear-gradient(145deg, var(--rmw-success), color-mix(in srgb, var(--rmw-success) 68%, var(--rmw-surface-strong))) !important;
}

html body .x-header .-transaction-outer-container .btn.-btn-withdraw {
    color: var(--rmw-white) !important;
    border-color: var(--rmw-withdraw-strong) !important;
    background-color: var(--rmw-withdraw) !important;
    background-image: linear-gradient(145deg, var(--rmw-withdraw-strong), var(--rmw-withdraw)) !important;
}

html body .x-header .-transaction-outer-container .btn.-btn-deposit::before,
html body .x-header .-transaction-outer-container .btn.-btn-withdraw::before {
    position: relative;
    z-index: 2;
    display: inline-grid;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    place-items: center;
    color: currentColor;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    border: 1px solid color-mix(in srgb, var(--rmw-primary-contrast) 18%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--rmw-white) 24%, transparent);
}

html body .x-header .-transaction-outer-container .btn.-btn-deposit::before {
    content: "↓";
}

html body .x-header .-transaction-outer-container .btn.-btn-withdraw::before {
    content: "↑";
}

html body .x-header .-transaction-outer-container .btn.-btn-deposit::after,
html body .x-header .-transaction-outer-container .btn.-btn-withdraw::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 1px;
    pointer-events: none;
    border-radius: 11px;
    background: linear-gradient(115deg, color-mix(in srgb, var(--rmw-white) 20%, transparent), transparent 42%);
}

html body .x-header .-transaction-outer-container .btn.-btn-deposit > *,
html body .x-header .-transaction-outer-container .btn.-btn-withdraw > * {
    position: relative;
    z-index: 2;
}

html body .x-header .-transaction-outer-container .btn.-btn-deposit:hover,
html body .x-header .-transaction-outer-container .btn.-btn-deposit:focus,
html body .x-header .-transaction-outer-container .btn.-btn-withdraw:hover,
html body .x-header .-transaction-outer-container .btn.-btn-withdraw:focus {
    transform: translateY(-2px);
    filter: brightness(1.08) saturate(1.04);
    box-shadow: var(--rmw-shadow) !important;
}

html body .x-header .-transaction-outer-container .btn.-btn-deposit:focus-visible,
html body .x-header .-transaction-outer-container .btn.-btn-withdraw:focus-visible {
    outline: 2px solid var(--rmw-primary-strong);
    outline-offset: 3px;
}

html body .x-header .-transaction-outer-container .btn.-btn-deposit:active,
html body .x-header .-transaction-outer-container .btn.-btn-withdraw:active {
    transform: translateY(0);
    filter: brightness(.96);
}