* {
	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,#043a8b 0%,#0a84ff 100%);
}

.custom-button-3 {
	padding: 10px 0px;
	font-weight: 700;
	color: white;
	background: linear-gradient(0deg,#043a8b 0%,#0a84ff 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, #002B88 0%, #02113B 100%);
}

.mobile-login-resgiter .custom-button-2 {
	background: linear-gradient(180deg, #DE2226 0%, #6F1206 100%), linear-gradient(180deg, #002B88 0%, #02113B 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 #0a84ff 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: #DE2226;
}

#depositTab .nav-link {
	color: #0a84ff;
}

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

#header-wrap {
    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,
        linear-gradient(180deg, #DE2226 0%, #550706 100%),
        #D9D9D9;
}

#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: #DE2226;
}

/* 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(222, 34, 38, 0.08);
}

.side-bar-item.active {
	background: linear-gradient(180deg, #DE2226 0%, #6F1206 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, #DE2226 0%, #550706 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, #DE2226 0%, #6F1206 100%);
}

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

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

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

/* Form fields focus: blue ring -> red ring */
.profile-container .form-control:focus {
	border-color: #DE2226;
	box-shadow: 0 0 0 0.2rem rgba(222, 34, 38, 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: #DE2226;
	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(222, 34, 38, 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: #DE2226;
	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: #DE2226;
}

/* Dashboard: welcome banner + quick links */
.account-welcome {
	margin-bottom: 1.25rem;
	padding: 1.5rem;
	border-radius: 10px;
	background: linear-gradient(135deg, #DE2226 0%, #6F1206 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 #e7b24a;
	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: #DE2226;
}

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

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

/* form fields focus: blue ring -> red ring */
.custom-form-2 .form-control:focus {
	border-color: #DE2226;
	box-shadow: 0 0 0 0.2rem rgba(222, 34, 38, 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, #DE2226 0%, #550706 100%);
    color: #ffffff;
    font-weight: 700;
}


.home-page-main {
	background: url("../../../images/home/home-bg.png");
	background-position: center;
	background-size: cover;
	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, #FFFFFF 0%, #FBF292 40.38%, #EC8E0D 79.81%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0px 2px 2px rgba(190, 50, 6, 0.8)) 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%, #e7b24a 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: #2b0606;
	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, #b81c1c 0%, #7a0e0e 55%, #5a0808 100%);
	border-bottom: 2px solid #e7b24a;
}

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

.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: #f4c13d;
}

/* the section IS the background image — shown in full, no cropping, no extra colour */
.home-footer {
	position: relative;
}

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

/* 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, #DE2226 0%, #550706 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;
	}

	/* show the full-width home-bg (with its side decorations) instead of cropping it via cover */
	.home-page-main {
		background-size: 100% auto;
		background-position: top center;
		background-repeat: no-repeat;
		background-color: #000a2e;
	}

	/* 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 {
		/* the wide banner is too short to overlay on a phone — use it as a cover backdrop */
		background: url('../../../images/home/footer-bg-mobile.png') center / cover no-repeat;
		/* 1px top stops the character's negative margin from collapsing the section;
		   bottom padding = the spacing left below the banners (also makes the section taller) */
		padding: 1px 0 60px;
	}

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

	.home-footer .footer-image {
		position: static;
		width: 100%;
		height: auto;
		text-align: center;
		margin-top: -95px;   /* character's top sticks out above the section (like desktop) */
	}

	.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: -90px 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(222,34,38) 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, #DE2226 0%, #6F1206 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, #DE2226 0%, #6F1206 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(222, 34, 38, 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, #DE2226 0%, #6F1206 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: #6F1206;
}