.up-ov[hidden]{display:none}
.up-ov{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at 50% 25%,rgba(255,180,60,.12),transparent 60%),rgba(6,6,8,.74);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);opacity:0;transition:opacity .2s}
.up-ov.on{opacity:1}
.up-box{position:relative;width:100%;max-width:480px;max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;padding:30px 26px 24px;border-radius:24px;color:#ece8df;font-family:inherit;
 background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 30%),linear-gradient(180deg,#232326,#18181b);border:1px solid rgba(255,255,255,.09);
 box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 2px 4px rgba(0,0,0,.35),0 12px 24px rgba(0,0,0,.4),0 40px 80px rgba(0,0,0,.55),0 0 90px -30px rgba(255,200,58,.4);
 transform:translateY(14px) scale(.97);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.up-ov.on .up-box{transform:none}
.up-x{position:absolute;top:16px;right:16px;width:34px;height:34px;padding:0 0 2px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.08);cursor:pointer;color:#a9a59b;font:400 22px/1 inherit;background:rgba(255,255,255,.05);transition:background .15s,color .15s,transform .15s}
.up-x:hover{background:rgba(255,255,255,.12);color:#fff}.up-x:active{transform:scale(.92)}
.up-hd{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding-right:40px}
.up-crown{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:14px;color:#3b2100;background:linear-gradient(180deg,#ffe98a,#ffc83a 50%,#f4a00c);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(150,80,0,.3),0 6px 14px -2px rgba(245,162,15,.5)}
.up-crown svg{width:24px;height:24px}
.up-ttl{margin:0;font-size:21px;line-height:1.25;font-weight:700;color:#f6f2e9}
.up-sub{margin:2px 0 0;font-size:13px;color:#8d897f}
.up-price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0 0 16px;padding:18px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(255,200,58,.12),rgba(255,200,58,.04));border:1px solid rgba(255,200,58,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.up-price small{font-size:13px;color:#b4a98a}
.up-price b{font-size:44px;line-height:1;font-weight:800;letter-spacing:.01em;color:#ffd45c;text-shadow:0 2px 14px rgba(255,200,58,.35)}
.up-price span{font-size:17px;font-weight:700;color:#e6d9b0}
.up-mt{display:flex;gap:4px;margin:0 0 16px;padding:4px;border-radius:14px;background:rgba(0,0,0,.35);box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.06)}
.up-mt button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px 9px;border-radius:10px;border:0;cursor:pointer;color:#9a968c;font:600 12.5px/1.2 inherit;background:transparent;transition:color .15s,background .2s,box-shadow .2s}
.up-mt button svg,.up-mt button i{width:22px;height:22px;flex:none}
.up-mt button i{display:grid;place-items:center;border-radius:7px;font:800 11px/1 inherit;font-style:normal;color:#fff;background:linear-gradient(180deg,#ff8a2b,#f0600a)}
.up-mt button:hover{color:#e8e3d8}
.up-mt button[aria-selected="true"]{color:#fff;background:linear-gradient(180deg,#3c3c41,#2d2d31);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 2px 6px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.05)}
.up-bk.tm{background:linear-gradient(180deg,#ff8a2b,#f0600a);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -2px rgba(240,96,10,.55);font-size:13px}
.up-bk.cc{background:linear-gradient(180deg,#6b7cff,#3a46d6);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -2px rgba(58,70,214,.55)}
.up-bk.cc svg{width:20px;height:20px}
.up-off{margin:0 0 14px;padding:14px;border-radius:12px;font-size:13.5px;line-height:1.55;text-align:center;color:#b4b0a5;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.16)}
.up-nets{margin:12px 0 0;text-align:center;font-size:12.5px;color:#8d897f}
.up-go.cc{color:#fff;background:linear-gradient(180deg,#7b8aff,#3f4ce0);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(10,20,120,.3) inset,0 6px 16px -2px rgba(63,76,224,.5),0 2px 4px rgba(0,0,0,.4)}
.up-qr{margin:0 0 16px;padding:18px 16px 16px;border-radius:18px;text-align:center;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.up-pp{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:5px 14px;border-radius:999px;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(180deg,#2a6fb0,#16426f);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.up-qb{display:inline-block;padding:10px;border-radius:16px;background:#fff;box-shadow:0 10px 26px -6px rgba(0,0,0,.7),0 0 0 4px rgba(255,255,255,.06)}
.up-qb canvas{display:block;width:210px;height:210px;max-width:100%;image-rendering:pixelated}
.up-qc{margin:12px 0 12px;font-size:13px;line-height:1.5;color:#b4b0a5}
.up-qc b{color:#ffd45c;font-size:15px}
.up-sv{padding:9px 18px}
.up-warn{margin:0 0 14px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.5;color:#ffe08a;background:rgba(255,200,58,.09);border:1px solid rgba(255,200,58,.28)}
.up-warn b{color:#fff}
.up-card{margin:0 0 16px;padding:16px;border-radius:18px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.up-bank{display:flex;align-items:center;gap:11px;margin:0 0 14px}
.up-bk{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(180deg,#2fbf6a,#138a47);color:#fff;font:800 18px/1 inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -2px rgba(19,138,71,.55)}
.up-bank b{display:block;font-size:15px;color:#f2eee4}.up-bank small{display:block;font-size:12.5px;color:#8d897f;margin-top:1px}
.up-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07)}
.up-row:first-of-type{border-top:0}
.up-row small{display:block;font-size:12px;color:#8d897f;margin-bottom:2px}
.up-row strong{font-size:19px;font-weight:700;letter-spacing:.04em;color:#f6f2e9;font-variant-numeric:tabular-nums}
.up-cp{flex:none;padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);cursor:pointer;color:#e8e3d8;font:600 13px/1 inherit;background:rgba(255,255,255,.06);transition:background .15s,color .15s,border-color .15s}
.up-cp:hover{background:rgba(255,255,255,.12)}
.up-cp.ok{color:#7dffa8;border-color:rgba(60,255,120,.4);background:rgba(60,255,120,.1)}
.up-st{margin:0 0 16px;padding:0;list-style:none;counter-reset:s}
.up-st li{position:relative;margin:0 0 8px;padding-left:32px;font-size:13.5px;line-height:1.5;color:#b4b0a5;counter-increment:s}
.up-st li::before{content:counter(s);position:absolute;left:0;top:0;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:700;color:#ffd45c;background:rgba(255,200,58,.12);border:1px solid rgba(255,200,58,.3)}
.up-slip{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:0 0 14px;padding:12px 14px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.2);cursor:pointer;color:#b4b0a5;font:600 14px/1.3 inherit;background:rgba(255,255,255,.03);text-align:left;transition:border-color .15s,background .15s,color .15s}
.up-slip:hover{border-color:var(--upac,#ffc83a);background:rgba(255,200,58,.06);color:#f2eee4}
.up-slip svg{flex:none;width:22px;height:22px}
.up-slip img{flex:none;width:44px;height:44px;border-radius:9px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.up-slip span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-msg:empty{display:none}
.up-msg{margin:0 0 12px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;color:#ffb3a8;background:rgba(255,70,50,.1);border:1px solid rgba(255,90,70,.28)}
.up-msg.info{color:#ffe08a;background:rgba(255,200,58,.09);border-color:rgba(255,200,58,.28)}
.up-go{display:block;width:100%;padding:14px 16px;border-radius:14px;border:0;cursor:pointer;color:#241a05;font:700 16px/1.2 inherit;background:linear-gradient(180deg,#ffd45c,#f5a21f);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 0 rgba(150,80,0,.25) inset,0 6px 16px -2px rgba(245,154,35,.45),0 2px 4px rgba(0,0,0,.4);transition:transform .12s,box-shadow .12s,filter .15s}
.up-go:hover{filter:brightness(1.07);transform:translateY(-1px)}.up-go:active{transform:translateY(1px);filter:brightness(.97)}
.up-go:disabled{cursor:wait;filter:saturate(.5) brightness(.85);transform:none}
.up-note{margin:12px 0 0;text-align:center;font-size:12px;color:#77736a}
.up-done{text-align:center;padding:14px 4px 6px}
.up-ck{width:64px;height:64px;margin:6px auto 16px;display:grid;place-items:center;border-radius:50%;color:#0d2a17;background:linear-gradient(180deg,#7dffa8,#2fcf6a);box-shadow:0 0 0 8px rgba(60,255,120,.1),0 10px 24px -4px rgba(47,207,106,.55)}
.up-ck svg{width:32px;height:32px}
.up-done h3{margin:0 0 8px;font-size:20px;color:#f6f2e9}.up-done p{margin:0 0 6px;font-size:14px;line-height:1.55;color:#b4b0a5}
.up-pill{display:inline-block;margin:6px 0 18px;padding:5px 14px;border-radius:999px;font-size:13px;font-weight:700;color:#ffe08a;background:rgba(255,200,58,.12);border:1px solid rgba(255,200,58,.3)}
.up-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 16px}
.up-pc{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:18px 6px 12px;border-radius:16px;border:1.5px solid rgba(255,255,255,.1);cursor:pointer;color:#cfcabd;font:inherit;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));transition:border-color .15s,background .2s,box-shadow .2s,transform .12s}
.up-pc:hover{border-color:rgba(255,200,58,.45);transform:translateY(-1px)}
.up-pc[aria-checked="true"]{border-color:#ffc83a;color:#fff;background:linear-gradient(180deg,rgba(255,200,58,.2),rgba(255,200,58,.06));box-shadow:0 0 0 3px rgba(255,200,58,.14),0 10px 22px -8px rgba(245,162,15,.55)}
.up-pt{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap;color:#3b2100;background:linear-gradient(180deg,#ffe98a,#ffc83a 55%,#f4a00c);box-shadow:0 3px 8px -2px rgba(245,162,15,.6)}
.up-pt.alt{color:#fff;background:linear-gradient(180deg,#9b7bff,#6a45e0);box-shadow:0 3px 8px -2px rgba(106,69,224,.6)}
.up-pd{font-size:14px;font-weight:700;color:#f2eee4}
.up-pa{display:flex;align-items:baseline;justify-content:center;gap:3px;margin-top:2px}
.up-pa b{font-size:25px;line-height:1.1;font-weight:800;letter-spacing:.01em;color:#ffd45c;text-shadow:0 2px 12px rgba(255,200,58,.3)}
.up-pa small{font-size:12px;color:#b4a98a}
.up-pm{font-size:11.5px;line-height:1.35;color:#8d897f}
.up-pc[aria-checked="true"] .up-pm{color:#c9bf9f}
.up-pv{min-height:18px;font-size:11.5px;font-weight:700;color:#7dffa8}
.up-pn{flex-basis:100%;margin:0 0 6px;text-align:center;font-size:12.5px;font-weight:600;color:#b4a98a}
.up-price{flex-wrap:wrap}
@media(max-width:420px){.up-pa b{font-size:21px}.up-pd{font-size:13px}.up-pc{padding:18px 4px 10px}.up-pt{font-size:10px;padding:2px 7px}}
.up-box button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,200,58,.45)}
@media(max-width:420px){.up-box{padding:26px 18px 20px;border-radius:20px}.up-price b{font-size:38px}}

/* ===== สล็อตเลขวิ่ง + กรอบยอดชำระมีมิติ ===== */
.up-price{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;border:1px solid rgba(255,214,92,.38);
 background:linear-gradient(180deg,rgba(255,214,92,.16) 0%,rgba(40,28,6,.55) 38%,rgba(14,10,3,.78) 100%);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.55),inset 0 14px 22px -10px rgba(0,0,0,.7),inset 0 -14px 22px -12px rgba(255,200,58,.18),0 1px 0 rgba(255,235,160,.35),0 14px 30px -10px rgba(0,0,0,.7),0 0 0 3px rgba(0,0,0,.35)}
.up-price::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.1) 46%,transparent 62%);transform:translateX(-120%)}
.up-price.hit::before{animation:upSheen .9s .1s ease-out}
.up-price.hit{animation:upBump .55s cubic-bezier(.3,1.6,.5,1)}
.up-price.roll{box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.55),inset 0 14px 22px -10px rgba(0,0,0,.7),0 0 0 3px rgba(0,0,0,.35),0 0 34px rgba(255,200,58,.38),0 14px 30px -10px rgba(0,0,0,.7)}
@keyframes upSheen{to{transform:translateX(120%)}}
@keyframes upBump{0%{transform:scale(1)}35%{transform:scale(1.045)}100%{transform:scale(1)}}
.up-price b{display:inline-flex;align-items:center;font-variant-numeric:tabular-nums}
.up-cm{display:inline-block;line-height:1.1;margin:0 .02em;opacity:.85}
.up-pc.tick{animation:upTick .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes upTick{0%{transform:scale(1)}40%{transform:translateY(-3px) scale(1.05)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.up-price.hit,.up-price.hit::before,.up-pc.tick{animation:none}}

/* ===== เน้นยอดที่ต้องชำระ ===== */
.up-price{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 10px;padding:16px 12px 20px;border-color:rgba(255,214,92,.6)}
.up-price .up-pn{order:0}
.up-price .up-lb{order:1;flex-basis:100%;text-align:center;margin:2px 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;color:#2a1a00}
.up-price .up-lb::before{content:"";display:inline-block}
.up-price .up-lb{display:block}
.up-price .up-lb{width:max-content;flex-basis:auto;margin:2px auto 6px;padding:4px 16px;border-radius:999px;background:linear-gradient(180deg,#ffe98a,#ffc83a 55%,#f4a00c);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 10px -2px rgba(245,162,15,.55)}
.up-price .up-lb{flex-basis:100%;max-width:max-content}
.up-price b{order:2;font-size:64px;line-height:1.1;letter-spacing:.01em;color:#ffe27a;text-shadow:0 0 22px rgba(255,200,58,.65),0 3px 0 rgba(120,60,0,.55),0 8px 18px rgba(0,0,0,.5)}
.up-price b .up-rl,.up-price b .up-cm,.up-price b i{font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit}
.up-price>span:last-child{order:3;font-size:22px;font-weight:800;color:#f3e3a6}
@media(max-width:420px){.up-price b{font-size:52px}}
/* ===== สิทธิพิเศษสำหรับสมาชิก ===== */
.up-perk{position:relative;margin:0 0 18px;padding:18px 16px 14px;border-radius:20px;border:1px solid rgba(255,214,92,.45);
 background:linear-gradient(180deg,rgba(255,214,92,.18) 0%,rgba(40,28,6,.55) 34%,rgba(14,10,3,.78) 100%);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.55),inset 0 14px 22px -12px rgba(0,0,0,.6),0 1px 0 rgba(255,235,160,.3),0 14px 30px -12px rgba(0,0,0,.7),0 0 0 3px rgba(0,0,0,.3)}
.up-perk h3{margin:0 0 14px;text-align:center;font-size:20px;font-weight:800;letter-spacing:.02em;color:#ffe27a;text-shadow:0 0 18px rgba(255,200,58,.55),0 2px 0 rgba(120,60,0,.55),0 5px 12px rgba(0,0,0,.5)}
.up-perk ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.up-perk li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;font-size:17px;font-weight:600;line-height:1.35;color:#f5efe0;text-shadow:0 1px 2px rgba(0,0,0,.6);
 background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.07);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.35),0 4px 10px -4px rgba(0,0,0,.6)}
.up-perk li i{position:relative;flex:0 0 26px;height:26px;border-radius:50%;background:linear-gradient(180deg,#ffe98a,#ffc83a 55%,#f4a00c);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(150,80,0,.35),0 3px 8px rgba(245,162,15,.5)}
.up-perk li i::after{content:"";position:absolute;left:8px;top:6px;width:10px;height:5px;border-left:3px solid #3b2100;border-bottom:3px solid #3b2100;transform:rotate(-45deg)}
.up-perk li small{display:block;margin-top:2px;font-size:14px;font-weight:500;color:#e8cf86}
@media(max-width:420px){.up-perk h3{font-size:18px}.up-perk li{font-size:16px;padding:9px 10px}}
/* ===== สิทธิ์ผู้ใช้ฟรี (โทนเงิน เด่นน้อยกว่ากล่องสมาชิก) ===== */
.up-perk.up-free{padding:14px 14px 12px;border-color:rgba(255,255,255,.16);
 background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(34,34,38,.7) 40%,rgba(18,18,21,.85) 100%);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.1),inset 0 -2px 0 rgba(0,0,0,.5),0 10px 22px -12px rgba(0,0,0,.7),0 0 0 3px rgba(0,0,0,.25)}
.up-perk.up-free h3{font-size:17px;color:#e4e1d8;text-shadow:0 2px 0 rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.45)}
.up-perk.up-free ul{gap:7px}
.up-perk.up-free li{font-size:16px;font-weight:500;padding:9px 12px}
.up-perk.up-free li i{background:linear-gradient(180deg,#e9e7e0,#bdb9ad 55%,#8f8b80);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(60,55,45,.4),0 3px 8px rgba(0,0,0,.45)}
.up-perk.up-free li i::after{border-color:#26241f}
/* ===== แอนิเมชันขยายหน้าต่างตอนสลับแพ็กเกจ ===== */
.up-box.up-lift{animation:upLift .62s cubic-bezier(.22,1.15,.36,1)}
@keyframes upLift{
 0%{transform:perspective(1100px) translateY(0) scale(1);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 12px 24px rgba(0,0,0,.4),0 40px 80px rgba(0,0,0,.55),0 0 90px -30px rgba(255,200,58,.4)}
 38%{transform:perspective(1100px) translateY(-8px) scale(1.018) rotateX(1.6deg);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 26px 44px rgba(0,0,0,.5),0 70px 120px rgba(0,0,0,.65),0 0 120px -20px rgba(255,200,58,.6)}
 100%{transform:perspective(1100px) translateY(0) scale(1);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 12px 24px rgba(0,0,0,.4),0 40px 80px rgba(0,0,0,.55),0 0 90px -30px rgba(255,200,58,.4)}}
.up-body .up-in{opacity:0;animation:upIn .5s cubic-bezier(.2,.9,.3,1.15) forwards}
@keyframes upIn{from{opacity:0;transform:perspective(700px) translateY(22px) rotateX(-14deg) scale(.95)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.up-box.up-lift,.up-body .up-in{animation:none;opacity:1}}
/* ===== เอฟเฟกต์ปลดล็อกสิทธิ์พิเศษ (ฟรี -> สมาชิก) ===== */
.up-perk:not(.up-free).up-unlock{animation:upPerkGlow 1.7s ease-out both}
@keyframes upPerkGlow{
 18%{border-color:#fff3b0;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.55),inset 0 14px 22px -12px rgba(0,0,0,.6),0 1px 0 rgba(255,235,160,.8),0 14px 50px -4px rgba(255,200,58,.7),0 0 0 3px rgba(255,214,92,.6)}
 38%{border-color:#ffd45c;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.55),inset 0 14px 22px -12px rgba(0,0,0,.6),0 1px 0 rgba(255,235,160,.7),0 16px 70px 2px rgba(255,200,58,.85),0 0 0 4px rgba(255,214,92,.45)}}
.up-perk:not(.up-free).up-unlock::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;mix-blend-mode:screen;
 background:linear-gradient(105deg,transparent 40%,rgba(255,244,190,.7) 50%,transparent 60%) 130% 0/260% 100% no-repeat;animation:upShine 1.2s .35s ease-out forwards}
@keyframes upShine{from{background-position:130% 0}to{background-position:-30% 0}}
.up-unlock h3{animation:upTtl 1.3s .12s both}
@keyframes upTtl{0%{letter-spacing:.16em;filter:blur(3px)}45%{filter:none;text-shadow:0 0 30px #ffd45c,0 0 64px rgba(255,200,58,.95),0 2px 0 rgba(120,60,0,.55)}100%{letter-spacing:.02em}}
.up-unlock li.up-new{animation:upPerkIn .65s cubic-bezier(.2,.9,.3,1.18) both;animation-delay:calc(var(--k,0)*90ms + 330ms)}
@keyframes upPerkIn{0%{opacity:0;transform:translateX(-24px) scale(.95);filter:brightness(2.2)}55%{opacity:1;filter:brightness(1.45)}100%{opacity:1;transform:none;filter:none}}
.up-unlock li.up-new i{animation:upBadge .75s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--k,0)*90ms + 500ms)}
@keyframes upBadge{0%{transform:scale(0) rotate(-220deg)}68%{transform:scale(1.45) rotate(12deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 8px rgba(255,214,92,.35),0 0 24px 7px rgba(255,214,92,.95)}100%{transform:none}}
.up-flare{position:absolute;inset:-14px;border-radius:30px;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 12%,rgba(255,224,110,.6),rgba(255,200,58,.18) 45%,transparent 70%)}
.up-sp{position:absolute;z-index:6;pointer-events:none;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.up-sp.dot{clip-path:none;border-radius:50%}
.up-soft{animation:upSoft .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes upSoft{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.up-soft{animation:none}}
/* ===== จอกว้าง: ซ้าย = แพ็กเกจ + สิทธิ์ / ขวา = ช่องทางชำระเงิน (QR หรือบัตร) ===== */
.up-cols{display:block}
@media(min-width:760px){
 .up-box:has(.up-cols){max-width:960px;padding:30px 30px 26px}
 .up-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 30px;align-items:start}
 .up-cols .up-l,.up-cols .up-r{min-width:0}
 .up-cols .up-plans{margin-top:2px}
 .up-r>.up-mt:first-child{margin-top:2px}
 .up-r.up-fr{align-self:center;display:flex;align-items:center;justify-content:center;padding:20px 0}
 .up-r.up-fr .up-go{max-width:360px}
}
/* ===== บอกยอดที่ประหยัดในกรอบยอดชำระ ===== */
.up-price .up-sv2{order:4;flex-basis:100%;text-align:center;margin:10px 0 0;animation:upSvIn .55s cubic-bezier(.3,1.5,.5,1) both}
.up-svp{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 6px;padding:0;font-size:17px;font-weight:800;line-height:1.4;color:#8dffb4;text-shadow:0 0 16px rgba(125,255,168,.4),0 2px 0 rgba(0,0,0,.55)}
.up-svp .up-svn{font-size:26px;line-height:1;font-variant-numeric:tabular-nums;color:#a6ffc5}
.up-sv2 small{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:#d8cfae}
@keyframes upSvIn{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}}
@media(max-width:420px){.up-svp{font-size:15.5px}.up-svp .up-svn{font-size:23px}.up-sv2 small{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.up-price .up-sv2{animation:none}}
@media(prefers-reduced-motion:reduce){.up-perk.up-unlock,.up-unlock h3,.up-unlock li.up-new,.up-unlock li.up-new i,.up-perk.up-unlock::before{animation:none}.up-sp,.up-flare{display:none}}
/* ===== การ์ดแพ็กเกจฟรี (ช่องที่ 1) + ปรับ 4 ช่องให้พอดีจอแคบ ===== */
.up-pc[data-p="free"] .up-pa b{color:#e8e5dc;text-shadow:0 2px 10px rgba(255,255,255,.12)}
.up-pc[data-p="free"][aria-checked="true"]{border-color:#d9d5c8;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:0 0 0 3px rgba(255,255,255,.1),0 10px 22px -8px rgba(0,0,0,.6)}
.up-pc[data-p="free"][aria-checked="true"] .up-pm{color:#d6d2c6}
@media(max-width:480px){.up-box{padding:26px 14px 20px}.up-plans{gap:5px}.up-pc{padding:18px 3px 10px}.up-pa b{font-size:18px}.up-pa small{font-size:10px}.up-pd{font-size:12.5px}.up-pm{font-size:10px}.up-pv{font-size:10px}.up-pt{font-size:9.5px;padding:2px 6px}}

@media(prefers-reduced-motion:reduce){.up-ov,.up-box,.up-go,.up-x{transition:none}}