/* Social Proof: "N คนกำลังดูบัตร" / "มีคนเพิ่งซื้อ" (ดู renderSocialProof() ใน app.js)
   ใช้ element จริงล้วน ไม่ใช้ mask-image เพราะลูกค้าส่วนใหญ่เปิดผ่าน LINE WebView */
.social-proof{display:flex;flex-direction:column;gap:6px;margin:14px 0 18px;padding:10px 12px;background:#211718;border:1px solid #5c292b;animation:socialProofIn .35s ease-out both}
.social-proof[hidden]{display:none}
/* หน้าแรก: ต้องอยู่นอกการ์ด hero (สติกเกอร์ LIVE LOUD FREE ทับมุมขวาล่างของการ์ด) และเว้นล่างให้พ้น marquee ที่หมุน -2deg */
.social-proof-home{margin:0 0 24px}
.social-proof .sp-row{display:flex;align-items:center;gap:9px;margin:0;font:500 13px/1.45 var(--font-body);color:var(--cream)}
.social-proof .sp-icon{flex:none;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--yellow)}
.social-proof .sp-icon svg{width:16px;height:16px}
.social-proof .sp-row b{font-weight:600;color:var(--yellow)}
.sp-live{position:relative}
.sp-live:before{content:'';width:8px;height:8px;border-radius:50%;background:#3ddc84}
.sp-live:after{content:'';position:absolute;inset:2px;border-radius:50%;background:#3ddc84;animation:socialProofPulse 1.8s ease-out infinite}
@keyframes socialProofPulse{from{transform:scale(1);opacity:.55}to{transform:scale(2.6);opacity:0}}
@keyframes socialProofIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.social-proof{animation:none}.sp-live:after{animation:none;opacity:0}}