/* member.ufamv.app ธีมใหม่ ui=2 — mobile first 440px ; โครง UX แบบ member.superlsm99.link (css2/app.css) สี/ปุ่ม/ช่องกรอกตาม ufamv.app ?ui=2 (css2/home.css) prefix u2- */ :root { --u2-card: #F7F4EF; --u2-ink: #3B2A1E; --u2-ink2: #7A6656; --u2-head: rgb(115 97 83); --u2-gold: #D9A93F; --u2-line: rgba(217, 169, 63, .75); --u2-app-w: 440px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: #CFC7BC; } body.u2 { margin: 0; font-family: 'Kanit', sans-serif; font-size: 15px; line-height: 1.5; color: var(--u2-ink); background: #CFC7BC; } :where(.u2-app) img { display: block; max-width: 100%; height: auto; } :where(.u2-app) a { color: inherit; text-decoration: none; } :where(.u2-app) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :where(.u2-app) :is(h1, h2, h3, p, ol, ul) { margin: 0; } .ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* โครงหลัก: คอลัมน์ 440 กลางจอ */ .u2-app { position: relative; display: flex; flex-direction: column; max-width: var(--u2-app-w); min-height: 100vh; margin: 0 auto; background: linear-gradient(180deg, #f5f1e8 0%, #fdfcf9 100%); box-shadow: 0 0 60px rgba(59, 42, 30, .25); } .u2-app > main { flex: 1 0 auto; display: flex; flex-direction: column; } /* header (แบบ .u2-top ของ www) */ .u2-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 60px; padding: 0 12px; background: var(--u2-head); border-bottom: 1px solid rgba(232, 211, 160, .35); } .u2-top-logo img { height: auto; max-height: 40px; width: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); } .u2-top-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(217, 169, 63, .7); color: #F7DE8E; background: linear-gradient(180deg, #7A6555 0%, #5C4D42 50%, #46392F 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(30, 20, 12, .3); } .u2-top-btn .ic { width: 20px; height: 20px; } /* หน้าเข้าสู่ระบบ / สมัคร */ .u2-au-banner img { width: 100%; aspect-ratio: 960 / 500; object-fit: cover; } .u2-au-card { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; margin-top: -18px; } /* พื้นครีมของฟอร์มยาวถึง footer */ .u2-au-card.is-top { margin-top: 0; } .u2-lg-hd { position: relative; overflow: hidden; padding: 18px 20px 34px; text-align: center; color: #fff; background: radial-gradient(90% 120% at 50% -30%, rgba(245, 197, 66, .28), rgba(245, 197, 66, 0) 60%), linear-gradient(180deg, #84705F 0%, #5C4D42 100%); border-radius: 20px 20px 0 0; } .u2-au-card.is-top .u2-lg-hd { border-radius: 0; } .u2-lg-hd::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(245,197,66,0), rgba(255,226,138,.9) 50%, rgba(245,197,66,0)); } .u2-lg-hd > * { position: relative; z-index: 1; } .u2-lg-ttl { font-size: 30px; font-weight: 500; line-height: 1.2; background: linear-gradient(180deg, #FFF4CC 0%, #F5C542 55%, #D99A1E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .u2-lg-sub { margin-top: 4px; font-size: 14px; color: #EADBC4; } .u2-lg-form { position: relative; z-index: 1; flex: 1 0 auto; display: grid; align-content: start; gap: 12px; margin-top: -16px; padding: 22px 16px 20px; background: linear-gradient(180deg, #F7F4EF 0%, #ECE6DD 100%); border-radius: 18px 18px 0 0; } /* ช่องกรอก label ลอย */ .u2-fl { position: relative; display: flex; align-items: center; height: 58px; background: #fff; border: 1.5px solid #DDD2C4; border-radius: 14px; transition: border-color .15s, box-shadow .15s; } .u2-fl > .ic { position: absolute; left: 14px; color: #9C8B7B; transition: color .15s; } .u2-fl input { width: 100%; height: 100%; margin: 0; padding: 20px 14px 4px 46px; border: 0; outline: 0; border-radius: 14px; background: none; box-shadow: none; font: inherit; font-size: 16px; color: var(--u2-ink); caret-color: var(--u2-ink); } .u2-fl.has-eye input { padding-right: 52px; } .u2-fl input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--u2-ink); } .u2-fl label { position: absolute; left: 46px; top: 50%; margin: 0; transform: translateY(-50%); pointer-events: none; font-size: 16px; font-weight: 400; color: #8A7868; transition: top .15s, font-size .15s, color .15s; } .u2-fl input:focus + label, .u2-fl input:not(:placeholder-shown) + label, .u2-fl input:-webkit-autofill + label { top: 15px; font-size: 12px; font-weight: 600; color: #9A6E22; } .u2-fl:focus-within { border-color: var(--u2-gold); box-shadow: 0 0 0 4px rgba(217, 169, 63, .28); } .u2-fl:focus-within > .ic { color: #9A6E22; } .u2-fl.is-invalid { border-color: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, .14); } .u2-fl-eye { position: absolute; right: 6px; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #9C8B7B; } .u2-fl-eye .ic-hide, .u2-fl-eye[aria-pressed="true"] .ic-show { display: none; } .u2-fl-eye[aria-pressed="true"] .ic-hide { display: block; } .u2-fl-ok { position: absolute; right: 16px; color: #16A34A; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; } .u2-fl.is-match .u2-fl-ok { opacity: 1; transform: none; } .u2-lg-err { display: none; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #FDECEA; border: 1px solid #F3B9B2; color: #A1271B; font-size: 14px; line-height: 1.45; } .u2-lg-err.is-show { display: flex; } .u2-lg-err .ic { width: 20px; height: 20px; } /* ปุ่ม (ทอง / น้ำตาลขอบทอง แบบ www) */ .u2-sbtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; cursor: pointer; font-weight: 600; text-decoration: none; transition: transform .15s, filter .15s; } .u2-sbtn:active { transform: scale(.97); } .u2-sbtn:hover { filter: brightness(1.05); } .u2-sbtn-gold, button.u2-sbtn-gold { border: 1px solid #F2D58A; color: #2B1F17; background: radial-gradient(ellipse 55% 90% at 50% 0%, rgba(255,251,225,.95) 0%, rgba(255,241,185,.55) 45%, rgba(255,230,150,0) 100%), linear-gradient(180deg, #F4CF6C 0%, #ECBE5A 45%, #D59B33 100%); box-shadow: 0 4px 12px rgba(90, 60, 20, .3), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 4px rgba(140,90,10,.35); } .u2-sbtn-ghost, button.u2-sbtn-ghost { border: 1px solid rgba(217, 169, 63, .7); color: #F7DE8E; text-shadow: 0 1px 2px rgba(0,0,0,.4); background: radial-gradient(ellipse 55% 90% at 50% 0%, rgba(255,230,180,.22) 0%, rgba(255,230,180,0) 100%), linear-gradient(180deg, #7A6555 0%, #5C4D42 50%, #46392F 100%); box-shadow: 0 4px 12px rgba(59, 42, 30, .3), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.3); } .u2-sbtn-ghost:hover { color: #F7DE8E; } .u2-lg-submit { height: 54px; margin-top: 2px; font-size: 18px; } .u2-lg-alt { height: 50px; font-size: 17px; font-weight: 500; } .u2-lg-alt .ic { width: 20px; height: 20px; } .u2-lg-spin { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(43,31,23,.3); border-top-color: #2B1F17; border-radius: 50%; animation: u2-spin .7s linear infinite; } .u2-lg-form.is-loading .u2-lg-spin { display: inline-block; } .u2-lg-form.is-loading .u2-lg-submit { pointer-events: none; filter: saturate(.8); } .u2-lg-form.is-shake { animation: u2-shake .4s; } .u2-lg-link { justify-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 14px; color: var(--u2-ink2); } .u2-lg-link b { font-weight: 600; color: #9A6E22; } .u2-lg-link .ic { width: 18px; height: 18px; } .u2-lg-or { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--u2-ink2); } .u2-lg-or::before, .u2-lg-or::after { content: ''; flex: 1; height: 1px; background: rgba(154, 110, 34, .3); } /* สมัคร: ขั้นตอน + ยืนยันอายุ + ธนาคาร */ .u2-rg-steps { display: flex; gap: 10px; margin-top: 14px; padding: 0; list-style: none; text-align: left; } .u2-rg-steps li { position: relative; flex: 1; padding-top: 8px; font-size: 12.5px; color: rgba(255,255,255,.6); } .u2-rg-steps li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,.2); transition: background .2s; } .u2-rg-steps li.is-on { color: #F5D68C; font-weight: 600; } .u2-rg-steps li.is-on::before { background: linear-gradient(90deg, #D99A1E, #FFE28A 50%, #D99A1E); box-shadow: 0 0 6px rgba(245,197,66,.45); } #register .u2-rg-panel { display: none; gap: 12px; } #register[data-step="1"] [data-panel="1"], #register[data-step="age"] [data-panel="age"], #register[data-step="2"] [data-panel="2"] { display: grid; } #register [data-show] { display: none; } #register[data-step="1"] [data-show~="1"], #register[data-step="2"] [data-show~="2"] { display: flex; } .u2-rg-age { justify-items: center; text-align: center; padding: 4px 0; } .u2-rg-age-badge { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #2B1F17; border: 3px solid var(--u2-gold); box-shadow: 0 0 14px rgba(217,169,63,.35); font-size: 20px; font-weight: 700; font-style: italic; color: #F5C542; } .u2-rg-age-ttl { font-size: 18px; font-weight: 600; color: var(--u2-ink); } .u2-rg-age-txt { margin-top: -6px; font-size: 14px; color: var(--u2-ink2); } .u2-rg-label { font-size: 14px; font-weight: 600; color: var(--u2-ink); } .u2-rg-note { margin-top: -4px; font-size: 12.5px; color: var(--u2-ink2); } .u2-rg-banks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 200px; overflow-y: auto; padding: 2px; } .u2-rg-bank { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; background: #fff; border: 1.5px solid #E3DACE; border-radius: 12px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; } .u2-rg-bank input { position: absolute; opacity: 0; pointer-events: none; } .u2-rg-bank-logo { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; } .u2-rg-bank-logo img { width: 24px; height: 24px; object-fit: contain; } .u2-rg-bank-name { font-size: 11px; line-height: 1.25; color: var(--u2-ink); overflow-wrap: anywhere; } .u2-rg-bank:focus-within { border-color: rgba(217,169,63,.7); } .u2-rg-bank.is-on { border-color: var(--u2-gold); background: rgba(217,169,63,.12); box-shadow: 0 0 0 3px rgba(217,169,63,.2); } .u2-rg-banks.is-invalid { border-radius: 12px; box-shadow: 0 0 0 2px rgba(229,72,77,.6); } /* footer */ .u2-foot { padding: 14px 12px calc(16px + env(safe-area-inset-bottom)); text-align: center; font-size: 12.5px; color: var(--u2-ink2); border-top: 1px solid rgba(217, 169, 63, .35); } .u2-foot-age { display: flex; align-items: center; justify-content: center; gap: 8px; } .u2-foot-18 { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border: 2px solid #9A6E22; border-radius: 50%; font-size: 11px; font-weight: 600; color: #9A6E22; } .u2-foot-copy { margin-top: 6px; font-size: 12px; } /* bottom sheet (ติดต่อเรา) — z-index เหนือ LIVECHAT (9999) */ .u2-sh { position: fixed; inset: 0; z-index: 10000; visibility: hidden; } .u2-sh.is-open { visibility: visible; } .u2-sh-bg { position: absolute; inset: 0; background: rgba(30, 20, 12, .55); opacity: 0; transition: opacity .2s; } .u2-sh.is-open .u2-sh-bg { opacity: 1; } .u2-sh-box { position: absolute; bottom: 0; left: 50%; width: 100%; max-width: var(--u2-app-w); max-height: 90vh; overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #F7F4EF 0%, #ECE6DD 100%); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .45); transform: translate(-50%, 100%); transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .u2-sh.is-open .u2-sh-box { transform: translate(-50%, 0); } .u2-sh .u2-lg-hd { padding-top: 10px; } .u2-sh-grip { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: rgba(245, 214, 140, .5); } .u2-sh-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(245, 197, 66, .5); color: #F5D68C; } .u2-sh-x .ic { width: 16px; height: 16px; } .u2-sh .u2-lg-ttl { font-size: 26px; } .u2-ct { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: -16px; padding: 22px 16px 4px; background: linear-gradient(180deg, #F7F4EF 0%, #ECE6DD 100%); border-radius: 18px 18px 0 0; } .u2-ct-item { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 10px 16px; border-radius: 14px; font-size: 17px; font-weight: 600; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(60,40,20,.18); } .u2-ct-item img { width: 28px; height: 28px; flex: none; } .u2-ct-item.is-line { background: #06C755; } .u2-ct-item.is-tg { background: #2AABEE; } body.is-locked { overflow: hidden; } @keyframes u2-spin { to { transform: rotate(360deg); } } @keyframes u2-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } @media (prefers-reduced-motion: reduce) { .u2-sh-box, .u2-sh-bg { transition: none; } .u2-lg-form.is-shake { animation: none; } } /* ===================== หน้าหลังล็อกอิน (_u2shell.php + home.php) — โครง UX แบบ member.superlsm99.link สี/การ์ดตาม ufamv.app ?ui=2 ===================== */ .u2-in .u2-app { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } .u2-in .u2-foot { border-top: 0; } /* header: ยอดเงิน + ปุ่มฝาก · เมนูผู้ใช้ (dropdown ยึดขอบขวาของ header) */ .u2-top-logo { flex: 0 1 auto; min-width: 0; } .u2-hd-r { margin-left: auto; flex: none; display: flex; align-items: center; gap: 6px; } .u2-hd-wl { display: flex; align-items: center; gap: 5px; height: 38px; padding: 3px 3px 3px 6px; border-radius: 999px; background: rgba(43, 31, 23, .38); border: 1px solid rgba(217, 169, 63, .55); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); } .u2-hd-wl > img { width: 22px; height: 22px; flex: none; } .u2-hd-wl-v { font-size: 14px; font-weight: 600; color: #FFF3DC; white-space: nowrap; font-variant-numeric: tabular-nums; } .u2-hd-wl-dep { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: #2B1F17; background: linear-gradient(180deg, #F4CF6C 0%, #ECBE5A 45%, #D59B33 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(0, 0, 0, .3); } .u2-hd-wl-dep .ic { width: 18px; height: 18px; stroke-width: 2.6; } .u2-hd-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #F7DE8E; border: 1px solid rgba(217, 169, 63, .7); background: linear-gradient(180deg, #7A6555 0%, #5C4D42 50%, #46392F 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(30, 20, 12, .3); } .u2-hd-av .ic { width: 20px; height: 20px; } .u2-dd { position: absolute; top: calc(100% + 6px); right: 8px; z-index: 60; width: 300px; max-width: calc(100% - 16px); overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, #F7F4EF 0%, #ECE6DD 100%); border: 1px solid var(--u2-line); box-shadow: 0 14px 34px rgba(30, 20, 12, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; } .u2-dd.is-open { opacity: 1; visibility: visible; transform: none; } .u2-dd-top { display: flex; align-items: center; gap: 10px; padding: 14px; background: radial-gradient(90% 120% at 50% -30%, rgba(245, 197, 66, .28), rgba(245, 197, 66, 0) 60%), linear-gradient(180deg, #84705F 0%, #5C4D42 100%); } .u2-dd-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: #2B1F17; background: linear-gradient(180deg, #F4CF6C 0%, #D59B33 100%); } .u2-dd-top b { display: block; font-weight: 600; line-height: 1.3; color: #F5D68C; } .u2-dd-top small { font-size: 12px; color: #EADBC4; } .u2-dd-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px 14px; } .u2-dd-bal > div { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 8px; border-radius: 10px; background: #fff; border: 1px solid #E3DACE; } .u2-dd-bal img { width: 22px; height: 22px; flex: none; } .u2-dd-bal span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .u2-dd-bal small { font-size: 11px; color: var(--u2-ink2); } .u2-dd-bal b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .u2-dd-mn { padding: 6px 8px 8px; border-top: 1px solid rgba(217, 169, 63, .35); } .u2-dd-mn a { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; font-size: 15px; color: var(--u2-ink); } .u2-dd-mn a .ic { width: 20px; height: 20px; color: #9A6E22; } .u2-dd-mn a:hover { background: rgba(217, 169, 63, .12); } .u2-dd-mn a.is-out, .u2-dd-mn a.is-out .ic { color: #B42318; } .u2-alert { display: flex; align-items: flex-start; gap: 8px; margin: 10px 12px 0; padding: 10px 12px; border-radius: 12px; background: #FFF6E0; border: 1px solid #EBCB7E; color: #7A4E0E; font-size: 14px; } .u2-alert .ic { width: 20px; height: 20px; } /* section (หัวแบบ www .u2-sec-hd) */ .u2-sec { margin: 16px 12px 0; } .u2-sec-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .u2-sec-hd h2 { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--u2-ink); } .u2-sec-hd .u2-sec-ic { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 3px rgba(59, 42, 30, .3)); } .u2-sec-hd .u2-sec-svg { width: 24px; height: 24px; color: #C08A2A; stroke-width: 2.2; filter: drop-shadow(0 1px 0 #FFF0B8); } .u2-sec-hd a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--u2-ink2); } .u2-sec-hd a .ic { width: 14px; height: 14px; } /* hero slider (scroll-snap) + จุดแคปซูลน้ำตาลขอบทอง แบบ www */ .u2-hero { position: relative; margin: 10px 12px 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--u2-line); box-shadow: 0 4px 14px rgba(59, 42, 30, .10); } .u2-sl-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .u2-sl-track::-webkit-scrollbar { display: none; } .u2-sl-item { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 960 / 500; } .u2-sl-item img { width: 100%; height: 100%; object-fit: cover; } .u2-sl-dots { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; padding: 6px 22px; border-radius: 999px; background: linear-gradient(180deg, #6e5946d9 0%, #4a3828e0 55%, #3a2a1de0 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #C9A04E; box-shadow: inset 0 1px 0 rgba(255,236,190,.35), inset 0 -2px 4px rgba(0,0,0,.35), 0 2px 6px rgba(30,20,12,.45); } .u2-sl-dots i { width: 13px; height: 13px; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 40% 30%, #FFFFFF 0%, #ECE9E6 45%, #C9C4C0 100%); box-shadow: inset 0 -1px 1px rgba(0,0,0,.18), 0 1px 1.5px rgba(0,0,0,.55); transition: background .2s; } .u2-sl-dots i.is-on { background: radial-gradient(circle at 40% 30%, #FFF2B8 0%, #F7D36A 40%, #E0A92E 100%); box-shadow: inset 0 -1px 1px rgba(120,80,10,.35), 0 0 4px rgba(255,210,110,.6), 0 1px 1.5px rgba(0,0,0,.55); } /* กล่องยอดเงิน (แบบ superlsm99 .wl) — น้ำตาลไล่สี + ทอง */ .u2-wl { position: relative; overflow: hidden; padding: 14px; color: #FFF3DC; border-radius: 18px; background: radial-gradient(90% 120% at 100% -20%, rgba(245, 197, 66, .30), rgba(245, 197, 66, 0) 60%), linear-gradient(160deg, #8A735F 0%, #5C4D42 55%, #3B2A1E 100%); border: 1px solid var(--u2-line); box-shadow: 0 8px 22px rgba(59, 42, 30, .28); } .u2-wl::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(245,197,66,0), rgba(255,226,138,.9) 50%, rgba(245,197,66,0)); } .u2-wl-top { display: flex; align-items: center; gap: 12px; } .u2-wl-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; color: #2B1F17; background: linear-gradient(180deg, #F4CF6C 0%, #ECBE5A 45%, #D59B33 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px rgba(0, 0, 0, .3); } .u2-wl-ic .ic { width: 24px; height: 24px; } .u2-wl-t { flex: 1 1 auto; min-width: 0; } .u2-wl-t small { display: block; font-size: 12.5px; color: #EADBC4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u2-wl-t b { display: block; font-size: 28px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #FFF4CC 0%, #F5C542 55%, #D99A1E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .u2-wl-t b em { font-style: normal; font-size: 18px; margin-right: 3px; } .u2-wl-ref { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #F5D68C; background: rgba(255, 255, 255, .10); border: 1px solid rgba(245, 197, 66, .45); } .u2-wl-ref .ic { width: 18px; height: 18px; } .u2-wl-ref.is-spin .ic { animation: u2-spin .7s linear infinite; } .u2-wl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .u2-wl-chip { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 8px; border-radius: 10px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(245, 197, 66, .35); } .u2-wl-chip img { width: 24px; height: 24px; flex: none; } .u2-wl-chip div { min-width: 0; } .u2-wl-chip small { display: block; font-size: 11px; line-height: 1.1; color: #EADBC4; } .u2-wl-chip b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .u2-wl-btn { min-height: 44px; gap: 5px; border-radius: 10px; font-size: 15px; white-space: nowrap; } .u2-wl-btn .ic { width: 18px; height: 18px; } .u2-wl-wd { color: var(--u2-ink); border: 1px solid #F2D58A; background: linear-gradient(180deg, #FFFDF8 0%, #F1E8DA 100%); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(0, 0, 0, .2); } /* เมนูลัด เข้าเล่น / แทงหวย (การ์ดน้ำตาลขอบทอง แบบหมวดเกม www .u2-cat) */ .u2-qk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .u2-qk-item { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 8px; border-radius: 14px; font-size: 18px; font-weight: 600; color: #FFF3DC; background: linear-gradient(180deg, #7F6149 0%, #7F6149 55%, #5E4A3C 100%); border: 1.5px solid #C9A25A; box-shadow: inset 0 -22px 26px -6px rgba(22,13,6,.45), inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(59, 42, 30, .10); transition: transform .15s; } .u2-qk-item:active { transform: scale(.97); } .u2-qk-item img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255,206,120,.65)) drop-shadow(0 5px 4px rgba(20,12,6,.5)); } /* หวย 9 รายการ (แบบ superlsm99 .lb-card) การ์ดครีมแบบ www .u2-rs ; ใบแรก หวยรัฐบาลไทย 2x2 */ .u2-lb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .u2-lb [hidden] { display: none !important; } .u2-lb-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; aspect-ratio: 1; padding: 6px 3px; border-radius: 12px; text-align: center; color: var(--u2-ink); background: linear-gradient(170deg, #FFFCF6 0%, #FAF3E8 55%, #F3E8D7 100%); border: 1px solid #EAD9BF; box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(120, 84, 40, .12); transition: transform .1s; } .u2-lb-card:active { transform: scale(.97); } .u2-lb-hd { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; } .u2-lb-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(80, 50, 20, .3); } .u2-lb-name { max-width: 100%; font-size: 12px; font-weight: 600; line-height: 1.25; color: #36251D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u2-lb-date { font-size: 10px; line-height: 1.2; color: #6E5446; } .u2-lb-res { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 100%; padding: 0 2px; } .u2-lb-res > span { display: flex; flex-direction: column; padding: 2px 1px; border-radius: 7px; background: linear-gradient(180deg, #FFFDF8 0%, #F4EDE0 100%); border: 1px solid #EFE3D1; } .u2-lb-res small { font-size: 9px; line-height: 1.3; color: #8A7466; } .u2-lb-res strong { font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; color: #5B3E36; font-variant-numeric: tabular-nums; } .u2-lb-res.is-wait strong { color: #C9B8A5; } .u2-lb-count { display: flex; flex-direction: column; align-items: center; line-height: 1.25; } .u2-lb-count small { font-size: 10px; font-weight: 500; } .u2-lb-count strong { font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .u2-lb-count.open { color: #C2410C; } .u2-lb-count.soon { color: #15803D; } .u2-lb-card.is-main { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; gap: 6px; padding: 10px 8px; border-radius: 14px; } .u2-lb-card.is-main::before { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 140, .35), rgba(255, 214, 140, 0) 70%); } .u2-lb-card.is-main > * { position: relative; } .is-main .u2-lb-hd { flex-direction: row; gap: 8px; } .is-main .u2-lb-flag { width: 36px; height: 36px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 3px rgba(80, 50, 20, .3)); } .is-main .u2-lb-name { font-size: 16px; font-weight: 700; } .is-main .u2-lb-date { margin-top: -4px; font-size: 11.5px; } .u2-lb-first { display: flex; flex-direction: column; width: 100%; padding: 6px 4px; border-radius: 12px; background: linear-gradient(180deg, #FFF9EF 0%, #FBEFDB 60%, #F6E4C6 100%); border: 1px solid #E8CA9C; box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(160, 110, 40, .15); } .u2-lb-first small { font-size: 12px; font-weight: 500; color: #36251D; } .u2-lb-first strong { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: .06em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #3E2210 0%, #6E3410 45%, #A4561A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .is-main .u2-lb-res { gap: 6px; padding: 0; } .is-main .u2-lb-res small { font-size: 11px; } .is-main .u2-lb-res strong { font-size: 20px; } .is-main .u2-lb-count small { font-size: 12px; } .is-main .u2-lb-count strong { font-size: 22px; } @media (max-width: 380px) { .u2-lb-card { gap: 2px; padding: 4px 2px; } .u2-lb-flag { width: 20px; height: 20px; } .u2-lb-name { font-size: 11px; } .u2-lb-res strong { font-size: 13px; } .u2-lb-first strong { font-size: 23px; } .is-main .u2-lb-res strong { font-size: 17px; } } /* โปรโมชั่น — copy จากหน้าแรก www (.u2-pm) : รูปซ้าย ชื่อ+คำอธิบายขวา ; กดแล้วเปิด sheet รายละเอียด */ .u2-pm-list { display: grid; gap: 10px; } .u2-pm { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; text-align: left; background: linear-gradient(180deg, #FCFAF4 0%, #FAF5EC 50%, #F7EEE0 100%); border: 1px solid #E2D3BE; border-radius: 14px; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .6), 0 3px 10px rgba(120, 90, 50, .10); } .u2-pm img { flex: none; width: 42%; aspect-ratio: 1040 / 624; object-fit: cover; border-radius: 10px; } .u2-pm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .u2-pm-ttl, .u2-pm-desc { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .u2-pm-ttl { -webkit-line-clamp: 2; font-size: 15px; font-weight: 500; line-height: 1.3; color: #2B1E17; } .u2-pm-desc { -webkit-line-clamp: 3; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #9A4F1C; } /* กิจกรรมพิเศษ — copy จากหน้าแรก www (.u2-pk) 2 column */ .u2-pk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .u2-pk { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 12px 10px 14px; background: linear-gradient(180deg, #FAF5EC 0%, #F5EDE1 55%, #EEE4D5 100%); border: 1px solid #D8CCBC; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 3px 10px rgba(120, 90, 50, .10); transition: transform .15s; } .u2-pk:active { transform: scale(.97); } .u2-pk-ic { width: 76px; height: 76px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255, 226, 150, .55) 0, rgba(255, 226, 150, 0) 68%); } .u2-pk-ic img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(80, 50, 20, .28)); } .u2-pk-en { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; color: #A4561A; } .u2-pk-th { margin-top: 1px; font-size: 16px; font-weight: 600; line-height: 1.3; color: #2B1E17; } .u2-pk-desc { margin-top: 3px; font-size: 12px; line-height: 1.4; color: #7A6656; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* sheet รายละเอียดโปร — copy จาก www (.u2-pro) */ .u2-sh-pro .u2-sh-box { max-height: 92vh; padding: 0 16px; } .u2-pro-hd { position: sticky; top: 0; z-index: 2; height: 32px; margin: 0 -16px; background: #F7F4EF; border-radius: 20px 20px 0 0; } .u2-pro-grip { position: absolute; left: 50%; top: 10px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #D6C6AE; } .u2-pro-x { position: absolute; top: 8px; right: 12px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--u2-line); color: var(--u2-ink); box-shadow: 0 2px 6px rgba(80, 50, 20, .15); } .u2-pro-x .ic { width: 16px; height: 16px; } .u2-pro-img { width: 100%; aspect-ratio: 1040 / 624; object-fit: cover; margin-top: 10px; border-radius: 12px; box-shadow: 0 4px 14px rgba(80, 50, 20, .2); } .u2-pro-ttl { margin: 14px 0 8px; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--u2-ink); } .u2-pro-detail { padding-top: 10px; border-top: 1px solid var(--u2-line); font-size: 14px; line-height: 1.65; color: #4A3628; overflow-wrap: anywhere; } .u2-pro-detail * { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; max-width: 100%; color: inherit !important; background-color: transparent !important; } .u2-pro-detail h1, .u2-pro-detail h2, .u2-pro-detail h3, .u2-pro-detail h4 { margin: 0 0 6px; font-weight: 600; color: #6E3410 !important; } .u2-pro-detail p { margin: 0 0 6px; } .u2-pro-detail ul, .u2-pro-detail ol { margin: 0 0 8px; padding-left: 20px; } .u2-pro-detail li { margin-bottom: 2px; } .u2-pro-detail :is(p, ul, ol, li, div, td) { color: #4A3628 !important; } .u2-pro-detail strong, .u2-pro-detail b { font-weight: 600; } .u2-pro-detail :is(strong, b, font[color], [style*="color"]) { color: #9A4F1C !important; } .u2-pro-detail a { color: #A4561A !important; text-decoration: underline !important; } .u2-pro-detail img { height: auto; border-radius: 8px; } .u2-pro-cta { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #ECE6DD; border-top: 1px solid var(--u2-line); box-shadow: 0 -6px 14px rgba(80, 50, 20, .08); } .u2-pro-cta .u2-sbtn { height: 48px; font-size: 16px; } .u2-pro-cta .ic { width: 20px; height: 20px; } /* popup ยินดีต้อนรับ */ .u2-pop-body { position: relative; z-index: 1; margin-top: -16px; padding: 16px 16px 4px; background: linear-gradient(180deg, #F7F4EF 0%, #ECE6DD 100%); border-radius: 18px 18px 0 0; } .u2-pop-body > img { width: 100%; border-radius: 12px; box-shadow: 0 4px 14px rgba(80, 50, 20, .2); } .u2-pop-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .u2-pop-chk { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--u2-ink); cursor: pointer; } .u2-pop-chk input { width: 18px; height: 18px; margin: 0; accent-color: #C9962E; } .u2-pop-ft .u2-sbtn { width: auto; height: 42px; padding: 0 28px; font-size: 16px; } /* เมนูล่าง — แบบ www .u2-tab (เส้นทอง + ปุ่มกลางวงกลมทอง) */ .u2-tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-width: var(--u2-app-w); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: calc(68px + env(safe-area-inset-bottom)); padding: 0 4px calc(6px + env(safe-area-inset-bottom)); background: #5C4D42; box-shadow: 0 -4px 14px rgba(59,42,30,.25); } .u2-tab::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 3px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 246, 220, .75) 0, rgba(255, 246, 220, .75) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 2px, rgba(110, 70, 25, .3) 2px), linear-gradient(90deg, #E0A84E 0%, #F1CB80 12%, #F8E3B4 30%, #F3D29A 40%, #E2AE5C 50%, #F4D07C 64%, #F2C068 78%, #E6AA52 100%); } .u2-tab > a, .u2-tab > button { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.2; color: #EADFCF; } .u2-tab .ic { width: 23px; height: 23px; } .u2-tab .is-on { color: #F2C94C; } .u2-tab > .u2-tab-mid { gap: 3px; } .u2-tab-orb { display: grid; place-items: center; width: 72px; height: 72px; margin: -35px 0 -3px; border-radius: 50%; background: url(img/tab-orb.webp?v2) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); } .u2-tab-orb .ic { width: 28px; height: 28px; margin-left: 0; fill: #fff; stroke: #fff; filter: drop-shadow(0 0 4px rgba(255, 226, 140, .95)) drop-shadow(0 0 8px rgba(245, 170, 50, .6)); } @media (prefers-reduced-motion: reduce) { .u2-qk-item, .u2-pk, .u2-lb-card { transition: none; } } /* ---------- หน้าฝาก (/deposit = desktop2/deposite-gateway.php): UX แบบ member.superlsm99.link/deposit (css2/app.css ส่วน "หน้าฝาก") สีธีม ufamv — แก้แค่หน้าตา ไม่แตะ JS ---------- หน้านี้โหลด bootstrap.min.css ก่อน u2.css (_u2head.php $u2ng) */ body.u2-in { --u2-dbd: #E6D9C3; --u2-dpn: #EFE7DA; --u2-gold-bg: radial-gradient(ellipse 55% 90% at 50% 0%, rgba(255,251,225,.95) 0%, rgba(255,241,185,.55) 45%, rgba(255,230,150,0) 100%), linear-gradient(180deg, #F4CF6C 0%, #ECBE5A 45%, #D59B33 100%); --u2-brown-bg: radial-gradient(90% 120% at 100% -20%, rgba(245, 197, 66, .30), rgba(245, 197, 66, 0) 60%), linear-gradient(160deg, #8A735F 0%, #5C4D42 55%, #3B2A1E 100%); } body.u2-in .u2-dep { margin: 0; } body.u2-in .u2-dep > .container { padding: 12px; max-width: none; } body.u2-in .u2-dep-wl { margin-bottom: 14px; } /* หัว: ไอคอน + ชื่อ + ขั้นตอน 1-2-3 */ body.u2-in .u2-dep-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; } body.u2-in .u2-dep-head .ic { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #2B1F17; background: var(--u2-gold-bg); border: 1px solid #F2D58A; box-shadow: 0 4px 12px rgba(90, 60, 20, .3), inset 0 1px 0 rgba(255,255,255,.7); } body.u2-in .u2-dep-head .ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } body.u2-in .u2-dep-head .ttl { margin: 0; color: var(--u2-ink); font-size: 21px; font-weight: 600; line-height: 1.2; } body.u2-in .u2-dep-steps { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 5px 0 0; padding: 0; list-style: none; } body.u2-in .u2-dep-steps li { display: flex; align-items: center; gap: 5px; padding: 2px 10px 2px 3px; border-radius: 999px; background: #fff; border: 1px solid var(--u2-dbd); color: var(--u2-ink2); font-size: 12.5px; line-height: 1.5; } body.u2-in .u2-dep-steps li b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--u2-dpn); color: var(--u2-ink2); font-size: 11px; font-weight: 600; } body.u2-in .u2-dep-steps li.on { border-color: var(--u2-line); color: #8A5A12; } body.u2-in .u2-dep-steps li.on b { background: var(--u2-gold-bg); color: #2B1F17; } body.u2-in .u2-dep-steps li.done b { background: #2E9B5B; color: #fff; } /* แท็บ: ปุ่มแคปซูล / มีแท็บเดียวก็ซ่อนแถบ */ body.u2-in #deposite .tab-box .tab { display: flex; gap: 6px; margin: 0 0 10px; padding: 5px; border-radius: 14px; background: var(--u2-dpn); border: 0; list-style: none; } body.u2-in #deposite .tab-box .tab li { flex: 1; width: auto; margin: 0; padding: 9px 6px; border-radius: 10px; cursor: pointer; background: transparent; color: var(--u2-ink2); font-size: 15px; text-align: center; transition: background .15s; } body.u2-in #deposite .tab-box .tab li.select { background: #fff; color: var(--u2-ink); font-weight: 600; box-shadow: 0 2px 8px rgba(59, 42, 30, .12); } body.u2-in #deposite .tab-box .tab:has(li:only-child) { display: none; } body.u2-in #deposite .tab-box .cont-wrap { padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--u2-ink); } body.u2-in #deposite .tab-box .cont-wrap .inner { padding: 0; background: none; } /* วิธีการฝากเงิน: การ์ดขาว เลขข้อในวงกลมทอง */ body.u2-in #deposite .u2-dep-how { margin: 0; padding: 14px 14px 12px; border-radius: 14px; border: 1px solid var(--u2-dbd); background: #fff; color: var(--u2-ink); font-size: 14px; box-shadow: 0 3px 10px rgba(59, 42, 30, .06); } body.u2-in #deposite .u2-dep-how > strong { display: block; margin-bottom: 10px; text-align: center; color: var(--u2-ink); font-size: 16px; font-weight: 600; } body.u2-in #deposite .u2-dep-how ol { margin: 0; padding: 0; list-style: none; counter-reset: u2s; } body.u2-in #deposite .u2-dep-how li { list-style: none; position: relative; margin: 0 0 8px; padding-left: 32px; counter-increment: u2s; line-height: 1.5; color: var(--u2-ink); font-size: 14px; } body.u2-in #deposite .u2-dep-how li::before { content: counter(u2s); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--u2-gold-bg); color: #2B1F17; font-size: 12px; font-weight: 600; } body.u2-in #deposite .u2-dep-how li em { display: block; font-style: normal; font-size: 12.5px; color: #C0392B; } body.u2-in #deposite .u2-dep-how > p { margin: 4px 0 0; padding-top: 10px; border-top: 1px dashed var(--u2-dbd); text-align: center; color: #8A5A12; font-weight: 500; } /* กรอกยอด + ปุ่มยอดด่วน */ body.u2-in #deposite .deposite-amount { margin-top: 12px !important; padding: 14px; border-radius: 14px; border: 1px solid var(--u2-dbd); background: #fff; box-shadow: 0 3px 10px rgba(59, 42, 30, .06); } body.u2-in #deposite .deposite-amount .txt-label { color: var(--u2-ink); text-shadow: none; font-weight: 600; font-size: 16px; } body.u2-in #deposite .deposite-amount .txt-label i { color: #C08A2A; } body.u2-in #deposite .deposite-amount .text-success { color: #8A5A12 !important; } body.u2-in #deposite .u2-dep-amt .input-num { position: relative; display: flex; align-items: center; margin-top: 12px; height: 58px; border-radius: 14px; border: 2px solid var(--u2-dbd); background: var(--u2-card); transition: border-color .15s, box-shadow .15s; } body.u2-in #deposite .u2-dep-amt .input-num:focus-within { border-color: var(--u2-gold); box-shadow: 0 0 0 3px rgba(217, 169, 63, .2); } body.u2-in #deposite .u2-dep-amt .input-num .cur { flex: none; padding: 0 4px 0 16px; color: #C08A2A; font-size: 24px; font-weight: 600; } body.u2-in #deposite .u2-dep-amt .input-num .form-control { height: 100%; min-width: 0; padding: 0 14px 0 4px; border: 0; background: transparent; box-shadow: none; color: var(--u2-ink); font-family: inherit; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; } body.u2-in #deposite .u2-dep-amt .input-num .form-control::placeholder { color: #C9B9A3; } body.u2-in .u2-dep-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } body.u2-in .u2-dep-quick button { height: 40px; border-radius: 10px; border: 1.5px solid var(--u2-dbd); background: #fff; color: var(--u2-ink); font-family: inherit; font-size: 15px; font-weight: 500; transition: border-color .15s, background .15s; } body.u2-in .u2-dep-quick button:hover { border-color: var(--u2-gold); } body.u2-in .u2-dep-quick button.on { border-color: var(--u2-gold); background: #FFF4D6; color: #8A5A12; font-weight: 600; } body.u2-in #deposite .u2-dep-amt .txt-hint { margin-top: 8px; color: var(--u2-ink2); font-size: 13px; text-align: center; } body.u2-in #deposite .u2-dep-ok { display: block; width: 100%; height: 50px; margin-top: 12px; border: 1px solid #F2D58A; border-radius: 14px; background: var(--u2-gold-bg); color: #2B1F17; font-family: inherit; font-size: 18px; font-weight: 600; box-shadow: 0 4px 12px rgba(90, 60, 20, .3), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 4px rgba(140,90,10,.35); } body.u2-in #deposite .u2-dep-ok:hover:not(:disabled) { filter: brightness(1.05); } body.u2-in #deposite .u2-dep-ok:disabled { background: #E9E1D4; border-color: #E9E1D4; color: #A8998A; box-shadow: none; opacity: 1; } /* ปุ่ม LINE */ body.u2-in .u2-dep-line { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(6, 199, 85, .35); text-decoration: none; background: radial-gradient(120% 120% at 0% 0%, rgba(6, 199, 85, .14), transparent 60%), #fff; box-shadow: 0 3px 10px rgba(59, 42, 30, .06); } body.u2-in .u2-dep-line .ic { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #06C755; box-shadow: 0 4px 12px rgba(6, 199, 85, .3); } body.u2-in .u2-dep-line .ic img { width: 30px; height: 30px; filter: brightness(0) invert(1); } body.u2-in .u2-dep-line .tx { flex: 1; min-width: 0; line-height: 1.25; } body.u2-in .u2-dep-line .tx small { display: block; color: var(--u2-ink2); font-size: 12.5px; } body.u2-in .u2-dep-line .tx b { display: block; color: var(--u2-ink); font-size: 18px; font-weight: 600; white-space: nowrap; } body.u2-in .u2-dep-line .tx em { font-style: normal; color: #06a64a; } body.u2-in .u2-dep-line .go { flex: none; display: flex; align-items: center; gap: 3px; padding: 8px 10px 8px 12px; border-radius: 999px; background: #06C755; color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; } body.u2-in .u2-dep-line .go .ic { width: 15px; height: 15px; flex: none; display: block; background: none; box-shadow: none; border-radius: 0; stroke-width: 2.6; } /* gateway อื่น (ไม่ใช่ P2Pay): กล่องบัญชี */ body.u2-in #deposite .deposite-bank { border-radius: 14px; border: 1px solid var(--u2-dbd); background: #fff; box-shadow: 0 3px 10px rgba(59, 42, 30, .06); } body.u2-in #deposite .deposite-bank .bank-detail { color: var(--u2-ink); text-shadow: none; } body.u2-in #deposite .deposite-bank .bank-copy { color: #C08A2A; } /* ขั้นที่ 2: การ์ดโอนเงิน (P2Pay) */ body.u2-in #deposite .p2pay-transfer-card { margin-top: 0; border-radius: 14px; border: 1px solid var(--u2-dbd); color: var(--u2-ink); background: #fff; box-shadow: 0 3px 10px rgba(59, 42, 30, .06); } body.u2-in #deposite .p2pay-transfer-card__header { padding: 11px 14px; font-size: 15px; font-weight: 600; color: var(--u2-ink); background: none; border-bottom: 1px solid var(--u2-dbd); } body.u2-in #deposite .p2pay-transfer-card__header i { color: #C08A2A; } body.u2-in #deposite .p2pay-transfer-card__body { padding: 12px 14px 14px; } body.u2-in #deposite .p2pay-transfer-hero { margin-bottom: 12px; padding: 0 0 12px; background: none; border: 0; border-bottom: 1px dashed var(--u2-dbd); } body.u2-in #deposite .p2pay-transfer-hero__num { color: #A86F12; -webkit-text-fill-color: #A86F12; background: none; text-shadow: none; } body.u2-in #deposite .p2pay-transfer-hero__unit { color: var(--u2-ink); } body.u2-in #deposite .p2pay-transfer-hero__thai { color: var(--u2-ink2); } body.u2-in #deposite .p2pay-transfer-qr__frame { border: 2px solid var(--u2-dbd); border-radius: 14px; background: #fff; box-shadow: none; } body.u2-in #deposite .p2pay-transfer-qr__hint { color: var(--u2-ink2); } body.u2-in #deposite .p2pay-transfer-qr__hint i { color: #C08A2A; } body.u2-in #deposite .p2pay-transfer-bank { margin-bottom: 12px; padding: 12px 14px; background: var(--u2-card); border: 1px solid var(--u2-dbd); border-radius: 14px; } body.u2-in #deposite .p2pay-transfer-bank__header { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--u2-dbd); } body.u2-in #deposite .p2pay-transfer-bank__logo { width: 40px; height: 40px; padding: 6px; border-radius: 50%; } body.u2-in #deposite .p2pay-transfer-bank__name { color: var(--u2-ink); font-weight: 600; } body.u2-in #deposite .p2pay-transfer-bank__field + .p2pay-transfer-bank__field { margin-top: 10px; } body.u2-in #deposite .p2pay-transfer-bank__label { margin-bottom: 2px; color: var(--u2-ink2); font-size: 12px; font-weight: 500; letter-spacing: 0; } body.u2-in #deposite .p2pay-transfer-bank__number { color: var(--u2-ink); font-size: 22px; letter-spacing: .03em; font-variant-numeric: tabular-nums; } body.u2-in #deposite .p2pay-transfer-bank__value { color: var(--u2-ink); font-weight: 600; } body.u2-in #deposite .p2pay-transfer-bank__copy { padding: 7px 14px; background: var(--u2-gold-bg); border: 1px solid #F2D58A; color: #2B1F17; font-size: 14px; font-weight: 600; border-radius: 10px; } body.u2-in #deposite .p2pay-transfer-notice-bar { color: #7A4E0E; background: #FFF6E0; border: 1px solid #EBCB7E; border-radius: 10px; } body.u2-in #deposite .p2pay-transfer-notice-bar i { color: #C08A2A; } body.u2-in #deposite .p2pay-transfer-notice-bar strong { color: #A86F12; background: none; padding: 0; } body.u2-in #deposite .p2pay-transfer-card .p2pay-remark-alert { margin: 10px 0 0; } body.u2-in #deposite .p2pay-transfer-card .p2pay-slip-wrap { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--u2-dbd); } body.u2-in #deposite .p2pay-slip-wrap .txt-label { color: var(--u2-ink) !important; font-size: 14px; font-weight: 600; } body.u2-in #deposite .p2pay-slip-wrap .txt-label i { color: #C08A2A; } body.u2-in #deposite .p2pay-slip-wrap .p2pay_slip_pick { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 10px; border: 2px dashed rgba(217, 169, 63, .7); border-radius: 14px; background: #FFF9EC; color: #8A5A12; } body.u2-in #deposite .p2pay-slip-wrap .p2pay_slip_pick i.fa-2x { font-size: 22px; } body.u2-in #deposite .p2pay-slip-wrap .p2pay_slip_pick div { margin-top: 0 !important; } body.u2-in #deposite .p2pay-slip-wrap .btn-warning { width: 100%; height: 44px; padding: 0 22px; border: 1px solid #F2D58A; border-radius: 12px; background: var(--u2-gold-bg); color: #2B1F17; font-size: 16px; font-weight: 600; } body.u2-in #deposite .p2pay-slip-wrap .btn-warning:disabled { background: #E9E1D4; border-color: #E9E1D4; color: #A8998A; opacity: 1; } /* นับถอยหลัง (แสดงเฉพาะขั้นโอน) — FlipDown เดิมซ่อน */ .u2-timer { display: none; } body.u2-in .u2-dep-s2 .u2-timer { display: block; margin: 0 0 12px; padding: 9px 14px 10px; border-radius: 14px; text-align: center; background: var(--u2-brown-bg); border: 1px solid var(--u2-line); } body.u2-in .u2-dep-s2 .u2-timer .t { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: #FFF3DC; } body.u2-in .u2-dep-s2 .u2-timer .t .ic { width: 18px; height: 18px; color: #F5C542; } body.u2-in .u2-dep-s2 .u2-timer .v { display: flex; align-items: flex-start; justify-content: center; gap: 5px; margin: 6px 0 8px; } body.u2-in .u2-dep-s2 .u2-timer .g > span { display: flex; gap: 4px; } body.u2-in .u2-dep-s2 .u2-timer .g b { position: relative; width: 40px; height: 54px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(180deg, #fff 50%, #F5EEE2 50%); color: var(--u2-ink); font-size: 38px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); } body.u2-in .u2-dep-s2 .u2-timer .g b::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(59, 42, 30, .15); } body.u2-in .u2-dep-s2 .u2-timer .c { height: 54px; display: flex; align-items: center; color: #F5C542; font-size: 30px; font-weight: 700; } body.u2-in .u2-dep-s2 .u2-timer .bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; } body.u2-in .u2-dep-s2 .u2-timer .bar span { display: block; height: 100%; width: 99%; background: linear-gradient(90deg, #FFF4CC, #F5C542, #D99A1E); } body.u2-in .u2-dep-s2 #deposite #flipdown-p2pay { display: none !important; } /* ขั้นโอน: กล่องสถานะ + ปุ่ม */ body.u2-in .u2-dep-s2 #deposite .cont-wrap > .cont-item .deposite-amount > .txt-label, body.u2-in .u2-dep-s2 #deposite .cont-wrap > .cont-item .deposite-amount > .text-success { display: none !important; } body.u2-in #deposite .p2pay-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin: 12px 0 0 !important; width: 100%; } body.u2-in #deposite .p2pay-actions .btn { width: 100% !important; min-width: 0 !important; height: auto !important; line-height: 1.3 !important; margin: 0 !important; padding: 11px 8px !important; border-radius: 12px !important; font-size: 14px !important; box-shadow: none !important; } body.u2-in #deposite .p2pay-actions .p2pay-btn-primary { grid-column: 1 / -1; font-size: 16px !important; background: var(--u2-gold-bg); border: 1px solid #F2D58A; color: #2B1F17; font-weight: 600; } body.u2-in #deposite .p2pay-actions .p2pay-btn-primary:hover:not([disabled]) { background: var(--u2-gold-bg); filter: brightness(1.05); } body.u2-in #deposite .p2pay-actions .p2pay-btn-change-amount { background: #fff; border: 1.5px solid var(--u2-gold); color: #8A5A12; text-shadow: none; } body.u2-in #deposite .p2pay-actions .p2pay-btn-change-amount:hover:not([disabled]) { background: #FFF4D6; border-color: var(--u2-gold); color: #8A5A12; } body.u2-in #deposite .p2pay-actions .p2pay-btn-secondary { background: var(--u2-dpn); border-color: var(--u2-dpn); color: var(--u2-ink2); } body.u2-in #deposite .p2pay-actions .p2pay-btn-secondary:hover:not([disabled]) { background: var(--u2-dbd); border-color: var(--u2-dbd); color: var(--u2-ink); } /* popup ยืนยันยอด / ยกเลิก / เปลี่ยนยอด: การ์ดน้ำตาลแบบกล่องยอดเงิน ปุ่มทอง */ body.u2-in #paymentAmountConfirmModal .modal-content.p2pay-modal-card, body.u2-in #p2payCancelConfirmModal .modal-content.p2pay-modal-card, body.u2-in #p2payEditAmountConfirmModal .modal-content.p2pay-modal-card { overflow: hidden; border-radius: 18px; border: 1px solid var(--u2-line); color: #FFF3DC; background: var(--u2-brown-bg) !important; box-shadow: 0 20px 50px rgba(30, 20, 12, .5); margin-left: auto; margin-right: auto; font-family: 'Kanit', sans-serif; } body.u2-in #paymentAmountConfirmModal .modal-header, body.u2-in #p2payCancelConfirmModal .modal-header, body.u2-in #p2payEditAmountConfirmModal .modal-header { background: rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(245, 197, 66, .3); } body.u2-in #paymentAmountConfirmModal .modal-title, body.u2-in #p2payCancelConfirmModal .modal-title, body.u2-in #p2payEditAmountConfirmModal .modal-title { color: #FFF3DC; font-weight: 600; } body.u2-in #paymentAmountConfirmModal .close, body.u2-in #p2payCancelConfirmModal .close, body.u2-in #p2payEditAmountConfirmModal .close { color: #FFF3DC; text-shadow: none; opacity: .8; background: none; border: 0; font-size: 26px; line-height: 1; } body.u2-in #paymentAmountConfirmModal .payment-amount-confirm-highlight, body.u2-in #paymentAmountConfirmModal .deposit-result-amount { color: #F5C542; } body.u2-in #paymentAmountConfirmModal .payment-amount-confirm-highlight { background: rgba(255, 255, 255, .1); border-color: rgba(245, 197, 66, .7); } body.u2-in #paymentAmountConfirmModal .deposit-confirm-amount-thai { color: rgba(255, 243, 220, .75); } body.u2-in #paymentAmountConfirmModal .modal-footer, body.u2-in #p2payCancelConfirmModal .modal-footer, body.u2-in #p2payEditAmountConfirmModal .modal-footer { border-top: 1px solid rgba(245, 197, 66, .3); background: rgba(0, 0, 0, .12); } body.u2-in #paymentAmountConfirmModal .modal-footer .btn, body.u2-in #p2payCancelConfirmModal .modal-footer .btn, body.u2-in #p2payEditAmountConfirmModal .modal-footer .btn { min-width: 110px; height: 42px; border-radius: 12px; font-weight: 600; } body.u2-in #paymentAmountConfirmModal .modal-footer .btn-success, body.u2-in #p2payEditAmountConfirmModal .modal-footer .btn-warning { background: var(--u2-gold-bg); border: 1px solid #F2D58A; color: #2B1F17; } body.u2-in #paymentAmountConfirmModal .modal-footer .btn-secondary, body.u2-in #p2payCancelConfirmModal .modal-footer .btn-secondary, body.u2-in #p2payEditAmountConfirmModal .modal-footer .btn-secondary { background: rgba(255, 255, 255, .14); border-color: transparent; color: #FFF3DC; } body.u2-in #paymentAmountConfirmModal .modal-body, body.u2-in #p2payCancelConfirmModal .modal-body, body.u2-in #p2payEditAmountConfirmModal .modal-body { color: rgba(255, 243, 220, .95); } body.u2-in .modal-backdrop.show { opacity: .6; } /* หน้าฝาก: ซ่อนกล่องฝากจน angular แปลง {{...}} เสร็จ (ng-cloak ใส่ใน desktop2/deposite-gateway.php) + ตัวหมุนระหว่างรอ */ body.u2-in [ng-cloak] { display: none !important; } body.u2-in .u2-dep-load.ng-hide { display: none !important; } body.u2-in .u2-dep-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; border-radius: 16px; border: 1px solid var(--u2-dbd); background: #FFFDF8; color: #8A735F; font-size: 14px; } body.u2-in .u2-dep-load .sp { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--u2-dbd); border-top-color: var(--u2-gold); animation: u2-dep-spin .8s linear infinite; } @keyframes u2-dep-spin { to { transform: rotate(360deg); } } /* ---------- หน้าถอน (/withdraw = desktop2/withdraw.php): UX แบบ member.superlsm99.link/withdraw (css2/app.css ส่วน "หน้าถอน") สีธีม ufamv — กล่องยอดเงิน/หัว/ปุ่มยอดด่วน/ตัวหมุนใช้ชุดหน้าฝาก ; ไอคอนหัวโทนน้ำตาลให้ต่างจากหน้าฝาก ; JS เดิมไม่แตะ ---------- */ body.u2-in #withdraw.u2-wd { padding: 12px 12px 8px; } body.u2-in .u2-wd .u2-dep-head .ic { background: var(--u2-brown-bg); color: #F5C542; border-color: rgba(245, 197, 66, .5); } body.u2-in .u2-dep-head .sub { margin: 3px 0 0; color: var(--u2-ink2); font-size: 13px; line-height: 1.4; } body.u2-in .u2-wd .u2-dep-load { margin-bottom: 12px; } body.u2-in .u2-wd .u2-pg-card { margin-bottom: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--u2-dbd); background: #fff; color: var(--u2-ink); box-shadow: 0 3px 10px rgba(59, 42, 30, .06); } body.u2-in .u2-wd .u2-pg-ttl { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--u2-ink); font-size: 16px; font-weight: 600; line-height: 1.4; } body.u2-in .u2-wd .u2-pg-ttl i { color: #C08A2A; } body.u2-in #withdraw .u2-wd-acc { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--u2-dbd); background: var(--u2-card); } body.u2-in #withdraw .u2-wd-acc .logo img { display: block; width: 48px; height: 48px; padding: 6px; border-radius: 50%; object-fit: contain; } body.u2-in #withdraw .u2-wd-acc .det { min-width: 0; line-height: 1.4; } body.u2-in #withdraw .u2-wd-acc .bank { color: var(--u2-ink2); font-size: 13.5px; } body.u2-in #withdraw .u2-wd-acc .num { color: #8A5A12; font-size: 21px; font-weight: 600; letter-spacing: .03em; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } body.u2-in #withdraw .u2-wd-acc .name { color: var(--u2-ink); font-size: 14px; font-weight: 500; } body.u2-in #withdraw .u2-wd-acc .name i { color: #C08A2A; margin-right: 2px; } body.u2-in #withdraw .u2-wd-last { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--u2-dbd); background: var(--u2-card); } body.u2-in #withdraw .u2-wd-last .amt { color: var(--u2-ink); line-height: 1.3; } body.u2-in #withdraw .u2-wd-last .amt small { display: block; color: var(--u2-ink2); font-size: 12.5px; } body.u2-in #withdraw .u2-wd-last .amt b { color: #8A5A12; font-size: 26px; font-weight: 600; margin-right: 4px; } body.u2-in #withdraw .u2-wd-last .meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; } body.u2-in #withdraw .u2-wd-last .time { color: var(--u2-ink2); font-size: 13px; } body.u2-in #withdraw .u2-wd-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--u2-dbd); background: #fff; color: var(--u2-ink2); font-size: 13.5px; font-weight: 500; line-height: 1.4; } body.u2-in #withdraw .u2-wd-badge.pending { background: #FFF4D6; border-color: var(--u2-line); color: #8A5A12; } body.u2-in #withdraw .u2-wd-badge.ok { background: #e8f8ef; border-color: rgba(22, 160, 90, .45); color: #12804a; } body.u2-in #withdraw .u2-wd-badge.cancel { background: #fdecee; border-color: rgba(229, 56, 79, .4); color: #c8283e; } body.u2-in .u2-wd .u2-pg-field { margin-bottom: 14px; } body.u2-in .u2-wd .u2-pg-field > label { display: block; margin: 0 0 6px; color: var(--u2-ink); font-size: 14.5px; font-weight: 500; line-height: 1.4; } body.u2-in .u2-wd .u2-pg-inp, body.u2-in #withdraw .u2-wd-amt { display: flex; align-items: center; border-radius: 12px; border: 2px solid var(--u2-dbd); background: var(--u2-card); transition: border-color .15s, box-shadow .15s; } body.u2-in .u2-wd .u2-pg-inp > i { flex: none; width: 42px; text-align: center; font-size: 16px; color: #C08A2A; } body.u2-in .u2-wd .u2-pg-inp .form-control, body.u2-in #withdraw .u2-wd-amt .form-control { flex: 1; min-width: 0; height: 46px; padding: 0 14px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--u2-ink); font-family: inherit; font-size: 16px; line-height: normal; } body.u2-in .u2-wd .u2-pg-inp .form-control[readonly] { opacity: 1; color: var(--u2-ink2); } body.u2-in #withdraw .u2-wd-amt { height: 58px; } body.u2-in #withdraw .u2-wd-amt .cur { flex: none; padding: 0 4px 0 16px; color: #C08A2A; font-size: 24px; font-weight: 600; } body.u2-in #withdraw .u2-wd-amt .form-control { height: 100%; padding-left: 4px; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; } body.u2-in #withdraw .u2-wd-amt .form-control::placeholder { color: #C9B9A3; } body.u2-in #withdraw .u2-wd-amt:focus-within { border-color: var(--u2-gold); box-shadow: 0 0 0 3px rgba(217, 169, 63, .2); } body.u2-in #withdraw .u2-wd-minmax { margin-top: 8px; color: var(--u2-ink2); font-size: 13px; } body.u2-in #withdraw .u2-wd-minmax b { color: #8A5A12; } body.u2-in #withdraw .u2-dep-quick button:disabled { opacity: .4; cursor: not-allowed; } body.u2-in #withdraw .u2-wd-tip { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: #FFF4D6; border: 1px solid var(--u2-line); color: #7A4E10; font-size: 13px; line-height: 1.5; } body.u2-in #withdraw .u2-wd-tip i { color: #C08A2A; margin-right: 4px; } body.u2-in .u2-wd .u2-pg-btn { display: block; width: 100%; height: 50px; margin-top: 4px; border: 1px solid #F2D58A; border-radius: 14px; background: var(--u2-gold-bg); color: #2B1F17; font-family: inherit; font-size: 18px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(90, 60, 20, .3), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 4px rgba(140,90,10,.35); } body.u2-in .u2-wd .u2-pg-btn:hover:not(:disabled) { filter: brightness(1.05); } body.u2-in .u2-wd .u2-pg-btn:disabled { background: #E9E1D4; border-color: #E9E1D4; color: #A8998A; box-shadow: none; cursor: not-allowed; } body.u2-in .u2-wd .u2-pg-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; } body.u2-in .u2-wd .u2-pg-alert > i { margin-top: 3px; } body.u2-in .u2-wd .u2-pg-alert.err { background: #fdecee; border: 1px solid rgba(229, 56, 79, .4); color: #b42234; } body.u2-in .u2-wd .u2-pg-alert.err > i { color: #e5384f; } body.u2-in .u2-wd .u2-pg-alert.ok { background: #e8f8ef; border: 1px solid rgba(22, 160, 90, .4); color: #12804a; } body.u2-in .u2-wd .u2-pg-alert.ok > i { color: #16a05a; } /* ---------- หน้า x120 (/?action=x120 = desktop2/x120.php): UX แบบ member.supervip2541.app/?action=x120 สีธีม ufamv — หัวน้ำตาล/ทอง + การ์ดครีมแบบหวยหน้าแรก (.u2-lb-card) ---------- */ .u2-x120 { padding: 12px 0 8px; } .u2-xh { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 12px 14px 12px 8px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(245, 197, 66, .55); background: var(--u2-brown-bg); box-shadow: 0 6px 16px rgba(59, 42, 30, .28), inset 0 1px 0 rgba(255, 226, 138, .35); } .u2-xh-back { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #F5C542; background: rgba(255, 255, 255, .08); border: 1px solid rgba(245, 197, 66, .4); } .u2-xh-back .ic { width: 20px; height: 20px; stroke-width: 2.4; } .u2-xh-ic { flex: none; width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255, 206, 120, .55)) drop-shadow(0 4px 4px rgba(20, 12, 6, .5)); } .u2-xh-t { min-width: 0; } .u2-xh h1 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: #FFF3DC; } .u2-xh h1 em { font-style: normal; background: linear-gradient(180deg, #FFE7A0 0%, #F4CF6C 45%, #D59B33 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .u2-xh p { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: #EADBC4; } .u2-x120 .u2-sec { margin-top: 18px; } .u2-ls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .u2-ls-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 10px; border-radius: 12px; color: var(--u2-ink); text-decoration: none; background: linear-gradient(170deg, #FFFCF6 0%, #FAF3E8 55%, #F3E8D7 100%); border: 1px solid #EAD9BF; box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(120, 84, 40, .12); transition: transform .1s, border-color .2s; } .u2-ls-card:hover { border-color: var(--u2-gold); color: var(--u2-ink); } .u2-ls-card:active { transform: scale(.97); } .u2-ls-card.is-loading { opacity: .6; pointer-events: none; } .u2-ls-top { display: flex; align-items: flex-start; gap: 10px; } .u2-ls-flag { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px #fff, 0 1px 4px rgba(80, 50, 20, .3); } .u2-ls-flag img { width: 100%; height: 100%; object-fit: cover; } .u2-ls-flag.is-logo { overflow: visible; background: none; box-shadow: none; } .u2-ls-flag.is-logo img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(80, 50, 20, .35)); } .u2-ls-info { flex: 1; min-width: 0; } .u2-ls-info b { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #36251D; word-break: break-word; } .u2-ls-info small { display: inline-block; padding: 2px 10px; border-radius: 999px; white-space: nowrap; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: #6E5446; background: #fff; border: 1px solid #EFE3D1; } .u2-ls-cd { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; margin-top: auto; padding: 8px 10px; border-radius: 999px; color: #C0392B; background: #FDECEC; border: 1px solid rgba(192, 57, 43, .3); } .u2-ls-cd.is-allow { color: #15803D; background: #E8F8EF; border-color: rgba(21, 128, 61, .35); } .u2-ls-cd .ic { width: 15px; height: 15px; stroke-width: 2.2; } .u2-ls-cd span { font-size: 14px; font-weight: 700; letter-spacing: .05em; line-height: 1; font-variant-numeric: tabular-nums; } .u2-x120-load { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(30, 20, 12, .65); } .u2-x120-load[hidden] { display: none; } .u2-x120-load-box { display: flex; flex-direction: column; align-items: center; min-width: 240px; padding: 26px 30px; border-radius: 18px; text-align: center; border: 1px solid rgba(245, 197, 66, .55); background: var(--u2-brown-bg); box-shadow: 0 16px 40px rgba(30, 20, 12, .5); } .u2-x120-spin { width: 42px; height: 42px; margin-bottom: 12px; border-radius: 50%; border: 4px solid rgba(245, 197, 66, .2); border-top-color: #F5C542; animation: u2-dep-spin .8s linear infinite; } .u2-x120-load-box b { font-size: 17px; font-weight: 600; line-height: 1.4; color: #FFF3DC; } .u2-x120-load-box small { margin-top: 4px; font-size: 14px; color: #EADBC4; } /* ---------- ร้านแลกเพชร (/point-exchange = desktop2/point/exchange.php): UX แบบ member.supervip2541.app/point-exchange สีธีม ufamv — หัว/ตัวหมุนใช้ชุดหน้าฝาก ; ยอดเพชร + popup โทนน้ำตาลแบบกล่องยอดเงิน ; การ์ดครีมแบบกิจกรรมพิเศษหน้าแรก ---------- */ body.u2-in #exchange.u2-ex { padding: 12px 12px 8px; } body.u2-in .u2-ex-ld { margin: 12px; } body.u2-in .u2-ex .u2-ex-hic { flex-basis: 52px; width: 52px; height: 52px; background: radial-gradient(circle at 50% 40%, #FFF6DC 0%, #F4E3B8 60%, #E9CF8E 100%); border-color: var(--u2-line); } body.u2-in .u2-ex .u2-ex-hic img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(80, 50, 20, .3)); } .u2-ex-bal { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; color: #FFF3DC; background: var(--u2-brown-bg); border: 1px solid var(--u2-line); box-shadow: 0 8px 22px rgba(59, 42, 30, .25); } .u2-ex-bal > img { flex: none; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); } .u2-ex-bal > div { flex: 1; min-width: 0; line-height: 1.2; } .u2-ex-bal small { display: block; color: #EADBC4; font-size: 12.5px; } .u2-ex-bal b { color: #F5C542; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; } .u2-ex-bal .lim { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(245, 197, 66, .55); background: rgba(245, 197, 66, .12); color: #F5C542; font-size: 12.5px; white-space: nowrap; } .u2-ex-empty { margin: 0 0 12px; padding: 22px 16px; border-radius: 14px; border: 1px dashed var(--u2-line); background: #FFFDF8; text-align: center; } .u2-ex-empty b { color: var(--u2-ink); font-size: 15px; font-weight: 600; } .u2-ex-desc { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--u2-dbd); background: #fff; color: var(--u2-ink); font-size: 14px; line-height: 1.6; } .u2-ex-desc p { margin: 0 0 6px; } .u2-ex-desc p:last-child { margin-bottom: 0; } .u2-ex-desc img { max-width: 100%; height: auto; border-radius: 10px; } .u2-ex-skel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .u2-ex-skel i { display: block; height: 190px; border-radius: 14px; background: linear-gradient(90deg, #EFE7DA 25%, #F8F3EA 50%, #EFE7DA 75%) 0 0 / 200% 100%; animation: u2-ex-sk 1.2s linear infinite; } @keyframes u2-ex-sk { to { background-position: -200% 0; } } .u2-ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .u2-ex-item { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; padding: 8px 8px 10px; text-align: center; border: 1px solid #D8CCBC; border-radius: 14px; color: var(--u2-ink); font: inherit; cursor: pointer; background: linear-gradient(180deg, #FAF5EC 0%, #F5EDE1 55%, #EEE4D5 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 3px 10px rgba(120, 90, 50, .10); transition: transform .15s, border-color .15s, box-shadow .15s; } .u2-ex-item:hover { border-color: var(--u2-gold); box-shadow: 0 0 0 2px rgba(217, 169, 63, .2), 0 3px 10px rgba(120, 90, 50, .12); } .u2-ex-item:active { transform: scale(.97); } .u2-ex-item .img { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 50% 55%, rgba(255, 226, 150, .6) 0, rgba(255, 226, 150, 0) 72%), #FFFDF8; } .u2-ex-item .img > img { width: 100%; height: 100%; object-fit: contain; } .u2-ex-item .nm { color: var(--u2-ink); font-size: 14px; font-weight: 600; line-height: 1.3; } .u2-ex-item .get { color: var(--u2-ink2); font-size: 13px; line-height: 1.3; } .u2-ex-item .get b { color: #8A5A12; font-size: 16px; font-weight: 600; } .u2-ex-item .cost { display: flex; align-items: center; justify-content: center; gap: 5px; height: 36px; border-radius: 999px; border: 1px solid #F2D58A; background: var(--u2-gold-bg); color: #2B1F17; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 3px 8px rgba(90, 60, 20, .25), inset 0 1px 0 rgba(255, 255, 255, .7); } .u2-ex-item .cost img, .u2-ex-mrow img { width: 18px; height: 18px; object-fit: contain; } .u2-ex-item.low .cost { border-color: transparent; background: #E9E1D4; color: #A8998A; box-shadow: none; } .u2-ex-modal .modal-dialog { max-width: 400px; margin-left: auto; margin-right: auto; padding: 0 16px; } .u2-ex-modal .modal-content { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 20px; border: 1px solid var(--u2-line); color: #FFF3DC; background: var(--u2-brown-bg); box-shadow: 0 20px 50px rgba(30, 20, 12, .5); font-family: 'Kanit', sans-serif; } .u2-ex-mimg { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 50% 55%, rgba(245, 197, 66, .3) 0, rgba(0, 0, 0, .15) 70%); } .u2-ex-mimg img { width: 80%; height: 100%; object-fit: contain; } .u2-ex-mttl { text-align: center; font-size: 18px; font-weight: 600; } .u2-ex-mttl b { color: #F5C542; font-size: 22px; } .u2-ex-mrow { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: rgba(0, 0, 0, .2); font-size: 14px; } .u2-ex-mrow span { color: #EADBC4; } .u2-ex-mrow b { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .u2-ex-warn { padding: 8px 12px; border-radius: 10px; background: rgba(229, 56, 79, .18); border: 1px solid rgba(255, 122, 133, .55); color: #FFC9CF; font-size: 13.5px; text-align: center; } .u2-ex-mbtns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 4px; } .u2-ex-btn, .u2-ex-btn2 { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 14px; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; } .u2-ex-btn { border: 1px solid #F2D58A; background: var(--u2-gold-bg); color: #2B1F17; box-shadow: 0 4px 12px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .7); } .u2-ex-btn:hover:not(:disabled) { filter: brightness(1.05); } .u2-ex-btn:disabled { border-color: transparent; background: rgba(255, 255, 255, .14); color: rgba(255, 243, 220, .5); box-shadow: none; cursor: not-allowed; } .u2-ex-btn2 { border: 1px solid rgba(245, 197, 66, .45); background: rgba(255, 255, 255, .1); color: #FFF3DC; } .u2-ex-load { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 4px; color: #EADBC4; font-size: 14px; } .u2-ex-load i { width: 34px; height: 34px; border: 3px solid rgba(245, 197, 66, .2); border-top-color: #F5C542; border-radius: 50%; animation: u2-dep-spin .8s linear infinite; } /* ---------- ทายสกอร์ (/point-score = desktop2/point/score.php): UX แบบ member.supervip2541.app/point-score สีธีม ufamv — หัว/ยอดเพชร/คำอธิบาย/ปุ่มทองใช้ชุดร้านแลกเพชร (.u2-ex-*) ; การ์ดคู่บอลขาวขอบครีม ---------- */ body.u2-in #score.u2-sc { padding: 12px 12px 8px; } .u2-sc .u2-ex-skel { grid-template-columns: 1fr; margin-bottom: 12px; } .u2-sc .u2-ex-skel i { height: 250px; } .u2-sc-match { margin: 0 0 12px; padding: 12px 14px 14px; border-radius: 16px; border: 1px solid var(--u2-dbd); color: var(--u2-ink); background: radial-gradient(90% 60% at 100% 0%, rgba(255, 226, 150, .35), rgba(255, 226, 150, 0) 100%), #fff; box-shadow: 0 3px 10px rgba(59, 42, 30, .08); } .u2-sc-match.off { opacity: .85; } .u2-sc-match .sc-hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .u2-sc-match .time { display: inline-flex; align-items: center; gap: 5px; color: var(--u2-ink2); font-size: 13px; font-variant-numeric: tabular-nums; } .u2-sc-match .time .ic { width: 15px; height: 15px; fill: none; stroke: #C08A2A; stroke-width: 2; stroke-linecap: round; } .u2-sc-match .time small { margin-left: 4px; color: #8A5A12; font-size: 12px; font-weight: 600; } .u2-sc-match .rw { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; color: var(--u2-ink2); font-size: 12.5px; } .u2-sc-match .rw b { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--u2-line); background: #FFF4D6; color: #8A5A12; font-size: 13px; font-weight: 600; } .u2-sc-match .rw img, .u2-sc .pill img { width: 18px; height: 18px; object-fit: contain; } .u2-sc-match .teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px; margin: 0 0 14px; } .u2-sc-match .tm { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; } .u2-sc-match .logo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--u2-dbd); background: #fff; box-shadow: 0 2px 6px rgba(59, 42, 30, .1); } .u2-sc-match .logo img { width: 40px; height: 40px; object-fit: contain; } .u2-sc-match .tm b { min-height: 2.6em; color: var(--u2-ink); font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .u2-sc-match .tm input { width: 72px; height: 54px; padding: 0; border-radius: 14px; border: 2px solid var(--u2-dbd); background: var(--u2-card); color: #8A5A12; font: inherit; font-size: 26px; font-weight: 600; text-align: center; outline: 0; transition: border-color .15s, box-shadow .15s; -moz-appearance: textfield; appearance: textfield; } .u2-sc-match .tm input::-webkit-outer-spin-button, .u2-sc-match .tm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .u2-sc-match .tm input:focus { border-color: var(--u2-gold); box-shadow: 0 0 0 3px rgba(217, 169, 63, .2); } .u2-sc-match .tm input::placeholder { color: #C9B9A3; } .u2-sc-match .tm input:disabled { opacity: 1; color: var(--u2-ink); background: #EFE7DA; } .u2-sc-match .vs { align-self: center; margin-top: 28px; color: #C08A2A; font-size: 15px; font-weight: 700; } .u2-sc .u2-ex-btn { gap: 8px; } .u2-sc .u2-ex-btn:disabled { background: #E9E1D4; border-color: #E9E1D4; color: #A8998A; } .u2-sc .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: rgba(43, 31, 23, .12); font-size: 15px; } .u2-sc-off, .u2-sc-sent { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 14px; font-size: 15px; font-weight: 600; text-align: center; } .u2-sc-off { background: #EFE7DA; border: 1px solid var(--u2-dbd); color: var(--u2-ink2); } .u2-sc-sent { background: #e8f8ef; border: 1px solid rgba(22, 160, 90, .45); color: #12804a; } .u2-sc-sent .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .u2-sc-sec { margin: 18px 2px 8px; color: var(--u2-ink); font-size: 16px; font-weight: 600; } .u2-sc-his { margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--u2-dbd); background: #fff; } .u2-sc-his .sc-hd { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; color: var(--u2-ink2); font-size: 12.5px; font-variant-numeric: tabular-nums; } .u2-sc-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--u2-dbd); font-size: 12.5px; font-weight: 500; line-height: 1.4; } .u2-sc-badge.pending { background: #FFF4D6; border-color: var(--u2-line); color: #8A5A12; } .u2-sc-badge.ok { background: #e8f8ef; border-color: rgba(22, 160, 90, .45); color: #12804a; } .u2-sc-badge.cancel { background: #fdecee; border-color: rgba(229, 56, 79, .4); color: #c8283e; } .u2-sc-his .tb { display: grid; grid-template-columns: minmax(0, 1fr) 48px 56px; align-items: center; gap: 6px; font-size: 14px; } .u2-sc-his .th { color: var(--u2-ink2); font-size: 12px; text-align: center; } .u2-sc-his .nm { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--u2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u2-sc-his .nm img { flex: none; width: 24px; height: 24px; padding: 2px; border-radius: 50%; border: 1px solid var(--u2-dbd); background: #fff; object-fit: contain; } .u2-sc-his .tb b { color: #8A5A12; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; } /* ---------- กล่องสุ่ม (/point-mystery = desktop2/point/mystery.php): UX แบบ member.supervip2541.app/point-mystery สีธีม ufamv — ใช้ชุดร้านแลกเพชร (.u2-ex-*) + หัวข้อชุดทายสกอร์ (.u2-sc-sec) ; กล่อง 3D/แอนิเมชันจาก /logo/other/css/mystery.css ---------- */ .u2-my-item .img { aspect-ratio: auto; height: 150px; overflow: visible; } .u2-my-item .cube-box, .u2-my-mcube .cube-box { animation: none; cursor: inherit; } .u2-my-item .cube-box { transform: scale(.78); } .u2-my-item .hexagon, .u2-my-mcube .hexagon { display: none; } .u2-my-mcube { display: grid; place-items: center; height: 180px; border-radius: 14px; background: radial-gradient(circle at 50% 55%, rgba(245, 197, 66, .3) 0, rgba(0, 0, 0, .15) 70%); } .u2-my-rw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 300px; margin: 0 auto; padding: 0; list-style: none; } .u2-my-rw li { overflow: hidden; padding: 4px; border-radius: 10px; border: 1px solid rgba(245, 197, 66, .4); background: rgba(0, 0, 0, .2); } .u2-my-rw img { display: block; width: 100%; max-width: 90px; height: auto; aspect-ratio: 1; margin: 0 auto; object-fit: contain; } /* รูปรางวัล 90x90 ไม่ขยายเกินขนาดจริง */ .u2-my-log { display: grid; gap: 8px; } .u2-my-log .it { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--u2-dbd); background: #fff; } .u2-my-log .tx { flex: 1; min-width: 0; line-height: 1.35; } .u2-my-log .tx b { display: block; color: var(--u2-ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .u2-my-log .tx small { color: var(--u2-ink2); font-size: 12px; font-variant-numeric: tabular-nums; } .u2-my-log .vals { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .u2-my-log .vals span { display: inline-flex; align-items: center; gap: 3px; } .u2-my-log .vals img { width: 18px; height: 18px; object-fit: contain; } .u2-my-log .vals .cost { color: #c8283e; } .u2-my-log .vals .gain { color: #12804a; } .u2-my-log .u2-ex-empty { margin: 0; } .u2-my .u2-my-more { height: 42px; font-size: 15px; border-color: var(--u2-gold); background: #fff; color: #8A5A12; } body.u2-in .mystery { background: rgba(43, 31, 23, .75); color: #FFF3DC; } /* ---------- กงล้อ (/point-wheel = desktop2/point/wheel.php): UX แบบ member.supervip2541.app/point-wheel สีธีม ufamv — หัว/คำอธิบาย/ประวัติใช้ชุดร้านแลกเพชร+กล่องสุ่ม ; เกม Phaser เดิม (FIT 720x960 ต้องมีความสูงของ #canvas) ---------- */ body.u2-in .u2-wh { padding: 12px 12px 8px; } .u2-wh .u2-dep-head .sub img { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; } .u2-wh .u2-dep-head .sub b { color: #8A5A12; } .u2-wh-stage { overflow: hidden; margin: 0 0 12px; border-radius: 18px; border: 1px solid var(--u2-line); background: radial-gradient(circle at 50% 40%, #8A735F 0, #5C4D42 55%, #3B2A1E 100%); box-shadow: 0 8px 22px rgba(59, 42, 30, .28); } .u2-wh-stage #play { padding: 0 !important; } .u2-wh-stage #canvas { height: auto !important; aspect-ratio: 3 / 4; padding-top: 0 !important; } @supports not (aspect-ratio: 1) { .u2-wh-stage #canvas { height: calc((min(100vw, 440px) - 26px) * 4 / 3) !important; } } .u2-wh-stage canvas { display: block; } .u2-wh-rule { padding: 0; } .u2-wh-rule summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; color: #8A5A12; font-weight: 600; list-style: none; } .u2-wh-rule summary::-webkit-details-marker { display: none; } .u2-wh-rule summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid #C08A2A; border-bottom: 2px solid #C08A2A; transform: rotate(45deg); transition: transform .2s; } .u2-wh-rule[open] summary::after { transform: rotate(-135deg); } .u2-wh-rule > div { padding: 0 14px 12px; color: var(--u2-ink2); } .u2-wh-rule > div * { font-family: inherit !important; } .u2-wh .u2-my-more { height: 42px; font-size: 15px; border-color: var(--u2-gold); background: #fff; color: #8A5A12; } /* ---------- โปรไฟล์ (/account = desktop2/account.php): UX แบบ member.supervip2541.app/account สีธีม ufamv — หัวชุดหน้าฝาก (.u2-dep-head) + หัวข้อชุดทายสกอร์ (.u2-sc-sec) ; การ์ดขาว/บัญชีครีมแบบหน้าถอน ---------- */ body.u2-in .u2-ac { padding: 12px 12px 8px; } .u2-ac .u2-sc-sec { margin-top: 4px; } .u2-ac-card { margin-bottom: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--u2-dbd); background: #fff; color: var(--u2-ink); box-shadow: 0 3px 10px rgba(59, 42, 30, .06); } .u2-ac .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .u2-ac-user { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--u2-line); } .u2-ac-user .av { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--u2-brown-bg); color: #F5C542; border: 1px solid rgba(245, 197, 66, .5); } .u2-ac-user .av .ic { width: 24px; height: 24px; stroke-width: 2.2; } .u2-ac-user .tx { flex: 1; min-width: 0; line-height: 1.3; } .u2-ac-user small { display: block; color: var(--u2-ink2); font-size: 12.5px; } .u2-ac-user b { display: block; color: var(--u2-ink); font-size: 18px; font-weight: 600; letter-spacing: .03em; overflow-wrap: anywhere; } .u2-ac-copy { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--u2-line); background: #FFF4D6; color: #8A5A12; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .u2-ac-copy .ic { width: 15px; height: 15px; stroke-width: 2.2; } .u2-ac-copy.is-done { border-color: rgba(22, 160, 90, .45); background: #e8f8ef; color: #12804a; } .u2-ac-rows { margin: 0; } .u2-ac-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 11px; } .u2-ac-rows > div + div { margin-top: 11px; border-top: 1px solid var(--u2-dpn); } .u2-ac-rows dt { flex: none; color: var(--u2-ink2); font-size: 14px; font-weight: 400; } .u2-ac-rows dd { margin: 0; min-width: 0; color: var(--u2-ink); font-size: 15px; font-weight: 500; text-align: right; overflow-wrap: anywhere; } .u2-ac-rows dd.num { font-variant-numeric: tabular-nums; letter-spacing: .03em; } .u2-ac-bank { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--u2-dbd); background: var(--u2-card); } .u2-ac-bank .logo img { display: block; width: 48px; height: 48px; padding: 6px; border-radius: 50%; object-fit: contain; } .u2-ac-bank .det { flex: 1; min-width: 0; line-height: 1.4; } .u2-ac-bank .bank { color: var(--u2-ink2); font-size: 13px; } .u2-ac-bank .num { color: #8A5A12; font-size: 20px; font-weight: 600; letter-spacing: .03em; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .u2-ac-bank .name { color: var(--u2-ink); font-size: 14px; font-weight: 500; } .u2-ac-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--u2-ink2); font-size: 13px; line-height: 1.5; } .u2-ac-note .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #C08A2A; } .u2-ac-note a { color: #8A5A12; font-weight: 600; text-decoration: underline; white-space: nowrap; } .u2-ac-links { display: grid; overflow: hidden; border-radius: 14px; border: 1px solid rgba(245, 197, 66, .55); background: var(--u2-brown-bg); box-shadow: 0 6px 16px rgba(59, 42, 30, .22); } .u2-ac-links a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; } .u2-ac-links a + a { border-top: 1px solid rgba(255, 255, 255, .1); } .u2-ac-links .i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(245, 197, 66, .15); color: #F5C542; } .u2-ac-links .i .ic { width: 19px; height: 19px; } .u2-ac-links .go { width: 18px; height: 18px; margin-left: auto; color: rgba(255, 255, 255, .55); } .u2-ac-links a.out { color: #FFB4BC; } .u2-ac-links a.out .i { background: rgba(229, 56, 79, .2); color: #FF8A96; } /* ---------- เปลี่ยนรหัสผ่าน (/password = desktop2/password.php): UX แบบ member.supervip2541.app/password สีธีม ufamv — หัวชุดหน้าฝาก ; ช่องกรอก/ปุ่มแบบหน้าถอน ; หน้านี้โหลด bootstrap (data-u2="ng") ---------- */ body.u2-in .u2-pw { padding: 12px 12px 8px; } .u2-pw .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .u2-pw-card { margin-bottom: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--u2-dbd); background: #fff; color: var(--u2-ink); box-shadow: 0 3px 10px rgba(59, 42, 30, .06); } .u2-pw-user { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px; border-radius: 12px; border: 1px solid var(--u2-dbd); background: var(--u2-card); } .u2-pw-user .av { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--u2-brown-bg); color: #F5C542; border: 1px solid rgba(245, 197, 66, .5); } .u2-pw-user .av .ic { width: 24px; height: 24px; stroke-width: 2.2; } .u2-pw-user small { display: block; color: var(--u2-ink2); font-size: 12.5px; line-height: 1.3; } .u2-pw-user b { display: block; color: var(--u2-ink); font-size: 18px; font-weight: 600; letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; } .u2-pw-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; } .u2-pw-alert .ic { flex: none; margin-top: 1px; } .u2-pw-alert b { display: block; font-weight: 600; } .u2-pw-alert.err { background: #fdecee; border: 1px solid rgba(229, 56, 79, .4); color: #b42234; } .u2-pw-alert.ok { background: #e8f8ef; border: 1px solid rgba(22, 160, 90, .4); color: #12804a; } .u2-pw-field { margin-bottom: 14px; } .u2-pw-field > label { display: block; margin: 0 0 6px; color: var(--u2-ink); font-size: 14.5px; font-weight: 500; line-height: 1.4; } .u2-pw-inp { display: flex; align-items: center; border-radius: 12px; border: 2px solid var(--u2-dbd); background: var(--u2-card); transition: border-color .15s, box-shadow .15s; } .u2-pw-inp:focus-within { border-color: var(--u2-gold); box-shadow: 0 0 0 3px rgba(217, 169, 63, .2); } .u2-pw-inp .lk { flex: none; width: 42px; color: #C08A2A; } body.u2-in .u2-pw-inp .form-control { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--u2-ink); font-family: inherit; font-size: 16px; line-height: normal; } .u2-pw-inp .form-control::placeholder { color: #C9B9A3; } .u2-pw-inp .form-control:disabled { opacity: .6; } .u2-pw-inp .eye { display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 0; background: none; color: var(--u2-ink2); cursor: pointer; } .u2-pw-inp .eye .ic { width: 21px; height: 21px; } .u2-pw-inp .eye.on { color: #C08A2A; } .u2-pw-inp .eye.on .eye-sl { display: none; } .u2-pw-chk { display: grid; gap: 6px; margin: 2px 0 16px; padding: 10px 12px; list-style: none; border-radius: 12px; background: var(--u2-dpn); } .u2-pw-chk li { display: flex; align-items: center; gap: 8px; color: var(--u2-ink2); font-size: 13.5px; line-height: 1.4; } .u2-pw-chk li .ic { flex: none; width: 18px; height: 18px; color: #B8A895; } .u2-pw-chk li.ok, .u2-pw-chk li.ok .ic { color: #16a05a; } .u2-pw-chk li.bad, .u2-pw-chk li.bad .ic { color: #d6293f; } .u2-pw-btn { display: block; width: 100%; height: 50px; border: 1px solid #F2D58A; border-radius: 14px; cursor: pointer; background: var(--u2-gold-bg); color: #2B1F17; font-family: inherit; font-size: 18px; font-weight: 600; box-shadow: 0 4px 12px rgba(90, 60, 20, .3), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 4px rgba(140,90,10,.35); } .u2-pw-btn:hover:not(:disabled) { filter: brightness(1.05); } .u2-pw-btn:disabled { background: #E9E1D4; border-color: #E9E1D4; color: #A8998A; box-shadow: none; cursor: not-allowed; } /* ---------- บันทึกการเงิน (/logs-credit = desktop2/logs/credit.php): UX แบบ member.supervip2541.app/logs-credit สีธีม ufamv — หัวชุดหน้าฝาก ; แท็บแคปซูลแบบหน้าฝาก ; แถวการ์ดขาว ฝาก=เขียว ถอน=ทอง ---------- */ body.u2-in .u2-lc { padding: 12px 12px 8px; } .u2-lc .u2-dep-head > div { flex: 1; min-width: 0; } .u2-lc .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .u2-lc-ref { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; border: 1px solid var(--u2-line); background: #fff; color: #C08A2A; cursor: pointer; } body.u2-in .u2-lc .u2-lc-ref .ic { flex: none; display: block; width: 20px; height: 20px; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; stroke-width: 2.2; transition: transform .2s; } /* กันโดนสไตล์ .u2-dep-head .ic */ .u2-lc-ref:active .ic { transform: rotate(-90deg); } .u2-lc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 12px; padding: 5px; border-radius: 14px; background: var(--u2-dpn); } .u2-lc-tabs button { height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--u2-ink2); font-family: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; } .u2-lc-tabs button.on { background: #fff; color: var(--u2-ink); font-weight: 600; box-shadow: 0 2px 8px rgba(59, 42, 30, .12); } .u2-lc-list { display: grid; gap: 8px; } .u2-lc-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--u2-dbd); background: #fff; box-shadow: 0 3px 10px rgba(59, 42, 30, .06); } .u2-lc-ic { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; } .u2-lc-ic .ic { width: 22px; height: 22px; stroke-width: 2.2; } .u2-lc-row.is-dep .u2-lc-ic { background: #e8f8ef; color: #16a05a; } .u2-lc-row.is-wd .u2-lc-ic { background: #FFF4D6; color: #C08A2A; } .u2-lc-tx { flex: 1; min-width: 0; line-height: 1.35; } .u2-lc-tx b { display: block; color: var(--u2-ink); font-size: 15px; font-weight: 600; } .u2-lc-tx small { display: block; color: var(--u2-ink2); font-size: 12.5px; font-variant-numeric: tabular-nums; } .u2-lc-amt { flex: none; text-align: right; font-size: 17px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; } .u2-lc-amt small { display: block; color: var(--u2-ink2); font-size: 11.5px; font-weight: 400; } .u2-lc-row.is-dep .u2-lc-amt { color: #12804a; } .u2-lc-row.is-wd .u2-lc-amt { color: #8A5A12; } .u2-lc-skel { display: grid; gap: 8px; } .u2-lc-skel i { display: block; height: 68px; border-radius: 14px; background: linear-gradient(90deg, #EFE7DA 25%, #F8F3EA 50%, #EFE7DA 75%) 0 0 / 200% 100%; animation: u2-lc-sk 1.2s linear infinite; } @keyframes u2-lc-sk { to { background-position: -200% 0; } } .u2-lc-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px 18px; border-radius: 14px; border: 1px dashed var(--u2-line); background: #fff; text-align: center; } .u2-lc-empty > .ic { width: 44px; height: 44px; padding: 10px; box-sizing: content-box; border-radius: 50%; background: #FFF4D6; color: #C08A2A; } .u2-lc-empty b { color: var(--u2-ink); font-size: 15px; font-weight: 600; } /* ---------- แถบติดตั้งแอป (PWA) บนสุดเหนือ header — _u2pwa.php #u2-pwa (แบบ supervip2541 สีธีม ufamv ; www ใช้ชุดเดียวกันใน __html.php) ---------- */ .u2-pwa { position: relative; z-index: 51; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px 6px 12px; background: linear-gradient(90deg, #5C4D42 0%, #3B2A1E 100%); border-bottom: 1px solid rgba(245, 197, 66, .3); color: #fff; line-height: 1.3; } .u2-pwa[hidden] { display: none; } .u2-pwa > img { flex: none; width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(245, 197, 66, .5); } .u2-pwa-tx { flex: 1; min-width: 0; display: grid; } .u2-pwa-tx b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u2-pwa-tx small { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .7); } .u2-pwa.is-help .u2-pwa-tx small { color: #FFE28A; } .u2-pwa-tx small svg { width: 14px; height: 14px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .u2-pwa-btn { flex: none; height: 32px; padding: 0 14px; border: 1px solid #F2D58A; border-radius: 16px; background: var(--u2-gold-bg, linear-gradient(180deg, #F4CF6C 0%, #ECBE5A 45%, #D59B33 100%)); color: #2B1F17; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .u2-pwa-x { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .7); cursor: pointer; } .u2-pwa-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* ปุ่ม LIVECHAT (socketio.livechats.work chat.css: .chat-btn bottom 80px, .chat-wrapper bottom 154px ตายตัว) → อยู่เหนือเมนูล่าง .u2-tab (68px + safe-area ; ในแอป iPhone safe-area ~34px ทำให้ปุ่มทับเมนู) */ body.u2-in #livechatcontroller .chat-btn { bottom: calc(82px + env(safe-area-inset-bottom)) !important; } body.u2-in #livechatcontroller .chat-wrapper { bottom: calc(156px + env(safe-area-inset-bottom)) !important; } /* สไลด์ .u2-hero จากหลังบ้าน www (เมนู Slides) ใส่ลิงก์ได้ → ครอบรูป ให้เต็มกรอบเหมือนเดิม */ .u2-sl-item > a { display: block; height: 100%; }