/* ==========================================================================
   style.css — custom styles on top of theme1.css (reference theme) + naive.css
   sections: vars / base / components (button,input,checkbox,select,switch,tabs)
            / modal / drawer / toast / pages / responsive
   ========================================================================== */

/* === vars === */
:root {
  --theme-color-1: #2A2200;
  --theme-color-2: #000000;
  --theme-font-color-1: #9A6D6D;
  --theme-font-color-2: #3159C6;
  --primary-color-1: #FFB711;
  --primary-color-2: #E6A91C;
  --primary-font-color: #FFFFFF;
  --secondary-color-1: #FF0509;
  --secondary-color-2: #000000;
  --secondary-font-color: #FF0000;
  --background-pc: url(/images/theme1/brand/bg-pc.png);
  --background-mobile: url(/images/theme1/brand/bg-mobile.png);
  --accent-1: #e9b033;
  --accent-2: #f2d638;
}

/* === base === */
html, body { background: #000; color: #fff; font-family: "Noto Sans Thai", "Kanit", sans-serif; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-size: 14px; line-height: 1.6; overflow-x: hidden; }
body.blocked { overflow: hidden; }
a { color: inherit; text-decoration: none; cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
main { min-height: 70vh; padding-bottom: 20px; }
.content-item { display: none; }
.content-item.active { display: block; }
#fix-bg { position: fixed; inset: 0; width: 100%; height: 100%; min-height: 110vh; z-index: -1; background: #000; background-image: var(--background-pc); background-position: center center; background-repeat: no-repeat; background-size: cover; }
@media (max-width: 640px) { #fix-bg { background-image: var(--background-mobile); } }

#blockUI { position: fixed; inset: 0; z-index: 5000; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; }
#blockUI.show { display: flex; }
#blockUI .spinner { width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(255,255,255,.2); border-top-color: var(--primary-color-1); animation: theme1-spin .8s linear infinite; }
@keyframes theme1-spin { to { transform: rotate(360deg); } }

/* === n-button (naive runtime vars) === */
.n-button { --n-bezier: cubic-bezier(.4,0,.2,1); --n-height: 34px; --n-font-size: 14px; --n-padding: 0 14px; --n-border-radius: 4px; --n-icon-size: 18px; --n-icon-margin: 6px; --n-opacity-disabled: .5; --n-color: var(--accent-1, #e9b033); --n-text-color: #fff; --n-border: none; --n-width: initial; }
.n-button { display: inline-flex; align-items: center; justify-content: center; height: var(--n-height); font-size: var(--n-font-size); padding: var(--n-padding); border-radius: var(--n-border-radius); background: var(--n-color); color: var(--n-text-color); cursor: pointer; border: 0; white-space: nowrap; user-select: none; position: relative; line-height: 1; font-weight: 600; transition: filter .2s; }
.n-button:hover { filter: brightness(1.08); }
.n-button:active { filter: brightness(.92); }
.n-button.n-button--block { width: 100%; }
.n-button.n-button--disabled, .n-button[disabled] { opacity: var(--n-opacity-disabled); cursor: not-allowed; filter: none; }
.n-button .n-button__content { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.n-button.n-button--small-type { --n-height: 28px; --n-font-size: 14px; --n-padding: 0 10px; --n-border-radius: 3px; }
.n-button.n-button--large-type { --n-height: 44px; --n-font-size: 16px; }
.n-button.primary-button { --n-height: 44px; }
.n-button.register-button { --n-height: 44px; }
.n-button.register-header-button, .n-button.primary-button.lg\:py-5 { --n-height: 40px; }
.n-button.btn-red { background: linear-gradient(180deg, #ff3b3b, #b30000); border-radius: 12px; }
.n-button.btn-green { background: linear-gradient(180deg, #34d058, #1a8f35); border-radius: 12px; }
.n-button.btn-gray { background: linear-gradient(180deg,#5a5a5a,#2b2b2b); border-radius: 12px; }
.n-button.btn-outline { background: transparent; border: 2px solid var(--primary-color-2); color: var(--primary-color-2); border-radius: 12px; }
.n-button.btn-gold { background: linear-gradient(180deg, var(--primary-color-1), var(--primary-color-2)); border-radius: 12px; --n-height: 44px; font-weight: 700; }
.depoist-button-home { background: linear-gradient(180deg,#34c759,#1f8a3b) !important; border-radius: 8px; font-weight: 700; }
.withdraw-button-home { background: linear-gradient(180deg,#ff2d2d,#a10000) !important; border-radius: 8px; font-weight: 700; }
.button-history { background: linear-gradient(180deg,#ff2d2d 0%,#8a0000 100%) !important; color: #fff !important; border-radius: 6px !important; box-shadow: 0 0 8px rgba(255,0,0,.6); }
.button-history p { color: #fff; }

/* === n-input === */
.n-input { --n-height: 44px; position: relative; width: 100%; display: flex; align-items: center; background: #1c1c1c; border: 1px solid transparent; border-radius: 12px; height: var(--n-height); transition: border-color .2s; }
.n-input.n-input--focus, .n-input:focus-within { border-color: #fff; background: #0b0b0b; }
.n-input.n-input--round { border-radius: 999px; }
.n-input .n-input-wrapper { display: flex; align-items: center; width: 100%; height: 100%; padding: 0 12px; }
.n-input .n-input__input { flex: 1; min-width: 0; position: relative; }
.n-input .n-input__input-el { width: 100%; height: 100%; background: transparent; border: 0; outline: none; color: #fff; font-size: 16px; font-family: inherit; }
.n-input .n-input__input-el::placeholder { color: #c2c2c2; }
.n-input .n-input__placeholder { display: none; }
.n-input .n-input__suffix { display: flex; align-items: center; padding-left: 8px; }
.n-input .n-input__eye { cursor: pointer; display: flex; }
.n-input .n-input__border, .n-input .n-input__state-border { display: none; }
.n-input.n-input--error { border-color: #ff3b3b; }
.n-input.n-input--disabled { opacity: .6; }
.n-input.input-search { --n-height: 34px; background: #fff; border-radius: 999px; }
.n-input.input-search .n-input__input-el { color: #333; font-size: 14px; }
.n-form-item { margin-bottom: 12px; }
.n-form-item .n-form-item-label { display: block; color: #fff; font-weight: 600; margin-bottom: 6px; font-size: 16px; }
.n-form-item-feedback-wrapper { min-height: 4px; }
.n-form-item-feedback { color: #ff5c5c; font-size: 12px; padding: 2px 4px; }
select.n-input__input-el { appearance: none; -webkit-appearance: none; padding-right: 26px; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23c2c2c2' d='M3.14 5.64a.75.75 0 0 1 1.06 0L8 9.44l3.8-3.8a.75.75 0 1 1 1.06 1.06l-4.33 4.33a.75.75 0 0 1-1.06 0L3.14 6.7a.75.75 0 0 1 0-1.06z'/></svg>") no-repeat right 4px center / 16px; }
select.n-input__input-el option { color: #000; background: #fff; }
.n-input.n-select-like { background: #000; border: 1px solid #fff; border-radius: 12px; --n-height: 40px; }
.n-input.n-select-like .n-input__input-el { font-size: 14px; }
textarea.n-input__input-el { padding: 10px 0; resize: none; }

/* === n-checkbox === */
.n-checkbox { --n-size: 18px; --n-font-size: 16px; --n-label-line-height: 1.6; --n-color-checked: transparent; --n-border-checked: 1px solid var(--accent-1, #e9b033); --n-border: 1px solid var(--accent-1, #e9b033); --n-border-focus: 1px solid var(--accent-1, #e9b033); --n-check-mark-color: #fff; --n-border-radius: 4px; --n-color: transparent; --n-box-shadow-focus: none; --n-bezier: cubic-bezier(.4,0,.2,1); color: #fff; }
.n-checkbox .n-checkbox-box { width: 22px; height: 22px; border-radius: 4px; position: relative; display: inline-block; background: transparent; }
.n-checkbox .n-checkbox-box .n-checkbox-box__border { position: absolute; inset: 0; border: 1px solid var(--accent-1, #e9b033); border-radius: 4px; }
.n-checkbox .n-checkbox-icon { position: absolute; inset: 3px; }
.n-checkbox .n-checkbox-icon .check-icon { width: 100%; height: 100%; fill: #fff; opacity: 0; transform: scale(.5); transition: .2s; }
.n-checkbox .n-checkbox__label { padding-left: 8px; font-size: 16px; }
.n-checkbox--checked .n-checkbox-icon .check-icon { opacity: 1; transform: scale(1); }

/* === switch === */
.theme1-switch { position: relative; width: 78px; height: 40px; border-radius: 999px; background: #2b2b2b; border: 1px solid #3f3f3f; cursor: pointer; transition: .2s; flex-shrink: 0; }
.theme1-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 50%; background: #fff; transition: .2s; }
.theme1-switch.on { background: linear-gradient(180deg,#c99a1a,#8c6a0a); }
.theme1-switch.on::after { left: 42px; }

/* === tabs === */
.theme1-tabs { display: flex; justify-content: center; gap: 22px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 12px; overflow-x: auto; }
.theme1-tabs .theme1-tab { padding: 8px 4px; font-size: 18px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; }
.theme1-tabs .theme1-tab.active { color: var(--accent-1, #e9b033); border-bottom-color: var(--accent-1, #e9b033); }
.theme1-tab-pane { display: none; }
.theme1-tab-pane.active { display: block; }

/* === choice cards (deposit method) === */
.choice-card { width: 160px; height: 160px; border-radius: 16px; background: linear-gradient(180deg,#3a3000 0%,#000 100%); border: 2px solid #3f3f3f; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; position: relative; color: #fff; font-weight: 600; font-size: 16px; transition: .2s; }
.choice-card img { width: 80px; height: 80px; object-fit: contain; }
.choice-card.active { background: linear-gradient(180deg,#ffd15c,var(--accent-1, #e9b033)); border-color: #ffe08a; color: #000; }
.choice-card .badge-fast { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); background: #ff1a1a; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 12px; border-radius: 999px; white-space: nowrap; }
.choice-card.sm { width: 100%; height: 110px; }
.choice-card.sm img { width: 44px; height: 44px; }
.choice-card.sm span { font-size: 14px; }
.choice-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; border-bottom: 3px solid #333; scrollbar-width: thin; }
.choice-scroll .choice-card { flex: 0 0 auto; }

/* === amount presets === */
.amount-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.amount-presets button { height: 54px; border-radius: 8px; background: #000; border: 1px solid #8a8a8a; color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; }
.amount-presets button.active { background: linear-gradient(180deg,#ffd15c,var(--accent-1, #e9b033)); color: #000; border-color: #ffe08a; }

/* === modal === */
.n-modal-container { z-index: 2000; }
.n-modal-container[hidden] { display: none; }
.n-modal-container .n-modal-body-wrapper { overflow-y: auto; }
.n-modal-container .n-modal-mask { background: rgba(0,0,0,.6); }
.n-modal.modal { width: 550px; max-width: calc(100vw - 30px); margin: 40px auto; }
.n-modal.modal .inner-theme-box { padding: .75rem .75rem 1rem; }
.n-modal.modal-sm { width: 420px; }
.n-modal.modal-lg { width: 760px; }
.n-modal .text-header { text-shadow: 0 2px 2px rgba(0,0,0,.25); font-size: 18px; }
.n-modal .xicon svg { width: 1em; height: 1em; }
.modal-body { color: #fff; }
.modal-scroll { max-height: 60vh; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--accent-1, #e9b033) #222; }
.login-page { position: static; transform: none; }
.login-page .wrap-login-page { width: 100%; }
.box-logo-login-page { display: flex; justify-content: center; margin-top: -10px; }
.box-logo-login-page img { position: static !important; width: 190px; }
.title-login-page { font-size: 26px; font-weight: 700; color: #fff; margin-top: .5rem; }
.text-call-center .text-underline { color: var(--accent-1, #e9b033); text-decoration: underline; }
.wrap-form-login-page .n-form-item { margin-bottom: 18px; }
/* register steps */
.register-steps { display: flex; align-items: center; justify-content: space-between; margin: 24px 24px 20px; position: relative; }
.register-steps::before { content: ""; position: absolute; left: 30px; right: 30px; top: 22px; height: 3px; background: #fff; }
.register-steps .step { position: relative; z-index: 1; text-align: center; width: 90px; }
.register-steps .step .circle { width: 48px; height: 48px; border-radius: 50%; background: #fff; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; }
.register-steps .step .circle svg { width: 22px; height: 22px; fill: #000; }
.register-steps .step p { font-weight: 700; color: #fff; }
.register-steps .step.active .circle { background: var(--accent-1, #e9b033); }
.register-steps .step.active p { color: var(--accent-1, #e9b033); }
.register-step-pane { display: none; }
.register-step-pane.active { display: block; }
.bank-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 14px; background: rgba(0,0,0,.45); border-radius: 12px; max-height: 300px; overflow-y: auto; }
.bank-grid .bank-item { aspect-ratio: 1; border-radius: 14px; overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: .15s; opacity: .85; }
.bank-grid .bank-item img { width: 100%; height: 100%; object-fit: cover; }
.bank-grid .bank-item.active { border-color: var(--accent-1, #e9b033); opacity: 1; transform: scale(1.06); }
.gold-title { color: var(--accent-1, #e9b033); font-weight: 700; }
.pink-text { color: #d99a9a; }
.box-dark { background: rgba(0,0,0,.45); border: 2px solid #fff; border-radius: 16px; padding: 14px; }
.box-dark.no-border { border: 0; }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 16px; }
.stat-row .val { color: #d99a9a; font-weight: 600; }
.progress-rail { height: 12px; border-radius: 999px; background: #fff; overflow: hidden; }
.progress-rail .fill { height: 100%; background: linear-gradient(90deg,#ffd15c,var(--accent-1, #e9b033)); width: 0; transition: width .4s; }

/* === bank card (profile) === */
.bank-card { background: #fff url(/images/theme1/ui/circle-bg.png) no-repeat right bottom / 60%; border-radius: 16px; padding: 16px; color: #000; position: relative; }
.bank-card .bank-logo { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
.bank-card .bank-name { font-weight: 800; font-size: 18px; }
.bank-card .bank-number { font-size: 26px; font-weight: 800; letter-spacing: 1px; }
.bank-card .copy-btn { position: absolute; right: 16px; top: 16px; cursor: pointer; }
.bank-card .tag { position: absolute; right: 16px; bottom: 16px; background: var(--accent-1, #e9b033); color: #000; font-weight: 700; padding: 6px 16px; border-radius: 8px; }
.bank-card.gold { background: linear-gradient(180deg,#ffd15c,var(--accent-1, #e9b033)); color: #fff; }
.bank-card .check { position: absolute; right: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%; background: #22c55e; display: flex; align-items: center; justify-content: center; }
.bank-select-card { width: 160px; height: 150px; border-radius: 16px; background: #1a1a1a; border: 2px solid #333; padding: 12px; cursor: pointer; flex: 0 0 auto; color: #fff; font-weight: 700; position: relative; }
.bank-select-card img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.bank-select-card.active { background: linear-gradient(180deg,#ffd15c,var(--accent-1, #e9b033)); border-color: #ffe08a; }

/* === history list === */
.history-item { border: 1px solid #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px; display: flex; gap: 12px; align-items: center; background: rgba(0,0,0,.35); }
.history-item .amt { font-weight: 800; font-size: 18px; }
.history-item .st-1 { color: #22c55e; } .history-item .st-0 { color: var(--accent-1, #e9b033); } .history-item .st-2 { color: #ff4d4d; }
.history-empty { border: 1px solid #fff; border-radius: 16px; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 8px; }
.history-empty svg { width: 90px; height: 90px; fill: #fff; }
.load-more { text-align: center; padding: 8px; }

/* === drawer === */
.n-drawer-container { position: fixed; inset: 0; z-index: 2100; }
.n-drawer-container[hidden] { display: none; }
.n-drawer-container .n-drawer-mask { position: fixed; inset: 0; background: rgba(0,0,0,.4); }
.n-drawer-container .n-drawer { position: absolute; right: 0; top: 0; bottom: 0; width: 300px !important; margin-top: 4.5rem; background: linear-gradient(180deg, #221c00 0%, #000 100%); box-shadow: -4px 0 20px rgba(0,0,0,.6); overflow-y: auto; animation: theme1-slide-in .25s ease-out; color: #fff; }
@keyframes theme1-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.n-drawer .n-drawer-header { display: flex; justify-content: flex-end; padding: 16px 24px 0; }
.n-drawer .n-drawer-body-content-wrapper { padding: 0 1.5rem; padding-bottom: 5rem; }
.n-drawer .wrap-sidebar .item-sidebar a, .n-drawer .wrap-sidebar .item-sidebar { display: flex; align-items: center; font-size: 1rem; color: #fff; }
.n-drawer .wrap-sidebar .item-sidebar a svg { width: 28px; height: 28px; margin-right: .6rem; flex-shrink: 0; }
.n-drawer .wrap-sidebar .item-sidebar a img { width: 30px; height: 30px; margin-right: .6rem; object-fit: contain; }
.n-drawer hr { border: 0; border-top: 1px solid rgba(255,255,255,.25); margin: 8px 0; }
/* hover เมนู sidebar (PC / อุปกรณ์ที่มีเมาส์): แถบทองจาง ๆ เลื่อนขวา + ไอคอนขยาย + ตัวหนังสือสีทอง */
.n-drawer .wrap-sidebar .item-sidebar { position: relative; padding: .8rem .6rem; margin: 0 -0.6rem; border-radius: 12px; transition: background-color .18s ease, transform .18s ease; }
.n-drawer .wrap-sidebar .item-sidebar a { transition: color .18s ease; }
.n-drawer .wrap-sidebar .item-sidebar a svg, .n-drawer .wrap-sidebar .item-sidebar a img { transition: transform .18s ease, filter .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .n-drawer .wrap-sidebar .item-sidebar:hover { background: linear-gradient(90deg, rgba(233,176,51,.22), rgba(233,176,51,0)); transform: translateX(4px); }
  .n-drawer .wrap-sidebar .item-sidebar:hover::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 3px; background: var(--accent-1, #e9b033); }
  .n-drawer .wrap-sidebar .item-sidebar:hover a { color: var(--accent-1, #e9b033); }
  .n-drawer .wrap-sidebar .item-sidebar:hover a svg, .n-drawer .wrap-sidebar .item-sidebar:hover a img { transform: scale(1.12); filter: drop-shadow(0 0 4px rgba(233,176,51,.6)); }
  .n-drawer .ent-v { transition: transform .18s ease, box-shadow .18s ease; }
  .n-drawer .ent-v:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(233,176,51,.35); }
  .n-drawer .drawer-avatar:hover { filter: brightness(1.1); }
}
.n-drawer .group-button .n-button { flex: 1; --n-height: 40px; }
.n-drawer .wrap-sidebar { padding-top: 14px; }
.n-drawer .ent-v .badge { top: -10px; }
.n-drawer .ent-v { display: flex !important; align-items: center; gap: 10px; background: linear-gradient(90deg,#ffcc33,#e39a00); border-radius: 14px; padding: 12px 10px; margin: 12px 0 4px; color: #000; position: relative; cursor: pointer; }
.n-drawer .ent-v .ico { display: flex; align-items: center; }
.n-drawer .ent-v .ico img { width: 44px; }
.n-drawer .ent-v .tx h4 { font-weight: 800; font-size: 14px; margin: 0; }
.n-drawer .ent-v .tx p { font-size: 12px; margin: 0; }
.n-drawer .ent-v .chev { margin-left: auto; font-size: 22px; font-weight: 700; }
.n-drawer .ent-v .badge { position: absolute; top: -8px; right: 8px; background: #ff1a1a; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; display: flex; align-items: center; gap: 4px; }
.n-drawer .ent-v .badge .blink { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: theme1-blink 1s infinite; }
@keyframes theme1-blink { 50% { opacity: .2; } }
.menu-badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #ff1a1a; color: #fff; font-size: 11px; font-weight: 700; }
.box-promotion-header .menu-badge-count { position: absolute; top: -4px; right: -8px; margin: 0; }
.drawer-user-box { border: 1px solid #fff; border-radius: 10px; }
/* ยอดเงินใน drawer: สีทอง + ใหญ่ขึ้น (เดิม .primary-color-font = --theme-font-color-1 สีจืด) */
/* ซ้ายของกล่องผู้ใช้ใน drawer: avatar วงแหวนทอง + จำนวนเพชร */
.drawer-user-left { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0 6px 4px; }
.drawer-avatar { width: 56px; height: 56px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--accent-1, #e9b033) 0%, #fff3c4 50%, var(--accent-1, #e9b033) 100%); box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: pointer; }
.drawer-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 2px solid #1a1b1a; background: #1a1b1a; }
.drawer-diamond { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; line-height: 1; }
.drawer-diamond img { width: 16px; height: 16px; border-radius: 0; }
.n-drawer .drawer-user-box .drawer-balance { color: var(--accent-1, #e9b033); font-size: 20px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* === toast === */
.theme1-toast-wrap { position: fixed; top: 14px; left: 0; right: 0; z-index: 6000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.theme1-toast { pointer-events: auto; width: 100%; max-width: 560px; border-radius: 10px; padding: 14px 44px 14px 18px; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 16px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.4); position: relative; animation: theme1-toast-in .25s ease-out; }
.theme1-toast.error { background: #ff1a1a; }
.theme1-toast.success { background: #22a54a; }
.theme1-toast.info { background: #2b6fd6; }
.theme1-toast.warning { background: var(--accent-1, #e9b033); color: #000; }
.theme1-toast .ic { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #ff1a1a; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; }
.theme1-toast.success .ic { color: #22a54a; } .theme1-toast.info .ic { color: #2b6fd6; }
.theme1-toast .x { position: absolute; right: 12px; top: 10px; font-size: 22px; cursor: pointer; font-weight: 700; }
@keyframes theme1-toast-in { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) { .theme1-toast-wrap { align-items: flex-end; padding-right: 18px; } .theme1-toast { max-width: 360px; } }

/* === bottom sheet (center menu) === */
.theme1-sheet { position: fixed; inset: 0; z-index: 2050; }
.theme1-sheet[hidden] { display: none; }
.theme1-sheet .mask { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.theme1-sheet .panel { position: absolute; left: 12px; right: 12px; bottom: 120px; background: linear-gradient(180deg,#3e3e3e,#111); border-radius: 22px; padding: 14px 18px 18px; box-shadow: 0 -4px 30px rgba(0,0,0,.6); animation: theme1-sheet-in .25s ease-out; }
@keyframes theme1-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.theme1-sheet .grip { width: 70px; height: 5px; border-radius: 999px; background: #555; margin: 0 auto 10px; }
.theme1-sheet .title { font-size: 20px; font-weight: 700; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.theme1-sheet .title .x { width: 34px; height: 34px; border-radius: 8px; background: #555; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.sheet-grid a { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 4px; color: #fff; font-size: 12px; font-weight: 600; position: relative; }
.sheet-grid a img { width: 40px; height: 40px; object-fit: contain; }
@media (min-width: 900px) { .theme1-sheet .panel { left: 50%; right: auto; width: 520px; transform: translateX(-50%); bottom: 40px; } }

/* === home rows === */
.theme1-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; scrollbar-width: none; }
.theme1-row::-webkit-scrollbar { display: none; }
.theme1-row > a, .theme1-row > div { flex: 0 0 calc(33.333% - 6px); scroll-snap-align: start; }
@media (min-width: 640px) { .theme1-row > a, .theme1-row > div { flex-basis: calc(20% - 7px); } }
@media (min-width: 1024px) { .theme1-row > a, .theme1-row > div { flex-basis: calc(10% - 8px); } }
.box-img-game-jackpot, .box-img-game { position: relative; display: block; overflow: hidden; border-radius: 10px; }
.box-img-game-jackpot .framed-game, .box-img-game .framed-game, .framed-game { width: 100%; display: block; border-radius: 10px; aspect-ratio: 20/29; object-fit: cover; }
.box-img-game-jackpot .btm-dt-game { position: absolute; bottom: 0; left: 0; width: 100%; padding: 4px 4px 2px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 40%); }
.box-img-game-jackpot .btm-dt-game .game-img .brand-icon { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
.box-img-game-jackpot .btm-dt-game .text-per { font-size: 16px; font-weight: 700; }
.box-img-game-jackpot .btm-dt-game .bx-progress .n-progress-graph-line-rail { height: 5px; border-radius: 4px; background: #443918; overflow: hidden; }
.box-img-game-jackpot .btm-dt-game .bx-progress .n-progress-graph-line-fill { height: 100%; background: linear-gradient(90deg,#ffd15c,var(--accent-1, #e9b033)); border-radius: 4px; }
.box-img-game-jackpot .btm-dt-game p.text-center { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.game-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.unframed-game { position: relative; }
.unframed-game .frame-border { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.unframed-game .game-img { width: 100%; aspect-ratio: 20/29; object-fit: cover; border-radius: 10px; }
.box-title-game { position: relative; margin-bottom: 1rem; display: flex; align-items: center; }
.box-title-game::before { content: ""; display: inline-block; width: 6px; height: 28px; background: var(--accent-1, #e9b033); border-radius: 3px; margin-right: 10px; }
.box-title-game span { font-size: 20px; color: var(--accent-1, #e9b033); font-weight: 700; margin-left: 0; }
.box-title-game span + span { font-size: 16px; margin-left: 8px; }
.wrap-list-all-game .item-list-all-game { margin: 1rem 0 .9rem; }

/* game grid pages */
.wrap-show-list-game { display: flex; flex-wrap: wrap; margin: .5rem 0 1rem; }
.wrap-show-list-game .item-show-list-game { width: 33.333%; position: relative; padding: 6px; }
@media (min-width: 640px) { .wrap-show-list-game .item-show-list-game { width: 20%; padding: 10px; } }
@media (min-width: 1024px) { .wrap-show-list-game .item-show-list-game { width: 10%; } }
.wrap-show-list-game .item-show-list-game .brand-icon, .wrap-show-list-game .item-show-list-game .group-game-list > img, .wrap-show-list-game .item-show-list-game .group-game-list .game-img { width: 100%; aspect-ratio: 20/29; object-fit: cover; border-radius: 10px; }
.wrap-show-list-game .item-show-list-game .brand-icon.sq { aspect-ratio: 1; }
.wrap-show-list-game .item-show-list-game .fav-btn { position: absolute; top: -10px; right: -10px; width: 52px; z-index: 3; }
.wrap-show-list-game .item-show-list-game .fav-btn img { width: 100%; padding: 10px; }
.wrap-show-list-game .item-show-list-game .fav-btn.active img { filter: drop-shadow(0 0 4px rgba(233,176,51,.7)); }
.wrap-show-list-game .no-list-game { background: rgba(0,0,0,.55); border-radius: 12px; width: 100%; padding: 12px; }
.wrap-show-list-game .no-list-game h2 { color: #fff; font-size: 22px; font-weight: 700; }
.wrap-search-game { margin-top: .5rem; }
.wrap-search-game .box-text-category h2 { color: var(--accent-1, #e9b033); font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.wrap-search-game .b-search { position: relative; width: 200px; display: flex; justify-content: flex-end; align-items: center; }
.wrap-search-game .b-search .bg-search-game { width: 40px; height: 40px; background: url(/images/theme1/ui/bg-search.png) no-repeat center / 100% 100%; animation: theme1-spin 6s linear infinite; }
.wrap-search-game .b-search .icon-search { position: absolute; right: 10px; top: 10px; width: 20px; z-index: 4; }
.wrap-search-game .b-search .input-search { position: absolute; right: 0; top: 3px; width: 34px; height: 34px; z-index: 1; margin-right: 3px; transition: width .4s; opacity: 0; }
.wrap-search-game .b-search.open .input-search { width: 100%; opacity: 1; }
.wrap-search-game .b-search.open .bg-search-game, .wrap-search-game .b-search.open .icon-search { z-index: 5; }
.btn-back-page { display: inline-flex; align-items: center; gap: 4px; color: #fff; background: rgba(0,0,0,.5); border: 1px solid #555; border-radius: 8px; padding: 2px 10px; font-size: 13px; }

/* banner */
#banner-main-page { margin-top: 100px; }
@media (max-width: 640px) { #banner-main-page { margin-top: 96px; } }
#banner-main-page .wrap-banner { margin: 0 auto; }
#banner-main-page .swiper { width: 100%; }
#banner-main-page .carousel-img { width: 100%; height: auto; display: block; }
.marquee-section p { margin: 0; }
/* ประกาศ: เลื่อนด้วย CSS ชั้นเดียว (เลิกใช้ <marquee> + animation ของ theme1 ที่ซ้อนกันบนมือถือ) — ความเร็วคงที่ ตั้ง --marquee-duration จาก initMarquee() */
.marquee-section .marquee-track { flex: 1; min-width: 0; overflow: hidden; position: relative; white-space: nowrap; }
.marquee-section .marquee-track p { display: inline-block; margin: 0 !important; padding: 3px 0 3px 100% !important; will-change: transform; animation: marquee-run var(--marquee-duration, 14s) linear infinite !important; }
@keyframes marquee-run { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* === pages (promotion / events / wheel / coupon / store / affiliate) === */
.page-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.page-head h2 { color: var(--accent-1, #e9b033); font-size: 20px; font-weight: 700; }
.card-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 14px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.promo-card { background: linear-gradient(180deg,#3e3e3e 0%,#010600 100%); border: 2px solid #8e8f95; border-radius: 16px; overflow: hidden; position: relative; }
.promo-card img { width: 100%; display: block; }
.promo-card .body { padding: 10px 12px; }
.promo-card .name { font-weight: 700; font-size: 15px; color: #fff; min-height: 24px; }
.promo-card .actions { display: flex; gap: 8px; margin-top: 8px; }
.promo-card .actions .n-button { flex: 1; --n-height: 38px; }
.promo-card .tag-active { position: absolute; top: 10px; left: 10px; background: #22c55e; color: #fff; font-weight: 700; padding: 3px 12px; border-radius: 999px; font-size: 12px; z-index: 2; }
.promo-detail { color: #fff; font-size: 14px; }
.promo-detail img { max-width: 100%; }
.event-card { display: flex; gap: 12px; background: rgba(0,0,0,.45); border: 1px solid #fff; border-radius: 14px; padding: 10px; align-items: center; }
.event-card img { width: 80px; height: 80px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,.05); }
.event-card .info { flex: 1; min-width: 0; }
.event-card .info .name { font-weight: 700; font-size: 15px; }
.event-card .info .sub { color: #d99a9a; font-size: 12px; }
.event-card .n-button { --n-height: 36px; border-radius: 10px; }
.cashback-card { display: flex; align-items: center; gap: 12px; border: 1px solid #fff; border-radius: 14px; padding: 12px; background: rgba(0,0,0,.4); margin-bottom: 12px; }
.cashback-card img { width: 64px; height: 64px; object-fit: contain; }
.cashback-card .info { flex: 1; }
.cashback-card .info .name { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.cashback-card .info .val { font-weight: 800; font-size: 20px; color: var(--accent-1, #e9b033); }
.cashback-card .n-button { --n-height: 44px; border-radius: 12px; padding: 0 22px; font-size: 16px; }
.checkin-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.checkin-day { background: rgba(0,0,0,.5); border: 1px solid #444; border-radius: 12px; padding: 6px 4px; text-align: center; color: #fff; font-size: 12px; }
.checkin-day img { width: 42px; height: 42px; object-fit: contain; margin: 0 auto 2px; display: block; }
.checkin-day.current { border-color: var(--accent-1, #e9b033); box-shadow: 0 0 8px rgba(233,176,51,.6); }
.checkin-day .amt { color: var(--accent-1, #e9b033); font-weight: 700; }
.wheel-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wheel-wrap .wheel { max-width: 360px; width: 100%; }
/* โลโก้กลางวงล้อ: ปลั๊กอิน superWheel จัดกลางด้วย text-align (img inline) แต่ theme1.css (tailwind) ตั้ง img{display:block} → โลโก้เบี้ยวซ้าย */
.superWheel .sWheel-center > img { display: block; margin: 0 auto; border-radius: 0; }
.store-card { background: linear-gradient(180deg,#3e3e3e 0%,#010600 100%); border: 2px solid #8e8f95; border-radius: 16px; padding: 10px; text-align: center; }
.store-card img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; }
.store-card .name { font-weight: 700; margin-top: 6px; min-height: 24px; }
.store-card .point { color: var(--accent-1, #e9b033); font-weight: 700; display: flex; justify-content: center; align-items: center; gap: 4px; }
.store-card .point img { width: 18px; height: 18px; }
.aff-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aff-summary .box { background: rgba(0,0,0,.5); border: 1px solid #fff; border-radius: 12px; padding: 10px; text-align: center; }
.aff-summary .box .lb { font-size: 12px; color: #d99a9a; }
.aff-summary .box .vl { font-size: 18px; font-weight: 800; color: var(--accent-1, #e9b033); }
.qr-box { background: #fff; padding: 8px; border-radius: 12px; display: inline-block; }
.qr-box img { width: 180px; height: 180px; display: block; }
.copy-field { display: flex; align-items: center; gap: 8px; background: #000; border: 1px solid #fff; border-radius: 12px; padding: 8px 12px; }
.copy-field .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.countdown { font-weight: 800; color: #ff4d4d; font-size: 18px; }
.qr-image { width: 260px; max-width: 100%; border-radius: 12px; background: #fff; padding: 8px; margin: 0 auto; display: block; }
.turn-box { background: rgba(0,0,0,.4); border-radius: 8px; padding: 8px 12px; display: flex; justify-content: space-between; }
.news-img { width: 100%; border-radius: 12px; }
.stuck-game-image { width: 140px; border-radius: 12px; margin: 0 auto; }
.deposit-success-amount { font-size: 32px; font-weight: 800; color: #22c55e; }
.text-gold { color: var(--accent-1, #e9b033); }
.text-red { color: #ff4d4d; }
.text-green { color: #22c55e; }
.hr-line { border: 0; border-top: 1px solid rgba(255,255,255,.15); margin: 10px 0; }
.file-drop { border: 2px dashed #8a8a8a; border-radius: 12px; padding: 18px; text-align: center; cursor: pointer; background: rgba(0,0,0,.35); }
.file-drop img.preview { max-height: 220px; margin: 8px auto 0; border-radius: 8px; }
.p2p-card { border: 2px solid var(--accent-1, #e9b033); border-radius: 14px; padding: 12px; background: rgba(0,0,0,.5); }
.p2p-card .row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.15); }
.promo-select { display: flex; align-items: center; gap: 10px; background: #000; border: 1px solid #fff; border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.promo-select img { width: 34px; height: 34px; object-fit: contain; }
.promo-select .txt { flex: 1; font-weight: 600; font-size: 16px; }

/* === layout tweaks === */
.header-section .box-hamburger .ham { cursor: pointer; }
.box-username .text-username { color: #fff; font-weight: 600; }
.box-contact { transition: transform .3s; animation: none !important; }
.contact-hidden .box-contact { transform: translateX(calc(100% - 4px)); }
.box-contact .open-contact svg { transition: transform .3s; }
.contact-hidden .box-contact .open-contact svg { transform: rotate(180deg); }
.item-category-game a { display: block; }
.item-category-game.-active .inner-bg-btn { fill: url(#gradient-active); }
.wrap-footer-float { display: none; }
@media (max-width: 640px) { .wrap-footer-float { display: block; } main { padding-bottom: 110px; } .box-contact { top: 52%; } }
.section-content { margin: 0 6vw; overflow: hidden; }
@media (max-width: 1180px) { .section-content { margin: 0 2vw; } }
@media (max-width: 1120px) { .section-content { margin: 0 .5rem !important; } }
.bank-grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 480px) { .bank-grid { grid-template-columns: repeat(4, 1fr); } .amount-presets { grid-template-columns: repeat(4, 1fr); } .amount-presets button { font-size: 18px; height: 48px; } .choice-card { width: 140px; height: 140px; } .register-steps { margin: 20px 4px; } .n-modal.modal { margin: 20px auto; } }

/* === fixes (naive overrides) === */
.n-form-item { display: block !important; }
.n-input .n-input__input-el::placeholder, .n-input .n-input__textarea-el::placeholder { color: #c2c2c2 !important; opacity: 1; }
.n-input.input-search .n-input__input-el::placeholder { color: #888 !important; }
.n-button.register-button { background: transparent !important; border: 2px solid var(--primary-color-2); }
.n-button.register-button .n-button__content { color: var(--primary-color-2); }
.n-button.register-header-button { background: transparent !important; border: 2px solid var(--secondary-color-1); }
.n-button.register-header-button .n-button__content { color: var(--secondary-font-color); }
.n-button.primary-button { background: linear-gradient(180deg, var(--primary-color-1), var(--primary-color-2)) !important; }
.wrap-category-game { position: relative; z-index: 0; }
.item-category-game { position: relative; }
.wrap-header .flex.flex-row.w-full.space-x-2 .mb-5 { margin-bottom: 0; }
/* naive drawer/input overrides */
.n-drawer .n-drawer-content { display: block !important; height: auto !important; }
.n-drawer .n-drawer-body { display: block !important; flex: none !important; overflow: visible !important; }
.n-drawer .n-drawer-body-content-wrapper { display: block !important; }
.n-input .n-input__input-el::placeholder, .n-input .n-input__textarea-el::placeholder { -webkit-text-fill-color: #c2c2c2 !important; }
.n-input.input-search .n-input__input-el::placeholder { -webkit-text-fill-color: #888 !important; }
/* pages below the fixed header (theme1.css forces .section-content margin with !important) */
.content-item:not([data-page="home"]) > .section-content { padding-top: 100px; }
@media (max-width: 640px) { .content-item:not([data-page="home"]) > .section-content { padding-top: 96px; } }
/* bottom nav: joystick sits inside the curve like the reference (its zoom keyframes lift it 30px, reference has animations off) */
.wrap-footer-float .box-footer-float .inner-box-footer-float .wrap-menu-foot-float .item-menu-foot-float:nth-child(3) { animation: none !important; transform: none; }
/* jackpot card progress: override naive defaults (max-width:0, undefined vars) */
.box-img-game-jackpot .btm-dt-game .bx-progress .n-progress-graph-line-rail { height: 5px !important; border-radius: 4px; background-color: #443918 !important; overflow: hidden; }
.box-img-game-jackpot .btm-dt-game .bx-progress .n-progress-graph-line-fill { height: 5px !important; background: linear-gradient(90deg, #f55a23, #fdb103) !important; border-radius: 4px; }
/* drag-to-scroll rows */
.theme1-row, .wrap-category-game, .choice-scroll { cursor: grab; }
.theme1-row.is-dragging, .wrap-category-game.is-dragging, .choice-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.theme1-row.is-dragging a, .theme1-row.is-dragging img { pointer-events: none; }
.theme1-row img, .wrap-category-game img { -webkit-user-drag: none; user-select: none; }
/* tablet widths (641–1023px): denser game rows like the reference, hide header shortcut icons that overlap the hamburger */
@media (min-width: 640px) and (max-width: 767px) { .theme1-row > a, .theme1-row > div { flex-basis: calc(14.285% - 7px); } }
@media (min-width: 768px) { .theme1-row > a, .theme1-row > div { flex-basis: calc(10% - 8px); } }
@media (min-width: 641px) and (max-width: 1023px) { .wrap-header .header-right .box-bag-header, .wrap-header .header-right .box-promotion-header { display: none !important; } }
/* category boxes under 1120px: fixed 125px strip like the reference (background art cropped with object-fit) */
@media (max-width: 1120px) {
  .block-game-category .box-other-category > .flex { height: 125px; }
  .block-game-category .box-other-category .box-ctg-1 > img.w-full, .block-game-category .box-other-category .box-ctg-2 > img.w-full, .block-game-category .box-other-category .box-ctg-3 > img.w-full { height: 125px; object-fit: cover; }
}
@media (max-width: 640px) {
  .block-game-category .box-other-category > .flex { height: auto; }
  .block-game-category .box-other-category .box-ctg-1 > img.w-full, .block-game-category .box-other-category .box-ctg-2 > img.w-full, .block-game-category .box-other-category .box-ctg-3 > img.w-full { height: auto; object-fit: initial; }
}
/* loading skeleton for home game rows */
.skeleton-card { border-radius: 10px; overflow: hidden; }
.skeleton-card .skeleton-img { aspect-ratio: 20/29; border-radius: 10px; background: linear-gradient(90deg, #1c1c1c 25%, #2e2e2e 37%, #1c1c1c 63%); background-size: 400% 100%; animation: theme1-shimmer 1.4s ease infinite; }
.skeleton-card .skeleton-line { height: 12px; margin: 8px 14px 0; border-radius: 6px; background: #222; }
@keyframes theme1-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* === provider strip (เลือกค่ายเกม) on provider game page === */
#fixed-brandgame { margin-top: 10px; }
.wrap-show-brand-game { border-bottom: 3px solid rgba(255,255,255,.2); position: relative; padding-bottom: 2px; }
.wrap-show-brand-game .box-title-show-brand { padding: 4px 0 6px; }
.wrap-show-brand-game .box-title-show-brand h2 { color: var(--accent-1, #e9b033); font-weight: 600; font-size: 1.2rem; }
.wrap-show-brand-game .b-show-brand { margin-left: 190px; }
.brand-row { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; cursor: grab; }
.brand-row::-webkit-scrollbar { display: none; }
.brand-row .box-item-brand { flex: 0 0 auto; width: 62.8px; border-radius: 12px; padding: 2px; background: linear-gradient(to right, #8e8f95 0%, #ffffff 14%, #8e8f95 50%, #ffffff 85%, #8e8f95 100%); position: relative; }
.brand-row .box-item-brand .inner-item-brand { padding: 2px; height: 52px; display: flex; align-items: center; background: linear-gradient(180deg, var(--theme-color-1, #3e3e3e) 0%, var(--theme-color-2, #0a0a0a) 100%); border-radius: 12px; }
.brand-row .box-item-brand .inner-item-brand img { filter: grayscale(1); width: 100%; height: 100%; object-fit: contain; transition: .2s; }
.brand-row .box-item-brand:hover .inner-item-brand img, .brand-row .box-item-brand.active .inner-item-brand img { filter: none; }
.brand-row .box-item-brand.active { background: linear-gradient(45deg, #ffffff 0%, var(--accent-2, #f2d638) 21%, #ffffff 50%, var(--accent-2, #f2d638) 77%, #ffffff 100%); }
.brand-row .box-item-brand.active::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -13px; height: 4.5px; border-radius: 6px; background: linear-gradient(180deg, var(--accent-2, #f2d638) 0%, var(--accent-1, #e9b033) 100%); }
.wrap-show-brand-game .box-active-brand { position: absolute; left: 0; bottom: 0; z-index: 2; width: 180px; height: 70%; display: flex; justify-content: center; align-items: center; padding: 1rem 2rem; }
.wrap-show-brand-game .box-active-brand .b-active { background: linear-gradient(45deg, #ffffff 0%, var(--accent-2, #f2d638) 21%, #ffffff 50%, var(--accent-2, #f2d638) 77%, #ffffff 100%); padding: 2px; border-radius: 12px; width: 100%; }
.wrap-show-brand-game .box-active-brand .b-active .inner-b-active { height: 50px; display: flex; align-items: center; background: linear-gradient(180deg, var(--accent-2, #f2d638) 0%, var(--accent-1, #e9b033) 100%); border-radius: 12px; width: 100%; }
.wrap-show-brand-game .box-active-brand .b-active .inner-b-active img { width: 100%; height: 100%; object-fit: contain; padding: 0 5px; filter: drop-shadow(0 0 .1rem rgba(0,0,0,.81)); }
.wrap-show-brand-game .box-active-brand .b-divider::before { position: absolute; content: ""; width: 65%; height: 4.5px; background: linear-gradient(180deg, var(--accent-2, #f2d638) 0%, var(--accent-1, #e9b033) 100%); right: 0; left: 0; bottom: -3px; margin: 0 auto; border-radius: 6px; }
.wrap-show-brand-game .box-active-brand .b-divider::after { position: absolute; content: ""; width: 4px; height: 75%; background: rgba(255,255,255,.2); top: 0; right: 6%; bottom: 0; margin: auto; border-radius: 6px; }
@media (max-width: 1024px) {
  .wrap-show-brand-game .box-active-brand { width: 130px; height: 65%; padding: 0 1rem 0 .5rem; }
  .wrap-show-brand-game .b-show-brand { margin-left: 135px; }
  .brand-row .box-item-brand, .wrap-show-brand-game .box-active-brand .b-active { border-radius: 5px; padding: 1px; }
  .brand-row .box-item-brand .inner-item-brand, .wrap-show-brand-game .box-active-brand .b-active .inner-b-active { height: 40px; border-radius: 4px; }
}
@media (max-width: 600px) {
  .wrap-show-brand-game .box-active-brand { width: 80px; padding: 0 1rem 0 0; }
  .wrap-show-brand-game .b-show-brand { margin-left: 82px; }
  .brand-row .box-item-brand .inner-item-brand, .wrap-show-brand-game .box-active-brand .b-active .inner-b-active { height: 35px; }
  .wrap-show-brand-game .box-active-brand .b-divider::before { width: 85%; right: auto; }
}
/* title/search row spacing (reference: mt-[30px] under the strip, list 1rem below) */
.wrap-search-game .game-title-row { margin-top: 8px; min-height: 40px; }
.wrap-search-game .game-title-row.with-brand { margin-top: 30px; }
.wrap-show-list-game { margin-top: 1rem; }
.wrap-search-game .b-search .bg-search-game { top: -2px; }
/* search ring: keep it inside the title row (no overlap with the game grid) */
.wrap-search-game .game-title-row { align-items: center; }
.wrap-search-game .b-search { height: 47px; }
.wrap-search-game .b-search .bg-search-game { top: 0 !important; }
.wrap-search-game .b-search .icon-search { top: 0 !important; bottom: 0 !important; margin: auto 0 !important; }
.wrap-search-game .b-search .input-search { top: 6px; }
.wrap-show-list-game { margin-top: 1.4rem !important; }
@media (max-width: 600px) { .wrap-search-game .b-search { height: 40px; } .wrap-search-game .b-search .input-search { top: 3px; } }
/* sticky provider strip (class added by event.js when scrolled past the header) */
#fixed-brandgame.fixed-brand-game { position: fixed; left: 0; right: 0; z-index: 9; margin: 0; padding: 4px .5rem 6px; background: rgba(0,0,0,.92); box-shadow: 0 6px 14px rgba(0,0,0,.5); }
#fixed-brandgame.fixed-brand-game .wrap-show-brand-game { border-bottom-width: 2px; }
#fixed-brandgame.fixed-brand-game .box-title-show-brand { display: none; }
#fixed-brandgame.fixed-brand-game .brand-row { padding-top: 6px; padding-bottom: 6px; }
#fixed-brandgame.fixed-brand-game .box-active-brand { height: 100%; }
@media (min-width: 1121px) { #fixed-brandgame.fixed-brand-game { padding-left: 6vw; padding-right: 6vw; } }
/* bottom bar auto-hide */
.wrap-footer-float { transition: transform .08s linear; will-change: transform; }
.wrap-footer-float.nav-hidden { transform: translateY(110%); }
/* search icon centered inside the ring (beats theme1 !important rules by specificity) */
.section-content .wrap-search-game .b-search a .icon-search { position: absolute !important; top: 0 !important; bottom: 0 !important; right: 12px !important; left: auto !important; margin: auto 0 !important; width: 23px !important; height: 23px !important; z-index: 4; }
@media (max-width: 600px) { .section-content .wrap-search-game .b-search a .icon-search { width: 20px !important; height: 20px !important; right: 10px !important; } }
.section-content .wrap-search-game .b-search .bg-search-game { top: 0 !important; right: 0 !important; }
/* ตอนเปิดช่องค้นหา: bg วงกลมถูกยกเป็น z-index 5 → แว่นต้องอยู่เหนือกว่า (กฎ icon ด้านบน specificity สูงกว่า .b-search.open เดิม) */
.section-content .wrap-search-game .b-search.open a .icon-search { z-index: 6; }
/* drawer promo banner: keep the HOT badge fully visible */
.n-drawer .n-drawer-body, .n-drawer .n-drawer-body-content-wrapper, .n-drawer .wrap-sidebar { overflow: visible !important; }
.n-drawer .wrap-sidebar { padding-top: 4px; } /* HOT badge อยู่ในการ์ดแล้ว (กฎด้านล่าง) ไม่ต้องเว้นที่ด้านบน — ลดช่องว่างระหว่างปุ่มฝาก/ถอนกับแบนเนอร์ */
.n-drawer .ent-v, .n-drawer .ent-v.entA[data-v-94b5a0c8] { margin-top: 0; } /* theme1.css ตั้ง margin-top 24px ด้วย specificity สูงกว่า */
.n-drawer .group-button { margin-bottom: 4px !important; }
.n-drawer hr { margin: 6px 0; }
.n-drawer .ent-v .badge { top: -11px; right: 10px; }
/* HOT badge: the reference card clips its children (overflow:hidden); place the badge inside the card instead */
.n-drawer .ent-v.entA[data-v-94b5a0c8] .badge { position: absolute; top: 6px; right: 8px; }
/* provider strip: bigger logos on PC, full-bleed when sticky (matches reference) */
@media (min-width: 768px) {
  .brand-row .box-item-brand { width: 100px; }
  .brand-row .box-item-brand .inner-item-brand { height: 52px; }
  .wrap-show-brand-game .box-active-brand .b-active .inner-b-active { height: 52px; }
}
@media (min-width: 1121px) {
  #fixed-brandgame.fixed-brand-game { padding: 6px 10px 8px; background: #000; }
  #fixed-brandgame.fixed-brand-game .brand-row .box-item-brand { width: 116px; }
  #fixed-brandgame.fixed-brand-game .brand-row .box-item-brand .inner-item-brand { height: 54px; }
  #fixed-brandgame.fixed-brand-game .box-active-brand { width: 170px; padding: 0 1.5rem 0 .5rem; height: 100%; }
  #fixed-brandgame.fixed-brand-game .box-active-brand .b-active .inner-b-active { height: 54px; }
  #fixed-brandgame.fixed-brand-game .b-show-brand { margin-left: 175px; }
  #fixed-brandgame.fixed-brand-game .wrap-show-brand-game { border-bottom: 0; }
}
/* provider strip arrows (PC) */
.b-show-brand { position: relative; }
.brand-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.75); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; padding: 0 0 4px; }
.brand-arrow:hover { background: var(--accent-1, #e9b033); color: #000; border-color: #ffe08a; }
.brand-arrow.prev { left: -6px; }
.brand-arrow.next { right: 0; }
@media (min-width: 768px) { .brand-arrow { display: flex; } .b-show-brand .brand-row { padding-left: 34px; padding-right: 34px; } }
/* provider strip: no vertical scrolling inside the bar, uniform item size, drag-friendly */
.brand-row { overflow-y: hidden; align-items: center; touch-action: pan-x; }
.brand-row .box-item-brand, .brand-row .box-item-brand .inner-item-brand, .brand-row img, .brand-row a { -webkit-user-drag: none; user-select: none; }
.brand-row .box-item-brand .inner-item-brand a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.brand-row.is-dragging a, .brand-row.is-dragging img { pointer-events: none; }
.brand-row.is-dragging { cursor: grabbing; }
#fixed-brandgame .wrap-show-brand-game { overflow: hidden; }
/* image skeleton: shimmer behind game/provider images until loaded; stays if the image is broken */
img.skeleton-img { background: linear-gradient(90deg, #1c1c1c 25%, #2e2e2e 37%, #1c1c1c 63%); background-size: 400% 100%; animation: theme1-shimmer 1.4s ease infinite; border-radius: 10px; }
img.skeleton-img.img-broken { animation: none; background: #1c1c1c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23444' d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/></svg>") no-repeat center / 36%; }
/* no banner configured → keep content below the fixed header */
.home-no-banner { height: 100px; }
@media (max-width: 640px) { .home-no-banner { height: 96px; } }
/* banner dots: equal-size round dots, gold = active, white = others */
#banner-main-page .swiper-pagination { bottom: 8px; display: flex; justify-content: center; align-items: center; gap: 6px; }
#banner-main-page .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 1; margin: 0 !important; transition: background .2s; }
#banner-main-page .swiper-pagination .swiper-pagination-bullet-active { background: var(--accent-1, #e9b033); }
/* modals never scroll sideways */
.n-modal-container .n-modal-body-wrapper { overflow-x: hidden; }
.n-modal.modal .inner-theme-box { overflow-x: clip; }
/* browser autofill (จำยูส/รหัส): keep the dark input look instead of the white/blue autofill fill */
.n-input .n-input__input-el:-webkit-autofill,
.n-input .n-input__input-el:-webkit-autofill:hover,
.n-input .n-input__input-el:-webkit-autofill:focus,
.n-input .n-input__input-el:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #1c1c1c inset !important;
  box-shadow: 0 0 0 1000px #1c1c1c inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  border-radius: 12px;
  transition: background-color 999999s ease-in-out 0s;
}
.n-input.n-input--focus .n-input__input-el:-webkit-autofill, .n-input:focus-within .n-input__input-el:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #0b0b0b inset !important; box-shadow: 0 0 0 1000px #0b0b0b inset !important; }
.n-input .n-input__input-el:autofill { background: #1c1c1c; color: #fff; }
/* autofill: flat fill clipped by the rounded wrapper (no arc at the input edge) */
.n-input { overflow: hidden; }
.n-input .n-input__input-el:-webkit-autofill, .n-input .n-input__input-el:-webkit-autofill:hover, .n-input .n-input__input-el:-webkit-autofill:focus { border-radius: 0; }
.n-input .n-input-wrapper { background: transparent; }
/* login/register buttons spacing (naive .n-button{margin:0} was cancelling the theme margin) */
.box-button-login .register-button { margin-top: 14px !important; }
.box-button-login .primary-button { margin-top: 4px; }
/* === hover animation: game / provider cards scale up with a glow (PC / mouse only) === */
@media (hover: hover) and (pointer: fine) {
  .wrap-show-list-game .item-show-list-game .box-img-game, .wrap-show-list-game .item-show-list-game .brand-icon, .wrap-show-list-game .item-show-list-game .group-game-list, .box-img-game-jackpot, .theme1-row > a.box-img-game, .brand-row .box-item-brand { transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; will-change: transform; }
  .wrap-show-list-game .item-show-list-game a:hover .group-game-list, .wrap-show-list-game .item-show-list-game a:hover .brand-icon, .wrap-show-list-game .item-show-list-game .box-img-game:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 14px rgba(233,176,51,.35); border-radius: 10px; }
  .box-img-game-jackpot:hover, .theme1-row > a.box-img-game:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 14px rgba(233,176,51,.35); z-index: 2; }
  .brand-row .box-item-brand:hover { transform: scale(1.08); }
  .wrap-show-list-game .item-show-list-game { overflow: visible; }
  .wrap-show-list-game .item-show-list-game .box-img-game { overflow: hidden; }
  .theme1-row { padding-top: 8px; padding-bottom: 12px; }
  .box-img-game-jackpot:hover .framed-game, .theme1-row > a.box-img-game:hover .framed-game { filter: brightness(1.08); }
  .wrap-show-list-game .item-show-list-game a:hover .game-name { color: var(--accent-1, #e9b033); }
}
/* footer bank logos: rounded corners */
#footer-main .wrap-logo-bank .item-logo-bank img { border-radius: 14px; overflow: hidden; }
#footer-main .wrap-logo-bank .item-logo-bank { border-radius: 14px; overflow: hidden; }
/* footer ค่ายเกม: ใช้ product.logoImage (โลโก้แนวนอน) — จัดกลาง ไม่บิดสัดส่วน */
#footer-main .wrap-logo-brand-game .item-logo-brand-game { display: flex; align-items: center; justify-content: center; }
#footer-main .wrap-logo-brand-game .inner-item-logo-brand-game { width: 100%; display: flex; align-items: center; justify-content: center; }
#footer-main .wrap-logo-brand-game .inner-item-logo-brand-game img { width: 100%; height: auto; max-height: 60px; object-fit: contain; }
@media (max-width: 640px) { #footer-main .wrap-logo-bank .item-logo-bank img, #footer-main .wrap-logo-bank .item-logo-bank { border-radius: 10px; } }
/* bank tiles: rounded square (~18%), not circle — override theme1's border-radius:50% on the tile */
#footer-main .wrap-footer .inner-wrap-footer .box-payment-method .wrap-logo-bank .item-logo-bank { border-radius: 12px !important; overflow: hidden; padding: 0; }
#footer-main .wrap-footer .inner-wrap-footer .box-payment-method .wrap-logo-bank .item-logo-bank img { border-radius: 12px; display: block; }
@media (max-width: 640px) { #footer-main .wrap-footer .inner-wrap-footer .box-payment-method .wrap-logo-bank .item-logo-bank, #footer-main .wrap-footer .inner-wrap-footer .box-payment-method .wrap-logo-bank .item-logo-bank img { border-radius: 9px !important; } }