:root {
            --website--theme--bg--color: #b41818;
            --website--theme--text--color: #ffffff;
            --website--theme--button--color: #c71805;
            --website--theme--button--active--color: #610000;
            --website--theme--nav--with--modal--color--light: #880202;
            --website--theme--nav--with--modal--color--dark: #130101;
            --website--theme--announce--color: #ac0202;
        }

        /** BASE **/
        * {
            font-family: 'Kanit', sans-serif;
        }
        .disabled {
            pointer-events: none;
            opacity: 0.6;
        }

        .disabled-can-click {
            opacity: 0.6;
        }

        /** THEME **/
        body {
            color: var(--website--theme--text--color) !important;
        }

        input {
            font-family: 'Kanit' !important;
        }

        input::-webkit-input-placeholder {
            font-family: 'Kanit' !important;
        }

        input:-ms-input-placeholder {
            font-family: 'Kanit' !important;
        }

        input:-moz-placeholder {
            font-family: 'Kanit' !important;
        }

        input::-moz-placeholder {
            font-family: 'Kanit' !important;
        }

        /************************
         * Navbar
         *************************/

        /* Navbar */
        .x-header,
        #account-actions-mobile .-left-wrapper, #account-actions-mobile .-right-wrapper,
        #account-actions-mobile .-center-wrapper {
            background: linear-gradient(180deg, var(--website--theme--nav--with--modal--color--light), var(--website--theme--nav--with--modal--color--dark));
        }

        /* ปุ่มบน Navbar */
        .x-header .-menu-wrapper .nav-link {
            background: linear-gradient(180deg, var(--website--theme--button--color), var(--website--theme--button--color));
        }

        /************************
         * Sidebar
         *************************/

        .x-menu-provider .nav-link,
        .x-modal-account-menu .navbar-nav .nav-item {
            background: linear-gradient(180deg, var(--website--theme--button--color), var(--website--theme--button--color));
        }

        .x-header .-menu-wrapper .nav-link,
        .x-modal-account-security-tabs.-v2 .-btn,
        .x-modal .-modal-content .-modal-body .-submit,
        .x-text-with-link-component .-text-message,
        .x-menu-provider .nav-link .-text-nav-menu.-title,
        .x-feed-news-header .-feed-news-inner-wrapper .-track .-track-item {
            color: var(--website--theme--text--color);
        }
        .x-menu-provider .nav-link .-text-nav-menu.-title-trans {
            color: var(--website--theme--text--color);
            opacity: .6;
        }

        .x-menu-provider .nav-link.active,
        .x-menu-provider .nav-link:hover,
        .x-header .-menu-wrapper .nav-link:hover,
        .x-modal-account-menu .navbar-nav .nav-item.active, .x-modal-account-menu .navbar-nav .nav-item:hover,
        .nav-pills .nav-link.active, .nav-pills .show > .nav-link,
        .x-modal-account-menu-mobile .navbar-nav .nav-item,
        .x-modal-account-menu-mobile .navbar-nav.-action-nav .nav-item {
            background: linear-gradient(180deg, var(--website--theme--button--active--color), var(--website--theme--button--color));
            transition: .3s;
        }

        /************************
         * Modal
         *************************/

        .x-modal.-v2 .-modal-content,
        .x-modal-account-security-tabs.-v2 .-btn.-active,
        .x-modal.-v2 .-modal-main-account .-modal-content,
        .vex.vex-theme-plain .vex-content,
        #promotionSuggestionModal.-hello-popup .modal-content,
        .x-modal.-promotion-detail-modal .modal-dialog .modal-content,
        .x-modal-account-menu-mobile {
            /*background: var(--website--theme--nav--with--modal--color--light);*/
            background: linear-gradient(140deg, var(--website--theme--nav--with--modal--color--light), var(--website--theme--nav--with--modal--color--dark) 95%);
        }

        .x-modal .-modal-content {
            background: linear-gradient(140deg, var(--website--theme--nav--with--modal--color--light), var(--website--theme--nav--with--modal--color--dark) 95%);
        }

        .x-modal.-v2 .form-control, .x-modal.-v2 .x-form-control,
        .x-modal.-v2 .-modal-main-account .-modal-content .-modal-body .-layout-account {
            background-color: var(--website--theme--bg--color);
        }

        .x-modal.-v2 .close.-in-tab {
            color: var(--website--theme--text--color);
            background-color: var(--website--theme--button--color);
        }
        .x-modal-account-security-tabs.-v2 .-btn,
        .x-modal-account-security-tabs.-v2 .-btn:focus
        .x-modal-account-security-tabs.-v2 .-btn:hover,
        .x-modal.-v2 .-modal-main-account .-modal-content .-modal-body .-layout-account {
            background: var(--website--theme--nav--with--modal--color--dark);
        }

        .x-step-register.-v2 .-container-wrapper .-step-box-outer.step-active {
            background: var(--website--theme--bg--color);
        }

        .x-step-register.-v2 .-container-wrapper .-step-box-outer {
            background-color: var(--website--theme--text--color);
        }

        /************************
         * ประกาศ
         *************************/

        .x-feed-news-header .-feed-news-inner-wrapper {
            background-color: var(--website--theme--announce--color);
        }

        /************************
         * อื่น ๆ
         *************************/

        .x-game-list-item-macro .-title {
            color: var(--website--theme--text--color);
            opacity: .6;
        }

        .x-hot-games-container .-inner-heading-wrapper .-title {
            background: linear-gradient(180deg, var(--website--theme--text--color), var(--website--theme--text--color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        a.nav-link {
            color: var(--website--theme--text--color);
        }

        .x-logged .-balance-container .-user-balance {
            background: var(--website--theme--bg--color) !important;
        }

        .x-select-amount.-v2 .-amount-container .-btn-select-amount {
            background: linear-gradient(180deg, var(--website--theme--button--active--color), var(--website--theme--button--color));
        }

        .x-select-amount.-v2 .-amount-container .-btn-select-amount.active {
            background: var(--website--theme--bg--color) !important;
        }

        .x-index-top-container .-heading-sub-title {
            color: var(--website--theme--text--color);
        }

        .x-notification-list-item-wrapper .-details-wrapper .-title,
        .x-notification-list-item-wrapper .-details-wrapper .-datetime {
            color: var(--website--theme--text--color);
        }

        .x-deposit-promotion.-v2.-slide .-promotion-box-apply-btn {
            color: var(--website--theme--text--color);
        }

        .x-deposit-promotion.-v2.-slide .-promotion-box-wrapper {
            background: var(--website--theme--bg--color);
            color: var(--website--theme--text--color);
            border: 1px solid var(--website--theme--text--color);
        }
        @media (min-width: 992px) {

            .x-menu-provider {
                background: var(--website--theme--bg--color) !important;
            }

            .x-modal-account-security-tabs.-v2 .-btn:hover {
                background: var(--website--theme--nav--with--modal--color--dark);
            }

            .x-select-amount.-v2 .-amount-container .-btn-select-amount:hover {
                background: var(--website--theme--bg--color) !important;
            }
        }

        @media (max-width: 991.98px) {
            .x-logged .-balance-container .-amount {
                color: var(--website--theme--text--color);
            }

            .x-index-top-container .-games-provider-wrapper .-menu-index-page,
            .x-logged .-profile-container .-inner-wrapper {
                background: var(--website--theme--bg--color) !important;
            }

            #depositModal.-v2 .-modal-content,
            .x-modal.-v2.-with-backdrop .-fake-bg-bottom-wrapper {
                background: var(--website--theme--nav--with--modal--color--light);
            }

            .x-menu-provider {
                max-height: 590px;
            }
        }

        #imgQRCode {
            max-width: 250px;
            max-height: 250px;
        }
        
        /* ------------------------------ */
        
        .click-highlight {
            position: relative;
            display: inline-block;

            text-decoration: underline;
            cursor: pointer;

            text-shadow:
                0 0 2px rgba(255, 255, 255, 0.9),
                0 0 5px rgba(255, 255, 255, 0.5);

            animation: textGlow 1.2s ease-in-out infinite;
        }

        @keyframes textGlow {
            0%, 100% {
                text-shadow:
                    0 0 2px rgba(255, 255, 255, 0.5),
                    0 0 4px rgba(255, 255, 255, 0.3);
            }

            50% {
                text-shadow:
                    0 0 2px rgba(255, 255, 255, 1),
                    0 0 6px rgba(255, 255, 255, 0.7),
                    0 0 9px rgba(255, 255, 255, 0.4);
            }
        }

        .click-highlight::after {
            content: "👇";
            position: absolute;

            left: 50%;
            bottom: 100%;
            /* margin-bottom: 4px; */

            font-size: 20px;

            transform: translateX(-50%);
            animation: pointingHandDown 0.8s ease-in-out infinite;
        }

        @keyframes pointingHandDown {
            0%, 100% {
                transform: translate(-50%, -8px);
            }

            50% {
                transform: translate(-50%, 0);
            }
        }