/* auto168m ui2 — หน้าแรก (mobile first 440px) โครงแบบ ufamv.app prefix u2- ; โทนดำ-ทอง ตาม mockup room-357 msg 34804 (m4.png) */
:root {
  --u2-bg: #0A0A0A;
  --u2-card: #141210;
  --u2-card2: #1C1915;
  --u2-ink: #F6EBD2;
  --u2-ink2: #A99C84;
  --u2-gold: #E2B955;
  --u2-gold-hi: #FFF0B8;
  --u2-gold-lo: #9A6E22;
  --u2-goldgrad: linear-gradient(180deg, #FFF0B8 0%, #F0CB6A 40%, #D3A145 70%, #A9772A 100%);
  --u2-goldtext: linear-gradient(180deg, #FFF6D6 0%, #F5D27A 45%, #C99536 100%);
  --u2-line: rgba(214, 172, 82, .45);
  --u2-line-hi: rgba(236, 198, 110, .85);
  --u2-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
html:has(body.u2) { background: #000 url(img/bg-ufabet.jpg) center / cover no-repeat fixed; scroll-behavior: smooth; } /* พื้นหลังรูป ufabet bg.jpg */
body.u2 {
  max-width: 440px; min-height: 100vh; margin: 0 auto; padding-bottom: 84px; position: relative; overflow-x: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 100%), url(img/bg-ufabet.jpg) center / cover no-repeat fixed var(--u2-bg);
  color: var(--u2-ink); font-family: 'Kanit', sans-serif; font-weight: 400; line-height: 1.4;
  box-shadow: 0 0 0 1px rgba(214, 172, 82, .12), 0 0 60px rgba(0, 0, 0, .8);
}
body.u2 :is(ol, ul, dl, li, dt, dd, table, th, td, input, textarea, select, button, h1, h2, h3, h4, h5, h6) { font-family: 'Kanit', sans-serif; }
.u2-app h1, .u2-app h2, .u2-app h3, .u2-app p, .u2-app small, .u2-app b, .u2-app span, .u2-app li {
  color: inherit; margin: 0; padding: 0; line-height: 1.2;
}
.u2-app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.u2-app a { text-decoration: none; cursor: pointer; }
.u2-app img { display: block; max-width: 100%; }

/* ปุ่ม */
.u2-btn-gold, .u2-btn-ghost {
  font-family: 'Kanit', sans-serif !important; font-weight: 600; font-size: 14px;
  border-radius: 10px !important; padding: 7px 14px !important; white-space: nowrap;
}
.u2-btn-gold {
  background: var(--u2-goldgrad) !important; color: #1A1208 !important; border: 1px solid #F6DB8E !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 14px rgba(240, 190, 80, .28), 0 2px 6px rgba(0, 0, 0, .5);
}
.u2-btn-ghost { border: 1.5px solid var(--u2-gold) !important; color: #F7DE8E !important; background: rgba(0, 0, 0, .35) !important; }
.u2-btn-sm { font-size: 13px; padding: 6px 14px !important; border-radius: 999px !important; }
.u2-btn-sm i { font-size: 11px; margin-left: 4px; }

/* โลโก้ */
.u2-logo { display: block; height: auto; max-height: 40px; width: auto; max-width: 170px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }

/* header */
.u2-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: rgba(10, 10, 10, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(214, 172, 82, .3);
}
.u2-brand { display: flex; align-items: center; min-width: 0; }
.u2-auth { display: flex; align-items: center; gap: 6px; flex: none; }

/* hero slider (รูปหลังบ้าน Slide 1022x345) */
.u2-hero { margin: 12px 12px 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--u2-line); box-shadow: var(--u2-shadow); }
.u2-slide { aspect-ratio: 960 / 500; background: #000; }
.u2-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.u2-slide > a { display: block; width: 100%; height: 100%; } /* สไลด์จากหลังบ้านที่ใส่ลิงก์ */
.u2-hero { background: #0F0D0A; }
.u2-hero:has(.u2-dots) { padding-bottom: 0; }
.u2-dots.swiper-pagination { bottom: 5px !important; display: flex; justify-content: center; align-items: center; gap: 6px; }
.u2-dots .swiper-pagination-bullet {
  margin: 0 !important; width: 8px; height: 8px; opacity: 1; border-radius: 999px; background: #4A4337; transition: width .25s, background .25s;
}
.u2-dots .swiper-pagination-bullet-active { width: 26px; background: var(--u2-goldgrad); box-shadow: 0 0 6px rgba(240, 190, 80, .5); }

/* หมวด */
.u2-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 12px 0; }
.u2-cat {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex !important; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 8px !important;
  border-radius: 14px; background: linear-gradient(180deg, #1F1B15 0%, #13110E 60%, #0C0B09 100%) !important;
  border: 1.5px solid rgba(214, 172, 82, .6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .12), 0 4px 12px rgba(0, 0, 0, .5);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.u2-cat:active, .u2-cat:hover { transform: scale(.97); border-color: var(--u2-line-hi) !important; box-shadow: 0 0 14px rgba(240, 190, 80, .35), inset 0 1px 0 rgba(255, 230, 170, .2); }
.u2-cat img { width: 78%; height: auto; aspect-ratio: 1; object-fit: contain; }
.u2-cat span { font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 16px; color: #F7E6BE !important; }

/* section */
.u2-sec { margin: 24px 12px 0; }
.u2-sec-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.u2-sec-hd h2 {
  position: relative; padding-left: 12px;
  font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 21px; color: var(--u2-ink) !important; display: flex; align-items: center; gap: 8px;
}
.u2-sec-hd h2::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 4px; border-radius: 4px; background: var(--u2-goldgrad); }
.u2-sec-hd h2 i { background: var(--u2-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent; }
.u2-sec-hd h2 .u2-sec-ic { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 0 5px rgba(240, 190, 80, .35)); }
.u2-sec-hd a { font-size: 13px; color: var(--u2-gold) !important; }

/* คาสิโน / สล็อต — รูปค่าย 3 column */
.u2-cv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.u2-app .u2-cv button {
  display: block; padding: 0; border: 1px solid var(--u2-line); border-radius: 12px; overflow: hidden; background: #000;
  box-shadow: var(--u2-shadow); transition: transform .15s, border-color .15s;
}
.u2-app .u2-cv button:active, .u2-app .u2-cv button:hover { transform: scale(.97); border-color: var(--u2-line-hi); }
.u2-cv img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* โปรโมชั่น — รูปหลังบ้าน (Promotions 1040x1040) เลื่อนแนวนอนแบบ mockup ; กดแล้วเปิด sheet */
/* โปรโมชั่น: slide ทีละรูป (1 รูปต่อจอ) ทุก 4 วินาที (Swiper ใน home.js) */
.u2-pm-list { overflow: hidden; }
.u2-app .u2-pm-nav {
  position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--u2-line-hi); background: rgba(10, 9, 7, .72); color: var(--u2-gold-hi); box-shadow: var(--u2-shadow);
}
.u2-pm-nav .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.u2-pm-prev { left: 6px; }
.u2-pm-next { right: 6px; }
.u2-app .u2-pm-nav:active { transform: scale(.92); background: var(--u2-goldgrad); color: #1A1208; }
.u2-app .u2-pm {
  display: block; padding: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--u2-line); background: #000; box-shadow: var(--u2-shadow);
}
.u2-pm img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* กิจกรรมพิเศษ 2 column */
.u2-pk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.u2-app .u2-pk {
  display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 12px 10px 14px;
  font-family: 'Kanit', sans-serif;
  background: linear-gradient(180deg, #1E1A14 0%, #15130F 55%, #0E0D0B 100%);
  border: 1px solid var(--u2-line); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .08), var(--u2-shadow);
}
.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% 45%, rgba(240, 190, 80, .3) 0, rgba(240, 190, 80, 0) 68%);
}
.u2-app .u2-pk-ic img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); }
.u2-app .u2-pk-en { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; color: var(--u2-gold); }
.u2-app .u2-pk-th { margin-top: 1px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--u2-ink); }
.u2-app .u2-pk-desc {
  margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--u2-ink2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* footer */
.u2-foot { margin: 18px 12px 0; padding-bottom: calc(30px + env(safe-area-inset-bottom)); text-align: center; font-size: 12px; color: var(--u2-ink2); }

/* เมนูล่าง */
.u2-tab {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-width: 440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: 68px; padding: 0 4px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #17140F 0%, #0B0A08 100%);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .6);
}
.u2-tab::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(214,172,82,.15) 0%, rgba(240,203,106,.9) 50%, rgba(214,172,82,.15) 100%);
}
.u2-tab a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #B9AC94 !important; font-family: 'Kanit', sans-serif; font-size: 12.5px; text-decoration: none; cursor: pointer; }
.u2-tab a:not(.u2-tab-mid) { gap: 10px; }
.u2-tab a i { font-size: 21px; }
.u2-tab a.is-on { color: #F2C94C !important; }
.u2-tab a.is-on i { filter: drop-shadow(0 0 6px rgba(242, 201, 76, .6)); }
/* ปุ่มกลาง: ลูกแก้วทองสว่าง ขอบดำ + เรืองทอง (ตาม file#6319) */
.u2-tab-orb {
  width: 70px; height: 70px; border-radius: 50%; display: grid !important; place-items: center;
  background: radial-gradient(circle at 34% 28%, #FFFBE6 0%, #FFF0B8 14%, #F6D77E 38%, #E3B64E 66%, #C8962F 88%, #B07E22 100%);
  border: 3px solid #0B0906;
  box-shadow: 0 0 0 1.5px #E9C463, 0 0 16px 3px rgba(255, 210, 100, .55), inset 0 -5px 10px rgba(150, 100, 20, .45), inset 0 3px 6px rgba(255, 255, 240, .7);
}
.u2-tab .u2-tab-orb { margin: -35px 0 -2px; position: relative; z-index: 1; }
.u2-tab-orb svg { width: 32px; height: 32px; fill: none; stroke: #1A1208; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u2-tab .u2-tab-mid > span:last-child {
  padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: #1A1208 !important;
  background: linear-gradient(180deg, #FFF3C4 0%, #F7D982 35%, #E2B653 70%, #C08B2C 100%);
  box-shadow: 0 0 10px rgba(255, 210, 100, .5), inset 0 1px 0 rgba(255, 255, 240, .8);
}
#u2-promo { scroll-margin-top: 76px; }

@media (prefers-reduced-motion: reduce) { .u2-cat, .u2-cv button { transition: none; } }

/* ===== sheet (bootstrap modal) : เข้าสู่ระบบ / สมัคร / โปร ===== */
.modal-backdrop { background-color: #000; }
.modal-backdrop.show { opacity: .72; }
.u2-sheet { font-family: 'Kanit', sans-serif; line-height: 1.4; }
.u2-sheet .modal-dialog { max-width: 440px; width: 100%; min-height: 100%; margin: 0 auto; display: flex; align-items: flex-end; }
.u2-sheet.fade .modal-dialog { transform: translateY(100%); transition: transform .36s cubic-bezier(.22, 1, .36, 1); }
.u2-sheet.show .modal-dialog { transform: none; }
.u2-sheet .modal-dialog.is-dragging { transition: none; }
.u2-sheet .modal-content {
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 0 calc(18px + env(safe-area-inset-bottom)); border: 1px solid var(--u2-line); border-bottom: 0; border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #16130F 0%, #0B0A08 100%); color: var(--u2-ink);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .8);
}
.u2-sheet .ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u2-grip { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: rgba(236, 198, 110, .45); }
.u2-x {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(236, 198, 110, .55); color: #F5D68C;
}
.u2-x .ic { width: 16px; height: 16px; }

/* หัว sheet เข้าสู่ระบบ */
.u2-lg-hd {
  position: relative; overflow: hidden; padding: 10px 20px 30px; text-align: center; touch-action: none;
  background: radial-gradient(90% 120% at 50% -30%, rgba(245, 197, 66, .28), rgba(245, 197, 66, 0) 60%), linear-gradient(180deg, #221C12 0%, #100E0A 100%);
  border-radius: 20px 20px 0 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-hd > .u2-x { position: absolute; z-index: 2; }
.u2-lg-logo { display: block; height: auto; max-height: 42px; width: auto; max-width: 220px; margin: 0 auto; }
.u2-lg-ttl {
  margin: 8px 0 0; font-family: 'Kanit', sans-serif; font-size: 28px; font-weight: 600; line-height: 1.2;
  background: var(--u2-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.u2-lg-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--u2-ink2); }

/* ฟอร์ม */
.u2-lg-form { position: relative; z-index: 1; display: grid; gap: 12px; margin: -14px 0 0; padding: 22px 16px 0; background: #0E0C0A; border-radius: 18px 18px 0 0; border-top: 1px solid rgba(214, 172, 82, .25); }
.u2-fl {
  position: relative; display: flex; align-items: center; gap: 10px; height: 58px; margin: 0; padding: 0 14px;
  background: #1A1713; border: 1.5px solid rgba(214, 172, 82, .35); border-radius: 14px; transition: border-color .15s, box-shadow .15s;
  color: var(--u2-gold);
}
.u2-fl:focus-within { border-color: var(--u2-gold); box-shadow: 0 0 0 3px rgba(226, 185, 85, .18); }
.u2-fl input {
  flex: 1; min-width: 0; height: 100%; padding: 18px 0 2px; border: 0; outline: 0; background: transparent;
  font-family: 'Kanit', sans-serif; font-size: 16px; color: var(--u2-ink);
}
.u2-fl input:-webkit-autofill { -webkit-text-fill-color: var(--u2-ink); -webkit-box-shadow: 0 0 0 40px #1A1713 inset; caret-color: var(--u2-ink); }
.u2-fl > span {
  position: absolute; left: 46px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-size: 15px; color: var(--u2-ink2); transition: top .15s, font-size .15s, color .15s;
}
.u2-fl input:focus + span, .u2-fl input:not(:placeholder-shown) + span { top: 14px; font-size: 11.5px; color: var(--u2-gold); }
.u2-eye { flex: none; display: flex; padding: 6px; border: 0; background: none; color: var(--u2-ink2); cursor: pointer; }
.u2-eye[aria-pressed="true"] { color: var(--u2-gold); }

.u2-sbtn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; cursor: pointer;
  font-family: 'Kanit', sans-serif; font-weight: 600; text-decoration: none !important; transition: transform .15s, filter .15s;
}
.u2-sbtn:active { transform: scale(.97); }
.u2-sbtn-gold, .u2-app button.u2-sbtn-gold {
  border: 1px solid #F6DB8E; color: #1A1208 !important; background: var(--u2-goldgrad);
  box-shadow: 0 0 16px rgba(240, 190, 80, .25), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 4px rgba(140,90,10,.35);
}
.u2-sbtn-ghost {
  border: 1px solid rgba(226, 185, 85, .75); color: #F7DE8E !important; background: linear-gradient(180deg, #221D15 0%, #14110D 100%);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .1);
}
.u2-lg-submit { height: 54px; margin-top: 2px; font-size: 18px; }
.u2-lg-alt { height: 50px; font-size: 17px; font-weight: 500; }
.u2-lg-spin { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(26,18,8,.3); border-top-color: #1A1208; 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); }
@keyframes u2-spin { to { transform: rotate(360deg); } }
.u2-lg-link { justify-self: center; padding: 4px 8px; font-size: 14px; color: var(--u2-ink2) !important; text-decoration: none !important; }
.u2-lg-link b { font-weight: 600; color: var(--u2-gold); }
.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(214, 172, 82, .3); }
button.u2-lg-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font-family: 'Kanit', sans-serif; }

/* ฟอร์มสมัคร (แบบ ufamv): ขั้น 1 → ยืนยันอายุ → ขั้น 2 ธนาคาร */
.u2-fl.is-invalid { border-color: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18); }
.u2-fl-ok { flex: none; display: flex; color: #3DD68C; 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: rgba(229, 72, 77, .12); border: 1px solid rgba(229, 72, 77, .55); color: #FFB4B0; font-size: 14px; line-height: 1.45;
}
.u2-lg-err.is-show { display: flex; }
.u2-lg-err .ic { width: 20px; height: 20px; }
.u2-lg-form.is-shake { animation: u2-shake .4s; }
@keyframes u2-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.u2-rg-steps { display: flex; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.u2-rg-steps li { position: relative; flex: 1; padding-top: 8px; font-size: 12.5px; color: var(--u2-ink2); }
.u2-rg-steps li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgba(214, 172, 82, .25); 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); }
#u2-rg .u2-rg-panel { display: none; gap: 12px; }
#u2-rg[data-step="1"] [data-panel="1"], #u2-rg[data-step="age"] [data-panel="age"], #u2-rg[data-step="2"] [data-panel="2"] { display: grid; }
#u2-rg [data-show] { display: none; }
#u2-rg[data-step="1"] [data-show~="1"], #u2-rg[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: #1A1713; 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 { margin: 0; font-size: 18px; font-weight: 600; color: var(--u2-ink); }
.u2-rg-age-txt { margin: -6px 0 0; font-size: 14px; color: var(--u2-ink2); }
.u2-rg-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--u2-ink); }
.u2-rg-note { margin: -4px 0 0; 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: 210px; overflow-y: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: rgba(214, 172, 82, .5) transparent; }
.u2-rg-bank {
  position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px;
  background: #1A1713; border: 1.5px solid rgba(214, 172, 82, .25); 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(226, 185, 85, .7); }
.u2-rg-bank.is-on { border-color: var(--u2-gold); background: rgba(217, 169, 63, .14); 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); }
@media (prefers-reduced-motion: reduce) { .u2-lg-form.is-shake { animation: none; } }

/* sheet โปร */
.u2-pro-hd {
  position: sticky; top: 0; z-index: 2; height: 44px; padding-top: 10px; touch-action: none; text-align: center;
  background: #16130F; border-radius: 20px 20px 0 0; border-bottom: 1px solid rgba(214, 172, 82, .2);
}
.u2-pro-hd .u2-grip { margin-bottom: 0; }
.u2-pro-hd .u2-x { top: 6px; }
.u2-pro .modal-content { padding-left: 16px; padding-right: 16px; }
.u2-pro .u2-pro-hd { margin: 0 -16px; }
.u2-pro-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-top: 12px; border-radius: 14px; border: 1px solid var(--u2-line); }
.u2-pro-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.u2-pro-cta .u2-sbtn { height: 48px; font-size: 16px; }

/* ===== หน้า payment (แจ้งฝาก/ถอน/ขอเลขบัญชี) + affiliate : .u2-page ===== */
body.u2 [hidden] { display: none !important; }
.u2-page .ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u2-pg-hd { margin: 18px 12px 0; text-align: center; }
.u2-app .u2-pg-hd h1 {
  font-size: 30px; font-weight: 700; line-height: 1.15;
  background: var(--u2-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.u2-app .u2-pg-hd h1 span { color: var(--u2-gold-lo); -webkit-text-fill-color: var(--u2-gold-lo); font-weight: 400; }
.u2-app .u2-pg-hd p { margin-top: 6px; font-size: 14px; color: var(--u2-ink2); }
.u2-app .u2-pg-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--u2-gold); border: 1px solid var(--u2-line); background: rgba(226, 185, 85, .08);
}

/* แท็บ segmented */
.u2-seg {
  position: sticky; top: 61px; z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin: 16px 12px 0; padding: 4px; border-radius: 14px; background: #14110D; border: 1px solid rgba(214, 172, 82, .3);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
}
.u2-app .u2-seg button {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--u2-ink2); transition: background .2s, color .2s;
}
.u2-app .u2-seg button i { font-size: 14px; }
.u2-app .u2-seg button.is-on { background: var(--u2-goldgrad); color: #1A1208; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 12px rgba(240, 190, 80, .25); }

/* การ์ดฟอร์ม */
.u2-card {
  margin: 12px 12px 0; padding: 16px; border-radius: 18px; border: 1px solid rgba(214, 172, 82, .3);
  background: linear-gradient(180deg, #16130F 0%, #0E0C0A 100%); box-shadow: var(--u2-shadow);
}
.u2-pay { scroll-margin-top: 120px; }
.u2-pay-form { display: grid; gap: 12px; }
.u2-pay-form.is-shake { animation: u2-shake .4s; }
.u2-pay-form.is-loading .u2-lg-spin { display: inline-block; }
.u2-pay-form.is-loading .u2-lg-submit { pointer-events: none; filter: saturate(.8); }
.u2-app .u2-pay-lead { font-size: 14px; line-height: 1.5; color: var(--u2-ink2); }
.u2-app .u2-pay-hint { text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--u2-ink2); }
.u2-app .u2-pay-hint button, .u2-app .u2-pay-hint a { color: var(--u2-gold) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.u2-app .u2-pay-help { margin: 16px 12px 0; text-align: center; font-size: 14px; color: var(--u2-ink2); }
.u2-app .u2-pay-help a { color: #F7DE8E !important; font-weight: 500; }
.u2-app .u2-pay-help a i { color: #06C755; }

/* ช่องกรอก: select + 2 คอลัมน์ */
.u2-fl select {
  flex: 1; min-width: 0; height: 100%; padding: 18px 0 2px; border: 0; outline: 0; background: transparent;
  font-family: 'Kanit', sans-serif; font-size: 16px; color: var(--u2-ink); -webkit-appearance: none; appearance: none;
}
.u2-fl select option { background: #1A1713; color: var(--u2-ink); }
.u2-fl-sel::after { content: '\f078'; font: 900 12px 'Font Awesome 6 Free'; color: var(--u2-gold); pointer-events: none; }
.u2-fl-sel > span { top: 14px; font-size: 11.5px; color: var(--u2-gold); }
.u2-fl input[type=time] { color-scheme: dark; }
.u2-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.u2-row2 .u2-fl { padding: 0 10px; gap: 8px; }
.u2-row2 .u2-fl > span { left: 40px; }
.u2-noslip { display: grid; gap: 12px; }

/* แนบสลิป */
.u2-slip { position: relative; }
.u2-slip-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.u2-slip-drop {
  display: grid; place-items: center; min-height: 128px; padding: 14px; margin: 0; border-radius: 14px; cursor: pointer; text-align: center;
  border: 1.5px dashed rgba(226, 185, 85, .6); background: rgba(226, 185, 85, .05); transition: border-color .15s, background .15s;
}
.u2-slip-drop:active { background: rgba(226, 185, 85, .1); }
.u2-slip-input:focus-visible + .u2-slip-drop { border-color: var(--u2-gold); box-shadow: 0 0 0 3px rgba(226, 185, 85, .18); }
.u2-slip.is-invalid .u2-slip-drop { border-color: #E5484D; }
.u2-app .u2-slip-empty { display: grid; justify-items: center; gap: 4px; }
.u2-app .u2-slip-empty i { font-size: 30px; color: var(--u2-gold); }
.u2-app .u2-slip-empty b { font-size: 16px; font-weight: 600; color: var(--u2-ink); }
.u2-app .u2-slip-empty small { font-size: 12.5px; color: var(--u2-ink2); }
.u2-slip.has-file .u2-slip-empty { display: none; }
.u2-app .u2-slip-prev { max-height: 260px; width: auto; border-radius: 10px; }

/* สวิตช์ */
.u2-switch { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--u2-ink); cursor: pointer; }
.u2-switch input { position: absolute; opacity: 0; pointer-events: none; }
.u2-switch-ui { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #2A251D; border: 1px solid rgba(214, 172, 82, .4); transition: background .2s; }
.u2-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8C7F68; transition: transform .2s, background .2s; }
.u2-switch input:checked + .u2-switch-ui { background: rgba(226, 185, 85, .3); border-color: var(--u2-gold); }
.u2-switch input:checked + .u2-switch-ui::after { transform: translateX(18px); background: var(--u2-goldgrad); }
.u2-switch input:focus-visible + .u2-switch-ui { box-shadow: 0 0 0 3px rgba(226, 185, 85, .25); }

/* เลือกโปรโมชั่น */
.u2-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.u2-choice legend { float: none; width: auto; margin: 0 0 6px; padding: 0; font-size: 13px; color: var(--u2-ink2); }
.u2-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.u2-choice label { margin: 0; cursor: pointer; }
.u2-choice input { position: absolute; opacity: 0; pointer-events: none; }
.u2-choice span {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 12px; font-size: 15px;
  border: 1.5px solid rgba(214, 172, 82, .35); background: #1A1713; color: var(--u2-ink2); transition: all .15s;
}
.u2-choice input:checked + span { border-color: var(--u2-gold); background: rgba(217, 169, 63, .14); color: #F7DE8E; font-weight: 600; box-shadow: 0 0 0 3px rgba(217, 169, 63, .15); }
.u2-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(226, 185, 85, .35); }

/* captcha */
.u2-cap { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 8px; }
.u2-app .u2-cap-img {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 58px; padding: 0 8px; border-radius: 14px;
  background: #F4ECD8; border: 1.5px solid rgba(214, 172, 82, .6); color: #6B4E16;
}
.u2-app .u2-cap-img img { width: 96px; height: auto; border-radius: 6px; }
.u2-app .u2-cap-img i { font-size: 15px; }

/* แจ้งเตือน */
.u2-alert {
  display: flex; gap: 10px; margin-bottom: 12px; padding: 12px; border-radius: 12px;
  background: rgba(229, 72, 77, .12); border: 1px solid rgba(229, 72, 77, .55); color: #FFB4B0; font-size: 14px; line-height: 1.5;
}
.u2-alert .ic { width: 20px; height: 20px; margin-top: 1px; }
.u2-app .u2-alert b { display: block; margin-bottom: 2px; color: #FFD2CF; font-weight: 600; line-height: 1.5; }
.u2-app .u2-alert ul { margin: 0; padding-left: 18px; }
.u2-app .u2-alert li { line-height: 1.5; }

/* เตือนช่วงเวลาถอน */
.u2-warn { display: grid; justify-items: center; gap: 8px; text-align: center; }
.u2-warn-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(245, 166, 35, .14); border: 1px solid rgba(245, 166, 35, .6); color: #F5A623; font-size: 22px; }
.u2-app .u2-warn h2 { font-size: 18px; font-weight: 600; color: #FFD58A; line-height: 1.35; }
.u2-warn-txt { font-size: 14px; line-height: 1.6; color: var(--u2-ink2); }
.u2-warn-txt p { margin: 0 0 6px; }
.u2-warn .u2-sbtn { margin-top: 4px; }

/* ผลขอเลขบัญชี */
.u2-acc { display: grid; gap: 10px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px dashed rgba(214, 172, 82, .3); }
.u2-app .u2-acc-ttl { font-size: 15px; font-weight: 600; color: #3DD68C; }
.u2-acc-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #1A1713; border: 1px solid rgba(214, 172, 82, .4); }
.u2-acc-item > div { display: grid; gap: 2px; min-width: 0; }
.u2-app .u2-acc-item small { font-size: 12.5px; color: var(--u2-ink2); }
.u2-app .u2-acc-item b { font-size: 20px; font-weight: 700; letter-spacing: .04em; color: #F7DE8E; }
.u2-app .u2-acc-item span { font-size: 13.5px; color: var(--u2-ink); }
.u2-app .u2-copy { flex: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; border: 1px solid var(--u2-gold); color: #F7DE8E; }
.u2-app .u2-copy.is-done { border-color: #3DD68C; color: #3DD68C; }

/* ส่งรายการสำเร็จ */
.u2-done { display: grid; justify-items: center; gap: 6px; text-align: center; border-color: rgba(61, 214, 140, .45); }
.u2-done-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(61, 214, 140, .15); border: 1px solid rgba(61, 214, 140, .6); color: #3DD68C; font-size: 24px; }
.u2-app .u2-done h2 { font-size: 20px; font-weight: 600; color: var(--u2-ink); }
.u2-app .u2-done p { font-size: 14px; color: var(--u2-ink2); }
.u2-done-list { width: 100%; margin: 6px 0 4px; padding: 10px 14px; border-radius: 12px; background: #1A1713; }
.u2-done-list div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; }
.u2-done-list div + div { border-top: 1px solid rgba(214, 172, 82, .15); }
.u2-done-list dt { font-weight: 400; color: var(--u2-ink2); }
.u2-done-list dd { margin: 0; font-weight: 600; color: var(--u2-ink); }
.u2-done-btn { height: 46px; font-size: 15px; }

/* affiliate: ขั้นตอน */
.u2-aff-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.u2-aff-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--u2-card); border: 1px solid rgba(214, 172, 82, .25); }
.u2-app .u2-aff-steps li > span { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(226, 185, 85, .1); color: var(--u2-gold); font-size: 18px; }
.u2-app .u2-aff-steps b { font-size: 15.5px; font-weight: 600; color: var(--u2-ink); }
.u2-app .u2-aff-steps small { font-size: 13px; color: var(--u2-ink2); }
@media (prefers-reduced-motion: reduce) { .u2-pay-form.is-shake { animation: none; } }