/* B4U Orange Black Theme — main.css v3 */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;700;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--o1:#FF6A00;--o2:#FF8C00;--o3:#FFA500;--b1:#0A0A0A;--b3:#1A0800;--gold:#FFD700}
body{font-family:'Kanit',sans-serif;background:var(--b1);color:#fff}
.b4u-wrap{max-width:500px;margin:0 auto;background:linear-gradient(180deg,#0A0A0A 0%,#130800 50%,#0A0A0A 100%);min-height:100vh;position:relative;overflow:hidden}
.b4u-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(255,106,0,.18),transparent 70%),radial-gradient(ellipse 60% 30% at 50% 100%,rgba(255,106,0,.12),transparent 70%);pointer-events:none;z-index:0}

/* ── NAVBAR ── */
.b4u-nav{position:sticky;top:0;z-index:999;padding:0 15px 10px}
.b4u-nav-shell{background:rgba(10,10,10,.95);border:1px solid rgba(255,106,0,.3);box-shadow:0 8px 32px rgba(255,106,0,.15);border-radius:0 0 24px 24px;backdrop-filter:blur(12px)}
.b4u-nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;gap:10px}
.b4u-brand{display:flex;align-items:center;gap:10px;min-width:0}
.b4u-logo-nav{width:42px;height:42px;border-radius:14px;border:2px solid var(--o1);padding:4px;object-fit:cover;background:#111;box-shadow:0 0 12px rgba(255,106,0,.4);flex-shrink:0}
.b4u-brand-name{font-size:clamp(13px,4vw,16px);font-weight:900;color:#fff;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b4u-brand-sub{font-size:clamp(9px,2.5vw,11px);color:var(--o3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── ONLINE BADGE (กระพริบ) ── */
.b4u-status{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(255,106,0,.12);border:1px solid rgba(255,106,0,.4);font-size:clamp(10px,3vw,12px);font-weight:700;color:var(--o3);white-space:nowrap;flex-shrink:0;animation:badgePulse 2.5s ease-in-out infinite}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,106,0,.5),0 0 8px rgba(255,106,0,.3)}50%{box-shadow:0 0 0 6px rgba(255,106,0,0),0 0 18px rgba(255,106,0,.6)}}
.b4u-dot{width:9px;height:9px;border-radius:50%;background:#00E676;box-shadow:0 0 0 3px rgba(0,230,118,.25);animation:dotBlink 1.2s ease-in-out infinite}
@keyframes dotBlink{0%,100%{opacity:1;box-shadow:0 0 0 3px rgba(0,230,118,.25),0 0 8px rgba(0,230,118,.6)}50%{opacity:.4;box-shadow:0 0 0 6px rgba(0,230,118,0)}}
.b4u-online-txt::before{content:'🟢 '}

/* ── CONTAINER ── */
.b4u-container{padding:20px 15px 260px;position:relative;z-index:1}

/* ── TOP LOGO ── */
.b4u-top-logo{text-align:center;margin-bottom:20px}
.b4u-top-logo img{width:clamp(110px,40vw,160px);height:clamp(110px,40vw,160px);border-radius:50%;object-fit:cover;border:3px solid var(--o1);box-shadow:0 0 0 6px rgba(255,106,0,.2),0 0 30px rgba(255,106,0,.4)}

/* ── TEXT BLOCKS ── */
.b4u-text-block{margin-bottom:16px;padding:12px 16px;background:rgba(255,106,0,.08);border:1px solid rgba(255,106,0,.25);border-radius:12px;text-align:center}
.b4u-text-block p{color:#fff;font-size:clamp(13px,4vw,15px);line-height:1.6}
.b4u-text-block.b4u-title p{font-size:clamp(15px,5vw,18px);font-weight:700;color:var(--o3);text-shadow:0 0 20px rgba(255,106,0,.5)}

/* ── MAIN BUTTON ── */
.b4u-btn-block{margin-bottom:20px}
.b4u-main-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:clamp(13px,4vw,17px) 24px;background:linear-gradient(135deg,var(--o1),var(--o2),#FF4500);border:none;border-radius:14px;font-family:'Kanit',sans-serif;font-size:clamp(15px,5vw,19px);font-weight:700;color:#fff;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;box-shadow:0 8px 30px rgba(255,106,0,.5);animation:orangeGlow 2s ease-in-out infinite alternate;transition:transform .2s}
.b4u-main-btn:hover{transform:translateY(-2px)}
.b4u-main-btn::after{content:'';position:absolute;top:-65%;left:-45%;width:45%;height:240%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:rotate(15deg);animation:btnShine 4s infinite}
@keyframes btnShine{0%{left:-60%}60%{left:140%}100%{left:140%}}
@keyframes orangeGlow{from{box-shadow:0 8px 20px rgba(255,106,0,.4)}to{box-shadow:0 8px 40px rgba(255,106,0,.8),0 0 60px rgba(255,106,0,.3)}}

/* ── SLIDER ── */
.b4u-slide-block{margin-bottom:20px}
.b4u-swiper{border-radius:16px;overflow:hidden;border:2px solid rgba(255,106,0,.3);box-shadow:0 8px 30px rgba(255,106,0,.2)}
.swiper-slide img{width:100%;height:auto;display:block}
.swiper-pagination-bullet{background:rgba(255,106,0,.4)!important;opacity:1!important}
.swiper-pagination-bullet-active{background:var(--o1)!important}

/* ── JACKPOT ── */
.b4u-jackpot{margin-bottom:20px}
.b4u-hstats{display:flex;gap:8px;margin-bottom:14px}
.b4u-sbox{flex:1;background:rgba(255,106,0,.08);border:1px solid rgba(255,106,0,.3);border-radius:12px;padding:clamp(8px,3vw,12px);text-align:center;transition:all .3s;min-width:0}
.b4u-sbox.updated{box-shadow:0 0 20px rgba(255,106,0,.5);border-color:rgba(255,106,0,.7)}
.b4u-sicon{font-size:clamp(.9rem,3vw,1.1rem);color:var(--o1);margin-bottom:4px}
.b4u-sval{color:#fff;font-size:clamp(.85rem,3vw,1.05rem);font-weight:700;margin-bottom:2px;transition:color .3s;word-break:break-all}
.b4u-sval.updated{color:var(--o3)}
.b4u-slbl{color:rgba(255,179,71,.7);font-size:clamp(.65rem,2.5vw,.78rem)}
.b4u-jack-main{background:linear-gradient(135deg,#1A0A00,#0D0500);border:1px solid rgba(255,106,0,.4);border-radius:20px;padding:clamp(14px,4vw,20px);box-shadow:0 10px 40px rgba(255,106,0,.2)}
.b4u-jack-title{text-align:center;font-size:clamp(1.2rem,5vw,1.5rem);font-weight:900;color:var(--o3);margin-bottom:15px;text-shadow:0 0 20px rgba(255,106,0,.6)}
.b4u-amt-box{background:linear-gradient(135deg,#FF4500,var(--o1),var(--o2));border-radius:15px;padding:clamp(14px,4vw,20px);text-align:center;position:relative;cursor:pointer;margin-bottom:15px;overflow:hidden;box-shadow:0 8px 30px rgba(255,106,0,.5),inset 0 1px 0 rgba(255,255,255,.2);transition:box-shadow .3s}
.b4u-amt-box::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:amtShine 2.5s infinite}
@keyframes amtShine{to{left:100%}}
.b4u-amt-lbl{color:rgba(0,0,0,.7);font-size:clamp(.8rem,3vw,.95rem);margin-bottom:4px;font-weight:600}
.b4u-amt-val{color:#000;font-size:clamp(1.6rem,7vw,2.2rem);font-weight:900;transition:all .3s;text-shadow:0 2px 4px rgba(0,0,0,.2)}
.b4u-amt-val.updated{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.8)}
.b4u-coin-cont{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.b4u-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.b4u-info-item{background:rgba(255,106,0,.1);border:1px solid rgba(255,106,0,.3);border-radius:12px;padding:clamp(10px,3vw,15px);text-align:center;transition:box-shadow .3s}
.b4u-info-item.updated{box-shadow:0 0 15px rgba(255,106,0,.4)}
.b4u-info-lbl{color:rgba(255,179,71,.8);font-size:clamp(.75rem,2.5vw,.85rem);margin-bottom:5px}
.b4u-info-val{color:var(--o3);font-size:clamp(1rem,4vw,1.2rem);font-weight:700;transition:color .3s}
.b4u-coin{position:absolute;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#000;background:linear-gradient(135deg,var(--o1),var(--gold));border:2px solid rgba(255,255,255,.5);animation:coinAnim 2s ease forwards;z-index:2}
@keyframes coinAnim{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.2)}}

/* ── WITHDRAWAL ── */
.b4u-wd{margin-bottom:20px}
.b4u-wd-outer{background:linear-gradient(135deg,#120800,#1A0500);border:1px solid rgba(255,106,0,.3);border-radius:16px;padding:14px;box-shadow:0 8px 30px rgba(255,106,0,.15)}
.b4u-wd-head{text-align:center;padding:13px;background:linear-gradient(135deg,rgba(255,106,0,.3),rgba(255,69,0,.2));border:1px solid rgba(255,106,0,.4);border-radius:12px;margin-bottom:14px}
.b4u-wd-head h2{font-size:clamp(1.2rem,5vw,1.5rem);font-weight:900;color:var(--o3);text-shadow:0 0 15px rgba(255,106,0,.6)}
.b4u-wd-card{background:rgba(0,0,0,.4);border-radius:14px;overflow:hidden}
.b4u-wd-list{display:flex;flex-direction:column;gap:10px;padding:14px}
.b4u-wd-row{background:linear-gradient(135deg,rgba(30,10,0,.9),rgba(20,5,0,.95));border:1px solid rgba(255,106,0,.35);padding:clamp(10px,3vw,13px);border-radius:12px;display:flex;align-items:center;opacity:0;transform:scale(.98) translateY(8px);animation:wdIn .6s cubic-bezier(.4,0,.2,1) forwards;position:relative;overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s}
.b4u-wd-row::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,106,0,.1),transparent);animation:sweep 3s infinite}
.b4u-wd-row:hover{transform:scale(1.02);box-shadow:0 6px 20px rgba(255,106,0,.3)}
.b4u-wd-row.fade-out{animation:wdOut .4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes wdIn{0%{opacity:0;transform:scale(.98) translateY(8px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes wdOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.96) translateY(8px)}}
@keyframes sweep{to{left:100%}}

/* ── BANK BADGE ── */
.b4u-bank-badge{width:clamp(46px,14vw,58px);height:clamp(46px,14vw,58px);border-radius:12px;border:2px solid rgba(255,150,0,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;margin:0 clamp(8px,3vw,12px);font-weight:900;color:#fff;transition:transform .4s;box-shadow:0 0 14px rgba(255,106,0,.35),inset 0 1px 0 rgba(255,255,255,.15);letter-spacing:.5px;gap:2px;cursor:pointer;position:relative}
.b4u-bank-badge:hover{transform:rotate(360deg)}
/* edit overlay on badge */
.b4u-bank-badge .b4u-edit-hint{display:none;position:absolute;inset:0;background:rgba(0,0,0,.6);border-radius:10px;align-items:center;justify-content:center;font-size:10px;color:#fff}
.b4u-bank-badge:hover .b4u-edit-hint{display:flex}
.b4u-wd-info{flex:1;min-width:0}
.b4u-wd-info p{margin:3px 0;color:rgba(255,179,71,.85);font-size:clamp(.78rem,3vw,.88rem)}
.b4u-wd-info .hi{color:var(--o3);font-weight:700}
.b4u-wd-status{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:clamp(.72rem,2.5vw,.82rem);font-weight:600;color:rgba(255,235,205,.9);padding-left:6px;flex-shrink:0}
.b4u-wd-status.proc i{animation:spin 1s linear infinite;color:var(--o3)}
.b4u-wd-status.done i{color:#4CAF50}
@keyframes spin{to{transform:rotate(360deg)}}
.b4u-wd-foot{text-align:center;padding:8px 0 2px;color:rgba(255,179,71,.6);font-size:.78rem;margin-top:10px}

/* ── BANK EDIT MODAL ── */
.b4u-bank-modal-bg{display:none!important;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;padding:20px;visibility:hidden;opacity:0;transition:opacity .2s}
.b4u-bank-modal-bg.open{display:flex!important;visibility:visible;opacity:1}
.b4u-bank-modal{background:linear-gradient(135deg,#1A0A00,#111);border:2px solid rgba(255,106,0,.5);border-radius:20px;padding:24px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(255,106,0,.3)}
.b4u-bank-modal h3{color:var(--o3);font-size:1.1rem;font-weight:900;margin-bottom:16px;text-align:center}
.b4u-bank-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.b4u-bank-opt{border-radius:10px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;border:2px solid transparent;transition:all .2s;font-size:10px;font-weight:700;color:#fff}
.b4u-bank-opt:hover,.b4u-bank-opt.active{border-color:var(--o3);box-shadow:0 0 12px rgba(255,106,0,.5);transform:scale(1.05)}
.b4u-bank-opt span.ico{font-size:20px;line-height:1}
.b4u-bank-opt-url{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.b4u-bank-opt-url label{font-size:12px;color:rgba(255,179,71,.8)}
.b4u-bank-opt-url input{background:rgba(255,106,0,.08);border:1px solid rgba(255,106,0,.3);border-radius:8px;padding:8px 10px;color:#fff;font-family:'Kanit',sans-serif;font-size:13px;width:100%}
.b4u-bank-opt-url input:focus{outline:none;border-color:var(--o1)}
.b4u-modal-btns{display:flex;gap:10px}
.b4u-modal-save{flex:1;padding:11px;background:linear-gradient(135deg,var(--o1),var(--o2));border:none;border-radius:10px;font-family:'Kanit',sans-serif;font-size:14px;font-weight:700;color:#fff;cursor:pointer}
.b4u-modal-cancel{flex:1;padding:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:10px;font-family:'Kanit',sans-serif;font-size:14px;color:#fff;cursor:pointer}

/* ── PROVIDER ── */
.b4u-provider{margin-bottom:20px}
.b4u-prov-outer{background:linear-gradient(180deg,#0A0A0A,#1A0800);border:2px solid rgba(255,106,0,.4);border-radius:15px;padding:14px;overflow:hidden;box-shadow:0 8px 30px rgba(255,106,0,.15)}
.b4u-prov-wrap{overflow:hidden;padding-top:12px;margin-top:-12px}
.b4u-prov-list{display:inline-flex;gap:12px;animation:provSlide 20s linear infinite;white-space:nowrap}
.b4u-prov-outer:hover .b4u-prov-list{animation-play-state:paused}
.b4u-prov-item{position:relative;display:inline-block;background:linear-gradient(145deg,rgba(255,106,0,.15),rgba(0,0,0,.8));border:1px solid rgba(255,106,0,.4);padding:5px;border-radius:10px;transition:transform .3s,box-shadow .3s;flex-shrink:0;margin-top:10px}
.b4u-prov-item:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(255,106,0,.5)}
.b4u-prov-img{width:clamp(100px,28vw,140px);height:clamp(42px,12vw,56px);object-fit:cover;border-radius:7px;display:block}
.b4u-hot-icon{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;z-index:10;border:2px solid rgba(255,106,0,.6)}
@keyframes provSlide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── CTA FIXED ── */
.b4u-cta{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:500px;padding:14px 20px 20px;background:linear-gradient(180deg,transparent,rgba(10,10,10,.98) 55%);z-index:80}
.b4u-cta-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:clamp(13px,4vw,16px);background:linear-gradient(135deg,#FF4500,var(--o1),var(--o2));border:none;border-radius:16px;font-family:'Kanit',sans-serif;font-size:clamp(14px,4.5vw,16px);font-weight:900;color:#fff;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;box-shadow:0 12px 40px rgba(255,106,0,.5);margin-bottom:8px;transition:transform .15s}
.b4u-cta-btn:hover{transform:translateY(-1px)}
.b4u-cta-btn::after{content:'';position:absolute;top:-65%;left:-45%;width:45%;height:240%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);transform:rotate(15deg);animation:btnShine 4s infinite}
.b4u-cta-sub{font-size:clamp(10px,3vw,12px);color:rgba(255,179,71,.7);text-align:center}

/* ── RESPONSIVE ── */
@media(max-width:400px){
    .b4u-nav-inner{padding:10px 12px}
    .b4u-container{padding:16px 12px 240px}
    .b4u-hstats{gap:6px}
    .b4u-info-grid{gap:8px}
    .b4u-bank-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:501px){
    .b4u-wrap{margin:0 auto}
    .b4u-cta{max-width:500px}
}

/* ══════════════════════════════════════
   LAYOUT MODE
   B4U Mobile theme แสดงผลทุกขนาดจอ (มือถือ + PC)
   หน้า PC Fashion Shop เดิม: เก็บโค้ดไว้ในไฟล์ แต่ปิดการแสดงผลถาวร
══════════════════════════════════════ */

/* ปิดหน้า PC Fashion Shop ทุกขนาดจอ (เก็บโค้ดไว้ ไม่ลบ) */
.b4u-pc-layout { display: none !important; }

/* แสดงหน้า B4U Mobile theme ทุกขนาดจอ รวมถึง PC */
.b4u-mobile-layout { display: block !important; }