/* หน้าเบอร์รับ OTP (/otp) */
.otp-hero { position: relative; overflow: hidden; padding: 26px 28px; border-radius: 24px; color: #fff; background: radial-gradient(80% 120% at 100% 0%, rgba(255,71,87,.35), transparent 60%), linear-gradient(135deg, #1a0508, #5c0b16 55%, #b3132a); box-shadow: 0 18px 40px -20px rgba(127,16,32,.6); }
.otp-hero h1 { font-size: 1.8rem; font-weight: 800; line-height: 1.2; }
.otp-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ffd1d6, #ff8a96); -webkit-background-clip: text; background-clip: text; color: transparent; }
.otp-hero p { margin-top: 6px; max-width: 520px; font-size: .9rem; opacity: .82; }
.otp-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.otp-steps span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: .78rem; font-weight: 700; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.otp-steps b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .66rem; background: #fff; color: #b3132a; }
.otp-hero .otp-ic { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); width: 92px; height: 92px; border-radius: 26px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.otp-hero .otp-ic svg { width: 44px; height: 44px; }

.otp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; margin-top: 16px; align-items: start; }
.otp-card { padding: 16px; border-radius: 22px; background: #fff; border: 1px solid #f0f0f3; box-shadow: 0 10px 30px -22px rgba(16,24,40,.25); }
.otp-card h2 { display: flex; align-items: center; gap: 8px; font-size: .98rem; font-weight: 800; }
.otp-card h2 > svg { width: 18px; height: 18px; color: #e11d2e; }
.otp-card h2 small { margin-left: auto; font-size: .74rem; font-weight: 600; color: #a1a1aa; }
.otp-q { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 0 12px; height: 42px; border-radius: 12px; background: #f6f6f8; border: 1px solid #ececf0; }
.otp-q svg { width: 16px; height: 16px; color: #a1a1aa; } .otp-q input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: .88rem; outline: none; }
.otp-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; max-height: 470px; overflow-y: auto; padding: 2px; }
.otp-svc { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 16px; border: 1.5px solid #f0f0f3; background: #fff; cursor: pointer; font: inherit; text-align: center; transition: .15s; }
.otp-svc:hover { border-color: #fecdd3; transform: translateY(-2px); }
.otp-svc.on { border-color: #e11d2e; background: #fff5f6; box-shadow: 0 8px 20px -12px rgba(225,29,46,.5); }
.otp-svc.on::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: #fff; background: #e11d2e; }
.otp-logo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.1rem; box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); overflow: hidden; }
.otp-logo > svg { width: 52%; height: 52%; }
.otp-logo { background: var(--c, #e11d2e); }
.otp-logo.is-img { background: #fff; box-shadow: 0 0 0 1px #f0f0f3, 0 6px 14px -8px rgba(0,0,0,.25); }
.otp-logo.is-img img { width: 100%; height: 100%; object-fit: cover; }
.otp-logo img { width: 58%; height: 58%; object-fit: contain; }
.otp-svc b { font-size: .8rem; line-height: 1.25; } .otp-svc small { font-size: .72rem; font-weight: 700; color: #e11d2e; }

.otp-side { position: sticky; top: 90px; display: grid; gap: 12px; }
.otp-sel { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #fafafa; border: 1px solid #f0f0f3; }
.otp-sel b { display: block; font-size: .9rem; } .otp-sel small { font-size: .74rem; color: #71717a; }
.otp-cts { display: grid; gap: 6px; max-height: 330px; overflow-y: auto; margin-top: 10px; padding-right: 2px; }
.otp-ct { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1.5px solid #f0f0f3; background: #fff; cursor: pointer; font: inherit; text-align: left; transition: .15s; }
.otp-ct:hover { border-color: #fecdd3; } .otp-ct.on { border-color: #e11d2e; background: #fff5f6; }
.otp-ct .fl { width: 28px; height: 20px; flex: none; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.on-top small .fl { display: inline-block; width: 16px; height: 11px; object-fit: cover; border-radius: 2px; vertical-align: -1px; } .otp-ct > span { flex: 1; min-width: 0; }
.otp-ct b { display: block; font-size: .84rem; } .otp-ct small { font-size: .7rem; color: #a1a1aa; }
.otp-ct strong { font-size: .9rem; font-weight: 800; color: #18181b; } .otp-ct.out { opacity: .45; pointer-events: none; }
.otp-pay { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px dashed #e4e4e7; }
.otp-pay > div { flex: 1; } .otp-pay small { display: block; font-size: .72rem; color: #71717a; } .otp-pay b { font-size: 1.4rem; font-weight: 800; }
.otp-buy { height: 46px; padding: 0 18px; border: 0; border-radius: 14px; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff4757, #c8102e); box-shadow: 0 10px 22px -10px rgba(225,29,46,.7); cursor: pointer; }
.otp-buy:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } .otp-buy svg { width: 18px; height: 18px; }
.otp-note { display: flex; gap: 6px; font-size: .72rem; color: #71717a; line-height: 1.5; } .otp-note svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: #16a34a; }

/* เบอร์ของฉัน */
.otp-mine { margin-top: 16px; }
.otp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.otp-num { position: relative; overflow: hidden; display: grid; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid #f0f0f3; background: #fff; }
.otp-num::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: #f59e0b; }
.otp-num.ok::before { background: #16a34a; } .otp-num.end::before { background: #d4d4d8; }
.on-top { display: flex; align-items: center; gap: 10px; }
.on-top .otp-logo { width: 38px; height: 38px; border-radius: 11px; font-size: .9rem; }
.on-top > div { flex: 1; min-width: 0; } .on-top b { display: block; font-size: .86rem; } .on-top small { font-size: .72rem; color: #71717a; }
.on-st { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: .7rem; font-weight: 800; color: #b45309; background: #fffbeb; }
.on-st.ok { color: #15803d; background: #f0fdf4; } .on-st.end { color: #71717a; background: #f4f4f5; } .on-st svg { width: 12px; height: 12px; }
.on-phone { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fafafa; border: 1px solid #f0f0f3; }
.on-phone span { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 1.12rem; font-weight: 700; letter-spacing: .5px; }
.on-cp { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 9px; border: 1px solid #e4e4e7; background: #fff; font: inherit; font-size: .72rem; font-weight: 700; color: #52525b; cursor: pointer; }
.on-cp:hover { color: #e11d2e; border-color: #fecdd3; } .on-cp svg { width: 13px; height: 13px; }
.on-wait { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #fffbeb; border: 1px dashed #fcd34d; }
.on-ring { --p: 100; position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#f59e0b calc(var(--p) * 1%), #fde68a 0); }
.on-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fffbeb; }
.on-ring b { position: relative; font-size: .68rem; font-weight: 800; color: #b45309; }
.on-wait p { font-size: .8rem; color: #92400e; } .on-wait p small { display: block; font-size: .7rem; color: #b45309; opacity: .8; }
.on-dots i { display: inline-block; width: 5px; height: 5px; margin-left: 2px; border-radius: 50%; background: #f59e0b; animation: on-dot 1.2s infinite; }
.on-dots i:nth-child(2) { animation-delay: .2s; } .on-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes on-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.on-code { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #86efac; animation: on-pop .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes on-pop { from { transform: scale(.94); opacity: 0; } }
.on-code > div { flex: 1; } .on-code small { display: block; font-size: .7rem; font-weight: 700; color: #15803d; }
.on-code strong { font-family: ui-monospace, Consolas, monospace; font-size: 1.7rem; font-weight: 800; letter-spacing: 6px; color: #14532d; }
.on-code p { margin-top: 2px; font-size: .72rem; color: #166534; overflow-wrap: anywhere; }
.on-act { display: flex; gap: 6px; } .on-act button { flex: 1; height: 36px; border-radius: 10px; border: 1px solid #e4e4e7; background: #fff; font: inherit; font-size: .76rem; font-weight: 700; color: #3f3f46; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.on-act button svg { width: 14px; height: 14px; } .on-act .dn { border: 0; color: #fff; background: #16a34a; } .on-act .cx:hover { color: #dc2626; border-color: #fecaca; }
.on-end { font-size: .76rem; color: #71717a; }
.otp-empty { padding: 26px; text-align: center; color: #a1a1aa; font-size: .86rem; }

/* ===== ลูกเล่น ===== */
/* พื้นหลังหัวหน้า: ตารางเส้น + ก้อนสีเคลื่อนไหว + รหัสลอยขึ้น + แสงกวาด */
.otp-hero > *:not(.otp-bg) { position: relative; z-index: 1; }
.otp-hero > .otp-stage { position: absolute; }
.otp-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.otp-bg::before { content: ''; position: absolute; inset: -40px; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse 70% 90% at 75% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 75% 50%, #000 20%, transparent 75%); animation: bg-pan 18s linear infinite; }
@keyframes bg-pan { to { transform: translate(34px, 34px); } }
.otp-bg::after { content: ''; position: absolute; top: -50%; left: -30%; width: 30%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); transform: rotate(20deg); animation: bg-sweep 7s ease-in-out infinite; }
@keyframes bg-sweep { 0%, 30% { left: -30%; } 70%, 100% { left: 120%; } }
.blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; animation: bg-blob 14s ease-in-out infinite alternate; }
.blob.b1 { width: 260px; height: 260px; left: -60px; top: -90px; background: #ff4757; }
.blob.b2 { width: 220px; height: 220px; right: 18%; bottom: -110px; background: #7c3aed; opacity: .4; animation-duration: 18s; }
.blob.b3 { width: 180px; height: 180px; right: -40px; top: -60px; background: #f97316; opacity: .35; animation-duration: 11s; }
@keyframes bg-blob { 50% { transform: translate(40px, 25px) scale(1.15); } 100% { transform: translate(-20px, 35px) scale(.9); } }
.fcode { position: absolute; bottom: -20px; font-family: ui-monospace, Consolas, monospace; font-weight: 800; letter-spacing: 3px; color: rgba(255,255,255,.14); animation: bg-rise linear forwards; white-space: nowrap; }
@keyframes bg-rise { 10% { opacity: 1; } to { transform: translateY(-300px); opacity: 0; } }
.otp-bg .spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: bg-tw 3s ease-in-out infinite; }
@keyframes bg-tw { 50% { opacity: .1; transform: scale(.4); } }

/* หัวหน้า: มือถือจำลอง + SMS เด้งเข้า + ไอคอนแอพโคจรรอบ */
.otp-hero { min-height: 250px; }
.otp-stage { position: absolute; right: 4%; top: 50%; width: 300px; height: 300px; transform: translateY(-50%) scale(.82); pointer-events: none; }
.otp-stage::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255,90,106,.55), transparent 70%); filter: blur(10px); animation: st-pulse 3s ease-in-out infinite; }
@keyframes st-pulse { 50% { transform: scale(1.15); opacity: .7; } }
.st-orb { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px dashed rgba(255,255,255,.18); animation: st-spin 26s linear infinite; }
.st-orb.st-o1 { width: 210px; height: 210px; } .st-orb.st-o2 { width: 268px; height: 268px; animation-duration: 40s; animation-direction: reverse; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.sat .otp-logo { position: absolute; width: 38px; height: 38px; margin: -19px; border-radius: 12px; box-shadow: 0 8px 18px -6px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.15); animation: st-spin 26s linear infinite reverse; }
.st-o2 .sat .otp-logo { width: 32px; height: 32px; margin: -16px; border-radius: 10px; animation-duration: 40s; animation-direction: normal; }
.phone { position: absolute; left: 50%; top: 50%; width: 112px; height: 196px; margin: -98px 0 0 -56px; padding: 22px 7px 10px; border-radius: 22px; background: linear-gradient(160deg, #2a2f3a, #0d1017); border: 2px solid rgba(255,255,255,.22); box-shadow: 0 20px 40px -12px rgba(0,0,0,.7), inset 0 0 0 3px #000; transform: rotate(-6deg); animation: st-float 5s ease-in-out infinite; overflow: hidden; }
.phone::before { content: ''; position: absolute; top: 7px; left: 50%; width: 34px; height: 7px; margin-left: -17px; border-radius: 9px; background: #000; }
@keyframes st-float { 50% { transform: rotate(-3deg) translateY(-8px); } }
.ph-time { text-align: center; font-size: .9rem; font-weight: 800; color: #fff; letter-spacing: 1px; }
.ph-date { text-align: center; font-size: .48rem; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.ph-msgs { display: grid; gap: 5px; }
.ph-msg:first-child { box-shadow: 0 0 0 1.5px #4ade80, 0 4px 12px -4px rgba(74,222,128,.7); }
.ph-msg:nth-child(3) { opacity: .55; }
.ph-msg { display: flex; gap: 5px; padding: 6px; border-radius: 9px; background: rgba(255,255,255,.92); box-shadow: 0 4px 10px -4px rgba(0,0,0,.5); animation: ph-in .5s cubic-bezier(.2,1.3,.4,1); }
.ph-msg .otp-logo { width: 18px; height: 18px; flex: none; border-radius: 5px; box-shadow: none; font-size: .55rem; }
.ph-msg div { min-width: 0; } .ph-msg b { display: block; font-size: .5rem; color: #18181b; } .ph-msg small { display: block; font-size: .46rem; color: #52525b; line-height: 1.3; }
.ph-msg small em { font-style: normal; font-weight: 800; color: #16a34a; letter-spacing: 1px; }
@keyframes ph-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } }.otp-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .78rem; opacity: .9; }
.otp-live i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: of-ping 1.6s infinite; }
.otp-live b { font-variant-numeric: tabular-nums; }
@keyframes of-ping { 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
/* การ์ดบริการ: เด้งขึ้นทีละใบ + เรืองแสงสีแบรนด์ + ไอคอนส่าย */
.otp-svc { animation: of-in .45s cubic-bezier(.2,1.2,.4,1) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes of-in { from { opacity: 0; transform: translateY(12px) scale(.94); } }
.otp-svc:hover { border-color: color-mix(in srgb, var(--c) 45%, #fff); box-shadow: 0 12px 26px -14px var(--c); }
.otp-svc:hover .otp-logo { animation: of-wig .5s ease; }
@keyframes of-wig { 25% { transform: rotate(-10deg) scale(1.08); } 75% { transform: rotate(8deg) scale(1.08); } }
.otp-svc.on .otp-logo { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--c); }
.otp-ct { animation: of-slide .35s ease backwards; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes of-slide { from { opacity: 0; transform: translateX(14px); } }
/* ปุ่มรับเบอร์: แสงวิ่ง */
.otp-buy { position: relative; overflow: hidden; }
.otp-buy:not(:disabled)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-100%); animation: of-shine 2.4s infinite; }
@keyframes of-shine { 60%, 100% { transform: translateX(100%); } }
.otp-pay b { display: inline-block; } .otp-pay b.bump { animation: of-bump .35s ease; }
@keyframes of-bump { 40% { transform: scale(1.15); color: #e11d2e; } }
/* เบอร์ใหม่: หมุนแบบสล็อต · รหัส: เด้งทีละตัว + พลุ */
.otp-num.new { animation: on-pop .5s cubic-bezier(.2,1.4,.4,1); }
.slot { display: inline-block; height: 1.3em; overflow: hidden; vertical-align: bottom; }
.slot > span { display: block; animation: of-roll .9s cubic-bezier(.2,.9,.3,1) backwards; animation-delay: calc(var(--i) * 45ms); }
.slot > span > i { display: block; height: 1.3em; font-style: normal; }
@keyframes of-roll { from { transform: translateY(calc(-1.3em * 9)); } }
.on-code strong span { display: inline-block; animation: of-dig .45s cubic-bezier(.2,1.6,.4,1) backwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes of-dig { from { opacity: 0; transform: translateY(-14px) scale(.6); } }
.on-code { position: relative; }
.boom { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; animation: of-boom .9s cubic-bezier(.1,.8,.3,1) forwards; }
@keyframes of-boom { to { transform: translate(var(--x), var(--y)) rotate(540deg); opacity: 0; } }

/* ===== เบอร์ของฉัน (แท็บ + การ์ดซิม + ประวัติ) ===== */
.otp-mine h2 small { margin-left: auto; }
.mn-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f4f4f5; }
.mn-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: .78rem; font-weight: 700; color: #71717a; cursor: pointer; }
.mn-tabs button.on { background: #fff; color: #18181b; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.mn-tabs em { min-width: 18px; padding: 0 6px; border-radius: 99px; font-style: normal; font-size: .68rem; line-height: 18px; color: #fff; background: #a1a1aa; }
.mn-tabs .on em { background: #e11d2e; }
.sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-top: 14px; }
.sim { --c: #e11d2e; position: relative; overflow: hidden; display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid #ececf0; box-shadow: 0 14px 30px -22px rgba(16,24,40,.35); }

.sim.new { animation: on-pop .5s cubic-bezier(.2,1.4,.4,1); }
.sim-chip { position: absolute; right: 16px; top: 64px; width: 34px; height: 26px; border-radius: 6px; opacity: .55; background: linear-gradient(135deg, #fde68a, #d4a017); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  background-image: linear-gradient(90deg, transparent 45%, rgba(0,0,0,.18) 45% 55%, transparent 55%), linear-gradient(transparent 45%, rgba(0,0,0,.18) 45% 55%, transparent 55%), linear-gradient(135deg, #fde68a, #d4a017); }
.sim header { display: flex; align-items: center; gap: 10px; }
.sim header .otp-logo { width: 40px; height: 40px; border-radius: 12px; }
.sim header > div { flex: 1; min-width: 0; } .sim header b { display: block; font-size: .92rem; }
.sim header small { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: #71717a; } .sim header .fl { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; }
.sim-st { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; font-size: .7rem; font-weight: 800; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; }
.sim-st svg { width: 13px; height: 13px; } .is-ok .sim-st { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.is-wait .sim-st svg { animation: bg-tw 1.4s infinite; }
.sim-num small { font-size: .68rem; font-weight: 700; letter-spacing: .5px; color: #a1a1aa; }
.sim-num > div { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding-right: 44px; }
.sim-num span { font-family: ui-monospace, Consolas, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: 1px; color: #18181b; }
.sim-cp { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 9px; border: 1px solid #e4e4e7; background: #fff; font: inherit; font-size: .72rem; font-weight: 700; color: #52525b; cursor: pointer; transition: .15s; }
.sim-cp:hover { color: var(--c); border-color: color-mix(in srgb, var(--c) 40%, #fff); } .sim-cp svg { width: 14px; height: 14px; }
/* รอ SMS: เรดาร์ + เวลา + แถบหด */
.sim-wait { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #fafafa; border: 1px solid #f0f0f3; }
.sim-wait > div { flex: 1; min-width: 0; } .sim-wait b { display: block; font-size: .84rem; } .sim-wait small { font-size: .72rem; color: #71717a; }
.radar { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.radar > i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: rd-ping 2.4s ease-out infinite; }
.radar > i:nth-child(2) { animation-delay: .8s; } .radar > i:nth-child(3) { animation-delay: 1.6s; }
@keyframes rd-ping { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
.radar b { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 6px 14px -6px var(--c); }
.radar b svg { width: 15px; height: 15px; }
.sim-left { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; font-weight: 800; color: #18181b; font-variant-numeric: tabular-nums; } .sim-left.low { color: #dc2626; animation: bg-tw 1s infinite; }
.sim-bar { height: 4px; margin-top: -6px; border-radius: 99px; background: #f4f4f5; overflow: hidden; }
.sim-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 50%, #fff)); transition: width 1s linear; }
/* ได้รหัส: ช่อง OTP 6 ช่อง + บับเบิล SMS */
.sim-otp { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid #bbf7d0; border-radius: 14px; background: #f0fdf4; cursor: pointer; font: inherit; text-align: left; transition: .15s; }
.sim-otp:hover { border-color: #86efac; } .sim-otp:active { transform: scale(.99); }
.so-top { flex: 1; min-width: 0; display: grid; gap: 2px; }
.so-top small { font-size: .7rem; font-weight: 700; color: #16a34a; }
.so-code { display: flex; align-items: center; gap: 2px; }
.so-code span { font-family: ui-monospace, Consolas, monospace; font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: #14532d; animation: of-dig .4s ease backwards; animation-delay: calc(var(--i) * 50ms); }
.so-code em { width: 10px; }
.so-cp { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #fff; border: 1px solid #bbf7d0; color: #16a34a; }
.so-cp svg { width: 17px; height: 17px; } .so-cp b { display: none; }
.copied .so-cp { background: #16a34a; border-color: #16a34a; color: #fff; }.sim-sms { display: flex; align-items: flex-end; gap: 8px; }
.sim-from .otp-logo { width: 26px; height: 26px; border-radius: 50%; }
.sim-sms p { flex: 1; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #f4f4f5; font-size: .8rem; color: #3f3f46; line-height: 1.45; }
.sim-sms small { display: block; margin-top: 3px; font-size: .64rem; color: #a1a1aa; }
.sim-act { display: flex; gap: 8px; }
.sim-act button { flex: 1; height: 38px; border-radius: 11px; border: 1px solid #e4e4e7; background: #fff; font: inherit; font-size: .78rem; font-weight: 700; color: #3f3f46; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: .15s; }
.sim-act button svg { width: 15px; height: 15px; } .sim-act .dn { border: 0; color: #fff; background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 8px 16px -10px #16a34a; }
.sim-act .cx:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
/* ยกเลิก: ล็อกช่วงแรก + กล่องยืนยัน + การ์ดหาย + เครดิตลอย */
.sim-act .cx:disabled { cursor: not-allowed; color: #a1a1aa; background: #fafafa; border-style: dashed; }
.sim-act .cx.unlock { animation: of-bump .4s ease; }
.sim.leaving { animation: cx-out .38s ease forwards; }
@keyframes cx-out { to { opacity: 0; transform: scale(.92) translateY(10px); filter: blur(2px); } }
.cx-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(15,23,42,.45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.cx-modal.show { opacity: 1; } .cx-modal[hidden] { display: none; }
.cx-box { width: min(360px, 100%); display: grid; justify-items: center; gap: 8px; padding: 22px 18px 18px; border-radius: 22px; background: #fff; text-align: center; transform: translateY(14px) scale(.96); transition: transform .25s cubic-bezier(.2,1.3,.4,1); }
.cx-modal.show .cx-box { transform: none; }
.cx-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #dc2626; background: #fef2f2; } .cx-ic svg { width: 24px; height: 24px; }
.cx-box h3 { font-size: 1.08rem; font-weight: 800; }
.cx-box p { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fafafa; border: 1px solid #f0f0f3; text-align: left; }
.cx-box p .otp-logo { flex: none; width: 34px; height: 34px; border-radius: 10px; } .cx-box p > span:not(.otp-logo) { flex: 1; min-width: 0; }
.cx-box p b { display: block; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; white-space: nowrap; } .cx-box p small { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: #71717a; } .cx-box p .fl { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; }
.cx-box p em { font-style: normal; font-weight: 800; color: #16a34a; white-space: nowrap; }
.cx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 6px; }
.cx-row button { height: 44px; border-radius: 12px; border: 1px solid #e4e4e7; background: #fff; font: inherit; font-size: .84rem; font-weight: 700; color: #3f3f46; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cx-row .yes { border: 0; color: #fff; background: linear-gradient(135deg, #f87171, #dc2626); }
.cx-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: st-spin .7s linear infinite; }
.cx-fly { position: fixed; z-index: 9999; transform: translateX(-50%); padding: 4px 10px; border-radius: 99px; font-size: .8rem; font-weight: 800; color: #fff; background: #16a34a; box-shadow: 0 8px 18px -8px #16a34a; pointer-events: none; animation: cx-fly 1.3s ease forwards; }
@keyframes cx-fly { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -40px); } }
.mn-tabs button.ping em { animation: of-bump .5s ease 2; background: #16a34a; }

/* ประวัติ */
.hlist { display: grid; margin-top: 10px; }
.hrow { display: grid; grid-template-columns: 34px minmax(110px, 1.2fr) minmax(130px, 1fr) 70px 110px 90px; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid #f4f4f5; font-size: .8rem; }
.hrow:last-child { border-bottom: 0; } .hrow .otp-logo { width: 34px; height: 34px; border-radius: 10px; }
.hr-n b { display: block; } .hr-n small { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: #a1a1aa; } .hr-n .fl { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; }
.hr-p, .hr-c { font-family: ui-monospace, Consolas, monospace; color: #52525b; } .hr-c { font-weight: 800; color: #18181b; letter-spacing: 1px; }
.hr-s { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: .7rem; font-weight: 800; } .hr-s svg { width: 12px; height: 12px; }
.hr-s.done { color: #15803d; background: #f0fdf4; } .hr-s.cancel { color: #71717a; background: #f4f4f5; }
.hr-m { text-align: right; } .hr-m b { display: block; } .hr-m small { font-size: .68rem; color: #a1a1aa; }
.otp-empty { display: grid; justify-items: center; gap: 4px; } .otp-empty > svg { width: 30px; height: 30px; color: #d4d4d8; } .otp-empty b { color: #52525b; }
@media (max-width: 700px) {
  .sim-grid { grid-template-columns: 1fr; } .sim-num span { font-size: 1.15rem; }
  .hrow { grid-template-columns: 34px 1fr auto; } .hr-p, .hr-c, .hr-s { display: none; }
  .mn-tabs button { padding: 6px 9px; }
}

@media (max-width: 960px) {
  .otp-grid { grid-template-columns: 1fr; } .otp-side { position: static; }
  .otp-hero .otp-ic, .otp-stage { display: none; }
}
@media (max-width: 560px) {
  .otp-hero { padding: 20px 18px; } .otp-hero h1 { font-size: 1.4rem; }
  .otp-svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .otp-svc { padding: 10px 4px; }
  .otp-list { grid-template-columns: 1fr; }
}