* {
	font-family: 'League Spartan', sans-serif;
}

.content-wrap {
	min-height: 87vh;
}

.custom-button-1 {
	padding: 10px 0px;
	font-weight: 700;
	color: black;
	background: linear-gradient(0deg, rgba(128, 128, 128, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.custom-button-2 {
	padding: 10px 0px;
	font-weight: 700;
	color: white;
	background: linear-gradient(0deg,#D88901 0%,#F8C000 100%);
}

.custom-button-3 {
	padding: 10px 0px;
	font-weight: 700;
	color: white;
	background: linear-gradient(0deg,#D88901 0%,#F8C000 100%);
}

/* Mobile home DEPOSIT/LOGOUT (or LOGIN/REGISTER) buttons.
   Scoped so the shared .custom-button-* classes stay unchanged elsewhere. */
.mobile-login-resgiter .custom-button-1 {
	background: linear-gradient(180deg, #D88901 0%, #010010 100%);
}

.mobile-login-resgiter .custom-button-2 {
	background: linear-gradient(180deg, #F8C000 0%, #D88901 100%), linear-gradient(180deg, #D88901 0%, #010010 100%);
}

/* right button text: same gold gradient as the header btn-2 text */
.mobile-login-resgiter .custom-button-2 a {
	background: linear-gradient(180deg, #FFFDC6 0%, #FFEA6E 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.custom-form-1 {
	background-color: rgba(255, 255, 255, 0.93);
	border-radius: 5px;
}

.custom-form-2 {
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 5px;
	color: white;
}

.form-title {
	border-bottom: 5px #F8C000 solid;
	margin: 20px auto;
	padding: 0px 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	border-radius: 10px;
}

#register-form i,
#login-form i {
	color: #F8C000;
}

#depositTab .nav-link {
	color: #F8C000;
}

/*HEADER*/
.top-bar-color {
	background-color: #010010;
}

#header-wrap {
    /* §2g: keep the 5px gold gradient borders (top+bottom); nav-bar fill is FLAT dark per royalstar268 Figma */
    background:
        linear-gradient(0deg, #C0761C 0%, #FFCE41 15%, #F8B641 30%, #DF8A09 52%, #FCD64E 75%, #F9B643 85%, #BD6E17 100%) top / 100% 5px no-repeat,
        linear-gradient(0deg, #C0761C 0%, #FFCE41 15%, #F8B641 30%, #DF8A09 52%, #FCD64E 75%, #F9B643 85%, #BD6E17 100%) bottom / 100% 5px no-repeat,
        #010010;
}

#logo img {
	height: 100px;
}

#top-bar .login-register-btn img {
	height: 50px;
	transform: scale(1.05);
}

#top-bar .login-register-btn .header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* btn-1 trapezium slants toward the top-right corner, so nudge the
	   centred label slightly left to sit in the button's wider left area. */
	padding-right: 16px;
	width: 156px;
	height: 50px;
	transform: scale(1.05);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

/* btn-2 trapezium slants toward the bottom-left corner, so reverse the
   btn-1 nudge and push the centred label slightly right instead. */
#top-bar .login-register-btn .header-btn-2 {
	padding-right: 0;
	padding-left: 16px;
}

/* JOIN NOW */
#top-bar .login-register-btn .header-btn-2 span {
	background: linear-gradient(180deg, #FFFDC6 0%, #FFEA6E 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* MOBILE TOP BAR: menu left, logo dead-centre.
   1fr auto 1fr keeps the logo centred on screen no matter how wide the menu button is. */
.mobile-top-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.mobile-top-bar .primary-menu-trigger {
	justify-self: start;
}

.mobile-top-bar__logo {
	justify-self: center;
}

/* On mobile the gold-bordered #header-wrap is hidden, so the top bar's only
   border is the theme's faint 1px line. Restyle it to match the desktop
   header's 5px gold gradient border. */
@media (max-width: 991px) {
	#top-bar {
		border-bottom: 5px solid;
		border-image: linear-gradient(0deg, #C0761C 0%, #FFCE41 15%, #F8B641 30%, #DF8A09 52%, #FCD64E 75%, #F9B643 85%, #BD6E17 100%);
		border-image-slice: 1;
	}
}

/*HEADER END*/

/* The Canvas theme sets ::selection to white-on-white (its --cnvs-themecolor is
   #fff), so highlighted text becomes invisible. Restore a normal highlight. */
::selection {
	background: #3390ff;
	color: #fff;
	text-shadow: none;
}

::-moz-selection {
	background: #3390ff;
	color: #fff;
	text-shadow: none;
}

.member-form-background {
	background-image: url('../../../images/member-page-background.png');
	background-position: center;
	background-size: cover;
}

/*PROFILE*/
.profile-container {
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: 10px;
	padding: 20px;
	height: 100%;
	color: #222;
}

.profile-container a {
	color: #222;
}

.profile-container a:hover {
	color: #F8C000;
}

/* Sidebar: uppercase kept here only (not on the whole panel), full-width links */
.side-bar-item {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.3px;
	border-radius: 6px;
	margin-bottom: 4px;
	transition: background-color 0.15s ease;
}

.side-bar-item a {
	display: block;
	padding: 11px 14px;
	font-size: 0.9rem;
}

.side-bar-item:not(.active):hover {
	background: rgba(248, 192, 0, 0.08);
}

.side-bar-item.active {
	background: linear-gradient(180deg, #F8C000 0%, #D88901 100%);
}

.side-bar-item.active a {
	color: white;
}

/* ===== MEMBER ACCOUNT PAGES — red/gold theme to match home & header =====
   Scoped to .profile-container, which is used ONLY by the 4 member account
   pages (Dashboard, Change Password, Game ID, History) and their sidebar, so
   shared classes like .custom-button-2 stay blue everywhere else. */

/* "MY ACCOUNT" title bar: blue -> red gradient with gold underline */
.page-title.member-page-title {
	background: linear-gradient(180deg, #F8C000 0%, #D88901 100%);
	border-bottom: 4px solid;
	border-image: linear-gradient(0deg, #C0761C 0%, #FFCE41 15%, #F8B641 30%, #DF8A09 52%, #FCD64E 75%, #F9B643 85%, #BD6E17 100%);
	border-image-slice: 1;
}

/* SAVE / SUBMIT buttons: blue -> red gradient */
.profile-container .custom-button-2 {
	background: linear-gradient(180deg, #F8C000 0%, #D88901 100%);
}

.profile-container .custom-button-2:hover {
	background: linear-gradient(180deg, #D88901 0%, #D88901 100%);
	color: #fff;
}

/* Game ID cards: red title + gold/red accent border */
.profile-container .card-dashboard {
	border: 1px solid #F8C000;
	border-top: 4px solid #F8C000;
	border-radius: 8px;
}

.profile-container .card-dashboard .card-title {
	color: #F8C000;
	font-weight: 700;
}

/* Form fields focus: blue ring -> red ring */
.profile-container .form-control:focus {
	border-color: #F8C000;
	box-shadow: 0 0 0 0.2rem rgba(248, 192, 0, 0.25);
}

/* ----- Game ID cards: clearer rows, monospace values, copy buttons ----- */
.profile-container .card-dashboard.game-id-card {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.profile-container .card-dashboard.game-id-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.profile-container .game-id-card .card-body {
	padding: 1rem 1.25rem 1.1rem;
}

.profile-container .game-id-card .card-title {
	margin-bottom: 0.75rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid #f0e2c6;
	font-size: 1.15rem;
	letter-spacing: 0.3px;
}

.game-id-field {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0;
}

.game-id-field + .game-id-field {
	border-top: 1px dashed #eee;
}

.game-id-label {
	flex: 0 0 42px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #b08a2e;
}

.game-id-value {
	flex: 1 1 auto;
	min-width: 0;
	font-family: "Consolas", "Menlo", "Courier New", monospace;
	font-size: 0.98rem;
	font-weight: 600;
	color: #222;
	word-break: break-all;
	-webkit-user-select: all;
	user-select: all;
}

.game-id-value.game-id-empty {
	font-family: inherit;
	font-weight: 400;
	font-style: italic;
	color: #adadad;
	-webkit-user-select: none;
	user-select: none;
}

.game-id-copy {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: #F8C000;
	font-size: 1.05rem;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.game-id-copy:hover {
	background: rgba(248, 192, 0, 0.1);
}

.game-id-copy:active {
	transform: scale(0.9);
}

.game-id-copy.copied {
	color: #1e9e57;
	background: rgba(30, 158, 87, 0.12);
}

/* Shown when the member has no game IDs at all */
.game-id-empty-state {
	text-align: center;
	padding: 2.5rem 1rem;
	color: #8a8a8a;
	border: 1px dashed #e0c98a;
	border-radius: 10px;
	background: rgba(231, 178, 74, 0.06);
}

.game-id-empty-state svg {
	display: block;
	margin: 0 auto 0.6rem;
	color: #e0c98a;
}

/* Game IDs / passwords must keep their real casing (panel no longer forces
   uppercase, but stay explicit so copied text always matches what's shown). */
.game-id-value {
	text-transform: none;
}

.game-id-copy svg {
	display: block;
}

/* ----- Shared building blocks for the member account pages ----- */

/* Section heading */
.account-heading {
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #F8C000;
	border-bottom: 2px solid #f0e2c6;
}

/* Form labels + hints */
.profile-container .form-label {
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #444;
}

.account-hint {
	margin: 0.2rem 0 1.1rem;
	font-size: 0.8rem;
	color: #888;
}

/* Password field with a show/hide toggle */
.password-field {
	position: relative;
}

.password-field .form-control {
	padding-right: 44px;
}

.password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: #999;
	padding: 6px;
	line-height: 0;
	border-radius: 6px;
	cursor: pointer;
}

.password-toggle:hover {
	color: #F8C000;
}

/* Dashboard: welcome banner + quick links */
.account-welcome {
	margin-bottom: 1.25rem;
	padding: 1.5rem;
	border-radius: 10px;
	background: linear-gradient(135deg, #F8C000 0%, #D88901 100%);
	color: #fff;
}

.account-welcome__hi {
	font-size: 0.9rem;
	opacity: 0.85;
}

.account-welcome__name {
	font-size: 1.6rem;
	font-weight: 700;
	word-break: break-word;
}

/* Dashboard: customer details list */
.account-info {
	margin: 0;
	border: 1px solid #eadfca;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.account-info__row {
	display: flex;
	gap: 1rem;
	padding: 0.85rem 1.1rem;
}

.account-info__row + .account-info__row {
	border-top: 1px solid #f1e7d3;
}

.account-info__label {
	flex: 0 0 120px;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: #8a7a55;
}

.account-info__value {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-weight: 600;
	color: #222;
	word-break: break-word;
}

.account-info__empty {
	color: #b3b3b3;
	font-weight: 400;
}

/* History table tidy-up */
.profile-container .table {
	margin-bottom: 0;
}

.profile-container .table thead th {
	background: #f7f2e6;
	color: #7a5b1e;
	font-weight: 700;
	border-bottom: 2px solid #F8C000;
	white-space: nowrap;
}

.profile-container .table td,
.profile-container .table th {
	vertical-align: middle;
}

@media (max-width: 400px) {
	.account-info__label {
		flex-basis: 90px;
	}
}

/*PROFILE END*/

/* ===== MEMBER FORM PAGES — red theme to match home & account =====
   .custom-form-2 wraps ONLY the member form panels (Login, Register, Deposit,
   Withdraw, Withdraw-success), so scoping here flips their blue accents to the
   home/account red while shared classes stay blue everywhere else. */
.custom-form-2 .form-title {
	border-bottom-color: #F8C000;
}

.custom-form-2 .custom-button-2 {
	background: linear-gradient(180deg, #F8C000 0%, #D88901 100%);
}

.custom-form-2 .custom-button-2:hover {
	background: linear-gradient(180deg, #D88901 0%, #D88901 100%);
	color: #fff;
}

/* form fields focus: blue ring -> red ring */
.custom-form-2 .form-control:focus {
	border-color: #F8C000;
	box-shadow: 0 0 0 0.2rem rgba(248, 192, 0, 0.25);
}

/*HOME*/
.slider-border {
	background: linear-gradient(0deg, rgba(192, 118, 28, 1) 0%, rgba(255, 206, 65, 1) 15%, rgba(248, 182, 65, 1) 30%, rgba(223, 138, 9, 1) 52%, rgba(252, 214, 78, 1) 75%, rgba(249, 182, 67, 1) 85%, rgba(189, 110, 23, 1) 100%);
	padding: 5px 0px;
}

.announcement {
	background-color: rgba(0, 0, 0, 1);
}

.announcement-speaker img {
	animation: speaker-shake 0.5s infinite;
}

.ticker-container {
	color: white;
	overflow: hidden;
}

.ticker-container img {
	height: 50px;
	width: 50px;
}

.home-page-step {
    background: linear-gradient(180deg, #F8C000 0%, #D88901 100%);
    color: #ffffff;
    font-weight: 700;
}


/* Branded page background for ALL frontend inner pages (member / bank / referral / rebate / etc.
   that don't have a .home-bg wrapper). On the home page the opaque nav + steps + .home-bg cover
   this, so it only actually shows on inner pages. `body.background` scopes it to the frontend
   (the admin uses a different body class), leaving the admin untouched. */
body.background {
	background: #000928 url("../../../images/home/bg-image.png") top center / 100% auto no-repeat;
}

/* §2f: single continuous full-page background for the home main + footer sections */
.home-bg {
	background: #000928 url("../../../images/home/bg-image.png") top center / 100% auto no-repeat;
}

.home-page-main {
	/* transparent: inner pages show the body.background image; home page shows .home-bg through it */
	background: transparent;
	color: white;
}

.ranking-title-trophy img {
	height: 200px;
}

.ranking-title {
	font-family: 'League Spartan';
	font-weight: 700;
	font-size: 50px;
	line-height: 75px;
	text-align: center;
	background: linear-gradient(180deg, #F2EAA5 0%, #FDC918 50%, #CB7C02 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0px 2px 2px rgba(109, 77, 0, 0.9)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.8));
}

/* ===== LIVE TRANSACTION table ===== */
/* gold gradient frame with rounded corners */
.ranking-table-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3px;
	border-radius: 14px;
	background: linear-gradient(180deg, #f9e08a 0%, #F8C000 50%, #b87118 100%);
}

/* clips the table's square corners to the rounded frame */
.ranking-table-clip {
	border-radius: 12px;
	overflow: hidden;
}

.home-ranking-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background: #0C0C0B;
	color: #ffffff;
}

.home-ranking-table thead th {
	padding: 15px 12px;
	text-align: center;
	font-weight: 700;
	letter-spacing: 1px;
	color: #ffffff;
	background: linear-gradient(180deg, #FBD302 0%, #F8C000 55%, #D88901 100%);
	border-bottom: 2px solid #F8C000;
}

.home-ranking-table tbody td {
	padding: 13px 16px;
	text-align: center;
	font-weight: 700;
	border-top: 1px solid #56450A;
	border-right: 1px solid #56450A;
}

.home-ranking-table tbody tr:first-child td {
	border-top: none;
}

.home-ranking-table tbody td:last-child {
	border-right: none;
}

/* amount column in gold */
.home-ranking-table tbody td.amount {
	color: #F8C000;
}

/* §2f: transparent so the shared .home-bg shows through; explicit height replaces the removed <img> */
.home-footer {
	position: relative;
	background: transparent;
	height: clamp(300px, 31vw, 560px);
}

.home-footer .footer-bg {
	display: none;
}

/* character: flush to the left edge, large, spilling slightly above the section */
.home-footer .footer-image {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 115%;
	z-index: 2;
}

.home-footer .footer-image img {
	display: block;
	height: 100%;
	width: auto;
}

/* social banners: right side, vertically centered */
.home-footer .footer-banners {
	position: absolute;
	right: 8%;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 1rem;
	z-index: 1;
}

.home-footer .footer-banners a {
	display: block;
	width: 160px;
	max-width: 100%;
	cursor: pointer;
}

.home-footer .footer-banners img {
	display: block;
	width: 100%;
	height: auto;
}

/*HOME END*/

/*CUSTOM CANVAS CODE*/
.menu-link {
	font-size: 1.25rem;
}

/*CUSTOM CANVAS CODE END*/

/*SLOT*/
.slot-page-background {
	background-image: url('../../images/slot-bg.png');
	background-position: center;
	background-size: 100% 100%;
}

.overlay-container {
	cursor: pointer;
	position: relative;
	/*	background-image: url('../../images/lucky-draw/treasure-box.png');*/
	background-position: center;
	background-size: 100% 100%;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	/* Adjust the alpha value for transparency */
	opacity: 1;
	transition: 0.5s ease;
	/* Add a smooth transition effect */
}

.overlay-container:hover .overlay {
	opacity: 0;
}

.overlay-container:hover img {
	/*	animation: speaker-shake 1s infinite;*/
}

.slot-game-effect {
	transition: 0.5s ease;
}

.slot-game-effect:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 0 1rem rgb(255, 255, 255));
}

.slot-amount {
	position: absolute;
	font-weight: 600;
	color: white;
	bottom: 5%;
	right: 5%;
	font-size: 26px;
}

/*SLOT END*/

/*LUCKY DRAW*/
.lucky-draw-container {
	max-width: 800px;
}

.lucky-draw-page-background {
	background-image: url('../../images/lucky-draw/lucky-draw-bg.png');
	background-position: center;
	background-size: 100% 100%;
	padding: 0px;
}

.treasure-box-container {
	background-image: url('../../images/lucky-draw/treasure-box-container.png');
	background-position: center;
	background-size: 100% 100%;
}

.treasure-box-container img {
	width: 100%;
}

.lucky-draw-button {
	background-image: url('../../images/lucky-draw/button-bg.png');
	background-position: center;
	background-size: 100% 100%;
	font-size: 36px;
}

.golden-word img {
	height: 55px;
}

.black-bg-counter {
	display: inline-block;
	background-color: black;
	color: white;
	padding: 0px 20px;
	border-radius: 10px;
}

/*LUCKY DRAW END*/

/*PROMOTION*/
.promotion-page-background {
	background-color: #010001;
	padding: 0px;
}

.promotion-header {
	background-image: url('../../images/promotion/top-haze-forest.png');
	background-position: center;
	background-size: 100% 100%;
}

.promotion-container {
	border-radius: 10px;
	transition: 0.5s;
}

.promotion-container:hover {
	box-shadow: 0px 0px 10px 5px white;
}

.promotion-image {
	border-right: 5px solid transparent;
	border-image: linear-gradient(0deg, rgba(192, 118, 28, 1) 0%, rgba(255, 206, 65, 1) 15%, rgba(248, 182, 65, 1) 30%, rgba(223, 138, 9, 1) 52%, rgba(252, 214, 78, 1) 74%, rgba(249, 182, 67, 1) 85%, rgba(189, 110, 23, 1) 100%);
	border-image-slice: 1;
	/* Ensure the entire border is filled with the gradient */
}

.promotion-image img {
	width: 100%;
	height: auto;
	/* Ensure the image scales proportionally */
}

.promotion-more-info-button {
	background: linear-gradient(0deg, rgba(1, 1, 1, 1) 0%, rgba(65, 65, 65, 1) 100%);
	font-size: 40px;
	text-align: center;
	color: white;
	font-weight: bold;
	border-radius: 0px 10px 10px 0px;
	cursor: pointer;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*PROMOTION END*/

/*VIP*/
.vip-header {
	background-image: url('../../images/vip/vip-title.png');
	background-position: center;
	background-size: 100% 100%;
}

.vip-table {
	background-image: url('../../images/vip/table-bg.png');
	background-position: center;
	background-size: cover;
	text-align: center;
}

.vip-table .table {
	--bs-table-bg: transparent;
}

.vip-logo {
	height: 100px;
}

.true-false-icon img {
	height: 40px;
}

/*VIP END*/

/*RESULT*/
.result-header {
	background: url("../../images/result/top-background.png");
	background-position: center;
	background-size: 100% 100%;
}

.result-title-background {
	background: url("../../images/result/title-background.png");
	background-position: center;
	background-size: cover;
}

.stage-container {
	text-align: center;
}

.result-name {
	color: white;
	font-size: 60px;
	font-weight: bold;
	white-space: nowrap;
}

.stage-3 {
	padding: 100px 0px 80px 0px;
}

.stage-2 {
	padding: 100px 0px 160px 0px;
}

.stage-1 {
	padding: 100px 0px 280px 0px;
}

.stage-container .stage-main-part {
	background: linear-gradient(0deg, rgba(157, 7, 11, 1) 0%, rgba(174, 11, 14, 1) 50%, rgba(214, 12, 15, 1) 100%);
	box-shadow: inset 0px 15px 2px 0px rgba(255, 255, 255, .5);
}

.stage-container .stage-border-part {
	background: linear-gradient(0deg, rgba(138, 127, 133, 1) 0%, rgba(160, 157, 164, 1) 50%, rgba(206, 205, 203, 1) 100%);
	box-shadow: inset 0px 15px 2px 0px rgba(255, 255, 255, .5);
	padding: 0px;
}

.result-main {
	background: url("../../images/result/bottom-background.png");
	background-position: center;
	background-size: 100% 100%;
}

.result-reward {
	background: linear-gradient(0deg, rgba(84, 0, 0, 1) 0%, rgba(255, 44, 44, 1) 100%);
	box-shadow: 0 -3px 3px white, 0 3px 1px darkred;
	font-size: 50px;
	color: white;
	text-align: center;
	font-weight: bold;
	border-radius: 5px;
}

/*RESULT END*/

/*FOOTER*/
.desktop-footer {
	color: white;
	background: linear-gradient(0deg, rgba(27, 23, 23, 1) 0%, rgba(48, 48, 48, 1) 100%);
}

.footer-spacing {
	height: 72px;
	background-color: black;
}

.mobile-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 72px;
	display: flex;
	align-items: stretch;
	/* match the home page steps section background */
	background: linear-gradient(180deg, #F8C000 0%, #D88901 100%);
	/* sit above the home footer banners (z-index 3) and side icons (z-index 100) */
	z-index: 1030;
}

/* four equal-width, evenly spaced items */
.mobile-footer-item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 2px;
	text-decoration: none;
}

.mobile-footer-item img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}

.mobile-footer-item span {
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

/*FOOTER END*/



.testing-123456 {
	width: 300px;
	height: 200px;
	background: linear-gradient(to bottom, #3498db, #2980b9, #2ecc71);
	/* Blue, light blue, and green gradient background */
	clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
	filter: drop-shadow(0 0 0.75rem rgb(255, 217, 0));
	position: relative;
}



.custom-grey-bg {
	background-color: #f5f8fa;
	box-shadow: 2px 2px 5px 2px grey;
	padding: 1rem;
}

.trash-can-icon {
	color: red;
	cursor: pointer;
}

.custom-rainbow-color-button {
	background: linear-gradient(90deg, rgba(225, 25, 77, 1) 0%, rgba(236, 103, 40, 1) 17%, rgba(252, 177, 23, 1) 34%, rgba(37, 178, 74, 1) 51%, rgba(35, 139, 199, 1) 68%, rgba(103, 97, 171, 1) 85%, rgba(144, 41, 142, 1) 100%);
}

.custom-gradient-color-button-1 {
	color: white;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
	background-size: 100% 200%;
	font-weight: bold;
	transition: 0.5s;
}

.custom-gradient-color-button-1:hover {
	background-position: 0% 100%;
	color: white;
}

.custom-gradient-color-button-2 {
	background: linear-gradient(90deg, rgba(58, 243, 193, 1) 0%, rgba(137, 194, 254, 1) 18%, rgba(155, 161, 255, 1) 33%, rgba(158, 144, 255, 1) 48%, rgba(196, 122, 248, 1) 63%, rgba(252, 138, 192, 1) 78%, rgba(255, 188, 89, 1) 100%);
	color: white;
	background-size: 150% auto;
	font-weight: bold;
	transition: 0.5s;
}

.custom-gradient-color-button-2:hover {
	background-position: 100% 0%;
}

.border-radius-with-inset-shadow {
	border-radius: 30px;
	box-shadow: 0px 0px 12px 0px rgba(0, 87, 255, 0.33) inset;
}

.btn-custom-1 {
	border: 1px solid #CDCDCD;
	color: black;
	border-radius: 50px;
	background: #F2F2F2;
	text-align: center;
	padding: 10px 0px;
}

.btn-custom-2 {
	border: 1px solid #CDCDCD;
	color: white;
	border-radius: 50px;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
	text-align: center;
	padding: 10px 0px;
}

/*END OF CUSTOM CLASS*/
.contact-us-header {
	padding: 5px;
}

.contact-us-header i {
	color: white;
}

.page-title-banner {
	background-image: url("../../images/title-banner.png");
	background-position: center;
	text-align: center;
	color: white;
	font-weight: bold;
	padding: 150px 0px;
}

.page-title {
	border-radius: 10px;
	background: linear-gradient(0deg,#243bb8 0%,   #3F64EB 100% );
	font-weight: bold;
	color: white;
}

/*HOME CSS*/
.home-main-content {
	background-color: #080c2c;
}

.home-main-content img {
	width: 100%;
}

.home-main-content-shape {
	background-color: white;
	border-radius: 5vw;
}

.home-sub-content {
	background-image: url("../../images/icon-background.png");
}

.home-sub-content-icon {
	text-align: center;
}

.home-sub-content-icon img {
	transition: 0.5s;
}

.home-sub-content-icon img:hover {
	filter: drop-shadow(0px 0px 30px #04F1FF);
	cursor: pointer;
}

.home-sub-content-icon-text {
	color: #FFF;
	padding: 10px 0px;
}

.home-slider-content {
	background-color: #3B51B0;
}

.home-slider-content img {
	width: 100%;
}

.home-fade-slider-content {
	background: radial-gradient(circle, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 51, 1) 75%, rgba(0, 0, 102, 1) 90%, rgba(0, 0, 153, 1) 100%);
}

.home-fade-slider-content video {
	margin: 10px auto;
	border-radius: 20px;
	border: 5px solid black;
	box-shadow: 0px -3px 6px grey;
}

.home-contact-us-content {
	background-image: url("../../images/home-contact-us-background.png");
}

/*HOME CSS END*/

/*ABOUT CSS*/
.about-us-main-content-list li {
	margin: 10px auto;
}

.about-us-icon .home-sub-content-title {
	line-height: 1;
	margin: 20px auto;
}

.about-us-icon {
	border-right: 3px solid lightgrey;
}

.about-us-icon:last-child {
	border-right: none;
}

.about-us-icon img {
	transition: 0.5s;
}

.about-us-icon img:hover {
	filter: drop-shadow(0px 0px 20px #04F1FF);
	cursor: pointer;
}

/*ABOUT US CSS END*/



.top-bar-text {
	color: white;
	font-weight: 600;
	padding: 15px;
	cursor: pointer;
	transition: 0.3s;
}

.top-bar-text:hover {
	color: black;
	background-color: #ffe5cc;
}

#productForm .form-control:focus {
	border-color: var(--bs-border-color);
	box-shadow: none;
}

#cart_icon,
#wishlist_icon {
	position: relative;
	color: #e1194d;
	cursor: pointer;
}

#cart_icon:hover,
#wishlist_icon:hover {
	color: black;
}

.totalItem {
	position: absolute;
	right: -10px;
	top: -10px;
	background-color: orange;
	color: white;
	padding: 0px 5px;
	border-radius: 50%;
	font-size: 12px;
}

/*EDIT CANVAS CSS*/
.primary-menu-trigger {
	padding: 5px;
	border-radius: 5px;
}

.is-expanded-menu .sub-menu-container,
.is-expanded-menu .mega-menu-content {
	background-color: #011351;
}

.cnvs-hamburger .cnvs-hamburger-inner,
.cnvs-hamburger .cnvs-hamburger-inner::before,
.cnvs-hamburger .cnvs-hamburger-inner::after {
	background-color: white;
}

.product-category.nav-pills .nav-link {
	padding: 20px 0px;
	font-weight: 700;
	border-radius: 50px;
	border: 1px solid #CDCDCD;
	background: #F2F2F2;
	color: black;
}

.product-category.nav-pills .nav-link.active,
.product-category.nav-pills .show>.nav-link {
	color: white;
	border-radius: 50px;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
}

.product-category li {
	margin: 0px 5px;
}

.mobile-product-category .swiper-slide {
	cursor: pointer;
	padding: 10px 30px;
	width: auto;
	text-align: center;
	font-weight: 700;
	border-radius: 50px;
	border: 1px solid #CDCDCD;
	background: #F2F2F2;
	color: black;
}

.mobile-product-category .swiper-slide.active {
	color: white;
	border-radius: 50px;
	background: linear-gradient(180deg, #5693F6 0%, #4A83F6 49.08%, #3F64EB 100%);
}

/*7 COLOR IN HEADER WRAP*/
.color-1 {
	background-color: #e1194d;
}

.color-2 {
	background-color: #ec6728;
}

.color-3 {
	background-color: #fcb117;
}

.color-4 {
	background-color: #25b24a;
}

.color-5 {
	background-color: #238bc7;
}

.color-6 {
	background-color: #6761ab;
}

.color-7 {
	background-color: #90298e;
}

.home-title {
	text-align: center;
	font-weight: bold;
	margin: 20px auto;
	font-size: 26px;
}

.footer-title {
	font-weight: bold;
	margin: 5px auto;
}

.footer-details a,
.product-title a {
	cursor: pointer;
	color: black;
}

.footer-details:hover,
.footer-details a:hover,
.product-title a:hover {
	color: #e1194d;
}

.copyrights {
	padding: 20px 0px;
	background-color: #14204F;
	color: white;
	font-weight: bold;
}

.product-box-shadow {
	height: 100%;
}

.product-box-shadow:hover {
	box-shadow: 0px 10px 20px grey;
}

.product-image {
	/*	height: 75%;*/
}

.product .product-image>a,
.product .product-image .slide a,
.product .product-image img {
	height: 100%;
	object-fit: cover;
}

.product-title {
	font-weight: 1000;
}

.product-price {
	font-size: unset;
	font-weight: 600;
}

.category-title {
	font-weight: bold;
	font-size: 20px;
	border-bottom: 1px solid grey;
	text-align: center;
}

/*MEMBER ACCOUNT CSS*/
.member-account-title {
	font-weight: bold;
	padding-bottom: 1rem;
	font-size: 20px;
	border-bottom: 1px solid grey;
}

.member-account-details {
	padding-top: 1rem;
}

.wishlist-table td img {
	height: 200px;
	width: 130px;
	object-fit: cover;
}

.mobile-wishlist-title {
	font-weight: bold;
	font-size: 12px;
}

.mobile-wishlist-details {
	font-size: 10px;
}

/*RESPONSIVE TABLE DISPLAY*/
.display-table-desktop {
	display: table-cell;
}

.display-table-mobile {
	display: none;
}

/*PRODUCT DETAILS*/
.radio-box input[type="radio"] {
	display: none;
}

.radio-box label {
	border: 2px solid grey;
	padding: 10px;
	cursor: pointer;
	border-radius: 3px;
	text-align: center;
}

.radio-box input[type="radio"]:checked+label {
	background-color: #e1194d;
	color: #fff;
	border: 2px solid white;
}

.product-details-title {
	font-weight: 700;
	font-size: 18px;
	margin: 5px 0px;
}

.attribute-name {
	font-size: smaller;
}

.attribute-description {
	color: grey;
}

.quantity-in-cart {
	font-weight: 700;
	font-size: 12px;
	position: absolute;
	bottom: 0px;
	right: 10px;
}

.text-truncate-2-line {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
}

/*CART VIEW CSS*/
.process-steps li .i-bordered.disabled {
	--cnvs-i-bg-color: lightgrey !important;
	border: none;
}

.canvas-tabs {
	border-bottom: 1px solid grey;
}

/* new update */
@keyframes floatUpDown {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(60px);
	}

}

.floating-icon {
	cursor: pointer;
}

.floating-icon img {
	animation: floatUpDown 5s ease-in-out infinite;
}



.py-lg-7 {
    padding-top: 5rem !important;
    padding-bottom: 9rem !important;
}

.kiosk-card {
    padding: 0;
    margin: 0;
    width: 100%;
}

.kiosk-img {
    width: 100%;
    height: auto;
    display: block;
}


@media (max-width: 991px) {

	#logo img {
		height: 80px;
	}

	.announcement-speaker {
		width: 90px;
	}

	/* §2f: on the home page keep .home-page-main transparent so the .home-bg image shows through (mobile) */
	.home-bg .home-page-main {
		background: transparent;
	}

	/* centre the trophy + LIVE TRANSACTION title */
	.ranking-title-box {
		display: block;
	}

	.ranking-title-trophy img {
		height: 150px;
	}

	.ranking-title {
		font-size: 36px;
	}

	.lucky-draw-button {
		font-size: 24px;
	}

	.golden-word img {
		height: 30px;
	}

	.promotion-more-info-button {
		font-size: 32px;
	}

	/*	SLOT*/
	.slot-amount {
		font-size: 20px;
	}

	/*	RESULT*/
	.stage-3 {
		padding: 0px 0px 10px 0px;
	}

	.stage-2 {
		padding: 0px 0px 40px 0px;
	}

	.stage-1 {
		padding: 0px 0px 60px 0px;
	}

	.stage-container .stage-main-part img {
		transform: scale(0.5);
	}

	.stage-container .stage-main-part {
		box-shadow: inset 0px 10px 2px 0px rgba(255, 255, 255, .5);
	}

	.stage-container .stage-border-part {
		box-shadow: inset 0px 10px 2px 0px rgba(255, 255, 255, .5);
	}

	.result-name {
		font-size: 20px;
	}

	.result-reward {
		box-shadow: 0 -1px 1px white, 0 1px 1px darkred;
		font-size: 18px;
	}

	/*    RESULT END*/
	/* MOBILE footer: character centered & large, its top poking out; banners overlap its bottom */
	.home-footer {
		/* §2f: transparent + auto height so the shared .home-bg shows through; top padding = gap under the LIVE TRANSACTION table */
		background: transparent;
		height: auto;
		padding: 28px 0 40px;
	}

	.home-footer .footer-bg {
		display: none;
	}

	.home-footer .footer-image {
		position: static;
		width: 100%;
		height: auto;
		text-align: center;
		margin-top: -10px;   /* §2f: character barely overlaps the section top; the 28px padding leaves clear space under the table */
	}

	.home-footer .footer-image img {
		display: block;
		width: 104%;         /* slightly wider than full-bleed; the extra bleeds off-screen */
		max-width: none;
		height: auto;
		margin: 0 0 0 5%;    /* shift right: the character sits left in the PNG, so this visually centres her */
	}

	/* banners flow below the character, then pulled up to overlap its bottom */
	.home-footer .footer-banners {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		margin: -55px auto 0;
		width: 94%;
		max-width: 384px;
		justify-content: center;
		gap: 10px;
		z-index: 3;
	}

	.home-footer .footer-banners a {
		flex: 1 1 0;
		width: auto;
		max-width: 120px;
	}

	#header-wrap #logo img {
		height: 60px;
	}

	.about-us-icon {
		border: 3px solid lightgrey;
		padding-top: 20px;
	}

	.about-us-icon:last-child {
		border: 3px solid lightgrey;
	}

	.about-us-icon:nth-child(1),
	.about-us-icon:nth-child(3) {
		border-right: none;
	}

	.about-us-icon:nth-child(1),
	.about-us-icon:nth-child(2) {
		border-bottom: none;
	}

	.product-desc {
		font-size: smaller;
	}

	.page-title-banner {
		padding: 80px 0px;
	}

	/*RESPONSIVE TABLE DISPLAY*/
	.display-table-desktop {
		display: none;
	}

	.display-table-mobile {
		display: table-cell;
	}

	.product-name,
	.product-price {
		font-size: smaller;
	}

	.vip-logo {
		height: 80px;
	}
}

@media (max-width: 768px) {

	.promotion-more-info-button {
		font-size: 28px;
	}

	.vip-logo {
		height: 60px;
	}

	.vip-table {
		background-position: 30%;
	}
	/* ===== MOBILE SIDE MENU (#mobileMenu) — restyled: dark panel, gold hairlines,
	   pill rows with a chevron, red-gradient hover, indented submenu rail.
	   Brand-red / rgba(248, 192, 0) recolor via §2g; gold rgba(255,206,65) stays gold. ===== */
	.offcanvas-start {
		width: 86% !important;
		max-width: 360px !important;
	}

	div#mobileMenu {
		background: linear-gradient(180deg, #1c1311 0%, #0b0807 100%);
		border-right: 1px solid rgba(255, 206, 65, 0.18);
		box-shadow: 8px 0 28px rgba(0, 0, 0, 0.55);
		color: #fff;
	}

	#mobileMenu .offcanvas-header {
		align-items: center;
		padding: 16px 18px 14px;
		border-bottom: 1px solid;
		border-image: linear-gradient(90deg, rgba(255, 206, 65, 0), rgba(255, 206, 65, 0.55) 50%, rgba(255, 206, 65, 0)) 1;
	}

	#mobileMenu #logo img {
		height: 52px;
		width: auto;
	}

	.custom-close {
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.22);
		border-radius: 50%;
		width: 38px;
		height: 38px;
		padding: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.15s ease, border-color 0.15s ease;
	}

	.custom-close:hover {
		background: linear-gradient(180deg, #F8C000 0%, #D88901 100%);
		border-color: rgba(255, 206, 65, 0.5);
	}

	.offcanvas-body {
		line-height: normal;
		padding: 12px 14px 26px;
	}

	.mobile-menu-container {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.offcanvas-body .list-group-item {
		list-style: none;
		border: 0;
		background: transparent;
		margin: 5px 0;
		padding: 0;
	}

	.offcanvas-body .list-group-item > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 13px 16px;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.035);
		border: 1px solid rgba(255, 255, 255, 0.06);
		color: #f2f2f2;
		font-weight: 600;
		font-size: 1rem;
		letter-spacing: 0.3px;
		text-decoration: none;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
	}

	.offcanvas-body .list-group-item > a::after {
		content: "\203A";
		font-size: 1.25rem;
		line-height: 1;
		color: rgba(255, 206, 65, 0.65);
		transition: transform 0.15s ease, color 0.15s ease;
	}

	.offcanvas-body .list-group-item > a:hover,
	.offcanvas-body .list-group-item > a:focus {
		background: linear-gradient(180deg, #F8C000 0%, #D88901 100%);
		border-color: rgba(255, 206, 65, 0.4);
		color: #fff;
	}

	.offcanvas-body .list-group-item > a:hover::after,
	.offcanvas-body .list-group-item > a:focus::after {
		color: #fff;
		transform: translateX(3px);
	}

	.offcanvas-body .list-group-item > a:active {
		transform: translateY(1px);
	}

	a.list-group-item-100 {
		color: #f2f2f2;
	}

	/* submenu: indented gold rail, lighter rows, no chevron */
	.sub-menu {
		list-style: none;
		margin: 4px 0 8px 8px;
		padding: 2px 0 2px 12px;
		border-left: 2px solid rgba(255, 206, 65, 0.22);
	}

	.sub-menu .list-group-item {
		margin: 2px 0;
	}

	.sub-menu .list-group-item > a {
		padding: 9px 14px;
		font-size: 0.9rem;
		font-weight: 500;
		color: #c9c9c9;
		background: transparent;
		border: 0;
		border-radius: 8px;
	}

	.sub-menu .list-group-item > a::after {
		content: "";
	}

	.sub-menu .list-group-item > a:hover,
	.sub-menu .list-group-item > a:focus {
		background: rgba(248, 192, 0, 0.16);
		color: #fff;
	}

	.home-ranking-table thead th {
		padding: 11px 8px;
	}

	.home-ranking-table tbody td {
		padding: 9px 8px;
		font-size: 12px;
	}
}

@media (max-width: 576px) {

	#logo img {
		height: 60px;
	}

	.ranking-title-trophy img {
		height: 120px;
	}

	.ranking-title {
		font-size: 24px;
	}

	.promotion-more-info-button {
		font-size: 20px;
		line-height: 1.2;
	}
}

@media (max-width: 478px) {

	.slot-amount {
		font-size: 14px;
	}
}

@keyframes speaker-shake {

	0%,
	100% {
		transform: rotate(0deg);
	}

	25%,
	75% {
		transform: rotate(10deg);
	}

	50% {
		transform: rotate(-10deg);
	}
}

/* =========================================================================
   STICKY SITE HEADER (top bar + desktop nav) — always visible
   The top bar and desktop nav (#header) are wrapped in .site-header-sticky in
   header.php. position:sticky pins the whole block to the top on both mobile
   and desktop while keeping it in normal flow, so no spacer is needed and the
   page content never jumps. The mobile bottom menu (.mobile-footer) is already
   position:fixed at the bottom, so both bars stay visible at all times.
   ========================================================================= */
.site-header-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	/* above the home swiper/banners (z-index 3), side icons (100) and the
	   mobile footer (1030); below the open side-menu offcanvas (1045). */
	z-index: 1040;
}

/* The Canvas theme pins #header-wrap with position:fixed and offsets it with a
   .header-wrap-clone spacer. Inside the sticky wrapper we want the gold nav to
   flow in place, so force it static and drop the now-redundant spacer. */
.site-header-sticky #header-wrap {
	position: relative !important;
}

.site-header-sticky .header-wrap-clone {
	display: none !important;
}

/* =========================================================================
   MOBILE SIDE-MENU AUTH BUTTONS — a two-up row sitting between the offcanvas
   logo and the menu list (see #mobileMenu in header.php). Left = primary
   action (Login / Deposit), right = secondary (Register / Logout).
   ========================================================================= */
.mobile-menu-auth {
	display: flex;
	gap: 10px;
	padding: 12px 16px 16px;
}

.mobile-menu-auth .auth-btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	transition: transform 0.1s ease, filter 0.15s ease;
}

.mobile-menu-auth .auth-btn:hover {
	filter: brightness(1.06);
}

.mobile-menu-auth .auth-btn:active {
	transform: translateY(1px);
}

/* left: red gradient, white label (recolors with §2g) */
.mobile-menu-auth .auth-btn-left {
	background: linear-gradient(180deg, #F8C000 0%, #D88901 100%);
	color: #fff;
}

/* right: gold gradient, dark label (stays gold under §2g) */
.mobile-menu-auth .auth-btn-right {
	background: linear-gradient(180deg, #FFCE41 0%, #DF8A09 100%);
	color: #D88901;
}

/* Login/Register: fill the viewport with the home-bg image on mobile too
   (overrides the .home-page-main mobile '100% auto' rule that otherwise
   left a bare #000a2e area on these short, form-only pages). */
.home-page-main.auth-page {
	background-size: cover;
	background-position: center;
}