/* ============================================================ * template2.css — "แบบ 2" customer template (UFA21K-style) * ------------------------------------------------------------ * Activated only when has class .tpl2-active. * Colors are driven by runtime CSS variables set in data.js: * --t2-from / --t2-from-rgb (primary gradient start) * --t2-to / --t2-to-rgb (primary gradient end) * --t2-bg / --t2-bg-rgb (page background) * Falls back to the UFA21K gold palette when unset. * ========================================================== */ :root { --t2-from: rgb(255, 207, 54); --t2-from-rgb: 255, 207, 54; --t2-to: rgb(109, 81, 21); --t2-to-rgb: 109, 81, 21; --t2-bg: #0a0a0a; --t2-bg-rgb: 10, 10, 10; --t2-nav-from: rgb(79, 79, 79); --t2-nav-to: rgb(31, 31, 31); } /* Hide the default (template 1) chrome while template 2 is active. We deliberately keep `.app` in the DOM so the wallet/deposit/withdraw overlays (position:fixed, z-index:1000) still render above template 2. */ body.tpl2-active { overflow: hidden; } body.tpl2-active .topbar, body.tpl2-active .app-install, body.tpl2-active .cat-tabs, body.tpl2-active .bottom-nav, body.tpl2-active .cs-float, body.tpl2-active .pred-float, body.tpl2-active .footer { display: none !important; } /* ---------- Root scroll surface ---------- */ .t2-root { position: fixed; inset: 0; z-index: 150; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: 'Kanit', 'Noto Sans Thai', system-ui, sans-serif; color: #fff; background: radial-gradient(125% 90% at 50% 0%, rgba(var(--t2-from-rgb), .30), var(--t2-bg) 80%), var(--t2-bg); padding-bottom: 96px; } .t2-root * { box-sizing: border-box; } @media (min-width: 1024px) { .t2-root { padding-top: 78px; padding-bottom: 28px; } } .t2-gold-text { background: linear-gradient(180deg, #fff6cf, var(--t2-from) 45%, var(--t2-to)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ * Top navigation (desktop) * ========================================================== */ .t2-topnav { display: none; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 160; width: 520px; max-width: 96vw; gap: 12px; } @media (min-width: 1024px) { .t2-topnav { display: flex; } } .t2-topnav .t2-navbtn { width: calc(100% / 5); } .t2-navbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-top: 6px; background: none; border: 0; color: #fff; cursor: pointer; transition: transform .15s ease, filter .15s ease; } .t2-navbtn:hover { transform: translateY(-2px); filter: drop-shadow(0 4px 10px rgba(var(--t2-from-rgb), .5)); } .t2-navbtn img { width: 30px; height: 30px; object-fit: contain; aspect-ratio: 1; } .t2-navbtn span { font-size: 13px; white-space: nowrap; } /* ============================================================ * Bottom navigation (mobile) — notched center * ========================================================== */ .t2-bottomnav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 160; } @media (min-width: 1024px) { .t2-bottomnav { display: none; } } .t2-bottomnav-bar { display: flex; align-items: stretch; height: 64px; margin: 0 auto; max-width: 630px; background: linear-gradient(180deg, var(--t2-nav-from), var(--t2-nav-to)); border-top: 1px solid rgba(var(--t2-from-rgb), .35); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .5); } .t2-bottomnav .t2-navbtn { flex: 1; height: 100%; padding-top: 8px; position: relative; } .t2-bottomnav .t2-navbtn img { width: 26px; height: 26px; } .t2-bottomnav .t2-navbtn span { font-size: 11px; } /* Raised center coin */ .t2-navbtn.t2-nav-center { overflow: visible; } .t2-navbtn.t2-nav-center .t2-coin-wrap { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--t2-from), var(--t2-to)); box-shadow: 0 6px 18px rgba(var(--t2-from-rgb), .5), 0 0 0 6px var(--t2-bg); } .t2-navbtn.t2-nav-center .t2-coin-wrap img { width: 40px; height: 40px; } .t2-navbtn.t2-nav-center span { margin-top: 28px; } /* ============================================================ * Body layout: left category rail + main * ========================================================== */ .t2-shell { display: flex; gap: 8px; padding: 8px 8px 0; align-items: flex-start; } .t2-rail { flex: none; width: 64px; position: sticky; top: 8px; display: flex; /* visible on mobile too (matches reference) */ flex-direction: column; gap: 8px; max-height: calc(100vh - 16px); overflow-y: auto; scrollbar-width: none; } .t2-rail::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { .t2-rail { top: 86px; max-height: calc(100vh - 100px); } } .t2-cat { width: 64px; height: 64px; border-radius: 9px; border: 1px solid var(--t2-from); border-bottom: 6px solid var(--t2-from); background: linear-gradient(180deg, rgba(var(--t2-from-rgb), .10), rgba(0, 0, 0, .30)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 0; transition: transform .12s ease; } .t2-cat img { width: 32px; height: 32px; object-fit: contain; filter: grayscale(1); transition: filter .18s ease; } .t2-cat span { font-size: 9.5px; color: #cfd3dc; line-height: 1; } .t2-cat.active img { filter: none; animation: t2bounce 1s infinite; } .t2-cat.active span { color: var(--t2-from); } .t2-cat:hover img { filter: none; } @keyframes t2bounce { 0%, 100% { transform: translateY(-12%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, .2, 1); } } .t2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; } /* ---------- Header bar (logo + account) ---------- */ .t2-headbar { border-radius: 12px; padding: 8px 12px; background: linear-gradient(90deg, rgba(var(--t2-from-rgb), .14), rgba(0, 0, 0, .55)); border: 1px solid rgba(var(--t2-from-rgb), .35); display: flex; align-items: center; gap: 10px; } .t2-headbar .t2-logo { height: 40px; max-width: 190px; object-fit: contain; } .t2-headbar .t2-logo-text { font-weight: 900; font-size: 22px; background: linear-gradient(180deg, #fff6cf, var(--t2-from) 50%, var(--t2-to)); -webkit-background-clip: text; background-clip: text; color: transparent; } .t2-head-spacer { flex: 1; } .t2-head-actions { display: flex; gap: 8px; align-items: center; } .t2-btn { border: 1px solid var(--t2-from); border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; white-space: nowrap; background: rgba(0, 0, 0, .5); color: var(--t2-from); } .t2-btn-register { background: linear-gradient(180deg, var(--t2-from), var(--t2-to)); color: #1a1205; border-color: transparent; } .t2-btn-login { background: rgba(0, 0, 0, .5); color: var(--t2-from); } .t2-btn-deposit { background: linear-gradient(180deg, var(--t2-from), var(--t2-to)); color: #1a1205; border-color: transparent; } .t2-account { display: flex; align-items: center; gap: 10px; color: #fff; } .t2-account .t2-acc-bal { display: flex; flex-direction: column; line-height: 1.15; text-align: right; } .t2-account .t2-acc-bal small { font-size: 10px; opacity: .7; } .t2-account .t2-acc-bal b { font-size: 16px; color: var(--t2-from); } .t2-icon-btn { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; background: rgba(0, 0, 0, .5); color: var(--t2-from); font-size: 14px; border: 1px solid rgba(var(--t2-from-rgb), .4); } /* Mobile headbar adjustments */ @media (max-width: 639px) { .t2-headbar .t2-logo, .t2-headbar .t2-logo-text { display: none; } .t2-head-actions { gap: 6px; } .t2-btn { padding: 6px 12px; font-size: 12px; } .t2-account { gap: 6px; } .t2-account .t2-acc-bal small { font-size: 9px; } .t2-account .t2-acc-bal b { font-size: 14px; } } /* ---------- "ดูทั้งหมด" dropdown ---------- */ .t2-catpill-wrap { position: relative; margin-left: auto; } .t2-catpill { border: 1px solid rgba(var(--t2-from-rgb), .5); background: linear-gradient(180deg, rgba(var(--t2-from-rgb), .18), rgba(0, 0, 0, .4)); color: var(--t2-from); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; } .t2-catmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: none; flex-direction: column; gap: 2px; background: #11110d; border: 1px solid rgba(var(--t2-from-rgb), .35); border-radius: 12px; padding: 6px; min-width: 170px; max-height: 320px; overflow-y: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); } .t2-catmenu.open { display: flex; } .t2-catmenu-item { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font-family: inherit; color: #e8e2cf; font-size: 13px; padding: 8px 10px; border-radius: 8px; text-align: left; } .t2-catmenu-item:hover { background: rgba(var(--t2-from-rgb), .15); color: var(--t2-from); } .t2-catmenu-item img { width: 24px; height: 24px; object-fit: contain; } /* ---------- Horizontal game rows ---------- */ .t2-hrow { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; } .t2-hrow::-webkit-scrollbar { height: 5px; } .t2-hrow::-webkit-scrollbar-thumb { background: rgba(var(--t2-from-rgb), .4); border-radius: 4px; } .t2-gcard { flex: none; width: 100px; scroll-snap-align: start; border: 0; background: none; cursor: pointer; padding: 0; display: flex; flex-direction: column; gap: 4px; } @media (min-width: 640px) { .t2-gcard { width: 110px; } } @media (min-width: 1024px) { .t2-gcard { width: 120px; } } .t2-gcard-thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .4); display: grid; place-items: center; border: 1px solid rgba(var(--t2-from-rgb), .25); transition: transform .15s ease, box-shadow .15s ease; } .t2-gcard:hover .t2-gcard-thumb { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(var(--t2-from-rgb), .3); } .t2-gcard-thumb img { width: 100%; height: 100%; object-fit: contain; } .t2-gcard-thumb i { font-size: 30px; color: rgba(var(--t2-from-rgb), .8); } .t2-gcard-name { font-size: 11px; color: #cfd3dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Provider logo strip ---------- */ .t2-prow { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; } .t2-prow::-webkit-scrollbar { height: 5px; } .t2-prow::-webkit-scrollbar-thumb { background: rgba(var(--t2-from-rgb), .4); border-radius: 4px; } /* ---------- Famous providers (tabs) ---------- */ .t2-ptabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .t2-ptabs::-webkit-scrollbar { display: none; } .t2-ptab { flex: none; border: 1px solid rgba(var(--t2-from-rgb), .35); background: rgba(0, 0, 0, .4); color: #cfd3dc; border-radius: 999px; padding: 7px 16px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; } .t2-ptab.active { background: #fff; color: #1a1205; border-color: #fff; } .t2-prov-head { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(var(--t2-from-rgb), .2); border-radius: 12px; padding: 8px 12px; } .t2-prov-head > img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; } .t2-prov-meta { display: flex; flex-direction: column; line-height: 1.2; } .t2-prov-meta b { font-size: 14px; } .t2-prov-meta small { font-size: 11px; color: #9aa3b2; } .t2-prov-go { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(180deg, var(--t2-from), var(--t2-to)); color: #1a1205; font-size: 14px; } /* ---------- "สินค้าของเรา" provider grid ---------- */ .t2-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @media (min-width: 640px) { .t2-pgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); } } @media (min-width: 1024px) { .t2-pgrid { grid-template-columns: repeat(10, minmax(0, 1fr)); } } .t2-plogo { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; cursor: pointer; padding: 5px; border: 1px solid rgba(var(--t2-from-rgb), .20); background: linear-gradient(180deg, rgba(var(--t2-from-rgb), .08), rgba(0, 0, 0, .4)); display: grid; place-items: center; transition: transform .12s ease; } .t2-plogo:hover { transform: translateY(-2px); } .t2-plogo img { width: 100%; height: 100%; object-fit: contain; } .t2-plogo i { font-size: 26px; color: rgba(var(--t2-from-rgb), .8); } /* ---------- Banner carousel ---------- */ .t2-banner { position: relative; width: 100%; overflow: hidden; border-radius: 10px; background: rgba(0, 0, 0, .25); margin: 0 auto; } .t2-banner-overflow { overflow: hidden; width: 100%; } .t2-banner-track { display: flex; width: 100%; transition: transform .5s ease; will-change: transform; } .t2-banner-slide { min-width: 100%; flex: 0 0 100%; padding: 0; } .t2-banner-img-wrap { position: relative; width: 100%; overflow: hidden; border-radius: 10px; aspect-ratio: 3 / 1; } .t2-banner-img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; display: block; } .t2-banner-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 6px; justify-content: center; z-index: 10; } .t2-banner-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .40); cursor: pointer; transition: all .3s ease; } .t2-banner-dots i.active { background: var(--t2-from); width: 16px; border-radius: 3px; } /* ---------- Notice marquee ---------- */ .t2-notice { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 12px; background: rgba(var(--t2-from-rgb), .12); border: 1px solid rgba(var(--t2-from-rgb), .3); color: #ffe9a8; font-size: 13px; overflow: hidden; } .t2-notice i { color: var(--t2-from); } /* ---------- Provider marquee ---------- */ .t2-marquee { overflow: hidden; padding: 4px 0; --t2-dur: 40s; } .t2-marquee-track { display: flex; gap: 14px; width: max-content; animation: t2marquee var(--t2-dur) linear infinite; } .t2-marquee:hover .t2-marquee-track { animation-play-state: paused; } @keyframes t2marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .t2-logo-chip { flex: none; width: 78px; height: 78px; border-radius: 16px; padding: 0; cursor: pointer; border: 1px solid rgba(var(--t2-from-rgb), .35); background: linear-gradient(180deg, rgba(var(--t2-from-rgb), .1), rgba(0, 0, 0, .4)); display: grid; place-items: center; overflow: hidden; } .t2-logo-chip img { width: 100%; height: 100%; object-fit: contain; } /* ---------- Section + game/provider cards ---------- */ .t2-section { display: flex; flex-direction: column; gap: 10px; } .t2-section-head { display: flex; align-items: center; gap: 8px; } .t2-section-head h2 { margin: 0; font-size: 19px; font-weight: 800; } @media (min-width: 1024px) { .t2-section-head h2 { font-size: 22px; } } .t2-section-head .t2-more { margin-left: auto; font-size: 12px; color: var(--t2-from); background: none; border: 0; cursor: pointer; font-family: inherit; } .t2-product-title { text-align: center; font-size: 24px; font-weight: 800; margin: 6px 0; } .t2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @media (min-width: 640px) { .t2-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } } @media (min-width: 1024px) { .t2-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; } } .t2-card { border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px solid rgba(var(--t2-from-rgb), .20); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .30)); padding: 0; display: flex; flex-direction: column; transition: transform .12s ease, box-shadow .12s ease; } .t2-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--t2-from-rgb), .20); } .t2-card-thumb { width: 100%; aspect-ratio: 3 / 4; background: rgba(0, 0, 0, .4); display: grid; place-items: center; overflow: hidden; } .t2-card-thumb img { width: 100%; height: 100%; object-fit: contain; } .t2-card-thumb i { font-size: 32px; color: rgba(var(--t2-from-rgb), .8); } .t2-card-info { padding: 5px 6px; display: flex; flex-direction: column; gap: 1px; } .t2-card-info b { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t2-card-info span { font-size: 9px; color: #9aa3b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t2-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; } .t2-breadcrumb img { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; } .t2-back { border: 0; cursor: pointer; font-family: inherit; background: rgba(var(--t2-from-rgb), .15); color: var(--t2-from); border-radius: 8px; padding: 6px 10px; } .t2-empty { text-align: center; padding: 40px 0; color: #8a93a3; } .t2-footer { margin-top: 20px; padding: 18px 12px; text-align: center; color: #7e8696; font-size: 12px; border-top: 1px solid rgba(var(--t2-from-rgb), .15); } /* ============================================================ * Side drawer menu (hamburger) * ========================================================== */ .t2-burger { background: none; border: 0; color: var(--t2-from); font-size: 20px; cursor: pointer; padding: 2px 8px 2px 2px; line-height: 1; } .t2-drawer-mask { position: fixed; inset: 0; z-index: 170; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .t2-drawer-mask.open { opacity: 1; visibility: visible; } .t2-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 171; width: 286px; max-width: 84vw; background: linear-gradient(180deg, rgba(var(--t2-from-rgb), .1), var(--t2-bg) 30%, var(--t2-bg)); border-right: 1px solid rgba(var(--t2-from-rgb), .35); transform: translateX(-100%); transition: transform .28s ease; overflow-y: auto; padding: 14px; color: #fff; font-family: 'Kanit', 'Noto Sans Thai', sans-serif; } .t2-drawer.open { transform: none; } .t2-dr-head { display: flex; align-items: center; margin-bottom: 12px; } .t2-dr-brand { font-weight: 900; font-size: 20px; background: linear-gradient(180deg, #fff6cf, var(--t2-from) 50%, var(--t2-to)); -webkit-background-clip: text; background-clip: text; color: transparent; } .t2-dr-close { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .08); border: 1px solid rgba(var(--t2-from-rgb), .3); color: #fff; } .t2-dr-acc { border: 1px solid rgba(var(--t2-from-rgb), .25); border-radius: 14px; padding: 12px; background: rgba(255, 255, 255, .04); margin-bottom: 14px; } .t2-dr-acc.guest { text-align: center; display: flex; flex-direction: column; gap: 2px; } .t2-dr-acc.guest b { font-size: 15px; } .t2-dr-acc.guest small { color: #9aa3b2; font-size: 12px; margin-bottom: 8px; } .t2-dr-acc-top { display: flex; align-items: center; gap: 10px; } .t2-dr-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--t2-from), var(--t2-to)); color: #1a1205; } .t2-dr-acc-top b { font-size: 14px; display: block; } .t2-dr-acc-top small { font-size: 11px; color: #9aa3b2; } .t2-dr-bal { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; font-size: 13px; } .t2-dr-bal b { color: var(--t2-from); font-size: 15px; } .t2-dr-quick { display: flex; gap: 8px; } .t2-dr-quick button { flex: 1; border: 0; border-radius: 9px; padding: 9px 0; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; background: linear-gradient(180deg, var(--t2-from), var(--t2-to)); color: #1a1205; } .t2-dr-section { font-size: 12px; color: #8a93a3; margin: 12px 4px 8px; font-weight: 700; } .t2-dr-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .t2-dr-cat { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; background: rgba(255, 255, 255, .04); border: 1px solid rgba(var(--t2-from-rgb), .2); border-radius: 10px; padding: 8px 2px; color: #cfd3dc; font-family: inherit; } .t2-dr-cat img { width: 26px; height: 26px; object-fit: contain; } .t2-dr-cat span { font-size: 10px; } .t2-dr-nav { display: flex; flex-direction: column; gap: 2px; } .t2-dr-item { display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit; color: #e8e2cf; font-size: 14px; padding: 11px 10px; border-radius: 9px; } .t2-dr-item i { width: 20px; text-align: center; color: var(--t2-from); } .t2-dr-item:hover { background: rgba(var(--t2-from-rgb), .12); } .t2-dr-logout { color: #ff6b81; margin-top: 6px; } .t2-dr-logout i { color: #ff6b81; } /* ============================================================ * UFA21K-style refinements (navbar / drawer / login modal) * ========================================================== */ /* ---- Auth buttons: register = gold outline, login = gold fill ---- */ .t2-btn-register { background: transparent; color: var(--t2-from); border: 1px solid var(--t2-from); } .t2-btn-login { background: var(--t2-from); color: #1a1205; border-color: transparent; } /* ---- Mobile head bar = flat grey gradient (like reference) ---- */ .t2-headbar { background: linear-gradient(180deg, var(--t2-nav-from), var(--t2-nav-to)); border-color: rgba(0, 0, 0, .4); } .t2-headbar .t2-burger { color: #fff; } /* ============================================================ * Unified desktop top bar (full width, one row) * burger + logo | centered nav | auth buttons * ========================================================== */ .t2-desktop-topbar { display: none; } @media (min-width: 1024px) { /* The old floating nav and the in-content head bar are replaced by the single full-width bar on desktop. */ .t2-topnav { display: none !important; } .t2-headbar { display: none !important; } .t2-desktop-topbar { display: flex; align-items: center; gap: 16px; position: fixed; top: 0; left: 0; right: 0; z-index: 160; height: 64px; padding: 0 22px; background: linear-gradient(180deg, var(--t2-nav-from), var(--t2-nav-to)); border-bottom: 1px solid rgba(0, 0, 0, .45); box-shadow: 0 4px 20px rgba(0, 0, 0, .45); } .t2-dt-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 0 auto; } .t2-dt-left .t2-burger { color: #fff; font-size: 22px; } .t2-dt-left .t2-logo { height: 40px; max-width: 170px; object-fit: contain; } .t2-dt-nav { display: flex; align-items: center; gap: 34px; margin: 0 auto; } .t2-dt-nav .t2-navbtn { width: auto; padding-top: 0; } .t2-dt-nav .t2-navbtn img { width: 30px; height: 30px; } .t2-dt-nav .t2-navbtn span { font-size: 13px; } .t2-desktop-topbar .t2-head-actions { margin-left: 0; flex: 0 0 auto; } } /* ============================================================ * Login / register modal — scoped to Template 2 only so * Template 1 keeps its own look. * ========================================================== */ body.tpl2-active #authModal .modal-card { border-radius: 28px; border: 1px solid #646464; background: linear-gradient(180deg, #2a2a2a 0%, var(--t2-bg) 90%); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } body.tpl2-active #authModal .modal-card-inner { padding-top: 6px; } body.tpl2-active #authModal .auth-tabs { background: rgba(0, 0, 0, .35); border-radius: 12px; padding: 3px; gap: 0; } body.tpl2-active #authModal .auth-tab { border-radius: 9px; color: #cfcfcf; font-weight: 600; } body.tpl2-active #authModal .auth-tab.active { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } /* Inputs: pill-ish bordered rows with leading icon */ body.tpl2-active #authModal .auth-input-row { background: rgba(0, 0, 0, .3); border: 1px solid #565656; border-radius: 10px; } body.tpl2-active #authModal .auth-input-row:focus-within { border-color: var(--t2-from); box-shadow: 0 0 0 3px rgba(var(--t2-from-rgb), .25); } body.tpl2-active #authModal .auth-input-icon { color: #b9b9b9; } /* Primary submit = full-width gold pill, black text */ body.tpl2-active #authModal .btn-submit { background: var(--t2-from); color: #1a1205; border: 0; border-radius: 999px; font-weight: 700; box-shadow: 0 10px 26px rgba(var(--t2-from-rgb), .35); } body.tpl2-active #authModal .btn-submit:hover { filter: brightness(1.05); } body.tpl2-active #authModal .forgot-link, body.tpl2-active #authModal .auth-switch-note a { color: #b9b9b9; } body.tpl2-active #authModal .auth-switch-note a:hover { color: var(--t2-from); } /* ============================================================ * Game/provider card play overlay (full image + hover play) * ========================================================== */ .t2-card-thumb, .t2-gcard-thumb { position: relative; } .t2-play { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: transparent; transition: background .3s ease; pointer-events: none; } .t2-card:hover .t2-play, .t2-gcard:hover .t2-play { background: rgba(255, 255, 255, .2); } .t2-play-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .25); color: #fff; font-size: 16px; opacity: 0; transform: scale(.7); transition: opacity .5s ease, transform .5s ease; } .t2-card:hover .t2-play-btn, .t2-gcard:hover .t2-play-btn { opacity: 1; transform: scale(1); } @media (min-width: 1024px) { .t2-play-btn { width: 56px; height: 56px; font-size: 20px; } } /* ============================================================ * Desktop home-row cards: large landscape, full-bleed art, * game name overlaid on a bottom gradient (UFA21K style). * ========================================================== */ @media (min-width: 1024px) { .t2-hrow { gap: 16px; } .t2-gcard { position: relative; width: clamp(260px, 24vw, 340px); gap: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); } .t2-gcard-thumb { aspect-ratio: 16 / 10; border-radius: 16px; border: 0; } .t2-gcard:hover .t2-gcard-thumb { transform: none; } .t2-gcard-thumb img { object-fit: cover; transition: transform .5s ease; } .t2-gcard:hover .t2-gcard-thumb img { transform: scale(1.06); } .t2-gcard-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 30px 14px 12px; text-align: left; font-size: 15px; font-weight: 700; color: #fff; white-space: normal; line-height: 1.2; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .45) 55%, transparent 100%); } .t2-gcard .t2-play-btn { width: 64px; height: 64px; font-size: 22px; } } /* ───────── ฝาก-ถอน chooser sheet (กดปุ่ม navbar "ฝาก-ถอน") ───────── */ .t2-ch-mask { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .t2-ch-mask.open { opacity: 1; pointer-events: auto; } .t2-ch-sheet { width: 100%; max-width: 460px; background: linear-gradient(180deg, rgba(var(--t2-from-rgb), .12), var(--t2-bg) 36%, var(--t2-bg)); border: 1px solid rgba(var(--t2-from-rgb), .3); border-bottom: none; border-radius: 20px 20px 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(28px); transition: transform .22s ease; color: #fff; font-family: 'Kanit', 'Noto Sans Thai', sans-serif; } .t2-ch-mask.open .t2-ch-sheet { transform: translateY(0); } .t2-ch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .t2-ch-head b { font-size: 16px; } .t2-ch-head b i { color: var(--t2-from); margin-right: 6px; } .t2-ch-x { background: none; border: none; color: #9ebce5; font-size: 19px; cursor: pointer; line-height: 1; } .t2-ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .t2-ch-btn { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 22px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; transition: transform .12s ease, filter .12s ease; } .t2-ch-btn i { font-size: 27px; } .t2-ch-btn span { font-size: 14px; font-weight: 700; } .t2-ch-btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .t2-ch-deposit { background: linear-gradient(135deg, rgba(var(--t2-from-rgb), .26), rgba(var(--t2-to-rgb), .18)); border-color: rgba(var(--t2-from-rgb), .42); } .t2-ch-deposit i { color: var(--t2-from); } .t2-ch-withdraw { background: rgba(255, 155, 170, .12); border-color: rgba(255, 155, 170, .36); } .t2-ch-withdraw i { color: #ff9baa; } @media (min-width: 768px) { .t2-ch-mask { align-items: center; } .t2-ch-sheet { border-radius: 18px; border-bottom: 1px solid rgba(var(--t2-from-rgb), .3); } }