:root {
--theme-primary:#2e2e33;
--theme-secondary:#000000;
--theme-text:#fae07e;
--theme-background:url("");
--nav-button-primary-default-primary:#404040;
--nav-button-primary-default-secondary:#373434;
--nav-button-primary-default-text:#fae07e;
--nav-button-primary-hover-primary:#5d5b5b;
--nav-button-primary-hover-secondary:#000000;
--nav-button-primary-hover-text:#fae07e;
--nav-button-secondary-default-primary:#5d5b5b;
--nav-button-secondary-default-secondary:#000000;
--nav-button-secondary-default-text:#fae07e;
--nav-button-secondary-hover-primary:#5d5b5b;
--nav-button-secondary-hover-secondary:#000000;
--nav-button-secondary-hover-text:#fae07e;
--nav-button-third-default-primary:#ffea00;
--nav-button-third-default-secondary:#000000;
--nav-button-third-default-text:#000000;
--nav-button-third-hover-primary:#334bff;
--nav-button-third-hover-secondary:#ffffff;
--nav-button-third-hover-text:#000000;
--nav-button-fourth-default-primary:#222222;
--nav-button-fourth-default-secondary:#222222;
--nav-button-fourth-default-text:#000000;
--nav-button-fourth-hover-primary:#000000;
--nav-button-fourth-hover-secondary:#000000;
--nav-button-fourth-hover-text:#000000;
--nav-text-primary-primary:#ffffff;
--nav-text-primary-secondary:#ffffff;
--nav-text-secondary-primary:#fafafa;
--nav-text-secondary-secondary:#ffffff;
--nav-text-third-primary:#ffffff;
--nav-text-third-secondary:#ffffff;
--nav-text-fourth-primary:#ffffff;
--nav-text-fourth-secondary:#ffffff;
--slide-button-primary-default-primary:#5c5c5c;
--slide-button-primary-default-secondary:#12152a;
--slide-button-primary-default-text:#ffffff;
--slide-button-primary-hover-primary:#000000;
--slide-button-primary-hover-secondary:#000000;
--slide-button-primary-hover-text:#000000;
--slide-button-secondary-default-primary:#004cab;
--slide-button-secondary-default-secondary:#282828;
--slide-button-secondary-default-text:#ffffff;
--slide-button-secondary-hover-primary:#000000;
--slide-button-secondary-hover-secondary:#000000;
--slide-button-secondary-hover-text:#000000;
--slide-button-third-default-primary:#004cab;
--slide-button-third-default-secondary:#282828;
--slide-button-third-default-text:#ffffff;
--slide-button-third-hover-primary:#e0245e;
--slide-button-third-hover-secondary:#e0245e;
--slide-button-third-hover-text:#ffffff;
--slide-button-fourth-default-primary:#222222;
--slide-button-fourth-default-secondary:#1f103d;
--slide-button-fourth-default-text:#ffffff;
--slide-button-fourth-hover-primary:#000000;
--slide-button-fourth-hover-secondary:#000000;
--slide-button-fourth-hover-text:#000000;
--slide-text-primary-primary:#ff6f00;
--slide-text-primary-secondary:#ffa000;
--slide-text-secondary-primary:#ff8f00;
--slide-text-secondary-secondary:#ffb300;
--slide-text-third-primary:#fdd835;
--slide-text-third-secondary:#ffeb3b;
--slide-text-fourth-primary:#c2185b;
--slide-text-fourth-secondary:#d81b60;
--content-button-primary-default-primary:#3a3833;
--content-button-primary-default-secondary:#121214;
--content-button-primary-default-text:#ffffff;
--content-button-primary-hover-primary:#ffffff;
--content-button-primary-hover-secondary:#000000;
--content-button-primary-hover-text:#000000;
--content-button-secondary-default-primary:#ae0a0a;
--content-button-secondary-default-secondary:#ff03a7;
--content-button-secondary-default-text:#ffffff;
--content-button-secondary-hover-primary:#000000;
--content-button-secondary-hover-secondary:#000000;
--content-button-secondary-hover-text:#000000;
--content-button-third-default-primary:#004cab;
--content-button-third-default-secondary:#282828;
--content-button-third-default-text:#000000;
--content-button-third-hover-primary:#000000;
--content-button-third-hover-secondary:#000000;
--content-button-third-hover-text:#000000;
--content-button-fourth-default-primary:#000000;
--content-button-fourth-default-secondary:#2c07e4;
--content-button-fourth-default-text:#ffffff;
--content-button-fourth-hover-primary:#000000;
--content-button-fourth-hover-secondary:#000000;
--content-button-fourth-hover-text:#000000;
--content-text-primary-primary:#ffffff;
--content-text-primary-secondary:#e0245f;
--content-text-secondary-primary:#e0245f;
--content-text-secondary-secondary:#ffffff;
--content-text-third-primary:#ffee00;
--content-text-third-secondary:#ff0000;
--content-text-fourth-primary:#ffffff;
--content-text-fourth-secondary:#000000;
--popup-button-primary-default-primary:#404040;
--popup-button-primary-default-secondary:#373434;
--popup-button-primary-default-text:#fae07e;
--popup-button-primary-hover-primary:#ffffff;
--popup-button-primary-hover-secondary:#000000;
--popup-button-primary-hover-text:#000000;
--popup-button-secondary-default-primary:#e6d19b;
--popup-button-secondary-default-secondary:#bba06b;
--popup-button-secondary-default-text:#ffffff;
--popup-button-secondary-hover-primary:#bba06b;
--popup-button-secondary-hover-secondary:#e6d19b;
--popup-button-secondary-hover-text:#ffffff;
--popup-button-third-default-primary:#ff0039;
--popup-button-third-default-secondary:#2e1919;
--popup-button-third-default-text:#ffffff;
--popup-button-third-hover-primary:#2e1919;
--popup-button-third-hover-secondary:#ff0039;
--popup-button-third-hover-text:#ffffff;
--popup-button-fourth-default-primary:#000000;
--popup-button-fourth-default-secondary:#000000;
--popup-button-fourth-default-text:#000000;
--popup-button-fourth-hover-primary:#000000;
--popup-button-fourth-hover-secondary:#000000;
--popup-button-fourth-hover-text:#000000;
--popup-text-primary-primary:#000000;
--popup-text-primary-secondary:#000000;
--popup-text-secondary-primary:#000000;
--popup-text-secondary-secondary:#000000;
--popup-text-third-primary:#000000;
--popup-text-third-secondary:#000000;
--popup-text-fourth-primary:#000000;
--popup-text-fourth-secondary:#000000;
--logindaily-button-primary-default-primary:#000000;
--logindaily-button-primary-default-secondary:#000000;
--logindaily-button-primary-default-text:#ffffff;
--logindaily-button-primary-hover-primary:#000000;
--logindaily-button-primary-hover-secondary:#000000;
--logindaily-button-primary-hover-text:#ffffff;
--logindaily-button-secondary-default-primary:#ffffff;
--logindaily-button-secondary-default-secondary:#ffffff;
--logindaily-button-secondary-default-text:#000000;
--logindaily-button-secondary-hover-primary:#ffffff;
--logindaily-button-secondary-hover-secondary:#ffffff;
--logindaily-button-secondary-hover-text:#000000;
--logindaily-button-third-default-primary:#f52e2e;
--logindaily-button-third-default-secondary:#040000;
--logindaily-button-third-default-text:#ffffff;
--logindaily-button-third-hover-primary:#040000;
--logindaily-button-third-hover-secondary:#f52e2e;
--logindaily-button-third-hover-text:#ffffff;
--logindaily-button-fourth-default-primary:#000000;
--logindaily-button-fourth-default-secondary:#000000;
--logindaily-button-fourth-default-text:#000000;
--logindaily-button-fourth-hover-primary:#000000;
--logindaily-button-fourth-hover-secondary:#000000;
--logindaily-button-fourth-hover-text:#000000;
--logindaily-text-primary-primary:#000000;
--logindaily-text-primary-secondary:#000000;
--logindaily-text-secondary-primary:#000000;
--logindaily-text-secondary-secondary:#000000;
--logindaily-text-third-primary:#000000;
--logindaily-text-third-secondary:#000000;
--logindaily-text-fourth-primary:#000000;
--logindaily-text-fourth-secondary:#000000;
--footer-button-primary-default-primary:#000000;
--footer-button-primary-default-secondary:#434546;
--footer-button-primary-default-text:#ffffff;
--footer-button-primary-hover-primary:#000000;
--footer-button-primary-hover-secondary:#000000;
--footer-button-primary-hover-text:#000000;
--footer-button-secondary-default-primary:#4155e6;
--footer-button-secondary-default-secondary:#000000;
--footer-button-secondary-default-text:#000000;
--footer-button-secondary-hover-primary:#000000;
--footer-button-secondary-hover-secondary:#000000;
--footer-button-secondary-hover-text:#000000;
--footer-button-third-default-primary:#000000;
--footer-button-third-default-secondary:#000000;
--footer-button-third-default-text:#000000;
--footer-button-third-hover-primary:#000000;
--footer-button-third-hover-secondary:#000000;
--footer-button-third-hover-text:#000000;
--footer-button-fourth-default-primary:#000000;
--footer-button-fourth-default-secondary:#000000;
--footer-button-fourth-default-text:#000000;
--footer-button-fourth-hover-primary:#000000;
--footer-button-fourth-hover-secondary:#000000;
--footer-button-fourth-hover-text:#000000;
--footer-text-primary-primary:#000000;
--footer-text-primary-secondary:#000000;
--footer-text-secondary-primary:#000000;
--footer-text-secondary-secondary:#000000;
--footer-text-third-primary:#000000;
--footer-text-third-secondary:#000000;
--footer-text-fourth-primary:#000000;
--footer-text-fourth-secondary:#000000;
--button-primary-default-primary:#3a3833;
--button-primary-default-secondary:#121214;
--button-primary-default-text:#ffffff;
--button-primary-hover-primary:#001219;
--button-primary-hover-secondary:#000000;
--button-primary-hover-text:#000000;
--button-secondary-default-primary:#d3df2a;
--button-secondary-default-secondary:#ffae00;
--button-secondary-default-text:#ffffff;
--button-secondary-hover-primary:#00ff33;
--button-secondary-hover-secondary:#000000;
--button-secondary-hover-text:#ffffff;
--button-third-default-primary:#000000;
--button-third-default-secondary:#000000;
--button-third-default-text:#000000;
--button-third-hover-primary:#000000;
--button-third-hover-secondary:#000000;
--button-third-hover-text:#000000;
--button-fourth-default-primary:#000000;
--button-fourth-default-secondary:#000000;
--button-fourth-default-text:#000000;
--button-fourth-hover-primary:#000000;
--button-fourth-hover-secondary:#000000;
--button-fourth-hover-text:#000000;
}
:root {
	--bg-dark: #0f0f0f;
	--card-bg: #1a1a1a;
	--gold-start: #DF9F28;
	--gold-end: #FDB931;
	--text-gold: #fcc201;
	--text-muted: #888;
	--primary-gradient: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
	--bet-gradient: linear-gradient(135deg, #df9f28, #fdb931);
	--bg-body: #f4f7fa;
	--card-radius: 25px;
	--card-bg: #1a1a1a;
	--status-open-bg: rgba(33, 150, 243, 0.2);
	--status-open-color: #64b5f6;
	--status-closed-bg: rgba(244, 67, 54, 0.2);
	--status-closed-color: #ef5350;
	--status-pending-bg: rgba(244, 67, 54, 0.2);
	--status-pending-color: #ef5350;
	--text-gold: #fdb931;
}

/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4-ORWzVaF5NQ.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4-ORWoVaF5NQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4-ORWpVaF5NQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4-ORWnVaE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcraBGwCYdA.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcraaGwCYdA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcrabGwCYdA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcraVGwA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5KPxWzVaF5NQ.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5KPxWoVaF5NQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5KPxWpVaF5NQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5KPxWnVaE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWzVaF5NQ.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWoVaF5NQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWpVaF5NQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWnVaE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- RESET & BASIC SETUP --- */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Kanit', sans-serif;
	color: white;
	background-image:
		radial-gradient(circle at center top, #1926BD, #02104e),
		url("https://demo.umabet.vip/assets/images/meedee/main-bg.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;

}

a { text-decoration: none; color: white; }
ul { list-style: none; }

/* --- CUSTOM SCROLLBAR --- */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: #0a2e16;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #d49a26 0%, #8a5e08 100%);
	border-radius: 4px;
	border: 1px solid #0a2e16;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #ffd700 0%, #ff8f00 100%);
}

* {
	scrollbar-width: thin;
	scrollbar-color: #d49a26 #0a2e16;
}

/* --- UTILITIES --- */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 10px;
}

.hidden { display: none !important; }

/* Loading Spinner */
.loader-container { text-align: center; padding: 40px; color: #ffd700; }
.spinner { border: 4px solid rgba(255, 255, 255, 0.1); width: 40px; height: 40px; border-radius: 50%; border-left-color: #ffd700; animation: spin 1s linear infinite; margin: 0 auto 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


.btn-gold {
	background: linear-gradient(180deg, #fcd757 0%, #e6a918 50%, #bf800b 100%);
	border: 2px solid #fff5c2;
	color: #583600;
	font-weight: 700;
	padding: 8px 20px;
	border-radius: 25px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.3);
	cursor: pointer;
	transition: transform 0.1s;
	text-shadow: 0 1px 0 rgba(255,255,255,0.4);
	display: inline-block;
	white-space: nowrap;
}

.btn-gold:hover {
	transform: scale(1.05);
	background: linear-gradient(180deg, #ffeb85 0%, #ffbf36 100%);
}

.btn-gold.large {
	width: 100%;
	font-size: 1.2rem;
	padding: 12px;
	margin-bottom: 15px;
}

/* --- HEADER BUTTONS --- */
.btn-header-register {
	background: linear-gradient(180deg, #ff8c00 0%, #d35400 50%, #a04000 100%);
	border: 2px solid #fff;
	color: white;
	font-weight: 700;
	padding: 8px 20px;
	border-radius: 25px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.3);
	cursor: pointer;
	transition: transform 0.1s;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
	display: inline-block;
	white-space: nowrap;
}

.btn-header-register:hover {
	transform: scale(1.05);
	background: linear-gradient(180deg, #ffa500 0%, #e67e22 50%, #b05500 100%);
}

/* --- HEADER (FIXED) --- */
header {
	background: rgba(0, 30, 10, 0.7);
	padding: 10px 0;
	position: sticky;
	top: 0;
	z-index: 999;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	margin-bottom: 0;
	width: 100%;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.logo {
	width: 50px;
	height: 50px;
	background: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #81e6d9;
	box-shadow: 0 0 15px #81e6d9;
	color: #0f3d20;
	font-weight: bold;
	font-size: 0.7rem;
	text-align: center;
	line-height: 1.1;
	flex-shrink: 0;
}

.header-right {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-shrink: 0;
}

.rule-btn {
	font-size: 0.9rem;
	color: #eee;
	margin-right: 5px;
	cursor: pointer;
	transition: color 0.2s;
	white-space: nowrap;
}

.rule-btn:hover { color: #ffd700; }

/* --- MOBILE LOGIN FORM --- */
.mobile-login-section {
	display: none;
	background: url('https://demo.umabet.vip/assets/images/meedee/main-bg.jpg');
	background-size: cover;
	background-blend-mode: multiply;
	padding: 20px;
	border-radius: 15px;
	margin-bottom: 20px;
	border: 2px solid #ffd700;
	text-align: center;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.mobile-login-logo {
	width: 80px;
	height: 80px;
	background: white;
	border-radius: 50%;
	margin: 0 auto 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #81e6d9;
	box-shadow: 0 0 10px rgba(129, 230, 217, 0.6);
	color: #0f3d20;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.1;
}

/* --- SWIPER SLIDER --- */
.promo-slider-container {
	margin-bottom: 0px;
	border-radius: 0px;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0,0,0,0.3);
	border: 0px solid #ffd700;
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	min-height: 150px;
}

.swiper-pagination-bullet {
	background: #fff;
	opacity: 0.5;
}
.swiper-pagination-bullet-active {
	background: #ffd700;
	opacity: 1;
}

/* --- TOP LOTTO GRID --- */
.section-title {
	background: #00c853;
	display: inline-block;
	padding: 5px 15px;
	border-radius: 10px 10px 0 0;
	font-weight: bold;
	border: 1px solid rgba(255,255,255,0.2);
	border-bottom: none;
}

.top-lotto-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	background: rgba(255,255,255,0.1);
	padding: 15px;
	border-radius: 0 10px 10px 10px;
	margin-bottom: 30px;
	backdrop-filter: blur(5px);
}

.lotto-card {
	background: linear-gradient(135deg, #d32f2f, #b71c1c);
	border-radius: 10px;
	padding: 10px;
	text-align: center;
	border: 2px solid #ffd700;
	box-shadow: 0 4px 8px rgba(0,0,0,0.4);
	transition: transform 0.2s;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.lotto-card:hover { transform: translateY(-5px); }

.lotto-card.blue { background: linear-gradient(135deg, #1565c0, #0d47a1); }
.lotto-card.pink { background: linear-gradient(135deg, #e91e63, #c2185b); }
.lotto-card.orange { background: linear-gradient(135deg, #ff9800, #e65100); }
.lotto-card.green { background: linear-gradient(135deg, #4caf50, #1b5e20); }
.lotto-card.purple { background: linear-gradient(135deg, #9c27b0, #4a148c); }
.lotto-card.red { background: linear-gradient(135deg, #f44336, #b71c1c); }


.lotto-img-placeholder {
	width: 40px;
	height: 40px;
	background: white;
	border-radius: 50%;
	margin: 0 auto 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	font-size: 1.2rem;
	box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.lotto-img-placeholder img {
	width: 25px;
	height: auto;
}

.lotto-name {
	font-size: 0.90rem;
	font-weight: bold;
	background: rgba(0,0,0,0.3);
	border-radius: 10px;
	padding: 2px 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- MAIN CONTENT (SLOTS & RESULTS) --- */
.main-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* Slots Section */
.slots-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.slot-item {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #555;
	cursor: pointer;
	background: #000;
}

.slot-item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s;
	opacity: 0.9;
}

.slot-item:hover img { transform: scale(1.1); opacity: 1;}

/* --- LIVE RESULTS TABLE --- */
.result-panel {
	background: #2b2b2b;
	border: 3px solid #b8860b;
	border-radius: 15px;
	padding: 5px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.panel-header {
	background: linear-gradient(180deg, #d49a26 0%, #8a5e08 100%);
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	text-shadow: 0 1px 2px black;
	border: 1px solid #ffd700;
}

.sub-panel-header {
	background: linear-gradient(180deg, #e6b800 0%, #b38f00 100%);
	color: #333;
	text-align: center;
	font-weight: bold;
	padding: 8px;
	border-radius: 20px;
	margin: 10px 5px;
	box-shadow: inset 0 2px 5px rgba(255,255,255,0.4);
}

.result-box {
	border: 1px solid #666;
	border-radius: 10px;
	padding: 10px;
	margin: 5px;
	background: #3a3a3a;
}

.date-row {
	text-align: center;
	font-size: 0.9rem;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.flag-small { width: 20px; box-shadow: 0 0 2px white; }

.prize-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
	font-size: 0.8rem;
	color: #ddd;
}

.number-display {
	background: #fff;
	color: #000;
	font-weight: 700;
	font-size: 1.2rem;
	text-align: center;
	padding: 5px;
	border-radius: 5px;
	box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
	margin-bottom: 10px;
	letter-spacing: 2px;
}

.row-grid-2 {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 10px;
}

.row-grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.other-results {
	margin-top: 15px;
}

.result-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	border-bottom: 1px solid #444;
	font-size: 0.9rem;
}

.result-list-item:last-child { border-bottom: none; }

.result-list-item span:first-child { flex: 2; display: flex; align-items: center; gap: 5px; }
.result-list-item span:not(:first-child) { flex: 1; text-align: right; font-weight: bold; }

/* --- FOOTER --- */
footer {
	text-align: center;
	padding: 20px;
	background: #02104e;
	font-size: 0.8rem;
	color: #FFF;
	margin-top: 40px;
	border-top: 1px solid rgba(255,255,255,0.1);
}

/* --- DASHBOARD SECTION --- */
.dashboard-section {
	margin-top: 30px;
}

.latest-lotto-header {
	background: #2d8a4e;
	color: white;
	padding: 10px 15px;
	border-radius: 15px 15px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	border: 2px solid #888;
	border-bottom: none;
}

.lotto-list-container {
	background: rgba(0,0,0,0.3);
	border: 2px solid #888;
	border-top: none;
	border-radius: 0 0 15px 15px;
	padding: 10px;
	max-height: 360px;
	overflow-y: auto;
}

.lotto-list-item {
	background: linear-gradient(180deg, #fff 0%, #eee 100%);
	border-radius: 25px;
	padding: 8px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	color: #333;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.lotto-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lotto-flag-circle {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.lotto-flag-circle img { width: 100%; height: 100%; object-fit: cover; }

.lotto-title { font-weight: bold; font-size: 0.9rem; }

.lotto-timer {
	font-size: 0.75rem;
	background: transparent;
	color: #007934;
	display: flex;
	align-items: center;
	gap: 5px;
}

.timer-badge {
	background: #dc3545;
	color: white;
	padding: 1px 6px;
	border-radius: 10px;
	font-size: 0.7rem;
	min-width: 60px;
	text-align: center;
}

.btn-bet-now {
	background: linear-gradient(180deg, #ff0000 0%, #cc0000 100%);
	color: white;
	border: none;
	border-radius: 20px;
	padding: 5px 15px;
	font-size: 0.8rem;
	font-weight: bold;
	box-shadow: 0 2px 0 #990000;
}

.btn-bet-now.green {
	background: linear-gradient(180deg, #00c853 0%, #009624 100%);
	box-shadow: 0 2px 0 #00600f;
}

/* User Dashboard */
.user-dashboard-card {
	background: #1926bd;
	background: linear-gradient(135deg, #1926bd 0%, #1926bd 100%);
	border: 2px solid #ffd700;
	border-radius: 15px;
	padding: 15px;
	height: 100%;
}

.user-info-bar {
	background: linear-gradient(90deg, #d98a0d 0%, #b36b00 100%);
	color: white;
	padding: 5px 15px;
	border-radius: 15px;
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	margin-bottom: 10px;
	border: 1px solid #ffd700;
}

.balance-box {
	background: #e8f5e9;
	border-radius: 15px;
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	color: #333;
}

.balance-amount { font-size: 1.8rem; font-weight: bold; color: #000; }

.btn-deposit {
	background: #00c853;
	color: white;
	border: none;
	border-radius: 10px;
	padding: 5px 15px;
	font-size: 1.25rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 5px;
	box-shadow: 0 3px 0 #007029;
}

.action-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	margin-bottom: 10px;
}

.action-tab-btn {
	background: linear-gradient(180deg, #ffc107 0%, #ff8f00 100%);
	border: 1px solid #d39e00;
	border-radius: 20px;
	color: #333;
	font-size: 1.25rem;
	font-weight: bold;
	padding: 5px;
	text-align: center;
	cursor: pointer;
}

.action-tab-btn.withdraw {
	background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
	color: white;
	border: 1px solid #7f0000;
}

.big-menu-btn {
	width: 100%;
	border-radius: 15px;
	padding: 10px;
	margin-bottom: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 1.3rem;
	color: white;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	border: 2px solid rgba(255,255,255,0.3);
	cursor: pointer;
}

.big-lotto-btn {
	background: linear-gradient(180deg, #ff5722 0%, #d84315 100%);
	box-shadow: 0 4px 0 #bf360c;
}

.big-report-btn {
	background: linear-gradient(180deg, #b71c1c 0%, #7f0000 100%);
	box-shadow: 0 4px 0 #500000;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.menu-grid-dashboard {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin-bottom: 10px;
}

.grid-menu-item {
	background: linear-gradient(180deg, #ffd54f 0%, #ffb300 100%);
	border-radius: 10px;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #3e2723;
	font-size: 1rem;
	font-weight: bold;
	border: 1px solid #ffca28;
	cursor: pointer;
}

.grid-menu-item i { font-size: 1.8rem; margin-bottom: 3px; }

.btn-ticket-history {
	width: 100%;
	background: linear-gradient(180deg, #ffb300 0%, #ff6f00 100%);
	border-radius: 20px;
	padding: 8px;
	color: #3e2723;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid #ff8f00;
	cursor: pointer;
}

/* --- CASINO SECTIONS --- */
.casino-section {
	margin-top: 40px;
	position: relative;
	padding-top: 20px;
}

.casino-header-wrapper {
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 100%;
	text-align: center;
}

.casino-header {
	background: linear-gradient(180deg, #e65100 0%, #bf360c 100%);
	color: white;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 8px 50px;
	border-radius: 25px 25px 0 0;
	border: 2px solid #ffccbc;
	border-bottom: none;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
	display: inline-block;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.casino-container {
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid #e65100;
	border-radius: 20px;
	padding: 30px 15px 15px 15px;
	position: relative;
	box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

.casino-grid, .game-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.casino-item {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s;
	border: 1px solid #555;
	background: #000;
	aspect-ratio: 16/9;
}

.casino-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
	border-color: #ffd700;
}

.casino-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.9;
}

.casino-item:hover img { opacity: 1; }

/* --- Game Page Grids --- */
.game-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
}

.category-card, .game-card {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s;
	border: 1px solid #555;
	background: #000;
	aspect-ratio: 16/9;
}

.game-card {
    aspect-ratio: 4/5;
}

.category-card:hover, .game-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
	border-color: #ffd700;
}

.category-card-image, .game-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.9;
}

.category-card:hover .category-card-image, .game-card:hover .game-card-image {
    opacity: 1;
}

.game-card-title {
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 8px;
    font-size: 0.8rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    width: 100%;
}

/* --- Check-in Page Styles --- */
.checkin-header {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    padding: 20px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: 20px;
}
.checkin-title-box h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: bold;
}
.checkin-title-box p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.9;
}
.checkin-timer-box {
    text-align: right;
}
.checkin-timer-box span {
    font-size: 0.8rem;
    opacity: 0.9;
}
#countdown-timer {
    font-size: 1.5rem;
    font-weight: bold;
}
.checkin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
}
.checkin-day {
    background: #333;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    border: 2px solid #555;
    transition: all 0.3s ease;
}
.checkin-day .day-number {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.checkin-day .reward-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #ffd700;
}
.checkin-day .reward-amount {
    font-size: 1rem;
    font-weight: bold;
}
.checkin-day.notdue {
    background: #444;
    color: #888;
}
.checkin-day.claimed {
    background: #28a745;
    border-color: #3cff43;
    color: white;
}
.checkin-day.claimed .reward-icon {
    color: #fff;
}
.checkin-day.special {
    background: linear-gradient(135deg, #ffc107, #ff8f00);
    border-color: #ffd700;
    color: #333;
    cursor: pointer;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}
.checkin-day.special:hover {
    transform: scale(1.1);
}




/* Ribbons */
.ribbon {
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	overflow: hidden;
	z-index: 10;
}

.ribbon span {
	position: absolute;
	display: block;
	width: 100px;
	padding: 3px 0;
	background-color: #d32f2f;
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	color: #fff;
	font: 700 10px/1 'Kanit', sans-serif;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	text-transform: uppercase;
	text-align: center;
	left: -22px;
	top: 12px;
	transform: rotate(-45deg);
}

.ribbon.hot span { background: linear-gradient(to right, #ffd700 0%, #ff8f00 100%); color: #3e2723; }
.ribbon.new span { background: linear-gradient(to right, #ff1744 0%, #b71c1c 100%); }

/* --- PROMOTIONS & NEWS STYLES --- */
.promo-news-section {
	margin-top: 40px;
	padding-bottom: 20px;
}

.pn-header {
	border-left: 5px solid #ffd700;
	padding-left: 10px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #fff;
	margin-bottom: 20px;
	text-shadow: 0 2px 2px rgba(0,0,0,0.5);
	background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 5px;
}

.promo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-bottom: 40px;
}

.promo-card {
	border-radius: 15px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	transition: transform 0.3s, box-shadow 0.3s;
	border: 1px solid #444;
	background: #000;
}

.promo-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
	border-color: #ffd700;
}

.promo-card img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 0.3s;
}

.promo-card:hover img { opacity: 0.8; }

.news-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin-bottom: 40px;
}

.news-card {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.news-card:hover { transform: translateY(-5px); }

.news-img {
	height: 150px;
	background: #ccc;
	overflow: hidden;
}

.news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.news-card:hover .news-img img { transform: scale(1.1); }

.news-content {
	padding: 15px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.news-tag {
	font-size: 0.7rem;
	background: #2d8a4e;
	color: white;
	padding: 2px 8px;
	border-radius: 4px;
	align-self: flex-start;
	margin-bottom: 5px;
}

.news-title {
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
	font-size: 1rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-date {
	font-size: 0.75rem;
	color: #888;
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 5px;
}

/* --- ARTICLE MODAL --- */
.article-modal-content {
	background: #fff;
	color: #333;
	max-width: 800px;
	width: 95%;
	height: 90vh;
	overflow-y: auto;
	border-radius: 10px;
	position: relative;
}

.article-cover {
	width: 100%;
	object-fit: cover;
}

.article-body {
	padding: 30px;
}

.article-header-title {
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 10px;
	color: #ffd700;
}

.article-meta {
	color: #aaa;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #444;
	font-size: 0.9rem;
}

.article-text {
	line-height: 1.8;
	font-size: 1rem;
	color: #ddd;
}

/* --- PROMOTION DETAIL MODAL STYLES --- */
.promo-detail-img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 5px;
	margin-bottom: 15px;
	border: 1px solid #444;
}

.promo-detail-title {
	font-size: 1.5rem;
	color: #ffd700;
	margin-bottom: 10px;
	border-bottom: 1px solid #444;
	padding-bottom: 10px;
}

.promo-detail-desc {
	font-size: 0.9rem;
	color: #ccc;
	margin-bottom: 20px;
	line-height: 1.6;
}

.promo-active-bar {
	background: linear-gradient(90deg, #d35400 0%, #a04000 100%);
	color: white;
	padding: 10px;
	margin-top: 15px;
	border-radius: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	animation: fadeIn 0.3s;
}

.btn-cancel-promo {
	background: #333;
	color: #fff;
	border: 1px solid #555;
	padding: 4px 10px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 0.8rem;
}

.btn-cancel-promo:hover {
	background: #555;
}

/* --- MODAL SYSTEM (Generic) --- */
.modal-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.85);
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
}

/* Generic Simple Card */
.simple-modal-card {
	background: #1a1a1a;
	border: 2px solid #ffd700;
	border-radius: 20px;
	width: 90%;
	max-width: 500px;
	padding: 20px;
	position: relative;
	color: white;
	box-shadow: 0 0 20px rgba(0,0,0,0.8);
	max-height: 90vh;
	overflow-y: auto;
}

.simple-modal-header {
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	color: #ffd700;
	margin-bottom: 20px;
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
}

.simple-modal-body {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #ddd;
}

/* Login Card */
.login-card {
	background-image:
		linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
		url("https://demo.umabet.vip/assets/images/meedee/main-bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 20px;
	width: 95%;
	max-width: 850px;
	display: flex;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 30px rgba(0, 255, 127, 0.3);
	border: 2px solid #ffd700;
	min-height: 550px;
}

.login-left {
	flex: 1;
	padding: 30px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

.login-right {
	flex: 1;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 2;
}

.model-img {
	max-width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: contain;
	margin-bottom: -10px;
	filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}

.close-modal {
	position: absolute;
	top: 15px;
	right: 20px;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
	z-index: 10;
	background: rgba(0,0,0,0.5);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid white;
	transition: all 0.3s;
}

.close-modal:hover {
	background: red;
	transform: rotate(90deg);
}

.login-logo {
	width: 110px;
	height: 110px;
	background: white;
	border-radius: 50%;
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4px solid #81e6d9;
	box-shadow: 0 0 20px rgba(129, 230, 217, 0.6);
	color: #0f3d20;
	font-weight: bold;
	font-size: 1.5rem;
	text-align: center;
	line-height: 1.2;
}

.input-group {
	width: 100%;
	margin-bottom: 15px;
	position: relative;
}

.input-group i {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #333;
	font-size: 1.2rem;
	z-index: 1;
}

.form-control-modal {
	width: 100%;
	padding: 12px 12px 12px 45px;
	border-radius: 10px;
	border: none;
	outline: none;
	font-family: 'Kanit';
	font-size: 1rem;
	height: 50px;
}

select.form-control-modal { appearance: none; cursor: pointer; }
.forgot-pass { width: 100%; text-align: center; font-size: 0.9rem; margin: 10px 0 20px; text-decoration: underline; color: #fff; cursor: pointer; }

.btn-modal { width: 100%; border-radius: 30px; padding: 12px; font-size: 1.35rem; font-weight: bold; border: none; margin-bottom: 15px; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: transform 0.1s; }
.btn-modal:hover { transform: scale(1.02); }
.btn-login-main { background: linear-gradient(180deg, #ffe033 0%, #ffcc00 50%, #e6b800 100%); color: #333; box-shadow: 0 5px 0 #b38f00; }
.btn-register-main { background: linear-gradient(180deg, #d98a0d 0%, #b36b00 100%); color: white; border: 1px solid #ffd700; box-shadow: 0 5px 0 #7a4900; }
.btn-cancel { background: linear-gradient(180deg, #6c757d 0%, #5a6268 100%); color: white; border: 1px solid #545b62; box-shadow: 0 5px 0 #3e444a; }
.btn-cancel:hover { background: linear-gradient(180deg, #7b838a 0%, #6c757d 100%); }
.btn-nav { display: inline-block; width: 48%; font-size: 1rem; padding: 10px; }

/* Stepper */
.stepper-progress { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; width: 100%; }
.step-dot { width: 30px; height: 30px; border-radius: 50%; background: #555; color: #ccc; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 0.9rem; border: 2px solid #777; position: relative; z-index: 2; }
.step-dot.active { background: #ffd700; color: #333; border-color: #fff; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.step-line { height: 3px; width: 40px; background: #555; margin: 0 5px; }
.step-line.active { background: #ffd700; }

/* Grids */
.bank-grid, .contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px; }
.contact-grid { grid-template-columns: repeat(3, 1fr); }
.bank-option, .contact-option { background: #fff; border-radius: 10px; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; border: 3px solid transparent; transition: all 0.2s; position: relative; padding: 5px; }
.bank-option:hover, .contact-option:hover { transform: translateY(-3px); }
.bank-option.selected { border-color: #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); background: #fffae6; }
.bank-icon, .contact-icon { font-size: 1.5rem; margin-bottom: 5px; }
.contact-icon { font-size: 2.5rem; margin-bottom: 10px; }
.bank-name, .contact-name { font-size: 0.6rem; color: #333; font-weight: bold; text-align: center; line-height: 1; }
.contact-name { font-size: 0.8rem; }

.bk-green { color: #007934; } .bk-purple { color: #4e2583; } .bk-blue { color: #1e4598; } .bk-lightblue { color: #00a5e5; } .bk-orange { color: #ff5c00; }
.ct-line { color: #06c755; } .ct-fb { color: #1877f2; } .ct-phone { color: #333; } .ct-site { color: #0d6efd; } .ct-x { color: #0d6efd; } .ct-tiktok { color: #dc3545; } .ct-telegram { color: #0dcaf0; } .ct-discord { color: #0d6efd; }
.notify-success { color: #28a745; } .notify-error { color: #dc3545; }

/* Withdraw Modal */
.withdraw-card { max-width: 450px; background: linear-gradient(135deg, #1b5e20 0%, #0f3d20 100%); border: 2px solid #ffd700; }
.withdraw-balance-box { background: rgba(0,0,0,0.3); border-radius: 10px; padding: 15px; text-align: center; margin-bottom: 20px; border: 1px solid #444; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.balance-label { color: #ccc; font-size: 0.9rem; }
.balance-value { color: #ffd700; font-size: 2.2rem; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* Deposit Modal */
.deposit-card { max-width: 800px; width: 95%; background: #1e1e1e; border: 2px solid #ffd700; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.deposit-header { background: linear-gradient(90deg, #d49a26 0%, #8a5e08 100%); padding: 15px; color: white; font-weight: bold; font-size: 1.2rem; display: flex; align-items: center; justify-content: space-between; }
.deposit-body { display: flex; flex-direction: row; min-height: 400px; }
.deposit-sidebar { width: 30%; background: #2b2b2b; border-right: 1px solid #444; display: flex; flex-direction: column; }
.deposit-menu-item { padding: 15px 10px; color: #ccc; cursor: pointer; border-bottom: 1px solid #3a3a3a; transition: all 0.2s; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.deposit-menu-item:hover { background: #3a3a3a; color: white; }
.deposit-menu-item.active { background: linear-gradient(90deg, #2e7d32 0%, #1b5e20 100%); color: #ffd700; font-weight: bold; border-left: 4px solid #ffd700; }
.deposit-content-area { width: 70%; padding: 20px; background: #1a1a1a; color: white; overflow-y: auto; display: flex; flex-direction: column;}
.deposit-section { display: none; }
.deposit-section.active { display: block; animation: fadeIn 0.3s; }
.bank-box-display { background: white; border-radius: 10px; padding: 15px; color: #333; margin-bottom: 20px; border-left: 5px solid #4e2583; display: flex; align-items: center; gap: 15px; }
.copy-btn { background: #eee; border: 1px solid #ccc; border-radius: 5px; padding: 2px 8px; font-size: 0.8rem; cursor: pointer; margin-left: auto; }

/* Report Table */
.report-table-container { overflow-x: auto; background: rgba(0,0,0,0.2); border-radius: 10px; padding: 10px; }
.report-table { width: 100%; border-collapse: collapse; color: #ccc; font-size: 0.9rem; }
.report-table th, .report-table td { padding: 10px; text-align: center; border-bottom: 1px solid #444; }
.report-table th { background: #2b2b2b; color: #ffd700; font-weight: bold; }
.report-table tr:last-child td { border-bottom: none; }
.status-badge { padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: bold; }
.status-success { background: #28a745; color: white; }
.status-pending { background: #ffc107; color: #333; }
.status-reject { background: #dc3545; color: white; }
.amount-plus { color: #28a745; font-weight: bold; }
.amount-minus { color: #dc3545; font-weight: bold; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 15px; }
.filter-btn { flex: 1; padding: 8px; border-radius: 20px; border: 1px solid #555; background: #333; color: #ccc; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; }
.filter-btn.active { background: linear-gradient(180deg, #ffd700 0%, #ff8f00 100%); color: #333; border-color: #ffd700; font-weight: bold; }
.ticketlistfilter-btn { flex: 1; padding: 8px; border-radius: 20px; border: 1px solid #555; background: #333; color: #ccc; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; }
.ticketlistfilter-btn.active { background: linear-gradient(180deg, #ffd700 0%, #ff8f00 100%); color: #333; border-color: #ffd700; font-weight: bold; }


/* Mobile Nav */
.mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: linear-gradient(180deg, #c6930a 0%, #8a5e08 100%); border-top: 2px solid #ffd700; z-index: 8888; justify-content: space-around; padding: 8px 0; box-shadow: 0 -4px 15px rgba(0,0,0,0.5); }
.mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-size: 0.85rem; cursor: pointer; transition: transform 0.1s; }
.mobile-nav-item:active { transform: scale(0.9); }
.mobile-nav-item i { font-size: 1.5rem; margin-bottom: 4px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3)); }
.mobile-nav-item span { font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.mobile-nav-item .fa-bitcoin { border: 2px solid white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* Dashboard Order */
.dash-col-lotto { order: 1; }
.dash-col-user { order: 2; }

/* Responsive */
@media (max-width: 900px) { 
	.top-lotto-grid { grid-template-columns: repeat(3, 1fr); } 
	.promo-grid { grid-template-columns: repeat(2, 1fr); }
	.news-grid { grid-template-columns: repeat(2, 1fr); }
	.menu-grid-dashboard {
		grid-template-columns: repeat(4, 1fr);
	}
	.grid-menu-item {
		font-size: 0.85rem;		
	}
	.lotto-list-container {
		max-height: 517px;
	}
}
@media (max-width: 768px) {
	footer { padding-bottom: 80px; }
	.mobile-login-section { display: block; }
	#loginBtn { display: none; }
	#loginModal .modal-overlay { display: none !important; } 
	.deposit-body { flex-direction: column; }
	.deposit-sidebar { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid #444; }
	.deposit-menu-item { flex: 0 0 auto; width: 100px; flex-direction: column; text-align: center; font-size: 0.7rem; padding: 10px 5px; }
	.deposit-content-area { width: 100%; padding: 15px; }
	.deposit-menu-item.active { border-left: none; border-bottom: 4px solid #ffd700; }
	.main-content { grid-template-columns: 1fr; }
	.top-lotto-grid { grid-template-columns: repeat(3, 1fr); }
	.casino-grid, .game-grid { grid-template-columns: repeat(2, 1fr); } 
	.login-card { flex-direction: column; max-width: 90%; min-height: auto; padding-bottom: 20px; background-image: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%); }
	.login-right { display: none; }
	.login-left { padding: 40px 20px 20px; }
	.close-modal { top: 10px; right: 10px; width: 30px; height: 30px; font-size: 1.5rem; }
	.mobile-bottom-nav { display: flex; }
	.dash-col-user { order: 1; margin-bottom: 20px; margin-top: 0 !important; }
	.dash-col-lotto { order: 2; }
}
@media (max-width: 600px) {
	.promo-grid { grid-template-columns: 1fr; }
	.news-grid { grid-template-columns: 1fr; }
	.article-cover { height: 200px; }
	.article-body { padding: 20px; }
	.article-header-title { font-size: 1.4rem; }
	.menu-grid-dashboard {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (max-width: 480px) {
	.header-right { gap: 5px; }
	.rule-btn { font-size: 0.8rem; }
	.btn-header-register, .btn-gold { padding: 5px 10px; font-size: 0.8rem; }
	.top-lotto-grid { grid-template-columns: repeat(2, 1fr); }
	.bank-grid { grid-template-columns: repeat(3, 1fr); }
	.contact-grid { grid-template-columns: repeat(2, 1fr); }
}
/* CSS เฉพาะสำหรับปรับแต่ง Dropdown ให้เข้ากับ UI เดิม */
.bank-dropdown-custom .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 8px;
    color: #495057;
}
.bank-dropdown-custom .dropdown-menu {
    width: 100%;
}
.deposit-content-dynamic {
    padding: 15px;
    background: rgba(0,0,0,0.02);
    border-radius: 10px;
    border: 2px solid #ffd700;
}
.bank-logo-small {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    object-fit: contain;
}
/* CSS สำหรับ Modal ถอนเงินแบบใหม่ */
.custom-select-wrapper {
	position: relative;
}
.iframe {
	display:none;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	overflow: hidden;
	background: #000;
	color: #FFF;
	font-size: 2em;
}
.close-game {
	display: inline-block;
	position: fixed;
	top: 10px;
	left: 10px;
    font-size: 1.6em;
	text-align: center;
	width: 35px;
	height: 35px;
	margin: 0 auto;
	background: url(assets/images/close-button.png) no-repeat center center;
	background-size: 100%;
	cursor: pointer;
}

.referral-card { background: #000; border-radius: 10px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid #222; }
.referral-title { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; }
.referral-title i { color: #6cadad; cursor: help; }
.qr-section { text-align: center; }
.qr-code-img { width: 150px; height: 150px; background: #fff; border-radius: 8px; margin: 0 auto 1rem auto; display: flex; align-items: center; justify-content: center; color: #000; font-size: 0.9rem; }
.share-title { font-size: 0.9rem; margin-bottom: 0.5rem; color: #ccc; }
.social-icons a { color: #ccc; font-size: 1.8rem; margin: 0 8px; transition: color 0.2s; }
.social-icons a:hover { color: #fff; }
.referral-link-section .form-label { font-size: 0.9rem; margin-bottom: 0.25rem; color: #ccc; }
.input-group .form-control { background: #1a1a1a; border-color: #333; color: #fff; }
.input-group .form-control:focus { background: #1a1a1a; border-color: #38d6d6; box-shadow: none; color: #fff; }
.btn-copy-link { background: #c0a175; border-color: #c0a175; color: #000; font-weight: 500; }
.btn-copy-link:hover { background: #a68a64; border-color: #a68a64; }
.income-section .form-label { font-size: 0.9rem; color: #ccc; }
.income-display { text-align: right; font-size: 1.5rem; font-weight: 600; color: #FFF; margin-bottom: 1rem; }
.income-section .btn { width: 48%; font-size: 0.95rem; padding: 0.6rem; }
.btn-withdraw-credit { background: #c0a175; border-color: #c0a175; color: #000; }
.btn-withdraw-account { background: #00434f; border-color: #00434f; color: #fff; }
.withdraw-note { font-size: 0.8rem; color: #888; margin-top: 5px; text-align: center; }
.withdraw-note.text-danger { color: #ff6b6b !important; }
.referral-tabs { background: #00434f; border-radius: 10px; padding: 0.5rem; display: flex; gap: 5px; margin-bottom: 1.5rem; }
.referral-tab-item { flex: 1; text-align: center; padding: 0.6rem; border-radius: 8px; color: #fff; font-weight: 500; cursor: pointer; transition: background-color 0.2s; text-decoration: none; }
.referral-tab-item:hover { background: rgba(255, 255, 255, 0.1); }
.referral-tab-item.active { background: #1a1a1a; }
.overview-stats { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.stat-item { flex: 1; background: #000000; border-radius: 8px; padding: 1rem; text-align: center; }
.stat-label { font-size: 0.9rem; color: #ccc; margin-bottom: 0.25rem; }
.stat-value { font-size: 1.25rem; font-weight: 600; color: #fff; }

.payment-options {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	max-width: 800px;
	width: 100%;
}

.payment-options li {
	position: relative;
	width: 45px;
	height: 45px;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	border: 2px solid transparent;
	background-color: #ffffff;
}

.payment-options li:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.payment-options img {
	display: block;
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
}


.payment-options2 {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	max-width: 800px;
	width: 100%;
}

.payment-options2 li {
	position: relative;
	width: 45px;
	height: 45px;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	border: 2px solid transparent;
	background-color: #ffffff;
}

.payment-options2 li:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.payment-options2 img {
	display: block;
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
}

.checkmark {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.2s ease, transform 0.2s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.checkmark svg {
	width: 12px;
	height: 12px;
	stroke: #007bff;
	stroke-width: 3;
}

.payment-options li.selected {
	border-color: #007bff;
	box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.payment-options li.selected .checkmark {
	opacity: 1;
	transform: scale(1);
}

.payment-options2 li.selected {
	border-color: #007bff;
	box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.payment-options2 li.selected .checkmark {
	opacity: 1;
	transform: scale(1);
}

.payment-btn {
	margin-top: 30px;
	padding: 12px 30px;
	font-size: 45px;
	font-weight: 600;
	color: #fff;
	background-color: #007bff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.payment-btn:hover:not(:disabled) {
	background-color: #0056b3;
}

.payment-btn:disabled {
	background-color: #a0a0a0;
	cursor: not-allowed;
	opacity: 0.7;
}



/* Betting Section */
.bet-input-group {
	background: white;
	padding: 15px;
	border-radius: 15px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	margin-bottom: 15px;
}
.type-btn {
	border: 1px solid #ddd;
	color: #666;
	border-radius: 20px;
	margin: 2px;
	font-size: 0.9rem;
	padding: 5px 12px;
}
.type-btn.active {
	background: linear-gradient(180deg, #fcd757 0%, #e6a918 50%, #bf800b 100%);
	color: white;
	border-color: rgb(255 245 194);
	box-shadow: 0 2px 5px rgb(255 245 194);
}
.type-btn:hover {
	background: linear-gradient(180deg, #fcd757 0%, #e6a918 50%, #bf800b 100%);
	color: white;
	border-color: rgb(255 245 194);
	box-shadow: 0 2px 5px rgb(255 245 194);
}

/* Cart/Bill Item */
.cart-item {
	border-left: 4px solid #ffc107;
	background: white;
	margin-bottom: 8px;
	border-radius: 8px;
}

/* Gold Gradient Text */
.text-gradient-gold {
	background: linear-gradient(to right, var(--gold-start), #fff, var(--gold-end));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
}

/* Section Header */
.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding-bottom: 10px;
}

.section-header h3 {
	font-size: 1.3rem;
	margin: 0;
	color: var(--text-gold);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Highlight Section (Open Now) */
.highlight-scroll {
	display: flex;
	gap: 15px;
	overflow-x: auto;
	padding-bottom: 15px;
	scrollbar-width: none; /* Firefox */
}
.highlight-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.highlight-card {
	min-width: 280px;
	background: linear-gradient(145deg, #222, #111);
	border: 1px solid var(--text-gold);
	border-radius: 15px;
	padding: 20px;
	position: relative;
	box-shadow: 0 0 15px rgba(253, 185, 49, 0.1);
}

.highlight-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(220, 53, 69, 0.2);
	color: #ff4d4d;
	border: 1px solid #ff4d4d;
	font-size: 0.7rem;
	padding: 2px 8px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.blink { animation: blinker 1.5s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* Regular Cards */
.lotto-card {
	background: var(--card-bg);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 12px;
	padding: 15px;
	transition: 0.3s;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.lotto-card:hover {
	border-color: var(--gold-start);
	transform: translateY(-5px);
	background: #222;
}

.lotto-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: 10px;
	background: linear-gradient(135deg, #333 0%, #000 100%);
	border: 1px solid #444;
	color: var(--text-gold);
	box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}

.card-title {
	font-size: 1.1rem;
	color: #fff;
	margin-bottom: 5px;
}

.countdown-text {
	font-variant-numeric: tabular-nums;
	color: var(--text-gold);
	font-weight: 500;
	font-size: 1.1rem;
	letter-spacing: 0.5px;
}

.date-info {
	font-size: 0.8rem;
	color: var(--text-muted);
	margin-bottom: 15px;
}


/* Navbar */
.navbar-vip {
	background: rgba(24, 24, 27, 0.8);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(253, 185, 49, 0.15);
	position: sticky;
	top: 0;
	z-index: 100;
}

.text-gradient-gold {
	background: linear-gradient(to right, var(--gold-start), #fff, var(--gold-end));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
}

/* Category Tabs */
.category-nav {
	overflow-x: auto;
	white-space: nowrap;
	padding-bottom: 10px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.category-nav::-webkit-scrollbar { display: none; }

.cat-btn {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	color: #fff;
	padding: 8px 20px;
	border-radius: 50px;
	margin-right: 10px;
	transition: all 0.3s;
	font-size: 0.9rem;
}

.cat-btn.active, .cat-btn:hover {
	background: linear-gradient(135deg, var(--gold-start), var(--gold-end));
	color: #000;
	border-color: transparent;
	font-weight: 600;
	box-shadow: 0 0 15px rgba(223, 159, 40, 0.4);
}

/* Cards */
.lotto-card {
	background: var(--card-bg);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 16px;
	padding: 15px;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
	height: 100%;
}

.lotto-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	border-color: rgba(253, 185, 49, 0.3);
}

.lotto-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 4px;
	background: linear-gradient(90deg, var(--gold-start), var(--gold-end));
	opacity: 0;
	transition: 0.3s;
}
.lotto-card:hover::before { opacity: 1; }

.lotto-icon {
	width: 55px;
	height: 55px;
	border-radius: 12px;
	object-fit: cover;
	background: rgba(0,0,0,0.3);
	padding: 8px;
	border: 1px solid rgba(255,255,255,0.1);
}

.status-badge {
	font-size: 0.7rem;
	padding: 2px 8px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.status-online { color: #4ade80; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.2); }
.status-offline { color: #f87171; background: rgba(248, 113, 113, 0.1); }

.countdown-time {
	font-family: 'Prompt', monospace;
	font-size: 1.1rem;
	color: var(--text-gold);
	font-weight: 500;
}

.btn-bet {
	background: linear-gradient(135deg, var(--gold-start), var(--gold-end));
	color: #000;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	padding: 8px 15px;
	width: 100%;
	margin-top: 15px;
	transition: 0.2s;
}
.btn-bet:hover {
	transform: scale(1.02);
	box-shadow: 0 0 10px rgba(223, 159, 40, 0.5);
}
.category-header {
	display: flex;
	align-items: center;
	margin: 30px 0 20px;
	padding-left: 10px;
	border-left: 3px solid var(--gold-start);
}
.category-header h3 {
	margin: 0;
	font-size: 1.4rem;
	color: #fff;
}



/* Header Section */
.huay-header {
	background: white;
	padding: 15px 20px;
	display: flex;
	align-items: center;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.huay-back-btn {
	border: none;
	background: none;
	font-size: 1.2rem;
	margin-right: 15px;
	cursor: pointer;
	color: #555;
}

/* Category Tabs */
.huay-category-scroll {
	display: flex;
	overflow-x: auto;
	gap: 10px;
	padding: 15px 20px;
	scrollbar-width: none;
}
.huay-category-scroll::-webkit-scrollbar { display: none; }
.huay-cat-item {
	background: var(--card-bg);
	color: white;
	padding: 8px 25px;
	border-radius: 15px;
	white-space: nowrap;
	cursor: pointer;
	font-weight: 500;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	transition: 0.3s;
	border: 1px solid rgba(255,255,255,0.05);
}
.huay-cat-item:hover {
	opacity: 0.9;
}
.huay-cat-item.active {
	background: var(--bet-gradient);
	color: #1a1a1a;
	border-color: transparent;
	font-weight: 600;
	box-shadow: 0 4px 15px rgba(223, 159, 40, 0.3);
}

/* Group Header */
.huay-group-header {
	margin: 25px 0 15px;
	padding-left: 10px;
	border-left: 5px solid #df9f28;
	font-weight: 600;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Lottery Card Styling */
.huay-card {
	background: var(--card-bg);
	border-radius: var(--card-radius);
	padding: 20px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	border: 1px solid rgba(255,255,255,0.05);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, box-shadow 0.2s;
	cursor: pointer;
	color: white;
	position: relative;
}
.huay-card:hover { 
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}
.huay-card.closed { cursor: default; opacity: 0.8; }

.huay-icon-box {
	width: 60px;
	height: 60px;
	background: var(--bet-gradient); 
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	font-size: 1.8rem;
}

.huay-icon-box img {
	width: 55px;
	height: 55px;
}

.huay-status-badge {
	font-size: 0.7rem;
	padding: 4px 12px;
	border-radius: 50px;
	font-weight: 600;
	display: inline-block;
}
.huay-status-badge.open {
	background: var(--status-open-bg);
	color: var(--status-open-color);
}
.huay-status-badge.closed {
	background: var(--status-closed-bg);
	color: var(--status-closed-color);
}
.huay-status-badge.pending {
	background: var(--status-pending-bg);
	color: var(--status-pending-color);
}

.huay-name {
	font-weight: 600;
	font-size: 1.1rem;
	margin: 0;
	color: white;
}

.huay-sub {
	font-size: 0.8rem;
	color: #aaa;
}

.huay-time {
	font-size: 1.2rem;
	font-weight: 700;
	margin-top: 5px;
	color: var(--text-gold);
}

/* Countdown Style */
.huay-countdown {
	margin-top: 10px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	padding: 8px;
	display: flex;
	justify-content: center;
	gap: 10px;
	font-weight: 600;
}
.huay-cd-item {
	text-align: center;
}
.huay-cd-val {
	display: block;
	font-size: 1rem;
	color: var(--text-gold);
}
.huay-cd-label {
	display: block;
	font-size: 0.6rem;
	color: #888;
	text-transform: uppercase;
}

.huay-btn-bet {
	background: var(--bet-gradient);
	color: #1a1a1a;
	border: none;
	border-radius: 15px;
	padding: 12px;
	font-weight: 600;
	width: 100%;
	margin-top: 15px;
	box-shadow: 0 4px 15px rgba(223, 159, 40, 0.2);
	transition: 0.3s;
}
.huay-btn-bet.disabled {
	background: #444;
	color: #888;
	box-shadow: none;
	cursor: not-allowed;
}

/* Animation */
.fade-in {
	animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.huay-hint-box {
	background: rgba(253, 185, 49, 0.1);
	color: var(--text-gold);
	font-size: 0.75rem;
	padding: 5px 10px;
	border-radius: 8px;
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 5px;
}