:root {
	--theme-primary:#cccccc;
--theme-secondary:#0e8e8e;
--theme-text:#ffffff;
--theme-background:url("");
--nav-button-primary-default-primary:#171719;
--nav-button-primary-default-secondary:#171719;
--nav-button-primary-default-text:#ffffff;
--nav-button-primary-hover-primary:#000000;
--nav-button-primary-hover-secondary:#000000;
--nav-button-primary-hover-text:#000000;
--nav-button-secondary-default-primary:#363636;
--nav-button-secondary-default-secondary:#353535;
--nav-button-secondary-default-text:#ffffff;
--nav-button-secondary-hover-primary:#1f2c70;
--nav-button-secondary-hover-secondary:#1e00ff;
--nav-button-secondary-hover-text:#ffffff;
--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:#2a2a2a;
--popup-button-primary-default-secondary:#000000;
--popup-button-primary-default-text:#ffffff;
--popup-button-primary-hover-primary:#ffffff;
--popup-button-primary-hover-secondary:#000000;
--popup-button-primary-hover-text:#000000;
--popup-button-secondary-default-primary:#ffea00;
--popup-button-secondary-default-secondary:#ffa200;
--popup-button-secondary-default-text:#ffffff;
--popup-button-secondary-hover-primary:#ffa200;
--popup-button-secondary-hover-secondary:#ffea00;
--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;
}
/* thai */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W__XJnvUD7dzB2KdNodVkI.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W__XJnvUD7dzB2Kb9odVkI.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: 'Prompt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W__XJnvUD7dzB2KbtodVkI.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: 'Prompt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W__XJnvUD7dzB2KYNod.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: 'Prompt';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2Cv_4IfWMuQ5Q.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2Cv_4IZmMuQ5Q.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: 'Prompt';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2Cv_4IZ2MuQ5Q.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: 'Prompt';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2Cv_4IaWMu.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: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2C2_8IfWMuQ5Q.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2C2_8IZmMuQ5Q.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: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2C2_8IZ2MuQ5Q.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: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2C2_8IaWMu.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: 'Prompt';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2Cx_wIfWMuQ5Q.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2Cx_wIZmMuQ5Q.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: 'Prompt';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2Cx_wIZ2MuQ5Q.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: 'Prompt';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2Cx_wIaWMu.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: 'Prompt';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2C4_0IfWMuQ5Q.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2C4_0IZmMuQ5Q.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: 'Prompt';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2C4_0IZ2MuQ5Q.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: 'Prompt';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/prompt/v12/-W_8XJnvUD7dzB2C4_0IaWMu.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: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVjJx26TKEr37c9aAFJn2QN.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVjJx26TKEr37c9aBpJn2QN.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: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVjJx26TKEr37c9aBtJn2QN.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: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVjJx26TKEr37c9aBVJnw.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: 'Sarabun';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YOZqik8s6zDX.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YOZqilQs6zDX.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: 'Sarabun';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YOZqilUs6zDX.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: 'Sarabun';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YOZqilss6w.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: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YMptik8s6zDX.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YMptilQs6zDX.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: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YMptilUs6zDX.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: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YMptilss6w.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: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YK5sik8s6zDX.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YK5silQs6zDX.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: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YK5silUs6zDX.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: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YK5silss6w.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: 'Sarabun';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YLJvik8s6zDX.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YLJvilQs6zDX.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: 'Sarabun';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YLJvilUs6zDX.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: 'Sarabun';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YLJvilss6w.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;
}

*,
  *::before,
  *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }

  :root {
	--navy: #00010A;
	--navy2: #041232;
	--navy3: #071a45;
	--blue-mid: #0a2460;
	--blue-btn: #1a4fc4;
	--gold: #d4a520;
	--gold2: #f0c040;
	--gold3: #ffe87a;
	--red: #cc1a1a;
	--red2: #e02020;
	--white: #ffffff;
	--gray: #a8b4c8;
	--border: rgba(70, 120, 210, 0.35);
	--glow-blue: 0 0 18px rgba(30, 100, 255, 0.5);
	--max-w: 480px;
	--max-w-desktop: 1280px;
	--font-main: 'Sarabun', sans-serif;
	--font-head: 'Prompt', sans-serif;
  }

  html {
	scroll-behavior: smooth;
  }

  body {
	font-family: var(--font-main);
	background: var(--navy);
	color: var(--white);
	min-height: 100vh;
	max-width: var(--max-w);
	margin: 0 auto;
	position: relative;
	overflow-x: hidden;
	padding-bottom: 70px;
  }

  a {
	text-decoration: none;
	color: inherit;
  }

  img {
	display: block;
	max-width: 100%;
  }

  /* ===== TOPBAR / HEADER ===== */
  .topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: linear-gradient(180deg, #041232 0%, #020b1f 100%);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
  }

  .topbar-hamburger {
	font-size: 22px;
	color: var(--white);
	cursor: pointer;
	background: none;
	border: none;
	padding: 4px 8px;
	line-height: 1;
  }

  .topbar-hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	margin: 5px 0;
	border-radius: 2px;
	transition: 0.3s;
  }

  .topbar-logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
  }

  .logo-text {
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 900;
	background: linear-gradient(135deg, #f0c040, #d4a520, #fff6a0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: none;
	letter-spacing: 1px;
  }

  .logo-sub {
	font-size: 9px;
	color: var(--gray);
	text-align: center;
	margin-top: -4px;
	letter-spacing: 1px;
  }

  .topbar-actions {
	display: flex;
	gap: 8px;
	align-items: center;
  }

  .btn-login {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	border: 1.5px solid var(--border);
	background: rgba(10, 36, 96, 0.6);
	color: var(--white);
	cursor: pointer;
	transition: all 0.2s;
  }

  .btn-login:hover {
	border-color: var(--gold);
  }

  .btn-register {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	background: linear-gradient(135deg, #1a4fc4, #2563eb);
	color: var(--white);
	cursor: pointer;
	border: none;
	transition: all 0.2s;
	box-shadow: 0 2px 12px rgba(26, 79, 196, 0.5);
  }

  .btn-register:hover {
	filter: brightness(1.15);
  }

  /* ===== HERO SWIPER ===== */
  .hero-swiper {
	width: 100%;
	position: relative;
  }

  .hero-swiper .swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
  }

  .hero-swiper .swiper-pagination-bullet {
	background: var(--gold);
	opacity: 0.5;
	width: 8px;
	height: 8px;
  }

  .hero-swiper .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--gold2);
	width: 20px;
	border-radius: 4px;
  }

  /* Hero action buttons */
  .hero-actions {
	background: linear-gradient(180deg, #020b1f, #041232);
	padding: 0 14px 14px;
  }

  /* swiper-slide เป็น containing block สำหรับ hero-btns */
  .swiper-slide {
	position: relative;
  }

  .hero-btns {
	position: absolute;
	bottom: 16%;
	left: 4%;
	display: flex;
	gap: 6px;
	z-index: 5;
  }

  .hero-btn {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 7px 10px;
	border-radius: 8px;
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.25s;
	text-decoration: none;
  }

  .hero-btn-register {
	background: linear-gradient(135deg, #1a4fc4, #2563eb);
	color: #fff;
	box-shadow: 0 4px 16px rgba(26, 79, 196, 0.6);
  }

  .hero-btn-play {
	background: linear-gradient(135deg, #cc1a1a, #e02020);
	color: #fff;
	box-shadow: 0 4px 16px rgba(204, 26, 26, 0.6);
  }

  .hero-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.12);
  }

  .hero-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 10px 16px;
	margin-top: 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: rgba(4, 18, 50, 0.8);
  }

  .trust-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--gray);
  }

  .trust-item i {
	color: var(--gold);
	font-size: 14px;
  }

  /* ===== GAME MENU ===== */
  .section {}

  .section-card {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
  }

  .game-menu {
	display: flex;
	justify-content: space-around;
	gap: 4px;
  }

  .game-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	flex: 1;
	transition: transform 0.2s;
  }

  .game-item:hover {
	transform: translateY(-4px);
  }

  .game-icon-wrap {
	width: 58px;
	height: 58px;
	background: none;
	border: none;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
  }

  .game-icon-wrap img {
	width: 48px;
	height: 48px;
	object-fit: contain;
  }

  .game-label {
	display: none;
  }

  /* ===== LIVE FOOTBALL MATCHES ===== */
  .live-match-section {
	padding-top: 6px;
	padding-bottom: 6px;
  }

  .live-match-shell {
	background: linear-gradient(145deg, rgba(7, 25, 68, 0.96), rgba(2, 10, 31, 0.98));
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
	overflow: hidden;
  }

  .live-match-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
  }

  .live-match-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--gold2);
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 800;
  }

  .live-match-title .live-icon {
	color: #ef4444;
	font-size: 12px;
	animation: livePulse 1.2s ease-in-out infinite;
  }

  @keyframes livePulse {

	0%,
	100% {
	  opacity: 1;
	  transform: scale(1);
	}

	50% {
	  opacity: 0.35;
	  transform: scale(0.78);
	}
  }

  .live-match-controls {
	display: flex;
	gap: 6px;
  }

  .live-match-prev,
  .live-match-next {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(240, 192, 64, 0.4);
	border-radius: 50%;
	background: rgba(240, 192, 64, 0.08);
	color: var(--gold2);
	cursor: pointer;
	transition: all 0.2s ease;
  }

  .live-match-prev:hover,
  .live-match-next:hover {
	background: linear-gradient(135deg, var(--gold2), var(--gold));
	color: #07122e;
  }

  .live-match-card {
	height: 100%;
	background: linear-gradient(145deg, rgba(11, 40, 95, 0.82), rgba(3, 15, 44, 0.94));
	border: 1px solid rgba(83, 131, 224, 0.28);
	border-radius: 14px;
	overflow: hidden;
  }

  .live-match-card .match-header {
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	background: rgba(0, 0, 0, 0.22);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 11px;
	color: var(--gray);
  }

  .live-match-card .league-name {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }

  .live-match-card .league-name img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex: 0 0 auto;
  }

  .live-match-card .live-badge {
	flex: 0 0 auto;
	padding: 3px 7px;
	border-radius: 8px;
	background: rgba(239, 68, 68, 0.14);
	border: 1px solid rgba(239, 68, 68, 0.38);
	color: #fca5a5;
	font-size: 10px;
	font-weight: 700;
  }

  .live-match-card .match-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	padding: 14px 10px 16px;
  }

  .live-match-card .team {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-align: center;
  }

  .live-match-card .team-logo {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	border: 2px solid rgba(240, 192, 64, 0.55);
	padding: 5px;
  }

  .live-match-card .team-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
  }

  .live-match-card .team-logo i {
	color: #64748b;
	font-size: 24px;
  }

  .live-match-card .team>span {
	width: 100%;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }

  .live-match-card .match-vs {
	display: grid;
	grid-template-columns: 30px auto 30px;
	align-items: center;
	gap: 5px;
	color: var(--gray);
	font-size: 9px;
	font-weight: 800;
  }

  .live-match-card .score {
	width: 30px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--gold2), var(--gold));
	color: #07122e;
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 900;
	box-shadow: 0 4px 12px rgba(240, 192, 64, 0.2);
  }

  .live-match-empty {
	padding: 22px 10px;
	text-align: center;
	color: var(--gray);
	font-size: 13px;
  }

  @media (min-width: 769px) {
	.live-match-shell {
	  padding: 18px;
	}

	.live-match-title {
	  font-size: 18px;
	}

	.live-match-card .team>span {
	  font-size: 12px;
	}
  }

  /* ===== PROMOTIONS GRID ===== */
  .promo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	background: none !important;
	border: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
  }

  .promo-card {
	border-radius: 12px;
	overflow: hidden;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: transform 0.25s;
	position: relative;
  }

  .promo-card:hover {
	transform: translateY(-4px);
  }

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

  .promo-card-btn {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #1a4fc4, #2563eb);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 8px;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(26, 79, 196, 0.6);
  }

  /* ===== AFFILIATE BANNER ===== */
  .affiliate-banner {
	border-radius: 14px;
	overflow: hidden;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: transform 0.25s;
	position: relative;
  }

  .affiliate-banner:hover {
	transform: translateY(-3px);
  }

  .affiliate-banner img {
	width: 100%;
	display: block;
  }

  .affiliate-banner-btn {
	position: absolute;
	right: 14px;
	bottom: 16px;
	background: linear-gradient(135deg, #1a4fc4, #2563eb);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 2px 12px rgba(26, 79, 196, 0.6);
  }

  /* ===== GUARANTEE BANNER ===== */
  .guarantee-banner {
	/* border-radius: 14px;
							  overflow: hidden;
							  border: 1.5px solid var(--border);
							  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); */
  }

  .guarantee-banner img {
	width: 100%;
	display: block;
  }

  /* ===== PROMOTIONS GRID ALL ===== */
  .promo-swiper-section {
	padding: 10px 0 20px;
	background: none !important;
	border: none !important;
  }

  .promo-grid-all {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	background: none !important;
	border: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
  }

  .section-title {
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--gold2);
	margin-bottom: 10px;
	padding-left: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
  }

  .section-title::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 18px;
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	border-radius: 2px;
  }

  .promo-swiper .swiper-slide {
	border-radius: 12px;
	overflow: hidden;
	border: none !important;
	box-shadow: none !important;
  }

  .promo-swiper .swiper-slide img {
	width: 100%;
	display: block;
  }

  .promo-swiper .swiper-pagination {
	position: relative;
	margin-top: 12px;
  }

  .promo-swiper .swiper-pagination-bullet {
	background: var(--gold);
	opacity: 0.5;
  }

  .promo-swiper .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--gold2);
  }

  /* ===== BOTTOM NAV ===== */
  .bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(180deg, #051438 0%, #010717 100%);
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 8px 10px 10px;
	z-index: 200;
	box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.8);
  }

  /* Glowing top line for footer navbar */
  .bottom-nav::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg,
		transparent,
		rgba(30, 100, 255, 0.5) 25%,
		rgba(240, 192, 64, 0.75) 50%,
		rgba(30, 100, 255, 0.5) 75%,
		transparent);
  }

  .nav-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
	padding: 8px 5px;
	margin: 2px 0;
	transition: all 0.25s ease;
	flex: 1 1 0px;
	min-width: 0;
  }

  /* Vertical divider lines between columns (More visible) */
  .nav-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 24px;
	width: 1px;
	background: rgba(255, 255, 255, 0.25);
	pointer-events: none;
	transition: all 0.25s ease;
  }

  /* Active horizontal short indicator below text (except center-item) */
  .nav-item.active:not(.center-item)::before {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--gold) 20%,
		var(--gold3) 50%,
		var(--gold) 80%,
		transparent 100%);
	box-shadow: 0 1px 6px rgba(240, 192, 64, 0.4);
  }



  .nav-item:hover:not(.active):not(.center-item) {
	background: rgba(255, 255, 255, 0.03);
	border-radius: 12px;
  }

  .nav-icon {
	font-size: 20px;
	color: rgba(255, 255, 255, 0.9);
	transition: all 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
  }

  .nav-label {
	font-size: 10px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	transition: all 0.25s ease;
  }

  .nav-item.active .nav-icon {
	color: var(--gold2);
	filter: drop-shadow(0 0 6px rgba(240, 192, 64, 0.5));
  }

  .nav-item.active .nav-label {
	color: var(--gold2);
  }

  .nav-item.center-item {
	position: relative;
	margin-top: 0;
  }

  .nav-item.center-item .nav-center-circle {
	width: 52px;
	height: 52px;
	background: linear-gradient(135deg, #0a2460 0%, #041232 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2.5px solid var(--gold2);
	box-shadow: 0 0 15px rgba(240, 192, 64, 0.5);
	transition: all 0.3s ease;
	margin-top: -24px;
	margin-bottom: 2px;
  }

  .nav-item.center-item:hover .nav-center-circle {
	transform: scale(1.05);
	box-shadow: 0 0 22px rgba(240, 192, 64, 0.8);
  }

  .nav-item.center-item .nav-center-circle i {
	font-size: 22px;
	color: #fff;
  }

  .nav-item.center-item .nav-label {
	color: var(--gold2);
	font-weight: 700;
  }

  /* ===== MOBILE MENU DRAWER ===== */
  .menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 300;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
  }

  .menu-overlay.open {
	opacity: 1;
	pointer-events: all;
  }

  .menu-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: 260px;
	height: 100%;
	background: linear-gradient(180deg, #041232 0%, #020b1f 100%);
	border-right: 1px solid var(--border);
	z-index: 400;
	transform: translateX(-100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 20px 0 0;
	box-shadow: 4px 0 30px rgba(0, 0, 0, 0.7);
	overflow-y: auto;
  }

  .menu-drawer.open {
	transform: translateX(0);
  }

  .menu-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 18px 16px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 12px;
  }

  .menu-drawer-close {
	background: none;
	border: none;
	color: var(--gray);
	font-size: 22px;
	cursor: pointer;
  }

  .menu-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
	border-bottom: 1px solid rgba(70, 120, 210, 0.1);
  }

  .menu-item:hover {
	background: rgba(26, 79, 196, 0.15);
  }

  .menu-item i {
	color: var(--gold2);
	width: 22px;
	text-align: center;
  }

  /* ===== SECTION DIVIDER ===== */
  .section-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border), transparent);
	margin: 4px 10px;
  }

  /* ===== ANIMATIONS ===== */
  @keyframes fadeInUp {
	from {
	  opacity: 0;
	  transform: translateY(20px);
	}

	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }

  /* Gold shimmer hover */
  .promo-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 40%, rgba(212, 165, 32, 0.08) 100%);
	pointer-events: none;
	border-radius: 12px;
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
	width: 4px;
  }

  ::-webkit-scrollbar-track {
	background: var(--navy);
  }

  ::-webkit-scrollbar-thumb {
	background: var(--blue-mid);
	border-radius: 2px;
  }

  /* Desktop nav hidden by default (mobile-first) */
  .desktop-nav {
	display: none;
  }

  /* Logo — แสดงทุก device, absolute บน hero */
  .desktop-logo-img {
	display: block;
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	height: 82px;
	width: auto;
	object-fit: contain;
	z-index: 10;
	pointer-events: none;
	animation: logoFloat 3s ease-in-out infinite, logoGlow 3s ease-in-out infinite;
  }

  @keyframes logoFloat {

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

	50% {
	  transform: translateX(-50%) translateY(-6px);
	}
  }

  @keyframes logoGlow {

	0%,
	100% {
	  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(30, 100, 255, 0.3));
	}

	50% {
	  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(212, 165, 32, 0.55));
	}
  }

  /* Hero swiper padding-top เพื่อให้โลโก้มีที่ว่าง */
  .hero-swiper .swiper-wrapper {
	padding-top: 0px;
  }

  /* mobile default */

  @media (min-width: 481px) and (max-width: 768px) {
	.hero-swiper .swiper-wrapper {
	  padding-top: 22px;
	}

	/* tablet */
  }

  /* ===== SMALL MOBILE ===== */
  @media (max-width: 360px) {
	.game-icon-wrap {
	  width: 50px;
	  height: 50px;
	}

	.game-icon-wrap img {
	  width: 40px;
	  height: 40px;
	}

	.game-label {
	  font-size: 11px;
	}

	.btn-login,
	.btn-register {
	  font-size: 11px;
	  padding: 6px 9px;
	}

	.quick-wallet-container {
	  padding: 0 10px;
	  gap: 8px;
	}

	.quick-wallet-btn {
	  padding: 10px 8px;
	  font-size: 14px;
	  border-radius: 10px;
	}
  }

  /* ===== DESKTOP LAYOUT (≥ 769px) ===== */
  @media (min-width: 769px) {

	body {
	  max-width: var(--max-w-desktop);
	  padding-bottom: 70px;
	}

	/* --- Topbar desktop --- */
	.topbar {
	  display: flex;
	  padding: 12px 24px;
	  width: 100vw;
	  margin-left: calc(-50vw + 50%);
	  margin-right: calc(-50vw + 50%);
	  box-sizing: border-box;
	}

	@media (min-width: 1280px) {
	  .topbar {
		padding-left: calc((100vw - 1280px) / 2 + 24px);
		padding-right: calc((100vw - 1280px) / 2 + 24px);
	  }
	}

	.topbar-hamburger {
	  display: block;
	}

	/* --- Desktop logo (absolute on hero) — ขนาดใหญ่ขึ้น --- */
	.desktop-logo-img {
	  height: 120px;
	  top: 16px;
	}

	/* Reset swiper padding บน desktop */
	.hero-swiper .swiper-wrapper {
	  padding-top: 0;
	}

	.topbar-logo {
	  position: static;
	  transform: none;
	}

	.logo-text {
	  font-size: 28px;
	}

	.logo-sub {
	  font-size: 11px;
	}

	.topbar-actions {
	  gap: 12px;
	}

	.btn-login,
	.btn-register {
	  font-size: 15px;
	  padding: 10px 22px;
	}

	/* Desktop full-width nav links (inserted via JS) */
	.desktop-nav {
	  display: flex;
	  gap: 0;
	  flex: 1;
	  justify-content: center;
	}

	.desktop-nav-link {
	  padding: 10px 18px;
	  font-size: 14px;
	  font-weight: 600;
	  color: var(--gray);
	  cursor: pointer;
	  border-radius: 8px;
	  transition: color 0.2s, background 0.2s;
	  white-space: nowrap;
	  display: flex;
	  align-items: center;
	  gap: 7px;
	}

	.desktop-nav-link:hover {
	  color: #fff;
	  background: rgba(26, 79, 196, 0.18);
	}

	.desktop-nav-link.active {
	  color: var(--gold2);
	}

	.desktop-nav-link i {
	  font-size: 13px;
	}

	/* --- Hero Swiper --- */
	.hero-swiper {
	  border-radius: 0;
	}

	/* --- Hero actions --- */
	.hero-actions {
	  padding: 0 32px 20px;
	  display: flex;
	  gap: 24px;
	  align-items: center;
	}

	.hero-btns {
	  gap: 14px;
	  bottom: 20%;
	  left: 12%;
	  padding-top: 0;
	}

	.hero-btn {
	  font-size: 17px;
	  padding: 14px 28px;
	}

	.hero-trust {
	  flex: 1;
	  margin-top: 20px;
	  gap: 32px;
	  justify-content: flex-end;
	}

	.trust-item {
	  font-size: 14px;
	}

	.trust-item i {
	  font-size: 18px;
	}

	/* --- Sections --- */
	.section {}

	.section-divider {
	  margin: 6px 32px;
	}

	/* --- Game menu --- */
	.section-card {}

	.game-menu {
	  justify-content: center;
	  gap: 20px;
	}

	.game-item {
	  flex: 0 0 auto;
	}

	.game-icon-wrap {
	  width: 90px;
	  height: 90px;
	  border-radius: 18px;
	}

	.game-icon-wrap img {
	  width: 70px;
	  height: 70px;
	}

	.game-label {
	  font-size: 16px;
	}

	/* --- Promo grid --- */
	.promo-grid {
	  grid-template-columns: 1fr 1fr;
	  gap: 20px;
	}

	.promo-card-btn {
	  font-size: 14px;
	  padding: 10px 20px;
	  bottom: 16px;
	}

	/* --- Guarantee banner --- */
	.guarantee-banner img {
	  border-radius: 14px;
	}

	/* --- Affiliate banner --- */
	.affiliate-banner img {
	  border-radius: 14px;
	}

	.affiliate-banner-btn {
	  font-size: 16px;
	  padding: 14px 24px;
	  right: 24px;
	  bottom: 24px;
	}

	/* --- Promo swiper section --- */
	.promo-swiper-section {
	  padding: 14px 0 28px;
	}

	.section-title {
	  font-size: 22px;
	}

  }

  /* ===== LARGE DESKTOP (≥ 1100px) ===== */
  @media (min-width: 1100px) {
	.hero-actions {
	  padding: 0 48px 24px;
	}

	.section {
	  padding: 16px 0;
	}

	.section-divider {
	  margin: 6px 48px;
	}



	.promo-swiper-section {
	  padding: 16px 48px 32px;
	}
  }

  /* ===== TAB CONTENTS SYSTEM ===== */
  .tab-content {
	display: none;
  }

  .tab-content.active {
	display: block;
  }

  /* Affiliate Tab Buttons Styling */
  .aff-tab-btn.active {
	color: var(--gold2) !important;
  }

  .aff-tab-btn.active::after {
	content: '';
	position: absolute;
	bottom: -1.5px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--gold2);
	box-shadow: 0 0 8px var(--gold);
  }

  /* Affiliate Top Row Grid layout */
  .aff-top-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 16px;
  }

  @media (min-width: 769px) {
	.aff-top-row {
	  grid-template-columns: 4fr 8fr;
	}
  }

  /* Affiliate QR and Link flex container */
  .aff-qr-flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
  }

  @media (min-width: 576px) {
	.aff-qr-flex {
	  flex-direction: row;
	  align-items: stretch;
	}
  }

  /* Common layout for tabs */
  .tab-container {
	padding: 20px 14px 40px;
  }

  @media (min-width: 769px) {
	.tab-container {
	  padding: 30px 48px 60px;
	}
  }

  /* Category Filter List */
  .filter-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 4px 0 16px;
	margin-bottom: 20px;
	scrollbar-width: none;
	/* Firefox */
  }

  .filter-tabs::-webkit-scrollbar {
	display: none;
	/* Chrome/Safari */
  }

  .filter-tab-btn {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border);
	color: var(--gray);
	padding: 10px 18px;
	border-radius: 20px;
	font-family: var(--font-main);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.25s ease;
  }

  .filter-tab-btn.active,
  .filter-tab-btn:hover {
	background: linear-gradient(135deg, var(--gold2), var(--gold));
	color: #000;
	border-color: transparent;
	box-shadow: 0 4px 12px rgba(240, 192, 64, 0.35);
  }

  /* Grid layout for Providers */
  .providers-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
  }

  @media (min-width: 576px) {
	.providers-grid {
	  grid-template-columns: repeat(3, 1fr);
	}
  }

  @media (min-width: 992px) {
	.providers-grid {
	  grid-template-columns: repeat(4, 1fr);
	}
  }

  .provider-card {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all 0.3s ease;
  }

  .provider-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgba(240, 192, 64, 0.25);
  }

  .provider-logo-container {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.15);
	padding: 8px;
  }

  .provider-logo-container i {
	font-size: 36px;
	background: linear-gradient(135deg, #ffe87a, #d4a520);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  }

  .provider-name {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
  }

  .provider-type {
	font-family: var(--font-main);
	font-size: 11px;
	font-weight: 600;
	color: var(--gray);
	background: rgba(255, 255, 255, 0.05);
	padding: 3px 8px;
	border-radius: 10px;
	text-transform: uppercase;
  }

  .provider-btn {
	width: 100%;
	background: linear-gradient(135deg, #1a4fc4, #2563eb);
	color: #fff;
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	padding: 8px 12px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(26, 79, 196, 0.4);
	transition: all 0.25s ease;
  }

  .provider-card:hover .provider-btn {
	background: linear-gradient(135deg, var(--gold2), var(--gold));
	color: #000;
	box-shadow: 0 4px 12px rgba(240, 192, 64, 0.4);
  }

  /* News Tab styling */
  .news-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
  }

  @media (min-width: 769px) {
	.news-grid {
	  grid-template-columns: repeat(2, 1fr);
	  gap: 20px;
	}
  }

  .news-card {
	background: linear-gradient(135deg, #07163c 0%, #030a1c 100%);
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
	cursor: pointer;
  }

  .news-card:hover {
	transform: translateY(-4px);
	border-color: rgba(240, 192, 64, 0.5);
	box-shadow: 0 8px 24px rgba(240, 192, 64, 0.15);
  }

  .news-img-wrap {
	width: 100%;
	height: 180px;
	background: linear-gradient(135deg, #0f2d70 0%, #06183a 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
  }

  .news-img-wrap i {
	font-size: 54px;
	color: rgba(255, 255, 255, 0.1);
  }

  .news-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: linear-gradient(135deg, var(--gold2), var(--gold));
	color: #000;
	font-family: var(--font-main);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 8px;
  }

  .news-content {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
  }

  .news-date {
	font-family: var(--font-main);
	font-size: 11px;
	color: var(--gray);
	display: flex;
	align-items: center;
	gap: 5px;
  }

  .news-title {
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	line-height: 1.4;
  }

  .news-excerpt {
	font-family: var(--font-main);
	font-size: 13px;
	color: var(--gray);
	line-height: 1.5;
	flex: 1;
  }

  .news-btn {
	align-self: flex-start;
	background: transparent;
	border: 1px solid var(--border);
	color: #fff;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 8px;
	cursor: pointer;
	margin-top: 8px;
	transition: all 0.25s ease;
  }

  .news-card:hover .news-btn {
	background: linear-gradient(135deg, var(--gold2), var(--gold));
	color: #000;
	border-color: transparent;
  }

  /* Promotions Tab grid */
  .promo-tab-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	background: none !important;
	border: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
  }

  @media (min-width: 769px) {
	.promo-tab-grid {
	  gap: 20px;
	}
  }

  /* ===== POPUP MODALS CSS ===== */
  .popup-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 1, 10, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	padding: 20px;
  }

  .popup-modal-overlay.open {
	opacity: 1;
	pointer-events: all;
  }

  .popup-modal-card {
	background: linear-gradient(135deg, #07163c 0%, #030a1c 100%);
	border: 1.5px solid rgba(30, 100, 255, 0.5);
	border-radius: 20px;
	width: 100%;
	max-width: 420px;
	padding: 30px 24px;
	position: relative;
	transform: scale(0.9);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(30, 100, 255, 0.15);
  }

  .popup-modal-overlay.open .popup-modal-card {
	transform: scale(1);
  }

  .popup-modal-close {
	position: absolute;
	top: 14px;
	right: 18px;
	background: none;
	border: none;
	color: var(--gray);
	font-size: 28px;
	cursor: pointer;
	line-height: 1;
	transition: color 0.2s ease;
  }

  .popup-modal-close:hover {
	color: #fff;
  }

  .popup-modal-header {
	text-align: center;
	margin-bottom: 24px;
  }

  .popup-modal-header h2 {
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
  }

  .popup-modal-header .header-divider {
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--gold2), transparent);
	margin: 8px auto 0;
	border-radius: 2px;
  }

  .popup-modal-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
  }

  .form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
  }

  .form-group label {
	font-family: var(--font-main);
	font-size: 13px;
	font-weight: 600;
	color: var(--gray);
	display: flex;
	align-items: center;
	gap: 6px;
  }

  .form-group label i {
	color: var(--gold2);
  }

  .form-group input,
  .form-group select {
	background: rgba(4, 12, 36, 0.8);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 12px 14px;
	font-family: var(--font-main);
	font-size: 14px;
	color: #fff;
	outline: none;
	transition: all 0.25s ease;
  }

  .form-group input:focus,
  .form-group select:focus {
	border-color: var(--gold2);
	box-shadow: 0 0 10px rgba(240, 192, 64, 0.25);
	background: rgba(7, 22, 60, 0.9);
  }

  .form-group input::placeholder {
	color: rgba(255, 255, 255, 0.35);
  }

  .popup-submit-btn {
	width: 100%;
	padding: 14px;
	border-radius: 12px;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	border: none;
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.25s ease;
  }

  .btn-login-submit {
	background: linear-gradient(135deg, #1a4fc4, #2563eb);
	box-shadow: 0 4px 18px rgba(26, 79, 196, 0.5);
  }

  .btn-login-submit:hover {
	filter: brightness(1.15);
	transform: translateY(-2px);
  }

  .btn-register-submit {
	background: linear-gradient(135deg, #cc1a1a, #e02020);
	box-shadow: 0 4px 18px rgba(204, 26, 26, 0.5);
  }

  .btn-register-submit:hover {
	filter: brightness(1.15);
	transform: translateY(-2px);
  }

  /* Multi-step Registration Styles */
  .reg-step-pane {
	display: none;
	flex-direction: column;
	gap: 14px;
  }

  .reg-step-pane.active {
	display: flex;
	animation: regStepFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes regStepFadeIn {
	from {
	  opacity: 0;
	  transform: translateY(10px);
	}

	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }

  .btn-reg-next {
	background: linear-gradient(135deg, var(--gold2), var(--gold)) !important;
	color: #000 !important;
	box-shadow: 0 4px 15px rgba(240, 192, 64, 0.3) !important;
  }

  .btn-reg-next:hover {
	filter: brightness(1.12);
	transform: translateY(-2px);
  }

  .btn-reg-prev {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid var(--border) !important;
	color: #fff !important;
  }

  .btn-reg-prev:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	transform: translateY(-2px);
  }

  .popup-modal-footer {
	text-align: center;
	margin-top: 20px;
	font-size: 13px;
	color: var(--gray);
  }

  .popup-modal-footer a {
	color: var(--gold2);
	text-decoration: underline;
	font-weight: 600;
	transition: color 0.2s ease;
  }

  .popup-modal-footer a:hover {
	color: var(--gold3);
  }

  /* ===== TRANSACTION SECTION STYLE ===== */
  .tx-section {
	padding: 18px 16px;
	background: linear-gradient(180deg, #05143a 0%, #01081a 100%);
	border: 1px solid var(--border);
	border-radius: 16px;
	margin: 20px 14px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  }

  @media (min-width: 769px) {
	.tx-section {
	  margin: 30px 48px;
	  padding: 24px 30px;
	}
  }

  .tx-title {
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--gold2);
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	text-shadow: 0 0 10px rgba(240, 192, 64, 0.2);
  }

  .tx-title i {
	font-size: 20px;
  }

  .tx-grid-methods {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 20px;
  }

  @media (max-width: 360px) {
	.tx-grid-methods {
	  grid-template-columns: repeat(2, 1fr);
	}
  }

  @media (min-width: 769px) {
	.tx-grid-methods {
	  grid-template-columns: repeat(7, 1fr);
	  gap: 12px;
	}
  }

  .tx-method-btn {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	transition: all 0.25s ease;
	text-align: center;
  }

  .tx-method-btn:hover {
	background: rgba(26, 79, 196, 0.12);
	border-color: var(--blue-btn);
	transform: translateY(-2px);
  }

  .tx-method-btn.active {
	background: linear-gradient(135deg, rgba(26, 79, 196, 0.3) 0%, rgba(4, 18, 50, 0.9) 100%);
	border-color: var(--gold2);
	box-shadow: 0 0 14px rgba(240, 192, 64, 0.35);
  }

  .tx-method-btn i {
	font-size: 20px;
	color: var(--gold2);
	transition: transform 0.25s ease;
  }

  .tx-method-btn.active i {
	transform: scale(1.15);
	color: var(--gold3);
  }

  .tx-method-btn span {
	font-size: 11px;
	font-weight: 600;
	color: var(--white);
	line-height: 1.2;
  }

  @media (min-width: 769px) {
	.tx-method-btn span {
	  font-size: 12px;
	}

	.tx-method-btn i {
	  font-size: 22px;
	}
  }

  /* Form Wrapper */
  .tx-form-wrapper {
	background: rgba(2, 11, 31, 0.7);
	border: 1px solid rgba(70, 120, 210, 0.25);
	border-radius: 14px;
	padding: 16px;
	display: none;
  }

  .tx-form-wrapper.active {
	display: block;
	animation: fadeInUp 0.4s ease;
  }

  .tx-label {
	font-family: var(--font-main);
	font-size: 13px;
	font-weight: 600;
	color: var(--gray);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
  }

  .tx-label i {
	color: var(--gold2);
  }

  /* Bank Selector Cards */
  .tx-bank-selector {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 16px;
  }

  @media (min-width: 576px) {
	.tx-bank-selector {
	  grid-template-columns: 1fr 1fr;
	}
  }

  .tx-bank-card {
	background: linear-gradient(135deg, #061436 0%, #02071a 100%);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	position: relative;
	transition: all 0.25s ease;
  }

  .tx-bank-card:hover {
	border-color: rgba(240, 192, 64, 0.4);
	background: rgba(10, 30, 80, 0.4);
  }

  .tx-bank-card.active {
	border-color: var(--gold2);
	background: linear-gradient(135deg, #0a2460 0%, #041232 100%);
	box-shadow: 0 4px 15px rgba(240, 192, 64, 0.25);
  }

  .tx-bank-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #fff;
	flex-shrink: 0;
  }

  /* Bank specific backgrounds */
  .bg-kbank {
	background: #138f2e;
  }

  .bg-scb {
	background: #4e2e7f;
  }

  .bg-truewallet {
	background: #f57c00;
  }

  .bg-bbl {
	background: #1e3a8a;
  }

  .bg-ktb {
	background: #00a2e5;
  }

  .bg-ttb {
	background: #f04e23;
  }

  .tx-bank-info {
	display: flex;
	flex-direction: column;
	text-align: left;
  }

  .tx-bank-name {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	color: #fff;
  }

  .tx-bank-acc {
	font-family: var(--font-main);
	font-size: 12px;
	color: var(--gray);
	margin-top: 2px;
  }

  .tx-bank-holder {
	font-size: 11px;
	color: var(--gold3);
  }

  .tx-bank-card::after {
	content: '\f058';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: rgba(255, 255, 255, 0.05);
	transition: all 0.25s ease;
  }

  .tx-bank-card.active::after {
	color: var(--gold2);
	text-shadow: 0 0 8px rgba(240, 192, 64, 0.5);
  }

  /* Quick Amounts */
  .tx-quick-amounts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 8px;
	margin-bottom: 16px;
  }

  @media (min-width: 769px) {
	.tx-quick-amounts {
	  grid-template-columns: repeat(8, 1fr);
	}
  }

  .tx-amount-btn {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border);
	color: #fff;
	padding: 8px 4px;
	border-radius: 8px;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
  }

  .tx-amount-btn:hover {
	background: var(--blue-btn);
	border-color: #fff;
  }

  .tx-amount-btn.active {
	background: linear-gradient(135deg, var(--gold2), var(--gold));
	color: #000;
	border-color: transparent;
	box-shadow: 0 0 10px rgba(240, 192, 64, 0.3);
  }

  /* ===== GAMES GRID IN PROVIDERS ===== */
  .games-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 16px;
  }

  @media (min-width: 480px) {
	.games-grid {
	  grid-template-columns: repeat(3, 1fr);
	}
  }

  @media (min-width: 769px) {
	.games-grid {
	  grid-template-columns: repeat(5, 1fr);
	  gap: 18px;
	}
  }

  @media (min-width: 1024px) {
	.games-grid {
	  grid-template-columns: repeat(6, 1fr);
	}
  }

  .game-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
	position: relative;
  }

  .game-card:hover {
	transform: translateY(-4px);
	border-color: var(--gold2);
	box-shadow: 0 4px 15px rgba(240, 192, 64, 0.2);
  }

  .game-card:hover .game-play-overlay {
	opacity: 1 !important;
  }

  /* Result / Details Box */
  .tx-result-container {
	background: rgba(4, 20, 60, 0.85);
	border: 1.5px dashed var(--gold2);
	border-radius: 12px;
	padding: 18px;
	display: none;
	animation: fadeInUp 0.4s ease;
	margin: -16px;
  }

  .tx-result-title {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--gold2);
	text-align: center;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-bottom: 1px dashed rgba(70, 120, 210, 0.3);
	padding-bottom: 8px;
  }

  .tx-result-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
	font-size: 13px;
  }

  @media (min-width: 769px) {
	.tx-result-row {
	  font-size: 14px;
	}
  }

  .tx-result-row:last-child {
	border-bottom: none;
  }

  .tx-result-lbl {
	color: var(--gray);
	font-weight: 600;
  }

  .tx-result-val {
	color: #fff;
	text-align: right;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 6px;
  }

  .tx-result-val.highlight {
	color: var(--gold3);
	font-size: 16px;
  }

  .tx-qr-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 0 0;
	gap: 8px;
  }

  .tx-qr-img {
	width: 160px;
	height: 160px;
	border: 4px solid #fff;
	border-radius: 8px;
	background: #fff;
  }

  .tx-copy-btn {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: var(--gold2);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	transition: all 0.2s;
  }

  .tx-copy-btn:hover,
  .tx-history-btn:hover {
	background: var(--gold2) !important;
	color: #000 !important;
  }

  /* ===== QUICK WALLET BUTTONS STYLE ===== */
  .quick-wallet-container {
	display: flex;
	gap: 12px;
	padding: 0 14px;
	margin-bottom: 8px;
  }

  .quick-wallet-btn {
	flex: 1;
	padding: 14px;
	border-radius: 12px;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1.5px solid transparent;
  }

  .quick-wallet-btn.deposit {
	background: linear-gradient(135deg, #10B981 0%, #059669 100%);
	border-color: rgba(16, 185, 129, 0.4);
	box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .quick-wallet-btn.deposit:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	filter: brightness(1.1);
  }

  .quick-wallet-btn.deposit:active {
	transform: translateY(0);
  }

  .quick-wallet-btn.withdraw {
	background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
	border-color: rgba(239, 68, 68, 0.4);
	box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .quick-wallet-btn.withdraw:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	filter: brightness(1.1);
  }

  .quick-wallet-btn.withdraw:active {
	transform: translateY(0);
  }

  /* ===== CUSTOM DIALOG MODALS STYLE ===== */
  .custom-dialog-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 1, 10, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	padding: 20px;
  }

  .custom-dialog-overlay.open {
	opacity: 1;
	pointer-events: all;
  }

  .custom-dialog-card {
	background: linear-gradient(135deg, #07163c 0%, #030a1c 100%);
	border: 1.5px solid rgba(30, 100, 255, 0.5);
	border-radius: 20px;
	width: 100%;
	max-width: 380px;
	padding: 24px;
	text-align: center;
	position: relative;
	transform: scale(0.9);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(30, 100, 255, 0.15);
  }

  .custom-dialog-overlay.open .custom-dialog-card {
	transform: scale(1);
  }

  .custom-dialog-icon {
	font-size: 42px;
	color: var(--gold2);
	margin-bottom: 14px;
	display: flex;
	justify-content: center;
	text-shadow: 0 0 12px rgba(240, 192, 64, 0.3);
  }

  .custom-dialog-message {
	font-family: var(--font-main);
	font-size: 15px;
	line-height: 1.6;
	color: #fff;
	margin-bottom: 20px;
	word-break: break-word;
  }

  .custom-dialog-input-wrap {
	margin-bottom: 20px;
	display: none;
  }

  .custom-dialog-input {
	width: 100%;
	box-sizing: border-box;
	background: rgba(4, 12, 36, 0.8);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 12px 14px;
	font-family: var(--font-main);
	font-size: 14px;
	color: #fff;
	outline: none;
	transition: all 0.25s ease;
  }

  .custom-dialog-input:focus {
	border-color: var(--gold2);
	box-shadow: 0 0 10px rgba(240, 192, 64, 0.25);
  }

  .custom-dialog-buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
  }

  .custom-dialog-btn {
	padding: 10px 24px;
	border-radius: 10px;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	border: none;
	transition: all 0.25s ease;
	min-width: 100px;
  }

  .custom-dialog-btn.ok-btn {
	background: linear-gradient(135deg, #1a4fc4, #2563eb);
	color: #fff;
	box-shadow: 0 4px 12px rgba(26, 79, 196, 0.4);
  }

  .custom-dialog-btn.ok-btn:hover {
	filter: brightness(1.15);
	transform: translateY(-1px);
  }

  .custom-dialog-btn.cancel-btn {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--border);
	color: var(--gray);
	display: none;
  }

  .custom-dialog-btn.cancel-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
  }

  /* ===== ANNOUNCEMENT POPUP (uniform style for all page-load popups) ===== */
  .announce-card {
	max-width: 420px;
	width: 90%;
	padding: 0;
	background: #041232;
	border: 1.5px solid rgba(30, 100, 255, 0.5);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9), 0 0 30px rgba(30, 100, 255, 0.12);
  }

  .announce-header {
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.3);
  }

  .announce-header-title {
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	color: var(--gold2);
	display: flex;
	align-items: center;
	gap: 6px;
  }

  .announce-close-btn {
	background: none;
	border: none;
	color: var(--gray);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	border-radius: 6px;
	transition: color 0.2s, background 0.2s;
	flex-shrink: 0;
	position: relative;
	top: 0;
	right: 0;
  }

  .announce-close-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
  }

  .announce-swiper {
	width: 100%;
	height: auto;
  }

  /* Slide variant: image (promo popup) */
  .announce-img-slide img {
	width: 100%;
	display: block;
  }

  /* Slide variant: content (deposit/withdraw popup) */
  .announce-content-slide {
	padding: 28px 24px;
	text-align: center;
	background: linear-gradient(135deg, #07163c 0%, #030a1c 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
  }

  .announce-content-icon {
	font-size: 52px;
	color: var(--gold2);
	filter: drop-shadow(0 0 14px rgba(240, 192, 64, 0.35));
	display: flex;
	justify-content: center;
  }

  .announce-content-title {
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
	margin: 0;
  }

  .announce-content-text {
	font-size: 13px;
	color: var(--gray);
	line-height: 1.7;
	margin: 0;
  }

  .announce-content-text strong {
	color: var(--gold3);
  }

  .announce-footer {
	padding: 12px 16px;
	background: rgba(0, 0, 0, 0.3);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .announce-footer label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--gray);
	cursor: pointer;
	user-select: none;
	transition: color 0.2s;
  }

  .announce-footer label:hover {
	color: #fff;
  }

  .announce-footer input[type="checkbox"] {
	accent-color: var(--gold);
	width: 15px;
	height: 15px;
	cursor: pointer;
  }

  /* ===== PAGE LOADER STYLE ===== */
  #pageLoader {
	position: fixed;
	inset: 0;
	background: #020a1c;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  @keyframes spinLoader {
	0% {
	  transform: rotate(0deg);
	}

	100% {
	  transform: rotate(360deg);
	}
  }

  @keyframes pulse {

	0%,
	100% {
	  transform: scale(1);
	  filter: drop-shadow(0 0 10px rgba(240, 192, 64, 0.3));
	}

	50% {
	  transform: scale(1.06);
	  filter: drop-shadow(0 0 30px rgba(240, 192, 64, 0.7));
	}
  }

  @keyframes fadeText {
	0% {
	  opacity: 0.4;
	}

	100% {
	  opacity: 1;
	}
  }

  /* ===== MIGRATED & CUSTOM EXTENSION STYLES ===== */
  /* Marquee animation */
  @keyframes marquee {
	0% {
	  transform: translate3d(0, 0, 0);
	}

	100% {
	  transform: translate3d(-100%, 0, 0);
	}
  }

  /* Daily Check-in Grid & Day Card Styles */
  .checkin-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 15px;
	padding: 5px;
  }

  @media (max-width: 360px) {
	.checkin-grid {
	  grid-template-columns: repeat(3, 1fr);
	}
  }

  .checkin-day {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 6px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
	align-items: center;
	transition: all 0.2s ease-in-out;
	position: relative;
  }

  .checkin-day .day-number {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 11px;
	color: var(--gray);
  }

  .checkin-day .reward-icon {
	font-size: 20px;
	color: var(--gold2);
  }

  .checkin-day .reward-amount {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 12px;
	color: #fff;
  }

  /* Claimed status */
  .checkin-day.claimed {
	background: rgba(16, 185, 129, 0.08);
	border-color: rgba(16, 185, 129, 0.35);
	opacity: 0.8;
  }

  .checkin-day.claimed::after {
	content: '✔';
	position: absolute;
	top: 4px;
	right: 6px;
	color: #10b981;
	font-size: 10px;
	font-weight: 800;
  }

  .checkin-day.claimed .reward-icon {
	color: #10b981;
  }

  /* Active claimable status */
  .checkin-day.special {
	background: linear-gradient(135deg, rgba(240, 192, 64, 0.15), rgba(212, 165, 32, 0.03));
	border-color: var(--gold);
	cursor: pointer;
	box-shadow: 0 0 10px rgba(240, 192, 64, 0.15);
	animation: buttonPulse 2s infinite ease-in-out;
  }

  .checkin-day.special:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 15px rgba(240, 192, 64, 0.35);
	border-color: var(--gold3);
  }

  /* Not due yet status */
  .checkin-day.notdue {
	background: rgba(255, 255, 255, 0.01);
	border-color: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.25);
  }

  .checkin-day.notdue .reward-icon,
  .checkin-day.notdue .reward-amount {
	color: rgba(255, 255, 255, 0.25);
  }

  @keyframes buttonPulse {

	0%,
	100% {
	  box-shadow: 0 0 8px rgba(240, 192, 64, 0.15);
	}

	50% {
	  box-shadow: 0 0 15px rgba(240, 192, 64, 0.4);
	}
  }