[data-theme="orange"] {
	--primary-color: #F86F03;
	--secondary-color: #FA9F56;
	--tertiary-color: #682F01;
	--danger-color: #F93827;
	--success-color: #27FFB1;
	--forgot-color: #FFE310;
	--form-invalid-color: #F53232;

	/* start tag new var css */

	--bg-img-main: url("https://fs.cdnrc.com/lsm-layout7/images/theme/orange/bg-layout7.png");
	--bg-img-box-in-come-lotto-reward: url("https://fs.cdnrc.com/lsm-layout7/images/theme/orange/box-in-come-lotto-reward.png");
	--bg-img-box-in-come-lotto-bet: url("https://fs.cdnrc.com/lsm-layout7/images/theme/orange/box-in-come-lotto-bet.png");

	--bg-color-box-lotto-reward: linear-gradient(155.77deg, #FEF1E6 16.3%, #FDD2B1 85.31%);
	--bg-color-box-lotto-bet: linear-gradient(180deg, #FCBD8B 0%, #E26503 100%);
	--border-color-box-lotto-reward: #F86F03;
	--border-color-box-lotto-bet: #F86F03;
	--shadow-color-box-lotto: #FA8900;

	--navbar-bg-color: linear-gradient(155.77deg, #FEF1E6 16.3%, #FDD2B1 85.31%);
	--navbar-login-register-bg-color: linear-gradient(155.77deg, #FEF1E6 16.3%, #FDD2B1 85.31%);
	--btn-login-bg-color: #F86F03;
	--btn-register-bg-color: transparent;
	--btn-login-font-color: #F6F7F8;
	--btn-register-font-color: #F86F03;

	--bg-center-login-register: #F6F7F8;
	--bg-message-info: #F86F03;

	--bg-login-modal: linear-gradient(155.77deg, #FEF1E6 16.3%, #FDD2B1 85.31%);

	--bg-box-wallet-profile: linear-gradient(155.77deg, #FEF1E6 16.3%, #FDD2B1 85.31%);

	--bg-wallet-other-show-amount: #FCBD8B;

	--bg-box-promotion-mission: linear-gradient(155.77deg, #FEF1E6 16.3%, #FDD2B1 85.31%);

	--bg-box-in-detail-promotion-mission: #F86F034D;

	--btn-forgot-in-offcanvas-color: #FF770A;

	--bg-box-contact-color: linear-gradient(155.77deg, #FEF1E6 16.3%, #FDD2B1 85.31%);

	--btn-withdraw-wallet-amount: #F86F0366;

	/* end tag new var css */

	--w-tab-bg-color:#FDD2B1;
	--tabs-color: #883D02;
	--tabs-bg-color: transparent;
	--tabs-active-color: #F6F7F8;
	--tabs-active-bg-color: linear-gradient(180deg, #FA9F56 0%, #F86F03 100%);

	--primary-layout-color: #FFF;
	--primary-layout-bg-color: #121525;
	--skeleton-loading-color: linear-gradient(180deg, #FA9F56 0%, #F86F03 100%);

	--header-color: #333438;
	--header-bg-color: #FEF1E6;
	--header-shadow: 2px 2px 10px 6px rgba(0, 0, 0, 0.40);

	--announce-color: #FFF;
	--announce-bg-color: #1F243F;

	--bg-navbar: #FEF1E6;
	--bg-main: #FDD2B1;
	--navbar-menu-bg-color: linear-gradient(180deg, #FA9F56 0%, #F86F03 100%);
	--navbar-menu-inactive-bg-color: #21273F;
	--navbar-menu-active-bg-color: #FEF1E6;
	--navbar-menu-active-dot-color: linear-gradient(180deg, #FA9F56 0%, #F86F03 100%);
	--bg-navbar-box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.40);

	--profile-bg-color: #1f243f;
    --profile-shadow: 6px 6px 10px 0px, rgba(0, 0, 0, .4);
    --profile-border-radius: 16px;
    --profile-card-color: #333438;
	--profile-card-bg-color: linear-gradient(180deg, #FA9F56 0%, #F86F03 100%);
    --profile-progress-bg-color: #682F01;
	--profile-progress-bar-color: linear-gradient(180deg, #FA9F56 0%, #F86F03 100%);

	--input-color: #333438;
	--input-placeholder-color: #C4C9CC;
	--input-bg-color: #F6F7F8;
	--input-border-color: #FF770A;
	--input-box-shadow: none;
	--input-icon-color: var(--primary-color);
	--input-hover-color: var(--input-color);
	--input-hover-bg-color: var(--input-bg-color);
	--input-hover-border-color: #FF770A;
	--input-hover-shadow: 0px 0px 0px 4px rgba(255, 119, 10, 0.30);
	--input-hover-icon-color: #FF770A;
	--input-active-color: var(--input-color);
	--input-active-bg-color: var(--input-bg-color);
	--input-active-border-color: #FF770A;
	--input-active-shadow: 0px 0px 0px 4px rgba(255, 119, 10, 0.30);
	--input-active-icon-color: #FF770A;
	--checkbox-hover-border-color: var(--swiper-navigate-hover-bg-color);
	--checkbox-focus-border-color: #717690;
	--checkbox-focus-border-outer-color: var(--swiper-navigate-active-bg-color);
	--checkbox-active-bg-color: var(--swiper-navigate-bg-color);
	--checkbox-active-border-color: var(--swiper-navigate-bg-color);
	--checkbox-active-hover-bg-color: var(--swiper-navigate-hover-bg-color);
	--checkbox-active-hover-border-color: var(--swiper-navigate-hover-bg-color);
	--checkbox-active-focus-bg-color: var(--swiper-navigate-active-bg-color);
	--checkbox-active-focus-border-color: var(--swiper-navigate-hover-bg-color);

	--switch-bg-color: #000;
	--switch-mask: unset;
	--switch-mask-composite: unset;
	--switch-active-bg-color: linear-gradient(94.65deg, #00FFFF -41.08%, #FF00FF 119.48%);
	--switch-active-mask: unset;
	--switch-active-mask-composite: unset;

	--box-color: #333438;
	--box-bg-color: linear-gradient(155.77deg, #FEF1E6 16.3%, #FDD2B1 85.31%);;
	--box-shadow: 4px 4px 8px 0px rgba(255, 119, 10, 0.30);
	--box-mask: radial-gradient(117.53% 133.09% at 0% 2.91%, rgba(255, 0, 255, 0.7) 2.72%, rgba(130, 125, 255, 0) 74.05%, rgba(0, 255, 255, 0.7) 87.13%);
	--box-mask-composite: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

	--box-2-color: #FFF;
	--box-2-bg-color: #1F243F;
	--box-2-shadow: none;
	--box-2-mask: linear-gradient(90deg, #822D0C 0%, #FFEED3 50%, #822D0C 100%);
	--box-2-mask-composite: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

	--box-3-color: #FFF;
	--box-3-bg-color: linear-gradient(155.77deg, #FEF1E6 16.3%, #FDD2B1 85.31%);
	--box-3-border-width: 1px;
	--box-3-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	--box-3-mask: linear-gradient(180deg, #FF770A 0%, #00AEFF 100%);
	--box-3-mask-composite: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

	--swal-color: var(--box-3-color);
	--swal-bg-color: var(--box-3-bg-color);
	--swal-border-width: var(--box-3-border-width);
	--swal-shadow: var(--box-3-shadow);
	--swal-mask-success: var(--box-3-mask);
	--swal-mask-danger: linear-gradient(180deg, #F93827 0%, #00AEFF 100%);
	--swal-mask-composite: var(--box-3-mask-composite);
	--swal-text-color: #333438;
	--swal-backdrop-color: #00000026;

	--swiper-navigate-bg-color: #FF770A;
	--swiper-navigate-hover-bg-color: #FF5E00;
	--swiper-navigate-active-bg-color: #FF9632;
	--swiper-navigate-active-shadow: 0px 0px 0px 2px rgba(255, 119, 10, 0.40);
	--swiper-navigate-disabled-bg-color: #272E51;
    --swiper-pagination-active-color: #FF770A;
	--swiper-pagination-inactive-color: #404664;

	--promotion-category-color: #F6F7F8;
	--promotion-category-bg-color: #9FADB3;
	--promotion-category-border-color: #717690;
	--promotion-category-active-color: #F6F7F8;
	--promotion-category-active-bg-color: linear-gradient(180deg, #FA9F56 0%, #F86F03 100%);
	--promotion-category-active-border-color: #FF770A;
	--promotion-modal-bg-color: linear-gradient(155.77deg, #FEF1E6 16.3%, #FDD2B1 85.31%);

	--scrollbar-track-color: #00000020;
	--scrollbar-thumb-color: #FF770A;
	--scrollbar-thumb-hover-color: #FF770A;
	--scrollbar-thumb-shadow: 0px 3px 5px 0px #000000CC;

	--transaction-title-color: #F1F1F2;
	--transaction-title-bg-color: #FF770A;
	--transaction-header-color: #FF770A;
	--transaction-header-bg-color: #764DFF1A;
	--transaction-header-border: 1px solid #FF770A;
	--transaction-table-head-color: #F1F1F2;
	--transaction-table-head-bg-color: #FF770A;
	--transaction-table-head-divider-color: none;

	--wallet-refresh-bg-color: rgba(255, 119, 10, 0.20);

	--bottom-nav-logo-active: url("https://fs.cdnrc.com/lsm99layout1/images/theme/orange/nav-logo-frame.png");
	--bottom-nav-backdrop: url("https://fs.cdnrc.com/lsm99layout1/images/theme/orange/nav-backdrop.png");
	--bottom-nav-backdrop-main: url("https://fs.cdnrc.com/lsm99layout1/images/theme/orange/nav-backdrop-main.png");

	--otp-color-title: var(--primary-color);
	--otp-color-subtitle: var(--primary-color);
	--otp-color-error: var(--danger-color);

	--slip-warning-text-highlight-color: #ffc107;

	/* Register Step */
	--step-input-svg-icon-color: #404664;
	--btn-step-disabled-color: rgba(255,119,10, 10%);
	--btn-step-disabled-bg-color: rgba(255,119,10, 20%);
	--step-progress-bar-bg: #F98C35;
	--step-progress-bar-bg-active: #F98C35;
	--step-text-all: #6C6C6C;
	--border-color-login-and-register: #F98C35;
	--step-input-border-color: rgba(252, 189, 139, 1);
	--step-input-border-color-not-empty: rgba(248, 111, 3, 1);

	--btn-step-input-otp-bg-color: #fff;
	--btn-step-input-otp-border-color: #FCBD8B;
	--btn-step-input-otp-text-color: #000;
	--btn-step-input-otp-text-placeholder-color: #C4C9CC;
	--step-modal-otp-icon-close: #fff;
}

[data-theme="orange"] .hero-btn {
	--btn-color: #F6F7F8;
	--btn-bg-color: #FF770A;

	--btn-hover-color: #181C31;
	--btn-hover-bg-color: #FF5E00;

	--btn-focus-color: #181C31;
	--btn-focus-bg-color: #FF9632;
	--btn-focus-shadow: 0px 0px 0px 4px rgba(255, 119, 10, 0.30);

	--btn-disabled-color: #FF770A33;
	--btn-disabled-bg-color: rgba(255, 119, 10, 0.05);
}
	[data-theme="orange"] .hero-btn.hero-danger {
		--btn-color: #F1F1F2;
		--btn-bg-color: #F53232;

		--btn-hover-color: #F1F1F2;
		--btn-hover-bg-color: #AE2424;

		--btn-focus-color: #181C31;
		--btn-focus-bg-color: #F87676;
		--btn-focus-shadow: 0px 0px 0px 4px rgba(245, 50, 50, 0.30);

		--btn-disabled-color: #F532324D;
		--btn-disabled-bg-color: rgba(245, 50, 50, 0.05);
	}

[data-theme="orange"] .hero-btn-outline {
	--btn-color: #FF770A;
	--btn-bg-color: transparent;
	--btn-border-color: #FF770A;

	--btn-hover-color: #FF5E00;
	--btn-hover-bg-color: rgba(255, 119, 10, 0.20);
	--btn-hover-border-color: #FF5E00;

	--btn-focus-color: #FF9632;
	--btn-focus-bg-color: rgba(255, 119, 10, 0.10);
	--btn-focus-border-color: #FF9632;
	--btn-focus-shadow: 0px 0px 0px 4px rgba(255, 119, 10, 0.30);

	--btn-disabled-color: #404664;
	--btn-disabled-bg-color: transparent;
	--btn-disabled-border-color: #404664;
}
	[data-theme="orange"] .hero-btn-outline.hero-secondary {
		--btn-color: #00AEFF;
		--btn-bg-color: transparent;
		--btn-border-color: #00AEFF;

		--btn-hover-color: #B6E6FF;
		--btn-hover-bg-color: rgba(0, 174, 255, 0.50);
		--btn-hover-border-color: #B6E6FF;

		--btn-focus-color: #042F4D;
		--btn-focus-bg-color: rgba(0, 174, 255, 0.80);
		--btn-focus-border-color: #00AEFF;
		--btn-focus-shadow: 0px 0px 0px 4px rgba(0, 174, 255, 0.30);
	}

	[data-theme="orange"] .hero-btn-outline.hero-danger {
		--btn-color: #F53232;
		--btn-bg-color: transparent;
		--btn-border-color: #F53232;

		--btn-hover-color: #F53232;
		--btn-hover-bg-color: rgba(245, 50, 50, 0.20);
		--btn-hover-border-color: #F53232;

		--btn-focus-color: #F53232;
		--btn-focus-bg-color: rgba(245, 50, 50, 0.20);
		--btn-focus-border-color: #F53232;
		--btn-focus-shadow: 0px 0px 0px 4px rgba(245, 50, 50, 0.30);
	}

[data-theme="orange"] .hero-btn-ghost {
	--btn-color: #FF770A;
	--btn-bg-color: transparent;
	--btn-border-color: transparent;

	--btn-hover-color: #FF5E00;
	--btn-hover-bg-color: rgba(255, 119, 10, 0.20);
	--btn-hover-border-color: rgba(255, 119, 10, 0.20);

	--btn-focus-color: #FF9632;
	--btn-focus-bg-color: rgba(255, 119, 10, 0.10);
	--btn-focus-border-color: rgba(255, 119, 10, 0.10);
	--btn-focus-shadow: none;

	--btn-disabled-color: #404664;
	--btn-disabled-bg-color: transparent;
	--btn-disabled-border-color: transparent;
}